@remotion/gif 3.1.4 → 3.1.7

package/dist/GifForRendering.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const tools_1 = require("@react-gifs/tools");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const is_cors_error_1 = require("./is-cors-error");
 const useCurrentGifIndex_1 = require("./useCurrentGifIndex");
 exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad, onError, fit = 'fill', ...props }, ref) => {
     const resolvedSrc = new URL(src, window.location.origin).href;
@@ -14,6 +15,7 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
         width: 0,
         height: 0,
     });
+    const [error, setError] = (0, react_1.useState)(null);
     const [id] = (0, react_1.useState)(() => (0, remotion_1.delayRender)(`Rendering <Gif/> with src="${resolvedSrc}"`));
     const index = (0, useCurrentGifIndex_1.useCurrentGifIndex)(state.delays);
     (0, tools_1.useParser)(resolvedSrc, (info) => {
@@ -22,7 +24,7 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
                 onError(info.error);
             }
             else {
-                console.error('Error loading GIF:', info.error, 'Handle the event using the onError() prop to make this message disappear.');
+                setError(info.error);
             }
         }
         else {
@@ -31,5 +33,12 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
         }
         (0, remotion_1.continueRender)(id);
     });
+    if (error) {
+        console.error(error.stack);
+        if ((0, is_cors_error_1.isCorsError)(error)) {
+            throw new Error(`Failed to render GIF with source ${src}: "${error.message}". You must enable CORS for this URL.`);
+        }
+        throw new Error(`Failed to render GIF with source ${src}: "${error.message}". Render with --log=verbose to see the full stack.`);
+    }
     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 }));
 });

package/dist/is-cors-error.d.ts

@@ -0,0 +1 @@
+export declare const isCorsError: (error: Error) => boolean;

package/dist/is-cors-error.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCorsError = void 0;
+const isCorsError = (error) => {
+    return (
+    // Chrome
+    error.message.includes('Failed to fetch') ||
+        // Safari
+        error.message.includes('Load failed') ||
+        // Firefox
+        error.message.includes('NetworkError when attempting to fetch resource'));
+};
+exports.isCorsError = isCorsError;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/gif",
-	"version": "3.1.4",
+	"version": "3.1.7",
 	"description": "Gif component for remotion",
 	"sideEffects": false,
 	"repository": {
@@ -23,7 +23,7 @@
 	"dependencies": {
 		"@react-gifs/tools": "0.1.2",
 		"lru_map": "0.4.1",
-		"remotion": "3.1.4"
+		"remotion": "3.1.7"
 	},
 	"devDependencies": {
 		"@jonny/eslint-config": "3.0.266",
@@ -54,5 +54,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "cb662e72c635e5e70c5541d85e276ce2f4075099"
+	"gitHead": "599379fef6043a7125d1979766f915580ec1cf77"
 }