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

Message / Round Video: Fix progressive loading

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-12-06 13:29:43 +01:00
parent cc453696af
commit 6b3c779974
1 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,7 @@ import type { ApiMessage } from '../../../api/types';
import { ApiMediaFormat } from '../../../api/types'; import { ApiMediaFormat } from '../../../api/types';
import { ROUND_VIDEO_DIMENSIONS_PX } from '../../common/helpers/mediaDimensions'; import { ROUND_VIDEO_DIMENSIONS_PX } from '../../common/helpers/mediaDimensions';
import { getMessageMediaFormat, getMessageMediaHash } from '../../../global/helpers'; import { getMessageMediaFormat, getMessageMediaHash, getMessageMediaThumbDataUri } from '../../../global/helpers';
import { formatMediaDuration } from '../../../util/dateFormat'; import { formatMediaDuration } from '../../../util/dateFormat';
import buildClassName from '../../../util/buildClassName'; import buildClassName from '../../../util/buildClassName';
import { stopCurrentAudio } from '../../../util/audioPlayer'; import { stopCurrentAudio } from '../../../util/audioPlayer';
@ -23,7 +23,7 @@ import useMediaWithLoadProgress from '../../../hooks/useMediaWithLoadProgress';
import useShowTransition from '../../../hooks/useShowTransition'; import useShowTransition from '../../../hooks/useShowTransition';
import useMediaTransition from '../../../hooks/useMediaTransition'; import useMediaTransition from '../../../hooks/useMediaTransition';
import usePrevious from '../../../hooks/usePrevious'; import usePrevious from '../../../hooks/usePrevious';
import useBuffering from '../../../hooks/useBuffering'; import useFlag from '../../../hooks/useFlag';
import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef'; import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef';
import ProgressSpinner from '../../ui/ProgressSpinner'; import ProgressSpinner from '../../ui/ProgressSpinner';
@ -75,18 +75,19 @@ const RoundVideo: FC<OwnProps> = ({
lastSyncTime, lastSyncTime,
); );
const [withThumb] = useState(!mediaData); const [isPlayerReady, markPlayerReady] = useFlag();
const thumbRef = useBlurredMediaThumbRef(message, mediaData); const hasThumb = Boolean(getMessageMediaThumbDataUri(message));
const noThumb = !hasThumb || isPlayerReady;
const thumbRef = useBlurredMediaThumbRef(message, noThumb);
const thumbClassNames = useMediaTransition(!noThumb);
const { isBuffered, bufferingHandlers } = useBuffering(); const isTransferring = (isLoadAllowed && !isPlayerReady) || isDownloading;
const isTransferring = (isLoadAllowed && !isBuffered) || isDownloading;
const wasLoadDisabled = usePrevious(isLoadAllowed) === false; const wasLoadDisabled = usePrevious(isLoadAllowed) === false;
const thumbClassNames = useMediaTransition(!mediaData);
const { const {
shouldRender: shouldSpinnerRender, shouldRender: shouldSpinnerRender,
transitionClassNames: spinnerClassNames, transitionClassNames: spinnerClassNames,
} = useShowTransition(isTransferring || !isBuffered, undefined, wasLoadDisabled); } = useShowTransition(isTransferring, undefined, wasLoadDisabled);
const [isActivated, setIsActivated] = useState<boolean>(false); const [isActivated, setIsActivated] = useState<boolean>(false);
const [progress, setProgress] = useState<number>(0); const [progress, setProgress] = useState<number>(0);
@ -201,19 +202,16 @@ const RoundVideo: FC<OwnProps> = ({
loop={!isActivated} loop={!isActivated}
playsInline playsInline
onEnded={isActivated ? stopPlaying : undefined} onEnded={isActivated ? stopPlaying : undefined}
// eslint-disable-next-line react/jsx-props-no-spreading
{...bufferingHandlers}
onTimeUpdate={isActivated ? handleTimeUpdate : undefined} onTimeUpdate={isActivated ? handleTimeUpdate : undefined}
onReady={markPlayerReady}
/> />
</div> </div>
)} )}
{withThumb && ( <canvas
<canvas ref={thumbRef}
ref={thumbRef} className={buildClassName('thumbnail', thumbClassNames)}
className={buildClassName('thumbnail', thumbClassNames)} style={`width: ${ROUND_VIDEO_DIMENSIONS_PX}px; height: ${ROUND_VIDEO_DIMENSIONS_PX}px`}
style={`width: ${ROUND_VIDEO_DIMENSIONS_PX}px; height: ${ROUND_VIDEO_DIMENSIONS_PX}px`} />
/>
)}
<div className="progress" ref={playingProgressRef} /> <div className="progress" ref={playingProgressRef} />
{shouldSpinnerRender && ( {shouldSpinnerRender && (
<div className={`media-loading ${spinnerClassNames}`}> <div className={`media-loading ${spinnerClassNames}`}>