demo: change removed property limitVideoWidth to videoResolutionLimit

canalplus · Jan 2, 2024 · 9b058fa · 9b058fa
1 parent e56bcf9
commit 9b058fa
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 33 deletions.
diff --git 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({
         </span>
       </li>
       <li>
-        <div>
-          <Checkbox
-            className="playerOptionsCheckBox playerOptionsCheckBoxTitle"
-            name="limitVideoWidth"
-            ariaLabel="Limit video width option"
-            checked={limitVideoWidth}
-            onChange={onLimitVideoWidthChange}
-          >
-            Limit Video Width
-          </Checkbox>
-          <span className="option-desc">
-            {limitVideoWidth ?
-              "Limiting video width to the current <video> element's width" :
-              "Not limiting video width to the current <video> element's width"}
-          </span>
-        </div>
+        <Select
+          ariaLabel="Select the videoResolutionLimit"
+          className="playerOptionInput"
+          disabled={false}
+          name="videoResolutionLimit"
+          onChange={onVideoResolutionLimitChange}
+          selected={{
+            value: "none",
+            index: undefined,
+          }}
+          options={["videoElement", "screen", "none"]}
+        >
+            Limit Video Resolution
+        </Select>
+        <span className="option-desc">
+          {videoResolutionLimitDescMsg}
+        </span>
       </li>
       <li>
         <div className="playerOptionInput">

diff --git 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
@@ -1,13 +1,16 @@
+import type { IConstructorOptions, ILoadVideoOptions } from "../../../../src/public_types";
+
 const defaultOptionsValues = {
   player: {
-    limitVideoWidth: false,
+    videoResolutionLimit: "none",
     maxBufferAhead: Infinity,
     maxBufferBehind: Infinity,
     maxVideoBufferSize: Infinity,
     throttleVideoBitrateWhenHidden: false,
     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;