notes upgrade

src/components/EpisodeAudioPlayer.tsx

@@ -34,6 +34,7 @@ function SpotifyLinkIcon({ href }: { href: string }) {
 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)
@@ -58,18 +59,25 @@ export function EpisodeAudioPlayer({ src, title, size = 'full', spotifyUrl }: Ep
     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
@@ -135,7 +143,7 @@ export function EpisodeAudioPlayer({ src, title, size = 'full', spotifyUrl }: Ep
 
           <div className="episode-audio-player__controls">
             <button
-              className="episode-audio-player__play"
+              className={`episode-audio-player__play${buffering ? ' episode-audio-player__play--buffering' : ''}`}
               onClick={togglePlay}
               aria-label={playing ? 'Pause' : 'Play'}
             >