TelegramPWA/src/hooks/useTransitionForMedia.ts
Alexander Zinchuk 3afcde3217 Initial commit
2021-04-09 14:11:51 +03:00

38 lines
984 B
TypeScript

import { useEffect, useRef, useState } from '../lib/teact/teact';
import useShowTransition from './useShowTransition';
const SPEED = {
fast: 200,
slow: 350,
};
export default (mediaData?: any, speed: keyof typeof SPEED = 'fast', noAnimate = false) => {
const isMediaLoaded = Boolean(mediaData);
const willAnimate = !useRef(isMediaLoaded).current && !noAnimate;
const [shouldRenderThumb, setShouldRenderThumb] = useState(!isMediaLoaded);
const {
shouldRender: shouldRenderFullMedia,
transitionClassNames,
} = useShowTransition(isMediaLoaded, undefined, !willAnimate, speed);
useEffect(() => {
if (shouldRenderFullMedia) {
if (willAnimate) {
setTimeout(() => {
setShouldRenderThumb(false);
}, SPEED[speed]);
} else {
setShouldRenderThumb(false);
}
}
}, [willAnimate, shouldRenderFullMedia, speed]);
return {
shouldRenderThumb,
shouldRenderFullMedia,
transitionClassNames,
};
};