remotion 4.0.180 → 4.0.182

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

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.180';
+exports.VERSION = '4.0.182';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -10,6 +10,7 @@ const absolute_src_js_1 = require("../absolute-src.js");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
 const cancel_render_js_1 = require("../cancel-render.js");
 const default_css_js_1 = require("../default-css.js");
+const delay_render_js_1 = require("../delay-render.js");
 const random_js_1 = require("../random.js");
 const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const truthy_js_1 = require("../truthy.js");
@@ -18,7 +19,7 @@ const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const get_current_time_js_1 = require("./get-current-time.js");
 const offthread_video_source_js_1 = require("./offthread-video-source.js");
-const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, toneMapped = true, toneFrequency, name, loopVolumeCurveBehavior, ...props }) => {
+const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, toneMapped = true, toneFrequency, name, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const volumePropsFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
@@ -102,19 +103,77 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
             toneMapped,
         });
     }, [toneMapped, currentTime, src, transparent]);
+    const [imageSrc, setImageSrc] = (0, react_1.useState)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const cleanup = [];
+        setImageSrc(null);
+        const controller = new AbortController();
+        const newHandle = (0, delay_render_js_1.delayRender)('Fetching ' + actualSrc + 'from server', {
+            retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
+        });
+        const execute = async () => {
+            try {
+                const res = await fetch(actualSrc, {
+                    signal: controller.signal,
+                });
+                if (res.status !== 200) {
+                    if (res.status === 500) {
+                        const json = await res.json();
+                        if (json.error) {
+                            const cleanedUpErrorMessage = json.error.replace(/^Error: /, '');
+                            throw new Error(cleanedUpErrorMessage);
+                        }
+                    }
+                    throw new Error(`Server returned status ${res.status} while fetching ${actualSrc}`);
+                }
+                const blob = await res.blob();
+                const url = URL.createObjectURL(blob);
+                cleanup.push(() => URL.revokeObjectURL(url));
+                setImageSrc(url);
+                (0, delay_render_js_1.continueRender)(newHandle);
+            }
+            catch (err) {
+                if (onError) {
+                    onError(err);
+                }
+                else {
+                    (0, cancel_render_js_1.cancelRender)(err);
+                }
+            }
+        };
+        execute();
+        cleanup.push(() => {
+            if (controller.signal.aborted) {
+                return;
+            }
+            controller.abort();
+        });
+        return () => {
+            cleanup.forEach((c) => c());
+        };
+    }, [
+        actualSrc,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        onError,
+    ]);
     const onErr = (0, react_1.useCallback)(() => {
         if (onError) {
-            onError === null || onError === void 0 ? void 0 : onError(new Error('Failed to load image with src ' + actualSrc));
+            onError === null || onError === void 0 ? void 0 : onError(new Error('Failed to load image with src ' + imageSrc));
         }
         else {
-            (0, cancel_render_js_1.cancelRender)('Failed to load image with src ' + actualSrc);
+            (0, cancel_render_js_1.cancelRender)('Failed to load image with src ' + imageSrc);
         }
-    }, [actualSrc, onError]);
+    }, [imageSrc, onError]);
     const className = (0, react_1.useMemo)(() => {
         return [default_css_js_1.OFFTHREAD_VIDEO_CLASS_NAME, props.className]
             .filter(truthy_js_1.truthy)
             .join(' ');
     }, [props.className]);
-    return ((0, jsx_runtime_1.jsx)(Img_js_1.Img, { src: actualSrc, className: className, ...props, onError: onErr }));
+    if (!imageSrc) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Img_js_1.Img, { src: imageSrc, className: className, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, ...props, onError: onErr }));
 };
 exports.OffthreadVideoForRendering = OffthreadVideoForRendering;

package/dist/esm/index.mjs

@@ -138,7 +138,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.180";
+var VERSION = "4.0.182";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -5758,7 +5758,14 @@ var Still = (props2) => {
 import {useCallback as useCallback14} from "react";
 
 // src/video/OffthreadVideoForRendering.tsx
-import {useCallback as useCallback13, useContext as useContext27, useEffect as useEffect21, useMemo as useMemo29} from "react";
+import {
+useCallback as useCallback13,
+useContext as useContext27,
+useEffect as useEffect21,
+useLayoutEffect as useLayoutEffect6,
+useMemo as useMemo29,
+useState as useState18
+} from "react";
 import {
 jsx as jsx29
 } from "react/jsx-runtime";
@@ -5774,6 +5781,8 @@ var OffthreadVideoForRendering = ({
   toneFrequency,
   name,
   loopVolumeCurveBehavior,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
   ...props2
 }) => {
   const absoluteFrame = useTimelinePosition();
@@ -5856,19 +5865,77 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
+  const [imageSrc, setImageSrc] = useState18(null);
+  useLayoutEffect6(() => {
+    const cleanup = [];
+    setImageSrc(null);
+    const controller = new AbortController;
+    const newHandle = delayRender("Fetching " + actualSrc + "from server", {
+      retries: delayRenderRetries ?? undefined,
+      timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
+    });
+    const execute = async () => {
+      try {
+        const res = await fetch(actualSrc, {
+          signal: controller.signal
+        });
+        if (res.status !== 200) {
+          if (res.status === 500) {
+            const json = await res.json();
+            if (json.error) {
+              const cleanedUpErrorMessage = json.error.replace(/^Error: /, "");
+              throw new Error(cleanedUpErrorMessage);
+            }
+          }
+          throw new Error(`Server returned status ${res.status} while fetching ${actualSrc}`);
+        }
+        const blob = await res.blob();
+        const url = URL.createObjectURL(blob);
+        cleanup.push(() => URL.revokeObjectURL(url));
+        setImageSrc(url);
+        continueRender(newHandle);
+      } catch (err) {
+        if (onError) {
+          onError(err);
+        } else {
+          cancelRender(err);
+        }
+      }
+    };
+    execute();
+    cleanup.push(() => {
+      if (controller.signal.aborted) {
+        return;
+      }
+      controller.abort();
+    });
+    return () => {
+      cleanup.forEach((c2) => c2());
+    };
+  }, [
+    actualSrc,
+    delayRenderRetries,
+    delayRenderTimeoutInMilliseconds,
+    onError
+  ]);
   const onErr = useCallback13(() => {
     if (onError) {
-      onError?.(new Error("Failed to load image with src " + actualSrc));
+      onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
-      cancelRender("Failed to load image with src " + actualSrc);
+      cancelRender("Failed to load image with src " + imageSrc);
     }
-  }, [actualSrc, onError]);
+  }, [imageSrc, onError]);
   const className = useMemo29(() => {
     return [OFFTHREAD_VIDEO_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
+  if (!imageSrc) {
+    return null;
+  }
   return jsx29(Img, {
-    src: actualSrc,
+    src: imageSrc,
     className,
+    delayRenderRetries,
+    delayRenderTimeoutInMilliseconds,
     ...props2,
     onError: onErr
   });
@@ -5882,7 +5949,7 @@ useEffect as useEffect22,
 useImperativeHandle as useImperativeHandle7,
 useMemo as useMemo30,
 useRef as useRef13,
-useState as useState18
+useState as useState19
 } from "react";
 import {
 jsx as jsx30
@@ -5914,7 +5981,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const { fps, durationInFrames } = useVideoConfig();
   const parentSequence = useContext28(SequenceContext);
   const { hidden } = useContext28(SequenceVisibilityToggleContext);
-  const [timelineId] = useState18(() => String(Math.random()));
+  const [timelineId] = useState19(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -6113,7 +6180,7 @@ forwardRef as forwardRef10,
 useContext as useContext29,
 useEffect as useEffect23,
 useImperativeHandle as useImperativeHandle8,
-useLayoutEffect as useLayoutEffect6,
+useLayoutEffect as useLayoutEffect7,
 useMemo as useMemo31,
 useRef as useRef14
 } from "react";
@@ -6364,7 +6431,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect6(() => {
+    useLayoutEffect7(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.180";
+var VERSION = "4.0.182";
 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.180",
+  "version": "4.0.182",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",