Add comments fallback

src/invidious.cr

@@ -761,8 +761,10 @@ post "/preferences" do |env|
     volume = env.params.body["volume"]?.try &.as(String).to_i?
     volume ||= 100
 
-    comments = env.params.body["comments"]?
-    comments ||= "youtube"
+    puts env.params.body
+    comments_0 = env.params.body["comments_0"]?.try &.as(String) || "youtube"
+    comments_1 = env.params.body["comments_1"]?.try &.as(String) || ""
+    comments = [comments_0, comments_1]
 
     captions_0 = env.params.body["captions_0"]?.try &.as(String) || ""
     captions_1 = env.params.body["captions_1"]?.try &.as(String) || ""

src/invidious/users.cr

@@ -32,7 +32,7 @@ DEFAULT_USER_PREFERENCES = Preferences.from_json({
   "speed"       => 1.0,
   "quality"     => "hd720",
   "volume"      => 100,
-  "comments"    => "youtube",
+  "comments"    => ["youtube", ""],
   "captions"    => ["", "", ""],
   "dark_mode"   => false,
   "thin_mode "  => false,
@@ -43,6 +43,25 @@ DEFAULT_USER_PREFERENCES = Preferences.from_json({
 }.to_json)
 
 class Preferences
+  module StringToArray
+    def self.to_json(value : Array(String), json : JSON::Builder)
+      return value.to_json
+    end
+
+    def self.from_json(value : JSON::PullParser) : Array(String)
+      begin
+        result = [] of String
+        value.read_array do
+          result << value.read_string
+        end
+      rescue ex
+        result = [value.read_string, ""]
+      end
+
+      result
+    end
+  end
+
   JSON.mapping({
     video_loop: Bool,
     autoplay:   Bool,
@@ -50,8 +69,9 @@ class Preferences
     quality:    String,
     volume:     Int32,
     comments:   {
-      type:    String,
-      default: "youtube",
+      type:      Array(String),
+      default:   ["youtube", ""],
+      converter: StringToArray,
     },
     captions: {
       type:    Array(String),

src/invidious/views/preferences.ecr

@@ -48,10 +48,19 @@ function update_value(element) {
             </div>
 
             <div class="pure-control-group">
-                <label for="comments">Pull comments from: </label>
-                <select name="comments" id="comments">
-                <% {"youtube", "reddit"}.each do |option| %>
-                    <option <% if user.preferences.comments == option %> selected <% end %>><%= option %></option>
+                <label for="comments_0">Default comments: </label>
+                <select name="comments_0" id="comments_0">
+                <% {"", "youtube", "reddit"}.each do |option| %>
+                    <option <% if user.preferences.comments[0] == option %> selected <% end %>><%= option %></option>
+                <% end %>
+                </select>
+            </div>
+
+            <div class="pure-control-group">
+                <label for="comments_1">Fallback comments: </label>
+                <select name="comments_1" id="comments_1">
+                <% {"", "youtube", "reddit"}.each do |option| %>
+                    <option <% if user.preferences.comments[1] == option %> selected <% end %>><%= option %></option>
                 <% end %>
                 </select>
             </div>

src/invidious/views/watch.ecr

@@ -30,165 +30,6 @@
   <%= rendered "components/player" %>
 </div>
 
-<script>
-function toggle(target) {
-  body = target.parentNode.parentNode.children[1];
-  if (body.style.display === null || body.style.display === "") {
-    target.innerHTML = "[ + ]";
-    body.style.display = "none";
-  } else {
-    target.innerHTML = "[ - ]";
-    body.style.display = "";
-  }
-}
-
-function toggle_comments(target) {
-  body = target.parentNode.parentNode.parentNode.children[1];
-  if (body.style.display === null || body.style.display === "") {
-    target.innerHTML = "[ + ]";
-    body.style.display = "none";
-  } else {
-    target.innerHTML = "[ - ]";
-    body.style.display = "";
-  }
-}
-
-function get_youtube_replies(target) {
-  var continuation = target.getAttribute("data-continuation");
-
-  var body = target.parentNode.parentNode;
-  var fallback = body.innerHTML;
-  body.innerHTML =
-    '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
-
-  var url =
-    "/api/v1/comments/<%= video.id %>?format=html&continuation=" + continuation;
-  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) {
-        body.innerHTML = xhr.response.contentHtml;
-      } else {
-        body.innerHTML = fallback;
-      }
-    }
-  };
-
-  xhr.ontimeout = function() {
-    console.log("Pulling comments timed out.");
-
-    body.innerHTML = fallback;
-  };
-}
-
-function get_reddit_comments() {
-  var url = "/api/v1/comments/<%= video.id %>?source=reddit";
-  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) {
-        comments = document.getElementById("comments");
-        comments.innerHTML = `
-            <div>
-                <h3>
-                    <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> 
-                    {title}
-                </h3>
-                <b>
-                    <a target="_blank" href="https://reddit.com{permalink}">View more comments on Reddit</a>
-                </b>
-            </div>
-            <div>{contentHtml}</div>
-        
-            <hr>`.supplant({
-          title: xhr.response.title,
-          permalink: xhr.response.permalink,
-          contentHtml: xhr.response.contentHtml
-        });
-      } else {
-        get_youtube_comments();
-      }
-  };
-
-  xhr.ontimeout = function() {
-    console.log("Pulling comments timed out.");
-
-    get_reddit_comments();
-  };
-}
-
-function get_youtube_comments() {
-  var url = "/api/v1/comments/<%= video.id %>?format=html";
-  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) {
-        comments = document.getElementById("comments");
-        comments.innerHTML = `
-            <div>
-                <h3>
-                    <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> 
-                    View {commentCount} comments
-                </h3>
-            </div>
-            <div>{contentHtml}</div>
-            <hr>`.supplant({
-          contentHtml: xhr.response.contentHtml,
-          commentCount: commaSeparateNumber(xhr.response.commentCount)
-        });
-      } else {
-        comments = document.getElementById("comments");
-        comments.innerHTML = "";
-      }
-  };
-
-  xhr.ontimeout = function() {
-    console.log("Pulling comments timed out.");
-
-    comments = document.getElementById("comments");
-    comments.innerHTML =
-      '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
-    get_youtube_comments();
-  };
-}
-
-function commaSeparateNumber(val){
-  while (/(\d+)(\d{3})/.test(val.toString())){
-    val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
-  }
-  return val;
-}
-
-String.prototype.supplant = function(o) {
-  return this.replace(/{([^{}]*)}/g, function(a, b) {
-    var r = o[b];
-    return typeof r === "string" || typeof r === "number" ? r : a;
-  });
-};
-
-<% if preferences && preferences.comments == "reddit" %>
-get_reddit_comments();
-<% else %>
-get_youtube_comments();
-<% end %>
-
-</script>
-
 <div class="h-box">
 <h1>
     <%= HTML.escape(video.title) %> 
@@ -290,3 +131,184 @@ get_youtube_comments();
         </div>
     </div>
 </div>
+
+<script>
+function toggle(target) {
+  body = target.parentNode.parentNode.children[1];
+  if (body.style.display === null || body.style.display === "") {
+    target.innerHTML = "[ + ]";
+    body.style.display = "none";
+  } else {
+    target.innerHTML = "[ - ]";
+    body.style.display = "";
+  }
+}
+
+function toggle_comments(target) {
+  body = target.parentNode.parentNode.parentNode.children[1];
+  if (body.style.display === null || body.style.display === "") {
+    target.innerHTML = "[ + ]";
+    body.style.display = "none";
+  } else {
+    target.innerHTML = "[ - ]";
+    body.style.display = "";
+  }
+}
+
+function get_youtube_replies(target) {
+  var continuation = target.getAttribute("data-continuation");
+
+  var body = target.parentNode.parentNode;
+  var fallback = body.innerHTML;
+  body.innerHTML =
+    '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
+
+  var url =
+    "/api/v1/comments/<%= video.id %>?format=html&continuation=" + continuation;
+  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) {
+        body.innerHTML = xhr.response.contentHtml;
+      } else {
+        body.innerHTML = fallback;
+      }
+    }
+  };
+
+  xhr.ontimeout = function() {
+    console.log("Pulling comments timed out.");
+
+    body.innerHTML = fallback;
+  };
+}
+
+function get_reddit_comments() {
+  var url = "/api/v1/comments/<%= video.id %>?source=reddit";
+  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) {
+        comments = document.getElementById("comments");
+        comments.innerHTML = `
+            <div>
+                <h3>
+                    <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> 
+                    {title}
+                </h3>
+                <b>
+                    <a target="_blank" href="https://reddit.com{permalink}">View more comments on Reddit</a>
+                </b>
+            </div>
+            <div>{contentHtml}</div>
+        
+            <hr>`.supplant({
+          title: xhr.response.title,
+          permalink: xhr.response.permalink,
+          contentHtml: xhr.response.contentHtml
+        });
+      } else {
+        <% if preferences && preferences.comments[1] == "youtube" %> 
+        get_youtube_comments();
+        <% else %>
+        comments = document.getElementById("comments");
+        comments.innerHTML = "";
+        <% end %>
+      }
+  };
+
+  xhr.ontimeout = function() {
+    console.log("Pulling comments timed out.");
+
+    get_reddit_comments();
+  };
+}
+
+function get_youtube_comments() {
+  var url = "/api/v1/comments/<%= video.id %>?format=html";
+  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) {
+        comments = document.getElementById("comments");
+        comments.innerHTML = `
+            <div>
+                <h3>
+                    <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> 
+                    View {commentCount} comments
+                </h3>
+            </div>
+            <div>{contentHtml}</div>
+            <hr>`.supplant({
+          contentHtml: xhr.response.contentHtml,
+          commentCount: commaSeparateNumber(xhr.response.commentCount)
+        });
+      } else {
+        <% if preferences && preferences.comments[1] == "youtube" %> 
+        get_youtube_comments();
+        <% else %>
+        comments = document.getElementById("comments");
+        comments.innerHTML = "";
+        <% end %>
+      }
+  };
+
+  xhr.ontimeout = function() {
+    console.log("Pulling comments timed out.");
+
+    comments = document.getElementById("comments");
+    comments.innerHTML =
+      '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
+    get_youtube_comments();
+  };
+}
+
+function commaSeparateNumber(val){
+  while (/(\d+)(\d{3})/.test(val.toString())){
+    val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
+  }
+  return val;
+}
+
+String.prototype.supplant = function(o) {
+  return this.replace(/{([^{}]*)}/g, function(a, b) {
+    var r = o[b];
+    return typeof r === "string" || typeof r === "number" ? r : a;
+  });
+};
+
+<% if preferences %>
+    <% if preferences.comments[0] == "youtube" %>
+    get_youtube_comments();
+    <% elsif preferences.comments[0] == "reddit" %>
+    get_reddit_comments();
+    <% else %>
+        <% if preferences.comments[1] == "youtube" %>
+        get_youtube_comments();
+        <% elsif preferences.comments[1] == "reddit" %>
+        get_reddit_comments();
+        <% else %>
+        comments = document.getElementById("comments");
+        comments.innerHTML = "";
+        <% end %>
+    <% end %>
+<% else %>
+get_youtube_comments();
+<% end %>
+
+</script>