Add support for H264 High 10 Profile on Safari

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');

src/components/playbackSettings/playbackSettings.template.html

@@ -180,6 +180,14 @@ <h2 class="sectionTitle">
             <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>

src/scripts/browserDeviceProfile.js

@@ -1281,6 +1281,23 @@ 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',

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);

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",