Merge 00900dfa43 into 4782a67038

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;
 }
 
@@ -136,10 +136,6 @@ ul.vjs-menu-content::-webkit-scrollbar {
   display: none;
 }
 
-.video-js .vjs-icon-cog {
-  font-size: 18px;
-}
-
 .video-js .vjs-control-bar,
 .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
   background-color: rgba(35, 35, 35, 0.75);
@@ -218,7 +214,7 @@ ul.vjs-menu-content::-webkit-scrollbar {
 }
 
 .player-dimensions.vjs-fluid {
-  padding-top: 82vh;
+  padding-top: 82vh !important;
 }
 
 video.video-js {

assets/css/quality-selector.css

@@ -1 +1 @@
-.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}
+.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}.video-js:not(.vjs-v8) .vjs-quality-selector .vjs-icon-placeholder::before{content:""}.vjs-v8 .vjs-quality-selector .vjs-icon-placeholder::before{content:""}.vjs-quality-changing .vjs-big-play-button{display:none}.vjs-quality-changing .vjs-control-bar{display:flex;visibility:visible;opacity:1}

assets/css/videojs-share.css

@@ -0,0 +1,7 @@
+/**
+ * videojs-share
+ * @version 3.2.1
+ * @copyright 2024 Mikhail Khazov <mkhazov.work@gmail.com>
+ * @license MIT
+ */
+ .video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-modal-dialog-content{display:flex;align-items:center;padding:0;background-image:linear-gradient(to bottom, rgba(0,0,0,0.77), rgba(0,0,0,0.75))}.video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button{position:absolute;right:0;top:5px;width:30px;height:30px;color:#fff;cursor:pointer;opacity:0.9;transition:opacity 0.25s ease-out}.video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button:before{content:'×';font-size:20px;line-height:15px}.video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button:hover{opacity:1}.video-js .vjs-share{display:flex;flex-direction:column;justify-content:space-around;align-items:center;width:100%;height:100%;max-height:400px}.video-js .vjs-share__top,.video-js .vjs-share__middle,.video-js .vjs-share__bottom{display:flex}.video-js .vjs-share__top,.video-js .vjs-share__middle{flex-direction:column;justify-content:space-between}.video-js .vjs-share__middle{padding:0 25px}.video-js .vjs-share__title{align-self:center;font-size:22px;color:#fff}.video-js .vjs-share__subtitle{width:100%;margin:0 auto 12px;font-size:16px;color:#fff;opacity:0.7}.video-js .vjs-share__short-link-wrapper{position:relative;display:block;width:100%;height:40px;margin:0 auto;margin-bottom:15px;border:0;color:rgba(255,255,255,0.65);background-color:#363636;outline:none;overflow:hidden;flex-shrink:0}.video-js .vjs-share__short-link{display:block;width:100%;height:100%;padding:0 40px 0 15px;border:0;color:rgba(255,255,255,0.65);background-color:#363636;outline:none}.video-js .vjs-share__btn{position:absolute;right:0;bottom:0;height:40px;width:40px;display:flex;align-items:center;padding:0 11px;border:0;color:#fff;background-color:#2e2e2e;background-size:18px 19px;background-position:center;background-repeat:no-repeat;cursor:pointer;outline:none;transition:width 0.3s ease-out, padding 0.3s ease-out}.video-js .vjs-share__btn svg{flex-shrink:0}.video-js .vjs-share__btn span{position:relative;padding-left:10px;opacity:0;transition:opacity 0.3s ease-out}.video-js .vjs-share__btn:hover{justify-content:center;width:100%;padding:0 40px;background-image:none}.video-js .vjs-share__btn:hover span{opacity:1}.video-js .vjs-share__socials{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;transition:width 0.3s ease-out, height 0.3s ease-out}.video-js .vjs-share__social{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:32px;height:32px;margin-right:6px;margin-bottom:6px;cursor:pointer;font-size:8px;transition:transform 0.3s ease-out, filter 0.2s ease-out;border:none;outline:none}.video-js .vjs-share__social:hover{filter:brightness(115%)}.video-js .vjs-share__social svg{overflow:visible;max-height:24px}.video-js .vjs-share__social_vk{background-color:#5d7294}.video-js .vjs-share__social_ok{background-color:#ed7c20}.video-js .vjs-share__social_mail,.video-js .vjs-share__social_email{background-color:#134785}.video-js .vjs-share__social_tw{background-color:#76aaeb}.video-js .vjs-share__social_reddit{background-color:#ff4500}.video-js .vjs-share__social_fbFeed{background-color:#475995}.video-js .vjs-share__social_messenger{background-color:#0084ff}.video-js .vjs-share__social_gp{background-color:#d53f35}.video-js .vjs-share__social_linkedin{background-color:#0077b5}.video-js .vjs-share__social_viber{background-color:#766db5}.video-js .vjs-share__social_telegram{background-color:#4bb0e2}.video-js .vjs-share__social_whatsapp{background-color:#78c870}.video-js .vjs-share__bottom{justify-content:center}@media (max-height: 220px){.video-js .vjs-share .hidden-xs{display:none}}@media (max-height: 350px){.video-js .vjs-share .hidden-sm{display:none}}@media (min-height: 400px){.video-js .vjs-share__title{margin-bottom:15px}.video-js .vjs-share__short-link-wrapper{margin-bottom:30px}}@media (min-width: 320px){.video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button{right:5px;top:10px}}@media (min-width: 660px){.video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button{right:20px;top:20px}.video-js .vjs-share__social{width:40px;height:40px}}

assets/js/player.js

@@ -6,6 +6,7 @@ var options = {
     preload: 'auto',
     liveui: true,
     playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
+    enableSourceset: false,
     controlBar: {
         children: [
             'playToggle',
@@ -19,6 +20,7 @@ var options = {
             'captionsButton',
             'audioTrackButton',
             'qualitySelector',
+            'QualityMenuButton',
             'playbackRateMenuButton',
             'fullscreenToggle'
         ]
@@ -42,7 +44,7 @@ embed_url = location.origin + '/embed/' + video_data.id + embed_url.search;
 
 var save_player_pos_key = 'save_player_pos';
 
-videojs.Vhs.xhr.beforeRequest = function(options) {
+videojs.Vhs.xhr.onRequest = function(options) {
     // set local if requested not videoplayback
     if (!options.uri.includes('videoplayback')) {
         if (!options.uri.includes('local=true'))
@@ -226,8 +228,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);
+
         }
     });
 }
@@ -391,7 +394,6 @@ if (video_data.params.autoplay) {
 }
 
 if (!video_data.params.listen && video_data.params.quality === 'dash') {
-    player.httpSourceSelector();
 
     if (video_data.params.quality_dash !== 'auto') {
         player.ready(function () {
@@ -414,8 +416,8 @@ if (!video_data.params.listen && video_data.params.quality === 'dash') {
                                 break;
                         }
                 }
-                qualityLevels.forEach(function (level, index) {
+                player.qualityMenu({
-                    level.enabled = (index === targetQualityLevel);
+                    defaultResolution: qualityLevels[targetQualityLevel].height
                 });
             });
         });

src/invidious/routes/api/manifest.cr

@@ -82,7 +82,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,7 +1,6 @@
 <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="/js/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 %>">
@@ -9,9 +8,9 @@
 <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="/js/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
+  version: 8.10.0
-  shasum: 1d12eeb1f52e3679e8e4c987d9b9eb37e2247fa2
+  shasum: 603a49909ef33f839264da8b73513f9daf592b57
 
 videojs-contrib-quality-levels:
-  version: 2.1.0
+  version: 4.1.0
-  shasum: 046e9e21ed01043f512b83a1916001d552457083
+  shasum: 44c2d2167114a5c8418548b10a25cb409d6cba51
 
-videojs-http-source-selector:
+videojs-contrib-quality-menu:
-  version: 1.1.6
+  version: 1.0.3
-  shasum: 073aadbea0106ba6c98d6b611094dbf8554ffa1f
+  shasum: a15daff78170a332e5d1cd67601c82af2cd4c6da
 
 videojs-markers:
   version: 1.0.1
   shasum: d7f8d804253fd587813271f8db308a22b9f7df34
 
 videojs-mobile-ui:
-  version: 0.6.1
+  version: 1.1.1
-  shasum: 0e146c4c481cbee0729cb5e162e558b455562cd0
+  shasum: 6b5e75df36cf688906b3662070399b23da9e8e06
 
 videojs-overlay:
-  version: 2.1.4
+  version: 3.1.0
-  shasum: 5a103b25374dbb753eb87960d8360c2e8f39cc05
+  shasum: d57505d375eca952feeb36e5b33e0a130e3dc9e0
 
 videojs-share:
   version: 3.2.1
   shasum: 0a3024b981387b9d21c058c829760a72c14b8ceb
 
 videojs-vr:
-  version: 1.8.0
+  version: 2.0.0
-  shasum: 7f2f07f760d8a329c615acd316e49da6ee8edd34
+  shasum: 3d86e3fececf7373cfb89b950ed6ab77ca783d2b
 
 videojs-vtt-thumbnails:
   version: 0.0.13