Merge pull request #71 from gravity-ui/yuberdysheva/fix-player-height

fix(Tabs): player video height

Author: Juli Ovechkina

src/blocks/Media/__stories__/Media.stories.tsx

@@ -9,7 +9,7 @@ import {
     MediaProps,
 } from '../../../models';
 import Media from '../Media';
-import {PageConstructor} from '../../../containers/PageConstructor/PageConstructor';
+import {PageConstructor} from '../../../containers/PageConstructor';
 
 import data from './data.json';
 
@@ -133,7 +133,10 @@ const DefaultArgs = {
 };
 
 Default.args = DefaultArgs as MediaBlockProps;
-ImageSlider.args = DefaultArgs as MediaBlockProps;
+ImageSlider.args = {
+    ...DefaultArgs,
+    ...data.imageSlider.content,
+} as MediaBlockProps;
 Video.args = DefaultArgs as MediaBlockProps;
 DataLens.args = {
     ...DefaultArgs,

src/blocks/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, {Fragment, useContext, useState} from 'react';
+import React, {Fragment, useContext, useRef, useState} from 'react';
 
 import {block, getThemedValue} from '../../utils';
 import {Row, Col, GridColumnOrderClasses} from '../../grid';
@@ -11,6 +11,7 @@ import {ThemeValueContext} from '../../context/theme/ThemeValueContext';
 import {getMediaImage} from '../../components/Media/Image/utils';
 import ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';
 import {Content} from '../../sub-blocks';
+import {getHeight} from '../../components/VideoBlock/VideoBlock';
 
 import './Tabs.scss';
 
@@ -31,6 +32,9 @@ export const TabsBlock = ({
     const tabs: ButtonTabsItemProps[] = items.map(({tabName}) => ({title: tabName, id: tabName}));
     const activeTabData = items.find(({tabName}) => tabName === activeTab);
     const isReverse = direction === 'content-media';
+    const ref = useRef<HTMLDivElement>(null);
+    const mediaWidth = ref?.current?.offsetWidth;
+    const mediaHeight = mediaWidth && getHeight(mediaWidth);
 
     let imageProps;
 
@@ -78,14 +82,17 @@ export const TabsBlock = ({
             }}
             className={b('col', {centered: centered})}
         >
-            {activeTabData?.media && (
-                <Media
-                    {...getThemedValue(activeTabData.media, theme)}
-                    key={activeTab}
-                    className={b('media')}
-                    playVideo={play}
-                />
-            )}
+            <div ref={ref}>
+                {activeTabData?.media && (
+                    <Media
+                        {...getThemedValue(activeTabData.media, theme)}
+                        key={activeTab}
+                        className={b('media')}
+                        playVideo={play}
+                        height={mediaHeight}
+                    />
+                )}
+            </div>
             {imageProps && (
                 <Fragment>
                     <FullScreenImage {...imageProps} imageClassName={b('image')} />

src/components/Media/Media.tsx

@@ -84,6 +84,7 @@ export const Media = (props: MediaAllProps) => {
                     record={youtube}
                     attributes={{color: 'white', rel: '0'}}
                     previewImg={previewImg}
+                    height={height}
                 />
             );
         }

src/components/Media/Video/Video.tsx

@@ -79,16 +79,18 @@ const Video = (props: VideoAllProps) => {
                 playButton={playButton || commonPlayButton}
                 customBarControlsClassName={customBarControlsClassName}
                 metrika={metrika}
+                height={height}
             />
         );
     }, [
         video,
-        metrika,
+        height,
+        videoClassName,
         previewImg,
         playVideo,
-        videoClassName,
         commonPlayButton,
         customBarControlsClassName,
+        metrika,
     ]);
 
     const defaultVideoBlock = useMemo(() => {

src/components/ReactPlayer/ReactPlayer.tsx

@@ -42,6 +42,7 @@ export interface ReactPlayerBlockProps
     customBarControlsClassName?: string;
     showPreview?: boolean;
     onClickPreview?: () => void;
+    height?: number;
     children?: React.ReactNode;
 }
 
@@ -67,6 +68,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
             showPreview,
             onClickPreview,
             metrika: videoMetrika,
+            height,
         } = props;
 
         const {
@@ -86,7 +88,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
         const [playerRef, setPlayerRef] = useState<ReactPlayer>();
         const [isPlaying, setIsPlaying] = useState(autoPlay);
         const [playedPercent, setPlayedPercent] = useState<number>(0);
-        const [height, setHeight] = useState<number>(0);
+        const [currentHeight, setCurrentHeight] = useState(height);
         const [width, setWidth] = useState<number>(0);
         const [muted, setMuted] = useState<boolean>(mute);
         const [started, setStarted] = useState(autoPlay);
@@ -141,7 +143,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
                         parseFloat(paddingRight);
 
                     setWidth(newWidth);
-                    setHeight(Math.floor(getHeight(newWidth)));
+                    setCurrentHeight(Math.floor(getHeight(newWidth)));
                 }
             }, 200);
 
@@ -292,13 +294,17 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
         );
 
         return (
-            <div className={b({wrapper: !height}, className)} ref={ref} onClick={handleClick}>
+            <div
+                className={b({wrapper: !currentHeight}, className)}
+                ref={ref}
+                onClick={handleClick}
+            >
                 <ReactPlayer
                     className={b('player')}
                     url={src}
                     muted={muted}
                     controls={controls === MediaVideoControlsType.Default}
-                    height={height || '100%'}
+                    height={currentHeight || '100%'}
                     width={width || '100%'}
                     light={previewImgUrl}
                     playing={isPlaying}

src/components/VideoBlock/VideoBlock.tsx

@@ -40,7 +40,7 @@ function getVideoSrc(stream?: string, record?: string) {
     return src;
 }
 
-function getHeight(width: number): number {
+export function getHeight(width: number): number {
     return (width / 16) * 9;
 }
 
@@ -52,16 +52,17 @@ export interface VideoBlockProps {
     className?: string;
     previewImg?: string;
     playButton?: React.ReactNode;
+    height?: number;
 }
 
 const VideoBlock = (props: VideoBlockProps) => {
-    const {stream, record, attributes, className, id, previewImg, playButton} = props;
+    const {stream, record, attributes, className, id, previewImg, playButton, height} = props;
     const src = getVideoSrc(stream, record);
     const ref = useRef<HTMLDivElement>(null);
     const iframeRef = useRef<HTMLIFrameElement>();
     const [hidePreview, setHidePreview] = useState(false);
     const norender = (!stream && !record) || !src;
-    const [height, setHeight] = useState<number>();
+    const [currentHeight, setCurrentHeight] = useState(height || undefined);
     const fullId = `${iframeId}-${id || src}`;
     const onPreviewClick = useCallback(() => {
         if (iframeRef.current) {
@@ -76,15 +77,17 @@ const VideoBlock = (props: VideoBlockProps) => {
 
     useEffect(() => {
         const updateSize = _.debounce(() => {
-            setHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
+            setCurrentHeight(
+                ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined,
+            );
         }, 100);
 
         updateSize();
         window.addEventListener('resize', updateSize);
         return () => {
             window.removeEventListener('resize', updateSize);
         };
-    }, []);
+    }, [height]);
 
     useEffect(() => {
         if (norender) {
@@ -119,7 +122,7 @@ const VideoBlock = (props: VideoBlockProps) => {
     }
 
     return (
-        <div className={b(null, className)} ref={ref} style={{height}}>
+        <div className={b(null, className)} ref={ref} style={{height: currentHeight}}>
             {previewImg && !hidePreview && (
                 <div className={b('preview')} onClick={onPreviewClick}>
                     <Image src={previewImg} className={b('image')} />