Merge pull request #3162 from 138138138/138138138-audio-quality-1

assets/css/player.css

@@ -101,21 +101,25 @@ ul.vjs-menu-content::-webkit-scrollbar {
   order: 2;
 }
 
+.vjs-audio-button {
+  order: 3;
+}
+
 .vjs-quality-selector,
 .video-js .vjs-http-source-selector {
-  order: 3;
+  order: 4;
 }
 
 .vjs-playback-rate {
-  order: 4;
+  order: 5;
 }
 
 .vjs-share-control {
-  order: 5;
+  order: 6;
 }
 
 .vjs-fullscreen-control {
-  order: 6;
+  order: 7;
 }
 
 .vjs-playback-rate > .vjs-menu {

assets/js/player.js

@@ -17,6 +17,7 @@ var options = {
             'remainingTimeDisplay',
             'Spacer',
             'captionsButton',
+            'audioTrackButton',
             'qualitySelector',
             'playbackRateMenuButton',
             'fullscreenToggle'
@@ -149,7 +150,8 @@ if (isMobile()) {
 
     var buttons = ['playToggle', 'volumePanel', 'captionsButton'];
 
-    if (video_data.params.quality !== 'dash') buttons.push('qualitySelector');
+    if (!video_data.params.listen && video_data.params.quality === 'dash') buttons.push('audioTrackButton');
+    if (video_data.params.listen || video_data.params.quality !== 'dash') buttons.push('qualitySelector');
 
     // Create new control bar object for operation buttons
     const ControlBar = videojs.getComponent('controlBar');
@@ -176,7 +178,7 @@ if (isMobile()) {
         var share_element = document.getElementsByClassName('vjs-share-control')[0];
         operations_bar_element.append(share_element);
 
-        if (video_data.params.quality === 'dash') {
+        if (!video_data.params.listen && video_data.params.quality === 'dash') {
             var http_source_selector = document.getElementsByClassName('vjs-http-source-selector vjs-menu-button')[0];
             operations_bar_element.append(http_source_selector);
         }

src/invidious/routes/api/manifest.cr

@@ -48,7 +48,7 @@ module Invidious::Routes::API::Manifest
       end
     end
 
-    audio_streams = video.audio_streams
+    audio_streams = video.audio_streams.sort_by { |stream| {stream["bitrate"].as_i} }.reverse!
     video_streams = video.video_streams.sort_by { |stream| {stream["width"].as_i, stream["fps"].as_i} }.reverse!
 
     manifest = XML.build(indent: "  ", encoding: "UTF-8") do |xml|
@@ -62,16 +62,22 @@ module Invidious::Routes::API::Manifest
             mime_streams = audio_streams.select { |stream| stream["mimeType"].as_s.starts_with? mime_type }
             next if mime_streams.empty?
 
-            xml.element("AdaptationSet", id: i, mimeType: mime_type, startWithSAP: 1, subsegmentAlignment: true) do
             mime_streams.each do |fmt|
               # OTF streams aren't supported yet (See https://github.com/TeamNewPipe/NewPipe/issues/2415)
               next if !(fmt.has_key?("indexRange") && fmt.has_key?("initRange"))
 
+              # Different representations of the same audio should be groupped into one AdaptationSet.
+              # However, most players don't support auto quality switching, so we have to trick them
+              # into providing a quality selector.
+              # See https://github.com/iv-org/invidious/issues/3074 for more details.
+              xml.element("AdaptationSet", id: i, mimeType: mime_type, startWithSAP: 1, subsegmentAlignment: true, label: fmt["bitrate"].to_s + "k") do
                 codecs = fmt["mimeType"].as_s.split("codecs=")[1].strip('"')
                 bandwidth = fmt["bitrate"].as_i
                 itag = fmt["itag"].as_i
                 url = fmt["url"].as_s
 
+                xml.element("Role", schemeIdUri: "urn:mpeg:dash:role:2011", value: i == 0 ? "main" : "alternate")
+
                 xml.element("Representation", id: fmt["itag"], codecs: codecs, bandwidth: bandwidth) do
                   xml.element("AudioChannelConfiguration", schemeIdUri: "urn:mpeg:dash:23003:3:audio_channel_configuration:2011",
                     value: "2")
@@ -81,10 +87,9 @@ module Invidious::Routes::API::Manifest
                   end
                 end
               end
-            end
-
               i += 1
             end
+          end
 
           potential_heights = {4320, 2160, 1440, 1080, 720, 480, 360, 240, 144}
 

src/invidious/views/components/player.ecr

@@ -7,14 +7,25 @@
         <source src="<%= URI.parse(hlsvp).request_target %><% if params.local %>?local=true<% end %>" type="application/x-mpegURL" label="livestream">
     <% else %>
         <% if params.listen %>
-            <% audio_streams.each_with_index do |fmt, i|
+            <% # default to 128k m4a stream
+               best_m4a_stream_index = 0
+               best_m4a_stream_bitrate = 0
+               audio_streams.each_with_index do |fmt, i|
+                 bandwidth = fmt["bitrate"].as_i
+                 if (fmt["mimeType"].as_s.starts_with?("audio/mp4") && bandwidth > best_m4a_stream_bitrate)
+                   best_m4a_stream_bitrate = bandwidth
+                   best_m4a_stream_index = i
+                 end
+               end
+
+               audio_streams.each_with_index do |fmt, i|
                 src_url  = "/latest_version?id=#{video.id}&itag=#{fmt["itag"]}"
                 src_url += "&local=true" if params.local
 
                 bitrate = fmt["bitrate"]
                 mimetype = HTML.escape(fmt["mimeType"].as_s)
 
-                selected = i == 0 ? true : false
+                selected = (i == best_m4a_stream_index)
             %>
                 <source src="<%= src_url %>" type='<%= mimetype %>' label="<%= bitrate %>k" selected="<%= selected %>">
                 <% if !params.local && !CONFIG.disabled?("local") %>