43 lines
1,013 B
TypeScript
43 lines
1,013 B
TypeScript
|
// Copyright 2022 Signal Messenger, LLC
|
||
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||
|
|
|
||
|
|
import type { CSSProperties, ReactElement } from 'react';
|
||
|
|
import React, { useEffect, useRef } from 'react';
|
||
|
|
import lottie from '@evanhahn/lottie-web-light';
|
||
|
|
|
||
|
|
import { lottieNoopAudioFactory } from '../util/lottieNoopAudioFactory';
|
||
|
|
|
||
|
|
export function Lottie({
|
||
|
|
animationData,
|
||
|
|
className,
|
||
|
|
style,
|
||
|
|
}: Readonly<{
|
||
|
|
animationData: unknown;
|
||
|
|
className?: string;
|
||
|
|
style?: CSSProperties;
|
||
|
|
}>): ReactElement {
|
||
|
|
const containerRef = useRef<null | HTMLDivElement>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const container = containerRef.current;
|
||
|
|
if (!container) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const animationItem = lottie.loadAnimation({
|
||
|
|
container,
|
||
|
|
renderer: 'svg',
|
||
|
|
loop: true,
|
||
|
|
autoplay: true,
|
||
|
|
animationData,
|
||
|
|
audioFactory: lottieNoopAudioFactory,
|
||
|
|
});
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
animationItem.destroy();
|
||
|
|
};
|
||
|
|
}, [animationData]);
|
||
|
|
|
||
|
|
return <div className={className} ref={containerRef} style={style} />;
|
||
|
|
}
|