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;