feat: improve media playback experience

src/components/BackgroundAudio/index.tsx

@@ -0,0 +1,46 @@
+import mediaManager from '@/services/media-manager.service'
+import { useEffect, useState } from 'react'
+import AudioPlayer from '../AudioPlayer'
+
+export default function BackgroundAudio({ className }: { className?: string }) {
+  const [backgroundAudioSrc, setBackgroundAudioSrc] = useState<string | null>(null)
+  const [backgroundAudio, setBackgroundAudio] = useState<React.ReactNode>(null)
+
+  useEffect(() => {
+    const handlePlayAudioBackground = (event: Event) => {
+      const { src, time } = (event as CustomEvent).detail
+      if (backgroundAudioSrc === src) return
+
+      setBackgroundAudio(
+        <FloatingAudioPlayer key={src + time} src={src} time={time} className={className} />
+      )
+      setBackgroundAudioSrc(src)
+    }
+
+    const handleStopAudioBackground = () => {
+      setBackgroundAudio(null)
+    }
+
+    mediaManager.addEventListener('playAudioBackground', handlePlayAudioBackground)
+    mediaManager.addEventListener('stopAudioBackground', handleStopAudioBackground)
+
+    return () => {
+      mediaManager.removeEventListener('playAudioBackground', handlePlayAudioBackground)
+      mediaManager.removeEventListener('stopAudioBackground', handleStopAudioBackground)
+    }
+  }, [])
+
+  return backgroundAudio
+}
+
+function FloatingAudioPlayer({
+  src,
+  time,
+  className
+}: {
+  src: string
+  time?: number
+  className?: string
+}) {
+  return <AudioPlayer src={src} className={className} startTime={time} autoPlay isMinimized />
+}