feat: add error handling for audio, video, and YouTube players

src/components/AudioPlayer/index.tsx

@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils'
 import mediaManager from '@/services/media-manager.service'
 import { Pause, Play } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
+import ExternalLink from '../ExternalLink'
 
 interface AudioPlayerProps {
   src: string
@@ -15,6 +16,7 @@ export default function AudioPlayer({ src, className }: AudioPlayerProps) {
   const [isPlaying, setIsPlaying] = useState(false)
   const [currentTime, setCurrentTime] = useState(0)
   const [duration, setDuration] = useState(0)
+  const [error, setError] = useState(false)
   const seekTimeoutRef = useRef<NodeJS.Timeout>()
   const isSeeking = useRef(false)
 
@@ -78,6 +80,10 @@ export default function AudioPlayer({ src, className }: AudioPlayerProps) {
     }, 300)
   }
 
+  if (error) {
+    return <ExternalLink url={src} />
+  }
+
   return (
     <div
       className={cn(
@@ -86,7 +92,7 @@ export default function AudioPlayer({ src, className }: AudioPlayerProps) {
       )}
       onClick={(e) => e.stopPropagation()}
     >
-      <audio ref={audioRef} src={src} preload="metadata" />
+      <audio ref={audioRef} src={src} preload="metadata" onError={() => setError(false)} />
 
       {/* Play/Pause Button */}
       <Button size="icon" className="rounded-full shrink-0" onClick={togglePlay}>