remotion 4.0.187 → 4.0.189

package/dist/cjs/_check-rsc.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/_check-rsc.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+if (typeof react_1.createContext !== 'function') {
+    const err = [
+        'Remotion requires React.createContext, but it is "undefined".',
+        'If you are in a React Server Component, turn it into a client component by adding "use client" at the top of the file.',
+        '',
+        'Before:',
+        '  import {useCurrentFrame} from "remotion";',
+        '',
+        'After:',
+        '  "use client";',
+        '  import {useCurrentFrame} from "remotion";',
+    ];
+    throw new Error(err.join('\n'));
+}

package/dist/cjs/buffer-until-first-frame.d.ts

@@ -1,7 +1,8 @@
-export declare const useBufferUntilFirstFrame: ({ mediaRef, mediaType, onVariableFpsVideoDetected, }: {
+export declare const useBufferUntilFirstFrame: ({ mediaRef, mediaType, onVariableFpsVideoDetected, pauseWhenBuffering, }: {
     mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement>;
     mediaType: 'video' | 'audio';
     onVariableFpsVideoDetected: () => void;
+    pauseWhenBuffering: boolean;
 }) => {
     isBuffering: () => boolean;
     bufferUntilFirstFrame: (requestedTime: number) => void;

package/dist/cjs/buffer-until-first-frame.js

@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBufferUntilFirstFrame = void 0;
 const react_1 = require("react");
 const use_buffer_state_1 = require("./use-buffer-state");
-const useBufferUntilFirstFrame = ({ mediaRef, mediaType, onVariableFpsVideoDetected, }) => {
+const useBufferUntilFirstFrame = ({ mediaRef, mediaType, onVariableFpsVideoDetected, pauseWhenBuffering, }) => {
     const bufferingRef = (0, react_1.useRef)(false);
     const { delayPlayback } = (0, use_buffer_state_1.useBufferState)();
     const bufferUntilFirstFrame = (0, react_1.useCallback)((requestedTime) => {
         if (mediaType !== 'video') {
             return;
         }
+        if (!pauseWhenBuffering) {
+            return;
+        }
         const current = mediaRef.current;
         if (!current) {
             return;
@@ -47,7 +50,13 @@ const useBufferUntilFirstFrame = ({ mediaRef, mediaType, onVariableFpsVideoDetec
         });
         current.addEventListener('ended', onEndedOrPause, { once: true });
         current.addEventListener('pause', onEndedOrPause, { once: true });
-    }, [delayPlayback, mediaRef, mediaType, onVariableFpsVideoDetected]);
+    }, [
+        delayPlayback,
+        mediaRef,
+        mediaType,
+        onVariableFpsVideoDetected,
+        pauseWhenBuffering,
+    ]);
     return (0, react_1.useMemo)(() => {
         return {
             isBuffering: () => bufferingRef.current,

package/dist/cjs/check-rsc.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/check-rsc.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+if (typeof react_1.createContext !== 'function') {
+    throw new Error('React 18 is required for Remotion');
+}

package/dist/cjs/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="bun-types" />
 /// <reference types="react" />
+import './_check-rsc.js';
 import './asset-types.js';
 import type { Codec } from './codec.js';
 import type { TRenderAsset } from './CompositionManager.js';

package/dist/cjs/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Config = exports.Experimental = exports.watchStaticFile = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.Loop = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.cancelRender = exports.Artifact = void 0;
+require("./_check-rsc.js");
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");

package/dist/cjs/use-media-playback.js

@@ -32,21 +32,10 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const lastSeekDueToShift = (0, react_1.useRef)(null);
+    const lastSeek = (0, react_1.useRef)(null);
     if (!buffering) {
         throw new Error('useMediaPlayback must be used inside a <BufferingContext>');
     }
-    const currentTime = (0, use_request_video_callback_time_js_1.useRequestVideoCallbackTime)(mediaRef, mediaType);
-    const desiredUnclampedTime = (0, get_current_time_js_1.getMediaTime)({
-        frame,
-        playbackRate: localPlaybackRate,
-        startFrom: -mediaStartsAt,
-        fps,
-    });
-    const isMediaTagBuffering = (0, use_media_buffering_js_1.useMediaBuffering)({
-        element: mediaRef,
-        shouldBuffer: pauseWhenBuffering,
-        isPremounting,
-    });
     const isVariableFpsVideoMap = (0, react_1.useRef)({});
     const onVariableFpsVideoDetected = (0, react_1.useCallback)(() => {
         if (!src) {
@@ -58,10 +47,28 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         }
         isVariableFpsVideoMap.current[src] = true;
     }, [debugSeeking, src]);
+    const currentTime = (0, use_request_video_callback_time_js_1.useRequestVideoCallbackTime)({
+        mediaRef,
+        mediaType,
+        lastSeek,
+        onVariableFpsVideoDetected,
+    });
+    const desiredUnclampedTime = (0, get_current_time_js_1.getMediaTime)({
+        frame,
+        playbackRate: localPlaybackRate,
+        startFrom: -mediaStartsAt,
+        fps,
+    });
+    const isMediaTagBuffering = (0, use_media_buffering_js_1.useMediaBuffering)({
+        element: mediaRef,
+        shouldBuffer: pauseWhenBuffering,
+        isPremounting,
+    });
     const { bufferUntilFirstFrame, isBuffering } = (0, buffer_until_first_frame_js_1.useBufferUntilFirstFrame)({
         mediaRef,
         mediaType,
         onVariableFpsVideoDetected,
+        pauseWhenBuffering,
     });
     const playbackRate = localPlaybackRate * globalPlaybackRate;
     // For short audio, a lower acceptable time shift is used
@@ -137,9 +144,11 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
                     isTime: mediaTagTime,
                     rvcTime,
                     timeShift,
+                    isVariableFpsVideo,
                 });
             }
             seek(mediaRef, shouldBeTime);
+            lastSeek.current = shouldBeTime;
             lastSeekDueToShift.current = shouldBeTime;
             if (playing && !isVariableFpsVideo) {
                 bufferUntilFirstFrame(shouldBeTime);
@@ -164,6 +173,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (!playing || isSomethingElseBuffering) {
             if (makesSenseToSeek) {
                 seek(mediaRef, shouldBeTime);
+                lastSeek.current = shouldBeTime;
             }
             return;
         }
@@ -172,6 +182,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             absoluteFrame === 0) {
             if (makesSenseToSeek) {
                 seek(mediaRef, shouldBeTime);
+                lastSeek.current = shouldBeTime;
             }
             (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType, onAutoPlayError);
             if (!isVariableFpsVideo) {

package/dist/cjs/use-request-video-callback-time.d.ts

@@ -1,2 +1,7 @@
 import type { RefObject } from 'react';
-export declare const useRequestVideoCallbackTime: (mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, mediaType: 'video' | 'audio') => import("react").MutableRefObject<number | null>;
+export declare const useRequestVideoCallbackTime: ({ mediaRef, mediaType, lastSeek, onVariableFpsVideoDetected, }: {
+    mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>;
+    mediaType: 'video' | 'audio';
+    lastSeek: React.MutableRefObject<number | null>;
+    onVariableFpsVideoDetected: () => void;
+}) => import("react").MutableRefObject<number | null>;

package/dist/cjs/use-request-video-callback-time.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRequestVideoCallbackTime = void 0;
 const react_1 = require("react");
-const useRequestVideoCallbackTime = (mediaRef, mediaType) => {
+const useRequestVideoCallbackTime = ({ mediaRef, mediaType, lastSeek, onVariableFpsVideoDetected, }) => {
     const currentTime = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const { current } = mediaRef;
@@ -27,6 +27,20 @@ const useRequestVideoCallbackTime = (mediaRef, mediaType) => {
                 return;
             }
             const cb = videoTag.requestVideoFrameCallback((_, info) => {
+                if (currentTime.current !== null) {
+                    const difference = Math.abs(currentTime.current - info.mediaTime);
+                    const differenceToLastSeek = Math.abs(lastSeek.current === null
+                        ? Infinity
+                        : info.mediaTime - lastSeek.current);
+                    // If a video suddenly jumps to a position much further than previously
+                    // and there was no relevant seek
+                    // Case to be seen with 66a4a49b0862333a56c7d03c.mp4 and autoPlay and pauseWhenBuffering
+                    if (difference > 0.5 &&
+                        differenceToLastSeek > 0.5 &&
+                        info.mediaTime > currentTime.current) {
+                        onVariableFpsVideoDetected();
+                    }
+                }
                 currentTime.current = info.mediaTime;
                 request();
             });
@@ -39,7 +53,7 @@ const useRequestVideoCallbackTime = (mediaRef, mediaType) => {
         return () => {
             cancel();
         };
-    }, [mediaRef, mediaType]);
+    }, [lastSeek, mediaRef, mediaType, onVariableFpsVideoDetected]);
     return currentTime;
 };
 exports.useRequestVideoCallbackTime = useRequestVideoCallbackTime;

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.187";
+export declare const VERSION = "4.0.189";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.187';
+exports.VERSION = '4.0.189';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -136,6 +136,13 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
                 });
             }
             catch (err) {
+                // If component is unmounted, we should not throw
+                if (err.message.includes('aborted')) {
+                    return;
+                }
+                if (controller.signal.aborted) {
+                    return;
+                }
                 if (onError) {
                     onError(err);
                 }

package/dist/esm/index.mjs

@@ -9,15 +9,32 @@ var __export = (target, all) => {
     });
 };
 
+// src/_check-rsc.ts
+import {createContext} from "react";
+if (typeof createContext !== "function") {
+  const err = [
+    'Remotion requires React.createContext, but it is "undefined".',
+    'If you are in a React Server Component, turn it into a client component by adding "use client" at the top of the file.',
+    "",
+    "Before:",
+    '  import {useCurrentFrame} from "remotion";',
+    "",
+    "After:",
+    '  "use client";',
+    '  import {useCurrentFrame} from "remotion";'
+  ];
+  throw new Error(err.join("\n"));
+}
+
 // src/Clipper.tsx
 import {useContext, useEffect} from "react";
 
 // src/NativeLayers.tsx
-import {createContext, useLayoutEffect, useMemo, useState} from "react";
+import {createContext as createContext2, useLayoutEffect, useMemo, useState} from "react";
 import {
 jsx
 } from "react/jsx-runtime";
-var NativeLayersContext = createContext({
+var NativeLayersContext = createContext2({
   setClipRegion: () => {
     throw new Error("NativeLayers not set");
   },
@@ -115,11 +132,11 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/is-player.tsx
-import {createContext as createContext2, useContext as useContext2} from "react";
+import {createContext as createContext3, useContext as useContext2} from "react";
 import {
 jsx as jsx2
 } from "react/jsx-runtime";
-var IsPlayerContext = createContext2(false);
+var IsPlayerContext = createContext3(false);
 var IsPlayerContextProvider = ({
   children
 }) => {
@@ -138,7 +155,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.187";
+var VERSION = "4.0.189";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -221,8 +238,8 @@ var AbsoluteFillRefForwarding = (props, ref) => {
 var AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);
 
 // src/SequenceContext.tsx
-import {createContext as createContext3} from "react";
-var SequenceContext = createContext3(null);
+import {createContext as createContext4} from "react";
+var SequenceContext = createContext4(null);
 
 // src/SequenceManager.tsx
 import React3, {useCallback, useMemo as useMemo3, useState as useState2} from "react";
@@ -278,8 +295,8 @@ var SequenceManagerProvider = ({ children }) => {
 };
 
 // src/nonce.ts
-import {createContext as createContext4, useContext as useContext4, useEffect as useEffect3, useRef, useState as useState3} from "react";
-var NonceContext = createContext4({
+import {createContext as createContext5, useContext as useContext4, useEffect as useEffect3, useRef, useState as useState3} from "react";
+var NonceContext = createContext5({
   getNonce: () => 0,
   fastRefreshes: 0
 });
@@ -309,14 +326,14 @@ __export(exports_timeline_position_state, {
   TimelineContext: () => TimelineContext,
   SetTimelineContext: () => SetTimelineContext
 });
-import {createContext as createContext8, useContext as useContext7, useMemo as useMemo7} from "react";
+import {createContext as createContext9, useContext as useContext7, useMemo as useMemo7} from "react";
 
 // src/use-video.ts
 import {useContext as useContext6, useMemo as useMemo6} from "react";
 
 // src/CompositionManagerContext.tsx
-import {createContext as createContext5} from "react";
-var CompositionManager = createContext5({
+import {createContext as createContext6} from "react";
+var CompositionManager = createContext6({
   compositions: [],
   registerComposition: () => {
     return;
@@ -346,7 +363,7 @@ var CompositionManager = createContext5({
 
 // src/ResolveCompositionConfig.tsx
 import {
-createContext as createContext7,
+createContext as createContext8,
 createRef,
 useCallback as useCallback3,
 useContext as useContext5,
@@ -358,7 +375,7 @@ useState as useState4
 
 // src/EditorProps.tsx
 import React4, {
-createContext as createContext6,
+createContext as createContext7,
 useCallback as useCallback2,
 useImperativeHandle,
 useMemo as useMemo4
@@ -366,7 +383,7 @@ useMemo as useMemo4
 import {
 jsx as jsx5
 } from "react/jsx-runtime";
-var EditorPropsContext = createContext6({
+var EditorPropsContext = createContext7({
   props: {},
   updateProps: () => {
     throw new Error("Not implemented");
@@ -774,7 +791,7 @@ var resolveVideoConfigOrCatch = (params) => {
 import {
 jsx as jsx6
 } from "react/jsx-runtime";
-var ResolveCompositionContext = createContext7(null);
+var ResolveCompositionContext = createContext8(null);
 var resolveCompositionsRef = createRef();
 var needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
@@ -1126,7 +1143,7 @@ var useVideo = () => {
 };
 
 // src/timeline-position-state.ts
-var TimelineContext = createContext8({
+var TimelineContext = createContext9({
   frame: {},
   playing: false,
   playbackRate: 1,
@@ -1139,7 +1156,7 @@ var TimelineContext = createContext8({
   },
   audioAndVideoTags: { current: [] }
 });
-var SetTimelineContext = createContext8({
+var SetTimelineContext = createContext9({
   setFrame: () => {
     throw new Error("default");
   },
@@ -1192,11 +1209,11 @@ var usePlayingState = () => {
 import {useContext as useContext9} from "react";
 
 // src/CanUseRemotionHooks.tsx
-import {createContext as createContext9} from "react";
+import {createContext as createContext10} from "react";
 import {
 jsx as jsx7
 } from "react/jsx-runtime";
-var CanUseRemotionHooks = createContext9(false);
+var CanUseRemotionHooks = createContext10(false);
 var CanUseRemotionHooksProvider = ({ children }) => {
   return jsx7(CanUseRemotionHooks.Provider, {
     value: true,
@@ -1521,7 +1538,7 @@ import {useContext as useContext13, useEffect as useEffect6, useState as useStat
 
 // src/RenderAssetManager.tsx
 import {
-createContext as createContext10,
+createContext as createContext11,
 useCallback as useCallback4,
 useLayoutEffect as useLayoutEffect2,
 useMemo as useMemo11,
@@ -1560,7 +1577,7 @@ var validateRenderAsset = (artifact) => {
 import {
 jsx as jsx10
 } from "react/jsx-runtime";
-var RenderAssetManager = createContext10({
+var RenderAssetManager = createContext11({
   registerRenderAsset: () => {
     return;
   },
@@ -1719,11 +1736,11 @@ var isErrorLike = (err) => {
 };
 
 // src/loop/index.tsx
-import React8, {createContext as createContext11, useMemo as useMemo12} from "react";
+import React8, {createContext as createContext12, useMemo as useMemo12} from "react";
 import {
 jsx as jsx11
 } from "react/jsx-runtime";
-var LoopContext = createContext11(null);
+var LoopContext = createContext12(null);
 var useLoop = () => {
   return React8.useContext(LoopContext);
 };
@@ -1782,11 +1799,11 @@ Loop.useLoop = useLoop;
 import {useContext as useContext14} from "react";
 
 // src/prefetch-state.tsx
-import {createContext as createContext12, useEffect as useEffect7, useState as useState8} from "react";
+import {createContext as createContext13, useEffect as useEffect7, useState as useState8} from "react";
 import {
 jsx as jsx12
 } from "react/jsx-runtime";
-var PreloadContext = createContext12({});
+var PreloadContext = createContext13({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -2002,7 +2019,7 @@ var validateStartFromProps = (startFrom, endAt) => {
 };
 
 // src/video/duration-state.tsx
-import {createContext as createContext13, useMemo as useMemo13, useReducer} from "react";
+import {createContext as createContext14, useMemo as useMemo13, useReducer} from "react";
 import {
 jsx as jsx13
 } from "react/jsx-runtime";
@@ -2022,7 +2039,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext13({
+var DurationsContext = createContext14({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -2406,7 +2423,8 @@ var useBufferState = () => {
 var useBufferUntilFirstFrame = ({
   mediaRef,
   mediaType,
-  onVariableFpsVideoDetected
+  onVariableFpsVideoDetected,
+  pauseWhenBuffering
 }) => {
   const bufferingRef = useRef3(false);
   const { delayPlayback } = useBufferState();
@@ -2414,6 +2432,9 @@ var useBufferUntilFirstFrame = ({
     if (mediaType !== "video") {
       return;
     }
+    if (!pauseWhenBuffering) {
+      return;
+    }
     const current = mediaRef.current;
     if (!current) {
       return;
@@ -2447,7 +2468,13 @@ var useBufferUntilFirstFrame = ({
     });
     current.addEventListener("ended", onEndedOrPause, { once: true });
     current.addEventListener("pause", onEndedOrPause, { once: true });
-  }, [delayPlayback, mediaRef, mediaType, onVariableFpsVideoDetected]);
+  }, [
+    delayPlayback,
+    mediaRef,
+    mediaType,
+    onVariableFpsVideoDetected,
+    pauseWhenBuffering
+  ]);
   return useMemo17(() => {
     return {
       isBuffering: () => bufferingRef.current,
@@ -2532,7 +2559,12 @@ var useMediaBuffering = ({
 
 // src/use-request-video-callback-time.ts
 import {useEffect as useEffect11, useRef as useRef4} from "react";
-var useRequestVideoCallbackTime = (mediaRef, mediaType) => {
+var useRequestVideoCallbackTime = ({
+  mediaRef,
+  mediaType,
+  lastSeek,
+  onVariableFpsVideoDetected
+}) => {
   const currentTime = useRef4(null);
   useEffect11(() => {
     const { current } = mediaRef;
@@ -2558,6 +2590,13 @@ var useRequestVideoCallbackTime = (mediaRef, mediaType) => {
         return;
       }
       const cb = videoTag.requestVideoFrameCallback((_, info) => {
+        if (currentTime.current !== null) {
+          const difference = Math.abs(currentTime.current - info.mediaTime);
+          const differenceToLastSeek = Math.abs(lastSeek.current === null ? Infinity : info.mediaTime - lastSeek.current);
+          if (difference > 0.5 && differenceToLastSeek > 0.5 && info.mediaTime > currentTime.current) {
+            onVariableFpsVideoDetected();
+          }
+        }
         currentTime.current = info.mediaTime;
         request();
       });
@@ -2572,7 +2611,7 @@ var useRequestVideoCallbackTime = (mediaRef, mediaType) => {
     return () => {
       cancel();
     };
-  }, [mediaRef, mediaType]);
+  }, [lastSeek, mediaRef, mediaType, onVariableFpsVideoDetected]);
   return currentTime;
 };
 
@@ -2842,10 +2881,26 @@ var useMediaPlayback = ({
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const lastSeekDueToShift = useRef6(null);
+  const lastSeek = useRef6(null);
   if (!buffering3) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const currentTime = useRequestVideoCallbackTime(mediaRef, mediaType);
+  const isVariableFpsVideoMap = useRef6({});
+  const onVariableFpsVideoDetected = useCallback7(() => {
+    if (!src) {
+      return;
+    }
+    if (debugSeeking) {
+      console.log(`Detected ${src} as a variable FPS video. Disabling buffering while seeking.`);
+    }
+    isVariableFpsVideoMap.current[src] = true;
+  }, [debugSeeking, src]);
+  const currentTime = useRequestVideoCallbackTime({
+    mediaRef,
+    mediaType,
+    lastSeek,
+    onVariableFpsVideoDetected
+  });
   const desiredUnclampedTime = getMediaTime({
     frame,
     playbackRate: localPlaybackRate,
@@ -2857,20 +2912,11 @@ var useMediaPlayback = ({
     shouldBuffer: pauseWhenBuffering,
     isPremounting
   });
-  const isVariableFpsVideoMap = useRef6({});
-  const onVariableFpsVideoDetected = useCallback7(() => {
-    if (!src) {
-      return;
-    }
-    if (debugSeeking) {
-      console.log(`Detected ${src} as a variable FPS video. Disabling buffering while seeking.`);
-    }
-    isVariableFpsVideoMap.current[src] = true;
-  }, [debugSeeking, src]);
   const { bufferUntilFirstFrame, isBuffering } = useBufferUntilFirstFrame({
     mediaRef,
     mediaType,
-    onVariableFpsVideoDetected
+    onVariableFpsVideoDetected,
+    pauseWhenBuffering
   });
   const playbackRate = localPlaybackRate * globalPlaybackRate;
   const acceptableTimeShiftButLessThanDuration = (() => {
@@ -2932,10 +2978,12 @@ var useMediaPlayback = ({
           shouldBeTime,
           isTime: mediaTagTime,
           rvcTime,
-          timeShift
+          timeShift,
+          isVariableFpsVideo
         });
       }
       seek(mediaRef, shouldBeTime);
+      lastSeek.current = shouldBeTime;
       lastSeekDueToShift.current = shouldBeTime;
       if (playing && !isVariableFpsVideo) {
         bufferUntilFirstFrame(shouldBeTime);
@@ -2955,12 +3003,14 @@ var useMediaPlayback = ({
     if (!playing || isSomethingElseBuffering) {
       if (makesSenseToSeek) {
         seek(mediaRef, shouldBeTime);
+        lastSeek.current = shouldBeTime;
       }
       return;
     }
     if (mediaRef.current.paused && !mediaRef.current.ended || absoluteFrame === 0) {
       if (makesSenseToSeek) {
         seek(mediaRef, shouldBeTime);
+        lastSeek.current = shouldBeTime;
       }
       playAndHandleNotAllowedError(mediaRef, mediaType, onAutoPlayError);
       if (!isVariableFpsVideo) {
@@ -3045,12 +3095,12 @@ var useSyncVolumeWithMediaTag = ({
 };
 
 // src/volume-position-state.ts
-import {createContext as createContext14, useContext as useContext19, useMemo as useMemo18} from "react";
-var MediaVolumeContext = createContext14({
+import {createContext as createContext15, useContext as useContext19, useMemo as useMemo18} from "react";
+var MediaVolumeContext = createContext15({
   mediaMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext14({
+var SetMediaVolumeContext = createContext15({
   setMediaMuted: () => {
     throw new Error("default");
   },
@@ -3075,7 +3125,7 @@ var useMediaMutedState = () => {
 
 // src/audio/shared-audio-tags.tsx
 import React12, {
-createContext as createContext15,
+createContext as createContext16,
 createRef as createRef2,
 useCallback as useCallback8,
 useContext as useContext20,
@@ -3114,7 +3164,7 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext15(null);
+var SharedAudioContext = createContext16(null);
 var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) => {
   const audios = useRef7([]);
   const [initialNumberOfAudioTags] = useState13(numberOfAudioTags);
@@ -3733,7 +3783,7 @@ import {Suspense, useContext as useContext25, useEffect as useEffect19, useMemo
 import {createPortal} from "react-dom";
 
 // src/Folder.tsx
-import {createContext as createContext16, useContext as useContext24, useEffect as useEffect18, useMemo as useMemo22} from "react";
+import {createContext as createContext17, useContext as useContext24, useEffect as useEffect18, useMemo as useMemo22} from "react";
 
 // src/validation/validate-folder-name.ts
 var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
@@ -3755,7 +3805,7 @@ var invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())
 import {
 jsx as jsx19
 } from "react/jsx-runtime";
-var FolderContext = createContext16({
+var FolderContext = createContext17({
   folderName: null,
   parentName: null
 });
@@ -4747,9 +4797,9 @@ var setupEnvVariables = () => {
 };
 
 // src/use-current-scale.ts
-import React22, {createContext as createContext17} from "react";
+import React22, {createContext as createContext18} from "react";
 var CurrentScaleContext = React22.createContext(null);
-var PreviewSizeContext = createContext17({
+var PreviewSizeContext = createContext18({
   setSize: () => {
     return;
   },
@@ -5373,11 +5423,11 @@ var flattenChildren = (children) => {
 };
 
 // src/series/is-inside-series.tsx
-import React25, {createContext as createContext18} from "react";
+import React25, {createContext as createContext19} from "react";
 import {
 jsx as jsx27
 } from "react/jsx-runtime";
-var IsInsideSeriesContext = createContext18(false);
+var IsInsideSeriesContext = createContext19(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return jsx27(IsInsideSeriesContext.Provider, {
     value: true,
@@ -5871,6 +5921,12 @@ var OffthreadVideoForRendering = ({
           handle: newHandle
         });
       } catch (err) {
+        if (err.message.includes("aborted")) {
+          return;
+        }
+        if (controller.signal.aborted) {
+          return;
+        }
         if (onError) {
           onError(err);
         } else {

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.187";
+var VERSION = "4.0.189";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
   },
   "name": "remotion",
-  "version": "4.0.187",
+  "version": "4.0.189",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",