diff --git a/demo/full/scripts/components/Options/VideoAdaptiveSettings.tsx b/demo/full/scripts/components/Options/VideoAdaptiveSettings.tsx index 7503c8cdbb3..3c570bdacca 100644 --- a/demo/full/scripts/components/Options/VideoAdaptiveSettings.tsx +++ b/demo/full/scripts/components/Options/VideoAdaptiveSettings.tsx @@ -14,18 +14,20 @@ const { Fragment } = React; function VideoAdaptiveSettings({ defaultVideoRepresentationsSwitchingMode, onDefaultVideoRepresentationsSwitchingModeChange, - limitVideoWidth, + videoResolutionLimit, throttleVideoBitrateWhenHidden, - onLimitVideoWidthChange, + onVideoResolutionLimitChange, onThrottleVideoBitrateWhenHiddenChange, }: { defaultVideoRepresentationsSwitchingMode: IVideoRepresentationsSwitchingMode; onDefaultVideoRepresentationsSwitchingModeChange: ( mode: IVideoRepresentationsSwitchingMode ) => void; - limitVideoWidth: boolean; + videoResolutionLimit: "videoElement" | "screen" | "none"; throttleVideoBitrateWhenHidden: boolean; - onLimitVideoWidthChange: (newVal: boolean) => void; + onVideoResolutionLimitChange: ( + newVal: { index: number, value: string} + ) => void; onThrottleVideoBitrateWhenHiddenChange: (newVal: boolean) => void; }): JSX.Element { let defaultVideoRepresentationsSwitchingModeDescMsg; @@ -52,6 +54,19 @@ function VideoAdaptiveSettings({ break; } + let videoResolutionLimitDescMsg; + switch (videoResolutionLimit) { + case "none": + videoResolutionLimitDescMsg = "No limit on the video Representation’s resolution will be automatically applied."; + break; + case "screen": + videoResolutionLimitDescMsg = "The loaded video Representation will be throttled according to the screen’s dimensions."; + break; + case "videoElement": + videoResolutionLimitDescMsg = "The loaded video Representation will be throttled according to the given videoElement’s dimensions."; + break; + } + const onSwitchModeChange = React.useCallback( ({ value }: { value: string }) => { onDefaultVideoRepresentationsSwitchingModeChange( @@ -82,22 +97,23 @@ function VideoAdaptiveSettings({
  • -
    - - Limit Video Width - - - {limitVideoWidth ? - "Limiting video width to the current -
    + + + {videoResolutionLimitDescMsg} +
  • diff --git a/demo/full/scripts/controllers/Settings.tsx b/demo/full/scripts/controllers/Settings.tsx index cba3cb49f2c..fcba612b03e 100644 --- a/demo/full/scripts/controllers/Settings.tsx +++ b/demo/full/scripts/controllers/Settings.tsx @@ -48,7 +48,7 @@ function Settings({ showOptions: boolean; }): JSX.Element | null { const { - limitVideoWidth, + videoResolutionLimit, maxBufferAhead, maxBufferBehind, maxVideoBufferSize, @@ -84,14 +84,20 @@ function Settings({ }); }, [updateLoadVideoOptions]); - const onLimitVideoWidthChange = useCallback((limitVideoWidth: boolean) => { - updatePlayerOptions((prevOptions) => { - if (limitVideoWidth === prevOptions.limitVideoWidth) { - return prevOptions; - } - return Object.assign({}, prevOptions, { limitVideoWidth }); - }); - }, [updatePlayerOptions]); + const onVideoResolutionLimitChange = useCallback( + (videoResolutionLimitArg: { value: string}) => { + updatePlayerOptions((prevOptions) => { + if (videoResolutionLimitArg.value === + prevOptions.videoResolutionLimit) { + return prevOptions; + } + return Object.assign( + {}, + prevOptions, + { videoResolutionLimit: videoResolutionLimitArg.value } + ); + }); + }, [updatePlayerOptions]); const onThrottleVideoBitrateWhenHiddenChange = useCallback(( value: boolean @@ -285,12 +291,12 @@ function Settings({ defaultVideoRepresentationsSwitchingMode={ defaultVideoRepresentationsSwitchingMode } - limitVideoWidth={limitVideoWidth} + videoResolutionLimit={videoResolutionLimit} throttleVideoBitrateWhenHidden={throttleVideoBitrateWhenHidden} onDefaultVideoRepresentationsSwitchingModeChange={ onDefaultVideoRepresentationsSwitchingModeChange } - onLimitVideoWidthChange={onLimitVideoWidthChange} + onVideoResolutionLimitChange={onVideoResolutionLimitChange} onThrottleVideoBitrateWhenHiddenChange={ onThrottleVideoBitrateWhenHiddenChange } diff --git a/demo/full/scripts/lib/defaultOptionsValues.ts b/demo/full/scripts/lib/defaultOptionsValues.ts index 49e21fa07b8..79a55b3f880 100644 --- a/demo/full/scripts/lib/defaultOptionsValues.ts +++ b/demo/full/scripts/lib/defaultOptionsValues.ts @@ -1,6 +1,8 @@ +import type { IConstructorOptions, ILoadVideoOptions } from "../../../../src/public_types"; + const defaultOptionsValues = { player: { - limitVideoWidth: false, + videoResolutionLimit: "none", maxBufferAhead: Infinity, maxBufferBehind: Infinity, maxVideoBufferSize: Infinity, @@ -8,6 +10,7 @@ const defaultOptionsValues = { wantedBufferAhead: 30, }, loadVideo: { + transport: "dash", autoPlay: true, defaultAudioTrackSwitchingMode: "reload", enableFastSwitching: true, @@ -23,7 +26,7 @@ const defaultOptionsValues = { }, onCodecSwitch: "continue", }, -}; +} satisfies { player: IConstructorOptions, loadVideo: ILoadVideoOptions }); export type IConstructorSettings = typeof defaultOptionsValues.player; export type ILoadVideoSettings = typeof defaultOptionsValues.loadVideo;