From e6baa7e8fc63be6e6eeb41628a70802c05e5ee9d Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Thu, 9 Oct 2025 22:22:16 +0800
Subject: [PATCH] feat: add error handling for audio, video, and YouTube
 players

---
 src/components/AudioPlayer/index.tsx           |  8 +++++++-
 src/components/ExternalLink/index.tsx          | 15 +++++++++++++++
 src/components/VideoPlayer/index.tsx           |  9 ++++++++-
 src/components/YoutubeEmbeddedPlayer/index.tsx |  9 ++++++++-
 4 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ExternalLink/index.tsx

diff --git a/src/components/AudioPlayer/index.tsx b/src/components/AudioPlayer/index.tsx
index cae97bd..f1ad967 100644
--- a/src/components/AudioPlayer/index.tsx
+++ b/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}>
diff --git a/src/components/ExternalLink/index.tsx b/src/components/ExternalLink/index.tsx
new file mode 100644
index 0000000..731504b
--- /dev/null
+++ b/src/components/ExternalLink/index.tsx
@@ -0,0 +1,15 @@
+import { cn } from '@/lib/utils'
+
+export default function ExternalLink({ url, className }: { url: string; className?: string }) {
+  return (
+    <a
+      className={cn('text-primary hover:underline', className)}
+      href={url}
+      target="_blank"
+      onClick={(e) => e.stopPropagation()}
+      rel="noreferrer"
+    >
+      {url}
+    </a>
+  )
+}
diff --git a/src/components/VideoPlayer/index.tsx b/src/components/VideoPlayer/index.tsx
index bfbf8f9..53d8d13 100644
--- a/src/components/VideoPlayer/index.tsx
+++ b/src/components/VideoPlayer/index.tsx
@@ -1,10 +1,12 @@
 import { cn, isInViewport } from '@/lib/utils'
 import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import mediaManager from '@/services/media-manager.service'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import ExternalLink from '../ExternalLink'
 
 export default function VideoPlayer({ src, className }: { src: string; className?: string }) {
   const { autoplay } = useContentPolicy()
+  const [error, setError] = useState(false)
   const videoRef = useRef<HTMLVideoElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
 
@@ -38,6 +40,10 @@ export default function VideoPlayer({ src, className }: { src: string; className
     }
   }, [autoplay])
 
+  if (error) {
+    return <ExternalLink url={src} />
+  }
+
   return (
     <div ref={containerRef}>
       <video
@@ -51,6 +57,7 @@ export default function VideoPlayer({ src, className }: { src: string; className
           mediaManager.play(event.currentTarget)
         }}
         muted
+        onError={() => setError(true)}
       />
     </div>
   )
diff --git a/src/components/YoutubeEmbeddedPlayer/index.tsx b/src/components/YoutubeEmbeddedPlayer/index.tsx
index 5dd804e..2ae8def 100644
--- a/src/components/YoutubeEmbeddedPlayer/index.tsx
+++ b/src/components/YoutubeEmbeddedPlayer/index.tsx
@@ -4,6 +4,7 @@ import mediaManager from '@/services/media-manager.service'
 import { YouTubePlayer } from '@/types/youtube'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import ExternalLink from '../ExternalLink'
 
 export default function YoutubeEmbeddedPlayer({
   url,
@@ -19,6 +20,7 @@ export default function YoutubeEmbeddedPlayer({
   const [display, setDisplay] = useState(autoLoadMedia)
   const { videoId, isShort } = useMemo(() => parseYoutubeUrl(url), [url])
   const [initSuccess, setInitSuccess] = useState(false)
+  const [error, setError] = useState(false)
   const playerRef = useRef<YouTubePlayer | null>(null)
   const containerRef = useRef<HTMLDivElement>(null)
 
@@ -63,7 +65,8 @@ export default function YoutubeEmbeddedPlayer({
             },
             onReady: () => {
               setInitSuccess(true)
-            }
+            },
+            onError: () => setError(true)
           }
         })
       } catch (error) {
@@ -79,6 +82,10 @@ export default function YoutubeEmbeddedPlayer({
     }
   }, [videoId, display, mustLoad])
 
+  if (error) {
+    return <ExternalLink url={url} />
+  }
+
   if (!mustLoad && !display) {
     return (
       <div