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

Revert "[Perf] Video: Do not switch to thumb when not observed, remove preview"

Browse Source 
This reverts commit 39c145dd6fdbdfbaf62f948adbbf3e4586f06803.
This commit is contained in:
Alexander Zinchuk 2021-07-19 03:34:18 +03:00
parent d293818acc
commit 68398550a8
2 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/middle/message/RoundVideo.tsx
View File

@ -142,7 +142,9 @@ const RoundVideo: FC<OwnProps> = ({
}, [shouldPlay]); }, [shouldPlay]);
useHeavyAnimationCheckForVideo(playerRef, shouldPlay); useHeavyAnimationCheckForVideo(playerRef, shouldPlay);
usePauseOnInactive(playerRef, Boolean(mediaData)); usePauseOnInactive(playerRef, Boolean(mediaData));
useVideoCleanup(playerRef, [mediaData]); useVideoCleanup(playerRef, [mediaData]);
const handleClick = useCallback(() => { const handleClick = useCallback(() => {

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

@ -19,6 +19,7 @@ import {
} from '../../../modules/helpers'; } from '../../../modules/helpers';
import { ObserveFn, useIsIntersecting } from '../../../hooks/useIntersectionObserver'; import { ObserveFn, useIsIntersecting } from '../../../hooks/useIntersectionObserver';
import useMediaWithDownloadProgress from '../../../hooks/useMediaWithDownloadProgress'; import useMediaWithDownloadProgress from '../../../hooks/useMediaWithDownloadProgress';
import useMedia from '../../../hooks/useMedia';
import useShowTransition from '../../../hooks/useShowTransition'; import useShowTransition from '../../../hooks/useShowTransition';
import useTransitionForMedia from '../../../hooks/useTransitionForMedia'; import useTransitionForMedia from '../../../hooks/useTransitionForMedia';
import usePrevious from '../../../hooks/usePrevious'; import usePrevious from '../../../hooks/usePrevious';
@ -71,6 +72,12 @@ const Video: FC<OwnProps> = ({
const shouldDownload = Boolean(isDownloadAllowed && isIntersecting && lastSyncTime); const shouldDownload = Boolean(isDownloadAllowed && isIntersecting && lastSyncTime);
const [isPlayAllowed, setIsPlayAllowed] = useState(shouldAutoPlay); const [isPlayAllowed, setIsPlayAllowed] = useState(shouldAutoPlay);
const previewBlobUrl = useMedia(
getMessageMediaHash(message, 'pictogram'),
!(isIntersecting && lastSyncTime),
getMessageMediaFormat(message, 'pictogram'),
lastSyncTime,
);
const thumbRef = useBlurredMediaThumbRef(message); const thumbRef = useBlurredMediaThumbRef(message);
const { mediaData, downloadProgress } = useMediaWithDownloadProgress( const { mediaData, downloadProgress } = useMediaWithDownloadProgress(
getMessageMediaHash(message, 'inline'), getMessageMediaHash(message, 'inline'),
@ -78,7 +85,9 @@ const Video: FC<OwnProps> = ({
getMessageMediaFormat(message, 'inline'), getMessageMediaFormat(message, 'inline'),
lastSyncTime, lastSyncTime,
); );
const fullMediaData = localBlobUrl || mediaData; const fullMediaData = localBlobUrl || mediaData;
const isInline = Boolean(isIntersecting && fullMediaData);
const { isBuffered, bufferingHandlers } = useBuffering(!shouldAutoLoad); const { isBuffered, bufferingHandlers } = useBuffering(!shouldAutoLoad);
const { isUploading, isTransferring, transferProgress } = getMediaTransferState( const { isUploading, isTransferring, transferProgress } = getMediaTransferState(
@ -104,9 +113,11 @@ const Video: FC<OwnProps> = ({
const isForwarded = isForwardedMessage(message); const isForwarded = isForwardedMessage(message);
const { width, height } = dimensions || calculateVideoDimensions(video, isOwn, isForwarded, noAvatars); const { width, height } = dimensions || calculateVideoDimensions(video, isOwn, isForwarded, noAvatars);
useHeavyAnimationCheckForVideo(videoRef, Boolean(fullMediaData && shouldAutoPlay)); useHeavyAnimationCheckForVideo(videoRef, Boolean(isInline && shouldAutoPlay));
usePauseOnInactive(videoRef, isPlayAllowed); usePauseOnInactive(videoRef, isPlayAllowed);
useVideoCleanup(videoRef, [fullMediaData]);
useVideoCleanup(videoRef, [isInline]);
const handleClick = useCallback(() => { const handleClick = useCallback(() => {
if (isUploading) { if (isUploading) {
@ -130,6 +141,7 @@ const Video: FC<OwnProps> = ({
? `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;`
: ''; : '';
const shouldRenderInlineVideo = isInline;
const shouldRenderPlayButton = (isDownloadAllowed && !isPlayAllowed && !shouldRenderSpinner); const shouldRenderPlayButton = (isDownloadAllowed && !isPlayAllowed && !shouldRenderSpinner);
const shouldRenderDownloadButton = !isDownloadAllowed; const shouldRenderDownloadButton = !isDownloadAllowed;
@ -142,15 +154,26 @@ const Video: FC<OwnProps> = ({
style={style} style={style}
onClick={isUploading ? undefined : handleClick} onClick={isUploading ? undefined : handleClick}
> >
{(shouldRenderThumb || fullMediaData) && ( {(!isInline || shouldRenderThumb || shouldRenderInlineVideo)
<canvas && (
ref={thumbRef} <canvas
ref={thumbRef}
className="thumbnail"
// @ts-ignore teact feature
style={`width: ${width}px; height: ${height}px;`}
/>
)}
{previewBlobUrl && (
<img
src={previewBlobUrl}
className="thumbnail" className="thumbnail"
// @ts-ignore teact feature // @ts-ignore teact feature
style={`width: ${width}px; height: ${height}px;`} style={`width: ${width}px; height: ${height}px;`}
alt=""
/> />
)} )}
{fullMediaData && (
{shouldRenderInlineVideo && (
<video <video
ref={videoRef} ref={videoRef}
className={videoClassName} className={videoClassName}