Refactor watched_widget.js

4 files changed, 18 insertions, 55 deletions

diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr
index 4a20de51..5ec406cb 100644
--- a/src/invidious/views/components/item.ecr
+++ b/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")'
diff --git a/src/invidious/views/history.ecr b/src/invidious/views/history.ecr
index e7bf06d1..68d8ff65 100644
--- a/src/invidious/views/history.ecr
+++ b/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 %>
diff --git a/src/invidious/views/subscriptions.ecr b/src/invidious/views/subscriptions.ecr
index 806e6124..f4725169 100644
--- a/src/invidious/views/subscriptions.ecr
+++ b/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 %>
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index d0dba85e..466c71f4 100644
--- a/src/invidious/views/watch.ecr
+++ b/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>