diff options
Diffstat (limited to 'assets/js/player.js')
| -rw-r--r-- | assets/js/player.js | 157 |
1 files changed, 80 insertions, 77 deletions
diff --git a/assets/js/player.js b/assets/js/player.js index f5bec651..6ddb1158 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -1,5 +1,6 @@ -var player_data = JSON.parse(document.getElementById('player_data').innerHTML); -var video_data = JSON.parse(document.getElementById('video_data').innerHTML); +'use strict'; +var player_data = JSON.parse(document.getElementById('player_data').textContent); +var video_data = JSON.parse(document.getElementById('video_data').textContent); var options = { preload: 'auto', @@ -27,7 +28,7 @@ var options = { overrideNative: true } } -} +}; if (player_data.aspect_ratio) { options.aspectRatio = player_data.aspect_ratio; @@ -38,7 +39,7 @@ 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"; +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) { @@ -111,12 +112,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>"; + return '<iframe id="ivplayer" width="640" height="360" src="' + + addCurrentTimeToURL(embed_url) + '" style="border:none;"></iframe>'; } }; -const storage = (() => { +const storage = (function () { try { if (localStorage.length !== -1) return localStorage; } catch (e) { console.info('No storage available: ' + e); } @@ -137,57 +138,57 @@ if (location.pathname.startsWith('/embed/')) { // Detection code taken from https://stackoverflow.com/a/20293441 function isMobile() { - try{ document.createEvent("TouchEvent"); return true; } + try{ document.createEvent('TouchEvent'); return true; } catch(e){ return false; } } if (isMobile()) { player.mobileUi(); - buttons = ["playToggle", "volumePanel", "captionsButton"]; + var buttons = ['playToggle', 'volumePanel', 'captionsButton']; - if (video_data.params.quality !== 'dash') buttons.push("qualitySelector") + if (video_data.params.quality !== 'dash') buttons.push('qualitySelector'); // Create new control bar object for operation buttons - const ControlBar = videojs.getComponent("controlBar"); + const ControlBar = videojs.getComponent('controlBar'); let operations_bar = new ControlBar(player, { children: [], playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0] }); - buttons.slice(1).forEach(child => operations_bar.addChild(child)) + buttons.slice(1).forEach(function (child) {operations_bar.addChild(child);}); // Remove operation buttons from primary control bar - primary_control_bar = player.getChild("controlBar"); - buttons.forEach(child => primary_control_bar.removeChild(child)); + var primary_control_bar = player.getChild('controlBar'); + buttons.forEach(function (child) {primary_control_bar.removeChild(child);}); - operations_bar_element = operations_bar.el(); - operations_bar_element.className += " mobile-operations-bar" - player.addChild(operations_bar) + var operations_bar_element = operations_bar.el(); + operations_bar_element.className += ' mobile-operations-bar'; + player.addChild(operations_bar); // Playback menu doesn't work when it's initialized outside of the primary control bar - playback_element = document.getElementsByClassName("vjs-playback-rate")[0] - operations_bar_element.append(playback_element) + var playback_element = document.getElementsByClassName('vjs-playback-rate')[0]; + operations_bar_element.append(playback_element); // The share and http source selector element can't be fetched till the players ready. - player.one("playing", () => { - share_element = document.getElementsByClassName("vjs-share-control")[0] - operations_bar_element.append(share_element) - - if (video_data.params.quality === 'dash') { - http_source_selector = document.getElementsByClassName("vjs-http-source-selector vjs-menu-button")[0] - operations_bar_element.append(http_source_selector) - } - }) + player.one('playing', function () { + var share_element = document.getElementsByClassName('vjs-share-control')[0]; + 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); + } + }); } // Enable VR video support if (!video_data.params.listen && video_data.vr && video_data.params.vr_mode) { - player.crossOrigin("anonymous") + player.crossOrigin('anonymous'); switch (video_data.projection_type) { - case "EQUIRECTANGULAR": - player.vr({projection: "equirectangular"}); - default: // Should only be "MESH" but we'll use this as a fallback. - player.vr({projection: "EAC"}); + case 'EQUIRECTANGULAR': + player.vr({projection: 'equirectangular'}); + default: // Should only be 'MESH' but we'll use this as a fallback. + player.vr({projection: 'EAC'}); } } @@ -222,27 +223,27 @@ player.playbackRate(video_data.params.speed); * @returns cookieValue */ function getCookieValue(name) { - var value = document.cookie.split(";").filter(item => item.includes(name + "=")); + var value = document.cookie.split(';').filter(function (item) {return item.includes(name + '=');}); - return (value != null && value.length >= 1) - ? value[0].substring((name + "=").length, value[0].length) + return (value.length >= 1) + ? value[0].substring((name + '=').length, value[0].length) : null; } /** - * Method for updating the "PREFS" cookie (or creating it if missing) + * 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 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) { + if (cookieValue !== null) { var cookieJson = JSON.parse(decodeURIComponent(cookieValue)); cookieJson.volume = volumeValue; cookieJson.speed = speedValue; @@ -259,7 +260,7 @@ function updateCookie(newVolume, newSpeed) { var domainUsed = window.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') + if (domainUsed.charAt(0) !== '.' && !ipRegex.test(domainUsed) && domainUsed !== 'localhost') domainUsed = '.' + window.location.hostname; document.cookie = 'PREFS=' + cookieData + '; SameSite=Strict; path=/; domain=' + @@ -279,7 +280,7 @@ player.on('volumechange', function () { player.on('waiting', function () { if (player.playbackRate() > 1 && player.liveTracker.isLive() && player.liveTracker.atLiveEdge()) { - console.log('Player has caught up to source, resetting playbackRate.') + console.info('Player has caught up to source, resetting playbackRate.'); player.playbackRate(1); } }); @@ -290,13 +291,13 @@ 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 hasTimeParam = url.searchParams.has('t'); const remeberedTime = get_video_time(); let lastUpdated = 0; if(!hasTimeParam) set_seconds_after_start(remeberedTime); - const updateTime = () => { + const updateTime = function () { const raw = player.currentTime(); const time = Math.floor(raw); @@ -306,7 +307,7 @@ if (video_data.params.save_player_pos) { } }; - player.on("timeupdate", updateTime); + player.on('timeupdate', updateTime); } else remove_all_video_times(); @@ -316,13 +317,13 @@ if (video_data.params.autoplay) { player.ready(function () { new Promise(function (resolve, reject) { - setTimeout(() => resolve(1), 1); + setTimeout(function () {resolve(1);}, 1); }).then(function (result) { var promise = player.play(); if (promise !== undefined) { - promise.then(_ => { - }).catch(error => { + promise.then(function () { + }).catch(function (error) { bpb.show(); }); } @@ -333,16 +334,16 @@ if (video_data.params.autoplay) { if (!video_data.params.listen && video_data.params.quality === 'dash') { player.httpSourceSelector(); - if (video_data.params.quality_dash != "auto") { - player.ready(() => { - player.on("loadedmetadata", () => { - const qualityLevels = Array.from(player.qualityLevels()).sort((a, b) => a.height - b.height); + if (video_data.params.quality_dash !== 'auto') { + player.ready(function () { + player.on('loadedmetadata', function () { + 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": + case 'best': targetQualityLevel = qualityLevels.length - 1; break; - case "worst": + case 'worst': targetQualityLevel = 0; break; default: @@ -356,7 +357,7 @@ if (!video_data.params.listen && video_data.params.quality === 'dash') { } } for (let i = 0; i < qualityLevels.length; i++) { - qualityLevels[i].enabled = (i == targetQualityLevel); + qualityLevels[i].enabled = (i === targetQualityLevel); } }); }); @@ -390,10 +391,12 @@ if (!video_data.params.listen && video_data.params.annotations) { } } } - } + }; - window.addEventListener('__ar_annotation_click', e => { - const { url, target, seconds } = e.detail; + window.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) { @@ -463,7 +466,7 @@ function get_video_time() { return timestamp || 0; } - catch { + catch (e) { return 0; } } @@ -474,7 +477,7 @@ function set_all_video_times(times) { try { storage.setItem(save_player_pos_key, JSON.stringify(times)); } catch (e) { - console.debug('set_all_video_times: ' + e); + console.warn('set_all_video_times: ' + e); } } else { storage.removeItem(save_player_pos_key); @@ -489,7 +492,7 @@ function get_all_video_times() { try { return JSON.parse(raw); } catch (e) { - console.debug('get_all_video_times: ' + e); + console.warn('get_all_video_times: ' + e); } } } @@ -583,7 +586,7 @@ function increase_playback_rate(steps) { player.playbackRate(options.playbackRates[newIndex]); } -window.addEventListener('keydown', e => { +window.addEventListener('keydown', function (e) { if (e.target.tagName.toLowerCase() === 'input') { // Ignore input when focus is on certain elements, e.g. form fields. return; @@ -702,7 +705,7 @@ window.addEventListener('keydown', e => { var volumeHover = false; var volumeSelector = pEl.querySelector('.vjs-volume-menu-button') || pEl.querySelector('.vjs-volume-panel'); - if (volumeSelector != null) { + if (volumeSelector !== null) { volumeSelector.onmouseover = function () { volumeHover = true; }; volumeSelector.onmouseout = function () { volumeHover = false; }; } @@ -722,9 +725,9 @@ window.addEventListener('keydown', e => { var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); event.preventDefault(); - if (delta == 1) { + if (delta === 1) { increase_volume(volumeStep); - } else if (delta == -1) { + } else if (delta === -1) { increase_volume(-volumeStep); } } @@ -733,7 +736,7 @@ window.addEventListener('keydown', e => { }; player.on('mousewheel', mouseScroll); - player.on("DOMMouseScroll", mouseScroll); + player.on('DOMMouseScroll', mouseScroll); }()); // Since videojs-share can sometimes be blocked, we defer it until last @@ -743,13 +746,13 @@ if (player.share) { // show the preferred caption by default if (player_data.preferred_caption_found) { - player.ready(() => { + player.ready(function () { player.textTracks()[1].mode = 'showing'; }); } // Safari audio double duration fix -if (navigator.vendor == "Apple Computer, Inc." && video_data.params.listen) { +if (navigator.vendor === 'Apple Computer, Inc.' && video_data.params.listen) { player.on('loadedmetadata', function () { player.on('timeupdate', function () { if (player.remainingTime() < player.duration() / 2 && player.remainingTime() >= 2) { @@ -760,18 +763,18 @@ if (navigator.vendor == "Apple Computer, Inc." && video_data.params.listen) { } // Watch on Invidious link -if (window.location.pathname.startsWith("/embed/")) { +if (window.location.pathname.startsWith('/embed/')) { const Button = videojs.getComponent('Button'); let watch_on_invidious_button = new Button(player); // Create hyperlink for current instance - redirect_element = document.createElement("a"); - redirect_element.setAttribute("href", `//${window.location.host}/watch?v=${window.location.pathname.replace("/embed/","")}`) - redirect_element.appendChild(document.createTextNode("Invidious")) + 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") + watch_on_invidious_button.el().appendChild(redirect_element); + watch_on_invidious_button.addClass('watch-on-invidious'); - cb = player.getChild('ControlBar') - cb.addChild(watch_on_invidious_button) -}; + var cb = player.getChild('ControlBar'); + cb.addChild(watch_on_invidious_button); +} |