knight
7a750167eb
All checks were successful
Build and release container directly from master / release (push) Successful in 5m26s
936 lines
32 KiB
JavaScript
936 lines
32 KiB
JavaScript
'use strict';
|
|
console.log('[Invidious Debug] player.js start');
|
|
var player_data = JSON.parse(document.getElementById('player_data').textContent);
|
|
var video_data = JSON.parse(document.getElementById('video_data').textContent);
|
|
console.log('[Invidious Debug] video_data.params:', JSON.stringify(video_data.params));
|
|
|
|
var options = {
|
|
liveui: true,
|
|
playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
|
|
controlBar: {
|
|
children: [
|
|
'playToggle',
|
|
'volumePanel',
|
|
'currentTimeDisplay',
|
|
'timeDivider',
|
|
'durationDisplay',
|
|
'progressControl',
|
|
'remainingTimeDisplay',
|
|
'Spacer',
|
|
'captionsButton',
|
|
'audioTrackButton',
|
|
'qualitySelector',
|
|
'playbackRateMenuButton',
|
|
'fullscreenToggle'
|
|
]
|
|
},
|
|
html5: {
|
|
preloadTextTracks: false,
|
|
vhs: {
|
|
overrideNative: true
|
|
}
|
|
}
|
|
};
|
|
|
|
if (player_data.aspect_ratio) {
|
|
options.aspectRatio = player_data.aspect_ratio;
|
|
}
|
|
|
|
var embed_url = new URL(location);
|
|
embed_url.searchParams.delete('v');
|
|
var short_url = location.origin + '/' + video_data.id + embed_url.search;
|
|
embed_url = location.origin + '/embed/' + video_data.id + embed_url.search;
|
|
|
|
var save_player_pos_key = 'save_player_pos';
|
|
|
|
videojs.Vhs.xhr.beforeRequest = function(options) {
|
|
// set local if requested not videoplayback
|
|
if (!options.uri.includes('videoplayback')) {
|
|
if (!options.uri.includes('local=true'))
|
|
options.uri += '?local=true';
|
|
}
|
|
return options;
|
|
};
|
|
|
|
console.log('[Invidious Debug] Initializing videojs...');
|
|
var player;
|
|
try {
|
|
player = videojs('player', options);
|
|
console.log('[Invidious Debug] videojs initialized successfully.');
|
|
|
|
// --- START WebOS DASH Workaround ---
|
|
var isWebOS = /Web[O0]S|LG Browser/i.test(navigator.userAgent);
|
|
console.log('[Invidious Debug] Checking for WebOS. User Agent:', navigator.userAgent, 'Is WebOS:', isWebOS);
|
|
|
|
if (isWebOS && video_data.params.quality === 'dash') {
|
|
console.log('[Invidious Debug] WebOS detected with DASH quality. Attempting to filter sources.');
|
|
// It might be too early here, sources might not be fully set.
|
|
// Let's try removing the source later, maybe on 'canplay' or 'sourceset' if needed.
|
|
// For now, just log the detection. We might need to hook into an event.
|
|
|
|
// --- Alternative: Try filtering sources immediately (might not work) ---
|
|
try {
|
|
let currentSources = player.currentSources();
|
|
console.log('[Invidious Debug] WebOS: Sources before filter:', JSON.stringify(currentSources));
|
|
let filteredSources = currentSources.filter(function(source) {
|
|
return source.type !== 'application/dash+xml';
|
|
});
|
|
// Set filtered sources if different, find the non-DASH source
|
|
if (filteredSources.length > 0 && filteredSources.length < currentSources.length) {
|
|
console.log('[Invidious Debug] WebOS: Sources after filter:', JSON.stringify(filteredSources));
|
|
// Select the first non-DASH source explicitly
|
|
let mp4Source = filteredSources.find(s => s.type.startsWith('video/mp4'));
|
|
if (mp4Source) {
|
|
console.log('[Invidious Debug] WebOS: Setting source explicitly to MP4:', JSON.stringify(mp4Source));
|
|
player.src(mp4Source); // Try setting the source directly
|
|
} else {
|
|
console.warn('[Invidious Debug] WebOS: No suitable MP4 source found after filtering DASH.');
|
|
}
|
|
} else {
|
|
console.log('[Invidious Debug] WebOS: No DASH source found to filter, or no other sources available.');
|
|
}
|
|
} catch (e) {
|
|
console.error('[Invidious Debug] WebOS: Error filtering sources:', e);
|
|
}
|
|
}
|
|
// --- END WebOS DASH Workaround ---
|
|
|
|
} catch (e) {
|
|
console.error('[Invidious Debug] videojs initialization FAILED:', e);
|
|
// Stop further execution if player init fails
|
|
throw e;
|
|
}
|
|
|
|
player.on('error', function () {
|
|
console.error('[Invidious Debug] Player error event triggered:', player.error());
|
|
if (video_data.params.quality === 'dash') return;
|
|
|
|
var localNotDisabled = (
|
|
!player.currentSrc().includes('local=true') && !video_data.local_disabled
|
|
);
|
|
var reloadMakesSense = (
|
|
player.error().code === MediaError.MEDIA_ERR_NETWORK ||
|
|
player.error().code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
|
|
);
|
|
|
|
if (localNotDisabled) {
|
|
// add local=true to all current sources
|
|
player.src(player.currentSources().map(function (source) {
|
|
source.src += '&local=true';
|
|
return source;
|
|
}));
|
|
} else if (reloadMakesSense) {
|
|
console.log('[Invidious Debug] Player error: Attempting reload in 5 seconds.');
|
|
setTimeout(function () {
|
|
console.warn('An error occurred in the player, reloading...');
|
|
|
|
// After load() all parameters are reset. Save them
|
|
var currentTime = player.currentTime();
|
|
var playbackRate = player.playbackRate();
|
|
var paused = player.paused();
|
|
|
|
player.load();
|
|
|
|
if (currentTime > 0.5) currentTime -= 0.5;
|
|
|
|
player.currentTime(currentTime);
|
|
player.playbackRate(playbackRate);
|
|
if (!paused) player.play();
|
|
}, 5000);
|
|
} else {
|
|
console.log('[Invidious Debug] Player error: No specific action taken.');
|
|
}
|
|
});
|
|
|
|
if (video_data.params.quality === 'dash') {
|
|
console.log('[Invidious Debug] Initializing reloadSourceOnError...');
|
|
try {
|
|
player.reloadSourceOnError({
|
|
errorInterval: 10
|
|
});
|
|
console.log('[Invidious Debug] reloadSourceOnError initialized.');
|
|
} catch (e) {
|
|
console.error('[Invidious Debug] reloadSourceOnError FAILED:', e);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Function for add time argument to url
|
|
*
|
|
* @param {String} url
|
|
* @param {String} [base]
|
|
* @returns {URL} urlWithTimeArg
|
|
*/
|
|
function addCurrentTimeToURL(url, base) {
|
|
var urlUsed = new URL(url, base);
|
|
urlUsed.searchParams.delete('start');
|
|
var currentTime = Math.ceil(player.currentTime());
|
|
if (currentTime > 0)
|
|
urlUsed.searchParams.set('t', currentTime);
|
|
else if (urlUsed.searchParams.has('t'))
|
|
urlUsed.searchParams.delete('t');
|
|
return urlUsed;
|
|
}
|
|
|
|
/**
|
|
* Global variable to save the last timestamp (in full seconds) at which the external
|
|
* links were updated by the 'timeupdate' callback below.
|
|
*
|
|
* It is initialized to 5s so that the video will always restart from the beginning
|
|
* if the user hasn't really started watching before switching to the other website.
|
|
*/
|
|
var timeupdate_last_ts = 5;
|
|
|
|
/**
|
|
* Callback that updates the timestamp on all external links
|
|
*/
|
|
player.on('timeupdate', function () {
|
|
// Only update once every second
|
|
let current_ts = Math.floor(player.currentTime());
|
|
if (current_ts > timeupdate_last_ts) timeupdate_last_ts = current_ts;
|
|
else return;
|
|
|
|
// YouTube links
|
|
|
|
let elem_yt_watch = document.getElementById('link-yt-watch');
|
|
if (elem_yt_watch) {
|
|
let base_url_yt_watch = elem_yt_watch.getAttribute('data-base-url');
|
|
elem_yt_watch.href = addCurrentTimeToURL(base_url_yt_watch);
|
|
}
|
|
|
|
let elem_yt_embed = document.getElementById('link-yt-embed');
|
|
if (elem_yt_embed) {
|
|
let base_url_yt_embed = elem_yt_embed.getAttribute('data-base-url');
|
|
elem_yt_embed.href = addCurrentTimeToURL(base_url_yt_embed);
|
|
}
|
|
|
|
// Invidious links
|
|
|
|
let domain = window.location.origin;
|
|
|
|
let elem_iv_embed = document.getElementById('link-iv-embed');
|
|
if (elem_iv_embed) {
|
|
let base_url_iv_embed = elem_iv_embed.getAttribute('data-base-url');
|
|
elem_iv_embed.href = addCurrentTimeToURL(base_url_iv_embed, domain);
|
|
}
|
|
|
|
let elem_iv_other = document.getElementById('link-iv-other');
|
|
if (elem_iv_other) {
|
|
let base_url_iv_other = elem_iv_other.getAttribute('data-base-url');
|
|
elem_iv_other.href = addCurrentTimeToURL(base_url_iv_other, domain);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Method for getting the contents of a cookie
|
|
*
|
|
* @param {String} name Name of cookie
|
|
* @returns {String|null} cookieValue
|
|
*/
|
|
function getCookieValue(name) {
|
|
var cookiePrefix = name + '=';
|
|
var matchedCookie = document.cookie.split(';').find(function (item) {return item.includes(cookiePrefix);});
|
|
if (matchedCookie)
|
|
return matchedCookie.replace(cookiePrefix, '');
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Method for updating the 'PREFS' cookie (or creating it if missing)
|
|
*
|
|
* @param {number} newVolume New volume defined (null if unchanged)
|
|
* @param {number} newSpeed New speed defined (null if unchanged)
|
|
*/
|
|
function updateCookie(newVolume, newSpeed) {
|
|
var volumeValue = newVolume !== null ? newVolume : video_data.params.volume;
|
|
var speedValue = newSpeed !== null ? newSpeed : video_data.params.speed;
|
|
|
|
var cookieValue = getCookieValue('PREFS');
|
|
var cookieData;
|
|
|
|
if (cookieValue !== null) {
|
|
var cookieJson = JSON.parse(decodeURIComponent(cookieValue));
|
|
cookieJson.volume = volumeValue;
|
|
cookieJson.speed = speedValue;
|
|
cookieData = encodeURIComponent(JSON.stringify(cookieJson));
|
|
} else {
|
|
cookieData = encodeURIComponent(JSON.stringify({ 'volume': volumeValue, 'speed': speedValue }));
|
|
}
|
|
|
|
// Set expiration in 2 year
|
|
var date = new Date();
|
|
date.setFullYear(date.getFullYear() + 2);
|
|
|
|
var ipRegex = /^((\d+\.){3}\d+|[\dA-Fa-f]*:[\d:A-Fa-f]*:[\d:A-Fa-f]+)$/;
|
|
var domainUsed = location.hostname;
|
|
|
|
// Fix for a bug in FF where the leading dot in the FQDN is not ignored
|
|
if (domainUsed.charAt(0) !== '.' && !ipRegex.test(domainUsed) && domainUsed !== 'localhost')
|
|
domainUsed = '.' + location.hostname;
|
|
|
|
var secure = location.protocol.startsWith("https") ? " Secure;" : "";
|
|
|
|
document.cookie = 'PREFS=' + cookieData + '; SameSite=Lax; path=/; domain=' +
|
|
domainUsed + '; expires=' + date.toGMTString() + ';' + secure;
|
|
|
|
video_data.params.volume = volumeValue;
|
|
video_data.params.speed = speedValue;
|
|
}
|
|
|
|
player.on('ratechange', function () {
|
|
updateCookie(null, player.playbackRate());
|
|
if (isMobile()) {
|
|
player.mobileUi({ touchControls: { seekSeconds: 5 * player.playbackRate() } });
|
|
}
|
|
});
|
|
|
|
player.on('volumechange', function () {
|
|
updateCookie(Math.ceil(player.volume() * 100), null);
|
|
});
|
|
|
|
player.on('waiting', function () {
|
|
if (player.playbackRate() > 1 && player.liveTracker.isLive() && player.liveTracker.atLiveEdge()) {
|
|
console.info('Player has caught up to source, resetting playbackRate');
|
|
player.playbackRate(1);
|
|
}
|
|
});
|
|
|
|
if (video_data.premiere_timestamp && Math.round(new Date() / 1000) < video_data.premiere_timestamp) {
|
|
player.getChild('bigPlayButton').hide();
|
|
}
|
|
|
|
if (video_data.params.save_player_pos) {
|
|
console.log('[Invidious Debug] Setting up player position save/restore...');
|
|
var lastUpdated = 0;
|
|
var save_video_time = function(time) {
|
|
const all_video_times = get_all_video_times();
|
|
all_video_times[video_data.id] = time;
|
|
helpers.storage.set(save_player_pos_key, all_video_times);
|
|
}
|
|
|
|
player.on('timeupdate', function () {
|
|
const raw = player.currentTime();
|
|
const time = Math.floor(raw);
|
|
|
|
if(lastUpdated !== time && raw <= video_data.length_seconds - 15) {
|
|
save_video_time(time);
|
|
lastUpdated = time;
|
|
}
|
|
});
|
|
}
|
|
else remove_all_video_times();
|
|
|
|
if (video_data.params.autoplay) {
|
|
console.log('[Invidious Debug] Handling autoplay setup...');
|
|
var bpb = player.getChild('bigPlayButton');
|
|
bpb.hide();
|
|
|
|
player.ready(function () {
|
|
console.log('[Invidious Debug] Player ready for autoplay.');
|
|
new Promise(function (resolve, reject) {
|
|
setTimeout(function () {resolve(1);}, 1);
|
|
}).then(function (result) {
|
|
console.log('[Invidious Debug] Attempting autoplay...');
|
|
console.log('[Invidious Debug] Calling player.play() for autoplay...');
|
|
var promise = player.play();
|
|
|
|
if (promise !== undefined) {
|
|
promise.then(function () {
|
|
console.log('[Invidious Debug] Autoplay successful.');
|
|
}).catch(function (error) {
|
|
console.error('[Invidious Debug] Autoplay FAILED:', error);
|
|
bpb.show();
|
|
});
|
|
} else {
|
|
console.log('[Invidious Debug] Autoplay started (no promise returned).');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
if (!video_data.params.listen && video_data.params.quality === 'dash') {
|
|
console.log('[Invidious Debug] Initializing httpSourceSelector...');
|
|
console.log('[Invidious Debug] Player sources BEFORE httpSourceSelector init:', JSON.stringify(player.currentSources()));
|
|
try {
|
|
player.httpSourceSelector();
|
|
console.log('[Invidious Debug] httpSourceSelector initialized.');
|
|
console.log('[Invidious Debug] Player sources AFTER httpSourceSelector init:', JSON.stringify(player.currentSources()));
|
|
|
|
if (video_data.params.quality_dash !== 'auto') {
|
|
console.log('[Invidious Debug] Setting DASH quality:', video_data.params.quality_dash);
|
|
player.ready(function () {
|
|
player.on('loadedmetadata', function () {
|
|
try {
|
|
const qualityLevels = Array.from(player.qualityLevels()).sort(function (a, b) {return a.height - b.height;});
|
|
let targetQualityLevel;
|
|
switch (video_data.params.quality_dash) {
|
|
case 'best':
|
|
targetQualityLevel = qualityLevels.length - 1;
|
|
break;
|
|
case 'worst':
|
|
targetQualityLevel = 0;
|
|
break;
|
|
default:
|
|
const targetHeight = parseInt(video_data.params.quality_dash);
|
|
for (let i = 0; i < qualityLevels.length; i++) {
|
|
if (qualityLevels[i].height <= targetHeight)
|
|
targetQualityLevel = i;
|
|
else
|
|
break;
|
|
}
|
|
}
|
|
qualityLevels.forEach(function (level, index) {
|
|
level.enabled = (index === targetQualityLevel);
|
|
});
|
|
console.log('[Invidious Debug] DASH quality levels set.');
|
|
} catch (e) {
|
|
console.error('[Invidious Debug] Error setting DASH quality levels:', e);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
} catch (e) {
|
|
console.error('[Invidious Debug] httpSourceSelector FAILED:', e);
|
|
}
|
|
}
|
|
|
|
console.log('[Invidious Debug] Initializing vttThumbnails...');
|
|
try {
|
|
player.vttThumbnails({
|
|
src: '/api/v1/storyboards/' + video_data.id + '?height=90',
|
|
showTimestamp: true
|
|
});
|
|
console.log('[Invidious Debug] vttThumbnails initialized.');
|
|
} catch (e) {
|
|
console.error('[Invidious Debug] vttThumbnails FAILED:', e);
|
|
}
|
|
|
|
// Enable annotations
|
|
if (!video_data.params.listen && video_data.params.annotations) {
|
|
console.log('[Invidious Debug] Initializing annotations...');
|
|
addEventListener('load', function (e) {
|
|
addEventListener('__ar_annotation_click', function (e) {
|
|
const url = e.detail.url,
|
|
target = e.detail.target,
|
|
seconds = e.detail.seconds;
|
|
var path = new URL(url);
|
|
|
|
if (path.href.startsWith('https://www.youtube.com/watch?') && seconds) {
|
|
path.search += '&t=' + seconds;
|
|
}
|
|
|
|
path = path.pathname + path.search;
|
|
|
|
if (target === 'current') {
|
|
location.href = path;
|
|
} else if (target === 'new') {
|
|
open(path, '_blank');
|
|
}
|
|
});
|
|
|
|
helpers.xhr('GET', '/api/v1/annotations/' + video_data.id, {
|
|
responseType: 'text',
|
|
timeout: 60000
|
|
}, {
|
|
on200: function (response) {
|
|
var video_container = document.getElementById('player');
|
|
videojs.registerPlugin('youtubeAnnotationsPlugin', youtubeAnnotationsPlugin);
|
|
if (player.paused()) {
|
|
player.one('play', function (event) {
|
|
player.youtubeAnnotationsPlugin({ annotationXml: response, videoContainer: video_container });
|
|
});
|
|
} else {
|
|
player.youtubeAnnotationsPlugin({ annotationXml: response, videoContainer: video_container });
|
|
}
|
|
console.log('[Invidious Debug] Annotations initialized.');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
player.on('play', function() {
|
|
console.log('[Invidious Debug] Event: play triggered. Current source:', JSON.stringify(player.currentSource()));
|
|
});
|
|
|
|
player.on('playing', function() {
|
|
console.log('[Invidious Debug] Event: playing triggered. Playback has started.');
|
|
});
|
|
|
|
player.on('waiting', function() {
|
|
console.log('[Invidious Debug] Event: waiting triggered. Buffering or waiting for data.');
|
|
});
|
|
|
|
var shareOptions = {
|
|
socials: ['fbFeed', 'tw', 'reddit', 'email'],
|
|
|
|
get url() {
|
|
return addCurrentTimeToURL(short_url);
|
|
},
|
|
title: player_data.title,
|
|
description: player_data.description,
|
|
image: player_data.thumbnail,
|
|
get embedCode() {
|
|
// Single quotes inside here required. HTML inserted as is into value attribute of input
|
|
return "<iframe id='ivplayer' width='640' height='360' src='" +
|
|
addCurrentTimeToURL(embed_url) + "' style='border:none;'></iframe>";
|
|
}
|
|
};
|
|
|
|
if (location.pathname.startsWith('/embed/')) {
|
|
console.log('[Invidious Debug] Initializing overlay...');
|
|
try {
|
|
var overlay_content = '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>';
|
|
player.overlay({
|
|
overlays: [
|
|
{ start: 'loadstart', content: overlay_content, end: 'playing', align: 'top'},
|
|
{ start: 'pause', content: overlay_content, end: 'playing', align: 'top'}
|
|
]
|
|
});
|
|
console.log('[Invidious Debug] Overlay initialized.');
|
|
} catch (e) {
|
|
console.error('[Invidious Debug] Overlay FAILED:', e);
|
|
}
|
|
}
|
|
|
|
// Detect mobile users and initialize mobileUi for better UX
|
|
// Detection code taken from https://stackoverflow.com/a/20293441
|
|
function isMobile() {
|
|
return typeof window.orientation !== 'undefined' || navigator.userAgent.indexOf('IEMobile') !== -1;
|
|
}
|
|
|
|
if (isMobile()) {
|
|
console.log('[Invidious Debug] Mobile detected, initializing mobile UI...');
|
|
try {
|
|
player.mobileUi({ touchControls: { seekSeconds: 5, tapTimeout: 200, disableOnEnd: true } });
|
|
console.log('[Invidious Debug] Mobile UI initialized.');
|
|
} catch (e) {
|
|
console.error('[Invidious Debug] Mobile UI FAILED:', e);
|
|
}
|
|
}
|
|
|
|
if (player.markers && !video_data.params.listen && video_data.params.chapters) {
|
|
console.log('[Invidious Debug] Initializing markers...');
|
|
var markers = [];
|
|
for (var i = 0; i < video_data.params.chapters.length; i++) {
|
|
var marker = video_data.params.chapters[i];
|
|
markers.push({
|
|
time: marker.start,
|
|
text: marker.title,
|
|
});
|
|
}
|
|
|
|
if (markers.length > 1 && markers[0].time === 0 && markers[0].text === 'Intro') {
|
|
markers.shift();
|
|
}
|
|
|
|
markers.sort((a,b) => (a.time > b.time) ? 1 : ((b.time > a.time) ? -1 : 0));
|
|
|
|
var unique_markers = [];
|
|
var last_time = -1;
|
|
for (var i = 0; i < markers.length; i++) {
|
|
var marker = markers[i];
|
|
if (marker.time <= last_time) {
|
|
continue;
|
|
}
|
|
unique_markers.push(marker);
|
|
last_time = marker.time;
|
|
}
|
|
markers = unique_markers;
|
|
|
|
// Add "end" time information to each marker
|
|
for (var i = 0; i < markers.length; i++) {
|
|
var marker = markers[i];
|
|
if (i < markers.length - 1) {
|
|
marker.end = markers[i+1].time - 0.001;
|
|
} else {
|
|
marker.end = player.duration();
|
|
}
|
|
}
|
|
|
|
player.markers.removeAll();
|
|
|
|
// Callback function when a marker is reached
|
|
function onMarkerReached(marker) {
|
|
//console.log("marker reached: " + marker.text + " at " + marker.time);
|
|
}
|
|
|
|
try {
|
|
player.markers({
|
|
onMarkerReached: onMarkerReached,
|
|
markers: markers
|
|
});
|
|
console.log('[Invidious Debug] Markers initialized.');
|
|
} catch (e) {
|
|
console.error('[Invidious Debug] Markers FAILED:', e);
|
|
}
|
|
|
|
player.currentTime(video_data.params.video_start);
|
|
}
|
|
|
|
player.volume(video_data.params.volume / 100);
|
|
player.playbackRate(video_data.params.speed);
|
|
console.log('[Invidious Debug] Volume and playback rate set.');
|
|
|
|
if (player.share) {
|
|
console.log('[Invidious Debug] Initializing share plugin...');
|
|
try {
|
|
player.share(shareOptions);
|
|
console.log('[Invidious Debug] Share plugin initialized.');
|
|
} catch(e) {
|
|
console.error('[Invidious Debug] Share plugin FAILED:', e);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Method for saving the current video time
|
|
*
|
|
* @param {number} seconds
|
|
*/
|
|
function save_video_time(seconds) {
|
|
const all_video_times = get_all_video_times();
|
|
all_video_times[video_data.id] = seconds;
|
|
helpers.storage.set(save_player_pos_key, all_video_times);
|
|
}
|
|
|
|
/**
|
|
* Method for getting the saved video time
|
|
*
|
|
* @returns {number}
|
|
*/
|
|
function get_video_time() {
|
|
return get_all_video_times()[video_data.id] || 0;
|
|
}
|
|
|
|
/**
|
|
* Method for getting all saved video times
|
|
*
|
|
* @returns {Object}
|
|
*/
|
|
function get_all_video_times() {
|
|
return helpers.storage.get(save_player_pos_key) || {};
|
|
}
|
|
|
|
/**
|
|
* Method for removing all saved video times
|
|
*/
|
|
function remove_all_video_times() {
|
|
helpers.storage.remove(save_player_pos_key);
|
|
}
|
|
|
|
/**
|
|
* Method for setting the video time to a certain percentage
|
|
*
|
|
* @param {number} percent
|
|
*/
|
|
function set_time_percent(percent) {
|
|
const duration = player.duration();
|
|
const newTime = duration * (percent / 100);
|
|
player.currentTime(newTime);
|
|
}
|
|
|
|
/**
|
|
* Method for playing the video
|
|
*/
|
|
function play() { player.play(); }
|
|
|
|
/**
|
|
* Method for pausing the video
|
|
*/
|
|
function pause() { player.pause(); }
|
|
|
|
/**
|
|
* Method for stopping the video
|
|
*/
|
|
function stop() { player.pause(); player.currentTime(0); }
|
|
|
|
/**
|
|
* Method for toggling play/pause
|
|
*/
|
|
function toggle_play() { player.paused() ? play() : pause(); }
|
|
|
|
/**
|
|
* Method for toggling captions
|
|
*/
|
|
const toggle_captions = (function () {
|
|
let toggledTrack = null;
|
|
|
|
function bindChange(onOrOff) {
|
|
player.textTracks()[onOrOff]('change', function (e) {
|
|
toggledTrack = null;
|
|
});
|
|
}
|
|
|
|
// Wrapper function to ignore our own emitted events and only listen
|
|
// to events emitted by Video.js on click on the captions menu items.
|
|
function setMode(track, mode) {
|
|
bindChange('off');
|
|
track.mode = mode;
|
|
setTimeout(function () {
|
|
bindChange('on');
|
|
}, 0);
|
|
}
|
|
|
|
bindChange('on');
|
|
return function () {
|
|
if (toggledTrack !== null) {
|
|
if (toggledTrack.mode !== 'showing') {
|
|
setMode(toggledTrack, 'showing');
|
|
} else {
|
|
setMode(toggledTrack, 'disabled');
|
|
}
|
|
toggledTrack = null;
|
|
return;
|
|
}
|
|
|
|
// Used as a fallback if no captions are currently active.
|
|
// TODO: Make this more intelligent by e.g. relying on browser language.
|
|
let fallbackCaptionsTrack = null;
|
|
|
|
const tracks = player.textTracks();
|
|
for (let i = 0; i < tracks.length; i++) {
|
|
const track = tracks[i];
|
|
if (track.kind !== 'captions') continue;
|
|
|
|
if (fallbackCaptionsTrack === null) {
|
|
fallbackCaptionsTrack = track;
|
|
}
|
|
if (track.mode === 'showing') {
|
|
setMode(track, 'disabled');
|
|
toggledTrack = track;
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Fallback if no captions are currently active.
|
|
if (fallbackCaptionsTrack !== null) {
|
|
setMode(fallbackCaptionsTrack, 'showing');
|
|
toggledTrack = fallbackCaptionsTrack;
|
|
}
|
|
};
|
|
})();
|
|
|
|
/**
|
|
* Method for toggling fullscreen
|
|
*/
|
|
function toggle_fullscreen() {
|
|
player.isFullscreen() ? player.exitFullscreen() : player.requestFullscreen();
|
|
}
|
|
|
|
/**
|
|
* Method for increasing playback rate
|
|
*
|
|
* @param {number} steps
|
|
*/
|
|
function increase_playback_rate(steps) {
|
|
const maxIndex = options.playbackRates.length - 1;
|
|
const curIndex = options.playbackRates.indexOf(player.playbackRate());
|
|
let newIndex = curIndex + steps;
|
|
newIndex = helpers.clamp(newIndex, 0, maxIndex);
|
|
player.playbackRate(options.playbackRates[newIndex]);
|
|
}
|
|
|
|
// Add event listener for keydown events
|
|
addEventListener('keydown', function (e) {
|
|
if (e.target.tagName.toLowerCase() === 'input') {
|
|
// Ignore input when focus is on certain elements, e.g. form fields.
|
|
return;
|
|
}
|
|
// See https://github.com/ctd1500/videojs-hotkeys/blob/bb4a158b2e214ccab87c2e7b95f42bc45c6bfd87/videojs.hotkeys.js#L310-L313
|
|
const isPlayerFocused = false
|
|
|| e.target === document.querySelector('.video-js')
|
|
|| e.target === document.querySelector('.vjs-tech')
|
|
|| e.target === document.querySelector('.iframeblocker')
|
|
|| e.target === document.querySelector('.vjs-control-bar')
|
|
;
|
|
let action = null;
|
|
|
|
const code = e.keyCode;
|
|
const decoratedKey =
|
|
e.key
|
|
+ (e.altKey ? '+alt' : '')
|
|
+ (e.ctrlKey ? '+ctrl' : '')
|
|
+ (e.metaKey ? '+meta' : '')
|
|
;
|
|
switch (decoratedKey) {
|
|
case ' ':
|
|
case 'k':
|
|
case 'MediaPlayPause':
|
|
action = toggle_play;
|
|
break;
|
|
|
|
case 'MediaPlay': action = play; break;
|
|
case 'MediaPause': action = pause; break;
|
|
case 'MediaStop': action = stop; break;
|
|
|
|
case 'ArrowUp':
|
|
if (isPlayerFocused) action = change_volume.bind(this, 0.1);
|
|
break;
|
|
case 'ArrowDown':
|
|
if (isPlayerFocused) action = change_volume.bind(this, -0.1);
|
|
break;
|
|
|
|
case 'm':
|
|
action = toggle_muted;
|
|
break;
|
|
|
|
case 'ArrowRight':
|
|
case 'MediaFastForward':
|
|
action = skip_seconds.bind(this, 5 * player.playbackRate());
|
|
break;
|
|
case 'ArrowLeft':
|
|
case 'MediaTrackPrevious':
|
|
action = skip_seconds.bind(this, -5 * player.playbackRate());
|
|
break;
|
|
case 'l':
|
|
action = skip_seconds.bind(this, 10 * player.playbackRate());
|
|
break;
|
|
case 'j':
|
|
action = skip_seconds.bind(this, -10 * player.playbackRate());
|
|
break;
|
|
|
|
case '0':
|
|
case '1':
|
|
case '2':
|
|
case '3':
|
|
case '4':
|
|
case '5':
|
|
case '6':
|
|
case '7':
|
|
case '8':
|
|
case '9':
|
|
// Ignore numpad numbers
|
|
if (code > 57) break;
|
|
|
|
const percent = (code - 48) * 10;
|
|
action = set_time_percent.bind(this, percent);
|
|
break;
|
|
|
|
case 'c': action = toggle_captions; break;
|
|
case 'f': action = toggle_fullscreen; break;
|
|
|
|
case 'N':
|
|
case 'MediaTrackNext':
|
|
action = next_video;
|
|
break;
|
|
case 'P':
|
|
case 'MediaTrackPrevious':
|
|
// TODO: Add support to play back previous video.
|
|
break;
|
|
|
|
// TODO: More precise step. Now FPS is taken equal to 29.97
|
|
// Common FPS: https://forum.videohelp.com/threads/81868#post323588
|
|
// Possible solution is new HTMLVideoElement.requestVideoFrameCallback() https://wicg.github.io/video-rvfc/
|
|
case ',': action = function () { pause(); skip_seconds(-1/29.97); }; break;
|
|
case '.': action = function () { pause(); skip_seconds( 1/29.97); }; break;
|
|
|
|
case '>': action = increase_playback_rate.bind(this, 1); break;
|
|
case '<': action = increase_playback_rate.bind(this, -1); break;
|
|
|
|
default:
|
|
console.info('Unhandled key down event: %s:', decoratedKey, e);
|
|
break;
|
|
}
|
|
|
|
if (action) {
|
|
e.preventDefault();
|
|
action();
|
|
}
|
|
}, false);
|
|
|
|
// Add support for controlling the player volume by scrolling over it. Adapted from
|
|
// https://github.com/ctd1500/videojs-hotkeys/blob/bb4a158b2e214ccab87c2e7b95f42bc45c6bfd87/videojs.hotkeys.js#L292-L328
|
|
(function () {
|
|
const pEl = document.getElementById('player');
|
|
|
|
var volumeHover = false;
|
|
var volumeSelector = pEl.querySelector('.vjs-volume-menu-button') || pEl.querySelector('.vjs-volume-panel');
|
|
if (volumeSelector !== null) {
|
|
volumeSelector.onmouseover = function () { volumeHover = true; };
|
|
volumeSelector.onmouseout = function () { volumeHover = false; };
|
|
}
|
|
|
|
function mouseScroll(event) {
|
|
// When controls are disabled, hotkeys will be disabled as well
|
|
if (!player.controls() || !volumeHover) return;
|
|
|
|
event.preventDefault();
|
|
var wheelMove = event.wheelDelta || -event.detail;
|
|
var volumeSign = Math.sign(wheelMove);
|
|
|
|
change_volume(volumeSign * 0.05); // decrease/increase by 5%
|
|
}
|
|
|
|
player.on('mousewheel', mouseScroll);
|
|
player.on('DOMMouseScroll', mouseScroll);
|
|
}());
|
|
|
|
// show the preferred caption by default
|
|
if (player_data.preferred_caption_found) {
|
|
player.ready(function () {
|
|
if (!video_data.params.listen && video_data.params.quality === 'dash') {
|
|
// play.textTracks()[0] on DASH mode is showing some debug messages
|
|
player.textTracks()[1].mode = 'showing';
|
|
} else {
|
|
player.textTracks()[0].mode = 'showing';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Safari audio double duration fix
|
|
if (navigator.vendor === 'Apple Computer, Inc.' && video_data.params.listen) {
|
|
console.log('[Invidious Debug] Applying Safari listen mode duration fix...');
|
|
player.on('loadedmetadata', function () {
|
|
player.on('timeupdate', function () {
|
|
if (player.remainingTime() < player.duration() / 2 && player.remainingTime() >= 2) {
|
|
player.currentTime(player.duration() - 1);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Safari screen timeout on looped video playback fix
|
|
if (navigator.vendor === 'Apple Computer, Inc.' && !video_data.params.listen && video_data.params.video_loop) {
|
|
console.log('[Invidious Debug] Applying Safari loop mode screen timeout fix...');
|
|
player.loop(false);
|
|
player.ready(function () {
|
|
player.on('ended', function () {
|
|
player.currentTime(0);
|
|
player.play();
|
|
});
|
|
});
|
|
}
|
|
|
|
// Watch on Invidious link
|
|
if (location.pathname.startsWith('/embed/')) {
|
|
console.log('[Invidious Debug] Adding Watch on Invidious button...');
|
|
try {
|
|
const Button = videojs.getComponent('Button');
|
|
let watch_on_invidious_button = new Button(player);
|
|
|
|
// Create hyperlink for current instance
|
|
var redirect_element = document.createElement('a');
|
|
redirect_element.setAttribute('href', location.pathname.replace('/embed/', '/watch?v='));
|
|
redirect_element.appendChild(document.createTextNode('Invidious'));
|
|
|
|
watch_on_invidious_button.el().appendChild(redirect_element);
|
|
watch_on_invidious_button.addClass('watch-on-invidious');
|
|
|
|
var cb = player.getChild('ControlBar');
|
|
cb.addChild(watch_on_invidious_button);
|
|
console.log('[Invidious Debug] Watch on Invidious button added.');
|
|
} catch (e) {
|
|
console.error('[Invidious Debug] Watch on Invidious button FAILED:', e);
|
|
}
|
|
}
|
|
|
|
addEventListener('DOMContentLoaded', function () {
|
|
// Save time during redirection on another instance
|
|
const changeInstanceLink = document.querySelector('#watch-on-another-invidious-instance > a');
|
|
if (changeInstanceLink) changeInstanceLink.addEventListener('click', function () {
|
|
changeInstanceLink.href = addCurrentTimeToURL(changeInstanceLink.href);
|
|
});
|
|
});
|
|
|
|
console.log('[Invidious Debug] player.js finished loading.');
|