@remotion/three 4.0.341 → 4.0.345

package/dist/cjs/SuspenseLoader.js

@@ -5,14 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const Unblocker = () => {
+    const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
     if (typeof document !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
-            const handle = (0, remotion_1.delayRender)(`Waiting for <Suspense /> of <ThreeCanvas /> to resolve`);
+            const handle = delayRender(`Waiting for <Suspense /> of <ThreeCanvas /> to resolve`);
             return () => {
-                (0, remotion_1.continueRender)(handle);
+                continueRender(handle);
             };
-        }, []);
+        }, [continueRender, delayRender]);
     }
     return null;
 };

package/dist/cjs/ThreeCanvas.js

@@ -25,16 +25,17 @@ const FiberFrameInvalidator = () => {
     }, [frame, invalidate]);
     return null;
 };
-const { isRendering } = (0, remotion_1.getRemotionEnvironment)();
-// https://r3f.docs.pmnd.rs/advanced/scaling-performance#on-demand-rendering
-const shouldUseFrameloopDemand = isRendering;
 /*
  * @description A wrapper for React Three Fiber's <Canvas /> which synchronizes with Remotion's useCurrentFrame().
  * @see [Documentation](https://www.remotion.dev/docs/three-canvas)
  */
 const ThreeCanvas = (props) => {
+    const { isRendering } = (0, remotion_1.useRemotionEnvironment)();
+    // https://r3f.docs.pmnd.rs/advanced/scaling-performance#on-demand-rendering
+    const shouldUseFrameloopDemand = isRendering;
     const { children, width, height, style, onCreated, ...rest } = props;
-    const [waitForCreated] = (0, react_1.useState)(() => (0, remotion_1.delayRender)('Waiting for <ThreeCanvas/> to be created'));
+    const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
+    const [waitForCreated] = (0, react_1.useState)(() => delayRender('Waiting for <ThreeCanvas/> to be created'));
     (0, validate_1.validateDimension)(width, 'width', 'of the <ThreeCanvas /> component');
     (0, validate_1.validateDimension)(height, 'height', 'of the <ThreeCanvas /> component');
     const contexts = remotion_1.Internals.useRemotionContexts();
@@ -44,9 +45,9 @@ const ThreeCanvas = (props) => {
         ...(style !== null && style !== void 0 ? style : {}),
     };
     const remotion_onCreated = (0, react_1.useCallback)((state) => {
-        (0, remotion_1.continueRender)(waitForCreated);
+        continueRender(waitForCreated);
         onCreated === null || onCreated === void 0 ? void 0 : onCreated(state);
-    }, [onCreated, waitForCreated]);
+    }, [onCreated, waitForCreated, continueRender]);
     return ((0, jsx_runtime_1.jsx)(SuspenseLoader_1.SuspenseLoader, { children: (0, jsx_runtime_1.jsxs)(fiber_1.Canvas, { style: actualStyle, ...rest, frameloop: shouldUseFrameloopDemand ? 'demand' : 'always', onCreated: remotion_onCreated, children: [(0, jsx_runtime_1.jsx)(Scale, { width: width, height: height }), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.RemotionContextProvider, { contexts: contexts, children: [shouldUseFrameloopDemand && (0, jsx_runtime_1.jsx)(FiberFrameInvalidator, {}), children] })] }) }));
 };
 exports.ThreeCanvas = ThreeCanvas;

package/dist/cjs/use-offthread-video-texture.js

@@ -59,8 +59,9 @@ const useInnerVideoTexture = ({ playbackRate, src, transparent, toneMapped, dela
     }, [toneMapped, currentTime, src, transparent]);
     const [textLoaderPromise] = (0, react_1.useState)(() => Promise.resolve().then(() => __importStar(require('three/src/loaders/TextureLoader.js'))));
     const [imageTexture, setImageTexture] = (0, react_1.useState)(null);
+    const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
     const fetchTexture = (0, react_1.useCallback)(() => {
-        const imageTextureHandle = (0, remotion_1.delayRender)('fetch offthread video frame', {
+        const imageTextureHandle = delayRender('fetch offthread video frame', {
             retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
         });
@@ -75,7 +76,7 @@ const useInnerVideoTexture = ({ playbackRate, src, transparent, toneMapped, dela
                     return;
                 }
                 setImageTexture(texture);
-                (0, remotion_1.continueRender)(imageTextureHandle);
+                continueRender(imageTextureHandle);
             })
                 .catch((err) => {
                 (0, remotion_1.cancelRender)(err);
@@ -84,13 +85,15 @@ const useInnerVideoTexture = ({ playbackRate, src, transparent, toneMapped, dela
         return () => {
             cleanedUp = true;
             textureLoaded === null || textureLoaded === void 0 ? void 0 : textureLoaded.dispose();
-            (0, remotion_1.continueRender)(imageTextureHandle);
+            continueRender(imageTextureHandle);
         };
     }, [
         offthreadVideoFrameSrc,
         textLoaderPromise,
         delayRenderRetries,
         delayRenderTimeoutInMilliseconds,
+        continueRender,
+        delayRender,
     ]);
     (0, react_1.useLayoutEffect)(() => {
         const cleanup = fetchTexture();
@@ -109,9 +112,10 @@ function useOffthreadVideoTexture({ src, playbackRate = 1, transparent = false,
     if (!src) {
         throw new Error('src must be provided to useOffthreadVideoTexture');
     }
-    const { isRendering } = (0, remotion_1.getRemotionEnvironment)();
+    const env = (0, remotion_1.useRemotionEnvironment)();
+    const { isRendering } = env;
     if (!isRendering) {
-        throw new Error('useOffthreadVideoTexture() can only be used during rendering. Use getRemotionEnvironment().isRendering to render it conditionally.');
+        throw new Error('useOffthreadVideoTexture() can only be used during rendering. Use useRemotionEnvironment().isRendering to render it conditionally.');
     }
     return (0, exports.useInnerVideoTexture)({
         playbackRate,

package/dist/cjs/use-video-texture.js

@@ -50,11 +50,12 @@ const warnAboutRequestVideoFrameCallback = () => {
  * @see [Documentation](https://www.remotion.dev/docs/use-video-texture)
  */
 const useVideoTexture = (videoRef) => {
+    const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
     const [loaded] = (0, react_1.useState)(() => {
         if (typeof document === 'undefined') {
             return 0;
         }
-        return (0, remotion_1.delayRender)(`Waiting for texture in useVideoTexture() to be loaded`);
+        return delayRender(`Waiting for texture in useVideoTexture() to be loaded`);
     });
     const [videoTexture, setVideoTexture] = (0, react_1.useState)(null);
     const [vidText] = (0, react_1.useState)(() => Promise.resolve().then(() => __importStar(require('three/src/textures/VideoTexture.js'))));
@@ -69,12 +70,12 @@ const useVideoTexture = (videoRef) => {
             videoRef.current.width = videoRef.current.videoWidth;
             videoRef.current.height = videoRef.current.videoHeight;
             setVideoTexture(vt);
-            (0, remotion_1.continueRender)(loaded);
+            continueRender(loaded);
         })
             .catch((err) => {
             (0, remotion_1.cancelRender)(err);
         });
-    }, [loaded, vidText, videoRef]);
+    }, [loaded, vidText, videoRef, continueRender]);
     react_1.default.useLayoutEffect(() => {
         if (!videoRef.current) {
             return;
@@ -105,12 +106,12 @@ const useVideoTexture = (videoRef) => {
     (0, react_1.useEffect)(() => {
         // Clean up on unmount
         return () => {
-            (0, remotion_1.continueRender)(loaded);
+            continueRender(loaded);
         };
-    }, [loaded]);
+    }, [loaded, continueRender]);
     if (typeof HTMLVideoElement === 'undefined' ||
         !HTMLVideoElement.prototype.requestVideoFrameCallback) {
-        (0, remotion_1.continueRender)(loaded);
+        continueRender(loaded);
         return null;
     }
     return videoTexture;

package/dist/esm/index.mjs

@@ -27,24 +27,24 @@ import { Canvas, useThree } from "@react-three/fiber";
 import { useCallback, useEffect, useLayoutEffect as useLayoutEffect2, useState } from "react";
 import {
   Internals,
-  continueRender as continueRender2,
-  delayRender as delayRender2,
-  getRemotionEnvironment,
-  useCurrentFrame
+  useCurrentFrame,
+  useDelayRender as useDelayRender2,
+  useRemotionEnvironment
 } from "remotion";
 
 // src/SuspenseLoader.tsx
 import { Suspense, useLayoutEffect } from "react";
-import { continueRender, delayRender } from "remotion";
+import { useDelayRender } from "remotion";
 import { jsx } from "react/jsx-runtime";
 var Unblocker = () => {
+  const { delayRender, continueRender } = useDelayRender();
   if (typeof document !== "undefined") {
     useLayoutEffect(() => {
       const handle = delayRender(`Waiting for <Suspense /> of <ThreeCanvas /> to resolve`);
       return () => {
         continueRender(handle);
       };
-    }, []);
+    }, [continueRender, delayRender]);
   }
   return null;
 };
@@ -82,11 +82,12 @@ var FiberFrameInvalidator = () => {
   }, [frame, invalidate]);
   return null;
 };
-var { isRendering } = getRemotionEnvironment();
-var shouldUseFrameloopDemand = isRendering;
 var ThreeCanvas = (props) => {
+  const { isRendering } = useRemotionEnvironment();
+  const shouldUseFrameloopDemand = isRendering;
   const { children, width, height, style, onCreated, ...rest } = props;
-  const [waitForCreated] = useState(() => delayRender2("Waiting for <ThreeCanvas/> to be created"));
+  const { delayRender, continueRender } = useDelayRender2();
+  const [waitForCreated] = useState(() => delayRender("Waiting for <ThreeCanvas/> to be created"));
   validateDimension(width, "width", "of the <ThreeCanvas /> component");
   validateDimension(height, "height", "of the <ThreeCanvas /> component");
   const contexts = Internals.useRemotionContexts();
@@ -96,9 +97,9 @@ var ThreeCanvas = (props) => {
     ...style ?? {}
   };
   const remotion_onCreated = useCallback((state) => {
-    continueRender2(waitForCreated);
+    continueRender(waitForCreated);
     onCreated?.(state);
-  }, [onCreated, waitForCreated]);
+  }, [onCreated, waitForCreated, continueRender]);
   return /* @__PURE__ */ jsx2(SuspenseLoader, {
     children: /* @__PURE__ */ jsxs(Canvas, {
       style: actualStyle,
@@ -126,10 +127,9 @@ import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect3, useMe
 import {
   Internals as Internals2,
   cancelRender,
-  continueRender as continueRender3,
-  delayRender as delayRender3,
-  getRemotionEnvironment as getRemotionEnvironment2,
   useCurrentFrame as useCurrentFrame2,
+  useDelayRender as useDelayRender3,
+  useRemotionEnvironment as useRemotionEnvironment2,
   useVideoConfig
 } from "remotion";
 import { NoReactInternals as NoReactInternals2 } from "remotion/no-react";
@@ -161,8 +161,9 @@ var useInnerVideoTexture = ({
   }, [toneMapped, currentTime, src, transparent]);
   const [textLoaderPromise] = useState2(() => import("three/src/loaders/TextureLoader.js"));
   const [imageTexture, setImageTexture] = useState2(null);
+  const { delayRender, continueRender } = useDelayRender3();
   const fetchTexture = useCallback2(() => {
-    const imageTextureHandle = delayRender3("fetch offthread video frame", {
+    const imageTextureHandle = delayRender("fetch offthread video frame", {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
@@ -175,7 +176,7 @@ var useInnerVideoTexture = ({
           return;
         }
         setImageTexture(texture);
-        continueRender3(imageTextureHandle);
+        continueRender(imageTextureHandle);
       }).catch((err) => {
         cancelRender(err);
       });
@@ -183,13 +184,15 @@ var useInnerVideoTexture = ({
     return () => {
       cleanedUp = true;
       textureLoaded?.dispose();
-      continueRender3(imageTextureHandle);
+      continueRender(imageTextureHandle);
     };
   }, [
     offthreadVideoFrameSrc,
     textLoaderPromise,
     delayRenderRetries,
-    delayRenderTimeoutInMilliseconds
+    delayRenderTimeoutInMilliseconds,
+    continueRender,
+    delayRender
   ]);
   useLayoutEffect3(() => {
     const cleanup = fetchTexture();
@@ -210,9 +213,10 @@ function useOffthreadVideoTexture({
   if (!src) {
     throw new Error("src must be provided to useOffthreadVideoTexture");
   }
-  const { isRendering: isRendering2 } = getRemotionEnvironment2();
-  if (!isRendering2) {
-    throw new Error("useOffthreadVideoTexture() can only be used during rendering. Use getRemotionEnvironment().isRendering to render it conditionally.");
+  const env = useRemotionEnvironment2();
+  const { isRendering } = env;
+  if (!isRendering) {
+    throw new Error("useOffthreadVideoTexture() can only be used during rendering. Use useRemotionEnvironment().isRendering to render it conditionally.");
   }
   return useInnerVideoTexture({
     playbackRate,
@@ -225,12 +229,7 @@ function useOffthreadVideoTexture({
 }
 // src/use-video-texture.ts
 import React3, { useCallback as useCallback3, useEffect as useEffect2, useState as useState3 } from "react";
-import {
-  cancelRender as cancelRender2,
-  continueRender as continueRender4,
-  delayRender as delayRender4,
-  useCurrentFrame as useCurrentFrame3
-} from "remotion";
+import { cancelRender as cancelRender2, useCurrentFrame as useCurrentFrame3, useDelayRender as useDelayRender4 } from "remotion";
 var warned = false;
 var warnAboutRequestVideoFrameCallback = () => {
   if (warned) {
@@ -240,11 +239,12 @@ var warnAboutRequestVideoFrameCallback = () => {
   console.warn("Browser does not support requestVideoFrameCallback. Cannot display video.");
 };
 var useVideoTexture = (videoRef) => {
+  const { delayRender, continueRender } = useDelayRender4();
   const [loaded] = useState3(() => {
     if (typeof document === "undefined") {
       return 0;
     }
-    return delayRender4(`Waiting for texture in useVideoTexture() to be loaded`);
+    return delayRender(`Waiting for texture in useVideoTexture() to be loaded`);
   });
   const [videoTexture, setVideoTexture] = useState3(null);
   const [vidText] = useState3(() => import("three/src/textures/VideoTexture.js"));
@@ -258,11 +258,11 @@ var useVideoTexture = (videoRef) => {
       videoRef.current.width = videoRef.current.videoWidth;
       videoRef.current.height = videoRef.current.videoHeight;
       setVideoTexture(vt);
-      continueRender4(loaded);
+      continueRender(loaded);
     }).catch((err) => {
       cancelRender2(err);
     });
-  }, [loaded, vidText, videoRef]);
+  }, [loaded, vidText, videoRef, continueRender]);
   React3.useLayoutEffect(() => {
     if (!videoRef.current) {
       return;
@@ -289,11 +289,11 @@ var useVideoTexture = (videoRef) => {
   }, [frame, loaded, videoRef]);
   useEffect2(() => {
     return () => {
-      continueRender4(loaded);
+      continueRender(loaded);
     };
-  }, [loaded]);
+  }, [loaded, continueRender]);
   if (typeof HTMLVideoElement === "undefined" || !HTMLVideoElement.prototype.requestVideoFrameCallback) {
-    continueRender4(loaded);
+    continueRender(loaded);
     return null;
   }
   return videoTexture;

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/three"
   },
   "name": "@remotion/three",
-  "version": "4.0.341",
+  "version": "4.0.345",
   "description": "Include React Three Fiber components in a Remotion video",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -16,14 +16,14 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.341"
+    "remotion": "4.0.345"
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "three": ">=0.137.0",
-    "remotion": "4.0.341"
+    "remotion": "4.0.345"
   },
   "devDependencies": {
     "@react-three/fiber": "9.2.0",
@@ -34,8 +34,8 @@
     "react-dom": "19.0.0",
     "three": "0.178.0",
     "eslint": "9.19.0",
-    "remotion": "4.0.341",
-    "@remotion/eslint-config-internal": "4.0.341"
+    "@remotion/eslint-config-internal": "4.0.345",
+    "remotion": "4.0.345"
   },
   "keywords": [
     "remotion",