103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
import React, {
|
|
FC, useState, useEffect, 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 getAnimationData from './helpers/animatedAssets';
|
|
|
|
import AnimatedSticker from './AnimatedSticker';
|
|
|
|
import './PasswordMonkey.scss';
|
|
|
|
type OwnProps = {
|
|
code: string;
|
|
codeLength: number;
|
|
trackingDirection: number;
|
|
isTracking: boolean;
|
|
isBig?: boolean;
|
|
};
|
|
|
|
const TRACKING_START_FRAME = 15;
|
|
const TRACKING_END_FRAME = 180;
|
|
const STICKER_SIZE = IS_SINGLE_COLUMN_LAYOUT ? STICKER_SIZE_AUTH_MOBILE : STICKER_SIZE_AUTH;
|
|
|
|
const TrackingMonkey: FC<OwnProps> = ({
|
|
code,
|
|
codeLength,
|
|
trackingDirection,
|
|
isTracking,
|
|
isBig,
|
|
}) => {
|
|
const [idleMonkeyData, setIdleMonkeyData] = useState<string>();
|
|
const [trackingMonkeyData, setTrackingMonkeyData] = useState<string>();
|
|
const [isFirstMonkeyLoaded, setIsFirstMonkeyLoaded] = useState(false);
|
|
const TRACKING_FRAMES_PER_SYMBOL = (TRACKING_END_FRAME - TRACKING_START_FRAME) / codeLength;
|
|
|
|
useEffect(() => {
|
|
if (!idleMonkeyData) {
|
|
getAnimationData('MonkeyIdle').then(setIdleMonkeyData);
|
|
}
|
|
}, [idleMonkeyData]);
|
|
|
|
useEffect(() => {
|
|
if (!trackingMonkeyData) {
|
|
getAnimationData('MonkeyTracking').then(setTrackingMonkeyData);
|
|
}
|
|
}, [trackingMonkeyData]);
|
|
|
|
const handleFirstMonkeyLoad = useCallback(() => setIsFirstMonkeyLoaded(true), []);
|
|
|
|
function getTrackingFrames(): [number, number] {
|
|
const startFrame = (code && code.length > 1) || trackingDirection < 0
|
|
? TRACKING_START_FRAME + TRACKING_FRAMES_PER_SYMBOL * (code.length - 1)
|
|
: 0;
|
|
const endFrame = code.length === codeLength
|
|
? TRACKING_END_FRAME
|
|
: TRACKING_START_FRAME + TRACKING_FRAMES_PER_SYMBOL * code.length;
|
|
|
|
if (trackingDirection < 1) {
|
|
return [
|
|
endFrame,
|
|
startFrame,
|
|
];
|
|
}
|
|
|
|
return [
|
|
startFrame,
|
|
endFrame,
|
|
];
|
|
}
|
|
|
|
return (
|
|
<div id="monkey" className={isBig ? 'big' : ''}>
|
|
{!isFirstMonkeyLoaded && (
|
|
<div className="monkey-preview" />
|
|
)}
|
|
{idleMonkeyData && (
|
|
<AnimatedSticker
|
|
id="idleMonkey"
|
|
size={isBig ? STICKER_SIZE_TWO_FA : STICKER_SIZE}
|
|
className={isTracking ? 'hidden' : undefined}
|
|
animationData={idleMonkeyData}
|
|
play={!isTracking}
|
|
onLoad={handleFirstMonkeyLoad}
|
|
/>
|
|
)}
|
|
{trackingMonkeyData && (
|
|
<AnimatedSticker
|
|
id="trackingMonkey"
|
|
size={isBig ? STICKER_SIZE_TWO_FA : STICKER_SIZE}
|
|
className={!isTracking ? 'hidden' : 'shown'}
|
|
animationData={trackingMonkeyData}
|
|
playSegment={isTracking ? getTrackingFrames() : undefined}
|
|
speed={2}
|
|
noLoop
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(TrackingMonkey);
|