From ca82669688e466a2288447e5b7c75f961841e894 Mon Sep 17 00:00:00 2001
From: kkmch <kkmch@yandex-team.ru>
Date: Fri, 15 Sep 2023 10:26:42 +0300
Subject: [PATCH] feat: added ratio prop

---
 src/components/Media/Media.tsx                   | 2 ++
 src/components/Media/Video/Video.tsx             | 3 +++
 src/components/ReactPlayer/CustomBarControls.tsx | 2 +-
 src/components/ReactPlayer/ReactPlayer.tsx       | 8 +++++---
 src/models/constructor-items/common.ts           | 1 +
 5 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx
index d065a77d6..06a417ae9 100644
--- 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
index 8d82e00d6..1f4ab5b81 100644
--- 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
index b4fc6c874..c5b7fa1ec 100644
--- 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
index 05c56ce85..182591db3 100644
--- 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
index 73e0a5cca..6ac9e6c16 100644
--- 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;
 }