Add async for manage_subscriptions

src/invidious.cr

@@ -1438,6 +1438,12 @@ get "/subscription_ajax" do |env|
   user = env.get? "user"
   referer = get_referer(env)
 
+  redirect = env.params.query["redirect"]?
+  redirect ||= "false"
+  redirect = redirect == "true"
+
+  count_text = ""
+
   if user
     user = user.as(User)
 
@@ -1500,9 +1506,18 @@ get "/subscription_ajax" do |env|
         PG_DB.exec("UPDATE users SET subscriptions = array_remove(subscriptions,$1) WHERE id = $2", channel_id, sid)
       end
     end
+
+    count_text = PG_DB.query_one?("SELECT cardinality(subscriptions) FROM users WHERE id = $1", [sid], as: Int64)
+    count_text ||= 0
+    count_text = "#{number_with_separator(count_text)} subscriptions"
   end
 
+  if redirect
     env.redirect referer
+  else
+    env.response.content_type = "application/json"
+    {"countText" => count_text}.to_json
+  end
 end
 
 get "/delete_account" do |env|

src/invidious/views/subscription_manager.ecr

@@ -4,7 +4,7 @@
 
 <div class="pure-g h-box">
     <div class="pure-u-2-3">
-        <h3><%= subscriptions.size %> subscriptions</h3>
+        <h3 id="count"><%= subscriptions.size %> subscriptions</h3>
     </div>
     <div class="pure-u-1-3" style="text-align:right;">
         <h3>
@@ -24,7 +24,12 @@
         <div class="pure-u-2-5"></div>
         <div class="pure-u-1-5" style="text-align: right;">
             <h3>
-                <a href="/subscription_ajax?action_remove_subscriptions=1&c=<%= channel.id %>">unsubscribe</a>
+                <a onclick="remove_subscription(this)"
+                    data-id="<%= channel.id %>"
+                    onmouseenter='this["href"]="javascript:void(0)"'
+                    href="/subscription_ajax?action_remove_subscriptions=1&c=<%= channel.id %>">
+                    unsubscribe
+                </a>
             </h3>
         </div>
     </div>
@@ -34,3 +39,27 @@
     <% end %>
 </div>
 <% end %>
+
+<script>
+function remove_subscription(target) {
+    var row = target.parentNode.parentNode.parentNode.parentNode;
+    row.style.display = "none";
+
+    var url = "/subscription_ajax?action_remove_subscriptions=1&redirect=false&c=" + target.getAttribute("data-id");
+    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) {
+                document.getElementById("count").innerHTML = xhr.response.countText;
+            } else {
+                row.style.display = "";
+            }
+        }
+    }
+}
+</script>