@remotion/three 4.0.82 → 4.0.83

package/dist/cjs/index.d.ts

@@ -1,2 +1,3 @@
 export { ThreeCanvas, ThreeCanvasProps } from './ThreeCanvas';
+export { useOffthreadVideoTexture, UseOffthreadVideoTextureOptions, } from './use-offthread-video-texture';
 export { useVideoTexture, UseVideoTextureOptions } from './use-video-texture';

package/dist/cjs/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVideoTexture = exports.ThreeCanvas = void 0;
+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; } });

package/dist/cjs/use-offthread-video-texture.d.ts

@@ -0,0 +1,11 @@
+export type UseOffthreadVideoTextureOptions = {
+    src: string;
+    playbackRate?: number;
+    transparent?: boolean;
+};
+export declare const useInnerVideoTexture: ({ playbackRate, src, transparent, }: {
+    playbackRate: number;
+    src: string;
+    transparent: boolean;
+}) => import("three").Texture | null;
+export declare function useOffthreadVideoTexture({ src, playbackRate, transparent, }: UseOffthreadVideoTextureOptions): import("three").Texture | null;

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

@@ -0,0 +1,86 @@
+"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.useOffthreadVideoTexture = exports.useInnerVideoTexture = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const no_react_1 = require("remotion/no-react");
+const useInnerVideoTexture = ({ playbackRate, src, transparent, }) => {
+    const frame = (0, remotion_1.useCurrentFrame)();
+    const { fps } = (0, remotion_1.useVideoConfig)();
+    const mediaStartsAt = remotion_1.Internals.useMediaStartsAt();
+    const currentTime = (0, react_1.useMemo)(() => {
+        return (no_react_1.NoReactInternals.getExpectedMediaFrameUncorrected({
+            frame,
+            playbackRate,
+            startFrom: -mediaStartsAt,
+        }) / fps);
+    }, [frame, playbackRate, mediaStartsAt, fps]);
+    const offthreadVideoFrameSrc = (0, react_1.useMemo)(() => {
+        return no_react_1.NoReactInternals.getOffthreadVideoSource({
+            currentTime,
+            src,
+            transparent,
+        });
+    }, [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 fetchTexture = (0, react_1.useCallback)(() => {
+        const imageTextureHandle = (0, remotion_1.delayRender)('fetch offthread video frame');
+        let textureLoaded = null;
+        textLoaderPromise.then((loader) => {
+            new loader.TextureLoader()
+                .loadAsync(offthreadVideoFrameSrc)
+                .then((texture) => {
+                textureLoaded = texture;
+                setImageTexture(texture);
+                (0, remotion_1.continueRender)(imageTextureHandle);
+            })
+                .catch((err) => {
+                (0, remotion_1.cancelRender)(err);
+            });
+        });
+        return () => {
+            textureLoaded === null || textureLoaded === void 0 ? void 0 : textureLoaded.dispose();
+            (0, remotion_1.continueRender)(imageTextureHandle);
+        };
+    }, [offthreadVideoFrameSrc, textLoaderPromise]);
+    (0, react_1.useLayoutEffect)(() => {
+        fetchTexture();
+    }, [offthreadVideoFrameSrc, fetchTexture]);
+    return imageTexture;
+};
+exports.useInnerVideoTexture = useInnerVideoTexture;
+function useOffthreadVideoTexture({ src, playbackRate = 1, transparent = false, }) {
+    if (!src) {
+        throw new Error('src must be provided to useOffthreadVideoTexture');
+    }
+    const { isRendering } = (0, remotion_1.getRemotionEnvironment)();
+    if (!isRendering) {
+        throw new Error('useOffthreadVideoTexture() can only be used during rendering. Use getRemotionEnvironment().isRendering to render it conditionally.');
+    }
+    return (0, exports.useInnerVideoTexture)({ playbackRate, src, transparent });
+}
+exports.useOffthreadVideoTexture = useOffthreadVideoTexture;

package/dist/esm/index.d.ts

@@ -1,2 +1,3 @@
 export { ThreeCanvas, ThreeCanvasProps } from './ThreeCanvas';
+export { useOffthreadVideoTexture, UseOffthreadVideoTextureOptions, } from './use-offthread-video-texture';
 export { useVideoTexture, UseVideoTextureOptions } from './use-video-texture';

package/dist/esm/index.mjs

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Canvas, useThree } from '@react-three/fiber';
-import React, { Suspense, useLayoutEffect, useState, useCallback } from 'react';
-import { delayRender, continueRender, Internals, useCurrentFrame } from 'remotion';
+import React, { Suspense, useLayoutEffect, useState, useCallback, useMemo } from 'react';
+import { delayRender, continueRender, Internals, getRemotionEnvironment, useCurrentFrame, useVideoConfig, cancelRender } from 'remotion';
 import { NoReactInternals } from 'remotion/no-react';
 
 const Unblocker = () => {
@@ -55,6 +55,62 @@ const ThreeCanvas = (props) => {
     return (jsx(SuspenseLoader, { children: jsxs(Canvas, { style: actualStyle, ...rest, onCreated: remotion_onCreated, children: [jsx(Scale, { width: width, height: height }), jsx(Internals.RemotionContextProvider, { contexts: contexts, children: children })] }) }));
 };
 
+const useInnerVideoTexture = ({ playbackRate, src, transparent, }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const mediaStartsAt = Internals.useMediaStartsAt();
+    const currentTime = useMemo(() => {
+        return (NoReactInternals.getExpectedMediaFrameUncorrected({
+            frame,
+            playbackRate,
+            startFrom: -mediaStartsAt,
+        }) / fps);
+    }, [frame, playbackRate, mediaStartsAt, fps]);
+    const offthreadVideoFrameSrc = useMemo(() => {
+        return NoReactInternals.getOffthreadVideoSource({
+            currentTime,
+            src,
+            transparent,
+        });
+    }, [currentTime, src, transparent]);
+    const [textLoaderPromise] = useState(() => import('three/src/loaders/TextureLoader.js'));
+    const [imageTexture, setImageTexture] = useState(null);
+    const fetchTexture = useCallback(() => {
+        const imageTextureHandle = delayRender('fetch offthread video frame');
+        let textureLoaded = null;
+        textLoaderPromise.then((loader) => {
+            new loader.TextureLoader()
+                .loadAsync(offthreadVideoFrameSrc)
+                .then((texture) => {
+                textureLoaded = texture;
+                setImageTexture(texture);
+                continueRender(imageTextureHandle);
+            })
+                .catch((err) => {
+                cancelRender(err);
+            });
+        });
+        return () => {
+            textureLoaded === null || textureLoaded === void 0 ? void 0 : textureLoaded.dispose();
+            continueRender(imageTextureHandle);
+        };
+    }, [offthreadVideoFrameSrc, textLoaderPromise]);
+    useLayoutEffect(() => {
+        fetchTexture();
+    }, [offthreadVideoFrameSrc, fetchTexture]);
+    return imageTexture;
+};
+function useOffthreadVideoTexture({ src, playbackRate = 1, transparent = false, }) {
+    if (!src) {
+        throw new Error('src must be provided to useOffthreadVideoTexture');
+    }
+    const { isRendering } = getRemotionEnvironment();
+    if (!isRendering) {
+        throw new Error('useOffthreadVideoTexture() can only be used during rendering. Use getRemotionEnvironment().isRendering to render it conditionally.');
+    }
+    return useInnerVideoTexture({ playbackRate, src, transparent });
+}
+
 let warned = false;
 const warnAboutRequestVideoFrameCallback = () => {
     if (warned) {
@@ -132,4 +188,4 @@ const useVideoTexture = (videoRef) => {
     return videoTexture;
 };
 
-export { ThreeCanvas, useVideoTexture };
+export { ThreeCanvas, useOffthreadVideoTexture, useVideoTexture };

package/dist/esm/use-offthread-video-texture.d.ts

@@ -0,0 +1,11 @@
+export type UseOffthreadVideoTextureOptions = {
+    src: string;
+    playbackRate?: number;
+    transparent?: boolean;
+};
+export declare const useInnerVideoTexture: ({ playbackRate, src, transparent, }: {
+    playbackRate: number;
+    src: string;
+    transparent: boolean;
+}) => import("three").Texture | null;
+export declare function useOffthreadVideoTexture({ src, playbackRate, transparent, }: UseOffthreadVideoTextureOptions): import("three").Texture | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/three",
-  "version": "4.0.82",
+  "version": "4.0.83",
   "description": "Utility functions for using react-three-fiber with remotion",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -16,13 +16,14 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.82"
+    "remotion": "4.0.83"
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "three": ">=0.137.0"
+    "three": ">=0.137.0",
+    "remotion": "4.0.83"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.276",
@@ -39,7 +40,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rollup": "^2.70.1",
-    "three": "0.158.0"
+    "three": "0.158.0",
+    "remotion": "4.0.83"
   },
   "keywords": [
     "remotion",
@@ -65,6 +67,6 @@
     "formatting": "prettier src --check",
     "lint": "eslint src --ext ts,tsx",
     "watch": "tsc -w",
-    "build": "rollup --config rollup.config.js && tsc -d"
+    "build": "rollup --failAfterWarnings --config rollup.config.js && tsc -d"
   }
 }