initial working version

assets/css/player.css

@@ -106,7 +106,7 @@ ul.vjs-menu-content::-webkit-scrollbar {
 }
 
 .vjs-quality-selector,
-.video-js .vjs-http-source-selector {
+.video-js .vjs-quality-menu-wrapper {
   order: 4;
 }
 
@@ -218,7 +218,7 @@ ul.vjs-menu-content::-webkit-scrollbar {
 }
 
 .player-dimensions.vjs-fluid {
-  padding-top: 82vh;
+  padding-top: 82vh !important;
 }
 
 video.video-js {

assets/js/player.js

@@ -19,6 +19,7 @@ var options = {
             'captionsButton',
             'audioTrackButton',
             'qualitySelector',
+            'QualityMenuButton',
             'playbackRateMenuButton',
             'fullscreenToggle'
         ]
@@ -157,6 +158,16 @@ player.on('timeupdate', function () {
     elem_iv_other.href = addCurrentTimeToURL(base_url_iv_other, domain);
 });
 
+player.one('playing', function () {
+
+    if (!video_data.params.listen && video_data.params.quality === 'dash') {
+        var quality_menu_button = document.getElementsByClassName('vjs-quality-menu-button');
+        for (var i = 0; i < quality_menu_button.length; i++) {
+            quality_menu_button[i].className += ' vjs-icon-cog';
+        }
+    }
+});
+
 
 var shareOptions = {
     socials: ['fbFeed', 'tw', 'reddit', 'email'],
@@ -226,8 +237,9 @@ if (isMobile()) {
         operations_bar_element.append(share_element);
 
         if (!video_data.params.listen && video_data.params.quality === 'dash') {
-            var http_source_selector = document.getElementsByClassName('vjs-http-source-selector vjs-menu-button')[0];
+            var http_source_selector = document.getElementsByClassName('vjs-quality-menu-button vjs-menu-button')[0];
             operations_bar_element.append(http_source_selector);
+
         }
     });
 }
@@ -386,7 +398,7 @@ if (video_data.params.autoplay) {
 }
 
 if (!video_data.params.listen && video_data.params.quality === 'dash') {
-    player.httpSourceSelector();
+    var qualityMenuOptions = {}
 
     if (video_data.params.quality_dash !== 'auto') {
         player.ready(function () {
@@ -409,12 +421,13 @@ if (!video_data.params.listen && video_data.params.quality === 'dash') {
                                 break;
                         }
                 }
-                qualityLevels.forEach(function (level, index) {
-                    level.enabled = (index === targetQualityLevel);
-                });
+                qualityMenuOptions.defaultResolution = (qualityLevels[targetQualityLevel].height + "p");
             });
         });
     }
+
+    console.log(qualityMenuOptions)
+    player.qualityMenu(qualityMenuOptions);
 }
 
 player.vttThumbnails({

src/invidious/routes/api/manifest.cr

@@ -76,7 +76,7 @@ module Invidious::Routes::API::Manifest
 
                 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("Representation", id: fmt["itag"].as_i + rand(100), codecs: codecs, bandwidth: bandwidth) do
                   xml.element("AudioChannelConfiguration", schemeIdUri: "urn:mpeg:dash:23003:3:audio_channel_configuration:2011",
                     value: "2")
                   xml.element("BaseURL") { xml.text url }

src/invidious/views/components/player_sources.ecr

@@ -1,17 +1,14 @@
 <link rel="stylesheet" href="/videojs/video.js/video-js.css?v=<%= ASSET_COMMIT %>">
-<link rel="stylesheet" href="/videojs/videojs-http-source-selector/videojs-http-source-selector.css?v=<%= ASSET_COMMIT %>">
 <link rel="stylesheet" href="/videojs/videojs-markers/videojs.markers.css?v=<%= ASSET_COMMIT %>">
-<link rel="stylesheet" href="/videojs/videojs-share/videojs-share.css?v=<%= ASSET_COMMIT %>">
 <link rel="stylesheet" href="/videojs/videojs-vtt-thumbnails/videojs-vtt-thumbnails.css?v=<%= ASSET_COMMIT %>">
 <link rel="stylesheet" href="/videojs/videojs-mobile-ui/videojs-mobile-ui.css?v=<%= ASSET_COMMIT %>">
 <link rel="stylesheet" href="/css/player.css?v=<%= ASSET_COMMIT %>">
 
 <script src="/videojs/video.js/video.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/videojs/videojs-mobile-ui/videojs-mobile-ui.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/videojs/videojs-contrib-quality-levels/videojs-contrib-quality-levels.js?v=<%= ASSET_COMMIT %>"></script>
-<script src="/videojs/videojs-http-source-selector/videojs-http-source-selector.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/videojs/videojs-contrib-quality-menu/videojs-contrib-quality-menu.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/videojs/videojs-markers/videojs-markers.js?v=<%= ASSET_COMMIT %>"></script>
-<script src="/videojs/videojs-share/videojs-share.js?v=<%= ASSET_COMMIT %>"></script>
 <script src="/videojs/videojs-vtt-thumbnails/videojs-vtt-thumbnails.js?v=<%= ASSET_COMMIT %>"></script>
 
 

videojs-dependencies.yml

@@ -1,35 +1,35 @@
-# Due to a 'video append of' error (see #3011), we're stuck on 7.12.1.
+# find the checksum of latest version using npm view package
 video.js:
-  version: 7.12.1
-  shasum: 1d12eeb1f52e3679e8e4c987d9b9eb37e2247fa2
+  version: 8.10.0
+  shasum: 603a49909ef33f839264da8b73513f9daf592b57
 
 videojs-contrib-quality-levels:
-  version: 2.1.0
-  shasum: 046e9e21ed01043f512b83a1916001d552457083
+  version: 4.0.0
+  shasum: faa8096594cdbfc3ccbefe8572fc20531ba23f3d
 
-videojs-http-source-selector:
-  version: 1.1.6
-  shasum: 073aadbea0106ba6c98d6b611094dbf8554ffa1f
+videojs-contrib-quality-menu:
+  version: 1.0.0
+  shasum: f5e8f855358e20854de23d7607634b5aabf4e9ac
 
 videojs-markers:
   version: 1.0.1
   shasum: d7f8d804253fd587813271f8db308a22b9f7df34
 
 videojs-mobile-ui:
-  version: 0.6.1
-  shasum: 0e146c4c481cbee0729cb5e162e558b455562cd0
+  version: 1.1.1
+  shasum: 6b5e75df36cf688906b3662070399b23da9e8e06
 
 videojs-overlay:
-  version: 2.1.4
-  shasum: 5a103b25374dbb753eb87960d8360c2e8f39cc05
+  version: 3.1.0
+  shasum: d57505d375eca952feeb36e5b33e0a130e3dc9e0
 
 videojs-share:
   version: 3.2.1
   shasum: 0a3024b981387b9d21c058c829760a72c14b8ceb
 
 videojs-vr:
-  version: 1.8.0
-  shasum: 7f2f07f760d8a329c615acd316e49da6ee8edd34
+  version: 2.0.0
+  shasum: 3d86e3fececf7373cfb89b950ed6ab77ca783d2b
 
 videojs-vtt-thumbnails:
   version: 0.0.13