@react-three/drei 9.117.2 → 9.118.0

package/core/Text3D.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as THREE from 'three';
 import { MeshProps, Node } from '@react-three/fiber';
 import { TextGeometryParameters } from 'three-stdlib';
-import { useFont } from './useFont';
+import { FontData } from './useFont';
 import { ForwardRefComponent } from '../helpers/ts-utils';
 declare global {
     namespace JSX {
@@ -12,7 +12,7 @@ declare global {
     }
 }
 type Text3DProps = {
-    font: Parameters<typeof useFont>[0];
+    font: FontData | string;
     bevelSegments?: number;
     smooth?: number;
 } & Omit<TextGeometryParameters, 'font'> & MeshProps;

package/core/VideoTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("suspend-react"),o=require("hls.js");function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s,c,i=u(e),l=u(t);const a="undefined"!=typeof window&&"function"==typeof(null==(s=window.document)?void 0:s.createElement)&&"string"==typeof(null==(c=window.navigator)?void 0:c.userAgent);let d=null;function f(t,{unsuspend:s="loadedmetadata",start:c=!0,hls:i={},crossOrigin:f="anonymous",muted:p=!0,loop:g=!0,playsInline:m=!0,...v}={}){const y=r.useThree((e=>e.gl)),w=e.useRef(null),h=n.suspend((()=>new Promise((async e=>{let r,n;"string"==typeof t?r=t:n=t;const c=Object.assign(document.createElement("video"),{src:r,srcObject:n,crossOrigin:f,loop:g,muted:p,playsInline:m,...v});if(r&&a&&r.endsWith(".m3u8")){const e=w.current=await async function(...e){var t;null!==(t=d)&&void 0!==t||(d=await Promise.resolve().then((function(){return u(require("hls.js"))})));const r=d.default;return r.isSupported()?new r(...e):null}(i);e&&(e.on(o.Events.MEDIA_ATTACHED,(()=>{e.loadSource(r)})),e.attachMedia(c))}const h=new l.VideoTexture(c);"colorSpace"in h?h.colorSpace=y.outputColorSpace:h.encoding=y.outputEncoding,c.addEventListener(s,(()=>e(h)))}))),[t]);return e.useEffect((()=>(c&&h.image.play(),()=>{w.current&&(w.current.destroy(),w.current=null)})),[h,c]),h}exports.VideoTexture=({children:t,src:r,...n})=>{const o=f(r,n);return e.useEffect((()=>()=>{o.dispose()}),[o]),i.createElement(i.Fragment,null,null==t?void 0:t(o))},exports.useVideoTexture=f;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber"),n=require("suspend-react"),o=require("hls.js");function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s,c,a=u(e),i=u(t);const l="undefined"!=typeof window&&"function"==typeof(null==(s=window.document)?void 0:s.createElement)&&"string"==typeof(null==(c=window.navigator)?void 0:c.userAgent);let d=null;function f(t,{unsuspend:s="loadedmetadata",start:c=!0,hls:a={},crossOrigin:f="anonymous",muted:p=!0,loop:v=!0,playsInline:g=!0,onVideoFrame:y,...b}={}){const w=r.useThree((e=>e.gl)),E=e.useRef(null),h=n.suspend((()=>new Promise((async e=>{let r,n;"string"==typeof t?r=t:n=t;const c=Object.assign(document.createElement("video"),{src:r,srcObject:n,crossOrigin:f,loop:v,muted:p,playsInline:g,...b});if(r&&l&&r.endsWith(".m3u8")){const e=E.current=await async function(...e){var t;null!==(t=d)&&void 0!==t||(d=await Promise.resolve().then((function(){return u(require("hls.js"))})));const r=d.default;return r.isSupported()?new r(...e):null}(a);e&&(e.on(o.Events.MEDIA_ATTACHED,(()=>{e.loadSource(r)})),e.attachMedia(c))}const m=new i.VideoTexture(c);"colorSpace"in m?m.colorSpace=w.outputColorSpace:m.encoding=w.outputEncoding,c.addEventListener(s,(()=>e(m)))}))),[t]),O=h.source.data;return m(O,y),e.useEffect((()=>(c&&h.image.play(),()=>{E.current&&(E.current.destroy(),E.current=null)})),[h,c]),h}const p=e.forwardRef((({children:t,src:r,...n},o)=>{const u=f(r,n);return e.useEffect((()=>()=>{u.dispose()}),[u]),e.useImperativeHandle(o,(()=>u),[u]),a.createElement(a.Fragment,null,null==t?void 0:t(u))})),m=(t,r)=>{e.useEffect((()=>{if(!r)return;if(!t.requestVideoFrameCallback)return;let e;const n=(...o)=>{r(...o),e=t.requestVideoFrameCallback(n)};return t.requestVideoFrameCallback(n),()=>t.cancelVideoFrameCallback(e)}),[t,r])};exports.VideoTexture=p,exports.useVideoTexture=f;

package/core/VideoTexture.d.ts

@@ -2,14 +2,25 @@ import * as React from 'react';
 import * as THREE from 'three';
 import { type default as Hls } from 'hls.js';
 declare function getHls(...args: ConstructorParameters<typeof Hls>): Promise<Hls | null>;
-export declare function useVideoTexture(srcOrSrcObject: HTMLVideoElement['src' | 'srcObject'], { unsuspend, start, hls: hlsConfig, crossOrigin, muted, loop, playsInline, ...videoProps }?: {
+export declare function useVideoTexture(srcOrSrcObject: HTMLVideoElement['src' | 'srcObject'], { unsuspend, start, hls: hlsConfig, crossOrigin, muted, loop, playsInline, onVideoFrame, ...videoProps }?: {
     unsuspend?: keyof HTMLVideoElementEventMap;
     start?: boolean;
     hls?: Parameters<typeof getHls>[0];
+    onVideoFrame?: VideoFrameRequestCallback;
 } & Partial<Omit<HTMLVideoElement, 'children' | 'src' | 'srcObject'>>): THREE.VideoTexture;
-type UseVideoTexture = Parameters<typeof useVideoTexture>;
-export declare const VideoTexture: ({ children, src, ...config }: {
-    children?: (texture: ReturnType<typeof useVideoTexture>) => React.ReactNode;
-    src: UseVideoTexture[0];
-} & UseVideoTexture[1]) => React.JSX.Element;
+type UseVideoTextureParams = Parameters<typeof useVideoTexture>;
+type VideoTexture = ReturnType<typeof useVideoTexture>;
+export type VideoTextureProps = {
+    children?: (texture: VideoTexture) => React.ReactNode;
+    src: UseVideoTextureParams[0];
+} & UseVideoTextureParams[1];
+export declare const VideoTexture: React.ForwardRefExoticComponent<{
+    children?: (texture: VideoTexture) => React.ReactNode;
+    src: UseVideoTextureParams[0];
+} & {
+    unsuspend?: keyof HTMLVideoElementEventMap;
+    start?: boolean;
+    hls?: Parameters<typeof getHls>[0];
+    onVideoFrame?: VideoFrameRequestCallback;
+} & Partial<Omit<HTMLVideoElement, "children" | "src" | "srcObject">> & React.RefAttributes<THREE.VideoTexture>>;
 export {};

package/core/VideoTexture.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
 import * as THREE from 'three';
 import { useThree } from '@react-three/fiber';
 import { suspend } from 'suspend-react';
@@ -25,6 +25,7 @@ function useVideoTexture(srcOrSrcObject, {
   muted = true,
   loop = true,
   playsInline = true,
+  onVideoFrame,
   ...videoProps
 } = {}) {
   const gl = useThree(state => state.gl);
@@ -59,6 +60,8 @@ function useVideoTexture(srcOrSrcObject, {
     if ('colorSpace' in texture) texture.colorSpace = gl.outputColorSpace;else texture.encoding = gl.outputEncoding;
     video.addEventListener(unsuspend, () => res(texture));
   }), [srcOrSrcObject]);
+  const video = texture.source.data;
+  useVideoFrame(video, onVideoFrame);
   useEffect(() => {
     start && texture.image.play();
     return () => {
@@ -71,18 +74,38 @@ function useVideoTexture(srcOrSrcObject, {
   return texture;
 }
 
+//
+// VideoTexture
 //
 
-const VideoTexture = ({
+const VideoTexture = /* @__PURE__ */forwardRef(({
   children,
   src,
   ...config
-}) => {
-  const ret = useVideoTexture(src, config);
+}, fref) => {
+  const texture = useVideoTexture(src, config);
+  useEffect(() => {
+    return () => void texture.dispose();
+  }, [texture]);
+  useImperativeHandle(fref, () => texture, [texture]); // expose texture through ref
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children == null ? void 0 : children(texture));
+});
+
+// rVFC hook
+
+const useVideoFrame = (video, f) => {
   useEffect(() => {
-    return () => void ret.dispose();
-  }, [ret]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children == null ? void 0 : children(ret));
+    if (!f) return;
+    if (!video.requestVideoFrameCallback) return;
+    let handle;
+    const callback = (...args) => {
+      f(...args);
+      handle = video.requestVideoFrameCallback(callback);
+    };
+    video.requestVideoFrameCallback(callback);
+    return () => video.cancelVideoFrameCallback(handle);
+  }, [video, f]);
 };
 
 export { VideoTexture, useVideoTexture };

package/core/useFont.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three-stdlib"),r=require("suspend-react");let n=null,t=null;async function a(r){if("string"==typeof r){var n;const u=await fetch(r);if(null!=(n=u.headers.get("Content-Type"))&&n.includes("application/json"))return await u.json();{const r=await u.arrayBuffer();return a=r,t||(t=new e.TTFLoader),t.parse(a)}}return r;var a}async function u(r){return function(r){return n||(n=new e.FontLoader),n.parse(r)}(await a(r))}function s(e){return r.suspend(u,[e])}s.preload=e=>r.preload(u,[e]),s.clear=e=>r.clear([e]),exports.useFont=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three-stdlib"),r=require("suspend-react");let t=null;async function n(r){const n=await async function(e){return"string"==typeof e?await(await fetch(e)).json():e}(r);return a=n,t||(t=new e.FontLoader),t.parse(a);var a}function a(e){return r.suspend(n,[e])}a.preload=e=>r.preload(n,[e]),a.clear=e=>r.clear([e]),exports.useFont=a;

package/core/useFont.js

@@ -1,37 +1,19 @@
-import { FontLoader, TTFLoader } from 'three-stdlib';
+import { FontLoader } from 'three-stdlib';
 import { suspend, preload, clear } from 'suspend-react';
 
 let fontLoader = null;
-let ttfLoader = null;
+async function loadFontData(font) {
+  return typeof font === 'string' ? await (await fetch(font)).json() : font;
+}
 function parseFontData(fontData) {
   if (!fontLoader) {
     fontLoader = new FontLoader();
   }
   return fontLoader.parse(fontData);
 }
-function parseTtfArrayBuffer(ttfData) {
-  if (!ttfLoader) {
-    ttfLoader = new TTFLoader();
-  }
-  return ttfLoader.parse(ttfData);
-}
-async function loadFontData(font) {
-  if (typeof font === 'string') {
-    var _res$headers$get;
-    const res = await fetch(font);
-    if ((_res$headers$get = res.headers.get('Content-Type')) != null && _res$headers$get.includes('application/json')) {
-      return await res.json();
-    } else {
-      const arrayBuffer = await res.arrayBuffer();
-      return parseTtfArrayBuffer(arrayBuffer);
-    }
-  } else {
-    return font;
-  }
-}
 async function loader(font) {
-  const fontData = await loadFontData(font);
-  return parseFontData(fontData);
+  const data = await loadFontData(font);
+  return parseFontData(data);
 }
 function useFont(font) {
   return suspend(loader, [font]);