@remotion/three 4.0.269 → 4.0.271
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,11 +4,15 @@ export type UseOffthreadVideoTextureOptions = {
|
|
|
4
4
|
playbackRate?: number;
|
|
5
5
|
transparent?: boolean;
|
|
6
6
|
toneMapped?: boolean;
|
|
7
|
+
delayRenderRetries?: number;
|
|
8
|
+
delayRenderTimeoutInMilliseconds?: number;
|
|
7
9
|
};
|
|
8
|
-
export declare const useInnerVideoTexture: ({ playbackRate, src, transparent, toneMapped, }: {
|
|
10
|
+
export declare const useInnerVideoTexture: ({ playbackRate, src, transparent, toneMapped, delayRenderRetries, delayRenderTimeoutInMilliseconds, }: {
|
|
9
11
|
playbackRate: number;
|
|
10
12
|
src: string;
|
|
11
13
|
transparent: boolean;
|
|
12
14
|
toneMapped: boolean;
|
|
15
|
+
delayRenderRetries?: number;
|
|
16
|
+
delayRenderTimeoutInMilliseconds?: number;
|
|
13
17
|
}) => Texture | null;
|
|
14
|
-
export declare function useOffthreadVideoTexture({ src, playbackRate, transparent, toneMapped, }: UseOffthreadVideoTextureOptions): Texture | null;
|
|
18
|
+
export declare function useOffthreadVideoTexture({ src, playbackRate, transparent, toneMapped, delayRenderRetries, delayRenderTimeoutInMilliseconds, }: UseOffthreadVideoTextureOptions): Texture | null;
|
|
@@ -28,7 +28,7 @@ exports.useOffthreadVideoTexture = useOffthreadVideoTexture;
|
|
|
28
28
|
const react_1 = require("react");
|
|
29
29
|
const remotion_1 = require("remotion");
|
|
30
30
|
const no_react_1 = require("remotion/no-react");
|
|
31
|
-
const useInnerVideoTexture = ({ playbackRate, src, transparent, toneMapped, }) => {
|
|
31
|
+
const useInnerVideoTexture = ({ playbackRate, src, transparent, toneMapped, delayRenderRetries, delayRenderTimeoutInMilliseconds, }) => {
|
|
32
32
|
const frame = (0, remotion_1.useCurrentFrame)();
|
|
33
33
|
const { fps } = (0, remotion_1.useVideoConfig)();
|
|
34
34
|
const mediaStartsAt = remotion_1.Internals.useMediaStartsAt();
|
|
@@ -50,7 +50,10 @@ const useInnerVideoTexture = ({ playbackRate, src, transparent, toneMapped, }) =
|
|
|
50
50
|
const [textLoaderPromise] = (0, react_1.useState)(() => Promise.resolve().then(() => __importStar(require('three/src/loaders/TextureLoader.js'))));
|
|
51
51
|
const [imageTexture, setImageTexture] = (0, react_1.useState)(null);
|
|
52
52
|
const fetchTexture = (0, react_1.useCallback)(() => {
|
|
53
|
-
const imageTextureHandle = (0, remotion_1.delayRender)('fetch offthread video frame'
|
|
53
|
+
const imageTextureHandle = (0, remotion_1.delayRender)('fetch offthread video frame', {
|
|
54
|
+
retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
|
|
55
|
+
timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
|
|
56
|
+
});
|
|
54
57
|
let textureLoaded = null;
|
|
55
58
|
let cleanedUp = false;
|
|
56
59
|
textLoaderPromise.then((loader) => {
|
|
@@ -73,7 +76,12 @@ const useInnerVideoTexture = ({ playbackRate, src, transparent, toneMapped, }) =
|
|
|
73
76
|
textureLoaded === null || textureLoaded === void 0 ? void 0 : textureLoaded.dispose();
|
|
74
77
|
(0, remotion_1.continueRender)(imageTextureHandle);
|
|
75
78
|
};
|
|
76
|
-
}, [
|
|
79
|
+
}, [
|
|
80
|
+
offthreadVideoFrameSrc,
|
|
81
|
+
textLoaderPromise,
|
|
82
|
+
delayRenderRetries,
|
|
83
|
+
delayRenderTimeoutInMilliseconds,
|
|
84
|
+
]);
|
|
77
85
|
(0, react_1.useLayoutEffect)(() => {
|
|
78
86
|
const cleanup = fetchTexture();
|
|
79
87
|
return () => {
|
|
@@ -87,7 +95,7 @@ exports.useInnerVideoTexture = useInnerVideoTexture;
|
|
|
87
95
|
* @description Allows you to use a video in React Three Fiber that is synchronized with Remotion's `useCurrentFrame()` using the `<OffthreadVideo>`.
|
|
88
96
|
* @see [Documentation](https://www.remotion.dev/docs/use-offthread-video-texture)
|
|
89
97
|
*/
|
|
90
|
-
function useOffthreadVideoTexture({ src, playbackRate = 1, transparent = false, toneMapped = true, }) {
|
|
98
|
+
function useOffthreadVideoTexture({ src, playbackRate = 1, transparent = false, toneMapped = true, delayRenderRetries, delayRenderTimeoutInMilliseconds, }) {
|
|
91
99
|
if (!src) {
|
|
92
100
|
throw new Error('src must be provided to useOffthreadVideoTexture');
|
|
93
101
|
}
|
|
@@ -95,5 +103,12 @@ function useOffthreadVideoTexture({ src, playbackRate = 1, transparent = false,
|
|
|
95
103
|
if (!isRendering) {
|
|
96
104
|
throw new Error('useOffthreadVideoTexture() can only be used during rendering. Use getRemotionEnvironment().isRendering to render it conditionally.');
|
|
97
105
|
}
|
|
98
|
-
return (0, exports.useInnerVideoTexture)({
|
|
106
|
+
return (0, exports.useInnerVideoTexture)({
|
|
107
|
+
playbackRate,
|
|
108
|
+
src,
|
|
109
|
+
transparent,
|
|
110
|
+
toneMapped,
|
|
111
|
+
delayRenderRetries,
|
|
112
|
+
delayRenderTimeoutInMilliseconds,
|
|
113
|
+
});
|
|
99
114
|
}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -117,7 +117,9 @@ var useInnerVideoTexture = ({
|
|
|
117
117
|
playbackRate,
|
|
118
118
|
src,
|
|
119
119
|
transparent,
|
|
120
|
-
toneMapped
|
|
120
|
+
toneMapped,
|
|
121
|
+
delayRenderRetries,
|
|
122
|
+
delayRenderTimeoutInMilliseconds
|
|
121
123
|
}) => {
|
|
122
124
|
const frame = useCurrentFrame();
|
|
123
125
|
const { fps } = useVideoConfig();
|
|
@@ -140,7 +142,10 @@ var useInnerVideoTexture = ({
|
|
|
140
142
|
const [textLoaderPromise] = useState2(() => import("three/src/loaders/TextureLoader.js"));
|
|
141
143
|
const [imageTexture, setImageTexture] = useState2(null);
|
|
142
144
|
const fetchTexture = useCallback2(() => {
|
|
143
|
-
const imageTextureHandle = delayRender3("fetch offthread video frame"
|
|
145
|
+
const imageTextureHandle = delayRender3("fetch offthread video frame", {
|
|
146
|
+
retries: delayRenderRetries ?? undefined,
|
|
147
|
+
timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
|
|
148
|
+
});
|
|
144
149
|
let textureLoaded = null;
|
|
145
150
|
let cleanedUp = false;
|
|
146
151
|
textLoaderPromise.then((loader) => {
|
|
@@ -160,7 +165,12 @@ var useInnerVideoTexture = ({
|
|
|
160
165
|
textureLoaded?.dispose();
|
|
161
166
|
continueRender3(imageTextureHandle);
|
|
162
167
|
};
|
|
163
|
-
}, [
|
|
168
|
+
}, [
|
|
169
|
+
offthreadVideoFrameSrc,
|
|
170
|
+
textLoaderPromise,
|
|
171
|
+
delayRenderRetries,
|
|
172
|
+
delayRenderTimeoutInMilliseconds
|
|
173
|
+
]);
|
|
164
174
|
useLayoutEffect3(() => {
|
|
165
175
|
const cleanup = fetchTexture();
|
|
166
176
|
return () => {
|
|
@@ -173,7 +183,9 @@ function useOffthreadVideoTexture({
|
|
|
173
183
|
src,
|
|
174
184
|
playbackRate = 1,
|
|
175
185
|
transparent = false,
|
|
176
|
-
toneMapped = true
|
|
186
|
+
toneMapped = true,
|
|
187
|
+
delayRenderRetries,
|
|
188
|
+
delayRenderTimeoutInMilliseconds
|
|
177
189
|
}) {
|
|
178
190
|
if (!src) {
|
|
179
191
|
throw new Error("src must be provided to useOffthreadVideoTexture");
|
|
@@ -182,7 +194,14 @@ function useOffthreadVideoTexture({
|
|
|
182
194
|
if (!isRendering) {
|
|
183
195
|
throw new Error("useOffthreadVideoTexture() can only be used during rendering. Use getRemotionEnvironment().isRendering to render it conditionally.");
|
|
184
196
|
}
|
|
185
|
-
return useInnerVideoTexture({
|
|
197
|
+
return useInnerVideoTexture({
|
|
198
|
+
playbackRate,
|
|
199
|
+
src,
|
|
200
|
+
transparent,
|
|
201
|
+
toneMapped,
|
|
202
|
+
delayRenderRetries,
|
|
203
|
+
delayRenderTimeoutInMilliseconds
|
|
204
|
+
});
|
|
186
205
|
}
|
|
187
206
|
// src/use-video-texture.ts
|
|
188
207
|
import React3, { useCallback as useCallback3, useState as useState3 } from "react";
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/three"
|
|
4
4
|
},
|
|
5
5
|
"name": "@remotion/three",
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.271",
|
|
7
7
|
"description": "Include React Three Fiber components in a Remotion video",
|
|
8
8
|
"main": "dist/cjs/index.js",
|
|
9
9
|
"types": "dist/cjs/index.d.ts",
|
|
@@ -16,14 +16,14 @@
|
|
|
16
16
|
"url": "https://github.com/remotion-dev/remotion/issues"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"remotion": "4.0.
|
|
19
|
+
"remotion": "4.0.271"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"@react-three/fiber": ">=8.0.0",
|
|
23
23
|
"react": ">=16.8.0",
|
|
24
24
|
"react-dom": ">=16.8.0",
|
|
25
25
|
"three": ">=0.137.0",
|
|
26
|
-
"remotion": "4.0.
|
|
26
|
+
"remotion": "4.0.271"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@react-three/fiber": "9.0.0-rc.6",
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
"react-dom": "19.0.0",
|
|
35
35
|
"three": "0.171.0",
|
|
36
36
|
"eslint": "9.19.0",
|
|
37
|
-
"remotion": "4.0.
|
|
38
|
-
"
|
|
37
|
+
"@remotion/eslint-config-internal": "4.0.271",
|
|
38
|
+
"remotion": "4.0.271"
|
|
39
39
|
},
|
|
40
40
|
"keywords": [
|
|
41
41
|
"remotion",
|