Merge pull request #1399 from remotion-dev/lottie-load-images

packages/example/src/Lottie/Cybertruck/index.tsx

@@ -1,39 +1,61 @@
-import {Lottie, LottieAnimationData} from '@remotion/lottie';
-import {useEffect, useState} from 'react';
-import {
-	AbsoluteFill,
-	continueRender,
-	delayRender,
-	useVideoConfig,
-} from 'remotion';
+import {Lottie} from '@remotion/lottie';
+import {AbsoluteFill, useVideoConfig} from 'remotion';
+
+const lottie = {
+	v: '5.5.2',
+	fr: 1,
+	ip: 0,
+	op: 1,
+	w: 500,
+	h: 500,
+	nm: '@forresto/movie-to-lottie',
+	ddd: 0,
+	assets: [
+		{
+			id: 'fr_0',
+			w: 500,
+			h: 500,
+			u: '',
+			p: 'https://www.remotion.dev/img/new-logo.png',
+			e: 1,
+		},
+	],
+	layers: [
+		{
+			ddd: 0,
+			ind: 1,
+			ty: 2,
+			nm: 'fr_0.jpg',
+			cl: 'jpg',
+			refId: 'fr_0',
+			sr: 1,
+			ks: {
+				o: {a: 0, k: 100, ix: 11},
+				r: {a: 0, k: 0, ix: 10},
+				p: {a: 0, k: [250, 250, 0], ix: 2},
+				a: {a: 0, k: [250, 250, 0], ix: 1},
+				s: {a: 0, k: [100, 100, 100], ix: 6},
+			},
+			ao: 0,
+			ip: 0,
+			op: 1,
+			st: 0,
+			bm: 0,
+		},
+	],
+	markers: [],
+};
 
 const LottieCybertruck = () => {
 	const {height, width} = useVideoConfig();
-	const [animationData, setAnimationData] =
-		useState<LottieAnimationData | null>(null);
-	const [handle] = useState(delayRender);
-
-	useEffect(() => {
-		// Credits: https://lottiefiles.com/11643-tesla-cybertruck
-		fetch('https://assets2.lottiefiles.com/packages/lf20_RqpTFh.json')
-			.then((res) => res.json())
-			.then((data) => {
-				setAnimationData(data);
-				continueRender(handle);
-			});
-	}, [handle]);
-
-	if (!animationData) {
-		return null;
-	}
 
 	return (
 		<AbsoluteFill style={{height, width}}>
 			<Lottie
 				loop
-				animationData={animationData}
+				animationData={lottie}
 				playbackRate={10}
-				style={{height, width}}
+				style={{height: 200}}
 			/>
 		</AbsoluteFill>
 	);

packages/example/src/Lottie/ImageInLottie/index.tsx

@@ -0,0 +1,64 @@
+import {Lottie} from '@remotion/lottie';
+import {AbsoluteFill, useVideoConfig} from 'remotion';
+
+const lottie = {
+	v: '5.5.2',
+	fr: 1,
+	ip: 0,
+	op: 1,
+	w: 500,
+	h: 500,
+	nm: '@forresto/movie-to-lottie',
+	ddd: 0,
+	assets: [
+		{
+			id: 'fr_0',
+			w: 500,
+			h: 500,
+			u: '',
+			p: 'https://www.remotion.dev/img/new-logo.png',
+			e: 1,
+		},
+	],
+	layers: [
+		{
+			ddd: 0,
+			ind: 1,
+			ty: 2,
+			nm: 'fr_0.jpg',
+			cl: 'jpg',
+			refId: 'fr_0',
+			sr: 1,
+			ks: {
+				o: {a: 0, k: 100, ix: 11},
+				r: {a: 0, k: 0, ix: 10},
+				p: {a: 0, k: [250, 250, 0], ix: 2},
+				a: {a: 0, k: [250, 250, 0], ix: 1},
+				s: {a: 0, k: [100, 100, 100], ix: 6},
+			},
+			ao: 0,
+			ip: 0,
+			op: 1,
+			st: 0,
+			bm: 0,
+		},
+	],
+	markers: [],
+};
+
+const ImageInLottie = () => {
+	const {height, width} = useVideoConfig();
+
+	return (
+		<AbsoluteFill style={{height, width}}>
+			<Lottie
+				loop
+				animationData={lottie}
+				playbackRate={10}
+				style={{height: 200}}
+			/>
+		</AbsoluteFill>
+	);
+};
+
+export default ImageInLottie;

packages/example/src/Video.tsx

@@ -475,6 +475,14 @@ export const Index: React.FC = () => {
 					height={850}
 					width={850}
 				/>
+				<Composition
+					id="image-in-lottie"
+					lazyComponent={() => import('./Lottie/ImageInLottie')}
+					durationInFrames={300}
+					fps={30}
+					height={850}
+					width={850}
+				/>
 				<Composition
 					id="loader"
 					lazyComponent={() => import('./Lottie/Loader')}

packages/lottie/src/Lottie.tsx

@@ -94,6 +94,29 @@ export const Lottie = ({
 		});
 
 		animationRef.current.goToAndStop(nextFrame, true);
+		const images = containerRef.current?.querySelectorAll(
+			'image'
+		) as NodeListOf<SVGImageElement>;
+		images.forEach((img) => {
+			const imgHandle = delayRender(
+				`Waiting for lottie image with src="${img.href.baseVal}" to load`
+			);
+
+			// https://stackoverflow.com/a/46839799
+			img.addEventListener(
+				'load',
+				() => {
+					continueRender(imgHandle);
+				},
+				{once: true}
+			);
+
+			img.setAttributeNS(
+				'http://www.w3.org/1999/xlink',
+				'xlink:href',
+				img.href.baseVal as string
+			);
+		});
 	}, [direction, frame, loop, playbackRate]);
 
 	return <div ref={containerRef} className={className} style={style} />;