@react-three/drei 9.117.3 → 9.118.0

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 };