Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@remotion/lottie
Advanced tools
@remotion/lottie - npm Package Compare versions
Comparing version 4.0.0-prefetchinggg.14 to 4.0.0-retry.8
| /// <reference types="react" /> | ||
| import type { LottieProps } from './types'; | ||
| export declare const Lottie: ({ animationData, className, direction, loop, playbackRate, style, }: LottieProps) => JSX.Element; | ||
| export declare const Lottie: ({ animationData, className, direction, loop, playbackRate, style, onAnimationLoaded, }: LottieProps) => JSX.Element; |
@@ -14,3 +14,3 @@ "use strict"; | ||
| const validate_playbackrate_1 = require("./validate-playbackrate"); | ||
| const Lottie = ({ animationData, className, direction, loop, playbackRate, style, }) => { | ||
| const Lottie = ({ animationData, className, direction, loop, playbackRate, style, onAnimationLoaded, }) => { | ||
| if (typeof animationData !== 'object') { | ||
@@ -24,5 +24,8 @@ 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.'); | ||
| const containerRef = (0, react_1.useRef)(null); | ||
| const onAnimationLoadedRef = (0, react_1.useRef)(); | ||
| onAnimationLoadedRef.current = onAnimationLoaded; | ||
| 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)(() => { | ||
| var _a; | ||
| if (!containerRef.current) { | ||
@@ -44,2 +47,3 @@ return; | ||
| animation.addEventListener('DOMLoaded', onComplete); | ||
| (_a = onAnimationLoadedRef.current) === null || _a === void 0 ? void 0 : _a.call(onAnimationLoadedRef, animation); | ||
| return () => { | ||
@@ -62,2 +66,3 @@ lastFrameRef.current = animation.currentFrame; | ||
| (0, react_1.useEffect)(() => { | ||
| var _a; | ||
| if (!animationRef.current) { | ||
@@ -74,2 +79,11 @@ return; | ||
| animationRef.current.goToAndStop(nextFrame, true); | ||
| const images = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('image'); | ||
| images.forEach((img) => { | ||
| const imgHandle = (0, remotion_1.delayRender)(`Waiting for lottie image with src="${img.href.baseVal}" to load`); | ||
| // https://stackoverflow.com/a/46839799 | ||
| img.addEventListener('load', () => { | ||
| (0, remotion_1.continueRender)(imgHandle); | ||
| }, { once: true }); | ||
| img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', img.href.baseVal); | ||
| }); | ||
| }, [direction, frame, loop, playbackRate]); | ||
@@ -76,0 +90,0 @@ return (0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: className, style: style }); |
@@ -0,1 +1,2 @@ | ||
| import type { AnimationItem } from 'lottie-web'; | ||
| import type { CSSProperties } from 'react'; | ||
@@ -33,2 +34,6 @@ export declare type LottieAnimationData = { | ||
| style?: CSSProperties; | ||
| /** | ||
| * Callback that gets invoked when new animation data has been initialized | ||
| */ | ||
| onAnimationLoaded?: (animation: AnimationItem) => void; | ||
| }; |
| # 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. | ||
| 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 to create videos for free (even commercial), while a company license is required for for-profit organizations 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. | ||
@@ -10,3 +10,3 @@ - [Free license](#free-license) | ||
| Copyright © 2022 [Jonny Burger](https://jonny.io) | ||
| Copyright © 2022 [Remotion](https://www.remotion.dev/) | ||
@@ -18,4 +18,4 @@ ### Eligibility | ||
| - an individual | ||
| - a for-profit organisation with up to 3 employees | ||
| - a non-profit or not-for-profit organisation | ||
| - a for-profit organization with up to 3 employees | ||
| - a non-profit or not-for-profit organization | ||
| - evaluating whether Remotion is a good fit, and are not yet using it in a commercial way | ||
@@ -25,11 +25,11 @@ | ||
| 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. | ||
| 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 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. | ||
| It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, or 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. | ||
| 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 non-infringement. 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. | ||
@@ -42,4 +42,4 @@ ### Support | ||
| 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. | ||
| 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 (read the [Support Policy](/docs/support)). | ||
| Visit [companies.remotion.dev](https://companies.remotion.dev) for pricing and to buy a license. |
| { | ||
| "name": "@remotion/lottie", | ||
| "version": "4.0.0-prefetchinggg.14+587f1b29d", | ||
| "version": "4.0.0-retry.8+c5430346e", | ||
| "description": "Remotion Lottie", | ||
@@ -30,3 +30,3 @@ "main": "dist/index.js", | ||
| "dependencies": { | ||
| "remotion": "4.0.0-prefetchinggg.14+587f1b29d" | ||
| "remotion": "4.0.0-retry.8+c5430346e" | ||
| }, | ||
@@ -41,6 +41,6 @@ "peerDependencies": { | ||
| "@types/node": "^16.7.5", | ||
| "@types/react": "18.0.1", | ||
| "@types/react": "18.0.23", | ||
| "@types/react-dom": "18.0.0", | ||
| "eslint": "8.13.0", | ||
| "prettier": "^2.0.5", | ||
| "eslint": "8.25.0", | ||
| "prettier": "^2.7.1", | ||
| "prettier-plugin-organize-imports": "^2.3.4", | ||
@@ -50,3 +50,3 @@ "react": "^18.0.0", | ||
| "typescript": "^4.7.0", | ||
| "vitest": "^0.18.0" | ||
| "vitest": "0.24.3" | ||
| }, | ||
@@ -64,3 +64,3 @@ "keywords": [ | ||
| }, | ||
| "gitHead": "587f1b29d46e4a4e5794a8f9a7f30e36518e8457" | ||
| "gitHead": "c5430346ee9385f740948246b3d0774913f9ad6c" | ||
| } |
New alerts
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Fixed alerts
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by7.13%
16816
- Lines of code
- increased by6.86%
296