[Video] use dynamic import for hls.js (#5429)

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

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>