58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import type { FC } from '../../lib/teact/teact';
|
|
import React, { useCallback, memo } from '../../lib/teact/teact';
|
|
|
|
import { STICKER_SIZE_AUTH, STICKER_SIZE_AUTH_MOBILE, STICKER_SIZE_TWO_FA } from '../../config';
|
|
import { IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
|
|
import { LOCAL_TGS_URLS } from './helpers/animatedAssets';
|
|
|
|
import AnimatedSticker from './AnimatedSticker';
|
|
|
|
import useTimeout from '../../hooks/useTimeout';
|
|
import useFlag from '../../hooks/useFlag';
|
|
|
|
import './PasswordMonkey.scss';
|
|
|
|
type OwnProps = {
|
|
isPasswordVisible: boolean;
|
|
isBig?: boolean;
|
|
};
|
|
|
|
const PEEK_MONKEY_SHOW_DELAY = 2000;
|
|
const SEGMENT_COVER_EYES: [number, number] = [0, 50];
|
|
const SEGMENT_UNCOVER_EYE: [number, number] = [0, 20];
|
|
const SEGMENT_COVER_EYE: [number, number] = [20, 0];
|
|
const STICKER_SIZE = IS_SINGLE_COLUMN_LAYOUT ? STICKER_SIZE_AUTH_MOBILE : STICKER_SIZE_AUTH;
|
|
|
|
const PasswordMonkey: FC<OwnProps> = ({ isPasswordVisible, isBig }) => {
|
|
const [isFirstMonkeyLoaded, markFirstMonkeyLoaded] = useFlag(false);
|
|
const [isPeekShown, markPeekShown] = useFlag(false);
|
|
|
|
useTimeout(markPeekShown, PEEK_MONKEY_SHOW_DELAY);
|
|
const handleFirstMonkeyLoad = useCallback(markFirstMonkeyLoaded, [markFirstMonkeyLoaded]);
|
|
|
|
return (
|
|
<div id="monkey" className={isBig ? 'big' : ''}>
|
|
{!isFirstMonkeyLoaded && (
|
|
<div className="monkey-preview" />
|
|
)}
|
|
<AnimatedSticker
|
|
size={isBig ? STICKER_SIZE_TWO_FA : STICKER_SIZE}
|
|
className={isPeekShown ? 'hidden' : 'shown'}
|
|
tgsUrl={LOCAL_TGS_URLS.MonkeyClose}
|
|
playSegment={SEGMENT_COVER_EYES}
|
|
noLoop
|
|
onLoad={handleFirstMonkeyLoad}
|
|
/>
|
|
<AnimatedSticker
|
|
size={isBig ? STICKER_SIZE_TWO_FA : STICKER_SIZE}
|
|
className={isPeekShown ? 'shown' : 'hidden'}
|
|
tgsUrl={LOCAL_TGS_URLS.MonkeyPeek}
|
|
playSegment={isPasswordVisible ? SEGMENT_UNCOVER_EYE : SEGMENT_COVER_EYE}
|
|
noLoop
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(PasswordMonkey);
|