wavesurf 1.0.0

package/dist/index.js

@@ -0,0 +1,707 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var WaveSurfer = require('wavesurfer.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var WaveSurfer__default = /*#__PURE__*/_interopDefault(WaveSurfer);
+
+// src/context/AudioPlayerContext.tsx
+var MINI_PLAYER_PLAY_EVENT = "wavesurfer-player-mini-play";
+var AudioPlayerContext = react.createContext(null);
+var DEFAULT_CONFIG = {
+  fadeInEnabled: true,
+  fadeInDuration: 3e3,
+  persistVolume: true,
+  storageKey: "audioPlayerVolume",
+  defaultVolume: 1,
+  onPlay: () => {
+  },
+  onPause: () => {
+  },
+  onEnd: () => {
+  },
+  onTimeUpdate: () => {
+  }
+};
+var FADE_STEPS = 30;
+var MIN_FADE_IN_VOLUME = 0.1;
+function AudioPlayerProvider({
+  children,
+  config: userConfig
+}) {
+  const config = { ...DEFAULT_CONFIG, ...userConfig };
+  const audioRef = react.useRef(null);
+  const fadeIntervalRef = react.useRef(null);
+  const configRef = react.useRef(config);
+  react.useEffect(() => {
+    configRef.current = config;
+  }, [config]);
+  const [state, setState] = react.useState({
+    currentSong: null,
+    isPlaying: false,
+    currentTime: 0,
+    duration: 0,
+    volume: config.defaultVolume,
+    displayVolume: config.defaultVolume,
+    isFadingIn: false
+  });
+  react.useEffect(() => {
+    const audio = new Audio();
+    audio.preload = "metadata";
+    audioRef.current = audio;
+    if (config.persistVolume && typeof window !== "undefined") {
+      const savedVolume = localStorage.getItem(config.storageKey);
+      if (savedVolume) {
+        const vol = parseFloat(savedVolume);
+        if (!isNaN(vol) && vol >= 0 && vol <= 1) {
+          setState((s) => ({ ...s, volume: vol, displayVolume: vol }));
+          audio.volume = vol;
+        }
+      }
+    }
+    const handleTimeUpdate = () => {
+      setState((s) => ({ ...s, currentTime: audio.currentTime }));
+      configRef.current.onTimeUpdate?.(audio.currentTime);
+    };
+    const handleLoadedMetadata = () => {
+      setState((s) => ({ ...s, duration: audio.duration }));
+    };
+    const handleEnded = () => {
+      setState((s) => ({ ...s, isPlaying: false, currentTime: 0 }));
+      configRef.current.onEnd?.();
+    };
+    const handlePlay = () => {
+      setState((s) => ({ ...s, isPlaying: true }));
+    };
+    const handlePause = () => {
+      setState((s) => ({ ...s, isPlaying: false }));
+    };
+    audio.addEventListener("timeupdate", handleTimeUpdate);
+    audio.addEventListener("loadedmetadata", handleLoadedMetadata);
+    audio.addEventListener("ended", handleEnded);
+    audio.addEventListener("play", handlePlay);
+    audio.addEventListener("pause", handlePause);
+    return () => {
+      if (fadeIntervalRef.current) {
+        clearInterval(fadeIntervalRef.current);
+      }
+      audio.removeEventListener("timeupdate", handleTimeUpdate);
+      audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      audio.removeEventListener("ended", handleEnded);
+      audio.removeEventListener("play", handlePlay);
+      audio.removeEventListener("pause", handlePause);
+      audio.pause();
+      audio.src = "";
+    };
+  }, []);
+  const clearFade = react.useCallback(() => {
+    if (fadeIntervalRef.current) {
+      clearInterval(fadeIntervalRef.current);
+      fadeIntervalRef.current = null;
+    }
+  }, []);
+  const fadeInVolume = react.useCallback(
+    (targetVolume) => {
+      if (!audioRef.current) return;
+      clearFade();
+      setState((s) => ({ ...s, isFadingIn: true, displayVolume: 0 }));
+      const fadeStepDuration = configRef.current.fadeInDuration / FADE_STEPS;
+      const volumeStep = targetVolume / FADE_STEPS;
+      let currentStep = 0;
+      fadeIntervalRef.current = setInterval(() => {
+        currentStep++;
+        const newVolume = Math.min(volumeStep * currentStep, targetVolume);
+        if (audioRef.current) {
+          audioRef.current.volume = newVolume;
+        }
+        setState((s) => ({ ...s, displayVolume: newVolume }));
+        if (currentStep >= FADE_STEPS) {
+          clearFade();
+          setState((s) => ({
+            ...s,
+            isFadingIn: false,
+            displayVolume: targetVolume
+          }));
+        }
+      }, fadeStepDuration);
+    },
+    [clearFade]
+  );
+  const play = react.useCallback(
+    async (song) => {
+      if (!audioRef.current) return;
+      clearFade();
+      if (state.currentSong?.id !== song.id) {
+        audioRef.current.src = song.audioUrl;
+        setState((s) => ({
+          ...s,
+          currentSong: song,
+          currentTime: 0,
+          duration: song.duration || 0
+        }));
+      }
+      const targetVolume = Math.max(state.volume, MIN_FADE_IN_VOLUME);
+      if (configRef.current.fadeInEnabled) {
+        audioRef.current.volume = 0;
+      } else {
+        audioRef.current.volume = targetVolume;
+      }
+      try {
+        await audioRef.current.play();
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(
+            new CustomEvent(MINI_PLAYER_PLAY_EVENT, { detail: song.id })
+          );
+        }
+        if (configRef.current.fadeInEnabled) {
+          fadeInVolume(targetVolume);
+        }
+        configRef.current.onPlay?.(song);
+      } catch {
+      }
+    },
+    [state.currentSong?.id, state.volume, clearFade, fadeInVolume]
+  );
+  const pause = react.useCallback(() => {
+    if (!audioRef.current) return;
+    clearFade();
+    audioRef.current.pause();
+    configRef.current.onPause?.();
+  }, [clearFade]);
+  const togglePlay = react.useCallback(() => {
+    if (!audioRef.current || !state.currentSong) return;
+    if (state.isPlaying) {
+      pause();
+    } else {
+      const targetVolume = Math.max(state.volume, MIN_FADE_IN_VOLUME);
+      if (configRef.current.fadeInEnabled) {
+        audioRef.current.volume = 0;
+      }
+      audioRef.current.play().then(() => {
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(
+            new CustomEvent(MINI_PLAYER_PLAY_EVENT, {
+              detail: state.currentSong?.id
+            })
+          );
+        }
+        if (configRef.current.fadeInEnabled) {
+          fadeInVolume(targetVolume);
+        }
+      }).catch(() => {
+      });
+    }
+  }, [state.isPlaying, state.currentSong, state.volume, pause, fadeInVolume]);
+  const seek = react.useCallback((time) => {
+    if (!audioRef.current) return;
+    audioRef.current.currentTime = time;
+    setState((s) => ({ ...s, currentTime: time }));
+  }, []);
+  const setVolume = react.useCallback(
+    (volume) => {
+      if (!audioRef.current) return;
+      const clampedVolume = Math.max(0, Math.min(1, volume));
+      if (fadeIntervalRef.current) {
+        clearFade();
+        setState((s) => ({ ...s, isFadingIn: false }));
+      }
+      audioRef.current.volume = clampedVolume;
+      if (configRef.current.persistVolume && typeof window !== "undefined") {
+        localStorage.setItem(
+          configRef.current.storageKey,
+          clampedVolume.toString()
+        );
+      }
+      setState((s) => ({
+        ...s,
+        volume: clampedVolume,
+        displayVolume: clampedVolume
+      }));
+    },
+    [clearFade]
+  );
+  const stop = react.useCallback(() => {
+    if (!audioRef.current) return;
+    clearFade();
+    audioRef.current.pause();
+    audioRef.current.currentTime = 0;
+    audioRef.current.src = "";
+    setState((s) => ({
+      ...s,
+      currentSong: null,
+      isPlaying: false,
+      currentTime: 0,
+      duration: 0,
+      isFadingIn: false
+    }));
+  }, [clearFade]);
+  const value = {
+    ...state,
+    play,
+    pause,
+    togglePlay,
+    seek,
+    setVolume,
+    stop
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AudioPlayerContext.Provider, { value, children });
+}
+function useAudioPlayer() {
+  const context = react.useContext(AudioPlayerContext);
+  if (!context) {
+    throw new Error(
+      "useAudioPlayer must be used within an AudioPlayerProvider"
+    );
+  }
+  return context;
+}
+function useLazyLoad(options) {
+  const {
+    rootMargin = "100px",
+    threshold = 0,
+    forceVisible = false
+  } = options || {};
+  const ref = react.useRef(null);
+  const [isVisible, setIsVisible] = react.useState(forceVisible);
+  react.useEffect(() => {
+    if (forceVisible) {
+      setIsVisible(true);
+      return;
+    }
+    if (!ref.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin, threshold }
+    );
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [rootMargin, threshold, forceVisible]);
+  return { ref, isVisible };
+}
+
+// src/utils/formatTime.ts
+function formatTime(seconds) {
+  if (!seconds || isNaN(seconds) || seconds < 0) return "0:00";
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+var DEFAULT_WAVEFORM_CONFIG = {
+  waveColor: "#666666",
+  progressColor: "#D4AF37",
+  cursorColor: "#D4AF37",
+  barWidth: 2,
+  barGap: 1,
+  barRadius: 2,
+  height: 60,
+  normalize: true
+};
+function WaveformPlayer({
+  song,
+  waveformConfig: userWaveformConfig,
+  lazyLoad = true,
+  showTime = true,
+  className = "",
+  renderHeader,
+  renderControls
+}) {
+  const waveformConfig = { ...DEFAULT_WAVEFORM_CONFIG, ...userWaveformConfig };
+  const containerRef = react.useRef(null);
+  const wavesurferRef = react.useRef(null);
+  const [isReady, setIsReady] = react.useState(false);
+  const [totalDuration, setTotalDuration] = react.useState(song.duration || 0);
+  const { ref: wrapperRef, isVisible } = useLazyLoad({
+    forceVisible: !lazyLoad
+  });
+  const {
+    play: contextPlay,
+    togglePlay: contextTogglePlay,
+    seek: contextSeek,
+    currentSong,
+    isPlaying: contextIsPlaying,
+    currentTime: contextCurrentTime
+  } = useAudioPlayer();
+  const isThisSongPlaying = currentSong?.id === song.id;
+  const isPlaying = isThisSongPlaying && contextIsPlaying;
+  const currentTime = isThisSongPlaying ? contextCurrentTime : 0;
+  react.useEffect(() => {
+    if (!wavesurferRef.current || !isThisSongPlaying) return;
+    const waveDuration = wavesurferRef.current.getDuration();
+    if (waveDuration > 0 && contextCurrentTime >= 0) {
+      const progress = contextCurrentTime / waveDuration;
+      wavesurferRef.current.seekTo(Math.min(progress, 1));
+    }
+  }, [contextCurrentTime, isThisSongPlaying]);
+  react.useEffect(() => {
+    if (!containerRef.current || !isVisible) return;
+    const hasPeaks = song.peaks && song.peaks.length > 0;
+    const wavesurfer = WaveSurfer__default.default.create({
+      container: containerRef.current,
+      waveColor: waveformConfig.waveColor,
+      progressColor: waveformConfig.progressColor,
+      cursorColor: waveformConfig.cursorColor,
+      barWidth: waveformConfig.barWidth,
+      barGap: waveformConfig.barGap,
+      barRadius: waveformConfig.barRadius,
+      height: waveformConfig.height,
+      normalize: waveformConfig.normalize,
+      interact: true,
+      // Allow clicking on waveform to seek
+      // Only load audio URL if we don't have peaks (needed to generate waveform)
+      url: hasPeaks ? void 0 : song.audioUrl,
+      peaks: hasPeaks ? [song.peaks] : void 0,
+      duration: hasPeaks ? song.duration || 0 : void 0
+    });
+    wavesurfer.on("ready", () => {
+      setIsReady(true);
+      setTotalDuration(wavesurfer.getDuration() || song.duration || 0);
+    });
+    wavesurfer.on("interaction", (newTime) => {
+      if (isThisSongPlaying) {
+        contextSeek(newTime);
+      }
+    });
+    wavesurfer.on("error", () => {
+    });
+    wavesurferRef.current = wavesurfer;
+    if (hasPeaks) {
+      setIsReady(true);
+      setTotalDuration(song.duration || 0);
+    }
+    return () => {
+      try {
+        wavesurfer.destroy();
+      } catch {
+      }
+    };
+  }, [
+    song.audioUrl,
+    song.peaks,
+    song.duration,
+    isVisible,
+    isThisSongPlaying,
+    contextSeek,
+    waveformConfig.waveColor,
+    waveformConfig.progressColor,
+    waveformConfig.cursorColor,
+    waveformConfig.barWidth,
+    waveformConfig.barGap,
+    waveformConfig.barRadius,
+    waveformConfig.height,
+    waveformConfig.normalize
+  ]);
+  const handlePlayClick = react.useCallback(() => {
+    if (!song.id || !song.audioUrl) return;
+    if (isThisSongPlaying) {
+      contextTogglePlay();
+    } else {
+      contextPlay(song);
+    }
+  }, [song, isThisSongPlaying, contextPlay, contextTogglePlay]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: `wsp-player ${className}`,
+      "data-song-id": song.id,
+      children: [
+        renderHeader ? renderHeader(song, isPlaying) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wsp-player-header", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "wsp-player-title", children: song.title }),
+          song.artist && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "wsp-player-artist", children: song.artist })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wsp-player-controls", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handlePlayClick,
+              disabled: !isReady,
+              className: `wsp-play-button ${isReady ? "wsp-play-button--ready" : ""}`,
+              "aria-label": isPlaying ? "Pause" : "Play",
+              children: !isReady ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "wsp-icon wsp-icon--spinner", fill: "none", viewBox: "0 0 24 24", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    className: "wsp-spinner-track",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    className: "wsp-spinner-head",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ] }) : isPlaying ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "wsp-icon", fill: "currentColor", viewBox: "0 0 24 24", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "wsp-icon wsp-icon--play", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wsp-waveform-wrapper", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "wsp-waveform" }),
+            showTime && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wsp-time-display", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "wsp-time", children: formatTime(currentTime) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "wsp-time", children: formatTime(totalDuration) })
+            ] })
+          ] }),
+          renderControls && renderControls(song, isPlaying)
+        ] })
+      ]
+    }
+  );
+}
+var DEFAULT_WAVEFORM_CONFIG2 = {
+  waveColor: "#666666",
+  progressColor: "#D4AF37",
+  cursorColor: "transparent",
+  barWidth: 2,
+  barGap: 1,
+  barRadius: 2,
+  height: 40,
+  normalize: true
+};
+function MiniPlayer({
+  position = "bottom",
+  showVolume = true,
+  showClose = true,
+  onClose,
+  className = "",
+  waveformConfig: userWaveformConfig
+}) {
+  const waveformConfig = { ...DEFAULT_WAVEFORM_CONFIG2, ...userWaveformConfig };
+  const {
+    currentSong,
+    isPlaying,
+    currentTime,
+    duration,
+    displayVolume,
+    togglePlay,
+    seek,
+    setVolume,
+    stop
+  } = useAudioPlayer();
+  const waveformRef = react.useRef(null);
+  const wavesurferRef = react.useRef(null);
+  const [isMobile, setIsMobile] = react.useState(false);
+  const [waveformReady, setWaveformReady] = react.useState(false);
+  const lastSongIdRef = react.useRef(null);
+  react.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 640);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  react.useEffect(() => {
+    if (!waveformRef.current || !currentSong) return;
+    if (lastSongIdRef.current === currentSong.id && wavesurferRef.current) {
+      return;
+    }
+    if (wavesurferRef.current) {
+      wavesurferRef.current.destroy();
+      wavesurferRef.current = null;
+    }
+    setWaveformReady(false);
+    lastSongIdRef.current = currentSong.id;
+    const hasPeaks = currentSong.peaks && currentSong.peaks.length > 0;
+    const wavesurfer = WaveSurfer__default.default.create({
+      container: waveformRef.current,
+      waveColor: waveformConfig.waveColor,
+      progressColor: waveformConfig.progressColor,
+      cursorColor: waveformConfig.cursorColor,
+      barWidth: waveformConfig.barWidth,
+      barGap: waveformConfig.barGap,
+      barRadius: waveformConfig.barRadius,
+      height: waveformConfig.height,
+      normalize: waveformConfig.normalize,
+      interact: true,
+      // Use peaks if available, otherwise need audio URL to generate waveform
+      url: hasPeaks ? void 0 : currentSong.audioUrl,
+      peaks: hasPeaks && currentSong.peaks ? [currentSong.peaks] : void 0,
+      duration: hasPeaks ? currentSong.duration || duration || 0 : void 0
+    });
+    wavesurfer.on("ready", () => {
+      setWaveformReady(true);
+    });
+    wavesurfer.on("interaction", (newTime) => {
+      seek(newTime);
+    });
+    wavesurferRef.current = wavesurfer;
+    if (hasPeaks) {
+      setWaveformReady(true);
+    }
+    return () => {
+    };
+  }, [
+    currentSong?.id,
+    currentSong?.audioUrl,
+    currentSong?.peaks,
+    currentSong?.duration,
+    duration,
+    seek,
+    waveformConfig.waveColor,
+    waveformConfig.progressColor,
+    waveformConfig.cursorColor,
+    waveformConfig.barWidth,
+    waveformConfig.barGap,
+    waveformConfig.barRadius,
+    waveformConfig.height,
+    waveformConfig.normalize
+  ]);
+  react.useEffect(() => {
+    return () => {
+      if (wavesurferRef.current) {
+        wavesurferRef.current.destroy();
+        wavesurferRef.current = null;
+      }
+    };
+  }, []);
+  react.useEffect(() => {
+    if (!wavesurferRef.current || !waveformReady) return;
+    const waveDuration = wavesurferRef.current.getDuration();
+    if (waveDuration > 0 && currentTime >= 0) {
+      const progress = currentTime / waveDuration;
+      wavesurferRef.current.seekTo(Math.min(progress, 1));
+    }
+  }, [currentTime, waveformReady]);
+  const handleVolumeChange = react.useCallback(
+    (e) => {
+      setVolume(parseFloat(e.target.value));
+    },
+    [setVolume]
+  );
+  const handleClose = react.useCallback(() => {
+    stop();
+    onClose?.();
+  }, [stop, onClose]);
+  if (!currentSong) return null;
+  const shouldShowVolume = showVolume && !isMobile;
+  const positionClass = position === "top" ? "wsp-mini-player--top" : "wsp-mini-player--bottom";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `wsp-mini-player ${positionClass} ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wsp-mini-player-inner", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: togglePlay,
+        className: "wsp-mini-play-button",
+        "aria-label": isPlaying ? "Pause" : "Play",
+        children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "wsp-mini-icon", fill: "currentColor", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "wsp-mini-icon wsp-mini-icon--play", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wsp-mini-content", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wsp-mini-info", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "wsp-mini-title", children: currentSong.title }),
+        currentSong.album && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wsp-mini-album", children: [
+          "\u2022 ",
+          currentSong.album
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wsp-mini-waveform-container", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "wsp-mini-time", children: formatTime(currentTime) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: waveformRef, className: "wsp-mini-waveform" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "wsp-mini-time", children: formatTime(duration) })
+      ] })
+    ] }),
+    shouldShowVolume && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wsp-mini-volume", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setVolume(displayVolume > 0 ? 0 : 1),
+          className: "wsp-mini-volume-button",
+          "aria-label": displayVolume > 0 ? "Mute" : "Unmute",
+          children: displayVolume === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "wsp-mini-volume-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"
+              }
+            )
+          ] }) : displayVolume < 0.5 ? /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "wsp-mini-volume-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M15.536 8.464a5 5 0 010 7.072M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
+            }
+          ) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "wsp-mini-volume-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
+            }
+          ) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "range",
+          min: "0",
+          max: "1",
+          step: "0.01",
+          value: displayVolume,
+          onChange: handleVolumeChange,
+          className: "wsp-mini-volume-slider",
+          "aria-label": "Volume"
+        }
+      )
+    ] }),
+    showClose && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: handleClose,
+        className: "wsp-mini-close-button",
+        "aria-label": "Close player",
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "wsp-mini-close-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M6 18L18 6M6 6l12 12"
+          }
+        ) })
+      }
+    )
+  ] }) });
+}
+
+exports.AudioPlayerProvider = AudioPlayerProvider;
+exports.MINI_PLAYER_PLAY_EVENT = MINI_PLAYER_PLAY_EVENT;
+exports.MiniPlayer = MiniPlayer;
+exports.WaveformPlayer = WaveformPlayer;
+exports.formatTime = formatTime;
+exports.useAudioPlayer = useAudioPlayer;
+exports.useLazyLoad = useLazyLoad;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map