index.tsx raw

   1  import mediaManager from '@/services/media-manager.service'
   2  import { useEffect, useState } from 'react'
   3  import AudioPlayer from '../AudioPlayer'
   4  
   5  export default function BackgroundAudio({ className }: { className?: string }) {
   6    const [backgroundAudioSrc, setBackgroundAudioSrc] = useState<string | null>(null)
   7    const [backgroundAudio, setBackgroundAudio] = useState<React.ReactNode>(null)
   8  
   9    useEffect(() => {
  10      const handlePlayAudioBackground = (event: Event) => {
  11        const { src, time } = (event as CustomEvent).detail
  12        if (backgroundAudioSrc === src) return
  13  
  14        setBackgroundAudio(
  15          <FloatingAudioPlayer key={src + time} src={src} time={time} className={className} />
  16        )
  17        setBackgroundAudioSrc(src)
  18      }
  19  
  20      const handleStopAudioBackground = () => {
  21        setBackgroundAudio(null)
  22      }
  23  
  24      mediaManager.addEventListener('playAudioBackground', handlePlayAudioBackground)
  25      mediaManager.addEventListener('stopAudioBackground', handleStopAudioBackground)
  26  
  27      return () => {
  28        mediaManager.removeEventListener('playAudioBackground', handlePlayAudioBackground)
  29        mediaManager.removeEventListener('stopAudioBackground', handleStopAudioBackground)
  30      }
  31    }, [])
  32  
  33    return backgroundAudio
  34  }
  35  
  36  function FloatingAudioPlayer({
  37    src,
  38    time,
  39    className
  40  }: {
  41    src: string
  42    time?: number
  43    className?: string
  44  }) {
  45    return <AudioPlayer src={src} className={className} startTime={time} autoPlay isMinimized />
  46  }
  47