change quality based on focused state

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

@@ -113,15 +113,6 @@ export function VideoPlayer({
     }
   }, [source, hls])
 
-  // use minimal quality when not active
-  useEffect(() => {
-    if (active) {
-      hls.nextLevel = -1
-    } else {
-      hls.nextLevel = 0
-    }
-  }, [hls, active])
-
   const enterFullscreen = useCallback(() => {
     if (containerRef.current) {
       containerRef.current.requestFullscreen()
@@ -151,6 +142,7 @@ export function VideoPlayer({
         />
         <Controls
           videoRef={ref}
+          hls={hls}
           active={active}
           setActive={setActive}
           focused={focused}

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

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

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

@@ -3,6 +3,7 @@ import {Pressable, View} from 'react-native'
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import type Hls from 'hls.js'
 
 import {
   useAutoplayDisabled,
@@ -29,6 +30,7 @@ import {Text} from '#/components/Typography'
 
 export function Controls({
   videoRef,
+  hls,
   active,
   setActive,
   focused,
@@ -37,6 +39,7 @@ export function Controls({
   enterFullscreen,
 }: {
   videoRef: React.RefObject<HTMLVideoElement>
+  hls: Hls
   active: boolean
   setActive: () => void
   focused: boolean
@@ -104,6 +107,16 @@ export function Controls({
     }
   }, [onScreen, pause, active, play, autoplayDisabled])
 
+  // use minimal quality when not focused
+  useEffect(() => {
+    if (focused) {
+      // auto decide quality based on network conditions
+      hls.nextLevel = -1
+    } else {
+      hls.nextLevel = 0
+    }
+  }, [hls, focused])
+
   // clicking on any button should focus the player, if it's not already focused
   const drawFocus = useCallback(() => {
     if (!active) {