remotion 4.0.211 → 4.0.213

package/dist/cjs/HideSequence.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const HideSequence: React.FC<{
+    readonly from: number;
+    readonly durationInFrames: number;
+    readonly children: React.ReactNode;
+}>;
+export declare const useCustomFrame: () => number;

package/dist/cjs/HideSequence.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCustomFrame = exports.HideSequence = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const use_current_frame_1 = require("./use-current-frame");
+const context = react_1.default.createContext(null);
+const HideSequence = ({ from, durationInFrames, children }) => {
+    var _a, _b, _c;
+    const parent = react_1.default.useContext(context);
+    const frame = (0, use_current_frame_1.useCurrentFrame)();
+    const actualFrame = (_a = parent === null || parent === void 0 ? void 0 : parent.frame) !== null && _a !== void 0 ? _a : frame;
+    const cascadedFrame = actualFrame + ((_b = parent === null || parent === void 0 ? void 0 : parent.from) !== null && _b !== void 0 ? _b : 0);
+    const visible = cascadedFrame >= from &&
+        cascadedFrame < from + durationInFrames &&
+        ((_c = parent === null || parent === void 0 ? void 0 : parent.visible) !== null && _c !== void 0 ? _c : true);
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            from,
+            durationInFrames,
+            visible,
+            frame: cascadedFrame,
+        };
+    }, [cascadedFrame, durationInFrames, from, visible]);
+    return (0, jsx_runtime_1.jsx)(context.Provider, { value: value, children: children });
+};
+exports.HideSequence = HideSequence;
+const useCustomFrame = () => {
+    const ctx = react_1.default.useContext(context);
+    const frame = (0, use_current_frame_1.useCurrentFrame)();
+    if (!ctx) {
+        return frame;
+    }
+    return ctx.frame;
+};
+exports.useCustomFrame = useCustomFrame;

package/dist/cjs/Img.js

@@ -70,6 +70,9 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
         (0, react_1.useLayoutEffect)(() => {
             var _a, _b;
             if (((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) === 'test') {
+                if (imageRef.current) {
+                    imageRef.current.src = actualSrc;
+                }
                 return;
             }
             const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + actualSrc, {
@@ -80,31 +83,45 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
                 ? 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) {
+                    return;
+                }
                 if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
                     delete errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src];
                     // eslint-disable-next-line no-console
                     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 didLoad = () => {
-                onComplete();
-            };
-            if (current === null || current === void 0 ? void 0 : current.complete) {
-                onComplete();
-            }
-            else {
-                current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
-            }
+            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 tag gets unmounted, clear pending handles because image is not going to load
             return () => {
-                current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
+                unmounted = true;
+                newImg.removeEventListener('load', onComplete);
                 unblock();
                 (0, delay_render_js_1.continueRender)(newHandle);
             };
@@ -118,7 +135,8 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
             onImageFrame,
         ]);
     }
-    return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
+    // src gets set once we've loaded and decoded the image.
+    return (0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, onError: didGetError });
 };
 /**
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.

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/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.211";
+export declare const VERSION = "4.0.213";

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.211';
+exports.VERSION = '4.0.213';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -108,7 +108,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
         const cleanup = [];
         setImageSrc(null);
         const controller = new AbortController();
-        const newHandle = (0, delay_render_js_1.delayRender)('Fetching ' + actualSrc + 'from server', {
+        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,
         });

package/dist/esm/index.mjs

@@ -155,7 +155,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.211";
+var VERSION = "4.0.213";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -4557,6 +4557,9 @@ var ImgRefForwarding = ({
     const isPremounting = Boolean(sequenceContext?.premounting);
     useLayoutEffect4(() => {
       if (window.process?.env?.NODE_ENV === "test") {
+        if (imageRef.current) {
+          imageRef.current.src = actualSrc;
+        }
         return;
       }
       const newHandle = delayRender("Loading <Img> with src=" + actualSrc, {
@@ -4567,27 +4570,35 @@ var ImgRefForwarding = ({
         return;
       };
       const { current } = imageRef;
+      let unmounted = false;
       const onComplete = () => {
+        if (unmounted) {
+          return;
+        }
         if ((errors.current[imageRef.current?.src] ?? 0) > 0) {
           delete errors.current[imageRef.current?.src];
           console.info(`Retry successful - ${imageRef.current?.src} is now loaded`);
         }
         if (current) {
+          current.src = actualSrc;
           onImageFrame?.(current);
         }
         unblock();
         continueRender(newHandle);
       };
-      const didLoad = () => {
-        onComplete();
-      };
-      if (current?.complete) {
-        onComplete();
-      } else {
-        current?.addEventListener("load", didLoad, { once: true });
-      }
+      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);
+        }
+      });
       return () => {
-        current?.removeEventListener("load", didLoad);
+        unmounted = true;
+        newImg.removeEventListener("load", onComplete);
         unblock();
         continueRender(newHandle);
       };
@@ -4604,7 +4615,6 @@ var ImgRefForwarding = ({
   return /* @__PURE__ */ jsx24("img", {
     ...props2,
     ref: imageRef,
-    src: actualSrc,
     onError: didGetError
   });
 };
@@ -5929,7 +5939,7 @@ var OffthreadVideoForRendering = ({
     const cleanup = [];
     setImageSrc(null);
     const controller = new AbortController;
-    const newHandle = delayRender("Fetching " + actualSrc + "from server", {
+    const newHandle = delayRender(`Fetching ${actualSrc} from server`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });

package/dist/esm/version.mjs

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