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"]?
+    puts env.params.body
-    comments ||= "youtube"
+    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,
+      type:      Array(String),
-      default: "youtube",
+      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>
+                <label for="comments_0">Default comments: </label>
-                <select name="comments" id="comments">
+                <select name="comments_0" id="comments_0">
-                <% {"youtube", "reddit"}.each do |option| %>
+                <% {"", "youtube", "reddit"}.each do |option| %>
-                    <option <% if user.preferences.comments == option %> selected <% end %>><%= option %></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,6 +30,108 @@
   <%= rendered "components/player" %>
 </div>
 
+<div class="h-box">
+<h1>
+    <%= HTML.escape(video.title) %> 
+    <% if listen %>
+    <a href="/watch?<%= env.params.query %>">
+        <i class="icon ion-ios-videocam"></i>
+    </a>
+    <% else %>
+    <a href="/watch?<%= env.params.query %>&listen=1">
+        <i class="icon ion-ios-volume-high"></i>
+    </a>
+    <% end %>
+</h1>
+<% if !reason.empty? %>
+<h3><%= reason %></h3>
+<% end %>
+</div>
+
+<div class="pure-g">
+    <div class="pure-u-1 pure-u-md-1-5">
+        <div class="h-box">
+            <p><a href="https://www.youtube.com/watch?v=<%= video.id %>">Watch video on YouTube</a></p>
+            <p><i class="icon ion-ios-eye"></i> <%= number_with_separator(video.views) %></p>
+            <p><i class="icon ion-ios-thumbs-up"></i> <%= number_with_separator(video.likes) %></p>
+            <p><i class="icon ion-ios-thumbs-down"></i> <%= number_with_separator(video.dislikes) %></p>
+            <p id="Genre">Genre: <%= video.genre %></p>
+            <p id="FamilyFriendly">Family Friendly? <%= video.is_family_friendly %></p>
+            <p id="Wilson">Wilson Score: <%= video.wilson_score.round(4) %></p>
+            <p id="Rating">Rating: <%= rating.round(4) %> / 5</p>
+            <p id="Engagement">Engagement: <%= engagement.round(2) %>%</p>
+            <% if video.allowed_regions.size != REGIONS.size %>
+                <p id="AllowedRegions">
+                <% if video.allowed_regions.size < REGIONS.size / 2 %>
+                Whitelisted regions: <%= video.allowed_regions.join(", ") %>
+                <% else %>
+                Blacklisted regions: <%= (REGIONS.to_a - video.allowed_regions).join(", ") %>
+                <% end %>
+                </p>
+            <% end %>
+        </div>
+    </div>
+
+    <div class="pure-u-1 pure-u-md-3-5">
+        <div class="h-box">
+            <p>
+                <a href="/channel/<%= video.ucid %>">
+                    <h3><%= video.author %></h3>
+                </a>
+            </p>
+        <% if user %>
+            <% if subscriptions.includes? video.ucid %>
+            <p>
+                <a href="/subscription_ajax?action_remove_subscriptions=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
+                    <b>Unsubscribe from <%= video.author %></b>
+                </a>
+            </p>
+            <% else %>
+            <p>
+                <a href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
+                    <b>Subscribe to <%= video.author %></b>
+                </a>
+            </p>
+            <% end %>
+        <% else %>
+            <p>
+                <a href="/login?referer=<%= env.get("current_page") %>">
+                    <b>Login to subscribe to <%= video.author %></b>
+                </a>
+            </p>
+        <% end %>
+            <p>
+                <b>Shared <%= video.published.to_s("%B %-d, %Y") %></b>
+            </p>
+            <div>
+                <%= video.description %>
+            </div>
+            <hr>
+            <div id="comments">
+                <h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>
+            </div>
+        </div>
+    </div>
+    <div class="pure-u-1 pure-u-md-1-5">
+        <div class="h-box">
+        <% rvs.each do |rv| %>
+            <% if rv.has_key?("id") %>
+            <a href="/watch?v=<%= rv["id"] %>">
+                <% if preferences && preferences.thin_mode %>
+                <% else %>
+                <img style="width:100%;" src="<%= rv["iurlmq"] %>">
+                <% end %>
+                <p style="width:100%"><%= rv["title"] %></p>
+                <p>
+                    <b style="width: 100%"><%= rv["author"] %></b>
+                </p>
+            </a>
+            <% end %>
+        <% end %>
+        </div>
+    </div>
+</div>
+
 <script>
 function toggle(target) {
   body = target.parentNode.parentNode.children[1];
@@ -116,7 +218,12 @@ function get_reddit_comments() {
           contentHtml: xhr.response.contentHtml
         });
       } else {
+        <% if preferences && preferences.comments[1] == "youtube" %> 
         get_youtube_comments();
+        <% else %>
+        comments = document.getElementById("comments");
+        comments.innerHTML = "";
+        <% end %>
       }
   };
 
@@ -152,8 +259,12 @@ function get_youtube_comments() {
           commentCount: commaSeparateNumber(xhr.response.commentCount)
         });
       } else {
+        <% if preferences && preferences.comments[1] == "youtube" %> 
+        get_youtube_comments();
+        <% else %>
         comments = document.getElementById("comments");
         comments.innerHTML = "";
+        <% end %>
       }
   };
 
@@ -181,112 +292,23 @@ String.prototype.supplant = function(o) {
   });
 };
 
-<% if preferences && preferences.comments == "reddit" %>
+<% if preferences %>
-get_reddit_comments();
+    <% if preferences.comments[0] == "youtube" %>
-<% else %>
+    get_youtube_comments();
-get_youtube_comments();
+    <% elsif preferences.comments[0] == "reddit" %>
-<% end %>
+    get_reddit_comments();
-
-</script>
-
-<div class="h-box">
-<h1>
-    <%= HTML.escape(video.title) %> 
-    <% if listen %>
-    <a href="/watch?<%= env.params.query %>">
-        <i class="icon ion-ios-videocam"></i>
-    </a>
     <% else %>
-    <a href="/watch?<%= env.params.query %>&listen=1">
+        <% if preferences.comments[1] == "youtube" %>
-        <i class="icon ion-ios-volume-high"></i>
+        get_youtube_comments();
-    </a>
+        <% elsif preferences.comments[1] == "reddit" %>
-    <% end %>
+        get_reddit_comments();
-</h1>
-<% if !reason.empty? %>
-<h3><%= reason %></h3>
-<% end %>
-</div>
-
-<div class="pure-g">
-    <div class="pure-u-1 pure-u-md-1-5">
-        <div class="h-box">
-            <p><a href="https://www.youtube.com/watch?v=<%= video.id %>">Watch video on YouTube</a></p>
-            <p><i class="icon ion-ios-eye"></i> <%= number_with_separator(video.views) %></p>
-            <p><i class="icon ion-ios-thumbs-up"></i> <%= number_with_separator(video.likes) %></p>
-            <p><i class="icon ion-ios-thumbs-down"></i> <%= number_with_separator(video.dislikes) %></p>
-            <p id="Genre">Genre: <%= video.genre %></p>
-            <p id="FamilyFriendly">Family Friendly? <%= video.is_family_friendly %></p>
-            <p id="Wilson">Wilson Score: <%= video.wilson_score.round(4) %></p>
-            <p id="Rating">Rating: <%= rating.round(4) %> / 5</p>
-            <p id="Engagement">Engagement: <%= engagement.round(2) %>%</p>
-            <% if video.allowed_regions.size != REGIONS.size %>
-                <p id="AllowedRegions">
-                <% if video.allowed_regions.size < REGIONS.size / 2 %>
-                Whitelisted regions: <%= video.allowed_regions.join(", ") %>
         <% else %>
-                Blacklisted regions: <%= (REGIONS.to_a - video.allowed_regions).join(", ") %>
+        comments = document.getElementById("comments");
+        comments.innerHTML = "";
         <% end %>
-                </p>
     <% end %>
-        </div>
+<% else %>
-    </div>
+get_youtube_comments();
+<% end %>
 
-    <div class="pure-u-1 pure-u-md-3-5">
+</script>
-        <div class="h-box">
-            <p>
-                <a href="/channel/<%= video.ucid %>">
-                    <h3><%= video.author %></h3>
-                </a>
-            </p>
-        <% if user %>
-            <% if subscriptions.includes? video.ucid %>
-            <p>
-                <a href="/subscription_ajax?action_remove_subscriptions=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
-                    <b>Unsubscribe from <%= video.author %></b>
-                </a>
-            </p>
-            <% else %>
-            <p>
-                <a href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
-                    <b>Subscribe to <%= video.author %></b>
-                </a>
-            </p>
-            <% end %>
-        <% else %>
-            <p>
-                <a href="/login?referer=<%= env.get("current_page") %>">
-                    <b>Login to subscribe to <%= video.author %></b>
-                </a>
-            </p>
-        <% end %>
-            <p>
-                <b>Shared <%= video.published.to_s("%B %-d, %Y") %></b>
-            </p>
-            <div>
-                <%= video.description %>
-            </div>
-            <hr>
-            <div id="comments">
-                <h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>
-            </div>
-        </div>
-    </div>
-    <div class="pure-u-1 pure-u-md-1-5">
-        <div class="h-box">
-        <% rvs.each do |rv| %>
-            <% if rv.has_key?("id") %>
-            <a href="/watch?v=<%= rv["id"] %>">
-                <% if preferences && preferences.thin_mode %>
-                <% else %>
-                <img style="width:100%;" src="<%= rv["iurlmq"] %>">
-                <% end %>
-                <p style="width:100%"><%= rv["title"] %></p>
-                <p>
-                    <b style="width: 100%"><%= rv["author"] %></b>
-                </p>
-            </a>
-            <% end %>
-        <% end %>
-        </div>
-    </div>
-</div>