🧓 Fix on minimized player (#4372)

* Add error callback on video

* Use error callback to hide MinimizedPlayer.tsx

packages/atlas/src/components/MinimizedPlayer/MinimizedPlayer.tsx

@@ -15,6 +15,7 @@ type MiniVideoProps = {
 export const MinimizedPlayer = forwardRef<HTMLVideoElement, MiniVideoProps>(
   ({ isInView, author, title, ...videoPlayerProps }, ref) => {
     const [forceExit, setForceExit] = useState(false)
+    const [hasError, setHasError] = useState(false)
     const [isPaused, setIsPaused] = useState(false)
     const [wasPausedOnTop, setWasPausedTop] = useState(false)
     const isAllowed = usePersonalDataStore((state) => state.allowMinimizedPleyer)
@@ -27,7 +28,7 @@ export const MinimizedPlayer = forwardRef<HTMLVideoElement, MiniVideoProps>(
       }
     }, [isInView, isPaused])
 
-    const inView = isAllowed && mdMatch && !wasPausedOnTop ? isInView || forceExit : true
+    const inView = isAllowed && mdMatch && !wasPausedOnTop ? isInView || forceExit || hasError : true
 
     return (
       <Wrapper isInView={inView}>
@@ -42,6 +43,7 @@ export const MinimizedPlayer = forwardRef<HTMLVideoElement, MiniVideoProps>(
             setIsPaused(false)
             videoPlayerProps.onPlay?.()
           }}
+          onError={() => setHasError(true)}
           onMinimizedExit={() => setForceExit(true)}
           {...videoPlayerProps}
         />

packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.tsx

@@ -80,6 +80,7 @@ export type VideoPlayerProps = {
   nextVideo?: FullVideoFieldsFragment | null
   className?: string
   videoStyle?: CSSProperties
+  onError?: () => void
   autoplay?: boolean
   playing?: boolean
   videoId?: string
@@ -121,6 +122,7 @@ const VideoPlayerComponent: ForwardRefRenderFunction<HTMLVideoElement, VideoPlay
     availableTextTracks,
     isMinimized,
     onMinimizedExit,
+    onError,
     ...videoJsConfig
   },
   externalRef
@@ -280,13 +282,14 @@ const VideoPlayerComponent: ForwardRefRenderFunction<HTMLVideoElement, VideoPlay
       return
     }
     const handler = () => {
+      onError?.()
       setPlayerState('error')
     }
     player.on('error', handler)
     return () => {
       player.off('error', handler)
     }
-  })
+  }, [onError, player])
 
   // handle setting playback rate
   useEffect(() => {
@@ -303,8 +306,9 @@ const VideoPlayerComponent: ForwardRefRenderFunction<HTMLVideoElement, VideoPlay
   useEffect(() => {
     if (videoJsConfig.src === null) {
       setPlayerState('error')
+      onError?.()
     }
-  }, [videoJsConfig.src])
+  }, [onError, videoJsConfig.src])
 
   // handle video loading
   useEffect(() => {