Preferences: Add option to control preloading of video data (#4122)

This PR adds a configuration option to control the preloading of video data on
page load with the HTML5 'preload'[1] attribute on the `<video>` element.

The option is enabled by default, meaning that the `preload` attribute's value
will be 'auto'. If users want to prevent preloading of video data, they
can disable the option, which will set the attribute value to 'none'.

[1](https://www.w3schools.com/tags/att_video_preload.asp)

Closes issue 4110

assets/js/player.js

@@ -3,7 +3,6 @@ var player_data = JSON.parse(document.getElementById('player_data').textContent)
 var video_data = JSON.parse(document.getElementById('video_data').textContent);
 
 var options = {
-    preload: 'auto',
     liveui: true,
     playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
     controlBar: {

config/config.example.yml

@@ -707,6 +707,22 @@ default_user_preferences:
   #  Video player behavior
   # -----------------------------
 
+  ##
+  ## This option controls the value of the HTML5 <video> element's
+  ## "preload" attribute.
+  ##
+  ## If set to 'false', no video data will be loaded until the user
+  ## explicitly starts the video by clicking the "Play" button.
+  ## If set to 'true', the web browser will buffer some video data
+  ## while the page is loading.
+  ##
+  ## See: https://www.w3schools.com/tags/att_video_preload.asp
+  ##
+  ## Accepted values: true, false
+  ## Default: true
+  ##
+  #preload: true
+
   ##
   ## Automatically play videos on page load.
   ##

locales/de.json

@@ -47,6 +47,7 @@
     "Preferences": "Einstellungen",
     "preferences_category_player": "Wiedergabeeinstellungen",
     "preferences_video_loop_label": "Immer wiederholen: ",
+    "preferences_preload_label": "Videodaten vorladen: ",
     "preferences_autoplay_label": "Automatisch abspielen: ",
     "preferences_continue_label": "Immer automatisch nächstes Video abspielen: ",
     "preferences_continue_autoplay_label": "Nächstes Video automatisch abspielen: ",

locales/en-US.json

@@ -71,6 +71,7 @@
     "Preferences": "Preferences",
     "preferences_category_player": "Player preferences",
     "preferences_video_loop_label": "Always loop: ",
+    "preferences_preload_label": "Preload video data: ",
     "preferences_autoplay_label": "Autoplay: ",
     "preferences_continue_label": "Play next by default: ",
     "preferences_continue_autoplay_label": "Autoplay next video: ",

src/invidious/config.cr

@@ -13,6 +13,7 @@ struct ConfigPreferences
 
   property annotations : Bool = false
   property annotations_subscribed : Bool = false
+  property preload : Bool = true
   property autoplay : Bool = false
   property captions : Array(String) = ["", "", ""]
   property comments : Array(String) = ["youtube", ""]

src/invidious/routes/preferences.cr

@@ -27,6 +27,10 @@ module Invidious::Routes::PreferencesRoute
     annotations_subscribed ||= "off"
     annotations_subscribed = annotations_subscribed == "on"
 
+    preload = env.params.body["preload"]?.try &.as(String)
+    preload ||= "off"
+    preload = preload == "on"
+
     autoplay = env.params.body["autoplay"]?.try &.as(String)
     autoplay ||= "off"
     autoplay = autoplay == "on"
@@ -144,6 +148,7 @@ module Invidious::Routes::PreferencesRoute
     preferences = Preferences.from_json({
       annotations:                 annotations,
       annotations_subscribed:      annotations_subscribed,
+      preload:                     preload,
       autoplay:                    autoplay,
       captions:                    captions,
       comments:                    comments,

src/invidious/user/preferences.cr

@@ -4,6 +4,7 @@ struct Preferences
 
   property annotations : Bool = CONFIG.default_user_preferences.annotations
   property annotations_subscribed : Bool = CONFIG.default_user_preferences.annotations_subscribed
+  property preload : Bool = CONFIG.default_user_preferences.preload
   property autoplay : Bool = CONFIG.default_user_preferences.autoplay
   property automatic_instance_redirect : Bool = CONFIG.default_user_preferences.automatic_instance_redirect
 

src/invidious/videos/video_preferences.cr

@@ -2,6 +2,7 @@ struct VideoPreferences
   include JSON::Serializable
 
   property annotations : Bool
+  property preload : Bool
   property autoplay : Bool
   property comments : Array(String)
   property continue : Bool
@@ -28,6 +29,7 @@ end
 
 def process_video_params(query, preferences)
   annotations = query["iv_load_policy"]?.try &.to_i?
+  preload = query["preload"]?.try { |q| (q == "true" || q == "1").to_unsafe }
   autoplay = query["autoplay"]?.try { |q| (q == "true" || q == "1").to_unsafe }
   comments = query["comments"]?.try &.split(",").map(&.downcase)
   continue = query["continue"]?.try { |q| (q == "true" || q == "1").to_unsafe }
@@ -50,6 +52,7 @@ def process_video_params(query, preferences)
   if preferences
     # region ||= preferences.region
     annotations ||= preferences.annotations.to_unsafe
+    preload ||= preferences.preload.to_unsafe
     autoplay ||= preferences.autoplay.to_unsafe
     comments ||= preferences.comments
     continue ||= preferences.continue.to_unsafe
@@ -70,6 +73,7 @@ def process_video_params(query, preferences)
   end
 
   annotations ||= CONFIG.default_user_preferences.annotations.to_unsafe
+  preload ||= CONFIG.default_user_preferences.preload.to_unsafe
   autoplay ||= CONFIG.default_user_preferences.autoplay.to_unsafe
   comments ||= CONFIG.default_user_preferences.comments
   continue ||= CONFIG.default_user_preferences.continue.to_unsafe
@@ -89,6 +93,7 @@ def process_video_params(query, preferences)
   save_player_pos ||= CONFIG.default_user_preferences.save_player_pos.to_unsafe
 
   annotations = annotations == 1
+  preload = preload == 1
   autoplay = autoplay == 1
   continue = continue == 1
   continue_autoplay = continue_autoplay == 1
@@ -128,6 +133,7 @@ def process_video_params(query, preferences)
 
   params = VideoPreferences.new({
     annotations:        annotations,
+    preload:            preload,
     autoplay:           autoplay,
     comments:           comments,
     continue:           continue,

src/invidious/views/components/player.ecr

@@ -1,5 +1,6 @@
 <video style="outline:none;width:100%;background-color:#000" playsinline poster="<%= thumbnail %>"
     id="player" class="on-video_player video-js player-style-<%= params.player_style %>"
+    preload="<% if params.preload %>auto<% else %>none<% end %>"
     <% if params.autoplay %>autoplay<% end %>
     <% if params.video_loop %>loop<% end %>
     <% if params.controls %>controls<% end %>>

src/invidious/views/user/preferences.ecr

@@ -12,6 +12,11 @@
                 <input name="video_loop" id="video_loop" type="checkbox" <% if preferences.video_loop %>checked<% end %>>
             </div>
 
+            <div class="pure-control-group">
+                <label for="preload"><%= translate(locale, "preferences_preload_label") %></label>
+                <input name="preload" id="preload" type="checkbox" <% if preferences.preload %>checked<% end %>>
+            </div>
+
             <div class="pure-control-group">
                 <label for="autoplay"><%= translate(locale, "preferences_autoplay_label") %></label>
                 <input name="autoplay" id="autoplay" type="checkbox" <% if preferences.autoplay %>checked<% end %>>