Refactor watched_widget.js

assets/js/watch.js

@@ -16,7 +16,8 @@ function toggle_parent(target) {
     }
 }
 
-function toggle_comments(target) {
+function toggle_comments(event) {
+    var target = event.target;
     body = target.parentNode.parentNode.parentNode.children[1];
     if (body.style.display === null || body.style.display === '') {
         target.innerHTML = '[ + ]';
@@ -27,28 +28,44 @@ function toggle_comments(target) {
     }
 }
 
-function swap_comments(source) {
+function swap_comments(event) {
-    if (source == 'youtube') {
+    var source = event.target.getAttribute('data-comments');
+
+    if (source === 'youtube') {
         get_youtube_comments();
-    } else if (source == 'reddit') {
+    } else if (source === 'reddit') {
         get_reddit_comments();
     }
 }
 
-function show_youtube_replies(target, inner_text, sub_text) {
+function hide_youtube_replies(event) {
-    body = target.parentNode.parentNode.children[1];
+    var target = event.target;
-    body.style.display = '';
 
-    target.innerHTML = inner_text;
+    sub_text = target.getAttribute('data-inner-text');
-    target.setAttribute('onclick', "hide_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')");
+    inner_text = target.getAttribute('data-sub-text');
-}
 
-function hide_youtube_replies(target, inner_text, sub_text) {
     body = target.parentNode.parentNode.children[1];
     body.style.display = 'none';
 
     target.innerHTML = sub_text;
-    target.setAttribute('onclick', "show_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')");
+    target.onclick = show_youtube_replies;
+    target.setAttribute('data-inner-text', inner_text);
+    target.setAttribute('data-sub-text', sub_text);
+}
+
+function show_youtube_replies(event) {
+    var target = event.target;
+
+    sub_text = target.getAttribute('data-inner-text');
+    inner_text = target.getAttribute('data-sub-text');
+
+    body = target.parentNode.parentNode.children[1];
+    body.style.display = '';
+
+    target.innerHTML = sub_text;
+    target.onclick = hide_youtube_replies;
+    target.setAttribute('data-inner-text', inner_text);
+    target.setAttribute('data-sub-text', sub_text);
 }
 
 var continue_button = document.getElementById('continue');
@@ -186,12 +203,12 @@ function get_reddit_comments(timeouts = 0) {
                 comments.innerHTML = ' \
                 <div> \
                     <h3> \
-                        <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
+                        <a href="javascript:void(0)">[ - ]</a> \
                         {title} \
                     </h3> \
                     <p> \
                         <b> \
-                            <a href="javascript:void(0)" onclick="swap_comments(\'youtube\')"> \
+                            <a href="javascript:void(0)" data-comments="youtube"> \
                                 {youtubeCommentsText} \
                             </a> \
                         </b> \
@@ -208,6 +225,9 @@ function get_reddit_comments(timeouts = 0) {
                     permalink: xhr.response.permalink,
                     contentHtml: xhr.response.contentHtml
                 });
+
+                comments.children[0].children[0].children[0].onclick = toggle_comments;
+                comments.children[0].children[1].children[0].onclick = swap_comments;
             } else {
                 if (video_data.preferences.comments[1] === 'youtube') {
                     get_youtube_comments(timeouts + 1);
@@ -254,11 +274,11 @@ function get_youtube_comments(timeouts = 0) {
                     comments.innerHTML = ' \
                     <div> \
                         <h3> \
-                            <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
+                            <a href="javascript:void(0)">[ - ]</a> \
                             {commentsText}  \
                         </h3> \
                         <b> \
-                            <a href="javascript:void(0)" onclick="swap_comments(\'reddit\')"> \
+                            <a href="javascript:void(0)" data-comments="reddit"> \
                                 {redditComments} \
                             </a> \
                         </b> \
@@ -271,6 +291,9 @@ function get_youtube_comments(timeouts = 0) {
                             { commentCount: number_with_separator(xhr.response.commentCount) }
                         )
                     });
+
+                    comments.children[0].children[0].children[0].onclick = toggle_comments;
+                    comments.children[0].children[1].children[0].onclick = swap_comments;
                 } else {
                     comments.innerHTML = '';
                 }
@@ -319,15 +342,23 @@ function get_youtube_replies(target, load_more) {
                     body.removeChild(body.lastElementChild);
                     body.innerHTML += xhr.response.contentHtml;
                 } else {
-                    body.innerHTML = ' \
+                    body.removeChild(body.lastElementChild);
-                    <p><a href="javascript:void(0)" \
+
-                    onclick="hide_youtube_replies(this, \'{hideRepliesText}\', \'{showRepliesText}\')">{hideRepliesText} \
+                    var p = document.createElement('p');
-                    </a></p> \
+                    var a = document.createElement('a');
-                    <div>{contentHtml}</div>'.supplant({
+                    p.appendChild(a);
-                        hideRepliesText: video_data.hide_replies_text,
+
-                        showRepliesText: video_data.show_replies_text,
+                    a.href = 'javascript:void(0)';
-                        contentHtml: xhr.response.contentHtml
+                    a.onclick = hide_youtube_replies;
-                    });
+                    a.setAttribute('data-sub-text', video_data.hide_replies_text);
+                    a.setAttribute('data-inner-text', video_data.show_replies_text);
+                    a.innerText = video_data.hide_replies_text;
+
+                    var div = document.createElement('div');
+                    div.innerHTML = xhr.response.contentHtml;
+
+                    body.appendChild(p);
+                    body.appendChild(div);
                 }
             } else {
                 body.innerHTML = fallback;

assets/js/watched_widget.js

@@ -0,0 +1,46 @@
+function mark_watched(target) {
+    var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
+    tile.style.display = 'none';
+
+    var url = '/watch_ajax?action_mark_watched=1&redirect=false' +
+        '&id=' + target.getAttribute('data-id');
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.timeout = 20000;
+    xhr.open('POST', url, true);
+    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    xhr.send('csrf_token=' + watched_data.csrf_token);
+
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState == 4) {
+            if (xhr.status != 200) {
+                tile.style.display = '';
+            }
+        }
+    }
+}
+
+function mark_unwatched(target) {
+    var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
+    tile.style.display = "none";
+    var count = document.getElementById('count')
+    count.innerText = count.innerText - 1;
+
+    var url = '/watch_ajax?action_mark_unwatched=1&redirect=false' +
+        '&id=' + target.getAttribute('data-id');
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.timeout = 20000;
+    xhr.open('POST', url, true);
+    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    xhr.send('csrf_token=' + watched_data.csrf_token);
+
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState == 4) {
+            if (xhr.status != 200) {
+                count.innerText = count.innerText - 1 + 2;
+                tile.style.display = '';
+            }
+        }
+    }
+}

src/invidious/views/components/item.ecr

@@ -93,7 +93,7 @@
                             <form onsubmit="return false" action="/watch_ajax?action_mark_watched=1&id=<%= item.id %>&referer=<%= env.get("current_page") %>" method="post">
                                 <input type="hidden" name="csrf_token" value="<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>">
                                 <p class="watched">
-                                    <a onclick="mark_watched(this)" data-id="<%= item.id %>" href="#">
+                                    <a onclick="mark_watched(this)" data-id="<%= item.id %>" href="javascript:void(0)">
                                         <button type="submit" style="all:unset">
                                             <i onmouseenter='this.setAttribute("class", "icon ion-ios-eye-off")'
                                                 onmouseleave='this.setAttribute("class", "icon ion-ios-eye")'

src/invidious/views/history.ecr

@@ -18,6 +18,13 @@
     </div>
 </div>
 
+<script>
+var watched_data = {
+    csrf_token: '<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>',
+}
+</script>
+<script src="/js/watched_widget.js"></script>
+
 <div class="pure-g">
 <% watched.each_slice(4) do |slice| %>
         <% slice.each do |item| %>
@@ -27,10 +34,10 @@
                         <% if !env.get("preferences").as(Preferences).thin_mode %>
                             <div class="thumbnail">
                                 <img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg"/>
-                                <form onsubmit="return false;" action="/watch_ajax?action_mark_unwatched=1&id=<%= item %>&referer=<%= env.get("current_page") %>" method="post">
+                                <form onsubmit="return false" action="/watch_ajax?action_mark_unwatched=1&id=<%= item %>&referer=<%= env.get("current_page") %>" method="post">
                                     <input type="hidden" name="csrf_token" value="<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>">
                                     <p class="watched">
-                                        <a onclick="mark_unwatched(this)" data-id="<%= item %>" href="#">
+                                        <a onclick="mark_unwatched(this)" data-id="<%= item %>" href="javascript:void(0)">
                                             <button type="submit" style="all:unset">
                                                 <i class="icon ion-md-trash"></i>
                                             </button>
@@ -47,33 +54,6 @@
 <% end %>
 </div>
 
-<script>
-function mark_unwatched(target) {
-    var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
-    tile.style.display = "none";
-    var count = document.getElementById('count')
-    count.innerText = count.innerText - 1;
-
-    var url = '/watch_ajax?action_mark_unwatched=1&redirect=false' +
-        '&id=' + target.getAttribute('data-id');
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 20000;
-    xhr.open('POST', url, true);
-    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>');
-
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-            if (xhr.status != 200) {
-                count.innerText = count.innerText - 1 + 2;
-                tile.style.display = '';
-            }
-        }
-    }
-}
-</script>
-
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-lg-1-5">
         <% if page >= 2 %>

src/invidious/views/subscriptions.ecr

@@ -45,6 +45,13 @@
     <hr>
 </div>
 
+<script>
+var watched_data = {
+    csrf_token: '<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>',
+}
+</script>
+<script src="/js/watched_widget.js"></script>
+
 <div class="pure-g">
     <% videos.each_slice(4) do |slice| %>
             <% slice.each do |item| %>
@@ -53,30 +60,6 @@
     <% end %>
 </div>
 
-<script>
-function mark_watched(target) {
-    var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
-    tile.style.display = 'none';
-
-    var url = '/watch_ajax?action_mark_watched=1&redirect=false' +
-        '&id=' + target.getAttribute('data-id');
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = 'json';
-    xhr.timeout = 20000;
-    xhr.open('POST', url, true);
-    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>');
-
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-            if (xhr.status != 200) {
-                tile.style.display = '';
-            }
-        }
-    }
-}
-</script>
-
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-lg-1-5">
         <% if page >= 2 %>

src/invidious/views/watch.ecr

@@ -207,7 +207,7 @@ var video_data = {
                         <div <% if plid %>style="display:none"<% end %>>
                             <div class="pure-control-group">
                                 <label for="continue"><%= translate(locale, "Autoplay next video: ") %></label>
-                                <input name="continue" onclick="continue_autoplay(this)" id="continue" type="checkbox" <% if params.continue %>checked<% end %>>
+                                <input name="continue" id="continue" type="checkbox" <% if params.continue %>checked<% end %>>
                             </div>
                             <hr>
                         </div>