Refactor watch.js

3 files changed, 19 insertions, 319 deletions

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>