remotion: Fix audio continuing to play when another element buffers

packages/core/src/buffering.tsx

@@ -121,3 +121,29 @@ export const BufferingProvider: React.FC<{
 		</BufferingContextReact.Provider>
 	);
 };
+
+export const useIsPlayerBuffering = (bufferManager: BufferManager) => {
+	const [isBuffering, setIsBuffering] = useState(
+		bufferManager.buffering.current,
+	);
+
+	useEffect(() => {
+		const onBuffer = () => {
+			setIsBuffering(true);
+		};
+
+		const onResume = () => {
+			setIsBuffering(false);
+		};
+
+		bufferManager.listenForBuffering(onBuffer);
+		bufferManager.listenForResume(onResume);
+
+		return () => {
+			bufferManager.listenForBuffering(() => undefined);
+			bufferManager.listenForResume(() => undefined);
+		};
+	}, [bufferManager]);
+
+	return isBuffering;
+};

packages/core/src/use-media-playback.ts

@@ -2,7 +2,7 @@ import type {RefObject} from 'react';
 import {useCallback, useContext, useEffect, useRef} from 'react';
 import {useMediaStartsAt} from './audio/use-audio-frame.js';
 import {useBufferUntilFirstFrame} from './buffer-until-first-frame.js';
-import {BufferingContextReact} from './buffering.js';
+import {BufferingContextReact, useIsPlayerBuffering} from './buffering.js';
 import {playAndHandleNotAllowedError} from './play-and-handle-not-allowed-error.js';
 import {
 	TimelineContext,
@@ -129,25 +129,20 @@ export const useMediaPlayback = ({
 		return acceptableTimeshift;
 	})();
 
+	const isPlayerBuffering = useIsPlayerBuffering(buffering);
+
 	useEffect(() => {
 		if (!playing) {
 			mediaRef.current?.pause();
 			return;
 		}
 
-		const isPlayerBuffering = buffering.buffering.current;
 		const isMediaTagBufferingOrStalled = isMediaTagBuffering || isBuffering();
 
 		if (isPlayerBuffering && !isMediaTagBufferingOrStalled) {
 			mediaRef.current?.pause();
 		}
-	}, [
-		buffering.buffering,
-		isBuffering,
-		isMediaTagBuffering,
-		mediaRef,
-		playing,
-	]);
+	}, [isBuffering, isMediaTagBuffering, isPlayerBuffering, mediaRef, playing]);
 
 	useEffect(() => {
 		const tagName = mediaType === 'audio' ? '<Audio>' : '<Video>';