Added UI Settings > Video Player (Advanced) > Darken Video While Load…

…ing. Added UI Settings > Video Player (Advanced) > Spinner Animation While Loading.
bp2008 · Jul 6, 2024 · c5e4638 · c5e4638
1 parent 35fab51
commit c5e4638
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 0 deletions.
diff --git a/ui3/ui3.css b/ui3/ui3.css
@@ -3514,6 +3514,18 @@ body + div
 	visibility: hidden;
 }
 
+#camimg_loading.disabledBySetting,
+#camimg_false_loading.disabledBySetting
+{
+	background-color: rgba(0,0,0,0);
+}
+
+#camimg_loading_anim.disabledBySetting,
+#camimg_false_loading_anim.disabledBySetting
+{
+	visibility: hidden;
+}
+
 #camimg_false_loading_anim
 {
 	display: block;

diff --git a/ui3/ui3.js b/ui3/ui3.js
@@ -1394,6 +1394,22 @@ var defaultSettings =
 			, hint: "(Default: 1)\n\nJpeg video frames loaded by UI3 will have their dimensions scaled by this amount.\n\nLow values save bandwidth, while high values improve quality slightly."
 			, category: "Video Player (Advanced)"
 		}
+		, {
+			key: "ui3_video_loading_overlay"
+			, value: "1"
+			, inputType: "checkbox"
+			, label: 'Darken Video While Loading'
+			, onChange: OnChange_ui3_video_loading_overlay
+			, category: "Video Player (Advanced)"
+		}
+		, {
+			key: "ui3_video_loading_animation"
+			, value: "1"
+			, inputType: "checkbox"
+			, label: 'Spinner Animation While Loading'
+			, onChange: OnChange_ui3_video_loading_animation
+			, category: "Video Player (Advanced)"
+		}
 		, {
 			key: "ui3_playback_skipDeadAir"
 			, value: 0
@@ -3658,6 +3674,8 @@ $(function ()
 	OnChange_ui3_extra_playback_controls_padding();
 	OnChange_ui3_ir_brightness_contrast();
 	OnChange_ui3_ptzHome();
+	OnChange_ui3_video_loading_overlay();
+	OnChange_ui3_video_loading_animation();
 	OnChange_ui3_sideBarPosition();
 	OnChange_ui3_browserZoomEnabled();
 	OnChange_ui3_showClipListFilterSearch();
@@ -32706,6 +32724,32 @@ function OnChange_ui3_browserZoomEnabled()
 	SetBrowserZoom(settings.ui3_browserZoomEnabled === "1");
 	imageRenderer.onToggleBrowserZoom();
 }
+function OnChange_ui3_video_loading_overlay()
+{
+	if (settings.ui3_video_loading_overlay === "1")
+	{
+		$('#camimg_loading').removeClass('disabledBySetting');
+		$('#camimg_false_loading').removeClass('disabledBySetting');
+	}
+	else
+	{
+		$('#camimg_loading').addClass('disabledBySetting');
+		$('#camimg_false_loading').addClass('disabledBySetting');
+	}
+}
+function OnChange_ui3_video_loading_animation()
+{
+	if (settings.ui3_video_loading_animation === "1")
+	{
+		$('#camimg_loading_anim').removeClass('disabledBySetting');
+		$('#camimg_false_loading_anim').removeClass('disabledBySetting');
+	}
+	else
+	{
+		$('#camimg_loading_anim').addClass('disabledBySetting');
+		$('#camimg_false_loading_anim').addClass('disabledBySetting');
+	}
+}
 function SetBrowserZoom(enable)
 {
 	if (enable)