Fix comment event listener

3 files changed, 185 insertions, 179 deletions

diff --git a/assets/js/embed.js b/assets/js/embed.js
index 074a9d8d..534c30ff 100644
--- a/assets/js/embed.js
+++ b/assets/js/embed.js
@@ -69,32 +69,34 @@ function get_playlist(plid, retries) {
     xhr.send();
 }
 
-if (video_data.plid) {
-    get_playlist(video_data.plid);
-} else if (video_data.video_series) {
-    player.on('ended', function () {
-        var url = new URL('https://example.com/embed/' + video_data.video_series.shift());
-
-        if (video_data.params.autoplay || video_data.params.continue_autoplay) {
-            url.searchParams.set('autoplay', '1');
-        }
+window.addEventListener('load', function (e) {
+    if (video_data.plid) {
+        get_playlist(video_data.plid);
+    } else if (video_data.video_series) {
+        player.on('ended', function () {
+            var url = new URL('https://example.com/embed/' + video_data.video_series.shift());
+
+            if (video_data.params.autoplay || video_data.params.continue_autoplay) {
+                url.searchParams.set('autoplay', '1');
+            }
 
-        if (video_data.params.listen !== video_data.preferences.listen) {
-            url.searchParams.set('listen', video_data.params.listen);
-        }
+            if (video_data.params.listen !== video_data.preferences.listen) {
+                url.searchParams.set('listen', video_data.params.listen);
+            }
 
-        if (video_data.params.speed !== video_data.preferences.speed) {
-            url.searchParams.set('speed', video_data.params.speed);
-        }
+            if (video_data.params.speed !== video_data.preferences.speed) {
+                url.searchParams.set('speed', video_data.params.speed);
+            }
 
-        if (video_data.params.local !== video_data.preferences.local) {
-            url.searchParams.set('local', video_data.params.local);
-        }
+            if (video_data.params.local !== video_data.preferences.local) {
+                url.searchParams.set('local', video_data.params.local);
+            }
 
-        if (video_data.video_series.length !== 0) {
-            url.searchParams.set('playlist', video_data.video_series.join(','))
-        }
+            if (video_data.video_series.length !== 0) {
+                url.searchParams.set('playlist', video_data.video_series.join(','))
+            }
 
-        location.assign(url.pathname + url.search);
-    });
-}
+            location.assign(url.pathname + url.search);
+        });
+    }
+});
diff --git a/assets/js/player.js b/assets/js/player.js
index 0d0ecebd..e58af0cd 100644
--- a/assets/js/player.js
+++ b/assets/js/player.js
@@ -151,45 +151,47 @@ player.vttThumbnails({
 
 // Enable annotations
 if (!video_data.params.listen && video_data.params.annotations) {
-    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) {
+    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;
-        var path = new URL(url);
+        window.addEventListener('__ar_annotation_click', e => {
+            const { url, target, seconds } = e.detail;
+            var path = new URL(url);
 
-        if (path.href.startsWith('https://www.youtube.com/watch?') && seconds) {
-            path.search += '&t=' + seconds;
-        }
+            if (path.href.startsWith('https://www.youtube.com/watch?') && seconds) {
+                path.search += '&t=' + seconds;
+            }
 
-        path = path.pathname + path.search;
+            path = path.pathname + path.search;
 
-        if (target === 'current') {
-            window.location.href = path;
-        } else if (target === 'new') {
-            window.open(path, '_blank');
-        }
-    });
+            if (target === 'current') {
+                window.location.href = path;
+            } else if (target === 'new') {
+                window.open(path, '_blank');
+            }
+        });
 
-    xhr.send();
+        xhr.send();
+    });
 }
 
 function increase_volume(delta) {
@@ -234,25 +236,25 @@ function toggle_play() {
     }
 }
 
-const toggle_captions = (function() {
+const toggle_captions = (function () {
     let toggledTrack = null;
-    const onChange = function(e) {
+    const onChange = function (e) {
         toggledTrack = null;
     };
-    const bindChange = function(onOrOff) {
+    const bindChange = function (onOrOff) {
         player.textTracks()[onOrOff]('change', onChange);
     };
     // 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) {
+    const setMode = function (track, mode) {
         bindChange('off');
         track.mode = mode;
-        window.setTimeout(function() {
+        window.setTimeout(function () {
             bindChange('on');
         }, 0);
     };
     bindChange('on');
-    return function() {
+    return function () {
         if (toggledTrack !== null) {
             if (toggledTrack.mode !== 'showing') {
                 setMode(toggledTrack, 'showing');
@@ -323,95 +325,95 @@ window.addEventListener('keydown', e => {
         || 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.altKey ? '+alt' : '')
         + (e.ctrlKey ? '+ctrl' : '')
         + (e.metaKey ? '+meta' : '')
-    ;
+        ;
     switch (decoratedKey) {
-    case ' ':
-    case 'k':
-        action = toggle_play;
-        break;
-
-    case 'ArrowUp':
-        if (isPlayerFocused) {
-            action = increase_volume.bind(this, 0.1);
-        }
-        break;
-    case 'ArrowDown':
-        if (isPlayerFocused) {
-            action = increase_volume.bind(this, -0.1);
-        }
-        break;
-
-    case 'm':
-        action = toggle_muted;
-        break;
-
-    case 'ArrowRight':
-        action = skip_seconds.bind(this, 5);
-        break;
-    case 'ArrowLeft':
-        action = skip_seconds.bind(this, -5);
-        break;
-    case 'l':
-        action = skip_seconds.bind(this, 10);
-        break;
-    case 'j':
-        action = skip_seconds.bind(this, -10);
-        break;
-
-    case '0':
-    case '1':
-    case '2':
-    case '3':
-    case '4':
-    case '5':
-    case '6':
-    case '7':
-    case '8':
-    case '9':
-        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':
-        action = next_video;
-        break;
-    case 'P':
-        // 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;
-
-    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;
+        case ' ':
+        case 'k':
+            action = toggle_play;
+            break;
+
+        case 'ArrowUp':
+            if (isPlayerFocused) {
+                action = increase_volume.bind(this, 0.1);
+            }
+            break;
+        case 'ArrowDown':
+            if (isPlayerFocused) {
+                action = increase_volume.bind(this, -0.1);
+            }
+            break;
+
+        case 'm':
+            action = toggle_muted;
+            break;
+
+        case 'ArrowRight':
+            action = skip_seconds.bind(this, 5);
+            break;
+        case 'ArrowLeft':
+            action = skip_seconds.bind(this, -5);
+            break;
+        case 'l':
+            action = skip_seconds.bind(this, 10);
+            break;
+        case 'j':
+            action = skip_seconds.bind(this, -10);
+            break;
+
+        case '0':
+        case '1':
+        case '2':
+        case '3':
+        case '4':
+        case '5':
+        case '6':
+        case '7':
+        case '8':
+        case '9':
+            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':
+            action = next_video;
+            break;
+        case 'P':
+            // 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;
+
+        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) {
@@ -422,7 +424,7 @@ 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() {
+(function () {
     const volumeStep = 0.05;
     const enableVolumeScroll = true;
     const enableHoverScroll = true;
@@ -432,33 +434,33 @@ window.addEventListener('keydown', e => {
     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; };
+        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;
-      }
-
-      // 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);
+        var activeEl = doc.activeElement;
+        if (enableHoverScroll) {
+            // If we leave this undefined then it can match non-existent elements below
+            activeEl = 0;
+        }
+
+        // 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);
+                    }
+                }
             }
-          }
         }
-      }
     };
 
     player.on('mousewheel', mouseScroll);
diff --git a/assets/js/watch.js b/assets/js/watch.js
index 80cb1769..a26cb505 100644
--- a/assets/js/watch.js
+++ b/assets/js/watch.js
@@ -439,19 +439,21 @@ if (video_data.play_next) {
     });
 }
 
-if (video_data.plid) {
-    get_playlist(video_data.plid);
-}
+window.addEventListener('load', function (e) {
+    if (video_data.plid) {
+        get_playlist(video_data.plid);
+    }
 
-if (video_data.params.comments[0] === 'youtube') {
-    get_youtube_comments();
-} else if (video_data.params.comments[0] === 'reddit') {
-    get_reddit_comments();
-} else if (video_data.params.comments[1] === 'youtube') {
-    get_youtube_comments();
-} else if (video_data.params.comments[1] === 'reddit') {
-    get_reddit_comments();
-} else {
-    comments = document.getElementById('comments');
-    comments.innerHTML = '';
-}
+    if (video_data.params.comments[0] === 'youtube') {
+        get_youtube_comments();
+    } else if (video_data.params.comments[0] === 'reddit') {
+        get_reddit_comments();
+    } else if (video_data.params.comments[1] === 'youtube') {
+        get_youtube_comments();
+    } else if (video_data.params.comments[1] === 'reddit') {
+        get_reddit_comments();
+    } else {
+        comments = document.getElementById('comments');
+        comments.innerHTML = '';
+    }
+});