diff --git a/src/blocks/Media/__stories__/Media.stories.tsx b/src/blocks/Media/__stories__/Media.stories.tsx index fc05cc95d..a55e2ff3d 100644 --- a/src/blocks/Media/__stories__/Media.stories.tsx +++ b/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, diff --git a/src/blocks/Tabs/Tabs.tsx b/src/blocks/Tabs/Tabs.tsx index 59f6c8da5..d59c138ac 100644 --- a/src/blocks/Tabs/Tabs.tsx +++ b/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(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 && ( - - )} +
+ {activeTabData?.media && ( + + )} +
{imageProps && ( diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx index 8bcb4f37b..c633cf25c 100644 --- a/src/components/Media/Media.tsx +++ b/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} /> ); } diff --git a/src/components/Media/Video/Video.tsx b/src/components/Media/Video/Video.tsx index 38fd2a586..3a2334640 100644 --- a/src/components/Media/Video/Video.tsx +++ b/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(() => { diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx index a6758393c..89c2a4a89 100644 --- a/src/components/ReactPlayer/ReactPlayer.tsx +++ b/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(); const [isPlaying, setIsPlaying] = useState(autoPlay); const [playedPercent, setPlayedPercent] = useState(0); - const [height, setHeight] = useState(0); + const [currentHeight, setCurrentHeight] = useState(height); const [width, setWidth] = useState(0); const [muted, setMuted] = useState(mute); const [started, setStarted] = useState(autoPlay); @@ -141,7 +143,7 @@ export const ReactPlayerBlock = React.forwardRef +
{ - 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(null); const iframeRef = useRef(); const [hidePreview, setHidePreview] = useState(false); const norender = (!stream && !record) || !src; - const [height, setHeight] = useState(); + const [currentHeight, setCurrentHeight] = useState(height || undefined); const fullId = `${iframeId}-${id || src}`; const onPreviewClick = useCallback(() => { if (iframeRef.current) { @@ -76,7 +77,9 @@ 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(); @@ -84,7 +87,7 @@ const VideoBlock = (props: VideoBlockProps) => { return () => { window.removeEventListener('resize', updateSize); }; - }, []); + }, [height]); useEffect(() => { if (norender) { @@ -119,7 +122,7 @@ const VideoBlock = (props: VideoBlockProps) => { } return ( -
+
{previewImg && !hidePreview && (