@remotion/three 4.0.387 → 4.0.389

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

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

package/dist/esm/index.mjs

@@ -1,3 +1,27 @@
+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";
@@ -98,16 +122,201 @@ 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,
+  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, cancelRender } = 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,
+    cancelRender
+  ]);
+  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, 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.");
+  }
+  return useInnerVideoTexture({
+    playbackRate,
+    src,
+    transparent,
+    toneMapped,
+    delayRenderRetries,
+    delayRenderTimeoutInMilliseconds
+  });
+}
 
-// src/index.ts
-var useOffthreadVideoTexture = () => {
-  throw new Error("useOffthreadVideoTexture has been deprecated. Please see https://remotion.dev/docs/videos/as-threejs-texture for alternatives.");
+// src/use-video-texture.ts
+import React3, { useCallback as useCallback3, useEffect as useEffect2, useState as useState3 } from "react";
+import {
+  useCurrentFrame as useCurrentFrame3,
+  useDelayRender as useDelayRender4,
+  useRemotionEnvironment as useRemotionEnvironment3
+} from "remotion";
+var warned = false;
+var warnAboutRequestVideoFrameCallback = () => {
+  if (warned) {
+    return false;
+  }
+  warned = true;
+  console.warn("Browser does not support requestVideoFrameCallback. Cannot display video.");
 };
-var useVideoTexture = () => {
-  throw new Error("useVideoTexture has been deprecated. Please see https://remotion.dev/docs/videos/as-threejs-texture for alternatives.");
+var useVideoTexture = (videoRef) => {
+  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();
+  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) => {
+      cancelRender(err);
+    });
+  }, [loaded, vidText, videoRef, continueRender, cancelRender]);
+  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;
 };
+
+// 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.387",
+	"version": "4.0.389",
 	"description": "Include React Three Fiber components in a Remotion video",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -21,14 +21,14 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.387"
+		"remotion": "4.0.389"
 	},
 	"peerDependencies": {
 		"@react-three/fiber": ">=8.0.0",
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0",
 		"three": ">=0.137.0",
-		"remotion": "4.0.387"
+		"remotion": "4.0.389"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
@@ -37,9 +37,9 @@
 		"@types/web": "0.0.166",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"remotion": "4.0.387",
+		"remotion": "4.0.389",
 		"three": "0.178.0",
-		"@remotion/eslint-config-internal": "4.0.387",
+		"@remotion/eslint-config-internal": "4.0.389",
 		"eslint": "9.19.0"
 	},
 	"keywords": [