feat: added ratio prop

gravity-ui · Sep 19, 2023 · ca82669 · ca82669
1 parent 6b9019e
commit ca82669
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 4 deletions.
diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx
@@ -40,6 +40,7 @@ export const Media = (props: MediaAllProps) => {
         playButton,
         customBarControlsClassName,
         qa,
+        ratio,
     } = props;
 
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
@@ -80,6 +81,7 @@ export const Media = (props: MediaAllProps) => {
                 customBarControlsClassName,
                 hasVideoFallback,
                 setHasVideoFallback,
+                ratio,
             };
 
             if (fullscreen) {

diff --git a/src/components/Media/Video/Video.tsx b/src/components/Media/Video/Video.tsx
@@ -41,6 +41,7 @@ const Video = (props: VideoAllProps) => {
         setHasVideoFallback,
         hasVideoFallback,
         qa,
+        ratio,
     } = props;
 
     const qaAttributes = getQaAttrubutes(qa, 'source');
@@ -105,6 +106,7 @@ const Video = (props: VideoAllProps) => {
                 height={height}
                 ariaLabel={ariaLabel}
                 customControlsOptions={customControlsOptions}
+                ratio={ratio}
             />
         );
     }, [
@@ -117,6 +119,7 @@ const Video = (props: VideoAllProps) => {
         customBarControlsClassName,
         metrika,
         analyticsEvents,
+        ratio,
     ]);
 
     const defaultVideoBlock = useMemo(() => {

diff --git a/src/components/ReactPlayer/CustomBarControls.tsx b/src/components/ReactPlayer/CustomBarControls.tsx
@@ -101,7 +101,7 @@ const CustomBarControls = (props: CustomBarControlsProps) => {
                 )}
             </button>
         );
-    }, [elapsedTimePercent, mute, muteIcon, type, unmuteIcon]);
+    }, [elapsedTimePercent, isMuteButtonHidden, mute, muteIcon, type, unmuteIcon]);
 
     const playPauseButton = useMemo(() => {
         const icon = isPaused ? playIcon : pauseIcon;

diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx
@@ -54,6 +54,7 @@ export interface ReactPlayerBlockProps
     showPreview?: boolean;
     onClickPreview?: () => void;
     height?: number;
+    ratio?: number;
     children?: React.ReactNode;
 }
 
@@ -83,6 +84,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
             analyticsEvents,
             height,
             ariaLabel,
+            ratio,
         } = props;
 
         const {
@@ -177,7 +179,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
                         parseFloat(paddingRight);
 
                     setWidth(newWidth);
-                    setCurrentHeight(Math.floor(getHeight(newWidth)));
+                    setCurrentHeight(Math.floor(getHeight(newWidth, ratio)));
                 }
             }, 200);
 
@@ -418,8 +420,8 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
     },
 );
 
-function getHeight(width: number): number {
-    return (width / 16) * 9;
+function getHeight(width: number, ratio: number = 9 / 16): number {
+    return width * ratio;
 }
 
 function getParentElement(element: HTMLElement): HTMLElement {

diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
@@ -233,6 +233,7 @@ export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
+    ratio?: number;
     metrika?: MetrikaVideo;
     previewImg?: string;
 }