iv-org/invidious
1
0
Fork 0
mirror of https://github.com/iv-org/invidious.git synced 2025-02-28 20:32:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

captions: provide "w", "o", "-", "+" keydowns for player from YT

Browse Source
This commit is contained in:
epicsam123 2025-02-19 21:08:45 -05:00 committed by GitHub
parent 164d764d55
commit 73bf956af5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 53 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/css/player.css
View File

@ -71,8 +71,10 @@
padding-top: 2em padding-top: 2em
} }
.video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control {height: 5px; .video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control {
margin-bottom: 10px;} height: 5px;
margin-bottom: 10px;
}
ul.vjs-menu-content::-webkit-scrollbar { ul.vjs-menu-content::-webkit-scrollbar {
display: none; display: none;
@ -82,10 +84,20 @@ ul.vjs-menu-content::-webkit-scrollbar {
cursor: none; 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 { .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; border-radius: 9px !important;
padding: 5px !important; padding: 5px !important;
line-height: 1.5 !important;
} }
.vjs-play-control, .vjs-play-control,

38
assets/js/player.js
View File

@ -2,9 +2,16 @@
var player_data = JSON.parse(document.getElementById('player_data').textContent); var player_data = JSON.parse(document.getElementById('player_data').textContent);
var video_data = JSON.parse(document.getElementById('video_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 = { var options = {
liveui: true, liveui: true,
playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0], 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: { controlBar: {
children: [ children: [
'playToggle', 'playToggle',
@ -591,6 +598,31 @@ function increase_playback_rate(steps) {
player.playbackRate(options.playbackRates[newIndex]); 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) { addEventListener('keydown', function (e) {
if (e.target.tagName.toLowerCase() === 'input') { if (e.target.tagName.toLowerCase() === 'input') {
// Ignore input when focus is on certain elements, e.g. form fields. // 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_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: default:
console.info('Unhandled key down event: %s:', decoratedKey, e); console.info('Unhandled key down event: %s:', decoratedKey, e);