Siteforge/src/components/EpisodeAudioPlayer.tsx

import { useEffect, useRef, useState } from 'react'
import { sendEvent } from '../analytics'

interface EpisodeAudioPlayerProps {
  src: string
  title?: string
  size?: 'full' | 'compact'
  spotifyUrl?: string
}

function formatTime(seconds: number): string {
  if (!isFinite(seconds) || seconds < 0) return '0:00'
  const m = Math.floor(seconds / 60)
  const s = Math.floor(seconds % 60)
  return `${m}:${String(s).padStart(2, '0')}`
}

function SpotifyLinkIcon({ href }: { href: string }) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noreferrer"
      className="episode-audio-player__spotify-link"
      aria-label="Listen on Spotify"
    >
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424a.623.623 0 01-.857.207c-2.348-1.435-5.304-1.76-8.785-.964a.623.623 0 11-.277-1.215c3.809-.87 7.076-.496 9.712 1.115a.623.623 0 01.207.857zm1.223-2.722a.779.779 0 01-1.072.257c-2.687-1.652-6.785-2.131-9.965-1.166a.78.78 0 01-.973-.519.779.779 0 01.519-.972c3.632-1.102 8.147-.568 11.234 1.328a.779.779 0 01.257 1.072zm.105-2.835C14.692 8.95 9.375 8.775 6.297 9.71a.935.935 0 11-.543-1.79c3.532-1.072 9.404-.865 13.115 1.338a.935.935 0 01-.955 1.609z"/>
      </svg>
    </a>
  )
}

export function EpisodeAudioPlayer({ src, title, size = 'full', spotifyUrl }: EpisodeAudioPlayerProps) {
  const audioRef = useRef<HTMLAudioElement>(null)
  const [playing, setPlaying] = useState(false)
  const [buffering, setBuffering] = useState(false)
  const [currentTime, setCurrentTime] = useState(0)
  const [duration, setDuration] = useState(0)
  const playTrackedRef = useRef(false)
  const listenStartRef = useRef<number | null>(null)
  const totalListenSecondsRef = useRef(0)

  function flushListenTime() {
    if (listenStartRef.current !== null && title) {
      const seconds = Math.round((Date.now() - listenStartRef.current) / 1000)
      if (seconds > 1) {
        totalListenSecondsRef.current += seconds
        sendEvent('audio_listen_time', { title, seconds })
      }
      listenStartRef.current = null
    }
  }

  useEffect(() => {
    const audio = audioRef.current
    if (!audio) return
    const onTimeUpdate = () => setCurrentTime(audio.currentTime)
    const onDurationChange = () => setDuration(audio.duration)
    const onEnded = () => {
      setPlaying(false)
      setBuffering(false)
      flushListenTime()
      if (title) sendEvent('audio_completion', { title })
    }
    const onWaiting = () => setBuffering(true)
    const onCanPlay = () => setBuffering(false)
    audio.addEventListener('timeupdate', onTimeUpdate)
    audio.addEventListener('durationchange', onDurationChange)
    audio.addEventListener('loadedmetadata', onDurationChange)
    audio.addEventListener('ended', onEnded)
    audio.addEventListener('waiting', onWaiting)
    audio.addEventListener('canplay', onCanPlay)
    return () => {
      audio.removeEventListener('timeupdate', onTimeUpdate)
      audio.removeEventListener('durationchange', onDurationChange)
      audio.removeEventListener('loadedmetadata', onDurationChange)
      audio.removeEventListener('ended', onEnded)
      audio.removeEventListener('waiting', onWaiting)
      audio.removeEventListener('canplay', onCanPlay)
      flushListenTime()
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [src])

  function togglePlay() {
    const audio = audioRef.current
    if (!audio) return
    if (playing) {
      audio.pause()
      setPlaying(false)
      flushListenTime()
      if (title) sendEvent('audio_pause', { title })
    } else {
      audio.play().then(() => {
        setPlaying(true)
        listenStartRef.current = Date.now()
        if (!playTrackedRef.current && title) {
          playTrackedRef.current = true
          fetch('/api/analytics/play', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ title }),
          }).catch(() => {})
        }
      }).catch(() => {})
    }
  }

  function seek(e: React.MouseEvent<HTMLDivElement>) {
    const audio = audioRef.current
    if (!audio || !duration) return
    const rect = e.currentTarget.getBoundingClientRect()
    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
    audio.currentTime = pct * duration
    setCurrentTime(pct * duration)
  }

  const pct = duration > 0 ? (currentTime / duration) * 100 : 0
  const isCompact = size === 'compact'

  return (
    <div className={`episode-audio-player ${isCompact ? 'episode-audio-player--compact' : ''}`}>
      <audio ref={audioRef} src={src} preload="metadata" />

      <div className="episode-audio-player__inner">
        <img
          src="/images/podcast-art.jpeg"
          alt="Verse by Verse with Nate"
          className="episode-audio-player__art"
        />

        <div className="episode-audio-player__body">
          {!isCompact && (
            <div className="episode-audio-player__meta">
              <span className="episode-audio-player__show-name">Verse by Verse with Nate</span>
              {spotifyUrl && <SpotifyLinkIcon href={spotifyUrl} />}
            </div>
          )}
          {title && (
            <p className="episode-audio-player__title">{title}</p>
          )}

          <div className="episode-audio-player__controls">
            <button
              className={`episode-audio-player__play${buffering ? ' episode-audio-player__play--buffering' : ''}`}
              onClick={togglePlay}
              aria-label={playing ? 'Pause' : 'Play'}
            >
              {playing
                ? <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
                : <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="5,3 19,12 5,21"/></svg>
              }
            </button>

            <div className="episode-audio-player__track">
              <div
                className="episode-audio-player__bar"
                onClick={seek}
                role="slider"
                aria-label="Seek"
                aria-valuenow={Math.round(currentTime)}
                aria-valuemin={0}
                aria-valuemax={Math.round(duration)}
                tabIndex={0}
                onKeyDown={e => {
                  const audio = audioRef.current
                  if (!audio) return
                  if (e.key === 'ArrowRight') audio.currentTime = Math.min(duration, audio.currentTime + 10)
                  if (e.key === 'ArrowLeft') audio.currentTime = Math.max(0, audio.currentTime - 10)
                }}
              >
                <div className="episode-audio-player__fill" style={{ width: `${pct}%` }} />
                <div className="episode-audio-player__thumb" style={{ left: `${pct}%` }} />
              </div>
              <div className="episode-audio-player__times">
                <span>{formatTime(currentTime)}</span>
                <span>{formatTime(duration)}</span>
              </div>
            </div>

            {isCompact && spotifyUrl && <SpotifyLinkIcon href={spotifyUrl} />}
          </div>
        </div>
      </div>
    </div>
  )
}