Pull subscribe widget into separate file

src/invidious/views/channel.ecr

@@ -14,30 +14,8 @@
 </div>
 
 <div class="h-box">
-<% if user %>
+<% sub_count_text = number_to_short_text(sub_count) %>
-    <% if subscriptions.includes? ucid %>
+<%= rendered "components/subscribe_widget" %>
-    <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 %>
 </div>
 
 <div class="pure-g h-box">
@@ -94,43 +72,6 @@
 </div>
 
 <script>
-document.getElementById("subscribe")["href"] = "javascript:void(0)"
+<% sub_count_text = number_to_short_text(sub_count) %>
-
+<%= rendered "components/subscribe_widget_script" %>
-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>'
-            }
-        }
-    }
-}
 </script>

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

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>'
+            }
+        }
+    }
+}

src/invidious/views/watch.ecr

@@ -117,30 +117,10 @@
                     <h3><%= video.author %></h3>
                 </a>
             </p>
-        <% if user %>
+            <% ucid = video.ucid %>
-            <% if subscriptions.includes? video.ucid %>
+            <% author = video.author %>
-            <p>
+            <% sub_count_text = video.sub_count_text %>
-                <a id="subscribe" onclick="unsubscribe()" class="pure-button pure-button-primary" 
+            <%= rendered "components/subscribe_widget" %>
-                    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 %>
             <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");
+<% ucid = video.ucid %>
-if (subscribe_button.getAttribute('onclick')) {
+<% author = video.author %>
-    subscribe_button["href"] = "javascript:void(0)";
+<% sub_count_text = video.sub_count_text %>
-}
+<%= rendered "components/subscribe_widget_script" %>
 
-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();
-
-    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) {