@remotion/three 3.3.78 → 3.3.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/three",
-  "version": "3.3.78",
+  "version": "3.3.80",
   "description": "Utility functions for using react-three-fiber with remotion",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -16,7 +16,7 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "3.3.78"
+    "remotion": "3.3.80"
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.0.0",

package/dist/SuspenseLoader.d.ts

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

package/dist/SuspenseLoader.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SuspenseLoader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const Unblocker = () => {
-    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 }) => {
-    return (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Unblocker, {}), children: children });
-};
-exports.SuspenseLoader = SuspenseLoader;

package/dist/ThreeCanvas.d.ts

@@ -1,12 +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;
-};
-/**
- * @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

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThreeCanvas = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const fiber_1 = require("@react-three/fiber");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const SuspenseLoader_1 = require("./SuspenseLoader");
-const Scale = ({ width, height }) => {
-    const { set, setSize: threeSetSize } = (0, fiber_1.useThree)();
-    const [setSize] = (0, react_1.useState)(() => threeSetSize);
-    (0, react_1.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] = (0, react_1.useState)(() => (0, remotion_1.delayRender)('Waiting for <ThreeCanvas/> to be created'));
-    remotion_1.Internals.validateDimension(width, 'width', 'of the <ThreeCanvas /> component');
-    remotion_1.Internals.validateDimension(height, 'height', 'of the <ThreeCanvas /> component');
-    const contexts = remotion_1.Internals.useRemotionContexts();
-    const actualStyle = {
-        width: props.width,
-        height: props.height,
-        ...(style !== null && style !== void 0 ? style : {}),
-    };
-    const remotion_onCreated = (0, react_1.useCallback)((state) => {
-        (0, remotion_1.continueRender)(waitForCreated);
-        onCreated === null || onCreated === void 0 ? void 0 : onCreated(state);
-    }, [onCreated, waitForCreated]);
-    return ((0, jsx_runtime_1.jsx)(SuspenseLoader_1.SuspenseLoader, { children: (0, jsx_runtime_1.jsxs)(fiber_1.Canvas, { style: actualStyle, ...rest, onCreated: remotion_onCreated, children: [(0, jsx_runtime_1.jsx)(Scale, { width: width, height: height }), (0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionContextProvider, { contexts: contexts, children: children })] }) }));
-};
-exports.ThreeCanvas = ThreeCanvas;

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVideoTexture = exports.ThreeCanvas = void 0;
-var ThreeCanvas_1 = require("./ThreeCanvas");
-Object.defineProperty(exports, "ThreeCanvas", { enumerable: true, get: function () { return ThreeCanvas_1.ThreeCanvas; } });
-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/use-video-texture.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { Video } from 'remotion';
-import { VideoTexture } from 'three/src/textures/VideoTexture';
-export declare 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

@@ -1,90 +0,0 @@
-"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.useVideoTexture = void 0;
-const react_1 = __importStar(require("react"));
-const remotion_1 = require("remotion");
-const VideoTexture_1 = require("three/src/textures/VideoTexture");
-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] = (0, react_1.useState)(() => (0, remotion_1.delayRender)(`Waiting for texture in useVideoTexture() to be loaded`));
-    const [videoTexture, setVideoTexture] = (0, react_1.useState)(null);
-    const frame = (0, remotion_1.useCurrentFrame)();
-    const onReady = (0, react_1.useCallback)(() => {
-        if (!videoRef.current) {
-            throw new Error('Video not ready');
-        }
-        const vt = new VideoTexture_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]);
-    react_1.default.useEffect(() => {
-        if (!videoRef.current) {
-            return;
-        }
-        if (videoRef.current.readyState >= 2) {
-            onReady();
-            return;
-        }
-        videoRef.current.addEventListener('loadeddata', () => {
-            onReady();
-        }, { once: true });
-    }, [loaded, onReady, videoRef]);
-    react_1.default.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) {
-        (0, remotion_1.continueRender)(loaded);
-        return null;
-    }
-    return videoTexture;
-};
-exports.useVideoTexture = useVideoTexture;