Cherry-pick fixes

assets/css/channel.css

@@ -50,3 +50,10 @@
 #link-widget-primary a:hover {
   color: #e1e1e1 !important;
 }
+
+/* Center sorting options when screen is less than 640px*/
+@media screen and (max-width: 640px) {
+  #sort-options {
+    margin-right: auto;
+  }
+}

assets/css/default.css

@@ -567,5 +567,16 @@ p,
 
 
 #content-navigation {
-    margin-bottom: 0.5em;
+  margin-bottom: 0.5em;
+  display: flex;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap; 
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
+
+#content-navigation::-webkit-scrollbar { 
+  display: none;  /* Safari and Chrome */
+} 

src/invidious/routes/channels.cr

@@ -7,6 +7,7 @@ module Invidious::Routes::Channels
 
   def self.videos(env)
     data = self.fetch_basic_information(env)
+
     if !data.is_a?(Tuple)
       return data
     end
@@ -48,6 +49,7 @@ module Invidious::Routes::Channels
     end
     locale, user, subscriptions, continuation, ucid, channel = data
 
+    sort_options = {"last", "oldest", "newest"}
     sort_by = env.params.query["sort_by"]?.try &.downcase
     sort_by ||= "last"
 
@@ -104,9 +106,9 @@ module Invidious::Routes::Channels
     begin
       channel = get_about_info(ucid, locale)
     rescue ex : ChannelRedirect
-      next env.redirect env.request.resource.gsub(ucid, ex.channel_id)
+      return env.redirect env.request.resource.gsub(ucid, ex.channel_id)
     rescue ex
-      next error_template(500, ex)
+      return error_template(500, ex)
     end
 
     templated "channel/about"
@@ -157,11 +159,11 @@ module Invidious::Routes::Channels
     end
   end
 
-  private def search(env)
+  def self.search(env)
     return env.redirect "/search?#{env.params.query}&channel=#{env.params.url["ucid"]}"
   end
 
-  private def fetch_basic_information(env)
+  private def self.fetch_basic_information(env)
     locale = LOCALES[env.get("preferences").as(Preferences).locale]?
 
     user = env.get? "user"

src/invidious/views/channel/channel.ecr

@@ -1,5 +1,5 @@
 <% content_for "header" do %>
-<title><%= channel.author %> - Invidious</title>
+<title><%= HTML.escape(channel.author) %> - Invidious</title>
 <link rel="stylesheet" href="/css/channel.css?v=<%= ASSET_COMMIT %>">
 <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/channel/<%= channel.ucid %>" >
 <% end %>

src/invidious/views/channel/community.ecr

@@ -1,5 +1,5 @@
 <% content_for "header" do %>
-<title><%= channel.author %> - Invidious</title>
+<title><%= HTML.escape(channel.author) %> - Invidious</title>
 <link rel="stylesheet" href="/css/channel.css?v=<%= ASSET_COMMIT %>">
 <% end %>
 

src/invidious/views/channel/playlists.ecr

@@ -1,5 +1,5 @@
 <% content_for "header" do %>
-<title><%= channel.author %> - Invidious</title>
+<title><%= HTML.escape(channel.author) %> - Invidious</title>
 <link rel="stylesheet" href="/css/channel.css?v=<%= ASSET_COMMIT %>">
 <% end %>
 

src/invidious/views/components/channels/channel-information.ecr

@@ -1,3 +1,5 @@
+<% author = HTML.escape(channel.author) %>
+
 <% if channel.banner %>
     <div class="pure-g" id="channel-banner-container">
         <div class="pure-u-1" id="banner" style='background-image: url(/ggpht<%= URI.parse(channel.banner.not_nil!.gsub("=w1060-", "=w1280-")).request_target %>)'>
@@ -33,22 +35,23 @@
 <% end %>
 
 <div class="pure-g h-box">
-    <div class="pure-u-2-3">
+    <div class="pure-u-1">
-        <div class="channel-profile">
+        <div class="pure-u-1-2 channel-profile">
             <img src="/ggpht<%= URI.parse(channel.author_thumbnail).request_target %>">
-            <span><%= channel.author %></span>
+            <span><%= author %></span>
+        </div>
+
+        <div class="pure-u-1-2" style="float: right;">
+            <h3 style="text-align:right">
+                <a href="/feed/channel/<%= channel.ucid %>"><i class="icon ion-logo-rss"></i></a>
+                <a title="<%=translate(locale, "Watch on YouTube")%>" href="https://youtube.com/<%=URI.decode_www_form(env.get("current_page").to_s)%>">
+                    <i class="icon ion-logo-youtube"></i>
+                </a>
+                <a title="<%=translate(locale, "Switch Invidious Instance")%>" href="/redirect?referer=<%=env.get("current_page")%>">
+                    <i class="icon ion-md-jet"></i>
+                </a>
+            </h3>
         </div>
-    </div>
-    <div class="pure-u-1-3" style="text-align:right">
-        <h3>
-            <a href="/feed/channel/<%= channel.ucid %>"><i class="icon ion-logo-rss"></i></a>
-            <a title="<%=translate(locale, "Watch on YouTube")%>" href="https://youtube.com/<%=URI.decode_www_form(env.get("current_page").to_s)%>">
-                <i class="icon ion-logo-youtube"></i>
-            </a>
-            <a title="<%=translate(locale, "Switch Invidious Instance")%>" href="/redirect?referer=<%=env.get("current_page")%>">
-                <i class="icon ion-md-jet"></i>
-            </a>
-        </h3>
     </div>
 </div>
 
@@ -58,7 +61,6 @@
 
 <div class="h-box">
     <% ucid = channel.ucid %>
-    <% author = channel.author %>
     <% sub_count_text = number_to_short_text(channel.sub_count) %>
     <%= rendered "components/subscribe_widget" %>
 </div>
@@ -67,20 +69,6 @@
     <!-- TODO Refactor this! -->
     <div class="pure-menu pure-menu-horizontal">
         <ul class="pure-menu-list">
-            <!-- <% if content_type == 0 %>
-                <li class="pure-menu-item pure-menu-selected">
-                    <a class="pure-menu-link" href="/channel/<%= channel.ucid %>">
-                    <b> <%= translate(locale, "Home") %> </b>
-                    </a>
-                </li>
-            <% else %>
-                <li class="pure-menu-item">
-                    <a class="pure-menu-link" href="/channel/<%= channel.ucid %>">
-                    <%= translate(locale, "Home") %>
-                    </a>
-                </li>
-            <% end -%> -->
-        
             <% if !channel.auto_generated %>
                 <% if content_type == 1 %>
                     <li class="pure-menu-item pure-menu-selected">
@@ -127,20 +115,6 @@
                 <% end %>
             <% end -%>
 
-            <% if content_type == 4 %>
-                <li class="pure-menu-item pure-menu-selected">
-                    <a class="pure-menu-link" href="/channel/<%= channel.ucid %>/channels">
-                    <b> <%= translate(locale, "Channels") %> </b>
-                    </a>
-                </li>
-            <% else %>
-                <li class="pure-menu-item">
-                    <a class="pure-menu-link" href="/channel/<%= channel.ucid %>/channels">
-                    <%= translate(locale, "Channels") %>
-                    </a>
-                </li>
-            <% end -%>
-
             <% if content_type == 5 %>
                 <li class="pure-menu-item pure-menu-selected">
                     <a class="pure-menu-link" href="/channel/<%= channel.ucid %>/about">

src/invidious/views/components/channels/content-sorting-bar.ecr

@@ -1,4 +1,3 @@
-
 <div class="h-box">
     <% route = content_type == 1 ? "/videos" : "/playlists" %>
     <% url = "/channel/#{channel.ucid + route}" %>

src/invidious/views/components/search-filters.ecr

@@ -1,130 +0,0 @@
-<% operators = operators.not_nil! %>
-
-<details id="filters">
-    <summary class="simulated_a">
-        <h3 style="display:inline"> <%= translate(locale, "filter") %> </h3>
-    </summary>
-    <div id="filters" class="pure-g h-box">
-    <!-- Grabs all search filters. This is to make sure we don't accidently overwrite something within the
-        search query later on-->
-    <% filter_params = env.request.query_params.to_s.gsub(/q=.+?(?=&|$)/, "") %>
-    <% base_url = "/search?q=#{HTML.escape(query.not_nil!)}" %>
-
-    <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-date">
-        <b><%= translate(locale, "date") %></b>
-        <hr/>
-        <ul class="pure-menu-list">
-            <% ["hour", "today", "week", "month", "year"].each do |date| %>
-                <li class="pure-menu-item">
-                    <% if operators.fetch("date", "all") == date %>
-                        <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&date=[a-z]+/, "")}"%>">
-                            <b><%= translate(locale, date) %></b>
-                            <i class="remove-filter icon ion-md-close"></i>
-                        </a>
-                    <% else %>
-                        <a href="<%= base_url + "#{filter_params.gsub(/&date=[a-z]+/, "")}&date=#{date}"%>">
-                            <%= translate(locale, date) %>
-                        </a>
-                    <% end %>
-                </li>
-            <% end %>
-        </ul>
-    </div>
-
-    <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-content_type">
-        <b><%= translate(locale, "content_type") %></b>
-        <hr/>
-        <ul class="pure-menu-list">
-            <% ["video", "channel", "playlist", "movie", "show"].each do |content_type| %>
-                <li class="pure-menu-item">
-                    <% if operators.fetch("content_type", "all") == content_type %>
-                        <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&content_type=[a-z]+/, "")}"%>">
-                            <b><%= translate(locale, content_type) %></b>
-                            <i class="remove-filter icon ion-md-close"></i>
-                        </a>
-                    <% else %>
-                        <a href="<%= base_url + "#{filter_params.gsub(/&content_type=[a-z]+/, "")}&content_type=#{content_type}"%>">
-                            <%= translate(locale, content_type) %>
-                        </a>
-                    <% end %>
-                </li>
-            <% end %>
-        </ul>
-    </div>
-
-    <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-duration">
-        <b><%= translate(locale, "duration") %></b>
-        <hr/>
-        <ul class="pure-menu-list">
-            <% ["short", "long"].each do |duration| %>
-                <li class="pure-menu-item">
-                    <% if operators.fetch("duration", "all") == duration %>
-                        <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&duration=[a-z]+/, "")}"%>">
-                            <b><%= translate(locale, duration) %></b>
-                            <i class="remove-filter icon ion-md-close"></i>
-                        </a>
-                    <% else %>
-                        <a href="<%= base_url + "#{filter_params.gsub(/&duration=[a-z]+/, "")}&duration=#{duration}"%>">
-                            <%= translate(locale, duration) %>
-                        </a>
-                    <% end %>
-                </li>
-            <% end %>
-        </ul>
-    </div>
-
-    <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-features">
-        <b><%= translate(locale, "features") %></b>
-        <hr/>
-        <ul class="pure-menu-list">
-            <% ["hd", "subtitles", "creative_commons", "3d", "live", "purchased", "4k", "360", "location", "hdr"].each do |feature| %>
-                <li class="pure-menu-item">
-                    <% if operators.fetch("features", "all").includes?(feature) %>
-                        <% if operators["features"].split(",").size == 1 %>
-                            <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&features=[a-z]+/, "")}"%>">
-                                <b><%= translate(locale, feature) %></b>
-                                <i class="remove-filter icon ion-md-close"></i>
-                            </a>
-                        <% else %>
-                            <% data = filter_params.match(/.*features=.*(#{feature}(%2C|&|$)).*/).not_nil! %>
-                            <% start = data.begin(1) %>
-                            <% last =  data.end(1) %>
-
-                            <a style="color: inherit;" href="<%= base_url + "#{filter_params[0...start] + filter_params[last..-1]}"%>">
-                                <b><%= translate(locale, feature) %></b>
-                                <i class="remove-filter icon ion-md-close"></i>
-                            </a>
-                        <% end %>
-                    <% elsif operators.has_key?("features") %>
-                        <a href="<%= base_url + filter_params.gsub(/features=/, "features=#{feature},")%>">
-                            <%= translate(locale, feature) %>
-                        </a>
-                    <% else %>
-                        <a href="<%= "#{base_url}#{filter_params}&features=#{feature}"%>">
-                            <%= translate(locale, feature) %>
-                        </a>
-                    <% end %>
-                </li>
-            <% end %>
-        </ul>
-    </div>
-
-    <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-sort">
-        <b><%= translate(locale, "sort") %></b>
-        <hr/>
-        <ul class="pure-menu-list">
-            <% ["relevance", "rating", "date", "views"].each do |sort| %>
-                <li class="pure-menu-item">
-                    <% if operators.fetch("sort", "relevance") == sort %>
-                            <b><%= translate(locale, sort) %></b>
-                    <% else %>
-                        <a href="<%= base_url + "#{filter_params.gsub(/&sort=[a-z]+/, "")}&sort=#{sort}"%>">
-                            <%= translate(locale, sort) %>
-                        </a>
-                    <% end %>
-                </li>
-            <% end %>
-        </ul>
-    </div>
-    </div>
-</details>