@remotion/three 4.0.386 → 4.0.387

package/dist/cjs/index.d.ts

@@ -1,3 +1,21 @@
 export { ThreeCanvas, ThreeCanvasProps } from './ThreeCanvas';
-export { UseOffthreadVideoTextureOptions, useOffthreadVideoTexture, } from './use-offthread-video-texture';
-export { UseVideoTextureOptions, useVideoTexture } from './use-video-texture';
+/**
+ * @deprecated useOffthreadVideoTexture has been deprecated.
+ * Use the approach documented at https://remotion.dev/docs/videos/as-threejs-texture instead.
+ */
+export type { UseOffthreadVideoTextureOptions } from './use-offthread-video-texture';
+/**
+ * @deprecated useOffthreadVideoTexture has been deprecated.
+ * Use the approach documented at https://remotion.dev/docs/videos/as-threejs-texture instead.
+ */
+export declare const useOffthreadVideoTexture: () => never;
+/**
+ * @deprecated useVideoTexture has been deprecated.
+ * Use the approach documented at https://remotion.dev/docs/videos/as-threejs-texture instead.
+ */
+export type { UseVideoTextureOptions } from './use-video-texture';
+/**
+ * @deprecated useVideoTexture has been deprecated.
+ * Use the approach documented at https://remotion.dev/docs/videos/as-threejs-texture for alternatives.
+ */
+export declare const useVideoTexture: () => never;

package/dist/cjs/index.js

@@ -3,7 +3,19 @@ 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; } });
+/**
+ * @deprecated useOffthreadVideoTexture has been deprecated.
+ * Use the approach documented at https://remotion.dev/docs/videos/as-threejs-texture instead.
+ */
+const useOffthreadVideoTexture = () => {
+    throw new Error('useOffthreadVideoTexture has been deprecated. Please see https://remotion.dev/docs/videos/as-threejs-texture for alternatives.');
+};
+exports.useOffthreadVideoTexture = useOffthreadVideoTexture;
+/**
+ * @deprecated useVideoTexture has been deprecated.
+ * Use the approach documented at https://remotion.dev/docs/videos/as-threejs-texture for alternatives.
+ */
+const useVideoTexture = () => {
+    throw new Error('useVideoTexture has been deprecated. Please see https://remotion.dev/docs/videos/as-threejs-texture for alternatives.');
+};
+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

@@ -1,27 +1,3 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __toESM = (mod, isNodeMode, target) => {
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: () => mod[key],
-        enumerable: true
-      });
-  return to;
-};
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
 // src/ThreeCanvas.tsx
 import { Canvas, useThree } from "@react-three/fiber";
 import { useCallback, useEffect, useLayoutEffect as useLayoutEffect2, useState } from "react";
@@ -122,181 +98,13 @@ var ThreeCanvas = (props) => {
     })
   });
 };
-// src/use-offthread-video-texture.ts
-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,
-  useVideoConfig
-} from "remotion";
-import { NoReactInternals as NoReactInternals2 } from "remotion/no-react";
-var useInnerVideoTexture = ({
-  playbackRate,
-  src,
-  transparent,
-  toneMapped,
-  delayRenderRetries,
-  delayRenderTimeoutInMilliseconds
-}) => {
-  const frame = useCurrentFrame2();
-  const { fps } = useVideoConfig();
-  const mediaStartsAt = Internals2.useMediaStartsAt();
-  const currentTime = useMemo(() => {
-    return NoReactInternals2.getExpectedMediaFrameUncorrected({
-      frame,
-      playbackRate,
-      startFrom: -mediaStartsAt
-    }) / fps;
-  }, [frame, playbackRate, mediaStartsAt, fps]);
-  const offthreadVideoFrameSrc = useMemo(() => {
-    return NoReactInternals2.getOffthreadVideoSource({
-      currentTime,
-      src,
-      transparent,
-      toneMapped
-    });
-  }, [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 = delayRender("fetch offthread video frame", {
-      retries: delayRenderRetries ?? undefined,
-      timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
-    });
-    let textureLoaded = null;
-    let cleanedUp = false;
-    textLoaderPromise.then((loader) => {
-      new loader.TextureLoader().loadAsync(offthreadVideoFrameSrc).then((texture) => {
-        textureLoaded = texture;
-        if (cleanedUp) {
-          return;
-        }
-        setImageTexture(texture);
-        continueRender(imageTextureHandle);
-      }).catch((err) => {
-        cancelRender(err);
-      });
-    });
-    return () => {
-      cleanedUp = true;
-      textureLoaded?.dispose();
-      continueRender(imageTextureHandle);
-    };
-  }, [
-    offthreadVideoFrameSrc,
-    textLoaderPromise,
-    delayRenderRetries,
-    delayRenderTimeoutInMilliseconds,
-    continueRender,
-    delayRender
-  ]);
-  useLayoutEffect3(() => {
-    const cleanup = fetchTexture();
-    return () => {
-      cleanup();
-    };
-  }, [offthreadVideoFrameSrc, fetchTexture]);
-  return imageTexture;
-};
-function useOffthreadVideoTexture({
-  src,
-  playbackRate = 1,
-  transparent = false,
-  toneMapped = true,
-  delayRenderRetries,
-  delayRenderTimeoutInMilliseconds
-}) {
-  if (!src) {
-    throw new Error("src must be provided to useOffthreadVideoTexture");
-  }
-  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,
-    src,
-    transparent,
-    toneMapped,
-    delayRenderRetries,
-    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";
-var warned = false;
-var warnAboutRequestVideoFrameCallback = () => {
-  if (warned) {
-    return false;
-  }
-  warned = true;
-  console.warn("Browser does not support requestVideoFrameCallback. Cannot display video.");
+
+// src/index.ts
+var useOffthreadVideoTexture = () => {
+  throw new Error("useOffthreadVideoTexture has been deprecated. Please see https://remotion.dev/docs/videos/as-threejs-texture for alternatives.");
 };
-var useVideoTexture = (videoRef) => {
-  const { delayRender, continueRender } = useDelayRender4();
-  const [loaded] = useState3(() => {
-    if (typeof document === "undefined") {
-      return 0;
-    }
-    return delayRender(`Waiting for texture in useVideoTexture() to be loaded`);
-  });
-  const [videoTexture, setVideoTexture] = useState3(null);
-  const [vidText] = useState3(() => import("three/src/textures/VideoTexture.js"));
-  const frame = useCurrentFrame3();
-  const onReady = useCallback3(() => {
-    vidText.then(({ VideoTexture }) => {
-      if (!videoRef.current) {
-        throw new Error("Video not ready");
-      }
-      const vt = new VideoTexture(videoRef.current);
-      videoRef.current.width = videoRef.current.videoWidth;
-      videoRef.current.height = videoRef.current.videoHeight;
-      setVideoTexture(vt);
-      continueRender(loaded);
-    }).catch((err) => {
-      cancelRender2(err);
-    });
-  }, [loaded, vidText, videoRef, continueRender]);
-  React3.useLayoutEffect(() => {
-    if (!videoRef.current) {
-      return;
-    }
-    if (videoRef.current.readyState >= 2) {
-      onReady();
-      return;
-    }
-    videoRef.current.addEventListener("loadeddata", () => {
-      onReady();
-    }, { once: true });
-  }, [loaded, onReady, videoRef]);
-  React3.useEffect(() => {
-    const { current } = videoRef;
-    if (!current) {
-      return;
-    }
-    if (!current.requestVideoFrameCallback) {
-      warnAboutRequestVideoFrameCallback();
-      return;
-    }
-    const ready = () => {};
-    current.requestVideoFrameCallback(ready);
-  }, [frame, loaded, videoRef]);
-  useEffect2(() => {
-    return () => {
-      continueRender(loaded);
-    };
-  }, [loaded, continueRender]);
-  if (typeof HTMLVideoElement === "undefined" || !HTMLVideoElement.prototype.requestVideoFrameCallback) {
-    continueRender(loaded);
-    return null;
-  }
-  return videoTexture;
+var useVideoTexture = () => {
+  throw new Error("useVideoTexture has been deprecated. Please see https://remotion.dev/docs/videos/as-threejs-texture for alternatives.");
 };
 export {
   useVideoTexture,

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.387",
 	"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.387"
 	},
 	"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.387"
 	},
 	"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.387",
 		"three": "0.178.0",
-		"@remotion/eslint-config-internal": "4.0.386",
+		"@remotion/eslint-config-internal": "4.0.387",
 		"eslint": "9.19.0"
 	},
 	"keywords": [