@stargate91/pill-player 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1702 @@
+// src/components/PillPlayer.tsx
+import { useState as useState4, useEffect as useEffect7, useRef as useRef7, useCallback as useCallback7 } from "react";
+
+// src/types/index.ts
+var DEFAULT_PILL_LABELS = {
+  badge: "AUDIO PLAYER",
+  openPlayer: "Open player",
+  closePlayer: "Close player",
+  play: "Play",
+  pause: "Pause",
+  prevTrack: "Previous",
+  nextTrack: "Next",
+  mute: "Mute",
+  unmute: "Unmute",
+  directPlayHint: "Stream loaded. Use controls to play or pause.",
+  listenExternal: "Open stream",
+  selectTrack: "PLAYLIST",
+  frequenciesActive: "PLAYING",
+  frequenciesStandby: "PAUSED",
+  spectrumHeader: "EQUALIZER",
+  spectrumDsp: "",
+  subtitle: "Audio"
+};
+
+// src/hooks/useAudioPlayer.ts
+import { useState as useState2, useEffect as useEffect5, useRef as useRef5, useCallback as useCallback5, useMemo } from "react";
+
+// src/utils/youtube.ts
+function extractYouTubeId(urlOrId) {
+  if (!urlOrId) return null;
+  const trimmed = urlOrId.trim();
+  if (/^[a-zA-Z0-9_-]{11}$/.test(trimmed)) {
+    return trimmed;
+  }
+  const match = trimmed.match(
+    /(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=|shorts\/))([a-zA-Z0-9_-]{11})/
+  );
+  return match ? match[1] : null;
+}
+
+// src/utils/time.ts
+function formatTime(totalSeconds) {
+  if (isNaN(totalSeconds) || totalSeconds <= 0) return "00:00";
+  const h = Math.floor(totalSeconds / 3600);
+  const m = Math.floor(totalSeconds % 3600 / 60);
+  const s = Math.floor(totalSeconds % 60);
+  if (h > 0) {
+    return h.toString().padStart(2, "0") + ":" + m.toString().padStart(2, "0") + ":" + s.toString().padStart(2, "0");
+  }
+  return m.toString().padStart(2, "0") + ":" + s.toString().padStart(2, "0");
+}
+function parseDurationToSeconds(duration) {
+  if (!duration) return 0;
+  const parts = duration.split(":");
+  if (parts.length === 2) {
+    const min = parseInt(parts[0], 10);
+    const sec = parseInt(parts[1], 10);
+    if (!isNaN(min) && !isNaN(sec)) return min * 60 + sec;
+  }
+  if (duration.includes("min")) {
+    const parsed = parseInt(duration, 10);
+    if (!isNaN(parsed)) return parsed * 60;
+  }
+  const directNum = parseFloat(duration);
+  return !isNaN(directNum) ? directNum : 0;
+}
+function calculateBpmTiming(bpm) {
+  const numericBpm = typeof bpm === "number" ? bpm : parseInt(String(bpm || "174").replace(/[^0-9]/g, ""), 10) || 174;
+  const beatMs = Math.round(60 / numericBpm * 1e3);
+  const halfBeatMs = Math.round(beatMs / 2);
+  const twoBeatsMs = Math.round(beatMs * 2);
+  const barMs = Math.round(beatMs * 4);
+  return { numericBpm, beatMs, halfBeatMs, twoBeatsMs, barMs };
+}
+
+// src/engines/html5Engine.ts
+import { useState, useRef, useEffect, useCallback } from "react";
+function useHtml5Engine(callbacks) {
+  const [frequencyData, setFrequencyData] = useState(new Array(16).fill(0));
+  const audioRef = useRef(null);
+  const audioContextRef = useRef(null);
+  const analyserRef = useRef(null);
+  const animFrameRef = useRef(null);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const audio = new Audio();
+    audio.preload = "metadata";
+    audioRef.current = audio;
+    audio.ontimeupdate = () => {
+      callbacks.onTimeUpdate(audio.currentTime);
+    };
+    audio.onloadedmetadata = () => {
+      callbacks.onDurationChange(audio.duration || 0);
+    };
+    audio.ondurationchange = () => {
+      callbacks.onDurationChange(audio.duration || 0);
+    };
+    audio.onplay = () => {
+      callbacks.onPlay();
+      if (audioContextRef.current?.state === "suspended") {
+        audioContextRef.current.resume().catch(() => {
+        });
+      }
+    };
+    audio.onpause = () => {
+      callbacks.onPause();
+      setFrequencyData(new Array(16).fill(0));
+    };
+    audio.onended = () => {
+      callbacks.onEnded();
+    };
+    const updateFrequencies = () => {
+      if (analyserRef.current) {
+        const bufferLength = analyserRef.current.frequencyBinCount;
+        const dataArray = new Uint8Array(bufferLength);
+        analyserRef.current.getByteFrequencyData(dataArray);
+        const bands = 16;
+        const step = Math.max(1, Math.floor(bufferLength / bands));
+        const normalized = new Array(bands).fill(0).map((_, i) => {
+          const val = dataArray[i * step] || 0;
+          return val / 255;
+        });
+        setFrequencyData(normalized);
+      }
+      animFrameRef.current = requestAnimationFrame(updateFrequencies);
+    };
+    animFrameRef.current = requestAnimationFrame(updateFrequencies);
+    return () => {
+      if (animFrameRef.current) {
+        cancelAnimationFrame(animFrameRef.current);
+      }
+      audio.pause();
+      audio.src = "";
+      if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+        audioContextRef.current.close().catch(() => {
+        });
+      }
+    };
+  }, [callbacks]);
+  const initAudioContext = useCallback(() => {
+    if (!audioContextRef.current && audioRef.current && typeof window !== "undefined") {
+      try {
+        const AudioCtx = window.AudioContext || window.webkitAudioContext;
+        if (AudioCtx) {
+          const ctx = new AudioCtx();
+          const source = ctx.createMediaElementSource(audioRef.current);
+          const analyser = ctx.createAnalyser();
+          analyser.fftSize = 64;
+          source.connect(analyser);
+          analyser.connect(ctx.destination);
+          audioContextRef.current = ctx;
+          analyserRef.current = analyser;
+        }
+      } catch {
+      }
+    }
+  }, []);
+  const loadTrack = useCallback((src, autoPlay = true) => {
+    if (!audioRef.current) return;
+    audioRef.current.src = src;
+    if (autoPlay) {
+      initAudioContext();
+      audioRef.current.play().catch(() => {
+      });
+    }
+  }, [initAudioContext]);
+  const play = useCallback(() => {
+    initAudioContext();
+    audioRef.current?.play().catch(() => {
+    });
+  }, [initAudioContext]);
+  const pause = useCallback(() => {
+    audioRef.current?.pause();
+    setFrequencyData(new Array(16).fill(0));
+  }, []);
+  const seek = useCallback((seconds) => {
+    if (audioRef.current) {
+      audioRef.current.currentTime = seconds;
+    }
+  }, []);
+  const setMute = useCallback((muted) => {
+    if (audioRef.current) {
+      audioRef.current.muted = muted;
+    }
+  }, []);
+  return {
+    audioRef,
+    frequencyData,
+    hasLiveFrequency: frequencyData.some((v) => v > 0.05),
+    loadTrack,
+    play,
+    pause,
+    seek,
+    setMute,
+    initAudioContext
+  };
+}
+
+// src/engines/mixcloudEngine.ts
+import { useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+var ALLOWED_ORIGINS = /* @__PURE__ */ new Set([
+  "https://player-widget.mixcloud.com",
+  "https://www.mixcloud.com",
+  "https://widget.mixcloud.com"
+]);
+function useMixcloudEngine(isLoaded, isMixcloud, callbacks) {
+  const iframeRef = useRef2(null);
+  const widgetRef = useRef2(null);
+  const isWidgetReadyRef = useRef2(false);
+  const pendingPlayRef = useRef2(false);
+  const setupMixcloudWidget = useCallback2(() => {
+    if (!iframeRef.current || typeof window === "undefined" || !window.Mixcloud) return;
+    try {
+      const widget = window.Mixcloud.PlayerWidget(iframeRef.current);
+      widgetRef.current = widget;
+      widget.ready.then((resolved) => {
+        const active = resolved || widget;
+        widgetRef.current = active;
+        isWidgetReadyRef.current = true;
+        active.events?.play?.on?.(() => {
+          callbacks.onPlay();
+          active.getDuration?.().then((dur) => {
+            if (typeof dur === "number" && dur > 0) callbacks.onDurationChange(dur);
+          }).catch(() => {
+          });
+        });
+        active.events?.pause?.on?.(() => callbacks.onPause());
+        active.events?.progress?.on?.((pos, dur) => {
+          callbacks.onPlay();
+          if (typeof pos === "number") callbacks.onTimeUpdate(pos);
+          if (typeof dur === "number" && dur > 0) callbacks.onDurationChange(dur);
+        });
+        active.events?.ended?.on?.(() => callbacks.onEnded());
+        if (pendingPlayRef.current) {
+          pendingPlayRef.current = false;
+          active.play?.().catch(() => {
+          });
+        }
+      }).catch(() => {
+      });
+    } catch {
+    }
+  }, [callbacks]);
+  useEffect2(() => {
+    if (typeof window === "undefined" || !isLoaded || !isMixcloud) return;
+    if (window.Mixcloud) {
+      setupMixcloudWidget();
+      return;
+    }
+    let script = document.getElementById("mixcloud-widget-api");
+    if (!script) {
+      script = document.createElement("script");
+      script.id = "mixcloud-widget-api";
+      script.src = "https://widget.mixcloud.com/media/js/widgetApi.js";
+      script.async = true;
+      document.body.appendChild(script);
+    }
+    const onLoad = () => setupMixcloudWidget();
+    script.addEventListener("load", onLoad);
+    return () => script?.removeEventListener("load", onLoad);
+  }, [isLoaded, isMixcloud, setupMixcloudWidget]);
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    const handleMessage = (event) => {
+      if (!ALLOWED_ORIGINS.has(event.origin)) return;
+      try {
+        let data = event.data;
+        if (typeof data === "string" && (data.includes("play") || data.includes("pause") || data.includes("ended"))) {
+          data = JSON.parse(data);
+        }
+        if (typeof data === "object" && data !== null) {
+          const eventName = data.widgetEvent || data.event || data.type;
+          if (eventName === "play") callbacks.onPlay();
+          else if (eventName === "pause") callbacks.onPause();
+          else if (eventName === "ended") callbacks.onEnded();
+        }
+      } catch {
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [callbacks]);
+  useEffect2(() => {
+    if (!isLoaded || !isMixcloud) return;
+    const interval = setInterval(() => {
+      const widget = widgetRef.current;
+      if (widget && typeof widget.getIsPaused === "function") {
+        widget.getIsPaused().then((isPaused) => {
+          if (isPaused) callbacks.onPause();
+          else callbacks.onPlay();
+        }).catch(() => {
+        });
+        if (typeof widget.getPosition === "function") {
+          widget.getPosition().then((pos) => {
+            if (typeof pos === "number") callbacks.onTimeUpdate(pos);
+          }).catch(() => {
+          });
+        }
+      }
+    }, 800);
+    return () => clearInterval(interval);
+  }, [isLoaded, isMixcloud, callbacks]);
+  const loadTrack = useCallback2((feed, autoPlay = true) => {
+    const widget = widgetRef.current;
+    if (widget?.load) {
+      widget.load(feed, autoPlay).catch(() => {
+      });
+      if (autoPlay) callbacks.onPlay();
+    } else {
+      pendingPlayRef.current = autoPlay;
+      if (autoPlay) callbacks.onPlay();
+    }
+  }, [callbacks]);
+  const play = useCallback2(() => {
+    const widget = widgetRef.current;
+    if (widget?.play) {
+      widget.play().catch(() => {
+      });
+      callbacks.onPlay();
+    } else {
+      pendingPlayRef.current = true;
+      callbacks.onPlay();
+    }
+  }, [callbacks]);
+  const pause = useCallback2(() => {
+    const widget = widgetRef.current;
+    if (widget?.pause) {
+      widget.pause().catch(() => {
+      });
+      callbacks.onPause();
+    }
+  }, [callbacks]);
+  const seek = useCallback2((seconds) => {
+    const widget = widgetRef.current;
+    if (widget && typeof widget.seek === "function") {
+      widget.seek(seconds).catch(() => {
+      });
+    }
+  }, []);
+  const setMute = useCallback2((muted) => {
+    const widget = widgetRef.current;
+    if (widget?.setVolume) {
+      widget.setVolume(muted ? 0 : 1).catch(() => {
+      });
+    }
+  }, []);
+  return {
+    iframeRef,
+    widgetRef,
+    setupMixcloudWidget,
+    loadTrack,
+    play,
+    pause,
+    seek,
+    setMute
+  };
+}
+
+// src/engines/soundCloudEngine.ts
+import { useRef as useRef3, useEffect as useEffect3, useCallback as useCallback3 } from "react";
+function useSoundCloudEngine(isLoaded, isSoundCloud, callbacks) {
+  const scIframeRef = useRef3(null);
+  const scWidgetRef = useRef3(null);
+  const pendingPlayRef = useRef3(false);
+  const setupSoundCloudWidget = useCallback3(() => {
+    if (!scIframeRef.current || typeof window === "undefined" || !window.SC?.Widget) return;
+    try {
+      const widget = window.SC.Widget(scIframeRef.current);
+      scWidgetRef.current = widget;
+      const events = window.SC?.Widget?.Events;
+      if (!events) return;
+      widget.bind(events.READY, () => {
+        widget.getDuration?.((ms) => {
+          if (ms) callbacks.onDurationChange(ms / 1e3);
+        });
+        widget.bind(events.PLAY, () => {
+          callbacks.onPlay();
+          widget.getDuration?.((ms) => {
+            if (ms) callbacks.onDurationChange(ms / 1e3);
+          });
+        });
+        widget.bind(events.PAUSE, () => callbacks.onPause());
+        widget.bind(events.FINISH, () => callbacks.onEnded());
+        widget.bind(events.PLAY_PROGRESS, (data) => {
+          if (data && typeof data.currentPosition === "number") {
+            callbacks.onTimeUpdate(data.currentPosition / 1e3);
+          }
+          if (data && typeof data.relativePosition === "number" && data.relativePosition > 0 && typeof data.currentPosition === "number") {
+            const calculatedDuration = data.currentPosition / data.relativePosition / 1e3;
+            if (!isNaN(calculatedDuration) && isFinite(calculatedDuration) && calculatedDuration > 0) {
+              callbacks.onDurationChange(calculatedDuration);
+            }
+          }
+        });
+        if (pendingPlayRef.current) {
+          pendingPlayRef.current = false;
+          widget.play();
+        }
+      });
+    } catch {
+    }
+  }, [callbacks]);
+  useEffect3(() => {
+    if (typeof window === "undefined" || !isLoaded || !isSoundCloud) return;
+    if (window.SC?.Widget) {
+      setupSoundCloudWidget();
+      return;
+    }
+    let script = document.getElementById("soundcloud-widget-api");
+    if (!script) {
+      script = document.createElement("script");
+      script.id = "soundcloud-widget-api";
+      script.src = "https://w.soundcloud.com/player/api.js";
+      script.async = true;
+      document.body.appendChild(script);
+    }
+    const onLoad = () => setupSoundCloudWidget();
+    script.addEventListener("load", onLoad);
+    return () => script?.removeEventListener("load", onLoad);
+  }, [isLoaded, isSoundCloud, setupSoundCloudWidget]);
+  const loadTrack = useCallback3((url, autoPlay = true) => {
+    const widget = scWidgetRef.current;
+    if (widget?.load) {
+      widget.load(url, { auto_play: autoPlay });
+      if (autoPlay) callbacks.onPlay();
+    } else {
+      pendingPlayRef.current = autoPlay;
+      if (autoPlay) callbacks.onPlay();
+    }
+  }, [callbacks]);
+  const play = useCallback3(() => {
+    const widget = scWidgetRef.current;
+    if (widget?.play) {
+      widget.play();
+      callbacks.onPlay();
+    } else {
+      pendingPlayRef.current = true;
+      callbacks.onPlay();
+    }
+  }, [callbacks]);
+  const pause = useCallback3(() => {
+    const widget = scWidgetRef.current;
+    if (widget?.pause) {
+      widget.pause();
+      callbacks.onPause();
+    }
+  }, [callbacks]);
+  const seek = useCallback3((seconds) => {
+    const widget = scWidgetRef.current;
+    if (widget?.seekTo) {
+      widget.seekTo(seconds * 1e3);
+    }
+  }, []);
+  const setMute = useCallback3((muted) => {
+    const widget = scWidgetRef.current;
+    if (widget?.setVolume) {
+      widget.setVolume(muted ? 0 : 100);
+    }
+  }, []);
+  return {
+    scIframeRef,
+    scWidgetRef,
+    setupSoundCloudWidget,
+    loadTrack,
+    play,
+    pause,
+    seek,
+    setMute
+  };
+}
+
+// src/engines/youTubeEngine.ts
+import { useRef as useRef4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
+function useYouTubeEngine(isLoaded, isYouTube, isPlaying, isMuted, callbacks) {
+  const ytIframeRef = useRef4(null);
+  const ytPlayerRef = useRef4(null);
+  const pendingPlayRef = useRef4(false);
+  const setupYouTubePlayer = useCallback4(() => {
+    if (!ytIframeRef.current || typeof window === "undefined" || !window.YT?.Player) return;
+    try {
+      if (ytPlayerRef.current) return;
+      new window.YT.Player(ytIframeRef.current, {
+        events: {
+          onReady: (event) => {
+            ytPlayerRef.current = event.target;
+            const dur = event.target.getDuration?.();
+            if (dur && typeof dur === "number" && dur > 0) {
+              callbacks.onDurationChange(dur);
+            }
+            if (isMuted) {
+              event.target.mute?.();
+            }
+            if (pendingPlayRef.current) {
+              pendingPlayRef.current = false;
+              event.target.playVideo?.();
+            }
+          },
+          onStateChange: (event) => {
+            if (event.data === 1) {
+              callbacks.onPlay();
+              const dur = event.target.getDuration?.();
+              if (dur && typeof dur === "number" && dur > 0) {
+                callbacks.onDurationChange(dur);
+              }
+            } else if (event.data === 2) {
+              callbacks.onPause();
+            } else if (event.data === 0) {
+              callbacks.onEnded();
+            }
+          }
+        }
+      });
+    } catch {
+    }
+  }, [callbacks, isMuted]);
+  useEffect4(() => {
+    if (typeof window === "undefined" || !isLoaded || !isYouTube) return;
+    if (window.YT && window.YT.Player) {
+      setupYouTubePlayer();
+      return;
+    }
+    let script = document.getElementById("youtube-iframe-api");
+    if (!script) {
+      script = document.createElement("script");
+      script.id = "youtube-iframe-api";
+      script.src = "https://www.youtube.com/iframe_api";
+      script.async = true;
+      document.body.appendChild(script);
+    }
+    const prevOnReady = window.onYouTubeIframeAPIReady;
+    window.onYouTubeIframeAPIReady = () => {
+      prevOnReady?.();
+      setupYouTubePlayer();
+    };
+  }, [isLoaded, isYouTube, setupYouTubePlayer]);
+  useEffect4(() => {
+    if (!isYouTube || !isPlaying || !ytPlayerRef.current) return;
+    const interval = setInterval(() => {
+      const player = ytPlayerRef.current;
+      if (player && typeof player.getCurrentTime === "function") {
+        try {
+          const time = player.getCurrentTime();
+          if (typeof time === "number") callbacks.onTimeUpdate(time);
+          const dur = player.getDuration?.();
+          if (typeof dur === "number" && dur > 0) callbacks.onDurationChange(dur);
+        } catch {
+        }
+      }
+    }, 400);
+    return () => clearInterval(interval);
+  }, [isYouTube, isPlaying, callbacks]);
+  const loadTrack = useCallback4((ytId, autoPlay = true) => {
+    const player = ytPlayerRef.current;
+    if (player && typeof player.loadVideoById === "function") {
+      player.loadVideoById(ytId);
+      if (autoPlay) callbacks.onPlay();
+    } else {
+      pendingPlayRef.current = autoPlay;
+      if (autoPlay) callbacks.onPlay();
+    }
+  }, [callbacks]);
+  const play = useCallback4(() => {
+    const player = ytPlayerRef.current;
+    if (player?.playVideo) {
+      player.playVideo();
+      callbacks.onPlay();
+    } else {
+      pendingPlayRef.current = true;
+      callbacks.onPlay();
+    }
+  }, [callbacks]);
+  const pause = useCallback4(() => {
+    const player = ytPlayerRef.current;
+    if (player?.pauseVideo) {
+      player.pauseVideo();
+      callbacks.onPause();
+    }
+  }, [callbacks]);
+  const seek = useCallback4((seconds) => {
+    ytPlayerRef.current?.seekTo?.(seconds, true);
+  }, []);
+  const setMute = useCallback4((muted) => {
+    if (ytPlayerRef.current) {
+      if (muted) ytPlayerRef.current.mute?.();
+      else ytPlayerRef.current.unMute?.();
+    }
+  }, []);
+  return {
+    ytIframeRef,
+    ytPlayerRef,
+    setupYouTubePlayer,
+    loadTrack,
+    play,
+    pause,
+    seek,
+    setMute
+  };
+}
+
+// src/hooks/useAudioPlayer.ts
+var STORAGE_TRACK_KEY = "pill_player_track_index";
+function useAudioPlayer({
+  tracks,
+  persistState = true,
+  onTrackChange,
+  onPlayStateChange
+}) {
+  const [currentTrackIndex, setCurrentTrackIndex] = useState2(0);
+  const [isPlaying, setIsPlaying] = useState2(false);
+  const [isMuted, setIsMuted] = useState2(false);
+  const [isLoaded, setIsLoaded] = useState2(false);
+  const [currentTime, setCurTime] = useState2(0);
+  const [duration, setDur] = useState2(0);
+  const currentTrack = tracks[currentTrackIndex] || tracks[0];
+  const youTubeId = extractYouTubeId(
+    currentTrack?.youtube || (currentTrack?.src && currentTrack.src.includes("youtube.com") ? currentTrack.src : void 0)
+  );
+  const isYouTube = Boolean(youTubeId);
+  const soundCloudUrl = currentTrack?.soundcloud || (currentTrack?.src && currentTrack.src.includes("soundcloud.com") ? currentTrack.src : "");
+  const isSoundCloud = Boolean(soundCloudUrl);
+  const isMixcloud = Boolean(currentTrack?.feed);
+  const isHtmlAudio = Boolean(currentTrack?.src && !currentTrack.src.includes("soundcloud.com") && !currentTrack.src.includes("youtube.com"));
+  useEffect5(() => {
+    if (!persistState || typeof window === "undefined") return;
+    try {
+      const stored = localStorage.getItem(STORAGE_TRACK_KEY);
+      if (stored !== null) {
+        const parsed = parseInt(stored, 10);
+        if (!isNaN(parsed) && parsed >= 0 && parsed < tracks.length) {
+          setCurrentTrackIndex(parsed);
+        }
+      }
+    } catch {
+    }
+  }, [persistState, tracks.length]);
+  const nextTrackRef = useRef5(() => {
+  });
+  const callbacks = useMemo(() => ({
+    onPlay: () => {
+      setIsPlaying(true);
+      onPlayStateChange?.(true);
+    },
+    onPause: () => {
+      setIsPlaying(false);
+      onPlayStateChange?.(false);
+    },
+    onTimeUpdate: (time) => {
+      setCurTime(time);
+    },
+    onDurationChange: (dur) => {
+      setDur(dur);
+    },
+    onEnded: () => {
+      nextTrackRef.current();
+    }
+  }), [onPlayStateChange]);
+  const html5 = useHtml5Engine(callbacks);
+  const mixcloud = useMixcloudEngine(isLoaded, isMixcloud, callbacks);
+  const soundCloud = useSoundCloudEngine(isLoaded, isSoundCloud, callbacks);
+  const youTube = useYouTubeEngine(isLoaded, isYouTube, isPlaying, isMuted, callbacks);
+  const handleSelectTrack = useCallback5((index) => {
+    if (index < 0 || index >= tracks.length) return;
+    setCurrentTrackIndex(index);
+    if (persistState && typeof window !== "undefined") {
+      try {
+        localStorage.setItem(STORAGE_TRACK_KEY, String(index));
+      } catch {
+      }
+    }
+    if (!isLoaded) {
+      setIsLoaded(true);
+    }
+    const target = tracks[index];
+    if (target) {
+      setCurTime(0);
+      setDur(parseDurationToSeconds(target.duration));
+      onTrackChange?.(target, index);
+      const targetYtId = extractYouTubeId(target.youtube);
+      const targetScUrl = target.soundcloud || (target.src && target.src.includes("soundcloud.com") ? target.src : "");
+      const targetFeed = target.feed;
+      const targetSrc = target.src && !target.src.includes("soundcloud.com") && !target.src.includes("youtube.com") ? target.src : "";
+      if (!targetSrc) html5.pause();
+      if (!targetScUrl) soundCloud.pause();
+      if (!targetFeed) mixcloud.pause();
+      if (!targetYtId) youTube.pause();
+      if (targetYtId) {
+        youTube.loadTrack(targetYtId, true);
+      } else if (targetScUrl) {
+        soundCloud.loadTrack(targetScUrl, true);
+      } else if (targetFeed) {
+        mixcloud.loadTrack(targetFeed, true);
+      } else if (targetSrc) {
+        html5.loadTrack(targetSrc, true);
+      }
+    }
+  }, [tracks, isLoaded, persistState, onTrackChange, html5, soundCloud, mixcloud, youTube]);
+  const handleNextTrack = useCallback5(() => {
+    const nextIdx = currentTrackIndex < tracks.length - 1 ? currentTrackIndex + 1 : 0;
+    handleSelectTrack(nextIdx);
+  }, [currentTrackIndex, tracks.length, handleSelectTrack]);
+  const handlePrevTrack = useCallback5(() => {
+    const prevIdx = currentTrackIndex > 0 ? currentTrackIndex - 1 : tracks.length - 1;
+    handleSelectTrack(prevIdx);
+  }, [currentTrackIndex, tracks.length, handleSelectTrack]);
+  nextTrackRef.current = handleNextTrack;
+  const handleTogglePlay = useCallback5(() => {
+    if (!isLoaded) {
+      setIsLoaded(true);
+    }
+    if (isYouTube) {
+      if (isPlaying) youTube.pause();
+      else youTube.play();
+      return;
+    }
+    if (isSoundCloud) {
+      if (isPlaying) soundCloud.pause();
+      else soundCloud.play();
+      return;
+    }
+    if (isMixcloud) {
+      if (isPlaying) mixcloud.pause();
+      else mixcloud.play();
+      return;
+    }
+    if (isHtmlAudio) {
+      if (isPlaying) html5.pause();
+      else html5.play();
+    }
+  }, [isLoaded, isYouTube, isSoundCloud, isMixcloud, isHtmlAudio, isPlaying, youTube, soundCloud, mixcloud, html5]);
+  const handleSeek = useCallback5((seconds) => {
+    setCurTime(seconds);
+    if (isYouTube) {
+      youTube.seek(seconds);
+      return;
+    }
+    if (isSoundCloud) {
+      soundCloud.seek(seconds);
+      return;
+    }
+    if (isMixcloud) {
+      mixcloud.seek(seconds);
+      return;
+    }
+    if (isHtmlAudio) {
+      html5.seek(seconds);
+    }
+  }, [isYouTube, isSoundCloud, isMixcloud, isHtmlAudio, youTube, soundCloud, mixcloud, html5]);
+  const handleToggleMute = useCallback5(() => {
+    setIsMuted((prev) => {
+      const nextMuted = !prev;
+      html5.setMute(nextMuted);
+      soundCloud.setMute(nextMuted);
+      mixcloud.setMute(nextMuted);
+      youTube.setMute(nextMuted);
+      return nextMuted;
+    });
+  }, [html5, soundCloud, mixcloud, youTube]);
+  const timing = useMemo(() => calculateBpmTiming(currentTrack?.bpm), [currentTrack?.bpm]);
+  const origin = typeof window !== "undefined" && window.location.origin ? encodeURIComponent(window.location.origin) : "";
+  const youTubeIframeSrc = youTubeId ? "https://www.youtube-nocookie.com/embed/" + youTubeId + "?enablejsapi=1&origin=" + origin + "&autoplay=0&controls=0&disablekb=1&fs=0&rel=0&playsinline=1" : "";
+  const soundCloudIframeSrc = soundCloudUrl ? "https://w.soundcloud.com/player/?url=" + encodeURIComponent(soundCloudUrl) + "&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false&visual=false" : "";
+  const iframeSrc = currentTrack?.feed ? "https://player-widget.mixcloud.com/widget/iframe/?feed=" + encodeURIComponent(currentTrack.feed) + "&hide_cover=1&light=0" : "";
+  return {
+    tracks,
+    currentTrack,
+    currentTrackIndex,
+    isPlaying,
+    isMuted,
+    isLoaded,
+    currentTime,
+    duration,
+    handleSeek,
+    iframeRef: mixcloud.iframeRef,
+    scIframeRef: soundCloud.scIframeRef,
+    soundCloudIframeSrc,
+    isSoundCloud,
+    isYouTube,
+    ytIframeRef: youTube.ytIframeRef,
+    youTubeIframeSrc,
+    setupYouTubePlayer: youTube.setupYouTubePlayer,
+    isHtmlAudio,
+    isMixcloud,
+    setupSoundCloudWidget: soundCloud.setupSoundCloudWidget,
+    iframeSrc,
+    frequencyData: html5.frequencyData,
+    hasLiveFrequency: html5.hasLiveFrequency,
+    timing,
+    setIsLoaded,
+    handleTogglePlay,
+    handleToggleMute,
+    handleNextTrack,
+    handlePrevTrack,
+    handleSelectTrack,
+    setupMixcloudWidget: mixcloud.setupMixcloudWidget
+  };
+}
+
+// src/components/Icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PlayIcon({ size = 16, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      stroke: "none",
+      "aria-hidden": "true",
+      ...props,
+      children: /* @__PURE__ */ jsx("polygon", { points: "6 4 20 12 6 20 6 4" })
+    }
+  );
+}
+function PauseIcon({ size = 16, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      stroke: "none",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "5", y: "4", width: "4", height: "16", rx: "1" }),
+        /* @__PURE__ */ jsx("rect", { x: "15", y: "4", width: "4", height: "16", rx: "1" })
+      ]
+    }
+  );
+}
+function SkipBackIcon({ size = 16, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      stroke: "none",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("polygon", { points: "19 20 9 12 19 4 19 20" }),
+        /* @__PURE__ */ jsx("line", { x1: "5", y1: "4", x2: "5", y2: "20", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function SkipForwardIcon({ size = 16, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      stroke: "none",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("polygon", { points: "5 4 15 12 5 20 5 4" }),
+        /* @__PURE__ */ jsx("line", { x1: "19", y1: "4", x2: "19", y2: "20", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function VolumeMuteIcon({ size = 16, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15" }),
+        /* @__PURE__ */ jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15" })
+      ]
+    }
+  );
+}
+function VolumeUpIcon({ size = 16, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 5", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
+        /* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
+      ]
+    }
+  );
+}
+function CloseIcon({ size = 16, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function ExternalLinkIcon({ size = 16, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+        /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+      ]
+    }
+  );
+}
+
+// src/components/AudioTriggerPill.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function AudioTriggerPill({
+  isOpen,
+  isPlaying,
+  currentTrack,
+  labels,
+  icons,
+  onToggleOpen
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      className: "pp-pill-btn",
+      onClick: onToggleOpen,
+      "aria-expanded": isOpen,
+      "aria-label": isOpen ? labels.closePlayer : labels.openPlayer,
+      children: [
+        /* @__PURE__ */ jsxs2("span", { className: "pp-pill-equalizer", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx2("span", { className: "pp-pill-bar" }),
+          /* @__PURE__ */ jsx2("span", { className: "pp-pill-bar" }),
+          /* @__PURE__ */ jsx2("span", { className: "pp-pill-bar" }),
+          /* @__PURE__ */ jsx2("span", { className: "pp-pill-bar" })
+        ] }),
+        /* @__PURE__ */ jsxs2("span", { className: "pp-pill-meta", children: [
+          /* @__PURE__ */ jsx2("span", { className: "pp-pill-code", children: currentTrack?.code || currentTrack?.title || "AUDIO" }),
+          currentTrack?.bpm && /* @__PURE__ */ jsxs2("span", { className: "pp-pill-bpm", children: [
+            "\u2022 ",
+            currentTrack.bpm
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2("span", { className: "pp-pill-icon", "aria-hidden": "true", children: isPlaying ? icons?.pause ?? /* @__PURE__ */ jsx2(PauseIcon, { size: 12 }) : icons?.play ?? /* @__PURE__ */ jsx2(PlayIcon, { size: 12 }) })
+      ]
+    }
+  );
+}
+
+// src/components/SpectrumVisualizer.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SpectrumVisualizer({
+  isPlaying,
+  labels,
+  frequencyData = [],
+  hasLiveFrequency = false
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: "pp-visualizer", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "pp-vis-header", children: [
+      /* @__PURE__ */ jsxs3("span", { className: "pp-vis-title", children: [
+        labels.spectrumHeader,
+        labels.spectrumDsp ? /* @__PURE__ */ jsxs3("span", { className: "pp-vis-dsp", children: [
+          " // ",
+          labels.spectrumDsp
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxs3("span", { className: "pp-vis-status", children: [
+        /* @__PURE__ */ jsx3("span", { className: "pp-status-led " + (isPlaying ? "pp-status-led-active" : "") }),
+        /* @__PURE__ */ jsx3("span", { children: isPlaying ? labels.frequenciesActive : labels.frequenciesStandby })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "pp-vis-stage", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "pp-vis-grid", children: [
+        /* @__PURE__ */ jsx3("span", { className: "pp-grid-line" }),
+        /* @__PURE__ */ jsx3("span", { className: "pp-grid-line" }),
+        /* @__PURE__ */ jsx3("span", { className: "pp-grid-line" })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "pp-vis-bars", children: Array.from({ length: 16 }, (_, i) => {
+        let barStyle;
+        if (!isPlaying) {
+          barStyle = {
+            height: "3px",
+            opacity: 0.25,
+            animation: "none"
+          };
+        } else if (hasLiveFrequency) {
+          const liveVal = frequencyData[i] || 0;
+          barStyle = {
+            height: Math.max(3, Math.round(liveVal * 38)) + "px",
+            opacity: Math.max(0.45, liveVal),
+            animation: "none"
+          };
+        } else {
+          barStyle = void 0;
+        }
+        return /* @__PURE__ */ jsx3("div", { className: "pp-bar-col", children: /* @__PURE__ */ jsx3("span", { className: "pp-spectrum-bar", style: barStyle }) }, "bar-" + i);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "pp-freq-scale", children: [
+      /* @__PURE__ */ jsx3("span", { children: "32Hz" }),
+      /* @__PURE__ */ jsx3("span", { children: "125Hz" }),
+      /* @__PURE__ */ jsx3("span", { children: "500Hz" }),
+      /* @__PURE__ */ jsx3("span", { children: "2kHz" }),
+      /* @__PURE__ */ jsx3("span", { children: "8kHz" }),
+      /* @__PURE__ */ jsx3("span", { children: "16kHz" })
+    ] })
+  ] });
+}
+
+// src/components/AudioPlaylist.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function AudioPlaylist({
+  tracks,
+  currentTrackIndex,
+  labels,
+  onSelectTrack
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: "pp-playlist", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "pp-playlist-header", children: [
+      /* @__PURE__ */ jsx4("span", { children: labels.selectTrack }),
+      /* @__PURE__ */ jsxs4("span", { children: [
+        currentTrackIndex + 1,
+        " / ",
+        tracks.length
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "pp-playlist-list", role: "listbox", "aria-label": labels.selectTrack, children: tracks.map((track, idx) => {
+      const isSelected = idx === currentTrackIndex;
+      return /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": isSelected,
+          className: "pp-track-item " + (isSelected ? "pp-track-item-active" : ""),
+          onClick: () => onSelectTrack(idx),
+          children: [
+            /* @__PURE__ */ jsxs4("div", { className: "pp-track-item-left", children: [
+              /* @__PURE__ */ jsx4("span", { className: "pp-track-item-code", children: track.code || "#" + (idx + 1) }),
+              /* @__PURE__ */ jsx4("span", { className: "pp-track-item-title", children: track.title })
+            ] }),
+            /* @__PURE__ */ jsxs4("div", { className: "pp-track-item-right", children: [
+              track.bpm && /* @__PURE__ */ jsx4("span", { children: track.bpm }),
+              track.duration && /* @__PURE__ */ jsx4("span", { children: track.duration })
+            ] })
+          ]
+        },
+        track.id || "track-" + idx
+      );
+    }) })
+  ] });
+}
+
+// src/components/AudioSeekbar.tsx
+import { useState as useState3, useRef as useRef6, useCallback as useCallback6, useEffect as useEffect6 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function AudioSeekbar({
+  currentTime,
+  duration,
+  onSeek
+}) {
+  const [isDragging, setIsDragging] = useState3(false);
+  const [dragProgress, setDragProgress] = useState3(0);
+  const trackRef = useRef6(null);
+  const progress = duration > 0 ? Math.min(1, Math.max(0, isDragging ? dragProgress : currentTime / duration)) : 0;
+  const calculateRatio = useCallback6((clientX) => {
+    if (!trackRef.current) return 0;
+    const rect = trackRef.current.getBoundingClientRect();
+    const pos = clientX - rect.left;
+    return Math.min(1, Math.max(0, pos / rect.width));
+  }, []);
+  const handlePointerDown = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+    const ratio = calculateRatio(e.clientX);
+    setDragProgress(ratio);
+  };
+  const handleTouchStart = (e) => {
+    if (e.touches[0]) {
+      setIsDragging(true);
+      const ratio = calculateRatio(e.touches[0].clientX);
+      setDragProgress(ratio);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (duration <= 0) return;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      onSeek(Math.min(duration, currentTime + 5));
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      onSeek(Math.max(0, currentTime - 5));
+    } else if (e.key === "PageUp") {
+      e.preventDefault();
+      onSeek(Math.min(duration, currentTime + 30));
+    } else if (e.key === "PageDown") {
+      e.preventDefault();
+      onSeek(Math.max(0, currentTime - 30));
+    }
+  };
+  useEffect6(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e) => {
+      const ratio = calculateRatio(e.clientX);
+      setDragProgress(ratio);
+    };
+    const handleTouchMove = (e) => {
+      if (e.touches[0]) {
+        const ratio = calculateRatio(e.touches[0].clientX);
+        setDragProgress(ratio);
+      }
+    };
+    const handleRelease = (e) => {
+      let clientX = 0;
+      if ("clientX" in e) {
+        clientX = e.clientX;
+      } else if (e.changedTouches && e.changedTouches[0]) {
+        clientX = e.changedTouches[0].clientX;
+      }
+      const ratio = calculateRatio(clientX);
+      setIsDragging(false);
+      if (duration > 0) {
+        onSeek(ratio * duration);
+      }
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleRelease);
+    window.addEventListener("touchmove", handleTouchMove);
+    window.addEventListener("touchend", handleRelease);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleRelease);
+      window.removeEventListener("touchmove", handleTouchMove);
+      window.removeEventListener("touchend", handleRelease);
+    };
+  }, [isDragging, calculateRatio, duration, onSeek]);
+  const displayTime = isDragging ? dragProgress * duration : currentTime;
+  return /* @__PURE__ */ jsxs5("div", { className: "pp-seekbar-wrapper", "aria-label": "Audio progress", children: [
+    /* @__PURE__ */ jsx5("span", { className: "pp-time pp-time-current", children: formatTime(displayTime) }),
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: trackRef,
+        className: "pp-seekbar-track " + (isDragging ? "pp-seekbar-dragging" : ""),
+        onMouseDown: handlePointerDown,
+        onTouchStart: handleTouchStart,
+        onKeyDown: handleKeyDown,
+        role: "slider",
+        tabIndex: 0,
+        "aria-valuemin": 0,
+        "aria-valuemax": duration || 100,
+        "aria-valuenow": Math.round(displayTime),
+        "aria-valuetext": formatTime(displayTime),
+        children: [
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: "pp-seekbar-fill",
+              style: { width: progress * 100 + "%" }
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: "pp-seekbar-thumb",
+              style: { left: progress * 100 + "%" }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx5("span", { className: "pp-time pp-time-total", children: formatTime(duration) })
+  ] });
+}
+
+// src/components/PlayerHeader.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function PlayerHeader({ labels, icons, onClose }) {
+  return /* @__PURE__ */ jsxs6("div", { className: "pp-card-header", children: [
+    /* @__PURE__ */ jsx6("span", { className: "pp-telemetry-badge", children: labels.badge }),
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        className: "pp-icon-btn",
+        onClick: onClose,
+        "aria-label": labels.closePlayer,
+        title: labels.closePlayer,
+        children: icons?.close ?? /* @__PURE__ */ jsx6(CloseIcon, { size: 14 })
+      }
+    )
+  ] });
+}
+
+// src/components/TrackInfo.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function TrackInfo({ currentTrack, labels }) {
+  return /* @__PURE__ */ jsxs7("div", { className: "pp-track-info", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "pp-track-meta", children: [
+      currentTrack?.genre && /* @__PURE__ */ jsx7("span", { className: "pp-genre-badge", children: currentTrack.genre }),
+      currentTrack?.bpm && /* @__PURE__ */ jsxs7("span", { className: "pp-bpm-badge", children: [
+        "\u2022 ",
+        currentTrack.bpm
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7("p", { className: "pp-track-title", title: currentTrack?.title, children: currentTrack?.title || "No track selected" }),
+    /* @__PURE__ */ jsx7("p", { className: "pp-track-subtitle", children: currentTrack?.artist ? `${currentTrack.artist} \u2022 ${labels.subtitle}` : labels.subtitle })
+  ] });
+}
+
+// src/components/PlayerControls.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function PlayerControls({
+  isPlaying,
+  isMuted,
+  externalLinkUrl,
+  labels,
+  icons,
+  onPrev,
+  onTogglePlay,
+  onNext,
+  onToggleMute
+}) {
+  return /* @__PURE__ */ jsxs8("div", { className: "pp-controls-row", children: [
+    /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        className: "pp-ctrl-btn",
+        onClick: onPrev,
+        "aria-label": labels.prevTrack,
+        title: labels.prevTrack,
+        children: icons?.prev ?? /* @__PURE__ */ jsx8(SkipBackIcon, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        className: "pp-ctrl-btn-main",
+        onClick: onTogglePlay,
+        "aria-label": isPlaying ? labels.pause : labels.play,
+        children: [
+          isPlaying ? icons?.pause ?? /* @__PURE__ */ jsx8(PauseIcon, { size: 14 }) : icons?.play ?? /* @__PURE__ */ jsx8(PlayIcon, { size: 14 }),
+          /* @__PURE__ */ jsx8("span", { children: isPlaying ? labels.pause : labels.play })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        className: "pp-ctrl-btn",
+        onClick: onNext,
+        "aria-label": labels.nextTrack,
+        title: labels.nextTrack,
+        children: icons?.next ?? /* @__PURE__ */ jsx8(SkipForwardIcon, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        className: "pp-ctrl-btn",
+        onClick: onToggleMute,
+        "aria-label": isMuted ? labels.unmute : labels.mute,
+        title: isMuted ? labels.unmute : labels.mute,
+        children: isMuted ? icons?.unmute ?? /* @__PURE__ */ jsx8(VolumeMuteIcon, { size: 16 }) : icons?.mute ?? /* @__PURE__ */ jsx8(VolumeUpIcon, { size: 16 })
+      }
+    ),
+    externalLinkUrl && /* @__PURE__ */ jsx8(
+      "a",
+      {
+        href: externalLinkUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "pp-ctrl-btn",
+        "aria-label": labels.listenExternal,
+        title: labels.listenExternal,
+        children: icons?.external ?? /* @__PURE__ */ jsx8(ExternalLinkIcon, { size: 15 })
+      }
+    )
+  ] });
+}
+
+// src/components/ProviderEmbeds.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function ProviderEmbeds({
+  isLoaded,
+  embedMode,
+  currentTrack,
+  labels,
+  isSoundCloud,
+  soundCloudIframeSrc,
+  scIframeRef,
+  onSoundCloudLoad,
+  isYouTube,
+  youTubeIframeSrc,
+  ytIframeRef,
+  onYouTubeLoad,
+  iframeSrc,
+  iframeRef,
+  onMixcloudLoad
+}) {
+  if (!isLoaded || !currentTrack) return null;
+  const title = (currentTrack.code || "") + " " + currentTrack.title;
+  const isSeamless = embedMode === "seamless";
+  const isThemed = embedMode === "themed";
+  return /* @__PURE__ */ jsxs9(Fragment, { children: [
+    isSoundCloud && soundCloudIframeSrc && (isSeamless ? /* @__PURE__ */ jsx9("div", { className: "pp-iframe-seamless", "aria-hidden": "true", children: /* @__PURE__ */ jsx9(
+      "iframe",
+      {
+        ref: scIframeRef,
+        tabIndex: -1,
+        title,
+        src: soundCloudIframeSrc,
+        allow: "autoplay",
+        onLoad: onSoundCloudLoad
+      }
+    ) }) : /* @__PURE__ */ jsx9("div", { className: "pp-iframe-wrapper", children: /* @__PURE__ */ jsx9(
+      "iframe",
+      {
+        ref: scIframeRef,
+        title,
+        className: "pp-mixcloud-iframe",
+        src: soundCloudIframeSrc,
+        allow: "autoplay",
+        onLoad: onSoundCloudLoad
+      }
+    ) })),
+    isYouTube && youTubeIframeSrc && (isSeamless ? /* @__PURE__ */ jsx9("div", { className: "pp-iframe-seamless", "aria-hidden": "true", children: /* @__PURE__ */ jsx9(
+      "iframe",
+      {
+        ref: ytIframeRef,
+        tabIndex: -1,
+        title,
+        src: youTubeIframeSrc,
+        allow: "autoplay; encrypted-media",
+        onLoad: onYouTubeLoad
+      }
+    ) }) : /* @__PURE__ */ jsx9("div", { className: "pp-iframe-wrapper " + (isThemed ? "pp-iframe-themed" : ""), children: /* @__PURE__ */ jsx9(
+      "iframe",
+      {
+        ref: ytIframeRef,
+        title,
+        className: "pp-mixcloud-iframe",
+        src: youTubeIframeSrc,
+        allow: "autoplay; encrypted-media",
+        onLoad: onYouTubeLoad
+      }
+    ) })),
+    Boolean(currentTrack.feed) && (isSeamless ? /* @__PURE__ */ jsx9("div", { className: "pp-iframe-seamless", "aria-hidden": "true", children: /* @__PURE__ */ jsx9(
+      "iframe",
+      {
+        ref: iframeRef,
+        tabIndex: -1,
+        title,
+        className: "pp-mixcloud-iframe",
+        src: iframeSrc,
+        allow: "autoplay; encrypted-media; fullscreen; picture-in-picture",
+        onLoad: onMixcloudLoad
+      }
+    ) }) : /* @__PURE__ */ jsxs9(Fragment, { children: [
+      /* @__PURE__ */ jsx9("div", { className: "pp-iframe-wrapper " + (isThemed ? "pp-iframe-themed" : ""), children: /* @__PURE__ */ jsx9(
+        "iframe",
+        {
+          ref: iframeRef,
+          title,
+          className: "pp-mixcloud-iframe",
+          src: iframeSrc,
+          allow: "autoplay; encrypted-media; fullscreen; picture-in-picture",
+          onLoad: onMixcloudLoad
+        }
+      ) }),
+      /* @__PURE__ */ jsx9("span", { className: "pp-iframe-hint", children: labels.directPlayHint })
+    ] }))
+  ] });
+}
+
+// src/components/PillPlayer.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function PillPlayer({
+  tracks,
+  theme = "orbital",
+  colors,
+  position = "bottom-right",
+  icons,
+  labels: customLabels,
+  features = {},
+  initialOpen = false,
+  className = "",
+  style,
+  onTrackChange,
+  onPlayStateChange
+}) {
+  const [isOpen, setIsOpen] = useState4(initialOpen);
+  const [asyncTracks, setAsyncTracks] = useState4([]);
+  useEffect7(() => {
+    if (typeof tracks !== "string") return;
+    let isMounted = true;
+    fetch(tracks).then((res) => {
+      if (!res.ok) throw new Error(`Failed to fetch tracks: ${res.status}`);
+      return res.json();
+    }).then((data) => {
+      if (isMounted && Array.isArray(data)) {
+        setAsyncTracks(data);
+      }
+    }).catch((err) => {
+      console.error("[PillPlayer] Error loading tracks JSON:", err);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [tracks]);
+  const resolvedTracks = typeof tracks === "string" ? asyncTracks : tracks;
+  const containerRef = useRef7(null);
+  const {
+    showSpectrum = true,
+    showPlaylist = true,
+    showSeekbar = true,
+    persistState = true,
+    enableKeyboardShortcuts = true,
+    embedMode: propEmbedMode,
+    mixcloudEmbedMode: propMixcloudEmbedMode,
+    beaconGlow = false
+  } = features;
+  const embedMode = propEmbedMode ?? propMixcloudEmbedMode ?? "seamless";
+  const labels = {
+    ...DEFAULT_PILL_LABELS,
+    ...customLabels
+  };
+  const {
+    currentTrack,
+    currentTrackIndex,
+    isPlaying,
+    isMuted,
+    isLoaded,
+    currentTime,
+    duration,
+    handleSeek,
+    iframeRef,
+    iframeSrc,
+    scIframeRef,
+    soundCloudIframeSrc,
+    isSoundCloud,
+    isYouTube,
+    ytIframeRef,
+    youTubeIframeSrc,
+    setupYouTubePlayer,
+    isHtmlAudio,
+    setupSoundCloudWidget,
+    frequencyData,
+    hasLiveFrequency,
+    timing,
+    setIsLoaded,
+    handleTogglePlay,
+    handleToggleMute,
+    handleNextTrack,
+    handlePrevTrack,
+    handleSelectTrack,
+    setupMixcloudWidget
+  } = useAudioPlayer({
+    tracks: resolvedTracks,
+    persistState,
+    onTrackChange,
+    onPlayStateChange
+  });
+  const handleToggleOpen = useCallback7(() => {
+    setIsOpen((prev) => {
+      const next = !prev;
+      if (next && !isLoaded) {
+        setIsLoaded(true);
+      }
+      return next;
+    });
+  }, [isLoaded, setIsLoaded]);
+  const handleClose = useCallback7(() => {
+    setIsOpen(false);
+  }, []);
+  useEffect7(() => {
+    if (!enableKeyboardShortcuts || !isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        handleClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [enableKeyboardShortcuts, isOpen, handleClose]);
+  useEffect7(() => {
+    if (!isOpen) return;
+    const handlePointerDownOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        handleClose();
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDownOutside);
+    return () => document.removeEventListener("pointerdown", handlePointerDownOutside);
+  }, [isOpen, handleClose]);
+  const customColorStyles = colors ? {
+    ...colors.accent ? { "--pp-accent": colors.accent } : {},
+    ...colors.secondary ? { "--pp-accent-secondary": colors.secondary } : {},
+    ...colors.bg ? { "--pp-bg": colors.bg } : {},
+    ...colors.surface ? { "--pp-surface": colors.surface } : {},
+    ...colors.border ? { "--pp-border": colors.border } : {},
+    ...colors.text ? { "--pp-text": colors.text } : {},
+    ...colors.textDim ? { "--pp-text-dim": colors.textDim } : {},
+    ...colors.glow ? { "--pp-accent-glow": colors.glow } : {}
+  } : {};
+  const externalLinkUrl = currentTrack?.externalUrl || currentTrack?.soundcloud || (currentTrack?.youtube ? currentTrack.youtube.startsWith("http") ? currentTrack.youtube : "https://www.youtube.com/watch?v=" + currentTrack.youtube : void 0) || (currentTrack?.feed ? "https://www.mixcloud.com" + currentTrack.feed : void 0);
+  const shouldShowSeekbar = showSeekbar && (isHtmlAudio || embedMode === "seamless");
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      ref: containerRef,
+      "data-pill-theme": theme,
+      className: "pp-anchor pp-position-" + position + " " + (isPlaying ? "pp-is-playing " : "") + className,
+      style: {
+        ...customColorStyles,
+        ...style,
+        "--bpm-beat": timing.beatMs + "ms",
+        "--bpm-half-beat": timing.halfBeatMs + "ms",
+        "--bpm-two-beats": timing.twoBeatsMs + "ms",
+        "--bpm-bar": timing.barMs + "ms"
+      },
+      "aria-label": labels.badge,
+      children: [
+        /* @__PURE__ */ jsxs10(
+          "section",
+          {
+            role: isOpen ? "dialog" : void 0,
+            "aria-modal": isOpen ? "false" : void 0,
+            "aria-hidden": !isOpen,
+            "aria-label": currentTrack ? (currentTrack.code || "") + " - " + currentTrack.title : labels.badge,
+            className: "pp-hud-card " + (isOpen ? "pp-hud-card-open" : "pp-hud-card-closed") + (beaconGlow && isOpen ? " pp-hud-beacon" : ""),
+            children: [
+              /* @__PURE__ */ jsx10(
+                PlayerHeader,
+                {
+                  labels,
+                  icons,
+                  onClose: handleClose
+                }
+              ),
+              /* @__PURE__ */ jsxs10("div", { className: "pp-card-body", children: [
+                /* @__PURE__ */ jsx10(
+                  TrackInfo,
+                  {
+                    currentTrack,
+                    labels
+                  }
+                ),
+                showSpectrum && /* @__PURE__ */ jsx10(
+                  SpectrumVisualizer,
+                  {
+                    isPlaying,
+                    labels,
+                    frequencyData,
+                    hasLiveFrequency
+                  }
+                ),
+                /* @__PURE__ */ jsx10(
+                  ProviderEmbeds,
+                  {
+                    isLoaded,
+                    embedMode,
+                    currentTrack,
+                    labels,
+                    isSoundCloud,
+                    soundCloudIframeSrc,
+                    scIframeRef,
+                    onSoundCloudLoad: setupSoundCloudWidget,
+                    isYouTube,
+                    youTubeIframeSrc,
+                    ytIframeRef,
+                    onYouTubeLoad: setupYouTubePlayer,
+                    iframeSrc,
+                    iframeRef,
+                    onMixcloudLoad: setupMixcloudWidget
+                  }
+                ),
+                shouldShowSeekbar && /* @__PURE__ */ jsx10(
+                  AudioSeekbar,
+                  {
+                    currentTime,
+                    duration,
+                    onSeek: handleSeek
+                  }
+                ),
+                /* @__PURE__ */ jsx10(
+                  PlayerControls,
+                  {
+                    isPlaying,
+                    isMuted,
+                    externalLinkUrl,
+                    labels,
+                    icons,
+                    onPrev: handlePrevTrack,
+                    onTogglePlay: handleTogglePlay,
+                    onNext: handleNextTrack,
+                    onToggleMute: handleToggleMute
+                  }
+                ),
+                showPlaylist && resolvedTracks.length > 1 && /* @__PURE__ */ jsx10(
+                  AudioPlaylist,
+                  {
+                    tracks: resolvedTracks,
+                    currentTrackIndex,
+                    labels,
+                    onSelectTrack: handleSelectTrack
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          AudioTriggerPill,
+          {
+            isOpen,
+            isPlaying,
+            currentTrack,
+            labels,
+            icons,
+            onToggleOpen: handleToggleOpen
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AudioPlaylist,
+  AudioSeekbar,
+  AudioTriggerPill,
+  CloseIcon,
+  DEFAULT_PILL_LABELS,
+  ExternalLinkIcon,
+  PauseIcon,
+  PillPlayer,
+  PlayIcon,
+  PlayerControls,
+  PlayerHeader,
+  ProviderEmbeds,
+  SkipBackIcon,
+  SkipForwardIcon,
+  SpectrumVisualizer,
+  TrackInfo,
+  VolumeMuteIcon,
+  VolumeUpIcon,
+  calculateBpmTiming,
+  extractYouTubeId,
+  formatTime,
+  parseDurationToSeconds,
+  useAudioPlayer
+};
+//# sourceMappingURL=index.mjs.map