feat: allow setting videojs max buffer length via config.yml (#5876)

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,6 +55,14 @@ videojs.Vhs.xhr.beforeRequest = function(options) {
     return options;
 };
 
+// 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);
 
 player.on('error', function () {

config/config.example.yml

@@ -593,6 +593,27 @@ hmac_key: "CHANGE_ME!!"
 ## browser's cookies).
 ##
 
+#########################################
+#
+#  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
+
 default_user_preferences:
 
   # -----------------------------

src/invidious/config.cr

@@ -186,6 +186,19 @@ class Config
   # Disable easy to abuse API endpoints
   property disable_abusable_api : Bool = false
 
+  property videojs : VideoJSConfig = VideoJSConfig.from_yaml("")
+
+  struct VideoJSConfig
+    include YAML::Serializable
+    include JSON::Serializable
+
+    # This are the default values that VideoJS uses.
+    # See `assets/videojs/video.js/video.js` file
+    # and search for `GOAL_BUFFER_LENGTH` and `MAX_GOAL_BUFFER_LENGTH`
+    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/embed.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/watch.ecr

@@ -79,6 +79,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" %>