pass tracks to controls

src/components/hooks/useFullscreen.ts

@@ -0,0 +1,26 @@
+import {useCallback, useSyncExternalStore} from 'react'
+
+import {isWeb} from '#/platform/detection'
+
+function fullscreenSubscribe(onChange: () => void) {
+  document.addEventListener('fullscreenchange', onChange)
+  return () => document.removeEventListener('fullscreenchange', onChange)
+}
+
+export function useFullscreen(ref: React.RefObject<HTMLElement>) {
+  if (!isWeb) throw new Error("'useFullscreen' is a web-only hook")
+  const isFullscreen = useSyncExternalStore(fullscreenSubscribe, () =>
+    Boolean(document.fullscreenElement),
+  )
+
+  const toggleFullscreen = useCallback(() => {
+    if (isFullscreen) {
+      document.exitFullscreen()
+    } else {
+      if (!ref.current) return
+      ref.current.requestFullscreen()
+    }
+  }, [isFullscreen, ref])
+
+  return [isFullscreen, toggleFullscreen] as const
+}

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

@@ -1,7 +1,7 @@
 import React, {useEffect, useId, useRef, useState} from 'react'
 import {View} from 'react-native'
 import {AppBskyEmbedVideo} from '@atproto/api'
-import Hls from 'hls.js'
+import Hls, {MediaPlaylist} from 'hls.js'
 
 import {atoms as a} from '#/alf'
 import {Controls} from './VideoWebControls'
@@ -20,7 +20,7 @@ export function VideoEmbedInnerWeb({
   const containerRef = useRef<HTMLDivElement>(null)
   const ref = useRef<HTMLVideoElement>(null)
   const [focused, setFocused] = useState(false)
-  const [hasSubtitleTrack, setHasSubtitleTrack] = useState(false)
+  const [subtitleTracks, setSubtitleTracks] = useState<MediaPlaylist[]>([])
   const figId = useId()
 
   // send error up to error boundary
@@ -46,7 +46,7 @@ export function VideoEmbedInnerWeb({
 
     hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, (_event, data) => {
       if (data.subtitleTracks.length > 0) {
-        setHasSubtitleTrack(true)
+        setSubtitleTracks(data.subtitleTracks)
       }
     })
 
@@ -111,7 +111,7 @@ export function VideoEmbedInnerWeb({
           setFocused={setFocused}
           onScreen={onScreen}
           fullscreenRef={containerRef}
-          hasSubtitleTrack={hasSubtitleTrack}
+          subtitleTracks={subtitleTracks}
         />
       </div>
     </View>

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

@@ -1,15 +1,10 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  useSyncExternalStore,
-} from 'react'
+import React, {useCallback, useEffect, useRef, useState} from 'react'
 import {Pressable, View} from 'react-native'
 import {SvgProps} from 'react-native-svg'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import type Hls from 'hls.js'
+import {MediaPlaylist} from 'hls.js'
 
 import {isFirefox} from '#/lib/browser'
 import {clamp} from '#/lib/numbers'
@@ -21,6 +16,7 @@ import {
 } from '#/state/preferences'
 import {atoms as a, useTheme, web} from '#/alf'
 import {Button} from '#/components/Button'
+import {useFullscreen} from '#/components/hooks/useFullscreen'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {
   ArrowsDiagonalIn_Stroke2_Corner0_Rounded as ArrowsInIcon,
@@ -47,7 +43,7 @@ export function Controls({
   setFocused,
   onScreen,
   fullscreenRef,
-  hasSubtitleTrack,
+  subtitleTracks,
 }: {
   videoRef: React.RefObject<HTMLVideoElement>
   hlsRef: React.RefObject<Hls | undefined>
@@ -57,7 +53,7 @@ export function Controls({
   setFocused: (focused: boolean) => void
   onScreen: boolean
   fullscreenRef: React.RefObject<HTMLDivElement>
-  hasSubtitleTrack: boolean
+  subtitleTracks: MediaPlaylist[]
 }) {
   const {
     play,
@@ -133,12 +129,12 @@ export function Controls({
 
   useEffect(() => {
     if (!hlsRef.current) return
-    if (hasSubtitleTrack && subtitlesEnabled && canPlay) {
+    if (subtitleTracks.length > 0 && subtitlesEnabled && canPlay) {
       hlsRef.current.subtitleTrack = 0
     } else {
       hlsRef.current.subtitleTrack = -1
     }
-  }, [hasSubtitleTrack, subtitlesEnabled, hlsRef, canPlay])
+  }, [subtitleTracks, subtitlesEnabled, hlsRef, canPlay])
 
   // clicking on any button should focus the player, if it's not already focused
   const drawFocus = useCallback(() => {
@@ -329,7 +325,7 @@ export function Controls({
           <Text style={{color: t.palette.white}}>
             {formatTime(currentTime)} / {formatTime(duration)}
           </Text>
-          {hasSubtitleTrack && (
+          {subtitleTracks.length > 0 && (
             <ControlButton
               active={subtitlesEnabled}
               activeLabel={_(msg`Disable subtitles`)}
@@ -850,25 +846,3 @@ function useVideoUtils(ref: React.RefObject<HTMLVideoElement>) {
     canPlay,
   }
 }
-
-function fullscreenSubscribe(onChange: () => void) {
-  document.addEventListener('fullscreenchange', onChange)
-  return () => document.removeEventListener('fullscreenchange', onChange)
-}
-
-function useFullscreen(ref: React.RefObject<HTMLElement>) {
-  const isFullscreen = useSyncExternalStore(fullscreenSubscribe, () =>
-    Boolean(document.fullscreenElement),
-  )
-
-  const toggleFullscreen = useCallback(() => {
-    if (isFullscreen) {
-      document.exitFullscreen()
-    } else {
-      if (!ref.current) return
-      ref.current.requestFullscreen()
-    }
-  }, [isFullscreen, ref])
-
-  return [isFullscreen, toggleFullscreen] as const
-}