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

Gif Picker: Fix some gifs do not load

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-27 21:08:47 +03:00
parent 6728fd4e2a
commit c9e01d88df
2 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/common/GifButton.scss
View File

@ -21,25 +21,21 @@
} }
.thumbnail { .thumbnail {
width: 100%;
height: 100%;
background-size: cover !important; background-size: cover !important;
background: transparent no-repeat center; background: transparent no-repeat center;
} }
.thumbnail ~ video { .preview, video {
position: absolute; position: absolute;
} top: 0;
left: 0;
.thumbnail, video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
&:not(.shown) {
display: block !important;
visibility: hidden;
}
.Spinner { .Spinner {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;

14
src/components/common/GifButton.tsx
View File

@ -33,7 +33,7 @@ const GifButton: FC<OwnProps> = ({
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const hasThumbnail = gif.thumbnail && !!gif.thumbnail.dataUri; const hasThumbnail = Boolean(gif.thumbnail?.dataUri);
const localMediaHash = `gif${gif.id}`; const localMediaHash = `gif${gif.id}`;
const isIntersecting = useIsIntersecting(ref, observeIntersection); const isIntersecting = useIsIntersecting(ref, observeIntersection);
const loadAndPlay = isIntersecting && !isDisabled; const loadAndPlay = isIntersecting && !isDisabled;
@ -41,9 +41,9 @@ const GifButton: FC<OwnProps> = ({
const thumbRef = useCanvasBlur(gif.thumbnail?.dataUri, Boolean(previewBlobUrl)); const thumbRef = useCanvasBlur(gif.thumbnail?.dataUri, Boolean(previewBlobUrl));
const videoData = useMedia(localMediaHash, !loadAndPlay, ApiMediaFormat.BlobUrl); const videoData = useMedia(localMediaHash, !loadAndPlay, ApiMediaFormat.BlobUrl);
const shouldRenderVideo = Boolean(loadAndPlay && videoData); const shouldRenderVideo = Boolean(loadAndPlay && videoData);
const { transitionClassNames } = useTransitionForMedia(hasThumbnail || previewBlobUrl || videoData, 'slow');
const { isBuffered, bufferingHandlers } = useBuffering(true); const { isBuffered, bufferingHandlers } = useBuffering(true);
const shouldRenderSpinner = loadAndPlay && !isBuffered; const shouldRenderSpinner = loadAndPlay && !isBuffered;
const isVideoReady = loadAndPlay && isBuffered;
useVideoCleanup(videoRef, [shouldRenderVideo]); useVideoCleanup(videoRef, [shouldRenderVideo]);
@ -58,7 +58,6 @@ const GifButton: FC<OwnProps> = ({
const fullClassName = buildClassName( const fullClassName = buildClassName(
'GifButton', 'GifButton',
gif.width && gif.height && gif.width < gif.height ? 'vertical' : 'horizontal', gif.width && gif.height && gif.width < gif.height ? 'vertical' : 'horizontal',
transitionClassNames,
localMediaHash, localMediaHash,
className, className,
); );
@ -74,16 +73,19 @@ const GifButton: FC<OwnProps> = ({
<canvas <canvas
ref={thumbRef} ref={thumbRef}
className="thumbnail" className="thumbnail"
// We need to always render to avoid blur re-calculation
// @ts-ignore
style={isVideoReady ? 'display: none;' : undefined}
/> />
)} )}
{!hasThumbnail && previewBlobUrl && ( {previewBlobUrl && !isVideoReady && (
<img <img
src={previewBlobUrl} src={previewBlobUrl}
alt="" alt=""
className="thumbnail" className="preview"
/> />
)} )}
{(shouldRenderVideo || previewBlobUrl) && ( {shouldRenderVideo && (
<video <video
ref={videoRef} ref={videoRef}
autoPlay autoPlay