From 62b44d218ce09b77b74f36f25d1ec34c07fa67c8 Mon Sep 17 00:00:00 2001
From: gnattu <gnattuoc@me.com>
Date: Sat, 10 Aug 2024 17:33:59 +0800
Subject: [PATCH 1/5] Add support for H264 High 10 Profile on Safari

---
 src/scripts/browserDeviceProfile.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/scripts/browserDeviceProfile.js b/src/scripts/browserDeviceProfile.js
index d4b692dd6a..ba9530ea83 100644
--- a/src/scripts/browserDeviceProfile.js
+++ b/src/scripts/browserDeviceProfile.js
@@ -1281,6 +1281,23 @@ export default function (options) {
         });
     }
 
+    if (browser.safari && browser.version >= 17.5) {
+        profile.CodecProfiles.push({
+            Type: 'Video',
+            Container: 'hls',
+            SubContainer: 'mp4',
+            Codec: 'h264',
+            Conditions: [
+                {
+                   Condition: 'EqualsAny',
+                   Property: 'VideoProfile',
+                   Value: h264Profiles + '|high 10',
+                   IsRequired: false
+                }
+            ]
+        });
+    }
+
     profile.CodecProfiles.push({
         Type: 'Video',
         Codec: 'hevc',

From 66e5ce330fc68390a1eca08f33022c6fed2e230a Mon Sep 17 00:00:00 2001
From: gnattu <gnattu@users.noreply.github.com>
Date: Sat, 10 Aug 2024 17:51:44 +0800
Subject: [PATCH 2/5] Fix lint

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 src/scripts/browserDeviceProfile.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/scripts/browserDeviceProfile.js b/src/scripts/browserDeviceProfile.js
index ba9530ea83..c93e72535d 100644
--- a/src/scripts/browserDeviceProfile.js
+++ b/src/scripts/browserDeviceProfile.js
@@ -1289,10 +1289,10 @@ export default function (options) {
             Codec: 'h264',
             Conditions: [
                 {
-                   Condition: 'EqualsAny',
-                   Property: 'VideoProfile',
-                   Value: h264Profiles + '|high 10',
-                   IsRequired: false
+                    Condition: 'EqualsAny',
+                    Property: 'VideoProfile',
+                    Value: h264Profiles + '|high 10',
+                    IsRequired: false
                 }
             ]
         });

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 3/5] 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",

From dec593d37ec12261142c7c5ea9a56d99d1456c35 Mon Sep 17 00:00:00 2001
From: gnattu <gnattuoc@me.com>
Date: Sat, 10 Aug 2024 21:52:16 +0800
Subject: [PATCH 4/5] use fldEnableHi10p

---
 src/components/playbackSettings/playbackSettings.js            | 2 +-
 src/components/playbackSettings/playbackSettings.template.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/playbackSettings/playbackSettings.js b/src/components/playbackSettings/playbackSettings.js
index 166941cdf7..3cf27c0a82 100644
--- a/src/components/playbackSettings/playbackSettings.js
+++ b/src/components/playbackSettings/playbackSettings.js
@@ -145,7 +145,7 @@ function loadForm(context, user, userSettings, systemInfo, apiClient) {
     showHideQualityFields(context, user, apiClient);
 
     if (browser.safari) {
-        context.querySelector('.enableHi10pSection').classList.remove('hide');
+        context.querySelector('.fldEnableHi10p').classList.remove('hide');
     }
 
     context.querySelector('#selectAllowedAudioChannels').value = userSettings.allowedAudioChannels();
diff --git a/src/components/playbackSettings/playbackSettings.template.html b/src/components/playbackSettings/playbackSettings.template.html
index 22109c5f59..bc708ee1ec 100644
--- a/src/components/playbackSettings/playbackSettings.template.html
+++ b/src/components/playbackSettings/playbackSettings.template.html
@@ -180,7 +180,7 @@
             <div class="fieldDescription checkboxFieldDescription">${EnableTrueHdHelp}</div>
         </div>
 
-        <div class="enableHi10pSection checkboxContainer checkboxContainer-withDescription fldEnableDts hide">
+        <div class="checkboxContainer checkboxContainer-withDescription fldEnableHi10p hide">
              <label>
                  <input type="checkbox" is="emby-checkbox" class="chkEnableHi10p" />
                  <span>${EnableHi10p}</span>

From 03eb42a8cfc833b7a0df135c835eab19f0f7a1f3 Mon Sep 17 00:00:00 2001
From: gnattu <gnattuoc@me.com>
Date: Mon, 26 Aug 2024 00:12:37 +0800
Subject: [PATCH 5/5] Reorder safari hi10p profile before normal profile

---
 src/scripts/browserDeviceProfile.js | 34 ++++++++++++++---------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/scripts/browserDeviceProfile.js b/src/scripts/browserDeviceProfile.js
index 9607b94c26..ba79a636c8 100644
--- a/src/scripts/browserDeviceProfile.js
+++ b/src/scripts/browserDeviceProfile.js
@@ -1258,6 +1258,23 @@ export default function (options) {
         profile.CodecProfiles.push(codecProfileMp4);
     }
 
+    if (browser.safari && appSettings.enableHi10p()) {
+        profile.CodecProfiles.push({
+            Type: 'Video',
+            Container: 'hls',
+            SubContainer: 'mp4',
+            Codec: 'h264',
+            Conditions: [
+                {
+                    Condition: 'EqualsAny',
+                    Property: 'VideoProfile',
+                    Value: h264Profiles + '|high 10',
+                    IsRequired: false
+                }
+            ]
+        });
+    }
+
     profile.CodecProfiles.push({
         Type: 'Video',
         Codec: 'h264',
@@ -1281,23 +1298,6 @@ export default function (options) {
         });
     }
 
-    if (browser.safari && appSettings.enableHi10p()) {
-        profile.CodecProfiles.push({
-            Type: 'Video',
-            Container: 'hls',
-            SubContainer: 'mp4',
-            Codec: 'h264',
-            Conditions: [
-                {
-                    Condition: 'EqualsAny',
-                    Property: 'VideoProfile',
-                    Value: h264Profiles + '|high 10',
-                    IsRequired: false
-                }
-            ]
-        });
-    }
-
     profile.CodecProfiles.push({
         Type: 'Video',
         Codec: 'hevc',