rework hls into a ref

src/view/com/util/post-embeds/VideoEmbedInner.web.tsx

@@ -82,39 +82,38 @@ export function VideoPlayer({
   setActive: () => void
   onScreen: boolean
 }) {
-  const [hls] = useState(() => new Hls({capLevelToPlayerSize: true}))
   const containerRef = useRef<HTMLDivElement>(null)
   const ref = useRef<HTMLVideoElement>(null)
   const [focused, setFocused] = useState(false)
   const [hasSubtitleTrack, setHasSubtitleTrack] = useState(false)
 
-  useEffect(() => {
-    if (ref.current && Hls.isSupported()) {
-      hls.attachMedia(ref.current)
-      // initial value, later on it's managed by Controls
-      hls.autoLevelCapping = 0
-
-      hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, (event, data) => {
-        if (data.subtitleTracks.length > 0) {
-          setHasSubtitleTrack(true)
-        }
-      })
-
-      return () => {
-        hls.detachMedia()
-      }
-    }
-  }, [hls])
+  const hlsRef = useRef<Hls | undefined>(undefined)
 
   useEffect(() => {
-    if (ref.current) {
-      if (Hls.isSupported()) {
-        hls.loadSource(source)
-      } else {
-        // TODO: fallback
+    if (!ref.current) return
+    if (!Hls.isSupported()) throw new UnsupportedError()
+
+    const hls = new Hls({capLevelToPlayerSize: true})
+    hlsRef.current = hls
+
+    hls.attachMedia(ref.current)
+    hls.loadSource(source)
+
+    // initial value, later on it's managed by Controls
+    hls.autoLevelCapping = 0
+
+    hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, (event, data) => {
+      if (data.subtitleTracks.length > 0) {
+        setHasSubtitleTrack(true)
       }
+    })
+
+    return () => {
+      hlsRef.current = undefined
+      hls.detachMedia()
+      hls.destroy()
     }
-  }, [source, hls])
+  }, [source])
 
   const enterFullscreen = useCallback(() => {
     if (containerRef.current) {
@@ -145,7 +144,7 @@ export function VideoPlayer({
         />
         <Controls
           videoRef={ref}
-          hls={hls}
+          hlsRef={hlsRef}
           active={active}
           setActive={setActive}
           focused={focused}
@@ -158,3 +157,9 @@ export function VideoPlayer({
     </View>
   )
 }
+
+export class UnsupportedError extends Error {
+  constructor() {
+    super('HLS is not supported')
+  }
+}

src/view/com/util/post-embeds/VideoWebControls.tsx

@@ -3,7 +3,7 @@ import type Hls from 'hls.js'
 
 export function Controls({}: {
   videoRef: React.RefObject<HTMLVideoElement>
-  hls: Hls
+  hlsRef: React.RefObject<Hls>
   active: boolean
   setActive: () => void
   focused: boolean

src/view/com/util/post-embeds/VideoWebControls.web.tsx

@@ -30,7 +30,7 @@ import {Text} from '#/components/Typography'
 
 export function Controls({
   videoRef,
-  hls,
+  hlsRef,
   active,
   setActive,
   focused,
@@ -40,7 +40,7 @@ export function Controls({
   hasSubtitleTrack,
 }: {
   videoRef: React.RefObject<HTMLVideoElement>
-  hls: Hls
+  hlsRef: React.RefObject<Hls>
   active: boolean
   setActive: () => void
   focused: boolean
@@ -112,21 +112,23 @@ export function Controls({
 
   // use minimal quality when not focused
   useEffect(() => {
+    if (!hlsRef.current) return
     if (focused) {
       // auto decide quality based on network conditions
-      hls.autoLevelCapping = -1
+      hlsRef.current.autoLevelCapping = -1
     } else {
-      hls.autoLevelCapping = 0
+      hlsRef.current.autoLevelCapping = 0
     }
-  }, [hls, focused])
+  }, [hlsRef, focused])
 
   useEffect(() => {
+    if (!hlsRef.current) return
     if (hasSubtitleTrack && subtitlesEnabled && canPlay) {
-      hls.subtitleTrack = 0
+      hlsRef.current.subtitleTrack = 0
     } else {
-      hls.subtitleTrack = -1
+      hlsRef.current.subtitleTrack = -1
     }
-  }, [hasSubtitleTrack, subtitlesEnabled, hls, canPlay])
+  }, [hasSubtitleTrack, subtitlesEnabled, hlsRef, canPlay])
 
   // clicking on any button should focus the player, if it's not already focused
   const drawFocus = useCallback(() => {