From 0ed16a04b2cb50b01c6b146dc465ca9489f46492 Mon Sep 17 00:00:00 2001
From: gnattu <gnattuoc@me.com>
Date: Sat, 10 Aug 2024 21:00:48 +0800
Subject: [PATCH] Add user-configurable switch for hi10p on safari

---
 src/components/playbackSettings/playbackSettings.js |  8 ++++++++
 .../playbackSettings/playbackSettings.template.html |  8 ++++++++
 src/scripts/browserDeviceProfile.js                 |  2 +-
 src/scripts/settings/appSettings.js                 | 13 +++++++++++++
 src/strings/en-us.json                              |  2 ++
 5 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/playbackSettings/playbackSettings.js b/src/components/playbackSettings/playbackSettings.js
index ba418b96c4..166941cdf7 100644
--- a/src/components/playbackSettings/playbackSettings.js
+++ b/src/components/playbackSettings/playbackSettings.js
@@ -1,5 +1,6 @@
 import appSettings from '../../scripts/settings/appSettings';
 import { appHost } from '../apphost';
+import browser from '../../scripts/browser';
 import focusManager from '../focusManager';
 import qualityoptions from '../qualityOptions';
 import globalize from '../../scripts/globalize';
@@ -143,6 +144,10 @@ function loadForm(context, user, userSettings, systemInfo, apiClient) {
 
     showHideQualityFields(context, user, apiClient);
 
+    if (browser.safari) {
+        context.querySelector('.enableHi10pSection').classList.remove('hide');
+    }
+
     context.querySelector('#selectAllowedAudioChannels').value = userSettings.allowedAudioChannels();
 
     apiClient.getCultures().then(allCultures => {
@@ -175,6 +180,7 @@ function loadForm(context, user, userSettings, systemInfo, apiClient) {
     context.querySelector('.chkPreferFmp4HlsContainer').checked = userSettings.preferFmp4HlsContainer();
     context.querySelector('.chkEnableDts').checked = appSettings.enableDts();
     context.querySelector('.chkEnableTrueHd').checked = appSettings.enableTrueHd();
+    context.querySelector('.chkEnableHi10p').checked = appSettings.enableHi10p();
     context.querySelector('.chkEnableCinemaMode').checked = userSettings.enableCinemaMode();
     context.querySelector('#selectAudioNormalization').value = userSettings.selectAudioNormalization();
     context.querySelector('.chkEnableNextVideoOverlay').checked = userSettings.enableNextVideoInfoOverlay();
@@ -225,6 +231,8 @@ function saveUser(context, user, userSettingsInstance, apiClient) {
     appSettings.enableDts(context.querySelector('.chkEnableDts').checked);
     appSettings.enableTrueHd(context.querySelector('.chkEnableTrueHd').checked);
 
+    appSettings.enableHi10p(context.querySelector('.chkEnableHi10p').checked);
+
     setMaxBitrateFromField(context.querySelector('.selectVideoInNetworkQuality'), true, 'Video');
     setMaxBitrateFromField(context.querySelector('.selectVideoInternetQuality'), false, 'Video');
     setMaxBitrateFromField(context.querySelector('.selectMusicInternetQuality'), false, 'Audio');
diff --git a/src/components/playbackSettings/playbackSettings.template.html b/src/components/playbackSettings/playbackSettings.template.html
index 2de92d8fb6..22109c5f59 100644
--- a/src/components/playbackSettings/playbackSettings.template.html
+++ b/src/components/playbackSettings/playbackSettings.template.html
@@ -180,6 +180,14 @@
             <div class="fieldDescription checkboxFieldDescription">${EnableTrueHdHelp}</div>
         </div>
 
+        <div class="enableHi10pSection checkboxContainer checkboxContainer-withDescription fldEnableDts hide">
+             <label>
+                 <input type="checkbox" is="emby-checkbox" class="chkEnableHi10p" />
+                 <span>${EnableHi10p}</span>
+             </label>
+             <div class="fieldDescription checkboxFieldDescription">${EnableHi10pHelp}</div>
+        </div>
+
         <div class="selectContainer">
             <select is="emby-select" id="selectPreferredTranscodeVideoCodec" label="${LabelSelectPreferredTranscodeVideoCodec}">
                 <option value="">${Auto}</option>
diff --git a/src/scripts/browserDeviceProfile.js b/src/scripts/browserDeviceProfile.js
index ba9530ea83..ec7b341fc7 100644
--- a/src/scripts/browserDeviceProfile.js
+++ b/src/scripts/browserDeviceProfile.js
@@ -1281,7 +1281,7 @@ export default function (options) {
         });
     }
 
-    if (browser.safari && browser.version >= 17.5) {
+    if (browser.safari && appSettings.enableHi10p()) {
         profile.CodecProfiles.push({
             Type: 'Video',
             Container: 'hls',
diff --git a/src/scripts/settings/appSettings.js b/src/scripts/settings/appSettings.js
index 11400a2e2e..07c028850d 100644
--- a/src/scripts/settings/appSettings.js
+++ b/src/scripts/settings/appSettings.js
@@ -182,6 +182,19 @@ class AppSettings {
         return toBoolean(this.get('enableTrueHd'), false);
     }
 
+    /**
+     * Get or set 'Enable H.264 High 10 Profile' state.
+     * @param {boolean|undefined} val - Flag to enable 'Enable H.264 High 10 Profile' or undefined.
+     * @return {boolean} 'Enable H.264 High 10 Profile' state.
+     */
+    enableHi10p(val) {
+        if (val !== undefined) {
+            return this.set('enableHi10p', val.toString());
+        }
+
+        return toBoolean(this.get('enableHi10p'), false);
+    }
+
     set(name, value, userId) {
         const currentValue = this.get(name, userId);
         localStorage.setItem(this.#getKey(name, userId), value);
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index 12023468eb..ab21ebb818 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -260,6 +260,8 @@
     "EnableFasterAnimations": "Faster animations",
     "EnableFasterAnimationsHelp": "Use faster animations and transitions.",
     "EnableHardwareEncoding": "Enable hardware encoding",
+    "EnableHi10p": "Enable H.264 High 10 Profile",
+    "EnableHi10pHelp": "Enable to avoid transcoding H.264 10-bit videos. Disable this option if the video displays blank frames.",
     "EnableLibrary": "Enable the library",
     "EnableLibraryHelp": "Disabling the library will hide it from all user views.",
     "EnableNextVideoInfoOverlay": "Show next video info during playback",