bump videojs to 7.12.1 and improve playback exp

related to #2848

assets/js/player.js

@@ -41,6 +41,12 @@ 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) {
+    if (options.headers) {
+        if (options.headers.Range) {
+            options.uri = options.uri + '&range=' + options.headers.Range.split("=")[1];
+            delete options.headers.Range;
+        }
+    }
     if (options.uri.indexOf('videoplayback') === -1 && options.uri.indexOf('local=true') === -1) {
         options.uri = options.uri + '?local=true';
     }
@@ -49,6 +55,42 @@ videojs.Vhs.xhr.beforeRequest = function(options) {
 
 var player = videojs('player', options);
 
+player.on('error', () => {
+    if (video_data.params.quality !== 'dash') {
+        if (!player.currentSrc().includes("local=true") && !video_data.local_disabled) {
+            var currentSources = player.currentSources();
+            for (var i = 0; i < currentSources.length; i++) {
+                currentSources[i]["src"] += "&local=true"
+            }
+            player.src(currentSources)
+        }
+        else if (player.error().code === 2 || player.error().code === 4) {
+            setTimeout(function (event) {
+                console.log('An error occurred in the player, reloading...');
+
+                var currentTime = player.currentTime();
+                var playbackRate = player.playbackRate();
+                var paused = player.paused();
+
+                player.load();
+
+                if (currentTime > 0.5) currentTime -= 0.5;
+
+                player.currentTime(currentTime);
+                player.playbackRate(playbackRate);
+
+                if (!paused) player.play();
+            }, 10000);
+        }
+    }
+});
+
+if (video_data.params.quality == 'dash') {
+    player.reloadSourceOnError({
+        errorInterval: 10
+    });
+}
+
 /**
  * Function for add time argument to url
  * @param {String} url
@@ -144,27 +186,6 @@ if (isMobile()) {
   	})
 }
 
-player.on('error', function (event) {
-    if (player.error().code === 2 || player.error().code === 4) {
-        setTimeout(function (event) {
-            console.log('An error occurred in the player, reloading...');
-
-            var currentTime = player.currentTime();
-            var playbackRate = player.playbackRate();
-            var paused = player.paused();
-
-            player.load();
-
-            if (currentTime > 0.5) currentTime -= 0.5;
-
-            player.currentTime(currentTime);
-            player.playbackRate(playbackRate);
-
-            if (!paused) player.play();
-        }, 5000);
-    }
-});
-
 // Enable VR video support
 if (!video_data.params.listen && video_data.vr && video_data.params.vr_mode) {
     player.crossOrigin("anonymous")

src/invidious/routes/api/manifest.cr

@@ -56,7 +56,7 @@ module Invidious::Routes::API::Manifest
         xml.element("Period") do
           i = 0
 
-          {"audio/mp4", "audio/webm"}.each do |mime_type|
+          {"audio/mp4"}.each do |mime_type|
             mime_streams = audio_streams.select { |stream| stream["mimeType"].as_s.starts_with? mime_type }
             next if mime_streams.empty?
 
@@ -83,7 +83,7 @@ module Invidious::Routes::API::Manifest
 
           potential_heights = {4320, 2160, 1440, 1080, 720, 480, 360, 240, 144}
 
-          {"video/mp4", "video/webm"}.each do |mime_type|
+          {"video/mp4"}.each do |mime_type|
             mime_streams = video_streams.select { |stream| stream["mimeType"].as_s.starts_with? mime_type }
             next if mime_streams.empty?
 

src/invidious/views/components/player.ecr

@@ -7,8 +7,19 @@
         <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| %>
-                <source src="/latest_version?id=<%= video.id %>&itag=<%= fmt["itag"] %><% if params.local %>&local=true<% end %>" type='<%= fmt["mimeType"] %>' label="<%= fmt["bitrate"] %>k" selected="<%= i == 0 ? true : false %>">
+            <% 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
+            %>
+                <source src="<%= src_url %>" type='<%= mimetype %>' label="<%= bitrate %>k" selected="<%= selected %>">
+                <% if !params.local && !CONFIG.disabled?("local") %>
+                <source src="<%= src_url %>&local=true" type='<%= mimetype %>' hidequalityoption="true">
+                <% end %>
             <% end %>
         <% else %>
             <% if params.quality == "dash" %>
@@ -28,6 +39,9 @@
                 selected = params.quality ? (params.quality == quality) : (i == 0)
             %>
                 <source src="<%= src_url %>" type="<%= mimetype %>" label="<%= quality %>" selected="<%= selected %>">
+                <% if !params.local && !CONFIG.disabled?("local") %>
+                <source src="<%= src_url %>&local=true" type="<%= mimetype %>" hidequalityoption="true">
+                <% end %>
             <% end %>
         <% end %>
 

src/invidious/views/embed.ecr

@@ -24,7 +24,8 @@
     "video_series" => video_series,
     "params" => params,
     "preferences" => preferences,
-    "premiere_timestamp" => video.premiere_timestamp.try &.to_unix
+    "premiere_timestamp" => video.premiere_timestamp.try &.to_unix,
+    "local_disabled" => CONFIG.disabled?("local")
 }.to_pretty_json
 %>
 </script>

src/invidious/views/watch.ecr

@@ -64,7 +64,8 @@ we're going to need to do it here in order to allow for translations.
     "preferences" => preferences,
     "premiere_timestamp" => video.premiere_timestamp.try &.to_unix,
     "vr" => video.is_vr,
-    "projection_type" => video.projection_type
+    "projection_type" => video.projection_type,
+    "local_disabled" => CONFIG.disabled?("local")
 }.to_pretty_json
 %>
 </script>

videojs-dependencies.yml

@@ -1,9 +1,7 @@
-# Due to an firefox issue, we're stuck on 7.11.0. If you're hosting a private instance
-# and you're using a chromium based browser, feel free to bump this to the latest version
-# in order to get support for higher resolutions on more videos.
+# Due to a 'video append of' error (see #3011), we're stuck on 7.12.1.
 video.js:
-  version: 7.11.0
-  shasum: e20747d890716085e7255a90d73c00f32324a224
+  version: 7.12.1
+  shasum: 1d12eeb1f52e3679e8e4c987d9b9eb37e2247fa2
 
 videojs-contrib-quality-levels:
   version: 2.1.0