@remotion/gif 4.0.213 → 4.0.214

package/.turbo/turbo-make.log

@@ -0,0 +1,4 @@
+
+> @remotion/gif@4.0.214 make /Users/jonathanburger/remotion/packages/gif
+> node build.mjs && bun --env-file=../.env.bundle bundle.ts
+

package/dist/cjs/Gif.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { RemotionGifProps } from './props';
 /**
  * @description Displays a GIF that synchronizes with Remotions useCurrentFrame().

package/dist/cjs/GifForDevelopment.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { RemotionGifProps } from './props';
 export declare const GifForDevelopment: import("react").ForwardRefExoticComponent<RemotionGifProps & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/cjs/GifForRendering.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { RemotionGifProps } from './props';
 export declare const GifForRendering: import("react").ForwardRefExoticComponent<RemotionGifProps & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/cjs/canvas.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { GifFillMode } from './props';
 type Props = {
     index: number;

package/dist/cjs/index.d.ts

@@ -1,4 +1,4 @@
-export { Gif } from './Gif';
 export { getGifDurationInSeconds } from './get-gif-duration-in-seconds';
+export { Gif } from './Gif';
 export { preloadGif } from './preload-gif';
 export { GifFillMode, RemotionGifProps } from './props';

package/dist/cjs/index.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.preloadGif = exports.getGifDurationInSeconds = exports.Gif = void 0;
-var Gif_1 = require("./Gif");
-Object.defineProperty(exports, "Gif", { enumerable: true, get: function () { return Gif_1.Gif; } });
+exports.preloadGif = exports.Gif = exports.getGifDurationInSeconds = void 0;
 var get_gif_duration_in_seconds_1 = require("./get-gif-duration-in-seconds");
 Object.defineProperty(exports, "getGifDurationInSeconds", { enumerable: true, get: function () { return get_gif_duration_in_seconds_1.getGifDurationInSeconds; } });
+var Gif_1 = require("./Gif");
+Object.defineProperty(exports, "Gif", { enumerable: true, get: function () { return Gif_1.Gif; } });
 var preload_gif_1 = require("./preload-gif");
 Object.defineProperty(exports, "preloadGif", { enumerable: true, get: function () { return preload_gif_1.preloadGif; } });

package/dist/cjs/js-binary-schema-parser/gif.d.ts

@@ -1,6 +1,6 @@
 import type { ParsedGif } from '../gifuct/types';
 import type { Stream } from './uint8-parser';
-export declare const GIF: (((stream: Stream, result: ParsedGif, parent: ParsedGif, parseFn: (st: Stream, schema: unknown, result: ParsedGif, parent: ParsedGif) => void) => void) | {
+export declare const GIF: (((stream: Stream, result: ParsedGif, parent: ParsedGif, parseFn: (st: Stream, schema: import("./parser").GifSchema, result: ParsedGif, parent: ParsedGif) => void) => void) | {
     header: ({
         signature: (stream: Stream) => string;
         version?: undefined;
@@ -45,7 +45,7 @@ export declare const GIF: (((stream: Stream, result: ParsedGif, parent: ParsedGi
     header?: undefined;
     frames?: undefined;
 } | {
-    frames: (stream: Stream, result: unknown, parent: unknown, _parse: (st: Stream, schema: unknown, result: unknown, parent: unknown) => void) => unknown[];
+    frames: (stream: Stream, result: unknown, parent: unknown, _parse: (st: Stream, schema: import("./parser").GifSchema, result: unknown, parent: unknown) => void) => unknown[];
     header?: undefined;
     lsd?: undefined;
 })[];

package/dist/cjs/parse-generate.d.ts

@@ -1,6 +1,6 @@
 import type { GifState } from './props';
 export declare const parse: (src: string, { signal, }: {
-    signal: AbortController['signal'];
+    signal: AbortController["signal"];
 }) => Promise<{
     loaded: boolean;
     delays: number[];

package/dist/cjs/props.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type GifLoopBehavior = 'loop' | 'pause-after-finish' | 'unmount-after-finish';
 export type RemotionGifProps = {
     src: string;

package/dist/cjs/useCurrentGifIndex.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCurrentGifIndex = void 0;
+exports.useCurrentGifIndex = useCurrentGifIndex;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 function useCurrentGifIndex({ delays, loopBehavior, playbackRate, }) {
@@ -33,4 +33,3 @@ function useCurrentGifIndex({ delays, loopBehavior, playbackRate, }) {
     }
     return 0;
 }
-exports.useCurrentGifIndex = useCurrentGifIndex;

package/dist/esm/index.mjs

@@ -1,182 +1,6 @@
-// src/Gif.tsx
-import {forwardRef as forwardRef4} from "react";
+// src/get-gif-duration-in-seconds.ts
 import {getRemotionEnvironment} from "remotion";
 
-// src/GifForDevelopment.tsx
-import {forwardRef as forwardRef2, useEffect as useEffect3, useRef as useRef2, useState as useState3} from "react";
-import {continueRender, delayRender} from "remotion";
-
-// src/canvas.tsx
-import {
-forwardRef,
-useEffect as useEffect2,
-useImperativeHandle,
-useRef,
-useState as useState2
-} from "react";
-
-// src/use-element-size.ts
-import {useCallback, useEffect, useMemo, useState} from "react";
-var elementSizeHooks = [];
-var useElementSize = (ref) => {
-  const [size, setSize] = useState(null);
-  const observer = useMemo(() => {
-    if (typeof ResizeObserver === "undefined") {
-      return null;
-    }
-    return new ResizeObserver((entries) => {
-      const { contentRect } = entries[0];
-      const newSize = entries[0].target.getClientRects();
-      if (!newSize?.[0]) {
-        setSize(null);
-        return;
-      }
-      const probableCssParentScale = newSize[0].width / contentRect.width;
-      const width = newSize[0].width * (1 / probableCssParentScale);
-      const height = newSize[0].height * (1 / probableCssParentScale);
-      setSize({
-        width,
-        height
-      });
-    });
-  }, []);
-  const updateSize = useCallback(() => {
-    if (!ref.current) {
-      return;
-    }
-    const rect = ref.current.getClientRects();
-    if (!rect[0]) {
-      setSize(null);
-      return;
-    }
-    setSize({
-      width: rect[0].width,
-      height: rect[0].height
-    });
-  }, [ref]);
-  useEffect(() => {
-    if (!observer) {
-      return;
-    }
-    updateSize();
-    const { current } = ref;
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-    return () => {
-      if (current) {
-        observer.unobserve(current);
-      }
-    };
-  }, [observer, ref, updateSize]);
-  useEffect(() => {
-    elementSizeHooks.push(updateSize);
-    return () => {
-      elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
-    };
-  }, [updateSize]);
-  return size;
-};
-
-// src/canvas.tsx
-import {
-jsx
-} from "react/jsx-runtime";
-var calcArgs = (fit, frameSize, canvasSize) => {
-  switch (fit) {
-    case "fill": {
-      return [
-        0,
-        0,
-        frameSize.width,
-        frameSize.height,
-        0,
-        0,
-        canvasSize.width,
-        canvasSize.height
-      ];
-    }
-    case "contain": {
-      const ratio = Math.min(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
-      const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
-      const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
-      return [
-        0,
-        0,
-        frameSize.width,
-        frameSize.height,
-        centerX,
-        centerY,
-        frameSize.width * ratio,
-        frameSize.height * ratio
-      ];
-    }
-    case "cover": {
-      const ratio = Math.max(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
-      const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
-      const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
-      return [
-        0,
-        0,
-        frameSize.width,
-        frameSize.height,
-        centerX,
-        centerY,
-        frameSize.width * ratio,
-        frameSize.height * ratio
-      ];
-    }
-    default:
-      throw new Error("Unknown fit: " + fit);
-  }
-};
-var makeCanvas = () => {
-  if (typeof document === "undefined") {
-    return null;
-  }
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-  canvas.width = 0;
-  canvas.height = 0;
-  return ctx;
-};
-var Canvas = forwardRef(({ index, frames, width, height, fit, className, style }, ref) => {
-  const canvasRef = useRef(null);
-  const [tempCtx] = useState2(() => {
-    return makeCanvas();
-  });
-  const size = useElementSize(canvasRef);
-  useImperativeHandle(ref, () => {
-    return canvasRef.current;
-  }, []);
-  useEffect2(() => {
-    if (!size) {
-      return;
-    }
-    const imageData = frames[index];
-    const ctx = canvasRef.current?.getContext("2d");
-    if (imageData && tempCtx && ctx) {
-      if (tempCtx.canvas.width < imageData.width || tempCtx.canvas.height < imageData.height) {
-        tempCtx.canvas.width = imageData.width;
-        tempCtx.canvas.height = imageData.height;
-      }
-      if (size.width > 0 && size.height > 0) {
-        ctx.clearRect(0, 0, size.width, size.height);
-        tempCtx.clearRect(0, 0, tempCtx.canvas.width, tempCtx.canvas.height);
-      }
-      tempCtx.putImageData(imageData, 0, 0);
-      ctx.drawImage(tempCtx.canvas, ...calcArgs(fit, imageData, { width: size.width, height: size.height }));
-    }
-  }, [index, frames, fit, tempCtx, size]);
-  return /* @__PURE__ */ jsx("canvas", {
-    ref: canvasRef,
-    className,
-    style,
-    width: width ?? size?.width,
-    height: height ?? size?.height
-  });
-});
-
 // src/lru/index.ts
 class QuickLRU {
   maxAge;
@@ -411,11 +235,6 @@ class QuickLRU {
 var volatileGifCache = new QuickLRU({ maxSize: 30 });
 var manuallyManagedGifCache = new Map;
 
-// src/is-cors-error.ts
-var isCorsError = (error) => {
-  return error.message.includes("Failed to fetch") || error.message.includes("Load failed") || error.message.includes("NetworkError when attempting to fetch resource");
-};
-
 // src/js-binary-schema-parser/parser.ts
 var parse = (stream, schema, result = {}, parent = result) => {
   if (Array.isArray(schema)) {
@@ -968,6 +787,213 @@ var parseWithWorker = (src2) => {
   };
 };
 
+// src/get-gif-duration-in-seconds.ts
+var calcDuration = (parsed) => {
+  return parsed.delays.reduce((sum, delay) => sum + delay, 0) / 1000;
+};
+var getGifDurationInSeconds = async (src2) => {
+  const resolvedSrc = new URL(src2, window.origin).href;
+  const inCache = volatileGifCache.get(resolvedSrc) ?? manuallyManagedGifCache.get(resolvedSrc);
+  if (inCache) {
+    return calcDuration(inCache);
+  }
+  if (getRemotionEnvironment().isRendering) {
+    const renderingParsed = parseWithWorker(resolvedSrc);
+    const resolved = await renderingParsed.prom;
+    volatileGifCache.set(resolvedSrc, resolved);
+    return calcDuration(resolved);
+  }
+  const parsed = await parseGif({
+    src: resolvedSrc,
+    controller: new AbortController
+  });
+  volatileGifCache.set(resolvedSrc, parsed);
+  return calcDuration(parsed);
+};
+// src/Gif.tsx
+import {forwardRef as forwardRef4} from "react";
+import {getRemotionEnvironment as getRemotionEnvironment2} from "remotion";
+
+// src/GifForDevelopment.tsx
+import {forwardRef as forwardRef2, useEffect as useEffect3, useRef as useRef2, useState as useState3} from "react";
+import {continueRender, delayRender} from "remotion";
+
+// src/canvas.tsx
+import {
+forwardRef,
+useEffect as useEffect2,
+useImperativeHandle,
+useRef,
+useState as useState2
+} from "react";
+
+// src/use-element-size.ts
+import {useCallback, useEffect, useMemo, useState} from "react";
+var elementSizeHooks = [];
+var useElementSize = (ref) => {
+  const [size, setSize] = useState(null);
+  const observer = useMemo(() => {
+    if (typeof ResizeObserver === "undefined") {
+      return null;
+    }
+    return new ResizeObserver((entries) => {
+      const { contentRect } = entries[0];
+      const newSize = entries[0].target.getClientRects();
+      if (!newSize?.[0]) {
+        setSize(null);
+        return;
+      }
+      const probableCssParentScale = newSize[0].width / contentRect.width;
+      const width = newSize[0].width * (1 / probableCssParentScale);
+      const height = newSize[0].height * (1 / probableCssParentScale);
+      setSize({
+        width,
+        height
+      });
+    });
+  }, []);
+  const updateSize = useCallback(() => {
+    if (!ref.current) {
+      return;
+    }
+    const rect = ref.current.getClientRects();
+    if (!rect[0]) {
+      setSize(null);
+      return;
+    }
+    setSize({
+      width: rect[0].width,
+      height: rect[0].height
+    });
+  }, [ref]);
+  useEffect(() => {
+    if (!observer) {
+      return;
+    }
+    updateSize();
+    const { current } = ref;
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      if (current) {
+        observer.unobserve(current);
+      }
+    };
+  }, [observer, ref, updateSize]);
+  useEffect(() => {
+    elementSizeHooks.push(updateSize);
+    return () => {
+      elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
+    };
+  }, [updateSize]);
+  return size;
+};
+
+// src/canvas.tsx
+import {
+jsx
+} from "react/jsx-runtime";
+var calcArgs = (fit, frameSize, canvasSize) => {
+  switch (fit) {
+    case "fill": {
+      return [
+        0,
+        0,
+        frameSize.width,
+        frameSize.height,
+        0,
+        0,
+        canvasSize.width,
+        canvasSize.height
+      ];
+    }
+    case "contain": {
+      const ratio = Math.min(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
+      const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
+      const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
+      return [
+        0,
+        0,
+        frameSize.width,
+        frameSize.height,
+        centerX,
+        centerY,
+        frameSize.width * ratio,
+        frameSize.height * ratio
+      ];
+    }
+    case "cover": {
+      const ratio = Math.max(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
+      const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
+      const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
+      return [
+        0,
+        0,
+        frameSize.width,
+        frameSize.height,
+        centerX,
+        centerY,
+        frameSize.width * ratio,
+        frameSize.height * ratio
+      ];
+    }
+    default:
+      throw new Error("Unknown fit: " + fit);
+  }
+};
+var makeCanvas = () => {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.width = 0;
+  canvas.height = 0;
+  return ctx;
+};
+var Canvas = forwardRef(({ index, frames, width, height, fit, className, style }, ref) => {
+  const canvasRef = useRef(null);
+  const [tempCtx] = useState2(() => {
+    return makeCanvas();
+  });
+  const size = useElementSize(canvasRef);
+  useImperativeHandle(ref, () => {
+    return canvasRef.current;
+  }, []);
+  useEffect2(() => {
+    if (!size) {
+      return;
+    }
+    const imageData = frames[index];
+    const ctx = canvasRef.current?.getContext("2d");
+    if (imageData && tempCtx && ctx) {
+      if (tempCtx.canvas.width < imageData.width || tempCtx.canvas.height < imageData.height) {
+        tempCtx.canvas.width = imageData.width;
+        tempCtx.canvas.height = imageData.height;
+      }
+      if (size.width > 0 && size.height > 0) {
+        ctx.clearRect(0, 0, size.width, size.height);
+        tempCtx.clearRect(0, 0, tempCtx.canvas.width, tempCtx.canvas.height);
+      }
+      tempCtx.putImageData(imageData, 0, 0);
+      ctx.drawImage(tempCtx.canvas, ...calcArgs(fit, imageData, { width: size.width, height: size.height }));
+    }
+  }, [index, frames, fit, tempCtx, size]);
+  return /* @__PURE__ */ jsx("canvas", {
+    ref: canvasRef,
+    className,
+    style,
+    width: width ?? size?.width,
+    height: height ?? size?.height
+  });
+});
+
+// src/is-cors-error.ts
+var isCorsError = (error) => {
+  return error.message.includes("Failed to fetch") || error.message.includes("Load failed") || error.message.includes("NetworkError when attempting to fetch resource");
+};
+
 // src/resolve-gif-source.ts
 var resolveGifSource = (src2) => {
   return new URL(src2, typeof window === "undefined" ? undefined : window.origin).href;
@@ -1205,7 +1231,7 @@ import {
 jsx as jsx4
 } from "react/jsx-runtime";
 var Gif = forwardRef4((props, ref) => {
-  const env = getRemotionEnvironment();
+  const env = getRemotionEnvironment2();
   if (env.isRendering) {
     return /* @__PURE__ */ jsx4(GifForRendering, {
       ...props,
@@ -1217,30 +1243,6 @@ var Gif = forwardRef4((props, ref) => {
     ref
   });
 });
-// src/get-gif-duration-in-seconds.ts
-import {getRemotionEnvironment as getRemotionEnvironment2} from "remotion";
-var calcDuration = (parsed) => {
-  return parsed.delays.reduce((sum, delay) => sum + delay, 0) / 1000;
-};
-var getGifDurationInSeconds = async (src2) => {
-  const resolvedSrc = new URL(src2, window.origin).href;
-  const inCache = volatileGifCache.get(resolvedSrc) ?? manuallyManagedGifCache.get(resolvedSrc);
-  if (inCache) {
-    return calcDuration(inCache);
-  }
-  if (getRemotionEnvironment2().isRendering) {
-    const renderingParsed = parseWithWorker(resolvedSrc);
-    const resolved = await renderingParsed.prom;
-    volatileGifCache.set(resolvedSrc, resolved);
-    return calcDuration(resolved);
-  }
-  const parsed = await parseGif({
-    src: resolvedSrc,
-    controller: new AbortController
-  });
-  volatileGifCache.set(resolvedSrc, parsed);
-  return calcDuration(parsed);
-};
 // src/preload-gif.ts
 var preloadGif = (src2) => {
   const resolvedSrc = resolveGifSource(src2);

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/gif"
   },
   "name": "@remotion/gif",
-  "version": "4.0.213",
+  "version": "4.0.214",
   "description": "Embed GIFs in a Remotion video",
   "sideEffects": false,
   "bugs": {
@@ -24,7 +24,7 @@
     }
   },
   "dependencies": {
-    "remotion": "4.0.213"
+    "remotion": "4.0.214"
   },
   "devDependencies": {
     "esbuild": "0.18.6",
@@ -50,6 +50,6 @@
   "scripts": {
     "formatting": "prettier src --check",
     "lint": "eslint src --ext ts,tsx",
-    "build": "node build.mjs && bun --env-file=../.env.bundle bundle.ts"
+    "make": "node build.mjs && bun --env-file=../.env.bundle bundle.ts"
   }
 }

package/.turbo/turbo-build.log

@@ -1,4 +0,0 @@
-
-> @remotion/gif@4.0.213 build /Users/jonathanburger/remotion/packages/gif
-> node build.mjs && bun --env-file=../.env.bundle bundle.ts
-

package/.turbo/turbo-formatting.log

@@ -1,6 +0,0 @@
-
-> @remotion/gif@4.0.211 formatting /Users/jonathanburger/remotion/packages/gif
-> prettier src --check
-
-Checking formatting...
-src/canvas.tsxsrc/get-gif-duration-in-seconds.tssrc/gif-cache.tssrc/Gif.tsxsrc/GifForDevelopment.tsxsrc/GifForRendering.tsxsrc/gifuct/deinterlace.tssrc/gifuct/index.tssrc/gifuct/lzw.tssrc/gifuct/types.tssrc/index.tssrc/is-cors-error.tssrc/js-binary-schema-parser/gif.tssrc/js-binary-schema-parser/parser.tssrc/js-binary-schema-parser/uint8-parser.tssrc/lru/index.tssrc/parse-generate.tssrc/parser/decompress-frames.tssrc/preload-gif.tssrc/props.tssrc/react-tools.tssrc/resolve-gif-source.tssrc/use-element-size.tssrc/useCurrentGifIndex.tsxsrc/worker/index.tssrc/worker/source.tssrc/worker/worker.tsAll matched files use Prettier code style!

package/.turbo/turbo-lint.log

@@ -1,4 +0,0 @@
-
-> @remotion/gif@4.0.211 lint /Users/jonathanburger/remotion/packages/gif
-> eslint src --ext ts,tsx
-