Merge pull request #5315 from dmitrylyzo/limit-supported-resolution

Add option to limit maximum supported video resolution

src/components/apphost.js

@@ -45,18 +45,27 @@ function getDeviceProfile(item) {
         const maxTranscodingVideoWidth = maxVideoWidth < 0 ? appHost.screen()?.maxAllowedWidth : maxVideoWidth;
 
         if (maxTranscodingVideoWidth) {
+            const conditionWidth = {
+                Condition: 'LessThanEqual',
+                Property: 'Width',
+                Value: maxTranscodingVideoWidth.toString(),
+                IsRequired: false
+            };
+
+            if (appSettings.limitSupportedVideoResolution()) {
+                profile.CodecProfiles.push({
+                    Type: 'Video',
+                    Conditions: [conditionWidth]
+                });
+            }
+
             profile.TranscodingProfiles.forEach((transcodingProfile) => {
                 if (transcodingProfile.Type === 'Video') {
                     transcodingProfile.Conditions = (transcodingProfile.Conditions || []).filter((condition) => {
                         return condition.Property !== 'Width';
                     });
 
-                    transcodingProfile.Conditions.push({
+                    transcodingProfile.Conditions.push(conditionWidth);
-                        Condition: 'LessThanEqual',
-                        Property: 'Width',
-                        Value: maxTranscodingVideoWidth.toString(),
-                        IsRequired: false
-                    });
                 }
             });
         }

src/components/playbackSettings/playbackSettings.js

@@ -179,6 +179,7 @@ function loadForm(context, user, userSettings, systemInfo, apiClient) {
     context.querySelector('.chkRememberAudioSelections').checked = user.Configuration.RememberAudioSelections || false;
     context.querySelector('.chkRememberSubtitleSelections').checked = user.Configuration.RememberSubtitleSelections || false;
     context.querySelector('.chkExternalVideoPlayer').checked = appSettings.enableSystemExternalPlayers();
+    context.querySelector('.chkLimitSupportedVideoResolution').checked = appSettings.limitSupportedVideoResolution();
 
     setMaxBitrateIntoField(context.querySelector('.selectVideoInNetworkQuality'), true, 'Video');
     setMaxBitrateIntoField(context.querySelector('.selectVideoInternetQuality'), false, 'Video');
@@ -194,8 +195,8 @@ function loadForm(context, user, userSettings, systemInfo, apiClient) {
     selectChromecastVersion.innerHTML = ccAppsHtml;
     selectChromecastVersion.value = user.Configuration.CastReceiverId;
 
-    const selectLabelMaxVideoWidth = context.querySelector('.selectLabelMaxVideoWidth');
+    const selectMaxVideoWidth = context.querySelector('.selectMaxVideoWidth');
-    selectLabelMaxVideoWidth.value = appSettings.maxVideoWidth();
+    selectMaxVideoWidth.value = appSettings.maxVideoWidth();
 
     const selectSkipForwardLength = context.querySelector('.selectSkipForwardLength');
     fillSkipLengths(selectSkipForwardLength);
@@ -212,7 +213,8 @@ function saveUser(context, user, userSettingsInstance, apiClient) {
     appSettings.enableSystemExternalPlayers(context.querySelector('.chkExternalVideoPlayer').checked);
 
     appSettings.maxChromecastBitrate(context.querySelector('.selectChromecastVideoQuality').value);
-    appSettings.maxVideoWidth(context.querySelector('.selectLabelMaxVideoWidth').value);
+    appSettings.maxVideoWidth(context.querySelector('.selectMaxVideoWidth').value);
+    appSettings.limitSupportedVideoResolution(context.querySelector('.chkLimitSupportedVideoResolution').checked);
 
     setMaxBitrateFromField(context.querySelector('.selectVideoInNetworkQuality'), true, 'Video');
     setMaxBitrateFromField(context.querySelector('.selectVideoInternetQuality'), false, 'Video');
@@ -309,7 +311,7 @@ function embed(options, self) {
         options.element.querySelector('.btnSave').classList.remove('hide');
     }
 
-    options.element.querySelector('.selectLabelMaxVideoWidth').addEventListener('change', onMaxVideoWidthChange.bind(self));
+    options.element.querySelector('.selectMaxVideoWidth').addEventListener('change', onMaxVideoWidthChange.bind(self));
 
     self.loadData();
 

src/components/playbackSettings/playbackSettings.template.html

@@ -43,7 +43,7 @@
             </div>
 
             <div class="selectContainer">
-                <select is="emby-select" class="selectLabelMaxVideoWidth" label="${LabelMaxVideoResolution}">
+                <select is="emby-select" class="selectMaxVideoWidth" label="${LabelMaxVideoResolution}">
                     <option value="0">${Auto}</option>
                     <option value="-1">${ScreenResolution}</option>
                     <option value="640">360p</option>
@@ -54,6 +54,14 @@
                     <option value="7680">8K</option>
                 </select>
             </div>
+
+            <div class="checkboxContainer checkboxContainer-withDescription">
+                <label>
+                    <input type="checkbox" is="emby-checkbox" class="chkLimitSupportedVideoResolution" />
+                    <span>${LimitSupportedVideoResolution}</span>
+                </label>
+                <div class="fieldDescription checkboxFieldDescription">${LimitSupportedVideoResolutionHelp}</div>
+            </div>
         </div>
 
         <div class="verticalSection verticalSection-extrabottompadding musicQualitySection hide">

src/scripts/settings/appSettings.js

@@ -119,6 +119,19 @@ class AppSettings {
         return parseInt(this.get('maxVideoWidth') || '0', 10) || 0;
     }
 
+    /**
+     * Get or set 'Limit maximum supported video resolution' state.
+     * @param {boolean|undefined} val - Flag to enable 'Limit maximum supported video resolution' or undefined.
+     * @return {boolean} 'Limit maximum supported video resolution' state.
+     */
+    limitSupportedVideoResolution(val) {
+        if (val !== undefined) {
+            return this.set('limitSupportedVideoResolution', val.toString());
+        }
+
+        return toBoolean(this.get('limitSupportedVideoResolution'), false);
+    }
+
     set(name, value, userId) {
         const currentValue = this.get(name, userId);
         localStorage.setItem(this.#getKey(name, userId), value);

src/strings/en-us.json

@@ -937,6 +937,8 @@
     "LearnHowYouCanContribute": "Learn how you can contribute.",
     "LeaveBlankToNotSetAPassword": "You can leave this field blank to set no password.",
     "LibraryAccessHelp": "Select the libraries to share with this user. Administrators will be able to edit all folders using the metadata manager.",
+    "LimitSupportedVideoResolution": "Limit maximum supported video resolution",
+    "LimitSupportedVideoResolutionHelp": "Use 'Maximum Allowed Video Transcoding Resolution' as maximum supported video resolution.",
     "List": "List",
     "ListView": "List View",
     "ListPaging": "{0}-{1} of {2}",