Refactor watched_widget.js

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 %>