From bf470704a5a3071cebb1d558efaef8542a16dde6 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Tue, 26 Sep 2023 21:45:52 +0200
Subject: [PATCH 1/3] 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                       |  5 ++++-
 config/config.example.yml                 | 14 ++++++++++++++
 locales/de.json                           |  1 +
 locales/en-US.json                        |  1 +
 src/invidious/config.cr                   |  1 +
 src/invidious/routes/preferences.cr       |  5 +++++
 src/invidious/user/preferences.cr         |  1 +
 src/invidious/videos/video_preferences.cr |  6 ++++++
 src/invidious/views/components/player.ecr |  4 +++-
 src/invidious/views/user/preferences.ecr  |  5 +++++
 10 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/assets/js/player.js b/assets/js/player.js
index bb53ac24d..398c66f8e 100644
--- a/assets/js/player.js
+++ b/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;
diff --git a/config/config.example.yml b/config/config.example.yml
index b44fcc0e0..b1a76edf9 100644
--- a/config/config.example.yml
+++ b/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.
   ##
diff --git a/locales/de.json b/locales/de.json
index 6ceaa44b5..1bdc5cf48 100644
--- a/locales/de.json
+++ b/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: ",
diff --git a/locales/en-US.json b/locales/en-US.json
index 06d095dcf..4e2fbd9c4 100644
--- a/locales/en-US.json
+++ b/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: ",
diff --git a/src/invidious/config.cr b/src/invidious/config.cr
index 429d92464..944766418 100644
--- a/src/invidious/config.cr
+++ b/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", ""]
diff --git a/src/invidious/routes/preferences.cr b/src/invidious/routes/preferences.cr
index abe0f34e3..fb7ae7953 100644
--- a/src/invidious/routes/preferences.cr
+++ b/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,
diff --git a/src/invidious/user/preferences.cr b/src/invidious/user/preferences.cr
index b30594036..0a8525f36 100644
--- a/src/invidious/user/preferences.cr
+++ b/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
 
diff --git a/src/invidious/videos/video_preferences.cr b/src/invidious/videos/video_preferences.cr
index 34cf7ff04..48177bd88 100644
--- a/src/invidious/videos/video_preferences.cr
+++ b/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,
diff --git a/src/invidious/views/components/player.ecr b/src/invidious/views/components/player.ecr
index c3c02df07..f72fd9de7 100644
--- a/src/invidious/views/components/player.ecr
+++ b/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>
diff --git a/src/invidious/views/user/preferences.ecr b/src/invidious/views/user/preferences.ecr
index 55349c5a2..23fdd0928 100644
--- a/src/invidious/views/user/preferences.ecr
+++ b/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 %>>

From 824cc1a5aa6321936357677e77b6638c96137225 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Wed, 27 Sep 2023 15:25:29 +0200
Subject: [PATCH 2/3] Don't redefine the "preload" option in player.js

If the HTML5 "<video>" element defines the "preload" attribute directly,
it isn't necessary to redefine the "preload" option in the player.js.
---
 assets/js/player.js                       | 4 ----
 src/invidious/views/components/player.ecr | 3 +--
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/assets/js/player.js b/assets/js/player.js
index 398c66f8e..7c920400a 100644
--- a/assets/js/player.js
+++ b/assets/js/player.js
@@ -34,10 +34,6 @@ 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;
diff --git a/src/invidious/views/components/player.ecr b/src/invidious/views/components/player.ecr
index f72fd9de7..5c28358b4 100644
--- a/src/invidious/views/components/player.ecr
+++ b/src/invidious/views/components/player.ecr
@@ -74,8 +74,7 @@
     "title" => video.title,
     "description" => HTML.escape(video.short_description),
     "thumbnail" => thumbnail,
-    "preferred_caption_found" => !preferred_captions.empty?,
-    "preload" => params.preload ? "auto" : "none"
+    "preferred_caption_found" => !preferred_captions.empty?
 }.to_pretty_json
 %>
 </script>

From f247b2f8625c05ca308bb4a83caecc5b27726854 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Fri, 30 Aug 2024 19:52:33 +0200
Subject: [PATCH 3/3] Update config/config.example.yml

Accept suggested change from @SamantazFox.

Co-authored-by: Samantaz Fox <coding@samantaz.fr>
---
 config/config.example.yml | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/config/config.example.yml b/config/config.example.yml
index b1a76edf9..71d9a2744 100644
--- a/config/config.example.yml
+++ b/config/config.example.yml
@@ -719,17 +719,19 @@ default_user_preferences:
   # -----------------------------
 
   ##
-  ## Automatically preload video on page load. This option controls the
-  ## value for the "preload" attribute of the HTML5 <video> element.
+  ## This option controls the value of the HTML5 <video> element's
+  ## "preload" attribute.
   ##
-  ## 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.
+  ## 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
 
   ##