Add option to control preloading of video data

Fix #4110 by adding an option to control the preloading of video data on
page load. If disabled ("false"), the browser will not preload any video
data until the user explicitly hits the "Play" button.

If enabled ("true"), the default behavior will be used, which means the
browser decides how much of the video will be preloaded.

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: {
@@ -35,6 +34,10 @@ if (player_data.aspect_ratio) {
     options.aspectRatio = player_data.aspect_ratio;
 }
 
+if (player_data.preload) {
+    options.preload = player_data.preload
+}
+
 var embed_url = new URL(location);
 embed_url.searchParams.delete('v');
 var short_url = location.origin + '/' + video_data.id + embed_url.search;

config/config.example.yml

@@ -718,6 +718,20 @@ default_user_preferences:
   #  Video player behavior
   # -----------------------------
 
+  ##
+  ## Automatically preload video on page load. This option controls the
+  ## value for the "preload" attribute of the HTML5 <video> element.
+  ##
+  ## If disabled, no video data will be loaded until the user explicitly
+  ## starts the video by hitting the "Play" button. If enabled, the web
+  ## browser decides how much of the video data will be preloaded.
+  ##
+  ## 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

@@ -65,6 +65,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 %>>
@@ -73,7 +74,8 @@
     "title" => video.title,
     "description" => HTML.escape(video.short_description),
     "thumbnail" => thumbnail,
-    "preferred_caption_found" => !preferred_captions.empty?
+    "preferred_caption_found" => !preferred_captions.empty?,
+    "preload" => params.preload ? "auto" : "none"
 }.to_pretty_json
 %>
 </script>

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 %>>