fix(useVideoTexture): clean up video element and cache on unmount

src/core/VideoTexture.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import * as THREE from 'three'
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
 import { useThree } from '@react-three/fiber'
-import { suspend } from 'suspend-react'
+import { suspend, clear } from 'suspend-react'
 import { type default as Hls, Events } from 'hls.js'
 
 const IS_BROWSER = /* @__PURE__ */ (() =>
@@ -98,13 +98,25 @@ export function useVideoTexture(
   useEffect(() => {
     start && texture.image.play()
 
+    // NOTE: This cleanup assumes a single consumer per srcOrSrcObject. If multiple
+    // components share the same source, the first to unmount will release the video
+    // and evict the cache, leaving others with a dead texture.
     return () => {
+      const video = texture.image as HTMLVideoElement
+      video.pause()
+      video.removeAttribute('src')
+      video.srcObject = null
+      video.load()
+
       if (hlsRef.current) {
         hlsRef.current.destroy()
         hlsRef.current = null
       }
+
+      texture.dispose()
+      clear([srcOrSrcObject])
     }
-  }, [texture, start])
+  }, [texture, start, srcOrSrcObject])
 
   return texture
 }
@@ -125,10 +137,6 @@ export const VideoTexture = /* @__PURE__ */ forwardRef<VideoTexture, VideoTextur
   ({ children, src, ...config }, fref) => {
     const texture = useVideoTexture(src, config)
 
-    useEffect(() => {
-      return () => void texture.dispose()
-    }, [texture])
-
     useImperativeHandle(fref, () => texture, [texture]) // expose texture through ref
 
     return <>{children?.(texture)}</>