feat: improve media playback experience

src/components/MediaPlayer/index.tsx

@@ -18,6 +18,7 @@ export default function MediaPlayer({
   const { autoLoadMedia } = useContentPolicy()
   const [display, setDisplay] = useState(autoLoadMedia)
   const [mediaType, setMediaType] = useState<'video' | 'audio' | null>(null)
+  const [error, setError] = useState(false)
 
   useEffect(() => {
     if (autoLoadMedia) {
@@ -51,11 +52,12 @@ export default function MediaPlayer({
     video.crossOrigin = 'anonymous'
 
     video.onloadedmetadata = () => {
+      setError(false)
       setMediaType(video.videoWidth > 0 || video.videoHeight > 0 ? 'video' : 'audio')
     }
 
     video.onerror = () => {
-      setMediaType(null)
+      setError(true)
     }
 
     return () => {
@@ -63,6 +65,10 @@ export default function MediaPlayer({
     }
   }, [src, display, mustLoad])
 
+  if (error) {
+    return <ExternalLink url={src} />
+  }
+
   if (!mustLoad && !display) {
     return (
       <div
@@ -78,7 +84,7 @@ export default function MediaPlayer({
   }
 
   if (!mediaType) {
-    return <ExternalLink url={src} />
+    return null
   }
 
   if (mediaType === 'video') {