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|
@@ -358,7 +368,7 @@ get "/api/manifest/dash/id/:id" do |env|
   end
 
   if signature
-        adaptive_fmts.each do |fmt|
+    adaptive_fmts.each do |fmt|
       fmt["url"] += "&signature=" + decrypt_signature(fmt["s"])
     end
   end
@@ -379,20 +389,20 @@ get "/api/manifest/dash/id/:id" do |env|
         xml.element("AdaptationSet", id: 0, mimeType: "audio/mp4", subsegmentAlignment: true) do
           xml.element("Role", schemeIdUri: "urn:mpeg:DASH:role:2011", value: "main")
           video_streams.each do |fmt|
-          mimetype, codecs = fmt["type"].split(";")
-          codecs = codecs[9..-2]
-          fmt_type = mimetype.split("/")[0]
-          bandwidth = fmt["bitrate"]
+            mimetype, codecs = fmt["type"].split(";")
+            codecs = codecs[9..-2]
+            fmt_type = mimetype.split("/")[0]
+            bandwidth = fmt["bitrate"]
             itag = fmt["itag"]
             url = URI.unescape(fmt["url"])
 
             xml.element("Representation", id: fmt["itag"], codecs: codecs, bandwidth: bandwidth) do
               xml.element("BaseURL") { xml.cdata url }
-                xml.element("SegmentBase", indexRange: fmt["init"]) do
-                  xml.element("Initialization", range: fmt["index"])
-                end
+              xml.element("SegmentBase", indexRange: fmt["init"]) do
+                xml.element("Initialization", range: fmt["index"])
               end
             end
+          end
         end
 
         xml.element("AdaptationSet", id: 1, mimeType: "video/mp4", subsegmentAlignment: true) do
@@ -408,15 +418,15 @@ get "/api/manifest/dash/id/:id" do |env|
 
             xml.element("Representation", id: itag, codecs: codecs, width: width, height: height, bandwidth: bandwidth, frameRate: fmt["fps"]) do
               xml.element("BaseURL") { xml.cdata url }
-                xml.element("SegmentBase", indexRange: fmt["init"]) do
-                  xml.element("Initialization", range: fmt["index"])
-                end
+              xml.element("SegmentBase", indexRange: fmt["init"]) do
+                xml.element("Initialization", range: fmt["index"])
               end
             end
           end
         end
       end
     end
+  end
 
   manifest = manifest.gsub(%(<?xml version="1.0" encoding="UTF-8U"?>), %(<?xml version="1.0" encoding="UTF-8"?>))
   manifest = manifest.gsub(%(<?xml version="1.0" encoding="UTF-8V"?>), %(<?xml version="1.0" encoding="UTF-8"?>))

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| %>
-        <% if fmt["type"].starts_with?("audio") %>
-            <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>'>
-        <% end %>
+    <% audio_streams.each do |fmt| %>
+        <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["bitrate"] %>k" selected="<%= audio_streams[0]["url"] == fmt["url"] ? true : false %>">
     <% 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 %>
-<%= render "src/views/player/audio.ecr" %>
-<% else %>
-<%= render "src/views/player/video.ecr" %>
-<% end %>
+    <% if listen %>
+    <%= render "src/views/player/audio.ecr" %>
+    <% else %>
+    <%= render "src/views/player/video.ecr" %>
+    <% 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>
 
@@ -128,21 +141,21 @@ function toggle_comments(target) {
             <hr style="margin-left:1em; margin-right:1em;">
         <% if reddit_thread  && !reddit_html.empty? %>
             <div>
-            <div style="overflow-wrap:break-word; word-wrap:break-word;">
+                <div style="overflow-wrap:break-word; word-wrap:break-word;">
                     <h3>
                         <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> 
                         <%= reddit_thread.data.title %>
                     </h3>
-            <b>
-                <a target="_blank" href="https://reddit.com<%= reddit_thread.data.permalink %>">View more comments on Reddit</a>
-            </b>
+                    <b>
+                        <a target="_blank" href="https://reddit.com<%= reddit_thread.data.permalink %>">View more comments on Reddit</a>
+                    </b>
                 </div>
                 <div>
-            <%= reddit_html %>
-        </div>
+                    <%= reddit_html %>
+                </div>
             </div>
-        <% end %>
-    </div>
+            <% end %>
+        </div>
     </div>
 
     <div class="pure-u-1 pure-u-md-1-5">