Refactor watch.js

5 files changed, 367 insertions, 344 deletions

diff --git a/assets/js/subscribe_widget.js b/assets/js/subscribe_widget.js
index 64e3e55f..73beeb98 100644
--- a/assets/js/subscribe_widget.js
+++ b/assets/js/subscribe_widget.js
@@ -39,7 +39,7 @@ function subscribe(timeouts = 0) {
     xhr.ontimeout = function () {
         console.log('Subscribing timed out.');
         subscribe(timeouts + 1);
-    };
+    }
 }
 
 function unsubscribe(timeouts = 0) {
@@ -74,5 +74,5 @@ function unsubscribe(timeouts = 0) {
     xhr.ontimeout = function () {
         console.log('Unsubscribing timed out.');
         unsubscribe(timeouts + 1);
-    };
+    }
 }
diff --git a/assets/js/watch.js b/assets/js/watch.js
index 799d6af9..c5a29313 100644
--- a/assets/js/watch.js
+++ b/assets/js/watch.js
@@ -1,52 +1,375 @@
+String.prototype.supplant = function (o) {
+    return this.replace(/{([^{}]*)}/g, function (a, b) {
+        var r = o[b];
+        return typeof r === 'string' || typeof r === 'number' ? r : a;
+    });
+}
+
 function toggle_parent(target) {
     body = target.parentNode.parentNode.children[1];
-    if (body.style.display === null || body.style.display === "") {
-        target.innerHTML = "[ + ]";
-        body.style.display = "none";
+    if (body.style.display === null || body.style.display === '') {
+        target.innerHTML = '[ + ]';
+        body.style.display = 'none';
     } else {
-        target.innerHTML = "[ - ]";
-        body.style.display = "";
+        target.innerHTML = '[ - ]';
+        body.style.display = '';
     }
 }
 
 function toggle_comments(target) {
     body = target.parentNode.parentNode.parentNode.children[1];
-    if (body.style.display === null || body.style.display === "") {
-        target.innerHTML = "[ + ]";
-        body.style.display = "none";
+    if (body.style.display === null || body.style.display === '') {
+        target.innerHTML = '[ + ]';
+        body.style.display = 'none';
     } else {
-        target.innerHTML = "[ - ]";
-        body.style.display = "";
+        target.innerHTML = '[ - ]';
+        body.style.display = '';
     }
 }
 
 function swap_comments(source) {
-    if (source == "youtube") {
+    if (source == 'youtube') {
         get_youtube_comments();
-    } else if (source == "reddit") {
+    } else if (source == 'reddit') {
         get_reddit_comments();
     }
 }
 
-String.prototype.supplant = function (o) {
-    return this.replace(/{([^{}]*)}/g, function (a, b) {
-        var r = o[b];
-        return typeof r === "string" || typeof r === "number" ? r : a;
-    });
-};
-
 function show_youtube_replies(target, inner_text, sub_text) {
     body = target.parentNode.parentNode.children[1];
-    body.style.display = "";
+    body.style.display = '';
 
     target.innerHTML = inner_text;
-    target.setAttribute("onclick", "hide_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')");
+    target.setAttribute('onclick', "hide_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')");
 }
 
 function hide_youtube_replies(target, inner_text, sub_text) {
     body = target.parentNode.parentNode.children[1];
-    body.style.display = "none";
+    body.style.display = 'none';
 
     target.innerHTML = sub_text;
-    target.setAttribute("onclick", "show_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')");
+    target.setAttribute('onclick', "show_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')");
+}
+
+function continue_autoplay(target) {
+    if (target.checked) {
+        player.on('ended', function () {
+            var url = new URL('https://example.com/watch?v=' + watch_data.next_video);
+
+            if (watch_data.params.autoplay || watch_data.params.continue_autoplay) {
+                url.searchParams.set('autoplay', '1');
+            }
+
+            if (watch_data.params.listen !== watch_data.preferences.listen) {
+                url.searchParams.set('listen', watch_data.params.listen);
+            }
+
+            if (watch_data.params.speed !== watch_data.preferences.speed) {
+                url.searchParams.set('speed', watch_data.params.speed);
+            }
+
+            url.searchParams.set('continue', '1');
+            location.assign(url.pathname + url.search);
+        });
+    } else {
+        player.off('ended');
+    }
+}
+
+function number_with_separator(val) {
+    while (/(\d+)(\d{3})/.test(val.toString())) {
+        val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
+    }
+    return val;
+}
+
+function get_playlist(plid, timeouts = 0) {
+    playlist = document.getElementById('playlist');
+
+    if (timeouts > 10) {
+        console.log('Failed to pull playlist');
+        playlist.innerHTML = '';
+        return;
+    }
+
+    playlist.innerHTML = ' \
+        <h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3> \
+        <hr>'
+
+    if (plid.startsWith('RD')) {
+        var plid_url = '/api/v1/mixes/' + plid +
+            '?continuation=' + watch_data.id +
+            '&format=html&hl=' + watch_data.preferences.locale;
+    } else {
+        var plid_url = '/api/v1/playlists/' + plid +
+            '?continuation=' + watch_data.id +
+            '&format=html&hl=' + watch_data.preferences.locale;
+    }
+
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.timeout = 20000;
+    xhr.open('GET', plid_url, true);
+    xhr.send();
+
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+                playlist.innerHTML = xhr.response.playlistHtml;
+
+                if (xhr.response.nextVideo) {
+                    player.on('ended', function () {
+                        var url = new URL('https://example.com/watch?v=' + watch_data.next_video);
+
+                        if (watch_data.params.autoplay || watch_data.params.continue_autoplay) {
+                            url.searchParams.set('autoplay', '1');
+                        }
+
+                        if (watch_data.params.listen !== watch_data.preferences.listen) {
+                            url.searchParams.set('listen', watch_data.params.listen);
+                        }
+
+                        if (watch_data.params.speed !== watch_data.preferences.speed) {
+                            url.searchParams.set('speed', watch_data.params.speed);
+                        }
+
+                        url.searchParams.set('list', plid);
+                        location.assign(url.pathname + url.search);
+                    });
+                }
+            } else {
+                playlist.innerHTML = '';
+                document.getElementById('continue').style.display = '';
+            }
+        }
+    }
+
+    xhr.ontimeout = function () {
+        console.log('Pulling playlist timed out.');
+        playlist = document.getElementById('playlist');
+        playlist.innerHTML =
+            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
+        get_playlist(plid, timeouts + 1);
+    }
+}
+
+function get_reddit_comments(timeouts = 0) {
+    comments = document.getElementById('comments');
+
+    if (timeouts > 10) {
+        console.log('Failed to pull comments');
+        comments.innerHTML = '';
+        return;
+    }
+
+    var fallback = comments.innerHTML;
+    comments.innerHTML =
+        '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
+
+    var url = '/api/v1/comments/' + watch_data.id +
+        '?source=reddit&format=html' +
+        '&hl=' + watch_data.preferences.locale;
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.timeout = 20000;
+    xhr.open('GET', url, true);
+    xhr.send();
+
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+                comments.innerHTML = ' \
+                <div> \
+                    <h3> \
+                        <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
+                        {title} \
+                    </h3> \
+                    <p> \
+                        <b> \
+                            <a href="javascript:void(0)" onclick="swap_comments(\'youtube\')"> \
+                                {youtubeCommentsText} \
+                            </a> \
+                        </b> \
+                    </p> \
+                    <b> \
+                        <a rel="noopener" target="_blank" href="https://reddit.com{permalink}">{redditPermalinkText}</a> \
+                    </b> \
+                </div> \
+                <div>{contentHtml}</div> \
+                <hr>'.supplant({
+                    title: xhr.response.title,
+                    youtubeCommentsText: watch_data.youtube_comments_text,
+                    redditPermalinkText: watch_data.reddit_permalink_text,
+                    permalink: xhr.response.permalink,
+                    contentHtml: xhr.response.contentHtml
+                });
+            } else {
+                if (watch_data.preferences.comments[1] === 'youtube') {
+                    get_youtube_comments(timeouts + 1);
+                } else {
+                    comments.innerHTML = fallback;
+                }
+            }
+        }
+    }
+
+    xhr.ontimeout = function () {
+        console.log('Pulling comments timed out.');
+        get_reddit_comments(timeouts + 1);
+    }
+}
+
+function get_youtube_comments(timeouts = 0) {
+    comments = document.getElementById('comments');
+
+    if (timeouts > 10) {
+        console.log('Failed to pull comments');
+        comments.innerHTML = '';
+        return;
+    }
+
+    var fallback = comments.innerHTML;
+    comments.innerHTML =
+        '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
+
+    var url = '/api/v1/comments/' + watch_data.id +
+        '?format=html' +
+        '&hl=' + watch_data.preferences.locale +
+        '&thin_mode=' + watch_data.preferences.thin_mode;
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.timeout = 20000;
+    xhr.open('GET', url, true);
+    xhr.send();
+
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+                if (xhr.response.commentCount > 0) {
+                    comments.innerHTML = ' \
+                    <div> \
+                        <h3> \
+                            <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
+                            {commentsText}  \
+                        </h3> \
+                        <b> \
+                            <a href="javascript:void(0)" onclick="swap_comments(\'reddit\')"> \
+                                {redditComments} \
+                            </a> \
+                        </b> \
+                    </div> \
+                    <div>{contentHtml}</div> \
+                    <hr>'.supplant({
+                        contentHtml: xhr.response.contentHtml,
+                        redditComments: watch_data.reddit_comments_text,
+                        commentsText: watch_data.comments_text.supplant(
+                            { commentCount: number_with_separator(xhr.response.commentCount) }
+                        )
+                    });
+                } else {
+                    comments.innerHTML = '';
+                }
+            } else {
+                if (watch_data.preferences[1] === 'youtube') {
+                    get_youtube_comments(timeouts + 1);
+                } else {
+                    comments.innerHTML = '';
+                }
+            }
+        }
+    }
+
+    xhr.ontimeout = function () {
+        console.log('Pulling comments timed out.');
+        comments.innerHTML =
+            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
+        get_youtube_comments(timeouts + 1);
+    }
+}
+
+function get_youtube_replies(target, load_more) {
+    var continuation = target.getAttribute('data-continuation');
+
+    var body = target.parentNode.parentNode;
+    var fallback = body.innerHTML;
+    body.innerHTML =
+        '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
+
+    var url = '/api/v1/comments/' + watch_data.id +
+        '?format=html' +
+        '&hl=' + watch_data.preferences.locale +
+        '&thin_mode=' + watch_data.preferences.thin_mode +
+        '&continuation=' + continuation;
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.timeout = 20000;
+    xhr.open('GET', url, true);
+    xhr.send();
+
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+                if (load_more) {
+                    body = body.parentNode.parentNode;
+                    body.removeChild(body.lastElementChild);
+                    body.innerHTML += xhr.response.contentHtml;
+                } else {
+                    body.innerHTML = ' \
+                    <p><a href="javascript:void(0)" \
+                    onclick="hide_youtube_replies(this, \'{hideRepliesText}\', \'{showRepliesText}\')">{hideRepliesText} \
+                    </a></p> \
+                    <div>{contentHtml}</div>'.supplant({
+                        hideRepliesText: watch_data.hide_replies_text,
+                        showRepliesText: watch_data.show_replies_text,
+                        contentHtml: xhr.response.contentHtml
+                    });
+                }
+            } else {
+                body.innerHTML = fallback;
+            }
+        }
+    }
+
+    xhr.ontimeout = function () {
+        console.log('Pulling comments timed out.');
+        body.innerHTML = fallback;
+    }
+}
+
+if (watch_data.play_next) {
+    player.on('ended', function () {
+        var url = new URL('https://example.com/watch?v=' + watch_data.next_video);
+
+        if (watch_data.params.autoplay || watch_data.params.continue_autoplay) {
+            url.searchParams.set('autoplay', '1');
+        }
+
+        if (watch_data.params.listen !== watch_data.preferences.listen) {
+            url.searchParams.set('listen', watch_data.params.listen);
+        }
+
+        if (watch_data.params.speed !== watch_data.preferences.speed) {
+            url.searchParams.set('speed', watch_data.params.speed);
+        }
+
+        url.searchParams.set('continue', '1');
+        location.assign(url.pathname + url.search);
+    });
+}
+
+if (watch_data.plid) {
+    get_playlist(watch_data.plid);
+}
+
+if (watch_data.preferences.comments[0] === 'youtube') {
+    get_youtube_comments();
+} else if (watch_data.preferences.comments[0] === 'reddit') {
+    get_reddit_comments();
+} else if (watch_data.preferences.comments[1] === 'youtube') {
+    get_youtube_comments();
+} else if (watch_data.preferences.comments[1] === 'reddit') {
+    get_reddit_comments();
+} else {
+    comments = document.getElementById('comments');
+    comments.innerHTML = '';
 }
diff --git a/src/invidious/views/components/player.ecr b/src/invidious/views/components/player.ecr
index 3afa2af8..69699a1e 100644
--- a/src/invidious/views/components/player.ecr
+++ b/src/invidious/views/components/player.ecr
@@ -61,7 +61,7 @@ var options = {
             "fullscreenToggle"
         ]
     }
-};
+}
 
 var shareOptions = {
     socials: ["fbFeed", "tw", "reddit", "email"],
@@ -72,7 +72,7 @@ var shareOptions = {
     image: "<%= thumbnail %>",
     embedCode: "<iframe id='ivplayer' type='text/html' width='640' height='360' \
         src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>"
-};
+}
 
 var player = videojs("player", options, function() {
     this.hotkeys({
@@ -242,7 +242,7 @@ xhr.onreadystatechange = function () {
             }
         }
     }
-};
+}
 
 window.addEventListener('__ar_annotation_click', e => {
     const { url, target, seconds } = e.detail;
diff --git a/src/invidious/views/embed.ecr b/src/invidious/views/embed.ecr
index e08bad02..eb2b55eb 100644
--- a/src/invidious/views/embed.ecr
+++ b/src/invidious/views/embed.ecr
@@ -71,12 +71,12 @@ function get_playlist(plid, timeouts = 0) {
                 }
             }
         }
-    };
+    }
 
     xhr.ontimeout = function() {
         console.log('Pulling playlist timed out.');
         get_playlist(plid, timeouts + 1);
-    };
+    }
 }
 
 get_playlist('<%= plid %>');
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index be594556..26f19e3d 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -22,7 +22,6 @@
 <meta name="twitter:player" content="<%= host_url %>/embed/<%= video.id %>">
 <meta name="twitter:player:width" content="1280">
 <meta name="twitter:player:height" content="720">
-<script src="/js/watch.js"></script>
 <%= rendered "components/player_sources" %>
 <title><%= HTML.escape(video.title) %> - Invidious</title>
 <% end %>
@@ -227,318 +226,19 @@
 </div>
 
 <script>
-<% if !rvs.empty? && !plid && params.continue %>
-player.on('ended', function() {
-    location.assign('/watch?v=' +
-        '<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>' +
-        '&continue=1' +
-        <% if params.listen != preferences.listen %>
-            '&listen=<%= params.listen %>' +
-        <% end %>
-        <% if params.autoplay || params.continue_autoplay %>
-            '&autoplay=1' +
-        <% end %>
-        <% if params.speed != preferences.speed %>
-            '&speed=<%= params.speed %>' +
-        <% end %>
-        ''
-    );
-});
-<% end %>
-
-function continue_autoplay(target) {
-    if (target.checked) {
-        player.on('ended', function() {
-            location.assign('/watch?v=' +
-                '<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>' +
-                '&continue=1' +
-                <% if params.listen != preferences.listen %>
-                    '&listen=<%= params.listen %>' +
-                <% end %>
-                <% if params.autoplay || params.continue_autoplay %>
-                    '&autoplay=1' +
-                <% end %>
-                <% if params.speed != preferences.speed %>
-                    '&speed=<%= params.speed %>' +
-                <% end %>
-                ''
-            );
-        });
-    } else {
-        player.off('ended');
-    }
-}
-
-function number_with_separator(val) {
-    while (/(\d+)(\d{3})/.test(val.toString())) {
-        val = val.toString().replace(/(\d+)(\d{3})/, "$1" + "," + "$2");
-    }
-    return val;
-}
-
-<% if plid %>
-function get_playlist(plid, timeouts = 0) {
-    playlist = document.getElementById('playlist');
-
-    if (timeouts > 10) {
-        console.log('Failed to pull playlist');
-        playlist.innerHTML = '';
-        return;
-    }
-
-    playlist.innerHTML = ' \
-        <h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3> \
-        <hr>'
-
-    if (plid.startsWith('RD')) {
-        var plid_url = '/api/v1/mixes/' + plid +
-            '?continuation=<%= video.id %>' +
-            '&format=html&hl=<%= env.get("preferences").as(Preferences).locale %>';
-    } else {
-        var plid_url = '/api/v1/playlists/' + plid +
-            '?continuation=<%= video.id %>' +
-            '&format=html&hl=<%= env.get("preferences").as(Preferences).locale %>';
-    }
-
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 20000;
-    xhr.open('GET', plid_url, true);
-    xhr.send();
-
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-            if (xhr.status == 200) {
-                playlist.innerHTML = xhr.response.playlistHtml;
-
-                if (xhr.response.nextVideo) {
-                    player.on('ended', function() {
-                        location.assign('/watch?v=' + xhr.response.nextVideo +
-                            '&list=' + plid +
-                            <% if params.listen != preferences.listen %>
-                                '&listen=<%= params.listen %>' +
-                            <% end %>
-                            <% if params.autoplay || params.continue_autoplay %>
-                                '&autoplay=1' +
-                            <% end %>
-                            <% if params.speed != preferences.speed %>
-                                '&speed=<%= params.speed %>' +
-                            <% end %>
-                            ''
-                        );
-                    });
-                }
-            } else {
-                playlist.innerHTML = '';
-                document.getElementById('continue').style.display = '';
-            }
-        }
-    };
-
-    xhr.ontimeout = function() {
-        console.log('Pulling playlist timed out.');
-        playlist = document.getElementById('playlist');
-        playlist.innerHTML =
-            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3><hr>';
-        get_playlist(plid, timeouts + 1);
-    };
+var watch_data = {
+    id: '<%= video.id %>',
+    plid: '<%= plid %>',
+    play_next: <%= !rvs.empty? && !plid && params.continue %>,
+    next_video: '<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>',
+    youtube_comments_text: '<%= translate(locale, "View YouTube comments") %>',
+    reddit_comments_text: '<%= translate(locale, "View Reddit comments") %>',
+    reddit_permalink_text: '<%= translate(locale, "View more comments on Reddit") %>',
+    comments_text: '<%= translate(locale, "View `x` comments", "{commentCount}") %>',
+    hide_replies_text: '<%= translate(locale, "Hide replies") %>',
+    show_replies_text: '<%= translate(locale, "Show replies") %>',
+    params: <%= params.to_json %>,
+    preferences: <%= preferences.to_json %>
 }
-
-get_playlist('<%= plid %>');
-<% end %>
-
-function get_reddit_comments(timeouts = 0) {
-    comments = document.getElementById('comments');
-
-    if (timeouts > 10) {
-        console.log('Failed to pull comments');
-        comments.innerHTML = '';
-        return;
-    }
-
-    var fallback = comments.innerHTML;
-    comments.innerHTML =
-      '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
-
-    var url = '/api/v1/comments/<%= video.id %>' +
-        '?source=reddit&format=html' +
-        '&hl=<%= env.get("preferences").as(Preferences).locale %>';
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 20000;
-    xhr.open('GET', url, true);
-    xhr.send();
-
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-            if (xhr.status == 200) {
-                comments.innerHTML = ' \
-                <div> \
-                    <h3> \
-                        <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
-                        {title} \
-                    </h3> \
-                    <p> \
-                        <b> \
-                            <a href="javascript:void(0)" onclick="swap_comments(\'youtube\')"> \
-                                <%= translate(locale, "View YouTube comments") %> \
-                            </a> \
-                        </b> \
-                    </p> \
-                    <b> \
-                        <a rel="noopener" target="_blank" href="https://reddit.com{permalink}"><%= translate(locale, "View more comments on Reddit") %></a> \
-                    </b> \
-                </div> \
-                <div>{contentHtml}</div> \
-                <hr>'.supplant({
-                    title: xhr.response.title,
-                    permalink: xhr.response.permalink,
-                    contentHtml: xhr.response.contentHtml
-                });
-            } else {
-                <% if preferences && preferences.comments[1] == "youtube" %>
-                    get_youtube_comments(timeouts + 1);
-                <% else %>
-                    comments.innerHTML = fallback;
-                <% end %>
-            }
-        }
-    };
-
-    xhr.ontimeout = function() {
-        console.log('Pulling comments timed out.');
-        get_reddit_comments(timeouts + 1);
-    };
-}
-
-function get_youtube_comments(timeouts = 0) {
-    comments = document.getElementById('comments');
-
-    if (timeouts > 10) {
-        console.log('Failed to pull comments');
-        comments.innerHTML = '';
-        return;
-    }
-
-    var fallback = comments.innerHTML;
-    comments.innerHTML =
-        '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
-
-    var url = '/api/v1/comments/<%= video.id %>' +
-        '?format=html' +
-        '&hl=<%= env.get("preferences").as(Preferences).locale %>' +
-        '&thin_mode=<%= env.get("preferences").as(Preferences).thin_mode %>';
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 20000;
-    xhr.open('GET', url, true);
-    xhr.send();
-
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-            if (xhr.status == 200) {
-                if (xhr.response.commentCount > 0)  {
-                    comments.innerHTML = ' \
-                        <div> \
-                            <h3> \
-                                <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
-                                <%= translate(locale, "View `x` comments", "{commentCount}") %>  \
-                            </h3> \
-                            <b> \
-                                <a href="javascript:void(0)" onclick="swap_comments(\'reddit\')"> \
-                                    <%= translate(locale, "View Reddit comments") %> \
-                                </a> \
-                            </b> \
-                        </div> \
-                        <div>{contentHtml}</div> \
-                        <hr>'.supplant({
-                            contentHtml: xhr.response.contentHtml,
-                            commentCount: number_with_separator(xhr.response.commentCount)
-                        });
-                } else {
-                    comments.innerHTML = "";
-                }
-            } else {
-                <% if preferences && preferences.comments[1] == "youtube" %>
-                    get_youtube_comments(timeouts + 1);
-                <% else %>
-                    comments.innerHTML = '';
-                <% end %>
-            }
-        }
-    };
-
-    xhr.ontimeout = function() {
-        console.log('Pulling comments timed out.');
-        comments.innerHTML =
-            '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
-        get_youtube_comments(timeouts + 1);
-    };
-}
-
-function get_youtube_replies(target, load_more) {
-    var continuation = target.getAttribute('data-continuation');
-
-    var body = target.parentNode.parentNode;
-    var fallback = body.innerHTML;
-    body.innerHTML =
-        '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
-
-    var url = '/api/v1/comments/<%= video.id %>' +
-        '?format=html' +
-        '&hl=<%= env.get("preferences").as(Preferences).locale %>' +
-        '&thin_mode=<%= env.get("preferences").as(Preferences).thin_mode %>' +
-        '&continuation=' + continuation;
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 20000;
-    xhr.open('GET', url, true);
-    xhr.send();
-
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-            if (xhr.status == 200) {
-                if (load_more) {
-                    body = body.parentNode.parentNode;
-                    body.removeChild(body.lastElementChild);
-                    body.innerHTML += xhr.response.contentHtml;
-                } else {
-                    body.innerHTML = ' \
-                    <p><a href="javascript:void(0)" \
-                    onclick="hide_youtube_replies(this, \'<%= translate(locale, "Hide replies") %>\', \'<%= translate(locale, "Show replies") %>\')"><%= translate(locale, "Hide replies") %> \
-                    </a></p> \
-                    <div>{contentHtml}</div>'.supplant({
-                        contentHtml: xhr.response.contentHtml,
-                    });
-                }
-            } else {
-                body.innerHTML = fallback;
-            }
-        }
-    };
-
-    xhr.ontimeout = function() {
-        console.log('Pulling comments timed out.');
-        body.innerHTML = fallback;
-    };
-}
-
-<% if preferences %>
-    <% if preferences.comments[0] == "youtube" %>
-        get_youtube_comments();
-    <% elsif preferences.comments[0] == "reddit" %>
-        get_reddit_comments();
-    <% else %>
-        <% if preferences.comments[1] == "youtube" %>
-            get_youtube_comments();
-        <% elsif preferences.comments[1] == "reddit" %>
-            get_reddit_comments();
-        <% else %>
-            comments = document.getElementById('comments');
-            comments.innerHTML = '';
-        <% end %>
-    <% end %>
-<% else %>
-    get_youtube_comments();
-<% end %>
 </script>
+<script src="/js/watch.js"></script>