@remotion/three 4.0.142 → 4.0.144

package/LICENSE.md

@@ -1,5 +1,9 @@
 # Remotion License
 
+In Remotion 5.0, the license will slightly change. [View the changes here](https://github.com/remotion-dev/remotion/pull/3750).
+
+---
+
 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)

package/bundle.ts

@@ -0,0 +1,23 @@
+import {build} from 'bun';
+
+const output = await build({
+	entrypoints: ['src/index.ts'],
+	naming: '[name].mjs',
+	external: [
+		'react',
+		'remotion',
+		'@remotion/media-utils',
+		'remotion/no-react',
+		'react/jsx-runtime',
+		'@react-three/fiber',
+		'three/src/textures/VideoTexture.js',
+		'three/src/loaders/TextureLoader.js',
+	],
+});
+
+const [file] = output.outputs;
+const text = await file.text();
+
+await Bun.write('dist/esm/index.mjs', text);
+
+export {};

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

@@ -10,4 +10,10 @@ export declare const useInnerVideoTexture: ({ playbackRate, src, transparent, to
     transparent: boolean;
     toneMapped: boolean;
 }) => import("three").Texture | null;
+/**
+ * @description Allows you to use a video in React Three Fiber that is synchronized with Remotion's `useCurrentFrame()` using the `<OffthreadVideo>`.
+ * @see [Documentation](https://remotion.dev/docs/use-offthread-video-texture)
+ * @param {UseOffthreadVideoTextureOptions} options Configuration options including the video source (`src`), playback rate (`playbackRate`), transparency (`transparent`), and tone mapping (`toneMapped`).
+ * @returns {THREE.Texture | null} A THREE.Texture if available, otherwise null. To be used as a texture in 3D objects in React Three Fiber.
+ */
 export declare function useOffthreadVideoTexture({ src, playbackRate, transparent, toneMapped, }: UseOffthreadVideoTextureOptions): import("three").Texture | null;

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

@@ -82,6 +82,12 @@ const useInnerVideoTexture = ({ playbackRate, src, transparent, toneMapped, }) =
     return imageTexture;
 };
 exports.useInnerVideoTexture = useInnerVideoTexture;
+/**
+ * @description Allows you to use a video in React Three Fiber that is synchronized with Remotion's `useCurrentFrame()` using the `<OffthreadVideo>`.
+ * @see [Documentation](https://remotion.dev/docs/use-offthread-video-texture)
+ * @param {UseOffthreadVideoTextureOptions} options Configuration options including the video source (`src`), playback rate (`playbackRate`), transparency (`transparent`), and tone mapping (`toneMapped`).
+ * @returns {THREE.Texture | null} A THREE.Texture if available, otherwise null. To be used as a texture in 3D objects in React Three Fiber.
+ */
 function useOffthreadVideoTexture({ src, playbackRate = 1, transparent = false, toneMapped = true, }) {
     if (!src) {
         throw new Error('src must be provided to useOffthreadVideoTexture');

package/dist/esm/index.mjs

@@ -1,200 +1,251 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Canvas, useThree } from '@react-three/fiber';
-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';
+var __require = ((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');
+});
 
-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;
+// src/ThreeCanvas.tsx
+import {Canvas, useThree} from "@react-three/fiber";
+import {useCallback, useLayoutEffect as useLayoutEffect2, useState} from "react";
+import {Internals, continueRender as continueRender2, delayRender as delayRender2} from "remotion";
+
+// src/SuspenseLoader.tsx
+import {Suspense, useLayoutEffect} from "react";
+import {continueRender, delayRender} from "remotion";
+import {
+jsxDEV
+} from "react/jsx-dev-runtime";
+var Unblocker = () => {
+  if (typeof document !== "undefined") {
+    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 });
+var SuspenseLoader = ({ children }) => {
+  return jsxDEV(Suspense, {
+    fallback: jsxDEV(Unblocker, {}, undefined, false, undefined, this),
+    children
+  }, undefined, false, undefined, this);
 };
 
-/* eslint-disable prefer-destructuring */
-const validateDimension = NoReactInternals.validateDimension;
+// src/validate.ts
+import {NoReactInternals} from "remotion/no-react";
+var validateDimension = NoReactInternals.validateDimension;
 
-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;
+// src/ThreeCanvas.tsx
+import {
+jsxDEV as jsxDEV2
+} from "react/jsx-dev-runtime";
+var Scale = ({
+  width,
+  height
+}) => {
+  const { set, setSize: threeSetSize } = useThree();
+  const [setSize] = useState(() => threeSetSize);
+  useLayoutEffect2(() => {
+    setSize(width, height);
+    set({ setSize: () => null });
+    return () => set({ setSize });
+  }, [setSize, width, height, set]);
+  return null;
+};
+var ThreeCanvas = (props) => {
+  const { children, width, height, style, onCreated, ...rest } = props;
+  const [waitForCreated] = useState(() => delayRender2("Waiting for <ThreeCanvas/> to be created"));
+  validateDimension(width, "width", "of the <ThreeCanvas /> component");
+  validateDimension(height, "height", "of the <ThreeCanvas /> component");
+  const contexts = Internals.useRemotionContexts();
+  const actualStyle = {
+    width: props.width,
+    height: props.height,
+    ...style ?? {}
+  };
+  const remotion_onCreated = useCallback((state) => {
+    continueRender2(waitForCreated);
+    onCreated?.(state);
+  }, [onCreated, waitForCreated]);
+  return jsxDEV2(SuspenseLoader, {
+    children: jsxDEV2(Canvas, {
+      style: actualStyle,
+      ...rest,
+      onCreated: remotion_onCreated,
+      children: [
+        jsxDEV2(Scale, {
+          width,
+          height
+        }, undefined, false, undefined, this),
+        jsxDEV2(Internals.RemotionContextProvider, {
+          contexts,
+          children
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 };
-/**
- * @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'));
-    validateDimension(width, 'width', 'of the <ThreeCanvas /> component');
-    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 : {}),
+
+// src/use-offthread-video-texture.ts
+import {useCallback as useCallback2, useLayoutEffect as useLayoutEffect3, useMemo, useState as useState2} from "react";
+import {
+Internals as Internals2,
+cancelRender,
+continueRender as continueRender3,
+delayRender as delayRender3,
+getRemotionEnvironment,
+useCurrentFrame,
+useVideoConfig
+} from "remotion";
+import {NoReactInternals as NoReactInternals2} from "remotion/no-react";
+function useOffthreadVideoTexture({
+  src,
+  playbackRate = 1,
+  transparent = false,
+  toneMapped = true
+}) {
+  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, toneMapped });
+}
+var useInnerVideoTexture = ({
+  playbackRate,
+  src,
+  transparent,
+  toneMapped
+}) => {
+  const frame = useCurrentFrame();
+  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 fetchTexture = useCallback2(() => {
+    const imageTextureHandle = delayRender3("fetch offthread video frame");
+    let textureLoaded = null;
+    let cleanedUp = false;
+    textLoaderPromise.then((loader) => {
+      new loader.TextureLoader().loadAsync(offthreadVideoFrameSrc).then((texture) => {
+        textureLoaded = texture;
+        if (cleanedUp) {
+          return;
+        }
+        setImageTexture(texture);
+        continueRender3(imageTextureHandle);
+      }).catch((err) => {
+        cancelRender(err);
+      });
+    });
+    return () => {
+      cleanedUp = true;
+      textureLoaded?.dispose();
+      continueRender3(imageTextureHandle);
+    };
+  }, [offthreadVideoFrameSrc, textLoaderPromise]);
+  useLayoutEffect3(() => {
+    const cleanup = fetchTexture();
+    return () => {
+      cleanup();
     };
-    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 })] }) }));
+  }, [offthreadVideoFrameSrc, fetchTexture]);
+  return imageTexture;
 };
 
-const useInnerVideoTexture = ({ playbackRate, src, transparent, toneMapped, }) => {
-    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,
-            toneMapped,
-        });
-    }, [toneMapped, 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;
-        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 === null || textureLoaded === void 0 ? void 0 : textureLoaded.dispose();
-            continueRender(imageTextureHandle);
-        };
-    }, [offthreadVideoFrameSrc, textLoaderPromise]);
-    useLayoutEffect(() => {
-        const cleanup = fetchTexture();
-        return () => {
-            cleanup();
-        };
-    }, [offthreadVideoFrameSrc, fetchTexture]);
-    return imageTexture;
+// src/use-video-texture.ts
+import React3, {useCallback as useCallback3, useState as useState3} from "react";
+import {continueRender as continueRender4, delayRender as delayRender4, useCurrentFrame as useCurrentFrame2} from "remotion";
+var warned = false;
+var warnAboutRequestVideoFrameCallback = () => {
+  if (warned) {
+    return false;
+  }
+  warned = true;
+  console.warn("Browser does not support requestVideoFrameCallback. Cannot display video.");
 };
-function useOffthreadVideoTexture({ src, playbackRate = 1, transparent = false, toneMapped = true, }) {
-    if (!src) {
-        throw new Error('src must be provided to useOffthreadVideoTexture');
+var useVideoTexture = (videoRef) => {
+  const [loaded] = useState3(() => {
+    if (typeof document === "undefined") {
+      return 0;
     }
-    const { isRendering } = getRemotionEnvironment();
-    if (!isRendering) {
-        throw new Error('useOffthreadVideoTexture() can only be used during rendering. Use getRemotionEnvironment().isRendering to render it conditionally.');
+    return delayRender4(`Waiting for texture in useVideoTexture() to be loaded`);
+  });
+  const [videoTexture, setVideoTexture] = useState3(null);
+  const [vidText] = useState3(() => import("three/src/textures/VideoTexture.js"));
+  const [error, setError] = useState3(null);
+  const frame = useCurrentFrame2();
+  if (error) {
+    throw error;
+  }
+  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);
+      continueRender4(loaded);
+    }).catch((err) => {
+      setError(err);
+    });
+  }, [loaded, vidText, videoRef]);
+  React3.useEffect(() => {
+    if (!videoRef.current) {
+      return;
     }
-    return useInnerVideoTexture({ playbackRate, src, transparent, toneMapped });
-}
-
-let warned = false;
-const warnAboutRequestVideoFrameCallback = () => {
-    if (warned) {
-        return false;
+    if (videoRef.current.readyState >= 2) {
+      onReady();
+      return;
     }
-    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;
+    videoRef.current.addEventListener("loadeddata", () => {
+      onReady();
+    }, { once: true });
+  }, [loaded, onReady, videoRef]);
+  React3.useEffect(() => {
+    const { current } = videoRef;
+    if (!current) {
+      return;
     }
-    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;
+    if (!current.requestVideoFrameCallback) {
+      warnAboutRequestVideoFrameCallback();
+      return;
     }
-    return videoTexture;
+    const ready = () => {
+    };
+    current.requestVideoFrameCallback(ready);
+  }, [frame, loaded, videoRef]);
+  if (typeof HTMLVideoElement === "undefined" || !HTMLVideoElement.prototype.requestVideoFrameCallback) {
+    continueRender4(loaded);
+    return null;
+  }
+  return videoTexture;
+};
+export {
+  useVideoTexture,
+  useOffthreadVideoTexture,
+  ThreeCanvas
 };
-
-export { ThreeCanvas, useOffthreadVideoTexture, useVideoTexture };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/three",
-  "version": "4.0.142",
+  "version": "4.0.144",
   "description": "Utility functions for using react-three-fiber with remotion",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -16,19 +16,18 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.142"
+    "remotion": "4.0.144"
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "three": ">=0.137.0",
-    "remotion": "4.0.142"
+    "remotion": "4.0.144"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.281",
     "@react-three/fiber": "8.13.5",
-    "@rollup/plugin-typescript": "^8.2.0",
     "@types/node": "18.14.6",
     "@types/react": "18.2.48",
     "@types/react-reconciler": "^0.26.4",
@@ -39,9 +38,8 @@
     "prettier-plugin-organize-imports": "3.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rollup": "^2.70.1",
     "three": "0.158.0",
-    "remotion": "4.0.142"
+    "remotion": "4.0.144"
   },
   "keywords": [
     "remotion",
@@ -67,6 +65,6 @@
     "formatting": "prettier src --check",
     "lint": "eslint src --ext ts,tsx",
     "watch": "tsc -w",
-    "build": "rollup --failAfterWarnings --config rollup.config.js && tsc -d"
+    "build": "bun bundle.ts && tsc -d"
   }
 }

package/dist/esm/SuspenseLoader.d.ts

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

package/dist/esm/ThreeCanvas.d.ts

@@ -1,12 +0,0 @@
-import { Canvas } from '@react-three/fiber';
-import React from 'react';
-export type ThreeCanvasProps = React.ComponentProps<typeof Canvas> & {
-    readonly width: number;
-    readonly height: number;
-    readonly 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) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/index.d.ts

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

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

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

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

@@ -1,9 +0,0 @@
-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/esm/validate.d.ts

@@ -1,2 +0,0 @@
-import { NoReactInternals } from 'remotion/no-react';
-export declare const validateDimension: typeof NoReactInternals.validateDimension;