From 47301661f786f032c5b2f20773a5ee9041fed64e Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 25 Sep 2024 09:51:51 -0700
Subject: [Video] use dynamic import for hls.js (#5429)

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
---
 .../post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx     | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx')

diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx
index 2d1427347..dd0dafc33 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/VideoControls.tsx
@@ -43,6 +43,7 @@ export function Controls({
   setFocused,
   onScreen,
   fullscreenRef,
+  hlsLoading,
   hasSubtitleTrack,
 }: {
   videoRef: React.RefObject<HTMLVideoElement>
@@ -53,6 +54,7 @@ export function Controls({
   setFocused: (focused: boolean) => void
   onScreen: boolean
   fullscreenRef: React.RefObject<HTMLDivElement>
+  hlsLoading: boolean
   hasSubtitleTrack: boolean
 }) {
   const {
@@ -80,6 +82,7 @@ export function Controls({
   const [isFullscreen, toggleFullscreen] = useFullscreen(fullscreenRef)
   const {state: hasFocus, onIn: onFocus, onOut: onBlur} = useInteractionState()
   const [interactingViaKeypress, setInteractingViaKeypress] = useState(false)
+  const showSpinner = hlsLoading || buffering
   const {
     state: volumeHovered,
     onIn: onVolumeHover,
@@ -409,11 +412,11 @@ export function Controls({
           )}
         </View>
       </View>
-      {(buffering || error) && (
+      {(showSpinner || error) && (
         <View
           pointerEvents="none"
           style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
-          {buffering && <Loader fill={t.palette.white} size="lg" />}
+          {showSpinner && <Loader fill={t.palette.white} size="lg" />}
           {error && (
             <Text style={{color: t.palette.white}}>
               <Trans>An error occurred</Trans>
-- 
cgit 1.4.1