From 74e42d03539dff3404ca32f69d408d16d46a4ac3 Mon Sep 17 00:00:00 2001
From: Bela Bohlender <bela@bohlender.email>
Date: Thu, 15 Aug 2024 15:02:15 +0200
Subject: [PATCH] fix: video component video not removed

---
 packages/react/src/video.tsx           | 22 +++++++++++++++++++++-
 packages/uikit/src/components/video.ts | 12 +++---------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/video.tsx b/packages/react/src/video.tsx
index 12bc572..4b093b0 100644
--- a/packages/react/src/video.tsx
+++ b/packages/react/src/video.tsx
@@ -44,7 +44,27 @@ export const Video: (props: VideoProperties & RefAttributes<VideoInternals>) =>
 
     const providedHtmlElement = props.src instanceof HTMLVideoElement ? props.src : undefined
 
-    const element = useMemo(() => providedHtmlElement ?? document.createElement('video'), [providedHtmlElement])
+    const element = useMemo(() => {
+      if (providedHtmlElement != null) {
+        return providedHtmlElement
+      }
+      const result = document.createElement('video')
+      result.style.position = 'absolute'
+      result.style.width = '1px'
+      result.style.zIndex = '-1000'
+      result.style.top = '0px'
+      result.style.left = '0px'
+      return result
+    }, [providedHtmlElement])
+
+    const isElementProvided = props.src instanceof HTMLVideoElement
+    useEffect(() => {
+      if (isElementProvided) {
+        return
+      }
+      document.body.appendChild(element)
+      return () => element.remove()
+    }, [element, isElementProvided])
 
     const invalidate = useThree((s) => s.invalidate)
     useEffect(() => setupVideoElementInvalidation(element, invalidate), [element, invalidate])
diff --git a/packages/uikit/src/components/video.ts b/packages/uikit/src/components/video.ts
index 08f559d..7ac57c2 100644
--- a/packages/uikit/src/components/video.ts
+++ b/packages/uikit/src/components/video.ts
@@ -15,6 +15,9 @@ type InternalVideoProperties = {
   autoplay?: boolean
 }
 
+/**
+ * @requires that the element is attached to the document and therefore should be hidden (position = 'absolute', width = '1px', zIndex = '-1000', top = '0px', left = '0px')
+ */
 export function updateVideoElement(
   element: HTMLVideoElement,
   { src, autoplay, loop, muted, playbackRate, preservesPitch, volume }: InternalVideoProperties,
@@ -23,15 +26,6 @@ export function updateVideoElement(
     return
   }
 
-  if (autoplay) {
-    element.remove()
-    document.body.append(element)
-    element.style.position = 'absolute'
-    element.style.width = '1px'
-    element.style.zIndex = '-1000'
-    element.style.top = '0px'
-    element.style.left = '0px'
-  }
   element.playsInline = true
   element.volume = volume ?? 1
   element.preservesPitch = preservesPitch ?? true