VeritableValor/invidious
2
0
Fork 0
mirror of https://github.com/iv-org/invidious.git synced 2025-07-10 06:05:47 -05:00
Code Issues Packages Projects Releases Wiki Activity

updated caption features to use videojs interface

Browse Source
This commit is contained in:
epicsam123 2025-03-20 10:09:43 -04:00 committed by GitHub
parent 73bf956af5
commit bc3b3f6d69
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/css/player.css
View File

@ -84,17 +84,8 @@ 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 {
font-size: 27px !important; /* Toggle with "-/=" event */ background-color: rgba(0, 0, 0, 0.75) !important;
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; line-height: 1.5 !important;

52
assets/js/player.js
View File

@ -2,16 +2,12 @@
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'], fontPercent: [0.5, 0.75, 1.25, 1.5, 1.75, 2, 3, 4],
captionBackground: [0, 0.5, 0.8, 1].map(a => 'rgba(0, 0, 0, ' + a + ')'), windowOpacity: ['0', '0.5', '1'],
captionOpacity: [0.4, 0.7, 1].map(a => 'rgba(255, 255, 255, ' + a + ')'), textOpacity: ['0.5', '1'],
controlBar: { controlBar: {
children: [ children: [
'playToggle', 'playToggle',
@ -543,9 +539,9 @@ const toggle_captions = (function () {
bindChange('off'); bindChange('off');
track.mode = mode; track.mode = mode;
setTimeout(function () { setTimeout(function () {
bindChange('on'); bindChange('on');
}, 0); }, 0);
} }
bindChange('on'); bindChange('on');
return function () { 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() { function toggle_fullscreen() {
player.isFullscreen() ? player.exitFullscreen() : player.requestFullscreen(); player.isFullscreen() ? player.exitFullscreen() : player.requestFullscreen();
} }
@ -599,28 +602,31 @@ function increase_playback_rate(steps) {
} }
function increase_caption_size(steps) { function increase_caption_size(steps) {
const maxIndex = options.captionSizes.length - 1; const maxIndex = options.fontPercent.length - 1;
const font_size = caption_text_css.style.getPropertyValue('font-size'); const fontPercent = player.textTrackSettings.getValues().fontPercent || 1.25;
const curIndex = options.captionSizes.indexOf(font_size); const curIndex = options.fontPercent.indexOf(fontPercent);
let newIndex = curIndex + steps; let newIndex = curIndex + steps;
newIndex = helpers.clamp(newIndex, 0, maxIndex); 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() { function toggle_caption_window() {
const numOptions = options.captionBackground.length; const numOptions = options.windowOpacity.length;
const backgroundColor = caption_background_css.style.getPropertyValue('background-color'); const windowOpacity = player.textTrackSettings.getValues().windowOpacity || '0';
const curIndex = options.captionBackground.indexOf(backgroundColor); const curIndex = options.windowOpacity.indexOf(windowOpacity);
const newIndex = (curIndex + 1) % numOptions; 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() { function toggle_caption_opacity() {
const numOptions = options.captionOpacity.length; const numOptions = options.textOpacity.length;
const opacity = caption_text_css.style.getPropertyValue('color'); const textOpacity = player.textTrackSettings.getValues().textOpacity || '1';
const curIndex = options.captionOpacity.indexOf(opacity); const curIndex = options.textOpacity.indexOf(textOpacity);
const newIndex = (curIndex + 1) % numOptions; 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) { addEventListener('keydown', function (e) {