diff options
Diffstat (limited to 'assets/js/player.js')
| -rw-r--r-- | assets/js/player.js | 334 |
1 files changed, 134 insertions, 200 deletions
diff --git a/assets/js/player.js b/assets/js/player.js index 6ddb1158..7d099e66 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -42,45 +42,53 @@ 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) { - if (options.uri.indexOf('videoplayback') === -1 && options.uri.indexOf('local=true') === -1) { - options.uri = options.uri + '?local=true'; + // set local if requested not videoplayback + if (!options.uri.includes('videoplayback')) { + if (!options.uri.includes('local=true')) + options.uri += '?local=true'; } return options; }; var player = videojs('player', options); -player.on('error', () => { - if (video_data.params.quality !== 'dash') { - if (!player.currentSrc().includes("local=true") && !video_data.local_disabled) { - var currentSources = player.currentSources(); - for (var i = 0; i < currentSources.length; i++) { - currentSources[i]["src"] += "&local=true" - } - player.src(currentSources) - } - else if (player.error().code === 2 || player.error().code === 4) { - setTimeout(function (event) { - console.log('An error occurred in the player, reloading...'); - - 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(); - }, 10000); - } +player.on('error', function () { + 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'; + })); + } else if (reloadMakesSense) { + 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); } }); -if (video_data.params.quality == 'dash') { +if (video_data.params.quality === 'dash') { player.reloadSourceOnError({ errorInterval: 10 }); @@ -89,7 +97,7 @@ if (video_data.params.quality == 'dash') { /** * Function for add time argument to url * @param {String} url - * @returns urlWithTimeArg + * @returns {URL} urlWithTimeArg */ function addCurrentTimeToURL(url) { var urlUsed = new URL(url); @@ -112,18 +120,12 @@ var shareOptions = { description: player_data.description, image: player_data.thumbnail, get embedCode() { - return '<iframe id="ivplayer" width="640" height="360" src="' + - addCurrentTimeToURL(embed_url) + '" style="border:none;"></iframe>'; + // 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>"; } }; -const storage = (function () { - try { if (localStorage.length !== -1) return localStorage; } - catch (e) { console.info('No storage available: ' + e); } - - return undefined; -})(); - if (location.pathname.startsWith('/embed/')) { var overlay_content = '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>'; player.overlay({ @@ -162,7 +164,7 @@ if (isMobile()) { buttons.forEach(function (child) {primary_control_bar.removeChild(child);}); var operations_bar_element = operations_bar.el(); - operations_bar_element.className += ' mobile-operations-bar'; + operations_bar_element.classList.add('mobile-operations-bar'); player.addChild(operations_bar); // Playback menu doesn't work when it's initialized outside of the primary control bar @@ -175,8 +177,8 @@ if (isMobile()) { operations_bar_element.append(share_element); if (video_data.params.quality === 'dash') { - var http_source_selector = document.getElementsByClassName('vjs-http-source-selector vjs-menu-button')[0]; - operations_bar_element.append(http_source_selector); + var http_source_selector = document.getElementsByClassName('vjs-http-source-selector vjs-menu-button')[0]; + operations_bar_element.append(http_source_selector); } }); } @@ -220,14 +222,14 @@ player.playbackRate(video_data.params.speed); * Method for getting the contents of a cookie * * @param {String} name Name of cookie - * @returns cookieValue + * @returns {String|null} cookieValue */ function getCookieValue(name) { - var value = document.cookie.split(';').filter(function (item) {return item.includes(name + '=');}); - - return (value.length >= 1) - ? value[0].substring((name + '=').length, value[0].length) - : null; + var cookiePrefix = name + '='; + var matchedCookie = document.cookie.split(';').find(function (item) {return item.includes(cookiePrefix);}); + if (matchedCookie) + return matchedCookie.replace(cookiePrefix, ''); + return null; } /** @@ -257,11 +259,11 @@ function updateCookie(newVolume, newSpeed) { date.setTime(date.getTime() + 63115200); var ipRegex = /^((\d+\.){3}\d+|[A-Fa-f0-9]*:[A-Fa-f0-9:]*:[A-Fa-f0-9:]+)$/; - var domainUsed = window.location.hostname; + 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 = '.' + window.location.hostname; + domainUsed = '.' + location.hostname; document.cookie = 'PREFS=' + cookieData + '; SameSite=Strict; path=/; domain=' + domainUsed + '; expires=' + date.toGMTString() + ';'; @@ -280,7 +282,7 @@ player.on('volumechange', function () { player.on('waiting', function () { if (player.playbackRate() > 1 && player.liveTracker.isLive() && player.liveTracker.atLiveEdge()) { - console.info('Player has caught up to source, resetting playbackRate.'); + console.info('Player has caught up to source, resetting playbackRate'); player.playbackRate(1); } }); @@ -292,12 +294,12 @@ if (video_data.premiere_timestamp && Math.round(new Date() / 1000) < video_data. if (video_data.params.save_player_pos) { const url = new URL(location); const hasTimeParam = url.searchParams.has('t'); - const remeberedTime = get_video_time(); + const rememberedTime = get_video_time(); let lastUpdated = 0; - if(!hasTimeParam) set_seconds_after_start(remeberedTime); + if(!hasTimeParam) set_seconds_after_start(rememberedTime); - const updateTime = function () { + player.on('timeupdate', function () { const raw = player.currentTime(); const time = Math.floor(raw); @@ -305,9 +307,7 @@ if (video_data.params.save_player_pos) { save_video_time(time); lastUpdated = time; } - }; - - player.on('timeupdate', updateTime); + }); } else remove_all_video_times(); @@ -347,53 +347,31 @@ if (!video_data.params.listen && video_data.params.quality === 'dash') { targetQualityLevel = 0; break; default: - const targetHeight = Number.parseInt(video_data.params.quality_dash, 10); + const targetHeight = parseInt(video_data.params.quality_dash); for (let i = 0; i < qualityLevels.length; i++) { - if (qualityLevels[i].height <= targetHeight) { + if (qualityLevels[i].height <= targetHeight) targetQualityLevel = i; - } else { + else break; - } } } - for (let i = 0; i < qualityLevels.length; i++) { - qualityLevels[i].enabled = (i === targetQualityLevel); - } + qualityLevels.forEach(function (level, index) { + level.enabled = (index === targetQualityLevel); + }); }); }); } } player.vttThumbnails({ - src: location.origin + '/api/v1/storyboards/' + video_data.id + '?height=90', + src: '/api/v1/storyboards/' + video_data.id + '?height=90', showTimestamp: true }); // Enable annotations if (!video_data.params.listen && video_data.params.annotations) { - window.addEventListener('load', function (e) { - var video_container = document.getElementById('player'); - let xhr = new XMLHttpRequest(); - xhr.responseType = 'text'; - xhr.timeout = 60000; - xhr.open('GET', '/api/v1/annotations/' + video_data.id, true); - - xhr.onreadystatechange = function () { - if (xhr.readyState === 4) { - if (xhr.status === 200) { - videojs.registerPlugin('youtubeAnnotationsPlugin', youtubeAnnotationsPlugin); - if (!player.paused()) { - player.youtubeAnnotationsPlugin({ annotationXml: xhr.response, videoContainer: video_container }); - } else { - player.one('play', function (event) { - player.youtubeAnnotationsPlugin({ annotationXml: xhr.response, videoContainer: video_container }); - }); - } - } - } - }; - - window.addEventListener('__ar_annotation_click', function (e) { + addEventListener('load', function (e) { + addEventListener('__ar_annotation_click', function (e) { const url = e.detail.url, target = e.detail.target, seconds = e.detail.seconds; @@ -406,41 +384,48 @@ if (!video_data.params.listen && video_data.params.annotations) { path = path.pathname + path.search; if (target === 'current') { - window.location.href = path; + location.href = path; } else if (target === 'new') { - window.open(path, '_blank'); + 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 }); + } } }); - xhr.send(); }); } -function increase_volume(delta) { +function change_volume(delta) { const curVolume = player.volume(); let newVolume = curVolume + delta; - if (newVolume > 1) { - newVolume = 1; - } else if (newVolume < 0) { - newVolume = 0; - } + newVolume = helpers.clamp(newVolume, 0, 1); player.volume(newVolume); } function toggle_muted() { - const isMuted = player.muted(); - player.muted(!isMuted); + player.muted(!player.muted()); } function skip_seconds(delta) { const duration = player.duration(); const curTime = player.currentTime(); let newTime = curTime + delta; - if (newTime > duration) { - newTime = duration; - } else if (newTime < 0) { - newTime = 0; - } + newTime = helpers.clamp(newTime, 0, duration); player.currentTime(newTime); } @@ -450,57 +435,21 @@ function set_seconds_after_start(delta) { } function save_video_time(seconds) { - const videoId = video_data.id; const all_video_times = get_all_video_times(); - - all_video_times[videoId] = seconds; - - set_all_video_times(all_video_times); + all_video_times[video_data.id] = seconds; + helpers.storage.set(save_player_pos_key, all_video_times); } function get_video_time() { - try { - const videoId = video_data.id; - const all_video_times = get_all_video_times(); - const timestamp = all_video_times[videoId]; - - return timestamp || 0; - } - catch (e) { - return 0; - } -} - -function set_all_video_times(times) { - if (storage) { - if (times) { - try { - storage.setItem(save_player_pos_key, JSON.stringify(times)); - } catch (e) { - console.warn('set_all_video_times: ' + e); - } - } else { - storage.removeItem(save_player_pos_key); - } - } + return get_all_video_times()[video_data.id] || 0; } function get_all_video_times() { - if (storage) { - const raw = storage.getItem(save_player_pos_key); - if (raw !== null) { - try { - return JSON.parse(raw); - } catch (e) { - console.warn('get_all_video_times: ' + e); - } - } - } - return {}; + return helpers.storage.get(save_player_pos_key) || {}; } function remove_all_video_times() { - set_all_video_times(null); + helpers.storage.remove(save_player_pos_key); } function set_time_percent(percent) { @@ -516,21 +465,23 @@ function toggle_play() { player.paused() ? play() : pause(); } const toggle_captions = (function () { let toggledTrack = null; - const onChange = function (e) { - toggledTrack = null; - }; - const bindChange = function (onOrOff) { - player.textTracks()[onOrOff]('change', onChange); - }; + + 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. - const setMode = function (track, mode) { + function setMode(track, mode) { bindChange('off'); track.mode = mode; - window.setTimeout(function () { + setTimeout(function () { bindChange('on'); }, 0); - }; + } + bindChange('on'); return function () { if (toggledTrack !== null) { @@ -578,15 +529,11 @@ function increase_playback_rate(steps) { const maxIndex = options.playbackRates.length - 1; const curIndex = options.playbackRates.indexOf(player.playbackRate()); let newIndex = curIndex + steps; - if (newIndex > maxIndex) { - newIndex = maxIndex; - } else if (newIndex < 0) { - newIndex = 0; - } + newIndex = helpers.clamp(newIndex, 0, maxIndex); player.playbackRate(options.playbackRates[newIndex]); } -window.addEventListener('keydown', function (e) { +addEventListener('keydown', function (e) { if (e.target.tagName.toLowerCase() === 'input') { // Ignore input when focus is on certain elements, e.g. form fields. return; @@ -619,10 +566,10 @@ window.addEventListener('keydown', function (e) { case 'MediaStop': action = stop; break; case 'ArrowUp': - if (isPlayerFocused) action = increase_volume.bind(this, 0.1); + if (isPlayerFocused) action = change_volume.bind(this, 0.1); break; case 'ArrowDown': - if (isPlayerFocused) action = increase_volume.bind(this, -0.1); + if (isPlayerFocused) action = change_volume.bind(this, -0.1); break; case 'm': @@ -673,12 +620,11 @@ window.addEventListener('keydown', function (e) { // TODO: Add support to play back previous video. break; - case '.': - // TODO: Add support for next-frame-stepping. - break; - case ',': - // TODO: Add support for previous-frame-stepping. - 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; @@ -697,10 +643,6 @@ window.addEventListener('keydown', function (e) { // 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 volumeStep = 0.05; - const enableVolumeScroll = true; - const enableHoverScroll = true; - const doc = document; const pEl = document.getElementById('player'); var volumeHover = false; @@ -710,39 +652,23 @@ window.addEventListener('keydown', function (e) { volumeSelector.onmouseout = function () { volumeHover = false; }; } - var mouseScroll = function mouseScroll(event) { - var activeEl = doc.activeElement; - if (enableHoverScroll) { - // If we leave this undefined then it can match non-existent elements below - activeEl = 0; - } - + function mouseScroll(event) { // When controls are disabled, hotkeys will be disabled as well - if (player.controls()) { - if (volumeHover) { - if (enableVolumeScroll) { - event = window.event || event; - var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); - event.preventDefault(); - - if (delta === 1) { - increase_volume(volumeStep); - } else if (delta === -1) { - increase_volume(-volumeStep); - } - } - } - } - }; + 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); }()); // Since videojs-share can sometimes be blocked, we defer it until last -if (player.share) { - player.share(shareOptions); -} +if (player.share) player.share(shareOptions); // show the preferred caption by default if (player_data.preferred_caption_found) { @@ -763,7 +689,7 @@ if (navigator.vendor === 'Apple Computer, Inc.' && video_data.params.listen) { } // Watch on Invidious link -if (window.location.pathname.startsWith('/embed/')) { +if (location.pathname.startsWith('/embed/')) { const Button = videojs.getComponent('Button'); let watch_on_invidious_button = new Button(player); @@ -778,3 +704,11 @@ if (window.location.pathname.startsWith('/embed/')) { var cb = player.getChild('ControlBar'); cb.addChild(watch_on_invidious_button); } + +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); + }); +}); |