Function LandingAudioPlayer

landing/src/components/LandingAudioPlayer.tsx:65–298

({
  audioUrl,
  title,
  playing,
  muted,
  onFinish,
  onClose,
}: LandingAudioPlayerProps)

}

export function LandingAudioPlayer({
  audioUrl,
  title,
  playing,
  muted,
  onFinish,
  onClose,
}: LandingAudioPlayerProps) {
  const waveformRef = useRef<HTMLDivElement>(null);
  const wavesurferRef = useRef<WaveSurfer | null>(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [volume, setVolume] = useState(0.75);
  const [isLooping, setIsLooping] = useState(false);
  const [isReady, setIsReady] = useState(false);
  const onFinishRef = useRef(onFinish);
  onFinishRef.current = onFinish;
  const playingRef = useRef(playing);
  playingRef.current = playing;
  const mutedRef = useRef(muted);
  mutedRef.current = muted;

  // Initialize WaveSurfer
  useEffect(() => {
    const initWaveSurfer = () => {
      const container = waveformRef.current;
      if (!container) {
        setTimeout(initWaveSurfer, 50);
        return;
      }

      const rect = container.getBoundingClientRect();
      if (rect.width === 0 || rect.height === 0) {
        setTimeout(initWaveSurfer, 50);
        return;
      }

      // Clean up existing instance
      if (wavesurferRef.current) {
        wavesurferRef.current.destroy();
        wavesurferRef.current = null;
      }

      const root = document.documentElement;
      const getCSSVar = (varName: string) => {
        const value = getComputedStyle(root).getPropertyValue(varName).trim();
        return value ? `hsl(${value})` : '';
      };

      const ws = WaveSurfer.create({
        container,
        waveColor: getCSSVar('--muted'),
        progressColor: getCSSVar('--accent'),
        cursorColor: getCSSVar('--accent'),
        barWidth: 2,
        barRadius: 2,
        height: 80,