Add qualityselector

assets/css/quality-selector.css

@@ -0,0 +1,25 @@
+.vjs-quality-selector .vjs-menu-button {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+.vjs-quality-selector .vjs-icon-placeholder {
+  font-family: "VideoJS";
+  font-weight: normal;
+  font-style: normal;
+}
+.vjs-quality-selector .vjs-icon-placeholder:before {
+  content: "\f110";
+}
+.vjs-quality-changing .vjs-big-play-button {
+  display: none;
+}
+.vjs-quality-changing .vjs-control-bar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  visibility: visible;
+  opacity: 1;
+}

src/invidious.cr

@@ -189,14 +189,6 @@ get "/watch" do |env|
     fmt_stream << HTTP::Params.parse(string)
   end
 
-  signature = false
-  if fmt_stream[0]? && fmt_stream[0]["s"]?
-    signature = true
-  end
-
-  # We want lowest quality first
-  fmt_stream.reverse!
-
   adaptive_fmts = [] of HTTP::Params
   if video.info.has_key?("adaptive_fmts")
     video.info["adaptive_fmts"].split(",") do |string|
@@ -204,6 +196,11 @@ get "/watch" do |env|
     end
   end
 
+  signature = false
+  if adaptive_fmts[0]? && adaptive_fmts[0]["s"]?
+    signature = true
+  end
+
   if signature
     adaptive_fmts.each do |fmt|
       fmt["url"] += "&signature=" + decrypt_signature(fmt["s"])
@@ -214,6 +211,19 @@ get "/watch" do |env|
     end
   end
 
+  # 3gpp doesn't appear to play correclty in Chrome, so here we remove it
+  fmt_stream = fmt_stream.compact_map { |s| !s["type"].starts_with?("video/3gpp") ? s : nil }
+  fmt_stream = fmt_stream.uniq { |s| s["quality"] }
+
+  video_streams = adaptive_fmts.compact_map { |s| s["type"].starts_with?("video") ? s : nil }
+  video_streams = video_streams.uniq { |s| s["size"] }
+
+  audio_streams = adaptive_fmts.compact_map { |s| s["type"].starts_with?("audio") ? s : nil }
+  audio_streams.sort_by! { |s| s["bitrate"].to_i }.reverse!
+  audio_streams.each do |fmt|
+    fmt["bitrate"] = (fmt["bitrate"].to_f64/1000).to_i.to_s
+  end
+
   rvs = [] of Hash(String, String)
   if video.info.has_key?("rvs")
     video.info["rvs"].split(",").each do |rv|

src/views/player/audio.ecr

@@ -1,7 +1,5 @@
 <audio poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" id="player" class="video-js" data-setup="{}" style="width:100%;" controls>
-    <% adaptive_fmts.each do |fmt| %>
+    <% audio_streams.each do |fmt| %>
-        <% if fmt["type"].starts_with?("audio") %>
+        <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["bitrate"] %>k" selected="<%= audio_streams[0]["url"] == fmt["url"] ? true : false %>">
-            <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>'>
-        <% end %>
     <% end %>
 </audio>

src/views/player/video.ecr

@@ -1,5 +1,5 @@
 <video poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" id="player" class="video-js" data-setup="{}" style="width:100%;" controls>
     <% fmt_stream.each do |fmt| %>
-        <source src="<%= fmt["url"]? %>" type='<%= fmt["type"]? %>'>
+        <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["quality"] %>" selected="<%= fmt_stream[0]["url"] == fmt["url"] ? true : false %>">
     <% end %>
 </video>

src/views/watch.ecr

@@ -1,24 +1,37 @@
 <% content_for "header" do %>
 <meta name="thumbnail" content="<%= thumbnail %>">
 <link rel="stylesheet" href="https://vjs.zencdn.net/6.6.3/video-js.css">
+<link rel="stylesheet" href="/css/quality-selector.css">
 <script src="https://vjs.zencdn.net/6.6.3/video.js"></script>
 <script src="https://cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script>
+<script src="/js/silvermine-videojs-quality-selector.js"></script>
 <title><%= video.title %> - Invidious</title>
 <% end %>
 
 <div class="h-box">
-<% if listen %>
+    <% if listen %>
-<%= render "src/views/player/audio.ecr" %>
+    <%= render "src/views/player/audio.ecr" %>
-<% else %>
+    <% else %>
-<%= render "src/views/player/video.ecr" %>
+    <%= render "src/views/player/video.ecr" %>
-<% end %>
+    <% end %>
 </div>
 
 <script>
 var options = {
     aspectRatio: "16:9",
     preload: "auto",
-    playbackRates: [0.5, 1, 1.5, 2]
+    playbackRates: [0.5, 1, 1.5, 2],
+    controlBar: {
+      children: [
+         'playToggle',
+         'volumePanel',
+         'progressControl',
+         'remainingTimeDisplay',
+         'qualitySelector',
+         'playbackRateMenuButton',
+         'fullscreenToggle',
+      ],
+   },
 };
 var player = videojs('player', options, function() {
     this.hotkeys({
@@ -81,7 +94,7 @@ function toggle_comments(target) {
     } else {
         target.innerHTML = '[ - ]';
         body.style.display = '';
-}
+    }
 };
 </script>