@remotion/three 4.0.386 → 4.0.388

package/dist/cjs/index.d.ts

@@ -1,3 +1,25 @@
 export { ThreeCanvas, ThreeCanvasProps } from './ThreeCanvas';
-export { UseOffthreadVideoTextureOptions, useOffthreadVideoTexture, } from './use-offthread-video-texture';
-export { UseVideoTextureOptions, useVideoTexture } from './use-video-texture';
+import type { UseOffthreadVideoTextureOptions as UseOffthreadVideoTextureOptionsType } from './use-offthread-video-texture';
+import { useOffthreadVideoTexture as useOffthreadVideoTextureType } from './use-offthread-video-texture';
+import type { UseVideoTextureOptions as UseVideoTextureOptionsType } from './use-video-texture';
+/**
+ * @deprecated useOffthreadVideoTexture has been deprecated.
+ * Use the approach documented at https://remotion.dev/docs/videos/as-threejs-texture instead.
+ */
+declare const useOffthreadVideoTexture: typeof useOffthreadVideoTextureType;
+/**
+ * @deprecated useOffthreadVideoTexture has been deprecated.
+ * Use the approach documented at https://remotion.dev/docs/videos/as-threejs-texture instead.
+ */
+type UseOffthreadVideoTextureOptions = UseOffthreadVideoTextureOptionsType;
+/**
+ * @deprecated useVideoTexture has been deprecated.
+ * Use the approach documented at https://remotion.dev/docs/videos/as-threejs-texture instead.
+ */
+declare const useVideoTexture: (videoRef: React.RefObject<HTMLVideoElement | null>) => import("three").VideoTexture | null;
+/**
+ * @deprecated useVideoTexture has been deprecated.
+ * Use the approach documented at https://remotion.dev/docs/videos/as-threejs-texture instead.
+ */
+type UseVideoTextureOptions = UseVideoTextureOptionsType;
+export { useOffthreadVideoTexture, UseOffthreadVideoTextureOptions, useVideoTexture, UseVideoTextureOptions, };

package/dist/cjs/index.js

@@ -3,7 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVideoTexture = exports.useOffthreadVideoTexture = exports.ThreeCanvas = void 0;
 var ThreeCanvas_1 = require("./ThreeCanvas");
 Object.defineProperty(exports, "ThreeCanvas", { enumerable: true, get: function () { return ThreeCanvas_1.ThreeCanvas; } });
-var use_offthread_video_texture_1 = require("./use-offthread-video-texture");
-Object.defineProperty(exports, "useOffthreadVideoTexture", { enumerable: true, get: function () { return use_offthread_video_texture_1.useOffthreadVideoTexture; } });
-var use_video_texture_1 = require("./use-video-texture");
-Object.defineProperty(exports, "useVideoTexture", { enumerable: true, get: function () { return use_video_texture_1.useVideoTexture; } });
+const use_offthread_video_texture_1 = require("./use-offthread-video-texture");
+const use_video_texture_1 = require("./use-video-texture");
+/**
+ * @deprecated useOffthreadVideoTexture has been deprecated.
+ * Use the approach documented at https://remotion.dev/docs/videos/as-threejs-texture instead.
+ */
+const useOffthreadVideoTexture = use_offthread_video_texture_1.useOffthreadVideoTexture;
+exports.useOffthreadVideoTexture = useOffthreadVideoTexture;
+/**
+ * @deprecated useVideoTexture has been deprecated.
+ * Use the approach documented at https://remotion.dev/docs/videos/as-threejs-texture instead.
+ */
+const useVideoTexture = use_video_texture_1.useVideoTexture;
+exports.useVideoTexture = useVideoTexture;

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

@@ -59,7 +59,7 @@ 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 { delayRender, continueRender, cancelRender } = (0, remotion_1.useDelayRender)();
     const fetchTexture = (0, react_1.useCallback)(() => {
         const imageTextureHandle = delayRender('fetch offthread video frame', {
             retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
@@ -79,7 +79,7 @@ const useInnerVideoTexture = ({ playbackRate, src, transparent, toneMapped, dela
                 continueRender(imageTextureHandle);
             })
                 .catch((err) => {
-                (0, remotion_1.cancelRender)(err);
+                cancelRender(err);
             });
         });
         return () => {
@@ -94,6 +94,7 @@ const useInnerVideoTexture = ({ playbackRate, src, transparent, toneMapped, dela
         delayRenderTimeoutInMilliseconds,
         continueRender,
         delayRender,
+        cancelRender,
     ]);
     (0, react_1.useLayoutEffect)(() => {
         const cleanup = fetchTexture();
@@ -113,7 +114,10 @@ function useOffthreadVideoTexture({ src, playbackRate = 1, transparent = false,
         throw new Error('src must be provided to useOffthreadVideoTexture');
     }
     const env = (0, remotion_1.useRemotionEnvironment)();
-    const { isRendering } = env;
+    const { isRendering, isClientSideRendering } = env;
+    if (isClientSideRendering) {
+        throw new Error('useOffthreadVideoTexture() cannot be used in client-side rendering.');
+    }
     if (!isRendering) {
         throw new Error('useOffthreadVideoTexture() can only be used during rendering. Use useRemotionEnvironment().isRendering to render it conditionally.');
     }

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

@@ -50,13 +50,18 @@ const warnAboutRequestVideoFrameCallback = () => {
  * @see [Documentation](https://www.remotion.dev/docs/use-video-texture)
  */
 const useVideoTexture = (videoRef) => {
-    const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
+    const { delayRender, continueRender, cancelRender } = (0, remotion_1.useDelayRender)();
     const [loaded] = (0, react_1.useState)(() => {
         if (typeof document === 'undefined') {
             return 0;
         }
         return delayRender(`Waiting for texture in useVideoTexture() to be loaded`);
     });
+    const environment = (0, remotion_1.useRemotionEnvironment)();
+    const { isClientSideRendering } = environment;
+    if (isClientSideRendering) {
+        throw new Error('useVideoTexture() cannot be used in client side rendering.');
+    }
     const [videoTexture, setVideoTexture] = (0, react_1.useState)(null);
     const [vidText] = (0, react_1.useState)(() => Promise.resolve().then(() => __importStar(require('three/src/textures/VideoTexture.js'))));
     const frame = (0, remotion_1.useCurrentFrame)();
@@ -73,9 +78,9 @@ const useVideoTexture = (videoRef) => {
             continueRender(loaded);
         })
             .catch((err) => {
-            (0, remotion_1.cancelRender)(err);
+            cancelRender(err);
         });
-    }, [loaded, vidText, videoRef, continueRender]);
+    }, [loaded, vidText, videoRef, continueRender, cancelRender]);
     react_1.default.useLayoutEffect(() => {
         if (!videoRef.current) {
             return;

package/dist/esm/index.mjs

@@ -126,7 +126,6 @@ var ThreeCanvas = (props) => {
 import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect3, useMemo, useState as useState2 } from "react";
 import {
   Internals as Internals2,
-  cancelRender,
   useCurrentFrame as useCurrentFrame2,
   useDelayRender as useDelayRender3,
   useRemotionEnvironment as useRemotionEnvironment2,
@@ -161,7 +160,7 @@ 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 { delayRender, continueRender, cancelRender } = useDelayRender3();
   const fetchTexture = useCallback2(() => {
     const imageTextureHandle = delayRender("fetch offthread video frame", {
       retries: delayRenderRetries ?? undefined,
@@ -192,7 +191,8 @@ var useInnerVideoTexture = ({
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     continueRender,
-    delayRender
+    delayRender,
+    cancelRender
   ]);
   useLayoutEffect3(() => {
     const cleanup = fetchTexture();
@@ -214,7 +214,10 @@ function useOffthreadVideoTexture({
     throw new Error("src must be provided to useOffthreadVideoTexture");
   }
   const env = useRemotionEnvironment2();
-  const { isRendering } = env;
+  const { isRendering, isClientSideRendering } = env;
+  if (isClientSideRendering) {
+    throw new Error("useOffthreadVideoTexture() cannot be used in client-side rendering.");
+  }
   if (!isRendering) {
     throw new Error("useOffthreadVideoTexture() can only be used during rendering. Use useRemotionEnvironment().isRendering to render it conditionally.");
   }
@@ -227,9 +230,14 @@ function useOffthreadVideoTexture({
     delayRenderTimeoutInMilliseconds
   });
 }
+
 // src/use-video-texture.ts
 import React3, { useCallback as useCallback3, useEffect as useEffect2, useState as useState3 } from "react";
-import { cancelRender as cancelRender2, useCurrentFrame as useCurrentFrame3, useDelayRender as useDelayRender4 } from "remotion";
+import {
+  useCurrentFrame as useCurrentFrame3,
+  useDelayRender as useDelayRender4,
+  useRemotionEnvironment as useRemotionEnvironment3
+} from "remotion";
 var warned = false;
 var warnAboutRequestVideoFrameCallback = () => {
   if (warned) {
@@ -239,13 +247,18 @@ var warnAboutRequestVideoFrameCallback = () => {
   console.warn("Browser does not support requestVideoFrameCallback. Cannot display video.");
 };
 var useVideoTexture = (videoRef) => {
-  const { delayRender, continueRender } = useDelayRender4();
+  const { delayRender, continueRender, cancelRender } = useDelayRender4();
   const [loaded] = useState3(() => {
     if (typeof document === "undefined") {
       return 0;
     }
     return delayRender(`Waiting for texture in useVideoTexture() to be loaded`);
   });
+  const environment = useRemotionEnvironment3();
+  const { isClientSideRendering } = environment;
+  if (isClientSideRendering) {
+    throw new Error("useVideoTexture() cannot be used in client side rendering.");
+  }
   const [videoTexture, setVideoTexture] = useState3(null);
   const [vidText] = useState3(() => import("three/src/textures/VideoTexture.js"));
   const frame = useCurrentFrame3();
@@ -260,9 +273,9 @@ var useVideoTexture = (videoRef) => {
       setVideoTexture(vt);
       continueRender(loaded);
     }).catch((err) => {
-      cancelRender2(err);
+      cancelRender(err);
     });
-  }, [loaded, vidText, videoRef, continueRender]);
+  }, [loaded, vidText, videoRef, continueRender, cancelRender]);
   React3.useLayoutEffect(() => {
     if (!videoRef.current) {
       return;
@@ -298,8 +311,12 @@ var useVideoTexture = (videoRef) => {
   }
   return videoTexture;
 };
+
+// src/index.ts
+var useOffthreadVideoTexture2 = useOffthreadVideoTexture;
+var useVideoTexture2 = useVideoTexture;
 export {
-  useVideoTexture,
-  useOffthreadVideoTexture,
+  useVideoTexture2 as useVideoTexture,
+  useOffthreadVideoTexture2 as useOffthreadVideoTexture,
   ThreeCanvas
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/three"
 	},
 	"name": "@remotion/three",
-	"version": "4.0.386",
+	"version": "4.0.388",
 	"description": "Include React Three Fiber components in a Remotion video",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -21,25 +21,25 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.386"
+		"remotion": "4.0.388"
 	},
 	"peerDependencies": {
 		"@react-three/fiber": ">=8.0.0",
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0",
 		"three": ">=0.137.0",
-		"remotion": "4.0.386"
+		"remotion": "4.0.388"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
 		"@types/react-reconciler": "0.32.0",
 		"@types/three": "0.170.0",
 		"@types/web": "0.0.166",
-		"react": "19.2.1",
-		"react-dom": "19.2.1",
-		"remotion": "4.0.386",
+		"react": "19.2.3",
+		"react-dom": "19.2.3",
+		"remotion": "4.0.388",
 		"three": "0.178.0",
-		"@remotion/eslint-config-internal": "4.0.386",
+		"@remotion/eslint-config-internal": "4.0.388",
 		"eslint": "9.19.0"
 	},
 	"keywords": [