diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx index a30c0e1e9b..b0f71c3422 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx +++ b/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(null) const ref = useRef(null) const [focused, setFocused] = useState(false) - const [hasSubtitleTrack, setHasSubtitleTrack] = useState(false) + const [subtitleTracks, setSubtitleTracks] = useState([]) 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} /> diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx index 6e31245b80..98bef6b438 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx @@ -4,6 +4,7 @@ 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' @@ -42,7 +43,7 @@ export function Controls({ setFocused, onScreen, fullscreenRef, - hasSubtitleTrack, + subtitleTracks, }: { videoRef: React.RefObject hlsRef: React.RefObject @@ -52,7 +53,7 @@ export function Controls({ setFocused: (focused: boolean) => void onScreen: boolean fullscreenRef: React.RefObject - hasSubtitleTrack: boolean + subtitleTracks: MediaPlaylist[] }) { const { play, @@ -128,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(() => { @@ -324,7 +325,7 @@ export function Controls({ {formatTime(currentTime)} / {formatTime(duration)} - {hasSubtitleTrack && ( + {subtitleTracks.length > 0 && (