From ad944f19c14408391ff6207f53a3fd58042d31ca Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Sat, 19 Oct 2024 18:11:26 +0200
Subject: [PATCH] fix(useVideoTexture): playsInline for ios (#2127)

---
 .storybook/stories/VideoTexture.stories.tsx      | 4 ++--
 docs/loaders/video-texture-use-video-texture.mdx | 1 +
 src/core/VideoTexture.tsx                        | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/.storybook/stories/VideoTexture.stories.tsx b/.storybook/stories/VideoTexture.stories.tsx
index e3752ffff..c454b273b 100644
--- a/.storybook/stories/VideoTexture.stories.tsx
+++ b/.storybook/stories/VideoTexture.stories.tsx
@@ -35,7 +35,7 @@ function VideoTextureScene(props: React.ComponentProps<typeof VideoTexture>) {
 
 export const VideoTextureSt = {
   args: {
-    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
   },
   render: (args) => <VideoTextureScene {...args} />,
   name: 'Default',
@@ -64,7 +64,7 @@ function FallbackMaterial({ url }: { url: string }) {
 
 export const VideoTextureSt2 = {
   args: {
-    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
   },
   render: (args) => <VideoTextureScene2 {...args} />,
   name: 'Suspense',
diff --git a/docs/loaders/video-texture-use-video-texture.mdx b/docs/loaders/video-texture-use-video-texture.mdx
index a9aed71b1..8198c9048 100644
--- a/docs/loaders/video-texture-use-video-texture.mdx
+++ b/docs/loaders/video-texture-use-video-texture.mdx
@@ -28,6 +28,7 @@ export function useVideoTexture(
     crossOrigin = 'anonymous',
     muted = true,
     loop = true,
+    playsInline = true,
     ...videoProps
   }: {
     unsuspend?: keyof HTMLVideoElementEventMap
diff --git a/src/core/VideoTexture.tsx b/src/core/VideoTexture.tsx
index 54ee75f2f..a50ed4c8a 100644
--- a/src/core/VideoTexture.tsx
+++ b/src/core/VideoTexture.tsx
@@ -30,6 +30,7 @@ export function useVideoTexture(
     crossOrigin = 'anonymous',
     muted = true,
     loop = true,
+    playsInline = true,
     ...videoProps
   }: {
     unsuspend?: keyof HTMLVideoElementEventMap
@@ -39,7 +40,6 @@ export function useVideoTexture(
 ) {
   const gl = useThree((state) => state.gl)
   const hlsRef = useRef<Hls | null>(null)
-  const videoRef = useRef<HTMLVideoElement | null>(null)
 
   const texture = suspend(
     () =>
@@ -58,9 +58,9 @@ export function useVideoTexture(
           crossOrigin,
           loop,
           muted,
+          playsInline,
           ...videoProps,
         })
-        videoRef.current = video
 
         // hlsjs extension
         if (src && IS_BROWSER && src.endsWith('.m3u8')) {