diff --git a/src/components/apphost.js b/src/components/apphost.js index e468ce161d..eeef967eb7 100644 --- a/src/components/apphost.js +++ b/src/components/apphost.js @@ -39,6 +39,25 @@ function getDeviceProfile(item) { profile = profileBuilder(builderOpts); } + const maxTranscodingVideoWidth = appHost.screen()?.maxAllowedWidth; + + if (maxTranscodingVideoWidth) { + profile.TranscodingProfiles.forEach((transcodingProfile) => { + if (transcodingProfile.Type === 'Video') { + transcodingProfile.Conditions = (transcodingProfile.Conditions || []).filter((condition) => { + return condition.Property !== 'Width'; + }); + + transcodingProfile.Conditions.push({ + Condition: 'LessThanEqual', + Property: 'Width', + Value: maxTranscodingVideoWidth.toString(), + IsRequired: false + }); + } + }); + } + resolve(profile); }); } @@ -382,6 +401,27 @@ export const appHost = { const att = scalable ? 'width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes' : 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'; document.querySelector('meta[name=viewport]').setAttribute('content', att); } + }, + screen: () => { + let hostScreen = null; + + const appHostImpl = window.NativeShell?.AppHost; + + if (appHostImpl?.screen) { + hostScreen = appHostImpl.screen(); + } else if (window.screen && !browser.tv) { + hostScreen = { + width: Math.floor(window.screen.width * window.devicePixelRatio), + height: Math.floor(window.screen.height * window.devicePixelRatio) + }; + } + + if (hostScreen) { + // Use larger dimension to account for screen orientation changes + hostScreen.maxAllowedWidth = Math.max(hostScreen.width, hostScreen.height); + } + + return hostScreen; } }; diff --git a/src/components/qualityOptions.js b/src/components/qualityOptions.js index bdf20e279a..a185a5f5fa 100644 --- a/src/components/qualityOptions.js +++ b/src/components/qualityOptions.js @@ -1,3 +1,4 @@ +import { appHost } from '../components/apphost'; import globalize from '../scripts/globalize'; export function getVideoQualityOptions(options) { @@ -11,6 +12,7 @@ export function getVideoQualityOptions(options) { videoWidth = videoHeight * (16 / 9); } + const hostScreenWidth = appHost.screen()?.maxAllowedWidth || 4096; const maxAllowedWidth = videoWidth || 4096; const qualityOptions = []; @@ -26,19 +28,19 @@ export function getVideoQualityOptions(options) { } // Quality options are indexed by bitrate. If you must duplicate them, make sure each of them are unique (by making the last digit a 1) - if (maxAllowedWidth >= 3800) { + if (maxAllowedWidth >= 3800 && hostScreenWidth >= 1930) { qualityOptions.push({ name: '4K - 120 Mbps', maxHeight: 2160, bitrate: 120000000 }); qualityOptions.push({ name: '4K - 80 Mbps', maxHeight: 2160, bitrate: 80000000 }); } // Some 1080- videos are reported as 1912? - if (maxAllowedWidth >= 1900) { + if (maxAllowedWidth >= 1900 && hostScreenWidth >= 1290) { qualityOptions.push({ name: '1080p - 60 Mbps', maxHeight: 1080, bitrate: 60000000 }); qualityOptions.push({ name: '1080p - 40 Mbps', maxHeight: 1080, bitrate: 40000000 }); qualityOptions.push({ name: '1080p - 20 Mbps', maxHeight: 1080, bitrate: 20000000 }); qualityOptions.push({ name: '1080p - 15 Mbps', maxHeight: 1080, bitrate: 15000000 }); qualityOptions.push({ name: '1080p - 10 Mbps', maxHeight: 1080, bitrate: 10000000 }); } - if (maxAllowedWidth >= 1260) { + if (maxAllowedWidth >= 1260 && hostScreenWidth >= 650) { qualityOptions.push({ name: '720p - 8 Mbps', maxHeight: 720, bitrate: 8000000 }); qualityOptions.push({ name: '720p - 6 Mbps', maxHeight: 720, bitrate: 6000000 }); qualityOptions.push({ name: '720p - 4 Mbps', maxHeight: 720, bitrate: 4000000 });