diff --git a/src/components/middle/message/Video.tsx b/src/components/middle/message/Video.tsx index 9a5140215..cb9257a94 100644 --- a/src/components/middle/message/Video.tsx +++ b/src/components/middle/message/Video.tsx @@ -81,6 +81,12 @@ const Video: FC = ({ getMessageMediaFormat(message, 'pictogram'), lastSyncTime, ); + const { + shouldRenderThumb, + shouldRenderFullMedia: shouldRenderPreview, + transitionClassNames: previewClassNames, + } = useTransitionForMedia(previewBlobUrl, 'slow'); + const { mediaData, loadProgress } = useMediaWithLoadProgress( getMessageMediaHash(message, 'inline'), !shouldLoad, @@ -110,7 +116,6 @@ const Video: FC = ({ shouldRender: shouldRenderSpinner, transitionClassNames: spinnerClassNames, } = useShowTransition(isTransferring, undefined, wasLoadDisabled); - const { transitionClassNames } = useTransitionForMedia(fullMediaData, 'slow'); const [playProgress, setPlayProgress] = useState(0); const handleTimeUpdate = useCallback((e: React.SyntheticEvent) => { @@ -145,8 +150,6 @@ const Video: FC = ({ }, [isUploading, isDownloading, fullMediaData, isPlayAllowed, onClick, onCancelUpload, message]); const className = buildClassName('media-inner dark', !isUploading && 'interactive'); - const videoClassName = buildClassName('full-media', transitionClassNames); - const style = dimensions ? `width: ${width}px; height: ${height}px; left: ${dimensions.x}px; top: ${dimensions.y}px;` : ''; @@ -160,7 +163,7 @@ const Video: FC = ({ style={style} onClick={isUploading ? undefined : handleClick} > - {!previewBlobUrl && ( + {shouldRenderThumb && ( = ({ style={`width: ${width}px; height: ${height}px;`} /> )} - {previewBlobUrl && ( + {shouldRenderPreview && ( = ({ {isInline && (