Merge pull request #1347 from remotion-dev/gif-strict-mode

packages/babel-loader/package.json

@@ -28,7 +28,7 @@
 		"@webhotelier/webpack-fast-refresh": "5.1.0",
 		"babel-loader": "8.2.2",
 		"react-refresh": "0.9.0",
-		"webpack": "5.72.0"
+		"webpack": "5.74.0"
 	},
 	"devDependencies": {
 		"@jonny/eslint-config": "3.0.266",

packages/bundler/package.json

@@ -28,7 +28,7 @@
 		"react-refresh": "0.9.0",
 		"remotion": "3.2.23",
 		"style-loader": "2.0.0",
-		"webpack": "5.72.0"
+		"webpack": "5.74.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",

packages/core/package.json

@@ -41,7 +41,7 @@
 		"rimraf": "^3.0.2",
 		"typescript": "^4.7.0",
 		"vitest": "^0.18.0",
-		"webpack": "5.72.0"
+		"webpack": "5.74.0"
 	},
 	"keywords": [
 		"remotion",

packages/gif/package.json

@@ -37,7 +37,7 @@
 		"react": "18.0.0",
 		"react-dom": "18.0.0",
 		"typescript": "^4.7.0",
-		"webpack": "5.72.0"
+		"webpack": "5.74.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",

packages/gif/src/GifForDevelopment.tsx

@@ -54,6 +54,7 @@ export const GifForDevelopment = forwardRef<
 			})
 			.catch((err) => {
 				if (aborted) {
+					continueRender(newHandle);
 					return;
 				}
 
@@ -83,7 +84,7 @@ export const GifForDevelopment = forwardRef<
 		}
 
 		throw new Error(
-			`Failed to render GIF with source ${src}: "${error.message}". Render with --log=verbose to see the full stack.`
+			`Failed to render GIF with source ${src}: "${error.message}".`
 		);
 	}
 

packages/gif/src/GifForRendering.tsx

@@ -53,6 +53,7 @@ export const GifForRendering = forwardRef<HTMLCanvasElement, RemotionGifProps>(
 				})
 				.catch((err) => {
 					if (aborted) {
+						continueRender(newHandle);
 						return;
 					}
 

packages/gif/src/react-tools.ts

@@ -13,12 +13,8 @@ export const parseGif = async ({
 	return generate(raw);
 };
 
-let worker: Worker | null = null;
-
 export const parseWithWorker = (src: string) => {
-	if (!worker) {
-		worker = makeWorker();
-	}
+	const worker = makeWorker();
 
 	let handler: ((e: MessageEvent) => void) | null = null;
 
@@ -50,6 +46,7 @@ export const parseWithWorker = (src: string) => {
 				'message',
 				handler as (e: MessageEvent) => void
 			);
+			worker.terminate();
 		},
 	};
 };

packages/player-example/package.json

@@ -13,6 +13,7 @@
 		"@remotion/eslint-config": "3.2.23",
 		"@remotion/player": "3.2.23",
 		"@remotion/preload": "3.2.23",
+		"@remotion/gif": "3.2.23",
 		"@types/node": "^12.0.0",
 		"@types/react": "18.0.1",
 		"@types/react-dom": "18.0.0",
@@ -28,7 +29,7 @@
 		"react-refresh": "^0.11.0",
 		"remotion": "3.2.23",
 		"typescript": "^4.7.0",
-		"webpack": "5.72.0",
+		"webpack": "5.74.0",
 		"webpack-dev-server": "^4.6.0"
 	},
 	"scripts": {

packages/player-example/src/VideoAutoplay.tsx

@@ -1,4 +1,5 @@
 import {preloadAudio, preloadVideo} from '@remotion/preload';
+import {Gif} from '@remotion/gif';
 import {AbsoluteFill, Audio, Sequence, Series, staticFile} from 'remotion';
 
 preloadVideo(
@@ -14,6 +15,7 @@ export const VideoautoplayDemo = () => {
 				backgroundColor: 'red',
 			}}
 		>
+
 			<Sequence from={20}>
 				<Audio src={staticFile('sample.mp3')} volume={0.2} />
 			</Sequence>
@@ -22,6 +24,15 @@ export const VideoautoplayDemo = () => {
 					<AbsoluteFill />
 				</Series.Sequence>
 			</Series>
+			<AbsoluteFill>
+			<Gif
+					src="https://media.giphy.com/media/xT0GqH01ZyKwd3aT3G/giphy.gif"
+					fit="cover"
+					height={200}
+					width={200}
+				/>
+
+			</AbsoluteFill>
 		</AbsoluteFill>
 	);
 };

packages/player/package.json

@@ -50,7 +50,7 @@
 		"react-dom": "^18.0.0",
 		"ts-jest": "^27.0.5",
 		"typescript": "^4.7.0",
-		"webpack": "5.72.0"
+		"webpack": "5.74.0"
 	},
 	"keywords": [
 		"remotion",