ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Message / Video: Fix flickering

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-11-05 21:57:30 +03:00
parent 4e546ebf41
commit 334d41d53f
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/middle/message/Video.tsx
View File

@ -81,6 +81,12 @@ const Video: FC<OwnProps> = ({
getMessageMediaFormat(message, 'pictogram'), getMessageMediaFormat(message, 'pictogram'),
lastSyncTime, lastSyncTime,
); );
const {
shouldRenderThumb,
shouldRenderFullMedia: shouldRenderPreview,
transitionClassNames: previewClassNames,
} = useTransitionForMedia(previewBlobUrl, 'slow');
const { mediaData, loadProgress } = useMediaWithLoadProgress( const { mediaData, loadProgress } = useMediaWithLoadProgress(
getMessageMediaHash(message, 'inline'), getMessageMediaHash(message, 'inline'),
!shouldLoad, !shouldLoad,
@ -110,7 +116,6 @@ const Video: FC<OwnProps> = ({
shouldRender: shouldRenderSpinner, shouldRender: shouldRenderSpinner,
transitionClassNames: spinnerClassNames, transitionClassNames: spinnerClassNames,
} = useShowTransition(isTransferring, undefined, wasLoadDisabled); } = useShowTransition(isTransferring, undefined, wasLoadDisabled);
const { transitionClassNames } = useTransitionForMedia(fullMediaData, 'slow');
const [playProgress, setPlayProgress] = useState<number>(0); const [playProgress, setPlayProgress] = useState<number>(0);
const handleTimeUpdate = useCallback((e: React.SyntheticEvent<HTMLVideoElement>) => { const handleTimeUpdate = useCallback((e: React.SyntheticEvent<HTMLVideoElement>) => {
@ -145,8 +150,6 @@ const Video: FC<OwnProps> = ({
}, [isUploading, isDownloading, fullMediaData, isPlayAllowed, onClick, onCancelUpload, message]); }, [isUploading, isDownloading, fullMediaData, isPlayAllowed, onClick, onCancelUpload, message]);
const className = buildClassName('media-inner dark', !isUploading && 'interactive'); const className = buildClassName('media-inner dark', !isUploading && 'interactive');
const videoClassName = buildClassName('full-media', transitionClassNames);
const style = dimensions const style = dimensions
? `width: ${width}px; height: ${height}px; left: ${dimensions.x}px; top: ${dimensions.y}px;` ? `width: ${width}px; height: ${height}px; left: ${dimensions.x}px; top: ${dimensions.y}px;`
: ''; : '';
@ -160,7 +163,7 @@ const Video: FC<OwnProps> = ({
style={style} style={style}
onClick={isUploading ? undefined : handleClick} onClick={isUploading ? undefined : handleClick}
> >
{!previewBlobUrl && ( {shouldRenderThumb && (
<canvas <canvas
ref={thumbRef} ref={thumbRef}
className="thumbnail" className="thumbnail"
@ -168,10 +171,10 @@ const Video: FC<OwnProps> = ({
style={`width: ${width}px; height: ${height}px;`} style={`width: ${width}px; height: ${height}px;`}
/> />
)} )}
{previewBlobUrl && ( {shouldRenderPreview && (
<img <img
src={previewBlobUrl} src={previewBlobUrl}
className="thumbnail" className={buildClassName('thumbnail', previewClassNames)}
// @ts-ignore teact feature // @ts-ignore teact feature
style={`width: ${width}px; height: ${height}px;`} style={`width: ${width}px; height: ${height}px;`}
alt="" alt=""
@ -180,7 +183,7 @@ const Video: FC<OwnProps> = ({
{isInline && ( {isInline && (
<video <video
ref={videoRef} ref={videoRef}
className={videoClassName} className="full-media"
width={width} width={width}
height={height} height={height}
autoPlay={isPlayAllowed} autoPlay={isPlayAllowed}