@remotion/three 4.0.0-webhook.27 → 4.1.0-alpha2

package/LICENSE.md

@@ -1,34 +1,34 @@
 # Remotion License
 
-Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion create videos for free (even commercial), while a company license is required for for-profit organisations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
+Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
 
 - [Free license](#free-license)
 - [Company license](#company-license)
 
 ## Free license
 
-Copyright © 2022 [Jonny Burger](https://jonny.io)
+Copyright © 2023 [Remotion](https://www.remotion.dev/)
 
 ### Eligibility
 
 You are eligible to use Remotion for free if you are:
 
 - an individual
-- a for-profit organisation with up to 3 employees
-- a non-profit or not-for-profit organisation
+- a for-profit organization with up to 3 employees
+- a non-profit or not-for-profit organization
 - evaluating whether Remotion is a good fit, and are not yet using it in a commercial way
 
 ### Allowed use cases
 
-Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify and the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
+Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
 
 ### Disallowed use cases
 
-It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, sublicensing your own derivate of Remotion.
+It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, or sublicensing your own derivate of Remotion.
 
 ### Warranty notice
 
-The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
+The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
 
 ### Support
 
@@ -36,6 +36,6 @@ Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
 
 ## Company license
 
-You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support.
+You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support (read the [Support Policy](/docs/support)).
 
 Visit [companies.remotion.dev](https://companies.remotion.dev) for pricing and to buy a license.

package/dist/{SuspenseLoader.js → cjs/SuspenseLoader.js}

@@ -5,12 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const Unblocker = () => {
-    const [handle] = (0, react_1.useState)(() => (0, remotion_1.delayRender)(`Waiting for <Suspense /> of <ThreeCanvas /> to resolve`));
-    (0, react_1.useEffect)(() => {
-        return () => {
-            (0, remotion_1.continueRender)(handle);
-        };
-    }, [handle]);
+    if (typeof document !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useLayoutEffect)(() => {
+            const handle = (0, remotion_1.delayRender)(`Waiting for <Suspense /> of <ThreeCanvas /> to resolve`);
+            return () => {
+                (0, remotion_1.continueRender)(handle);
+            };
+        }, []);
+    }
     return null;
 };
 const SuspenseLoader = ({ children }) => {

package/dist/cjs/ThreeCanvas.d.ts

@@ -0,0 +1,12 @@
+import { Canvas } from '@react-three/fiber';
+import React from 'react';
+export type ThreeCanvasProps = React.ComponentProps<typeof Canvas> & {
+    width: number;
+    height: number;
+    children: React.ReactNode;
+};
+/**
+ * @description A wrapper for React Three Fiber's <Canvas /> which synchronizes with Remotions useCurrentFrame().
+ * @see [Documentation](https://www.remotion.dev/docs/three-canvas)
+ */
+export declare const ThreeCanvas: (props: ThreeCanvasProps) => JSX.Element;

package/dist/{ThreeCanvas.js → cjs/ThreeCanvas.js}

@@ -16,6 +16,10 @@ const Scale = ({ width, height }) => {
     }, [setSize, width, height, set]);
     return null;
 };
+/**
+ * @description A wrapper for React Three Fiber's <Canvas /> which synchronizes with Remotions useCurrentFrame().
+ * @see [Documentation](https://www.remotion.dev/docs/three-canvas)
+ */
 const ThreeCanvas = (props) => {
     const { children, width, height, style, onCreated, ...rest } = props;
     const [waitForCreated] = (0, react_1.useState)(() => (0, remotion_1.delayRender)('Waiting for <ThreeCanvas/> to be created'));

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Video } from 'remotion';
+import type { VideoTexture } from 'three/src/textures/VideoTexture';
+export type UseVideoTextureOptions = React.ComponentProps<typeof Video>;
+/**
+ * @description Allows you to use a video in React Three Fiber that is synchronized with Remotion's useCurrentFrame().
+ * @see [Documentation](https://www.remotion.dev/docs/use-video-texture)
+ */
+export declare const useVideoTexture: (videoRef: React.RefObject<HTMLVideoElement>) => VideoTexture | null;

package/dist/{use-video-texture.js → cjs/use-video-texture.js}

@@ -26,7 +26,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVideoTexture = void 0;
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
-const three_1 = require("three");
 let warned = false;
 const warnAboutRequestVideoFrameCallback = () => {
     if (warned) {
@@ -35,20 +34,40 @@ const warnAboutRequestVideoFrameCallback = () => {
     warned = true;
     console.warn('Browser does not support requestVideoFrameCallback. Cannot display video.');
 };
+/**
+ * @description Allows you to use a video in React Three Fiber that is synchronized with Remotion's useCurrentFrame().
+ * @see [Documentation](https://www.remotion.dev/docs/use-video-texture)
+ */
 const useVideoTexture = (videoRef) => {
-    const [loaded] = (0, react_1.useState)(() => (0, remotion_1.delayRender)(`Waiting for texture in useVideoTexture() to be loaded`));
+    const [loaded] = (0, react_1.useState)(() => {
+        if (typeof document === 'undefined') {
+            return 0;
+        }
+        return (0, remotion_1.delayRender)(`Waiting for texture in useVideoTexture() to be loaded`);
+    });
     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 [error, setError] = (0, react_1.useState)(null);
     const frame = (0, remotion_1.useCurrentFrame)();
+    if (error) {
+        throw error;
+    }
     const onReady = (0, react_1.useCallback)(() => {
-        if (!videoRef.current) {
-            throw new Error('Video not ready');
-        }
-        const vt = new three_1.VideoTexture(videoRef.current);
-        videoRef.current.width = videoRef.current.videoWidth;
-        videoRef.current.height = videoRef.current.videoHeight;
-        setVideoTexture(vt);
-        (0, remotion_1.continueRender)(loaded);
-    }, [loaded, videoRef]);
+        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);
+            (0, remotion_1.continueRender)(loaded);
+        })
+            .catch((err) => {
+            setError(err);
+        });
+    }, [loaded, vidText, videoRef]);
     react_1.default.useEffect(() => {
         if (!videoRef.current) {
             return;

package/dist/esm/SuspenseLoader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SuspenseLoader: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/esm/ThreeCanvas.d.ts

@@ -0,0 +1,12 @@
+import { Canvas } from '@react-three/fiber';
+import React from 'react';
+export type ThreeCanvasProps = React.ComponentProps<typeof Canvas> & {
+    width: number;
+    height: number;
+    children: React.ReactNode;
+};
+/**
+ * @description A wrapper for React Three Fiber's <Canvas /> which synchronizes with Remotions useCurrentFrame().
+ * @see [Documentation](https://www.remotion.dev/docs/three-canvas)
+ */
+export declare const ThreeCanvas: (props: ThreeCanvasProps) => JSX.Element;

package/dist/esm/index.d.ts

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

package/dist/esm/index.mjs

@@ -0,0 +1,131 @@
+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';
+
+const Unblocker = () => {
+    if (typeof document !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useLayoutEffect(() => {
+            const handle = delayRender(`Waiting for <Suspense /> of <ThreeCanvas /> to resolve`);
+            return () => {
+                continueRender(handle);
+            };
+        }, []);
+    }
+    return null;
+};
+const SuspenseLoader = ({ children }) => {
+    return jsx(Suspense, { fallback: jsx(Unblocker, {}), children: children });
+};
+
+const Scale = ({ width, height }) => {
+    const { set, setSize: threeSetSize } = useThree();
+    const [setSize] = useState(() => threeSetSize);
+    useLayoutEffect(() => {
+        setSize(width, height);
+        set({ setSize: () => null });
+        return () => set({ setSize });
+    }, [setSize, width, height, set]);
+    return null;
+};
+/**
+ * @description A wrapper for React Three Fiber's <Canvas /> which synchronizes with Remotions useCurrentFrame().
+ * @see [Documentation](https://www.remotion.dev/docs/three-canvas)
+ */
+const ThreeCanvas = (props) => {
+    const { children, width, height, style, onCreated, ...rest } = props;
+    const [waitForCreated] = useState(() => delayRender('Waiting for <ThreeCanvas/> to be created'));
+    Internals.validateDimension(width, 'width', 'of the <ThreeCanvas /> component');
+    Internals.validateDimension(height, 'height', 'of the <ThreeCanvas /> component');
+    const contexts = Internals.useRemotionContexts();
+    const actualStyle = {
+        width: props.width,
+        height: props.height,
+        ...(style !== null && style !== void 0 ? style : {}),
+    };
+    const remotion_onCreated = useCallback((state) => {
+        continueRender(waitForCreated);
+        onCreated === null || onCreated === void 0 ? void 0 : onCreated(state);
+    }, [onCreated, waitForCreated]);
+    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 })] }) }));
+};
+
+let warned = false;
+const warnAboutRequestVideoFrameCallback = () => {
+    if (warned) {
+        return false;
+    }
+    warned = true;
+    console.warn('Browser does not support requestVideoFrameCallback. Cannot display video.');
+};
+/**
+ * @description Allows you to use a video in React Three Fiber that is synchronized with Remotion's useCurrentFrame().
+ * @see [Documentation](https://www.remotion.dev/docs/use-video-texture)
+ */
+const useVideoTexture = (videoRef) => {
+    const [loaded] = useState(() => {
+        if (typeof document === 'undefined') {
+            return 0;
+        }
+        return delayRender(`Waiting for texture in useVideoTexture() to be loaded`);
+    });
+    const [videoTexture, setVideoTexture] = useState(null);
+    const [vidText] = useState(() => import('three/src/textures/VideoTexture.js'));
+    const [error, setError] = useState(null);
+    const frame = useCurrentFrame();
+    if (error) {
+        throw error;
+    }
+    const onReady = useCallback(() => {
+        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) => {
+            setError(err);
+        });
+    }, [loaded, vidText, videoRef]);
+    React.useEffect(() => {
+        if (!videoRef.current) {
+            return;
+        }
+        if (videoRef.current.readyState >= 2) {
+            onReady();
+            return;
+        }
+        videoRef.current.addEventListener('loadeddata', () => {
+            onReady();
+        }, { once: true });
+    }, [loaded, onReady, videoRef]);
+    React.useEffect(() => {
+        const { current } = videoRef;
+        if (!current) {
+            return;
+        }
+        if (!current.requestVideoFrameCallback) {
+            warnAboutRequestVideoFrameCallback();
+            return;
+        }
+        const ready = () => {
+            // Now force a new render so the latest video frame shows up in the canvas
+            // Allow remotion to continue
+        };
+        current.requestVideoFrameCallback(ready);
+    }, [frame, loaded, videoRef]);
+    if (typeof HTMLVideoElement === 'undefined' ||
+        !HTMLVideoElement.prototype.requestVideoFrameCallback) {
+        continueRender(loaded);
+        return null;
+    }
+    return videoTexture;
+};
+
+export { ThreeCanvas, useVideoTexture };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Video } from 'remotion';
+import type { VideoTexture } from 'three/src/textures/VideoTexture';
+export type UseVideoTextureOptions = React.ComponentProps<typeof Video>;
+/**
+ * @description Allows you to use a video in React Three Fiber that is synchronized with Remotion's useCurrentFrame().
+ * @see [Documentation](https://www.remotion.dev/docs/use-video-texture)
+ */
+export declare const useVideoTexture: (videoRef: React.RefObject<HTMLVideoElement>) => VideoTexture | null;

package/package.json

@@ -1,59 +1,62 @@
 {
-	"name": "@remotion/three",
-	"version": "4.0.0-webhook.27+eb81308ee",
-	"description": "Utility functions for using react-three-fiber with remotion",
-	"main": "dist/index.js",
-	"types": "dist/index.d.ts",
-	"sideEffects": false,
-	"scripts": {
-		"lint": "eslint src --ext ts,tsx",
-		"watch": "tsc -w",
-		"build": "tsc -d"
-	},
-	"author": "Björn Zeutzheim",
-	"contributors": [],
-	"license": "MIT",
-	"repository": {
-		"url": "https://github.com/remotion-dev/remotion"
-	},
-	"bugs": {
-		"url": "https://github.com/remotion-dev/remotion/issues"
-	},
-	"dependencies": {
-		"remotion": "4.0.0-webhook.27+eb81308ee"
-	},
-	"peerDependencies": {
-		"@react-three/fiber": ">=7.0.19",
-		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0",
-		"three": ">=0.134.0"
-	},
-	"devDependencies": {
-		"@jonny/eslint-config": "3.0.266",
-		"@react-three/fiber": ">=7.0.26",
-		"@types/node": "^14.14.14",
-		"@types/react": "18.0.1",
-		"@types/react-reconciler": "^0.26.4",
-		"@types/three": "^0.134.0",
-		"@types/web": "0.0.48",
-		"eslint": "8.13.0",
-		"prettier": "^2.0.5",
-		"prettier-plugin-organize-imports": "^2.3.4",
-		"react": "18.0.0",
-		"react-dom": "18.0.0",
-		"three": "^0.134.0",
-		"typescript": "^4.7.0"
-	},
-	"keywords": [
-		"remotion",
-		"ffmpeg",
-		"video",
-		"react",
-		"puppeteer",
-		"player"
-	],
-	"publishConfig": {
-		"access": "public"
-	},
-	"gitHead": "eb81308ee07a402f4a8dd9ff24306bb07dd78175"
-}
+  "name": "@remotion/three",
+  "version": "4.1.0-alpha2",
+  "description": "Utility functions for using react-three-fiber with remotion",
+  "main": "dist/cjs/index.js",
+  "types": "dist/cjs/index.d.ts",
+  "module": "dist/esm/index.mjs",
+  "sideEffects": false,
+  "author": "Björn Zeutzheim",
+  "contributors": [],
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/remotion-dev/remotion"
+  },
+  "bugs": {
+    "url": "https://github.com/remotion-dev/remotion/issues"
+  },
+  "dependencies": {
+    "remotion": "4.1.0-alpha2"
+  },
+  "peerDependencies": {
+    "@react-three/fiber": ">=8.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "three": ">=0.137.0"
+  },
+  "devDependencies": {
+    "@jonny/eslint-config": "3.0.266",
+    "@react-three/fiber": ">=8.0.0",
+    "@rollup/plugin-typescript": "^8.2.0",
+    "@types/node": "18.14.6",
+    "@types/react": "18.0.26",
+    "@types/react-reconciler": "^0.26.4",
+    "@types/three": "^0.134.0",
+    "@types/web": "0.0.78",
+    "eslint": "8.42.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^2.3.4",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "rollup": "^2.70.1",
+    "three": "^0.145.0",
+    "typescript": "4.9.5"
+  },
+  "keywords": [
+    "remotion",
+    "ffmpeg",
+    "video",
+    "react",
+    "three",
+    "player"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "formatting": "prettier src --check",
+    "lint": "eslint src --ext ts,tsx",
+    "watch": "tsc -w",
+    "build": "rollup --config rollup.config.js && tsc -d"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,29 @@
+// rollup.config.js
+import typescript from '@rollup/plugin-typescript';
+
+export default [
+	{
+		input: 'src/index.ts',
+		output: [
+			{
+				file: 'dist/esm/index.mjs',
+				format: 'es',
+				sourcemap: false,
+			},
+		],
+		external: [
+			'react',
+			'remotion',
+			'react/jsx-runtime',
+			'@react-three/fiber',
+			'three/src/textures/VideoTexture.js',
+		],
+		plugins: [
+			typescript({
+				tsconfig: 'tsconfig-esm.json',
+				sourceMap: false,
+				outputToFilesystem: true,
+			}),
+		],
+	},
+];

package/.prettierrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-	singleQuote: true,
-	bracketSpacing: false,
-	useTabs: true,
-	overrides: [
-		{
-			files: ['*.yml'],
-			options: {
-				singleQuote: false,
-			},
-		},
-	],
-	plugins: [require.resolve('prettier-plugin-organize-imports')],
-};

package/dist/ThreeCanvas.d.ts

@@ -1,8 +0,0 @@
-import { Canvas } from '@react-three/fiber';
-import React from 'react';
-export declare type ThreeCanvasProps = React.ComponentProps<typeof Canvas> & {
-    width: number;
-    height: number;
-    children: React.ReactNode;
-};
-export declare const ThreeCanvas: (props: ThreeCanvasProps) => JSX.Element;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { Video } from 'remotion';
-import { VideoTexture } from 'three';
-export declare type UseVideoTextureOptions = React.ComponentProps<typeof Video>;
-export declare const useVideoTexture: (videoRef: React.RefObject<HTMLVideoElement>) => VideoTexture | null;

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-	"extends": "../tsconfig.settings.json",
-	"compilerOptions": {
-		"composite": true,
-		"rootDir": "src",
-		"outDir": "dist",
-		"skipLibCheck": true
-	},
-	"references": [
-		{
-			"path": "../core"
-		}
-	]
-}