From 73bf956af5ff2595c4840397924127e7cf329598 Mon Sep 17 00:00:00 2001
From: epicsam123 <92618898+epicsam123@users.noreply.github.com>
Date: Wed, 19 Feb 2025 21:08:45 -0500
Subject: [PATCH] captions: provide "w", "o", "-", "+" keydowns for player from
 YT

---
 assets/css/player.css | 18 +++++++++++++++---
 assets/js/player.js   | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/assets/css/player.css b/assets/css/player.css
index 9cb400ad..028d5631 100644
--- a/assets/css/player.css
+++ b/assets/css/player.css
@@ -71,8 +71,10 @@
   padding-top: 2em
 }
 
-.video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control {height: 5px;
-margin-bottom: 10px;}
+.video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control {
+  height: 5px;
+  margin-bottom: 10px;
+}
 
 ul.vjs-menu-content::-webkit-scrollbar {
   display: none;
@@ -82,10 +84,20 @@ ul.vjs-menu-content::-webkit-scrollbar {
   cursor: none;
 }
 
+/* Customizable CSS in player.js */
+.vjs-text-track-display > div > div
+{
+  background-color: rgba(0, 0, 0, 0); /* caption window background: toggle with "w" event */
+}
+
+/* Customizable CSS in player.js */
 .video-js .vjs-text-track-display > div > div > div {
-  background-color: rgba(0, 0, 0, 0.75) !important;
+  font-size: 27px !important; /* Toggle with "-/=" event */
+  background-color: rgba(0, 0, 0, 0.75) !important; /* caption background: toggle with "w" event */
+  color: rgb(255, 255, 255, 1) !important; /* caption text: toggle with "o" event */
   border-radius: 9px !important;
   padding: 5px !important;
+  line-height: 1.5 !important;
 }
 
 .vjs-play-control,
diff --git a/assets/js/player.js b/assets/js/player.js
index 353a5296..c74a68a4 100644
--- a/assets/js/player.js
+++ b/assets/js/player.js
@@ -2,9 +2,16 @@
 var player_data = JSON.parse(document.getElementById('player_data').textContent);
 var video_data = JSON.parse(document.getElementById('video_data').textContent);
 
+var player_css = [...Array.from(document.styleSheets).find(sS => sS.href?.includes('player.css')).cssRules]
+var caption_background_css = player_css.find(rule => rule.selectorText === '.vjs-text-track-display > div > div');
+var caption_text_css = player_css.find(rule => rule.selectorText === '.video-js .vjs-text-track-display > div > div > div');
+
 var options = {
     liveui: true,
     playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
+    captionSizes: ['22px', '27px', '32px', '37px'],
+    captionBackground: [0, 0.5, 0.8, 1].map(a => 'rgba(0, 0, 0, ' + a + ')'),
+    captionOpacity: [0.4, 0.7, 1].map(a => 'rgba(255, 255, 255, ' + a + ')'),
     controlBar: {
         children: [
             'playToggle',
@@ -591,6 +598,31 @@ function increase_playback_rate(steps) {
     player.playbackRate(options.playbackRates[newIndex]);
 }
 
+function increase_caption_size(steps) {
+    const maxIndex = options.captionSizes.length - 1;
+    const font_size = caption_text_css.style.getPropertyValue('font-size');
+    const curIndex = options.captionSizes.indexOf(font_size);
+    let newIndex = curIndex + steps;
+    newIndex = helpers.clamp(newIndex, 0, maxIndex);
+    caption_text_css.style.setProperty('font-size', options.captionSizes[newIndex], 'important');
+}
+
+function toggle_caption_window() {
+    const numOptions = options.captionBackground.length;
+    const backgroundColor = caption_background_css.style.getPropertyValue('background-color');
+    const curIndex = options.captionBackground.indexOf(backgroundColor);
+    const newIndex = (curIndex + 1) % numOptions;
+    caption_background_css.style.setProperty('background-color', options.captionBackground[newIndex], 'important');
+}
+
+function toggle_caption_opacity() {
+    const numOptions = options.captionOpacity.length;
+    const opacity = caption_text_css.style.getPropertyValue('color');
+    const curIndex = options.captionOpacity.indexOf(opacity);
+    const newIndex = (curIndex + 1) % numOptions;
+    caption_text_css.style.setProperty('color', options.captionOpacity[newIndex], 'important');
+}
+
 addEventListener('keydown', function (e) {
     if (e.target.tagName.toLowerCase() === 'input') {
         // Ignore input when focus is on certain elements, e.g. form fields.
@@ -686,6 +718,12 @@ addEventListener('keydown', function (e) {
 
         case '>': action = increase_playback_rate.bind(this, 1); break;
         case '<': action = increase_playback_rate.bind(this, -1); break;
+        
+        case '=': action = increase_caption_size.bind(this, 1); break;
+        case '-': action = increase_caption_size.bind(this, -1); break;
+
+        case 'w': action = toggle_caption_window; break;
+        case 'o': action = toggle_caption_opacity; break;
 
         default:
             console.info('Unhandled key down event: %s:', decoratedKey, e);