@remotion/gif 3.0.0-processing.7 → 3.0.0-rc.1

package/LICENSE.md

@@ -7,7 +7,7 @@ Depending on the type of your legal entity, you are granted permission to use Re
 
 ## Free license
 
-Copyright © 2021 [Jonny Burger](https://jonny.io)
+Copyright © 2022 [Jonny Burger](https://jonny.io)
 
 ### Eligibility
 
@@ -32,7 +32,7 @@ The software is provided "as is", without warranty of any kind, express or impli
 
 ### Support
 
-Support is provided on a best-we-can-do basis via GitHub Issues.
+Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
 
 ## Company license
 

package/README.md

@@ -0,0 +1,58 @@
+### Remotion GIF
+
+[![NPM Version](https://img.shields.io/npm/v/@remotion/player.svg?style=flat)](https://www.npmjs.org/package/@remotion/player)
+[![NPM Downloads](https://img.shields.io/npm/dm/@remotion/player.svg?style=flat)](https://npmcharts.com/compare/@remotion/player?minimal=true)
+[![Install Size](https://packagephobia.now.sh/badge?p=@remotion/player)](https://packagephobia.now.sh/result?p=@remotion/player)
+
+The Remotion GIF package allows you to embed GIFs into a [Remotion](https://remotion.dev) composition that synchronizes with Remotion's `useCurrentFrame()`'s hook.
+
+To use this package, we'll be assuming [you already have a Remotion project](https://remotion.dev/docs).
+
+Use the same package manager to install this package that you have used to initialize your Remotion project:
+
+```bash 
+npm i @remotion/gif
+```
+
+```bash
+yarn add @remotion/gif
+```
+
+```bash
+pnpm i @remotion/gif
+```
+
+> Make sure all Remotion packages you install (`remotion`, `@remotion/player`, `@remotion/gif`...) [have the same version](https://remotion.dev/docs/version-mismatch).
+
+### Basic Example
+
+This will render a GIF that fills the whole size of the composition:
+
+```javascript
+import { useVideoConfig } from "remotion";
+import { Gif } from "@remotion/gif";
+ 
+export const MyComponent = () => {
+  const { width, height } = useVideoConfig();
+ 
+  return (
+    <Gif
+      src="https://media.giphy.com/media/3o72F7YT6s0EMFI0Za/giphy.gif"
+      width={width}
+      height={height}
+      fit="fill"
+    />
+  );
+};
+```
+
+### API
+
+Prop | Function |
+--- | --- | 
+src | is a required prop, and it is the source of the GIF. It can be a URL or a local image - [See how you can import assets](https://www.remotion.dev/docs/assets).| 
+width | The display width of the GIF
+height | The display height of the GIF
+fill | The layout of the GIF in its current container. It accepts the following values: `fill`, `contain`, and `cover`
+
+For a complete reference of the available props, refer to [the @remotion/gif documentation](https://www.remotion.dev/docs/gif).

package/dist/Gif.js

@@ -7,9 +7,9 @@ const GifForDevelopment_1 = require("./GifForDevelopment");
 const GifForRendering_1 = require("./GifForRendering");
 const Gif = (props) => {
     if (remotion_1.Internals.getRemotionEnvironment() === 'rendering') {
-        return (0, jsx_runtime_1.jsx)(GifForRendering_1.GifForRendering, Object.assign({}, props), void 0);
+        return (0, jsx_runtime_1.jsx)(GifForRendering_1.GifForRendering, { ...props }, void 0);
     }
-    return (0, jsx_runtime_1.jsx)(GifForDevelopment_1.GifForDevelopment, Object.assign({}, props), void 0);
+    return (0, jsx_runtime_1.jsx)(GifForDevelopment_1.GifForDevelopment, { ...props }, void 0);
 };
 exports.Gif = Gif;
 //# sourceMappingURL=Gif.js.map

package/dist/Gif.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gif.js","sourceRoot":"","sources":["../src/Gif.tsx"],"names":[],"mappings":";;;;AACA,uCAAmC;AACnC,2DAAsD;AACtD,uDAAkD;AAG3C,MAAM,GAAG,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC9C,IAAI,oBAAS,CAAC,sBAAsB,EAAE,KAAK,WAAW,EAAE;QACvD,OAAO,uBAAC,iCAAe,oBAAK,KAAK,UAAI,CAAC;KACtC;IAED,OAAO,uBAAC,qCAAiB,oBAAK,KAAK,UAAI,CAAC;AACzC,CAAC,CAAC;AANW,QAAA,GAAG,OAMd"}
+{"version":3,"file":"Gif.js","sourceRoot":"","sources":["../src/Gif.tsx"],"names":[],"mappings":";;;;AACA,uCAAmC;AACnC,2DAAsD;AACtD,uDAAkD;AAG3C,MAAM,GAAG,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC9C,IAAI,oBAAS,CAAC,sBAAsB,EAAE,KAAK,WAAW,EAAE;QACvD,OAAO,uBAAC,iCAAe,OAAK,KAAK,WAAI,CAAC;KACtC;IAED,OAAO,uBAAC,qCAAiB,OAAK,KAAK,WAAI,CAAC;AACzC,CAAC,CAAC;AANW,QAAA,GAAG,OAMd"}

package/dist/GifForDevelopment.js

@@ -37,6 +37,6 @@ exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onErr
         }
     });
     const index = (0, useCurrentGifIndex_1.useCurrentGifIndex)(state.delays);
-    return ((0, jsx_runtime_1.jsx)(tools_1.Canvas, Object.assign({ fit: fit, index: index, frames: state.frames, width: width !== null && width !== void 0 ? width : state.width, height: height !== null && height !== void 0 ? height : state.height }, props, { ref: ref }), void 0));
+    return ((0, jsx_runtime_1.jsx)(tools_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width !== null && width !== void 0 ? width : state.width, height: height !== null && height !== void 0 ? height : state.height, ...props, ref: ref }, void 0));
 });
 //# sourceMappingURL=GifForDevelopment.js.map

package/dist/GifForDevelopment.js.map

@@ -1 +1 @@
-{"version":3,"file":"GifForDevelopment.js","sourceRoot":"","sources":["../src/GifForDevelopment.tsx"],"names":[],"mappings":";;;;AAAA,6CAA0D;AAC1D,qCAA+B;AAC/B,iCAAkD;AAElD,6DAAwD;AAExD,MAAM,KAAK,GAAG,IAAI,gBAAM,CAAmB,EAAE,CAAC,CAAC;AAElC,QAAA,iBAAiB,GAAG,IAAA,kBAAU,EAGzC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,GAAG,MAAM,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE;IACxE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAW,GAAG,EAAE;QAC/C,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAEjC,IAAI,SAAS,KAAK,SAAS,EAAE;YAC5B,OAAO;gBACN,MAAM,EAAE,EAAE;gBACV,MAAM,EAAE,EAAE;gBACV,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;aACT,CAAC;SACF;QAED,OAAO,SAAqB,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,+BAA+B;IAC/B,IAAA,uBAAe,EAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;QAC7D,IAAI,OAAO,IAAI,IAAI,EAAE;YACpB,IAAI,OAAO,EAAE;gBACZ,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACpB;iBAAM;gBACN,OAAO,CAAC,KAAK,CACZ,oBAAoB,EACpB,IAAI,CAAC,KAAK,EACV,2EAA2E,CAC3E,CAAC;aACF;SACD;aAAM;YACN,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,IAAI,CAAC,CAAC;YAEf,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;YACrB,MAAM,CAAC,IAAI,CAAC,CAAC;SACb;IACF,CAAC,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,IAAA,uCAAkB,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAE/C,OAAO,CACN,uBAAC,cAAM,kBACN,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,CAAC,KAAK,EAC3B,MAAM,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,CAAC,MAAM,IAC1B,KAAK,IACT,GAAG,EAAE,GAAG,YACP,CACF,CAAC;AACH,CAAC,CAAC,CAAC"}
+{"version":3,"file":"GifForDevelopment.js","sourceRoot":"","sources":["../src/GifForDevelopment.tsx"],"names":[],"mappings":";;;;AAAA,6CAA0D;AAC1D,qCAA+B;AAC/B,iCAAkD;AAElD,6DAAwD;AAExD,MAAM,KAAK,GAAG,IAAI,gBAAM,CAAmB,EAAE,CAAC,CAAC;AAElC,QAAA,iBAAiB,GAAG,IAAA,kBAAU,EAGzC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,GAAG,MAAM,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE;IACxE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAW,GAAG,EAAE;QAC/C,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAEjC,IAAI,SAAS,KAAK,SAAS,EAAE;YAC5B,OAAO;gBACN,MAAM,EAAE,EAAE;gBACV,MAAM,EAAE,EAAE;gBACV,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;aACT,CAAC;SACF;QAED,OAAO,SAAqB,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,+BAA+B;IAC/B,IAAA,uBAAe,EAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;QAC7D,IAAI,OAAO,IAAI,IAAI,EAAE;YACpB,IAAI,OAAO,EAAE;gBACZ,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACpB;iBAAM;gBACN,OAAO,CAAC,KAAK,CACZ,oBAAoB,EACpB,IAAI,CAAC,KAAK,EACV,2EAA2E,CAC3E,CAAC;aACF;SACD;aAAM;YACN,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,IAAI,CAAC,CAAC;YAEf,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;YACrB,MAAM,CAAC,IAAI,CAAC,CAAC;SACb;IACF,CAAC,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,IAAA,uCAAkB,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAE/C,OAAO,CACN,uBAAC,cAAM,IACN,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,CAAC,KAAK,EAC3B,MAAM,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,CAAC,MAAM,KAC1B,KAAK,EACT,GAAG,EAAE,GAAG,WACP,CACF,CAAC;AACH,CAAC,CAAC,CAAC"}

package/dist/GifForRendering.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GifForRendering.d.ts","sourceRoot":"","sources":["../src/GifForRendering.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAW,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAGnD,eAAO,MAAM,eAAe,4FA4C3B,CAAC"}
+{"version":3,"file":"GifForRendering.d.ts","sourceRoot":"","sources":["../src/GifForRendering.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAW,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAGnD,eAAO,MAAM,eAAe,4FA8C3B,CAAC"}

package/dist/GifForRendering.js

@@ -13,7 +13,7 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
         width: 0,
         height: 0,
     });
-    const [id] = (0, react_1.useState)(() => (0, remotion_1.delayRender)());
+    const [id] = (0, react_1.useState)(() => (0, remotion_1.delayRender)(`Rendering <Gif/> with src="${src}"`));
     const index = (0, useCurrentGifIndex_1.useCurrentGifIndex)(state.delays);
     (0, tools_1.useParser)(src, (info) => {
         if ('error' in info) {
@@ -30,6 +30,6 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
         }
         (0, remotion_1.continueRender)(id);
     });
-    return ((0, jsx_runtime_1.jsx)(tools_1.Canvas, Object.assign({ fit: fit, index: index, frames: state.frames, width: width !== null && width !== void 0 ? width : state.width, height: height !== null && height !== void 0 ? height : state.height }, props, { ref: ref }), void 0));
+    return ((0, jsx_runtime_1.jsx)(tools_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width !== null && width !== void 0 ? width : state.width, height: height !== null && height !== void 0 ? height : state.height, ...props, ref: ref }, void 0));
 });
 //# sourceMappingURL=GifForRendering.js.map

package/dist/GifForRendering.js.map

@@ -1 +1 @@
-{"version":3,"file":"GifForRendering.js","sourceRoot":"","sources":["../src/GifForRendering.tsx"],"names":[],"mappings":";;;;AAAA,6CAAoD;AACpD,iCAAkD;AAClD,uCAAqD;AAErD,6DAAwD;AAE3C,QAAA,eAAe,GAAG,IAAA,kBAAU,EACxC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,GAAG,MAAM,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAW;QAC1C,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACT,CAAC,CAAC;IAEH,MAAM,CAAC,EAAE,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,IAAA,sBAAW,GAAE,CAAC,CAAC;IAE3C,MAAM,KAAK,GAAG,IAAA,uCAAkB,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAE/C,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;QACvB,IAAI,OAAO,IAAI,IAAI,EAAE;YACpB,IAAI,OAAO,EAAE;gBACZ,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACpB;iBAAM;gBACN,OAAO,CAAC,KAAK,CACZ,oBAAoB,EACpB,IAAI,CAAC,KAAK,EACV,2EAA2E,CAC3E,CAAC;aACF;SACD;aAAM;YACN,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,IAAI,CAAC,CAAC;YACf,MAAM,CAAC,IAAI,CAAC,CAAC;SACb;QAED,IAAA,yBAAc,EAAC,EAAE,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,OAAO,CACN,uBAAC,cAAM,kBACN,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,CAAC,KAAK,EAC3B,MAAM,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,CAAC,MAAM,IAC1B,KAAK,IACT,GAAG,EAAE,GAAG,YACP,CACF,CAAC;AACH,CAAC,CACD,CAAC"}
+{"version":3,"file":"GifForRendering.js","sourceRoot":"","sources":["../src/GifForRendering.tsx"],"names":[],"mappings":";;;;AAAA,6CAAoD;AACpD,iCAAkD;AAClD,uCAAqD;AAErD,6DAAwD;AAE3C,QAAA,eAAe,GAAG,IAAA,kBAAU,EACxC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,GAAG,MAAM,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAW;QAC1C,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACT,CAAC,CAAC;IAEH,MAAM,CAAC,EAAE,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAC1B,IAAA,sBAAW,EAAC,8BAA8B,GAAG,GAAG,CAAC,CACjD,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,uCAAkB,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAE/C,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;QACvB,IAAI,OAAO,IAAI,IAAI,EAAE;YACpB,IAAI,OAAO,EAAE;gBACZ,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACpB;iBAAM;gBACN,OAAO,CAAC,KAAK,CACZ,oBAAoB,EACpB,IAAI,CAAC,KAAK,EACV,2EAA2E,CAC3E,CAAC;aACF;SACD;aAAM;YACN,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,IAAI,CAAC,CAAC;YACf,MAAM,CAAC,IAAI,CAAC,CAAC;SACb;QAED,IAAA,yBAAc,EAAC,EAAE,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,OAAO,CACN,uBAAC,cAAM,IACN,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,CAAC,KAAK,EAC3B,MAAM,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,CAAC,MAAM,KAC1B,KAAK,EACT,GAAG,EAAE,GAAG,WACP,CACF,CAAC;AACH,CAAC,CACD,CAAC"}

package/package.json

@@ -1,11 +1,14 @@
 {
 	"name": "@remotion/gif",
-	"version": "3.0.0-processing.7+f6f27a6d1",
+	"version": "3.0.0-rc.1",
 	"description": "Gif component for remotion",
 	"sideEffects": false,
 	"repository": {
 		"url": "https://github.com/remotion-dev/remotion"
 	},
+	"bugs": {
+		"url": "https://github.com/remotion-dev/remotion/issues"
+	},
 	"license": "SEE LICENSE IN LICENSE.md",
 	"author": "",
 	"main": "dist/index.js",
@@ -13,35 +16,43 @@
 		"dist"
 	],
 	"scripts": {
-		"test": "eslint src --ext ts,tsx ",
+		"lint": "eslint src --ext ts,tsx",
 		"build": "tsc -d",
 		"watch": "tsc -w"
 	},
 	"dependencies": {
-		"@react-gifs/tools": "^0.1.1",
-		"lru_map": "^0.4.1",
-		"remotion": "3.0.0-processing.7+f6f27a6d1"
+		"@react-gifs/tools": "0.1.2",
+		"lru_map": "0.4.1",
+		"remotion": "3.0.0-rc.1"
 	},
 	"devDependencies": {
-		"@jonny/eslint-config": "^2.1.248",
-		"@testing-library/react": "^11.2.2",
-		"@types/jest": "^27.0.2",
+		"@jonny/eslint-config": "3.0.259",
 		"@types/node": "^16.7.5",
-		"@types/react": "17.0.27",
-		"@types/react-dom": "^17.0.0",
-		"eslint": "^7.25.0",
+		"@types/react": "18.0.1",
+		"@types/react-dom": "18.0.0",
+		"eslint": "8.13.0",
 		"jest": "^27.2.4",
+		"prettier": "2.6.2",
 		"prettier-plugin-organize-imports": "^1.1.1",
-		"ts-jest": "^27.0.5",
-		"typescript": "^4.4.2",
+		"react": "18.0.0",
+		"react-dom": "18.0.0",
+		"typescript": "^4.5.5",
 		"webpack": "5.60.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.1",
-		"react-dom": "^17.0.1"
+		"react": ">=16.8.0",
+		"react-dom": ">=16.8.0"
 	},
+	"keywords": [
+		"remotion",
+		"ffmpeg",
+		"video",
+		"react",
+		"puppeteer",
+		"player"
+	],
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f6f27a6d1796bfd231648db013f8f89128aaaa16"
+	"gitHead": "1908be17649b132109b71da2d1065293dbfcb0a3"
 }