From 0099a9822e846e5eed1eaf12e48bdbe427f9aa59 Mon Sep 17 00:00:00 2001
From: Omar Roth <omarroth@protonmail.com>
Date: Sun, 5 May 2019 08:35:54 -0500
Subject: Refactor subscribe_widget

---
 src/invidious/views/channel.ecr                    |  5 --
 .../views/components/subscribe_widget.ecr          | 24 +++++--
 .../views/components/subscribe_widget_script.ecr   | 77 ----------------------
 src/invidious/views/playlists.ecr                  |  5 --
 src/invidious/views/watch.ecr                      |  5 --
 5 files changed, 18 insertions(+), 98 deletions(-)
 delete mode 100644 src/invidious/views/components/subscribe_widget_script.ecr

(limited to 'src')

diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr
index 6737c0d2..9d55f3c3 100644
--- a/src/invidious/views/channel.ecr
+++ b/src/invidious/views/channel.ecr
@@ -82,8 +82,3 @@
         <% end %>
     </div>
 </div>
-
-<script>
-<% sub_count_text = number_to_short_text(sub_count) %>
-<%= rendered "components/subscribe_widget_script" %>
-</script>
diff --git a/src/invidious/views/components/subscribe_widget.ecr b/src/invidious/views/components/subscribe_widget.ecr
index a3d6a55f..c9240098 100644
--- a/src/invidious/views/components/subscribe_widget.ecr
+++ b/src/invidious/views/components/subscribe_widget.ecr
@@ -1,23 +1,35 @@
 <% if user %>
     <% if subscriptions.includes? ucid %>
         <p>
-            <form onsubmit="return false" action="/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post">
+            <form action="/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post">
                 <input type="hidden" name="csrf_token" value="<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>">
-                <a id="subscribe" onclick="unsubscribe()" class="pure-button pure-button-primary" href="#">
+                <button data-type="unsubscribe" id="subscribe" class="pure-button pure-button-primary">
                     <b><input style="all:unset" type="submit" value="<%= translate(locale, "Unsubscribe") %> | <%= sub_count_text %>"></b>
-                </a>
+                </button>
             </form>
         </p>
     <% else %>
         <p>
-            <form onsubmit="return false" action="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post">
+            <form action="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post">
                 <input type="hidden" name="csrf_token" value="<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>">
-                <a id="subscribe" onclick="subscribe()" class="pure-button pure-button-primary" href="#">
+                <button data-type="subscribe" id="subscribe" class="pure-button pure-button-primary">
                     <b><input style="all:unset" type="submit" value="<%= translate(locale, "Subscribe") %> | <%= sub_count_text %>"></b>
-                </a>
+                </button>
             </form>
         </p>
     <% end %>
+
+    <script>
+    var subscribe_data = {
+        ucid: '<%= ucid %>',
+        author: '<%= author %>',
+        sub_count_text: '<%= sub_count_text %>',
+        csrf_token: '<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>',
+        subscribe_text: '<%= translate(locale, "Subscribe").gsub("'", "\\'") %>',
+        unsubscribe_text: '<%= translate(locale, "Unsubscribe").gsub("'", "\\'") %>'
+    }
+    </script>
+    <script src="/js/subscribe_widget.js"></script>
 <% else %>
     <p>
         <a id="subscribe" class="pure-button pure-button-primary"
diff --git a/src/invidious/views/components/subscribe_widget_script.ecr b/src/invidious/views/components/subscribe_widget_script.ecr
deleted file mode 100644
index 107bd3a2..00000000
--- a/src/invidious/views/components/subscribe_widget_script.ecr
+++ /dev/null
@@ -1,77 +0,0 @@
-subscribe_button = document.getElementById('subscribe');
-
-if (subscribe_button.getAttribute('onclick')) {
-    subscribe_button['href'] = 'javascript:void(0)';
-}
-
-function subscribe(timeouts = 0) {
-    subscribe_button = document.getElementById('subscribe');
-
-    if (timeouts > 10) {
-        console.log('Failed to subscribe.');
-        return;
-    }
-
-    var url = '/subscription_ajax?action_create_subscription_to_channel=1&redirect=false' +
-        '&c=<%= ucid %>&referer=<%= env.get("current_page") %>';
-    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) || "") %>');
-
-    var fallback = subscribe_button.innerHTML;
-    subscribe_button.onclick = unsubscribe;
-    subscribe_button.innerHTML = '<b><%= translate(locale, "Unsubscribe").gsub("'", "\\'") %> | <%= sub_count_text %></b>';
-
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-            if (xhr.status != 200) {
-                subscribe_button.onclick = subscribe;
-                subscribe_button.innerHTML = fallback;
-            }
-        }
-    }
-
-    xhr.ontimeout = function() {
-        console.log('Subscribing timed out.');
-        subscribe(timeouts + 1);
-    };
-}
-
-function unsubscribe(timeouts = 0) {
-    subscribe_button = document.getElementById('subscribe');
-
-    if (timeouts > 10) {
-        console.log('Failed to subscribe');
-        return;
-    }
-
-    var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
-        '&c=<%= ucid %>&referer=<%= env.get("current_page") %>';
-    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) || "") %>');
-
-    var fallback = subscribe_button.innerHTML;
-    subscribe_button.onclick = subscribe;
-    subscribe_button.innerHTML = '<b><%= translate(locale, "Subscribe").gsub("'", "\\'") %> | <%= sub_count_text %></b>';
-
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-            if (xhr.status != 200) {
-                subscribe_button.onclick = unsubscribe;
-                subscribe_button.innerHTML = fallback;
-            }
-        }
-    }
-
-    xhr.ontimeout = function() {
-        console.log('Unsubscribing timed out.');
-        unsubscribe(timeouts + 1);
-    };
-}
diff --git a/src/invidious/views/playlists.ecr b/src/invidious/views/playlists.ecr
index 88d51268..fd7bf4d8 100644
--- a/src/invidious/views/playlists.ecr
+++ b/src/invidious/views/playlists.ecr
@@ -72,8 +72,3 @@
         <% end %>
     </div>
 </div>
-
-<script>
-<% sub_count_text = number_to_short_text(sub_count) %>
-<%= rendered "components/subscribe_widget_script" %>
-</script>
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 1f21f281..be594556 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -276,11 +276,6 @@ function number_with_separator(val) {
     return val;
 }
 
-<% ucid = video.ucid %>
-<% author = video.author %>
-<% sub_count_text = video.sub_count_text %>
-<%= rendered "components/subscribe_widget_script" %>
-
 <% if plid %>
 function get_playlist(plid, timeouts = 0) {
     playlist = document.getElementById('playlist');
-- 
cgit v1.2.3