Pull subscribe widget into separate file

4 files changed, 78 insertions, 128 deletions

diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr
index 38e7bc1b..53b71b6f 100644
--- a/src/invidious/views/channel.ecr
+++ b/src/invidious/views/channel.ecr
@@ -14,30 +14,8 @@
 </div>
 
 <div class="h-box">
-<% if user %>
-    <% if subscriptions.includes? ucid %>
-    <p>
-        <a id="subscribe" onclick="unsubscribe()" class="pure-button pure-button-primary" 
-            href="/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>">
-            <b><%= translate(locale, "Unsubscribe") %> | <%= number_to_short_text(sub_count) %></b>
-        </a>
-    </p>
-    <% else %>
-    <p>
-        <a id="subscribe" onclick="subscribe()" class="pure-button pure-button-primary" 
-            href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>">
-            <b><%= translate(locale, "Subscribe") %> | <%= number_to_short_text(sub_count) %></b>
-        </a>
-    </p>
-    <% end %>
-<% else %>
-    <p>
-        <a id="subscribe" class="pure-button pure-button-primary" 
-            href="/login?referer=<%= env.get("current_page") %>">
-            <b><%= translate(locale, "Login to subscribe to `x`", author) %></b>
-        </a>
-    </p>
-<% end %>
+<% sub_count_text = number_to_short_text(sub_count) %>
+<%= rendered "components/subscribe_widget" %>
 </div>
 
 <div class="pure-g h-box">
@@ -94,43 +72,6 @@
 </div>
 
 <script>
-document.getElementById("subscribe")["href"] = "javascript:void(0)"
-
-function subscribe() {
-    var url = "/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>";
-    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) {
-                subscribe_button = document.getElementById("subscribe");
-                subscribe_button.onclick = unsubscribe;
-                subscribe_button.innerHTML = '<b><%= translate(locale, "Unsubscribe") %> | <%= number_to_short_text(sub_count) %></b>'
-            }
-        }
-    }
-}
-
-function unsubscribe() {
-    var url = "/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>";
-    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) {
-                subscribe_button = document.getElementById("subscribe");
-                subscribe_button.onclick = subscribe;
-                subscribe_button.innerHTML = '<b><%= translate(locale, "Subscribe") %> | <%= number_to_short_text(sub_count) %></b>'
-            }
-        }
-    }
-}
+<% 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
new file mode 100644
index 00000000..4f36368f
--- /dev/null
+++ b/src/invidious/views/components/subscribe_widget.ecr
@@ -0,0 +1,24 @@
+<% if user %>
+    <% if subscriptions.includes? ucid %>
+    <p>
+        <a id="subscribe" onclick="unsubscribe()" class="pure-button pure-button-primary" 
+            href="/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>">
+            <b><%= translate(locale, "Unsubscribe") %> | <%= sub_count_text %></b>
+        </a>
+    </p>
+    <% else %>
+    <p>
+        <a id="subscribe" onclick="subscribe()" class="pure-button pure-button-primary" 
+            href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>">
+            <b><%= translate(locale, "Subscribe") %> | <%= sub_count_text %></b>
+        </a>
+    </p>
+    <% end %>
+<% else %>
+    <p>
+        <a id="subscribe" class="pure-button pure-button-primary" 
+            href="/login?referer=<%= env.get("current_page") %>">
+            <b><%= translate(locale, "Login to subscribe to `x`", author) %></b>
+        </a>
+    </p>
+<% end %>
diff --git a/src/invidious/views/components/subscribe_widget_script.ecr b/src/invidious/views/components/subscribe_widget_script.ecr
new file mode 100644
index 00000000..5180bbb8
--- /dev/null
+++ b/src/invidious/views/components/subscribe_widget_script.ecr
@@ -0,0 +1,42 @@
+subscribe_button = document.getElementById("subscribe");
+if (subscribe_button.getAttribute('onclick')) {
+    subscribe_button["href"] = "javascript:void(0)";
+}
+
+function subscribe() {
+    var url = "/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>";
+    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) {
+                subscribe_button = document.getElementById("subscribe");
+                subscribe_button.onclick = unsubscribe;
+                subscribe_button.innerHTML = '<b><%= translate(locale, "Unsubscribe") %> | <%= sub_count_text %></b>'
+            }
+        }
+    }
+}
+
+function unsubscribe() {
+    var url = "/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>";
+    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) {
+                subscribe_button = document.getElementById("subscribe");
+                subscribe_button.onclick = subscribe;
+                subscribe_button.innerHTML = '<b><%= translate(locale, "Subscribe") %> | <%= sub_count_text %></b>'
+            }
+        }
+    }
+}
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index d5ab5411..da45011b 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -117,30 +117,10 @@
                     <h3><%= video.author %></h3>
                 </a>
             </p>
-        <% if user %>
-            <% if subscriptions.includes? video.ucid %>
-            <p>
-                <a id="subscribe" onclick="unsubscribe()" class="pure-button pure-button-primary" 
-                    href="/subscription_ajax?action_remove_subscriptions=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
-                    <b><%= translate(locale, "Unsubscribe") %> | <%= video.sub_count_text %></b>
-                </a>
-            </p>
-            <% else %>
-            <p>
-                <a id="subscribe" onclick="subscribe()" class="pure-button pure-button-primary" 
-                    href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
-                    <b><%= translate(locale, "Subscribe") %> | <%= video.sub_count_text %></b>
-                </a>
-            </p>
-            <% end %>
-        <% else %>
-            <p>
-                <a id="subscribe" class="pure-button pure-button-primary" 
-                    href="/login?referer=<%= env.get("current_page") %>">
-                    <b><%= translate(locale, "Login to subscribe to `x`", video.author) %></b>
-                </a>
-            </p>
-        <% end %>
+            <% ucid = video.ucid %>
+            <% author = video.author %>
+            <% sub_count_text = video.sub_count_text %>
+            <%= rendered "components/subscribe_widget" %>
             <p>
                 <b><%= translate(locale, "Shared `x`", video.published.to_s("%B %-d, %Y")) %></b>
             </p>
@@ -252,48 +232,11 @@ function number_with_separator(val) {
   return val;
 }
 
-subscribe_button = document.getElementById("subscribe");
-if (subscribe_button.getAttribute('onclick')) {
-    subscribe_button["href"] = "javascript:void(0)";
-}
-
-function subscribe() {
-    var url = "/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>";
-    var xhr = new XMLHttpRequest();
-    xhr.responseType = "json";
-    xhr.timeout = 20000;
-    xhr.open("GET", url, true);
-    xhr.send();
+<% ucid = video.ucid %>
+<% author = video.author %>
+<% sub_count_text = video.sub_count_text %>
+<%= rendered "components/subscribe_widget_script" %>
 
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4) {
-            if (xhr.status == 200) {
-                subscribe_button = document.getElementById("subscribe");
-                subscribe_button.onclick = unsubscribe;
-                subscribe_button.innerHTML = '<b><%= translate(locale, "Unsubscribe") %> | <%= video.sub_count_text %></b>'
-            }
-        }
-    }
-}
-
-function unsubscribe() {
-    var url = "/subscription_ajax?action_remove_subscriptions=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>";
-    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) {
-                subscribe_button = document.getElementById("subscribe");
-                subscribe_button.onclick = subscribe;
-                subscribe_button.innerHTML = '<b><%= translate(locale, "Subscribe") %> | <%= video.sub_count_text %></b>'
-            }
-        }
-    }
-}
 
 <% if plid %>
 function get_playlist(timeouts = 0) {