Differential D13925 Diff 40398 web/e.cash/components/animate-image/index.js

Changeset View

Standalone View

web/e.cash/components/animate-image/index.js

	import { useEffect, useRef, useContext } from 'react';			import { useEffect, useRef, useContext, useState } from 'react';
	import Lottie from 'lottie-react';			import Lottie from 'lottie-react';
	import { ThemeContext } from 'styled-components';			import { ThemeContext } from 'styled-components';

	// image \| lottie json file to be rendered			// image \| lottie json file to be rendered
	// speed \| optional number value to set the speed of the animation. Lower number is slower. Adjust to get the desired frame rate.			// speed \| optional number value to set the speed of the animation. Lower number is slower. Adjust to get the desired frame rate.
	export default function AnimateImage({ image, speed }) {			export default function AnimateImage({ image, speed, reverse }) {
				const [direction, setDirection] = useState(1);
	const themeContext = useContext(ThemeContext);			const themeContext = useContext(ThemeContext);
	const lottieRef = useRef();			const lottieRef = useRef();
	useEffect(() => {			useEffect(() => {
	lottieRef.current.setSpeed(			lottieRef.current.setSpeed(
	speed ? speed : themeContext.filters.animationspeed,			speed ? speed : themeContext.filters.animationspeed,
	);			);
	}, [speed, themeContext.filters.animationspeed]);			}, [speed, themeContext.filters.animationspeed]);

				const Reverse = () => {
				lottieRef.current.setDirection(direction === 1 ? -1 : 1);
				lottieRef.current.play();
				setDirection(direction === 1 ? -1 : 1);
				};
	return (			return (
	<Lottie			<Lottie
	lottieRef={lottieRef}			lottieRef={lottieRef}
	animationData={image}			animationData={image}
	loop={true}			loop={!reverse}
	style={{ height: '100%' }}			style={{ height: '100%' }}
				onComplete={reverse ? Reverse : null}
	/>			/>
	);			);
	}			}