feat(ReactPlayer): video aspect ratio & object-fit (#1019)

* feat(ReactPlayer): video aspect ratio & object-fit

* fix: schemas

Author: PahaN47

src/components/Media/Video/Video.tsx

@@ -85,6 +85,7 @@ const Video = (props: VideoAllProps) => {
             playButton,
             ariaLabel,
             customControlsOptions,
+            contain,
         } = video;
 
         return (
@@ -104,7 +105,9 @@ const Video = (props: VideoAllProps) => {
                 height={height}
                 ariaLabel={ariaLabel}
                 customControlsOptions={customControlsOptions}
-                ratio={ratio}
+                ratio={ratio === 'auto' ? undefined : ratio}
+                autoRatio={ratio === 'auto'}
+                contain={contain}
             />
         );
     }, [

src/components/ReactPlayer/ReactPlayer.scss

@@ -4,6 +4,11 @@
 $block: '.#{$ns}ReactPlayer';
 
 #{$block} {
+    video {
+        background-color: var(--pc-color-video-player-bg, $videoPlayerBg);
+        object-fit: cover;
+    }
+
     &__wrapper {
         position: relative;
         // Player ratio: 100 / (1280 / 720)
@@ -67,6 +72,10 @@ $block: '.#{$ns}ReactPlayer';
         }
     }
 
+    &_contain video {
+        object-fit: contain;
+    }
+
     @media only screen and (max-width: map-get($gridBreakpoints, 'sm')) {
         &__button_text {
             font-size: 20px;

src/components/ReactPlayer/ReactPlayer.tsx

@@ -59,6 +59,7 @@ export interface ReactPlayerBlockProps
     onClickPreview?: () => void;
     height?: number;
     ratio?: number;
+    autoRatio?: boolean;
     children?: React.ReactNode;
 }
 
@@ -87,6 +88,8 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
             height,
             ariaLabel,
             ratio,
+            autoRatio,
+            contain,
         } = props;
 
         const {
@@ -113,6 +116,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
         const [playedPercent, setPlayedPercent] = useState<number>(0);
         const [currentHeight, setCurrentHeight] = useState(height);
         const [width, setWidth] = useState<number>(0);
+        const [actualRatio, setActualRatio] = useState<number>();
         const [muted, setMuted] = useState<boolean>(mute);
         const [started, setStarted] = useState(autoPlay);
         const [ended, setEnded] = useState<boolean>(false);
@@ -202,7 +206,11 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
                         parseFloat(paddingRight);
 
                     setWidth(newWidth);
-                    setCurrentHeight(Math.floor(getHeight(newWidth, ratio)));
+                    setCurrentHeight(
+                        Math.floor(
+                            getHeight(newWidth, ratio ?? (autoRatio ? actualRatio : undefined)),
+                        ),
+                    );
                 }
             }, 200);
 
@@ -211,7 +219,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
             return () => {
                 window.removeEventListener('resize', updateSize);
             };
-        }, [ratio]);
+        }, [actualRatio, autoRatio, ratio]);
 
         const playEvents = useMemo(
             () => eventsArray?.filter((e: AnalyticsEvent) => e.type === PredefinedEventTypes.Play),
@@ -317,6 +325,16 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
             }
         }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);
 
+        const onReady = useCallback((player: ReactPlayer) => {
+            setPlayerRef(player);
+            const videoElement = player.getInternalPlayer();
+            const videoWidth = videoElement.videoWidth as number | undefined;
+            const videoHeight = videoElement.videoHeight as number | undefined;
+            if (videoWidth && videoHeight) {
+                setActualRatio(videoHeight / videoWidth);
+            }
+        }, []);
+
         const onProgress = useCallback((progress: PlayerPropgress) => {
             setPlayedPercent(progress.played);
 
@@ -365,6 +383,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
                     {
                         wrapper: !currentHeight,
                         controls,
+                        contain,
                     },
                     className,
                 )}
@@ -390,7 +409,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
                             progressInterval={FPS}
                             onClickPreview={handleClickPreview}
                             onStart={onStart}
-                            onReady={setPlayerRef}
+                            onReady={onReady}
                             onPlay={onPlay}
                             onPause={
                                 autoPlay && customControlsType !== CustomControlsType.WithMuteButton

src/models/constructor-items/common.ts

@@ -176,6 +176,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     controls?: MediaVideoControlsType;
     customControlsOptions?: CustomControlsOptions;
     ariaLabel?: string;
+    contain?: boolean;
 }
 
 // links
@@ -248,7 +249,7 @@ export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
-    ratio?: number;
+    ratio?: number | 'auto';
     previewImg?: string;
 }
 

src/schema/validators/common.ts

@@ -184,6 +184,9 @@ export const VideoProps = {
         ariaLabel: {
             type: 'string',
         },
+        contain: {
+            type: 'boolean',
+        },
     },
 };
 
@@ -624,7 +627,8 @@ export const MediaProps = {
         anyOf: [AnalyticsEventSchema, {type: 'array', items: AnalyticsEventSchema}],
     },
     ratio: {
-        type: 'number',
+        type: ['number', 'string'],
+        pattern: '^auto$',
     },
     iframe: {
         ...IframeProps,

styles/variables.scss

@@ -37,6 +37,7 @@ $animationDuration: 300ms;
 
 //colors
 $videoPlayButtonGrey: #eff2f8;
+$videoPlayerBg: #000;
 $secondary: var(--g-color-text-secondary);
 $lightSecondary: var(--g-color-text-light-secondary);