remotion 4.0.237 → 4.0.240

package/dist/cjs/Img.js

@@ -75,6 +75,10 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
                 }
                 return;
             }
+            const { current } = imageRef;
+            if (!current) {
+                return;
+            }
             const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + actualSrc, {
                 retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
                 timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
@@ -82,12 +86,12 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
             const unblock = pauseWhenLoading && !isPremounting
                 ? delayPlayback().unblock
                 : () => undefined;
-            const { current } = imageRef;
             let unmounted = false;
             const onComplete = () => {
                 var _a, _b, _c, _d;
                 // the decode() promise isn't cancelable -- it may still resolve after unmounting
                 if (unmounted) {
+                    (0, delay_render_js_1.continueRender)(newHandle);
                     return;
                 }
                 if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
@@ -96,32 +100,39 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
                     console.info(`Retry successful - ${(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src} is now loaded`);
                 }
                 if (current) {
-                    current.src = actualSrc;
                     onImageFrame === null || onImageFrame === void 0 ? void 0 : onImageFrame(current);
                 }
                 unblock();
                 (0, delay_render_js_1.continueRender)(newHandle);
             };
-            const newImg = new Image();
-            newImg.src = actualSrc;
-            newImg
-                .decode()
-                .then(onComplete)
-                .catch((err) => {
-                // fall back to onload event if decode() fails
-                // eslint-disable-next-line no-console
-                console.warn(err);
-                if (newImg.complete) {
-                    onComplete();
-                }
-                else {
-                    newImg.addEventListener('load', onComplete);
-                }
-            });
+            if (!imageRef.current) {
+                onComplete();
+                return;
+            }
+            current.src = actualSrc;
+            if (current.complete) {
+                onComplete();
+            }
+            else {
+                current
+                    .decode()
+                    .then(onComplete)
+                    .catch((err) => {
+                    // fall back to onload event if decode() fails
+                    // eslint-disable-next-line no-console
+                    console.warn(err);
+                    if (current.complete) {
+                        onComplete();
+                    }
+                    else {
+                        current.addEventListener('load', onComplete);
+                    }
+                });
+            }
             // If tag gets unmounted, clear pending handles because image is not going to load
             return () => {
                 unmounted = true;
-                newImg.removeEventListener('load', onComplete);
+                current.removeEventListener('load', onComplete);
                 unblock();
                 (0, delay_render_js_1.continueRender)(newHandle);
             };

package/dist/cjs/audio/AudioForPreview.js

@@ -87,6 +87,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         showInTimeline,
         premountDisplay: null,
         onAutoPlayError: null,
+        isPremounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
     });
     (0, use_media_playback_js_1.useMediaPlayback)({
         mediaRef: audioRef,

package/dist/cjs/get-remotion-environment.d.ts

@@ -2,6 +2,7 @@ export type RemotionEnvironment = {
     isStudio: boolean;
     isRendering: boolean;
     isPlayer: boolean;
+    isReadOnlyStudio: boolean;
 };
 /**
  * @description Provides information about the Remotion Environment

package/dist/cjs/get-remotion-environment.js

@@ -22,10 +22,12 @@ const getRemotionEnvironment = () => {
                 typeof window !== 'undefined' &&
                 typeof window.remotion_puppeteerTimeout !== 'undefined'));
     const isStudio = typeof window !== 'undefined' && window.remotion_isStudio;
+    const isReadOnlyStudio = typeof window !== 'undefined' && window.remotion_isReadOnlyStudio;
     return {
         isStudio,
         isRendering,
         isPlayer,
+        isReadOnlyStudio,
     };
 };
 exports.getRemotionEnvironment = getRemotionEnvironment;

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

@@ -17,6 +17,18 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, }) => {
             return;
         }
         if (isPremounting) {
+            // Needed by iOS Safari which will not load by default
+            // and therefore not fire the canplay event.
+            // Be cautious about using `current.load()` as it will
+            // reset if a video is already playing.
+            // Therefore only calling it after checking if the video
+            // has no future data.
+            // Breaks on Firefox though: https://github.com/remotion-dev/remotion/issues/3915
+            if (current.readyState < current.HAVE_FUTURE_DATA) {
+                if (!navigator.userAgent.includes('Firefox/')) {
+                    current.load();
+                }
+            }
             return;
         }
         const cleanup = () => {

package/dist/cjs/use-media-in-timeline.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 import type { VolumeProp } from './volume-prop.js';
-export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, onAutoPlayError, }: {
+export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, onAutoPlayError, isPremounting, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement | null>;
@@ -13,4 +13,5 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src,
     showInTimeline: boolean;
     premountDisplay: number | null;
     onAutoPlayError: null | (() => void);
+    isPremounting: boolean;
 }) => void;

package/dist/cjs/use-media-in-timeline.js

@@ -21,14 +21,14 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, onAutoPlayError, }) => {
+const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, onAutoPlayError, isPremounting, }) => {
     const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
     const { rootId, audioAndVideoTags } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const actualFrom = parentSequence
         ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
         : 0;
-    const [playing] = (0, timeline_position_state_js_1.usePlayingState)();
+    const { imperativePlaying } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
     const [initialVolume] = (0, react_1.useState)(() => volume);
@@ -121,10 +121,13 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         const tag = {
             id,
             play: () => {
-                if (!playing) {
+                if (!imperativePlaying.current) {
                     // Don't play if for example in a <Freeze> state.
                     return;
                 }
+                if (isPremounting) {
+                    return;
+                }
                 return (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType, onAutoPlayError);
             },
         };
@@ -132,6 +135,14 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         return () => {
             audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
         };
-    }, [audioAndVideoTags, id, mediaRef, mediaType, onAutoPlayError, playing]);
+    }, [
+        audioAndVideoTags,
+        id,
+        mediaRef,
+        mediaType,
+        onAutoPlayError,
+        imperativePlaying,
+        isPremounting,
+    ]);
 };
 exports.useMediaInTimeline = useMediaInTimeline;

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.237";
+export declare const VERSION = "4.0.240";

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.237';
+exports.VERSION = '4.0.240';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -122,6 +122,7 @@ crossOrigin, ...props }) => {
             try {
                 const res = await fetch(actualSrc, {
                     signal: controller.signal,
+                    cache: 'no-store',
                 });
                 if (res.status !== 200) {
                     if (res.status === 500) {

package/dist/cjs/video/VideoForPreview.js

@@ -46,6 +46,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         showInTimeline,
         premountDisplay: null,
         onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : null,
+        isPremounting: Boolean(parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting),
     });
     (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
         volumePropFrame,

package/dist/esm/index.mjs

@@ -46,10 +46,12 @@ var getRemotionEnvironment = () => {
   const isPlayer = typeof window !== "undefined" && window.remotion_isPlayer;
   const isRendering = typeof window !== "undefined" && typeof window.process !== "undefined" && typeof window.process.env !== "undefined" && (window.process[getEnvString()][getNodeEnvString()] === "test" || window.process[getEnvString()][getNodeEnvString()] === "production" && typeof window !== "undefined" && typeof window.remotion_puppeteerTimeout !== "undefined");
   const isStudio = typeof window !== "undefined" && window.remotion_isStudio;
+  const isReadOnlyStudio = typeof window !== "undefined" && window.remotion_isReadOnlyStudio;
   return {
     isStudio,
     isRendering,
-    isPlayer
+    isPlayer,
+    isReadOnlyStudio
   };
 };
 
@@ -102,7 +104,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.237";
+var VERSION = "4.0.240";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -2156,13 +2158,14 @@ var useMediaInTimeline = ({
   stack,
   showInTimeline,
   premountDisplay,
-  onAutoPlayError
+  onAutoPlayError,
+  isPremounting
 }) => {
   const videoConfig = useVideoConfig();
   const { rootId, audioAndVideoTags } = useContext14(TimelineContext);
   const parentSequence = useContext14(SequenceContext);
   const actualFrom = parentSequence ? parentSequence.relativeFrom + parentSequence.cumulatedFrom : 0;
-  const [playing] = usePlayingState();
+  const { imperativePlaying } = useContext14(TimelineContext);
   const startsAt = useMediaStartsAt();
   const { registerSequence, unregisterSequence } = useContext14(SequenceManager);
   const [initialVolume] = useState8(() => volume);
@@ -2248,7 +2251,10 @@ var useMediaInTimeline = ({
     const tag = {
       id,
       play: () => {
-        if (!playing) {
+        if (!imperativePlaying.current) {
+          return;
+        }
+        if (isPremounting) {
           return;
         }
         return playAndHandleNotAllowedError(mediaRef, mediaType, onAutoPlayError);
@@ -2258,7 +2264,15 @@ var useMediaInTimeline = ({
     return () => {
       audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
     };
-  }, [audioAndVideoTags, id, mediaRef, mediaType, onAutoPlayError, playing]);
+  }, [
+    audioAndVideoTags,
+    id,
+    mediaRef,
+    mediaType,
+    onAutoPlayError,
+    imperativePlaying,
+    isPremounting
+  ]);
 };
 
 // src/use-media-playback.ts
@@ -2454,6 +2468,11 @@ var useMediaBuffering = ({
       return;
     }
     if (isPremounting) {
+      if (current.readyState < current.HAVE_FUTURE_DATA) {
+        if (!navigator.userAgent.includes("Firefox/")) {
+          current.load();
+        }
+      }
       return;
     }
     const cleanup = () => {
@@ -3394,7 +3413,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     stack: _remotionInternalStack,
     showInTimeline,
     premountDisplay: null,
-    onAutoPlayError: null
+    onAutoPlayError: null,
+    isPremounting: Boolean(sequenceContext?.premounting)
   });
   useMediaPlayback({
     mediaRef: audioRef,
@@ -4474,6 +4494,10 @@ var ImgRefForwarding = ({
         }
         return;
       }
+      const { current } = imageRef;
+      if (!current) {
+        return;
+      }
       const newHandle = delayRender("Loading <Img> with src=" + actualSrc, {
         retries: delayRenderRetries ?? undefined,
         timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
@@ -4481,10 +4505,10 @@ var ImgRefForwarding = ({
       const unblock = pauseWhenLoading && !isPremounting ? delayPlayback().unblock : () => {
         return;
       };
-      const { current } = imageRef;
       let unmounted = false;
       const onComplete = () => {
         if (unmounted) {
+          continueRender(newHandle);
           return;
         }
         if ((errors.current[imageRef.current?.src] ?? 0) > 0) {
@@ -4492,25 +4516,31 @@ var ImgRefForwarding = ({
           console.info(`Retry successful - ${imageRef.current?.src} is now loaded`);
         }
         if (current) {
-          current.src = actualSrc;
           onImageFrame?.(current);
         }
         unblock();
         continueRender(newHandle);
       };
-      const newImg = new Image;
-      newImg.src = actualSrc;
-      newImg.decode().then(onComplete).catch((err) => {
-        console.warn(err);
-        if (newImg.complete) {
-          onComplete();
-        } else {
-          newImg.addEventListener("load", onComplete);
-        }
-      });
+      if (!imageRef.current) {
+        onComplete();
+        return;
+      }
+      current.src = actualSrc;
+      if (current.complete) {
+        onComplete();
+      } else {
+        current.decode().then(onComplete).catch((err) => {
+          console.warn(err);
+          if (current.complete) {
+            onComplete();
+          } else {
+            current.addEventListener("load", onComplete);
+          }
+        });
+      }
       return () => {
         unmounted = true;
-        newImg.removeEventListener("load", onComplete);
+        current.removeEventListener("load", onComplete);
         unblock();
         continueRender(newHandle);
       };
@@ -5843,7 +5873,8 @@ var OffthreadVideoForRendering = ({
     const execute = async () => {
       try {
         const res = await fetch(actualSrc, {
-          signal: controller.signal
+          signal: controller.signal,
+          cache: "no-store"
         });
         if (res.status !== 200) {
           if (res.status === 500) {
@@ -6019,7 +6050,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     stack: _remotionInternalStack,
     showInTimeline,
     premountDisplay: null,
-    onAutoPlayError: onAutoPlayError ?? null
+    onAutoPlayError: onAutoPlayError ?? null,
+    isPremounting: Boolean(parentSequence?.premounting)
   });
   useSyncVolumeWithMediaTag({
     volumePropFrame,

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.237";
+var VERSION = "4.0.240";
 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.237",
+  "version": "4.0.240",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -29,7 +29,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.14.0",
-    "@remotion/eslint-config-internal": "4.0.237"
+    "@remotion/eslint-config-internal": "4.0.240"
   },
   "keywords": [
     "remotion",