From ce4d5a91a35a98570c2f24f5da2b6cc2c1e7cfc9 Mon Sep 17 00:00:00 2001
From: epicsam123 <92618898+epicsam123@users.noreply.github.com>
Date: Wed, 19 Feb 2025 21:05:24 -0500
Subject: [PATCH] captions: provide "w", "o", "-", "+" keydowns for player from
YT
---
assets/css/player.css | 18 ++++++++++++---
assets/js/player.js | 53 +++++++++++++++++++++++++++++++++++--------
2 files changed, 59 insertions(+), 12 deletions(-)
diff --git a/assets/css/player.css b/assets/css/player.css
index 9cb400ad..e204457a 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; /* caption size 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 aa6c51c5..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',
@@ -136,14 +143,11 @@ player.on('timeupdate', function () {
let elem_yt_watch = document.getElementById('link-yt-watch');
let elem_yt_embed = document.getElementById('link-yt-embed');
- // YT links could be turned off by the user
- if (elem_yt_watch) {
- let base_url_yt_watch = elem_yt_watch.getAttribute('data-base-url');
- let base_url_yt_embed = elem_yt_embed.getAttribute('data-base-url');
-
- elem_yt_watch.href = addCurrentTimeToURL(base_url_yt_watch);
- elem_yt_embed.href = addCurrentTimeToURL(base_url_yt_embed);
- }
+ let base_url_yt_watch = elem_yt_watch.getAttribute('data-base-url');
+ let base_url_yt_embed = elem_yt_embed.getAttribute('data-base-url');
+
+ elem_yt_watch.href = addCurrentTimeToURL(base_url_yt_watch);
+ elem_yt_embed.href = addCurrentTimeToURL(base_url_yt_embed);
// Invidious links
@@ -177,7 +181,7 @@ var shareOptions = {
};
if (location.pathname.startsWith('/embed/')) {
- var overlay_content = '';
+ var overlay_content = '';
player.overlay({
overlays: [
{ start: 'loadstart', content: overlay_content, end: 'playing', align: 'top'},
@@ -594,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.
@@ -689,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);