Merge pull request #4781 from remotion-dev/event-loop-break

Author: JonnyBurger

packages/convert/app/lib/use-thumbnail.ts

@@ -31,6 +31,11 @@ export const useThumbnailAndWaveform = ({
 
 	const execute = useCallback(() => {
 		const abortController = new AbortController();
+
+		const hasEnoughData = () => {
+			onDone();
+		};
+
 		parseMedia({
 			signal: abortController.signal,
 			reader: src.type === 'file' ? webFileReader : fetchReader,
@@ -114,7 +119,7 @@ export const useThumbnailAndWaveform = ({
 						if (frames >= framesToGet) {
 							abortController.abort();
 							frame.close();
-							onDone();
+							hasEnoughData();
 							return;
 						}
 

packages/media-parser/src/parse-media.ts

@@ -187,6 +187,8 @@ const internalParseMedia: InternalParseMedia = async function <
 			}
 		}
 
+		await state.eventLoop.eventLoopBreakIfNeeded();
+
 		const hasBigBuffer = iterator.bytesRemaining() > 100_000;
 
 		if (iterationWithThisOffset > 0 || !hasBigBuffer) {

packages/media-parser/src/state/last-eventloop-break.ts

@@ -0,0 +1,18 @@
+import type {LogLevel} from '../log';
+import {Log} from '../log';
+
+export const eventLoopState = (logLevel: LogLevel) => {
+	let lastEventLoopBreak = Date.now();
+
+	const eventLoopBreakIfNeeded = async () => {
+		if (Date.now() - lastEventLoopBreak > 2_000) {
+			await new Promise<void>((resolve) => {
+				setTimeout(() => resolve(), 50);
+			});
+			Log.verbose(logLevel, '10ms event loop break');
+			lastEventLoopBreak = Date.now();
+		}
+	};
+
+	return {eventLoopBreakIfNeeded};
+};

packages/media-parser/src/state/parser-state.ts

@@ -9,6 +9,7 @@ import {flacState} from './flac-state';
 import {imagesState} from './images';
 import {isoBaseMediaState} from './iso-base-media/iso-state';
 import {keyframesState} from './keyframes';
+import {eventLoopState} from './last-eventloop-break';
 import {makeMp3State} from './mp3';
 import {riffSpecificState} from './riff';
 import {sampleCallback} from './sample-callbacks';
@@ -101,6 +102,7 @@ export const makeParserState = ({
 		videoSection: videoSectionState(),
 		logLevel,
 		iterator,
+		eventLoop: eventLoopState(logLevel),
 	};
 };