@react-three/drei 9.114.5 → 9.114.6

package/README.md

@@ -1,5 +1,6 @@
 [![logo](docs/logo.jpg)](https://codesandbox.io/s/bfplr)
 
+[![Storybook](https://img.shields.io/static/v1?message=Storybook&style=flat&colorA=000000&colorB=000000&label=&logo=storybook&logoColor=ffffff)](https://drei.pmnd.rs/)
 [![Version](https://img.shields.io/npm/v/@react-three/drei?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)
 [![Downloads](https://img.shields.io/npm/dt/@react-three/drei.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)
 [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.com/channels/740090768164651008/741751532592038022)
@@ -34,6 +35,9 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
 
 https://pmndrs.github.io/drei
 
+<details>
+  <summary>Old doc</summary>
+
 > [!WARNING]
 > Below is an archive of the anchors links with their new respective locations to the documentation website.
 > Do not update the links below, they are for reference only.
@@ -790,3 +794,5 @@ https://pmndrs.github.io/drei
 #### ShadowAlpha
 
 [Documentation has moved here](https://pmndrs.github.io/drei/staging/shadow-alpha)
+
+</details>

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"),u=require("hls.js");function o(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=o(e),l=o(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,...m}={}){const v=r.useThree((e=>e.gl)),y=e.useRef(null),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,...m});if(w.current=c,r&&a&&r.endsWith(".m3u8")){const e=y.current=await async function(...e){var t;null!==(t=d)&&void 0!==t||(d=await Promise.resolve().then((function(){return o(require("hls.js"))})));const r=d.default;return r.isSupported()?new r(...e):null}(i);e&&(e.on(u.Events.MEDIA_ATTACHED,(()=>{e.loadSource(r)})),e.attachMedia(c))}const h=new l.VideoTexture(c);"colorSpace"in h?h.colorSpace=v.outputColorSpace:h.encoding=v.outputEncoding,c.addEventListener(s,(()=>e(h)))}))),[t]);return e.useEffect((()=>(c&&h.image.play(),()=>{y.current&&(y.current.destroy(),y.current=null)})),[h,c]),h}exports.VideoTexture=({children:t,src:r,...n})=>{const u=f(r,n);return e.useEffect((()=>()=>{u.dispose()}),[u]),i.createElement(i.Fragment,null,null==t?void 0:t(u))},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,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;

package/core/VideoTexture.d.ts

@@ -2,7 +2,7 @@ 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, ...videoProps }?: {
+export declare function useVideoTexture(srcOrSrcObject: HTMLVideoElement['src' | 'srcObject'], { unsuspend, start, hls: hlsConfig, crossOrigin, muted, loop, playsInline, ...videoProps }?: {
     unsuspend?: keyof HTMLVideoElementEventMap;
     start?: boolean;
     hls?: Parameters<typeof getHls>[0];

package/core/VideoTexture.js

@@ -24,11 +24,11 @@ function useVideoTexture(srcOrSrcObject, {
   crossOrigin = 'anonymous',
   muted = true,
   loop = true,
+  playsInline = true,
   ...videoProps
 } = {}) {
   const gl = useThree(state => state.gl);
   const hlsRef = useRef(null);
-  const videoRef = useRef(null);
   const texture = suspend(() => new Promise(async res => {
     let src = undefined;
     let srcObject = undefined;
@@ -43,9 +43,9 @@ function useVideoTexture(srcOrSrcObject, {
       crossOrigin,
       loop,
       muted,
+      playsInline,
       ...videoProps
     });
-    videoRef.current = video;
 
     // hlsjs extension
     if (src && IS_BROWSER && src.endsWith('.m3u8')) {