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

Animated Icon: Fix progressive

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-12-27 02:45:32 +01:00
parent 5617ae4fc4
commit 4309330b2c
4 changed files with 18 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/common/AnimatedIcon.tsx
View File

@ -16,8 +16,6 @@ export type OwnProps =
Partial<AnimatedStickerProps> Partial<AnimatedStickerProps>
& { noTransition?: boolean; nonInteractive?: boolean }; & { noTransition?: boolean; nonInteractive?: boolean };
const loadedAnimationUrls = new Set();
function AnimatedIcon(props: OwnProps) { function AnimatedIcon(props: OwnProps) {
const { const {
size = DEFAULT_SIZE, size = DEFAULT_SIZE,
@ -30,18 +28,13 @@ function AnimatedIcon(props: OwnProps) {
onClick, onClick,
...otherProps ...otherProps
} = props; } = props;
const { tgsUrl } = props; const [isAnimationLoaded, markAnimationLoaded] = useFlag(false);
const key = `${tgsUrl}_${size}`;
const [isAnimationLoaded, markAnimationLoaded] = useFlag(loadedAnimationUrls.has(key));
const transitionClassNames = useMediaTransition(noTransition || isAnimationLoaded); const transitionClassNames = useMediaTransition(noTransition || isAnimationLoaded);
const handleLoad = useCallback(() => { const handleLoad = useCallback(() => {
markAnimationLoaded(); markAnimationLoaded();
loadedAnimationUrls.add(key);
onLoad?.(); onLoad?.();
}, [key, markAnimationLoaded, onLoad]); }, [markAnimationLoaded, onLoad]);
const [playKey, setPlayKey] = useState(String(Math.random())); const [playKey, setPlayKey] = useState(String(Math.random()));

1
src/components/common/AnimatedIconFromSticker.tsx
View File

@ -33,7 +33,6 @@ function AnimatedIconFromSticker(props: OwnProps) {
<AnimatedIconWithPreview <AnimatedIconWithPreview
tgsUrl={tgsUrl} tgsUrl={tgsUrl}
previewUrl={previewBlobUrl} previewUrl={previewBlobUrl}
noPreviewTransition
thumbDataUri={thumbDataUri} thumbDataUri={thumbDataUri}
// eslint-disable-next-line react/jsx-props-no-spreading // eslint-disable-next-line react/jsx-props-no-spreading
{...otherProps} {...otherProps}

2
src/components/common/AnimatedIconWithPreview.module.scss
View File

@ -1,5 +1,7 @@
.root { .root {
position: relative; position: relative;
display: block !important;
} }
.preview { .preview {

27
src/components/common/AnimatedIconWithPreview.tsx
View File

@ -3,12 +3,13 @@ import React, { memo, useCallback } from '../../lib/teact/teact';
import type { OwnProps as AnimatedIconProps } from './AnimatedIcon'; import type { OwnProps as AnimatedIconProps } from './AnimatedIcon';
import buildClassName from '../../util/buildClassName'; import buildClassName from '../../util/buildClassName';
import useMediaTransition from '../../hooks/useMediaTransition';
import AnimatedIcon from './AnimatedIcon';
import styles from './AnimatedIconWithPreview.module.scss';
import useFlag from '../../hooks/useFlag';
import buildStyle from '../../util/buildStyle'; import buildStyle from '../../util/buildStyle';
import useMediaTransition from '../../hooks/useMediaTransition';
import useFlag from '../../hooks/useFlag';
import AnimatedIcon from './AnimatedIcon';
import styles from './AnimatedIconWithPreview.module.scss';
type OwnProps = type OwnProps =
Partial<AnimatedIconProps> Partial<AnimatedIconProps>
@ -18,11 +19,11 @@ const loadedPreviewUrls = new Set();
function AnimatedIconWithPreview(props: OwnProps) { function AnimatedIconWithPreview(props: OwnProps) {
const { const {
previewUrl, thumbDataUri, noPreviewTransition, className, ...otherProps previewUrl, thumbDataUri, className, ...otherProps
} = props; } = props;
const [isPreviewLoaded, markPreviewLoaded] = useFlag(loadedPreviewUrls.has(previewUrl)); const [isPreviewLoaded, markPreviewLoaded] = useFlag(Boolean(thumbDataUri) || loadedPreviewUrls.has(previewUrl));
const previewClassNames = useMediaTransition(noPreviewTransition || isPreviewLoaded); const transitionClassNames = useMediaTransition(isPreviewLoaded);
const [isAnimationReady, markAnimationReady] = useFlag(false); const [isAnimationReady, markAnimationReady] = useFlag(false);
const handlePreviewLoad = useCallback(() => { const handlePreviewLoad = useCallback(() => {
@ -34,18 +35,18 @@ function AnimatedIconWithPreview(props: OwnProps) {
return ( return (
<div <div
className={buildClassName(className, styles.root)} className={buildClassName(className, styles.root, transitionClassNames)}
style={buildStyle(size !== undefined && `width: ${size}px; height: ${size}px;`)} style={buildStyle(size !== undefined && `width: ${size}px; height: ${size}px;`)}
> >
{!isAnimationReady && thumbDataUri && ( {thumbDataUri && !isAnimationReady && (
// eslint-disable-next-line jsx-a11y/alt-text // eslint-disable-next-line jsx-a11y/alt-text
<img src={thumbDataUri} className={buildClassName(styles.preview)} /> <img src={thumbDataUri} className={styles.preview} />
)} )}
{!isAnimationReady && previewUrl && ( {previewUrl && !isAnimationReady && (
// eslint-disable-next-line jsx-a11y/alt-text // eslint-disable-next-line jsx-a11y/alt-text
<img <img
src={previewUrl} src={previewUrl}
className={buildClassName(styles.preview, previewClassNames)} className={styles.preview}
onLoad={handlePreviewLoad} onLoad={handlePreviewLoad}
/> />
)} )}