remotion 4.0.187 → 4.0.188

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/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.188";

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.188';

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

@@ -138,7 +138,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.187";
+var VERSION = "4.0.188";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -2406,7 +2406,8 @@ var useBufferState = () => {
 var useBufferUntilFirstFrame = ({
   mediaRef,
   mediaType,
-  onVariableFpsVideoDetected
+  onVariableFpsVideoDetected,
+  pauseWhenBuffering
 }) => {
   const bufferingRef = useRef3(false);
   const { delayPlayback } = useBufferState();
@@ -2414,6 +2415,9 @@ var useBufferUntilFirstFrame = ({
     if (mediaType !== "video") {
       return;
     }
+    if (!pauseWhenBuffering) {
+      return;
+    }
     const current = mediaRef.current;
     if (!current) {
       return;
@@ -2447,7 +2451,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 +2542,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 +2573,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 +2594,7 @@ var useRequestVideoCallbackTime = (mediaRef, mediaType) => {
     return () => {
       cancel();
     };
-  }, [mediaRef, mediaType]);
+  }, [lastSeek, mediaRef, mediaType, onVariableFpsVideoDetected]);
   return currentTime;
 };
 
@@ -2842,10 +2864,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 +2895,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 +2961,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 +2986,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) {
@@ -5871,6 +5904,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.188";
 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.188",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",