feat: add customizable video buffer lenghts

assets/js/player.js

@@ -1,6 +1,7 @@
 'use strict';
 var player_data = JSON.parse(document.getElementById('player_data').textContent);
 var video_data = JSON.parse(document.getElementById('video_data').textContent);
+const CONFIG = JSON.parse(document.getElementById('config').textContent);
 
 var options = {
     liveui: true,
@@ -54,8 +55,13 @@ videojs.Vhs.xhr.beforeRequest = function(options) {
     return options;
 };
 
-videojs.Vhs.GOAL_BUFFER_LENGTH = 40;
-videojs.Vhs.MAX_GOAL_BUFFER_LENGTH = 80;
+// Buffer limits
+if (CONFIG.videojs.goal_buffer_length) {
+    videojs.Vhs.GOAL_BUFFER_LENGTH = CONFIG.videojs.goal_buffer_length;
+}
+if (CONFIG.videojs.max_goal_buffer_length) {
+    videojs.Vhs.MAX_GOAL_BUFFER_LENGTH = CONFIG.videojs.max_goal_buffer_length;
+}
 
 var player = videojs('player', options);
 

config/config.example.yml

@@ -1245,4 +1245,25 @@ video_cache:
 ## Accepted values: a string
 ## Default: "Backend"
 ##
-#backend_name_prefix: "Backend"
+#backend_name_prefix: "Backend"
+
+#########################################
+#
+#  VideoJS Settings
+#
+#########################################
+
+videojs:
+    ## Change goal buffer length
+    ##
+    ## Accepted values: a positive integer OR null
+    ## Default: 30
+    ##
+    goal_buffer_length: 30
+
+    ## Change max goal buffer length
+    ##
+    ## Accepted values: a positive integer OR null
+    ## Default: 60
+    ##
+    max_goal_buffer_length: 60

src/invidious/config.cr

@@ -252,6 +252,16 @@ class Config
 
   property backend_name_prefix : String = "Backend"
 
+  property videojs : VideoJSConfig = VideoJSConfig.from_yaml("")
+
+  struct VideoJSConfig
+    include YAML::Serializable
+    include JSON::Serializable
+
+    property goal_buffer_length : Int32? = 30
+    property max_goal_buffer_length : Int32? = 60
+  end
+
   def disabled?(option)
     case disabled = CONFIG.disable_proxy
     when Bool

src/invidious/views/embed.ecr

@@ -30,6 +30,13 @@
 }.to_pretty_json
 %>
 </script>
+<script id="config" type="application/json">
+<%=
+{
+    "videojs" => CONFIG.videojs,
+}.to_pretty_json
+%>
+</script>
 
 <%= rendered "components/player" %>
 <script src="/<%= JS_PATH %>/embed.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/watch.ecr

@@ -82,6 +82,13 @@ we're going to need to do it here in order to allow for translations.
 }.to_pretty_json
 %>
 </script>
+<script id="config" type="application/json">
+<%=
+{
+    "videojs" => CONFIG.videojs,
+}.to_pretty_json
+%>
+</script>
 
 <div id="player-container" class="h-box">
     <%= rendered "components/player" %>