@remotion/lottie 3.2.0

package/LICENSE.md

@@ -0,0 +1,41 @@
+# Remotion License
+
+Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion create videos for free (even commercial), while a company license is required for for-profit organisations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
+
+- [Free license](#free-license)
+- [Company license](#company-license)
+
+## Free license
+
+Copyright © 2022 [Jonny Burger](https://jonny.io)
+
+### Eligibility
+
+You are eligible to use Remotion for free if you are:
+
+- an individual
+- a for-profit organisation with up to 3 employees
+- a non-profit or not-for-profit organisation
+- evaluating whether Remotion is a good fit, and are not yet using it in a commercial way
+
+### Allowed use cases
+
+Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify and the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
+
+### Disallowed use cases
+
+It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, sublicensing your own derivate of Remotion.
+
+### Warranty notice
+
+The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
+
+### Support
+
+Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
+
+## Company license
+
+You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support.
+
+Visit [companies.remotion.dev](https://companies.remotion.dev) for pricing and to buy a license.

package/README.md

@@ -0,0 +1,3 @@
+This package offers a component for embedding [Lottie](https://airbnb.io/lottie) animations in a [Remotion](https://remotion.dev) video.
+
+**Documentation: https://remotion.dev/lottie**

package/dist/Lottie.d.ts

@@ -0,0 +1,25 @@
+import type { CSSProperties } from 'react';
+import type { LottieAnimationData } from './types';
+export interface LottieProps {
+    /**
+     * JSON object with the animation data.
+     * */
+    animationData: LottieAnimationData;
+    /**
+     * If the animation should loop after its end.
+     */
+    loop?: boolean;
+    /**
+     * The speed of the animation. Defaults to 1.
+     */
+    playbackRate?: number;
+    /**
+     * CSS classes to apply on the container of the animation.
+     */
+    className?: string;
+    /**
+     * CSS properties to apply on the container of the animation.
+     */
+    style?: CSSProperties;
+}
+export declare const Lottie: ({ animationData, className, loop, playbackRate, style, }: LottieProps) => JSX.Element;

package/dist/Lottie.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Lottie = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lottie_web_1 = __importDefault(require("lottie-web"));
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const utils_1 = require("./utils");
+const validate_loop_1 = require("./validate-loop");
+const validate_playbackrate_1 = require("./validate-playbackrate");
+const Lottie = ({ animationData, className, loop, playbackRate, style, }) => {
+    if (typeof animationData !== 'object') {
+        throw new Error('animationData should be provided as an object. If you only have the path to the JSON file, load it and pass it as animationData. See https://remotion.dev/docs/lottie/lottie#example for more information.');
+    }
+    (0, validate_playbackrate_1.validatePlaybackRate)(playbackRate);
+    (0, validate_loop_1.validateLoop)(loop);
+    const animationRef = (0, react_1.useRef)();
+    const lastFrameRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const [handle] = (0, react_1.useState)(() => (0, remotion_1.delayRender)('Waiting for Lottie animation to load'));
+    const frame = (0, remotion_1.useCurrentFrame)();
+    (0, react_1.useEffect)(() => {
+        if (!containerRef.current) {
+            return;
+        }
+        animationRef.current = lottie_web_1.default.loadAnimation({
+            container: containerRef.current,
+            autoplay: false,
+            animationData,
+        });
+        if (lastFrameRef.current) {
+            animationRef.current.goToAndStop(lastFrameRef.current, true);
+        }
+        const { current: animation } = animationRef;
+        const onComplete = () => {
+            (0, remotion_1.continueRender)(handle);
+        };
+        animation.addEventListener('DOMLoaded', onComplete);
+        return () => {
+            lastFrameRef.current = animation.currentFrame;
+            animation.removeEventListener('DOMLoaded', onComplete);
+            animation.destroy();
+        };
+    }, [animationData, handle]);
+    (0, react_1.useEffect)(() => {
+        if (!animationRef.current) {
+            return;
+        }
+        animationRef.current.setSpeed(playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1);
+    }, [playbackRate]);
+    (0, react_1.useEffect)(() => {
+        if (!animationRef.current) {
+            return;
+        }
+        const { totalFrames } = animationRef.current;
+        const expectedFrame = frame * (playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1);
+        const nextFrame = (0, utils_1.getNextFrame)(expectedFrame, totalFrames, loop);
+        animationRef.current.goToAndStop(nextFrame, true);
+    }, [frame, loop, playbackRate]);
+    return (0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: className, style: style });
+};
+exports.Lottie = Lottie;

package/dist/get-lottie-metadata.d.ts

@@ -0,0 +1,10 @@
+import type { LottieAnimationData } from './types';
+declare type LottieMetadata = {
+    fps: number;
+    durationInSeconds: number;
+    durationInFrames: number;
+    width: number;
+    height: number;
+};
+export declare const getLottieMetadata: (animationData: LottieAnimationData) => LottieMetadata | null;
+export {};

package/dist/get-lottie-metadata.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLottieMetadata = void 0;
+const getLottieMetadata = (animationData) => {
+    const width = animationData.w;
+    const height = animationData.h;
+    const framerate = animationData.fr;
+    const durationInFrames = animationData.op;
+    if (![width, height, framerate, durationInFrames].every(Boolean)) {
+        return null;
+    }
+    return {
+        durationInFrames: Math.floor(durationInFrames),
+        durationInSeconds: durationInFrames / framerate,
+        fps: framerate,
+        height,
+        width,
+    };
+};
+exports.getLottieMetadata = getLottieMetadata;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { getLottieMetadata } from './get-lottie-metadata';
+export { Lottie } from './Lottie';
+export type { LottieProps } from './Lottie';
+export type { LottieAnimationData } from './types';

package/dist/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Lottie = exports.getLottieMetadata = void 0;
+var get_lottie_metadata_1 = require("./get-lottie-metadata");
+Object.defineProperty(exports, "getLottieMetadata", { enumerable: true, get: function () { return get_lottie_metadata_1.getLottieMetadata; } });
+var Lottie_1 = require("./Lottie");
+Object.defineProperty(exports, "Lottie", { enumerable: true, get: function () { return Lottie_1.Lottie; } });

package/dist/test/get-lottie-metadata.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/get-lottie-metadata.test.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const vitest_1 = require("vitest");
+const get_lottie_metadata_1 = require("../get-lottie-metadata");
+(0, vitest_1.test)('Should be able to get Lottie metadata', () => {
+    const file = fs_1.default.readFileSync(path_1.default.join(__dirname, 'example.json'), 'utf-8');
+    const parsed = JSON.parse(file);
+    (0, vitest_1.expect)((0, get_lottie_metadata_1.getLottieMetadata)(parsed)).toEqual({
+        durationInFrames: 90,
+        durationInSeconds: 3.0030030030030037,
+        fps: 29.9700012207031,
+        height: 1080,
+        width: 1920,
+    });
+});
+(0, vitest_1.test)('Should return null if invalid Lottie file', () => {
+    // @ts-expect-error
+    (0, vitest_1.expect)((0, get_lottie_metadata_1.getLottieMetadata)({})).toEqual(null);
+});

package/dist/test/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/utils.test.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const utils_1 = require("../utils");
+(0, vitest_1.describe)('getNextFrame', () => {
+    (0, vitest_1.describe)('when loop is falsy', () => {
+        (0, vitest_1.it)('returns the current frame if smaller than total frames', () => {
+            (0, vitest_1.expect)((0, utils_1.getNextFrame)(23, 56)).toBe(23);
+        });
+        (0, vitest_1.it)('returns the last frame if current frame is bigger than total frames', () => {
+            (0, vitest_1.expect)((0, utils_1.getNextFrame)(23, 20)).toBe(20);
+        });
+    });
+    (0, vitest_1.describe)('when loop is truthy', () => {
+        (0, vitest_1.it)('returns the current frame if smaller than total frames', () => {
+            (0, vitest_1.expect)((0, utils_1.getNextFrame)(23, 56, true)).toBe(23);
+        });
+        (0, vitest_1.it)('returns the last frame if current frame is bigger than total frames', () => {
+            (0, vitest_1.expect)((0, utils_1.getNextFrame)(23, 20, true)).toBe(3);
+        });
+    });
+});

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+export declare type LottieAnimationData = {
+    fr: number;
+    w: number;
+    h: number;
+    op: number;
+} & Record<string | number | symbol, unknown>;

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils.d.ts

@@ -0,0 +1 @@
+export declare const getNextFrame: (currentFrame: number, totalFrames: number, loop?: boolean) => number;

package/dist/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNextFrame = void 0;
+const getNextFrame = (currentFrame, totalFrames, loop) => {
+    return loop
+        ? currentFrame % totalFrames
+        : Math.min(currentFrame, totalFrames);
+};
+exports.getNextFrame = getNextFrame;

package/dist/validate-loop.d.ts

@@ -0,0 +1 @@
+export declare const validateLoop: (loop: unknown) => void;

package/dist/validate-loop.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateLoop = void 0;
+const validateLoop = (loop) => {
+    if (typeof loop === 'undefined') {
+        return;
+    }
+    if (typeof loop !== 'boolean') {
+        throw new TypeError(`The "loop" prop must be a boolean or undefined, but is "${JSON.stringify(loop)}"`);
+    }
+};
+exports.validateLoop = validateLoop;

package/dist/validate-playbackrate.d.ts

@@ -0,0 +1 @@
+export declare const validatePlaybackRate: (playbackRate: unknown) => void;

package/dist/validate-playbackrate.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validatePlaybackRate = void 0;
+const validatePlaybackRate = (playbackRate) => {
+    if (typeof playbackRate === 'undefined') {
+        return;
+    }
+    if (typeof playbackRate !== 'number') {
+        throw new TypeError(`The "playbackRate" prop must be a number or undefined, but is ${JSON.stringify(playbackRate)}`);
+    }
+    if (Number.isNaN(playbackRate) || !Number.isFinite(playbackRate)) {
+        throw new TypeError(`The "playbackRate" props must be a real number, but is ${playbackRate}`);
+    }
+    if (playbackRate <= 0) {
+        throw new TypeError(`The "playbackRate" props must be positive, but is ${playbackRate}`);
+    }
+};
+exports.validatePlaybackRate = validatePlaybackRate;

package/package.json

@@ -0,0 +1,62 @@
+{
+	"name": "@remotion/lottie",
+	"version": "3.2.0",
+	"description": "Remotion Lottie",
+	"main": "dist/index.js",
+	"sideEffects": false,
+	"scripts": {
+		"lint": "eslint src --ext ts,tsx",
+		"test": "vitest --run",
+		"build": "tsc -d",
+		"watch": "tsc -w"
+	},
+	"repository": {
+		"url": "https://github.com/remotion-dev/remotion"
+	},
+	"bugs": {
+		"url": "https://github.com/remotion-dev/remotion/issues"
+	},
+	"files": [
+		"dist",
+		"README.md"
+	],
+	"author": "Arthur Denner <arthurdenner7@gmail.com>",
+	"maintainers": [
+		"Jonny Burger <jonny@remotion.dev>",
+		"Arthur Denner <arthurdenner7@gmail.com>"
+	],
+	"license": "SEE LICENSE IN LICENSE.md",
+	"dependencies": {
+		"remotion": "3.2.0"
+	},
+	"peerDependencies": {
+		"lottie-web": "^5",
+		"react": ">=16.8.0",
+		"react-dom": ">=16.8.0"
+	},
+	"devDependencies": {
+		"@jonny/eslint-config": "3.0.266",
+		"@types/node": "^16.7.5",
+		"@types/react": "18.0.1",
+		"@types/react-dom": "18.0.0",
+		"eslint": "8.13.0",
+		"prettier": "^2.0.5",
+		"prettier-plugin-organize-imports": "^2.3.4",
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0",
+		"typescript": "^4.7.0",
+		"vitest": "^0.18.0"
+	},
+	"keywords": [
+		"remotion",
+		"ffmpeg",
+		"video",
+		"react",
+		"puppeteer",
+		"player"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"gitHead": "47b188161a9e922a247eaa998e72d37af9137707"
+}