Merge branch 'master' into unix-sockets

1 files changed, 416 insertions, 263 deletions

diff --git a/assets/js/player.js b/assets/js/player.js
index a6d0c8c1..353a5296 100644
--- a/assets/js/player.js
+++ b/assets/js/player.js
@@ -1,8 +1,8 @@
-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',
     liveui: true,
     playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
     controlBar: {
@@ -16,6 +16,7 @@ var options = {
             'remainingTimeDisplay',
             'Spacer',
             'captionsButton',
+            'audioTrackButton',
             'qualitySelector',
             'playbackRateMenuButton',
             'fullscreenToggle'
@@ -23,11 +24,11 @@ var options = {
     },
     html5: {
         preloadTextTracks: false,
-        hls: {
+        vhs: {
             overrideNative: true
         }
     }
-}
+};
 
 if (player_data.aspect_ratio) {
     options.aspectRatio = player_data.aspect_ratio;
@@ -35,118 +36,211 @@ if (player_data.aspect_ratio) {
 
 var embed_url = new URL(location);
 embed_url.searchParams.delete('v');
-short_url = location.origin + '/' + video_data.id + embed_url.search;
+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;
+};
+
+var player = videojs('player', options);
+
+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';
+            return source;
+        }));
+    } 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') {
+    player.reloadSourceOnError({
+        errorInterval: 10
+    });
+}
+
+/**
+ * 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');
+    let elem_yt_embed = document.getElementById('link-yt-embed');
+
+    let base_url_yt_watch = elem_yt_watch.getAttribute('data-base-url');
+    let base_url_yt_embed = elem_yt_embed.getAttribute('data-base-url');
+
+    elem_yt_watch.href = addCurrentTimeToURL(base_url_yt_watch);
+    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');
+    let elem_iv_other = document.getElementById('link-iv-other');
+
+    let base_url_iv_embed = elem_iv_embed.getAttribute('data-base-url');
+    let base_url_iv_other = elem_iv_other.getAttribute('data-base-url');
+
+    elem_iv_embed.href = addCurrentTimeToURL(base_url_iv_embed, domain);
+    elem_iv_other.href = addCurrentTimeToURL(base_url_iv_other, domain);
+});
+
+
 var shareOptions = {
     socials: ['fbFeed', 'tw', 'reddit', 'email'],
 
-    url: short_url,
+    get url() {
+        return addCurrentTimeToURL(short_url);
+    },
     title: player_data.title,
     description: player_data.description,
     image: player_data.thumbnail,
-    embedCode: "<iframe id='ivplayer' width='640' height='360' src='" + embed_url + "' style='border:none;'></iframe>"
-}
-
-videojs.Hls.xhr.beforeRequest = function(options) {
-    if (options.uri.indexOf('videoplayback') === -1 && options.uri.indexOf('local=true') === -1) {
-        options.uri = options.uri + '?local=true';
+    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>";
     }
-    return options;
 };
 
-var player = videojs('player', options);
-
-
 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({
-        overlays: [{
-            start: 'loadstart',
-            content: '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>',
-            end: 'playing',
-            align: 'top'
-        }, {
-            start: 'pause',
-            content: '<h1><a rel="noopener" target="_blank" href="' + location.origin + '/watch?v=' + video_data.id + '">' + player_data.title + '</a></h1>',
-            end: 'playing',
-            align: 'top'
-        }]
+        overlays: [
+            { start: 'loadstart', content: overlay_content, end: 'playing', align: 'top'},
+            { start: 'pause',     content: overlay_content, end: 'playing', align: 'top'}
+        ]
     });
 }
 
-// Detect mobile users and initalize mobileUi for better UX
+// Detect mobile users and initialize mobileUi for better UX
 // 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();
+    player.mobileUi({ touchControls: { seekSeconds: 5 * player.playbackRate() } });
 
-    buttons = ["playToggle", "volumePanel", "captionsButton"];
+    var buttons = ['playToggle', 'volumePanel', 'captionsButton'];
 
-    if (video_data.params.quality !== 'dash') {
-        buttons.push("qualitySelector")
-    }
+    if (!video_data.params.listen && video_data.params.quality === 'dash') buttons.push('audioTrackButton');
+    if (video_data.params.listen || 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.classList.add('mobile-operations-bar');
+    player.addChild(operations_bar);
 
-    // Playback menu doesn't work when its initalized outside of the primary control bar
-    playback_element = document.getElementsByClassName("vjs-playback-rate")[0]
-    operations_bar_element.append(playback_element)
+    // Playback menu doesn't work when it's initialized outside of the primary control bar
+    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.on('error', function (event) {
-    if (player.error().code === 2 || player.error().code === 4) {
-        setTimeout(function (event) {
-            console.log('An error occured in the player, reloading...');
-
-            var currentTime = player.currentTime();
-            var playbackRate = player.playbackRate();
-            var paused = player.paused();
-
-            player.load();
+    player.one('playing', function () {
+        var share_element = document.getElementsByClassName('vjs-share-control')[0];
+        operations_bar_element.append(share_element);
 
-            if (currentTime > 0.5) {
-                currentTime -= 0.5;
-            }
-
-            player.currentTime(currentTime);
-            player.playbackRate(playbackRate);
+        if (!video_data.params.listen && 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);
+        }
+    });
+}
 
-            if (!paused) {
-                player.play();
-            }
-        }, 5000);
+// Enable VR video support
+if (!video_data.params.listen && video_data.vr && video_data.params.vr_mode) {
+    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'});
     }
-});
+}
 
 // Add markers
 if (video_data.params.video_start > 0 || video_data.params.video_end > 0) {
@@ -160,13 +254,8 @@ if (video_data.params.video_start > 0 || video_data.params.video_end > 0) {
 
     player.markers({
         onMarkerReached: function (marker) {
-            if (marker.text === 'End') {
-                if (player.loop()) {
-                    player.markers.prev('Start');
-                } else {
-                    player.pause();
-                }
-            }
+            if (marker.text === 'End')
+                player.loop() ? player.markers.prev('Start') : player.pause();
         },
         markers: markers
     });
@@ -177,9 +266,76 @@ if (video_data.params.video_start > 0 || video_data.params.video_end > 0) {
 player.volume(video_data.params.volume / 100);
 player.playbackRate(video_data.params.speed);
 
+/**
+ * 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.log('Player has caught up to source, resetting playbackRate.')
+        console.info('Player has caught up to source, resetting playbackRate');
         player.playbackRate(1);
     }
 });
@@ -188,19 +344,44 @@ if (video_data.premiere_timestamp && Math.round(new Date() / 1000) < video_data.
     player.getChild('bigPlayButton').hide();
 }
 
+if (video_data.params.save_player_pos) {
+    const url = new URL(location);
+    const hasTimeParam = url.searchParams.has('t');
+    const rememberedTime = get_video_time();
+    let lastUpdated = 0;
+
+    if(!hasTimeParam) {
+      if (rememberedTime >= video_data.length_seconds - 20)
+        set_seconds_after_start(0);
+      else
+        set_seconds_after_start(rememberedTime);
+    }
+
+    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) {
     var bpb = player.getChild('bigPlayButton');
     bpb.hide();
 
     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();
                 });
             }
@@ -211,67 +392,47 @@ 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:
-                        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', e => {
-            const { url, target, seconds } = e.detail;
+    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) {
@@ -281,88 +442,104 @@ 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);
 }
 
-function set_time_percent(percent) {
-    const duration = player.duration();
-    const newTime = duration * (percent / 100);
-    player.currentTime(newTime);
+function set_seconds_after_start(delta) {
+    const start = video_data.params.video_start;
+    player.currentTime(start + delta);
 }
 
-function play() {
-    player.play();
+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);
 }
 
-function pause() {
-    player.pause();
+function get_video_time() {
+    return get_all_video_times()[video_data.id] || 0;
 }
 
-function stop() {
-    player.pause();
-    player.currentTime(0);
+function get_all_video_times() {
+    return helpers.storage.get(save_player_pos_key) || {};
 }
 
-function toggle_play() {
-    if (player.paused()) {
-        play();
-    } else {
-        pause();
-    }
+function remove_all_video_times() {
+    helpers.storage.remove(save_player_pos_key);
+}
+
+function set_time_percent(percent) {
+    const duration = player.duration();
+    const newTime = duration * (percent / 100);
+    player.currentTime(newTime);
 }
 
+function play()  { player.play(); }
+function pause() { player.pause(); }
+function stop()  { player.pause(); player.currentTime(0); }
+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) {
@@ -382,9 +559,7 @@ const toggle_captions = (function () {
         const tracks = player.textTracks();
         for (let i = 0; i < tracks.length; i++) {
             const track = tracks[i];
-            if (track.kind !== 'captions') {
-                continue;
-            }
+            if (track.kind !== 'captions') continue;
 
             if (fallbackCaptionsTrack === null) {
                 fallbackCaptionsTrack = track;
@@ -405,26 +580,18 @@ const toggle_captions = (function () {
 })();
 
 function toggle_fullscreen() {
-    if (player.isFullscreen()) {
-        player.exitFullscreen();
-    } else {
-        player.requestFullscreen();
-    }
+    player.isFullscreen() ? player.exitFullscreen() : player.requestFullscreen();
 }
 
 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', e => {
+addEventListener('keydown', function (e) {
     if (e.target.tagName.toLowerCase() === 'input') {
         // Ignore input when focus is on certain elements, e.g. form fields.
         return;
@@ -452,27 +619,15 @@ window.addEventListener('keydown', e => {
             action = toggle_play;
             break;
 
-        case 'MediaPlay':
-            action = play;
-            break;
-
-        case 'MediaPause':
-            action = pause;
-            break;
-
-        case 'MediaStop':
-            action = stop;
-            break;
+        case 'MediaPlay':  action = play; break;
+        case 'MediaPause': action = pause; break;
+        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':
@@ -504,16 +659,15 @@ window.addEventListener('keydown', e => {
         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 'c': action = toggle_captions; break;
+        case 'f': action = toggle_fullscreen; break;
 
         case 'N':
         case 'MediaTrackNext':
@@ -524,19 +678,14 @@ window.addEventListener('keydown', 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;
+        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);
@@ -552,84 +701,88 @@ window.addEventListener('keydown', 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;
     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; };
     }
 
-    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);
+    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) {
-    player.ready(() => {
-        player.textTracks()[1].mode = 'showing';
+    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) {
+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.currentTime(player.duration() + 1);
+            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) {
+    player.loop(false);
+    player.ready(function () {
+        player.on('ended', function () {
+            player.currentTime(0);
+            player.play();
+        });
+    });
+}
+
 // 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);
 
     // Create hyperlink for current instance
-    redirect_element = document.createElement("a");
-    redirect_element.setAttribute("href", `http://${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);
+}
+
+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);
+    });
+});