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 1/3] 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); From bc3b3f6d69977e799f4d4e99d5c0283916d0ca83 Mon Sep 17 00:00:00 2001 From: epicsam123 <92618898+epicsam123@users.noreply.github.com> Date: Thu, 20 Mar 2025 10:09:43 -0400 Subject: [PATCH 2/3] updated caption features to use videojs interface --- assets/css/player.css | 11 +-------- assets/js/player.js | 52 ++++++++++++++++++++++++------------------- 2 files changed, 30 insertions(+), 33 deletions(-) diff --git a/assets/css/player.css b/assets/css/player.css index 028d5631..60f3ce73 100644 --- a/assets/css/player.css +++ b/assets/css/player.css @@ -84,17 +84,8 @@ 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 { - 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 */ + background-color: rgba(0, 0, 0, 0.75) !important; border-radius: 9px !important; padding: 5px !important; line-height: 1.5 !important; diff --git a/assets/js/player.js b/assets/js/player.js index c74a68a4..dce432cb 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -2,16 +2,12 @@ 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 + ')'), + fontPercent: [0.5, 0.75, 1.25, 1.5, 1.75, 2, 3, 4], + windowOpacity: ['0', '0.5', '1'], + textOpacity: ['0.5', '1'], controlBar: { children: [ 'playToggle', @@ -543,9 +539,9 @@ const toggle_captions = (function () { bindChange('off'); track.mode = mode; setTimeout(function () { - bindChange('on'); + bindChange('on'); }, 0); - } + } bindChange('on'); return function () { @@ -586,6 +582,13 @@ const toggle_captions = (function () { }; })(); +// For real-time updates to captions (if currently showing) +function update_captions() { + if (document.body.querySelector('.vjs-text-track-cue')) { + toggle_captions(); toggle_captions(); + } +} + function toggle_fullscreen() { player.isFullscreen() ? player.exitFullscreen() : player.requestFullscreen(); } @@ -599,28 +602,31 @@ function increase_playback_rate(steps) { } 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); + const maxIndex = options.fontPercent.length - 1; + const fontPercent = player.textTrackSettings.getValues().fontPercent || 1.25; + const curIndex = options.fontPercent.indexOf(fontPercent); let newIndex = curIndex + steps; newIndex = helpers.clamp(newIndex, 0, maxIndex); - caption_text_css.style.setProperty('font-size', options.captionSizes[newIndex], 'important'); + player.textTrackSettings.setValues({ fontPercent: options.fontPercent[newIndex] }); + update_captions(); } 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 numOptions = options.windowOpacity.length; + const windowOpacity = player.textTrackSettings.getValues().windowOpacity || '0'; + const curIndex = options.windowOpacity.indexOf(windowOpacity); const newIndex = (curIndex + 1) % numOptions; - caption_background_css.style.setProperty('background-color', options.captionBackground[newIndex], 'important'); + player.textTrackSettings.setValues({ windowOpacity: options.windowOpacity[newIndex] }); + update_captions(); } - -function toggle_caption_opacity() { - const numOptions = options.captionOpacity.length; - const opacity = caption_text_css.style.getPropertyValue('color'); - const curIndex = options.captionOpacity.indexOf(opacity); + + function toggle_caption_opacity() { + const numOptions = options.textOpacity.length; + const textOpacity = player.textTrackSettings.getValues().textOpacity || '1'; + const curIndex = options.textOpacity.indexOf(textOpacity); const newIndex = (curIndex + 1) % numOptions; - caption_text_css.style.setProperty('color', options.captionOpacity[newIndex], 'important'); + player.textTrackSettings.setValues({ textOpacity: options.textOpacity[newIndex] }); + update_captions(); } addEventListener('keydown', function (e) { From e67a30b124debf30363e5e576f089b26c46f7c93 Mon Sep 17 00:00:00 2001 From: epicsam123 <92618898+epicsam123@users.noreply.github.com> Date: Thu, 20 Mar 2025 10:29:26 -0400 Subject: [PATCH 3/3] formatting --- assets/js/player.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/assets/js/player.js b/assets/js/player.js index dce432cb..d6f2ec64 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -539,9 +539,9 @@ const toggle_captions = (function () { bindChange('off'); track.mode = mode; setTimeout(function () { - bindChange('on'); + bindChange('on'); }, 0); - } + } bindChange('on'); return function () { @@ -584,9 +584,9 @@ const toggle_captions = (function () { // For real-time updates to captions (if currently showing) function update_captions() { - if (document.body.querySelector('.vjs-text-track-cue')) { - toggle_captions(); toggle_captions(); - } + if (document.body.querySelector('.vjs-text-track-cue')) { + toggle_captions(); toggle_captions(); + } } function toggle_fullscreen() { @@ -620,7 +620,7 @@ function toggle_caption_window() { update_captions(); } - function toggle_caption_opacity() { +function toggle_caption_opacity() { const numOptions = options.textOpacity.length; const textOpacity = player.textTrackSettings.getValues().textOpacity || '1'; const curIndex = options.textOpacity.indexOf(textOpacity);