diff --git a/assets/css/player.css b/assets/css/player.css index 304375b54..8a7cfdabb 100644 --- a/assets/css/player.css +++ b/assets/css/player.css @@ -101,23 +101,27 @@ ul.vjs-menu-content::-webkit-scrollbar { order: 2; } -.vjs-quality-selector, -.video-js .vjs-http-source-selector { +.vjs-audio-button { order: 3; } -.vjs-playback-rate { +.vjs-quality-selector, +.video-js .vjs-http-source-selector { order: 4; } -.vjs-share-control { +.vjs-playback-rate { order: 5; } -.vjs-fullscreen-control { +.vjs-share-control { order: 6; } +.vjs-fullscreen-control { + order: 7; +} + .vjs-playback-rate > .vjs-menu { width: 50px; } diff --git a/assets/js/player.js b/assets/js/player.js index f70052805..287b7ea11 100644 --- a/assets/js/player.js +++ b/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); } diff --git a/src/invidious/routes/api/manifest.cr b/src/invidious/routes/api/manifest.cr index f8766b660..bfb8a3777 100644 --- a/src/invidious/routes/api/manifest.cr +++ b/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")) + 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,9 +87,8 @@ module Invidious::Routes::API::Manifest end end end + i += 1 end - - i += 1 end potential_heights = {4320, 2160, 1440, 1080, 720, 480, 360, 240, 144} diff --git a/src/invidious/views/components/player.ecr b/src/invidious/views/components/player.ecr index fffefc9a3..c3c02df07 100644 --- a/src/invidious/views/components/player.ecr +++ b/src/invidious/views/components/player.ecr @@ -7,14 +7,25 @@ <% 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) %> <% if !params.local && !CONFIG.disabled?("local") %>