@gentomiyano/optimized-web-audio-player 0.1.0

package/dist/ui/index.js

@@ -0,0 +1,1344 @@
+import { useState, useRef, useId, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/ui/player-primitives.tsx
+function IconFrame({
+  children,
+  size = 20,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      fill: "currentColor",
+      ...props,
+      children
+    }
+  );
+}
+function PlayIcon(props) {
+  return /* @__PURE__ */ jsx(IconFrame, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M7 4.8c0-1.05 1.16-1.68 2.04-1.1l11 7.2a1.3 1.3 0 0 1 0 2.2l-11 7.2A1.31 1.31 0 0 1 7 19.2V4.8Z" }) });
+}
+function PauseIcon(props) {
+  return /* @__PURE__ */ jsxs(IconFrame, { ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "5", y: "4", width: "5", height: "16", rx: "0.8" }),
+    /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "5", height: "16", rx: "0.8" })
+  ] });
+}
+function PreviousIcon(props) {
+  return /* @__PURE__ */ jsxs(IconFrame, { ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "4", y: "5", width: "3", height: "14", rx: "0.6" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 5.3v13.4c0 .93-1.02 1.5-1.82 1.02l-9.7-6.7a1.2 1.2 0 0 1 0-2.04l9.7-6.7A1.19 1.19 0 0 1 19 5.3Z" })
+  ] });
+}
+function NextIcon(props) {
+  return /* @__PURE__ */ jsxs(IconFrame, { ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "17", y: "5", width: "3", height: "14", rx: "0.6" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 5.3v13.4c0 .93 1.02 1.5 1.82 1.02l9.7-6.7a1.2 1.2 0 0 0 0-2.04l-9.7-6.7A1.19 1.19 0 0 0 5 5.3Z" })
+  ] });
+}
+function ShuffleIcon(props) {
+  return /* @__PURE__ */ jsx(IconFrame, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17.2 3.7 22 7.5l-4.8 3.8V8.8h-1.9c-1.5 0-2.4.5-3.2 1.6l-3.3 4.5c-1.35 1.84-3.1 2.8-5.8 2.8H2v-3h1c1.7 0 2.55-.43 3.36-1.53l3.32-4.52C11.02 6.82 12.8 5.8 15.3 5.8h1.9V3.7ZM2 6.3h1c2.7 0 4.43.94 5.8 2.8l1.05 1.43-1.87 2.55-1.62-2.25C5.55 9.73 4.7 9.3 3 9.3H2v-3Zm12.08 5.17c.35-.13.75-.2 1.22-.2h1.9V8.7l4.8 3.8-4.8 3.8v-2.03h-1.9c-1.24 0-2.05.34-2.73 1.04l1.51-3.84Z" }) });
+}
+function RepeatIcon(props) {
+  return /* @__PURE__ */ jsx(IconFrame, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M7.3 4h9.2A4.5 4.5 0 0 1 21 8.5V10h-3V8.5A1.5 1.5 0 0 0 16.5 7H7.3v3.1L2 5.55 7.3 1v3Zm9.4 16H7.5A4.5 4.5 0 0 1 3 15.5V14h3v1.5A1.5 1.5 0 0 0 7.5 17h9.2v-3.1l5.3 4.55L16.7 23v-3Z" }) });
+}
+function RepeatOneIcon(props) {
+  return /* @__PURE__ */ jsxs(IconFrame, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M7.3 3h9.2A4.5 4.5 0 0 1 21 7.5V9h-3V7.5A1.5 1.5 0 0 0 16.5 6H7.3v2.6L2 4.55 7.3.5V3Zm9.4 18H7.5A4.5 4.5 0 0 1 3 16.5V15h3v1.5A1.5 1.5 0 0 0 7.5 18h9.2v-2.6l5.3 4.05-5.3 4.05V21Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M10.25 9h3.35v7h-2.35v-4.8h-1V9Z" })
+  ] });
+}
+function QueueIcon(props) {
+  return /* @__PURE__ */ jsxs(IconFrame, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "6", r: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "12", r: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "18", r: "2" }),
+    /* @__PURE__ */ jsx("rect", { x: "8", y: "4.5", width: "14", height: "3", rx: "0.7" }),
+    /* @__PURE__ */ jsx("rect", { x: "8", y: "10.5", width: "14", height: "3", rx: "0.7" }),
+    /* @__PURE__ */ jsx("rect", { x: "8", y: "16.5", width: "14", height: "3", rx: "0.7" })
+  ] });
+}
+function VolumeIcon(props) {
+  return /* @__PURE__ */ jsx(IconFrame, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M3 9h4l5-4.4c.78-.68 2-.13 2 .9v13c0 1.03-1.22 1.58-2 .9L7 15H3V9Zm14.3-1.8a1.5 1.5 0 0 1 2.1.25A7.4 7.4 0 0 1 21 12a7.4 7.4 0 0 1-1.6 4.55 1.5 1.5 0 1 1-2.35-1.86A4.4 4.4 0 0 0 18 12c0-1-.33-1.93-.95-2.69a1.5 1.5 0 0 1 .25-2.11Z" }) });
+}
+function MuteIcon(props) {
+  return /* @__PURE__ */ jsx(IconFrame, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M2 9h4l5-4.4c.78-.68 2-.13 2 .9v13c0 1.03-1.22 1.58-2 .9L6 15H2V9Zm13.9-.9L18 10.2l2.1-2.1L22 10l-2.1 2.1L22 14l-1.9 1.9-2.1-2.1-2.1 2.1L14 14l2.1-1.9L14 10l1.9-1.9Z" }) });
+}
+function PodcastSkipBackIcon(props) {
+  return /* @__PURE__ */ jsxs(IconFrame, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M8.2 3.2 3 7.4l5.2 4.2V9a7 7 0 1 1-1.55 8.5l-2.73 1.25A10 10 0 1 0 8.2 6V3.2Z" }),
+    /* @__PURE__ */ jsx("rect", { x: "8.5", y: "10", width: "2.2", height: "6", rx: "0.4" }),
+    /* @__PURE__ */ jsx("rect", { x: "12.2", y: "10", width: "3.3", height: "2", rx: "0.4" }),
+    /* @__PURE__ */ jsx("rect", { x: "13.3", y: "11", width: "2.2", height: "5", rx: "0.4" }),
+    /* @__PURE__ */ jsx("rect", { x: "12.2", y: "14", width: "3.3", height: "2", rx: "0.4" })
+  ] });
+}
+function PodcastSkipForwardIcon(props) {
+  return /* @__PURE__ */ jsxs(IconFrame, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "m15.8 3.2 5.2 4.2-5.2 4.2V9a7 7 0 1 0 1.55 8.5l2.73 1.25A10 10 0 1 1 15.8 6V3.2Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M7.5 10h3.2v2H9.5v1h1.2v3H7.5v-2h1.2v-2H7.5v-2Zm4.3 0H15v6h-3.2v-6Zm2 2h-.8v2h.8v-2Z" })
+  ] });
+}
+function CloseIcon(props) {
+  return /* @__PURE__ */ jsx(IconFrame, { ...props, children: /* @__PURE__ */ jsx("path", { d: "m5.05 3 6.95 6.95L18.95 3 21 5.05 14.05 12 21 18.95 18.95 21 12 14.05 5.05 21 3 18.95 9.95 12 3 5.05 5.05 3Z" }) });
+}
+function RetryIcon(props) {
+  return /* @__PURE__ */ jsx(IconFrame, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M19.7 4.3V1L15.5 5.2 19.7 9V7.3A8 8 0 1 1 12 4a1.5 1.5 0 0 0 0-3 11 11 0 1 0 10.7 8.5l-2.88.84A8 8 0 0 1 19.7 4.3Z" }) });
+}
+
+// src/ui/player-utils.ts
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function formatTime(seconds) {
+  if (seconds === null || !Number.isFinite(seconds) || seconds < 0) {
+    return "--:--";
+  }
+  const wholeSeconds = Math.floor(seconds);
+  const hours = Math.floor(wholeSeconds / 3600);
+  const minutes = Math.floor(wholeSeconds % 3600 / 60);
+  const remainder = wholeSeconds % 60;
+  if (hours > 0) {
+    return `${String(hours)}:${String(minutes).padStart(2, "0")}:${String(remainder).padStart(2, "0")}`;
+  }
+  return `${String(minutes).padStart(2, "0")}:${String(remainder).padStart(2, "0")}`;
+}
+function formatTimeAria(seconds) {
+  const safeSeconds = Math.max(0, Math.floor(seconds));
+  const hours = Math.floor(safeSeconds / 3600);
+  const minutes = Math.floor(safeSeconds % 3600 / 60);
+  const remainder = safeSeconds % 60;
+  const parts = [
+    hours > 0 ? `${String(hours)} hour${hours === 1 ? "" : "s"}` : "",
+    minutes > 0 ? `${String(minutes)} minute${minutes === 1 ? "" : "s"}` : "",
+    `${String(remainder)} second${remainder === 1 ? "" : "s"}`
+  ].filter(Boolean);
+  return parts.join(" ");
+}
+function getRepeatLabel(mode) {
+  switch (mode) {
+    case "off":
+      return "Repeat off";
+    case "all":
+      return "Repeat all";
+    case "one":
+      return "Repeat one";
+  }
+}
+function getNextRepeatMode(mode) {
+  switch (mode) {
+    case "off":
+      return "all";
+    case "all":
+      return "one";
+    case "one":
+      return "off";
+  }
+}
+function getStatusLabel(state) {
+  if (state.needsUserGesture) {
+    return "Ready to play";
+  }
+  switch (state.status) {
+    case "idle":
+      return "Idle";
+    case "loading":
+      return "Loading";
+    case "playing":
+      return "Playing";
+    case "paused":
+      return "Paused";
+    case "seeking":
+      return "Seeking";
+    case "ended":
+      return "Ended";
+    case "error":
+      return "Playback unavailable";
+  }
+}
+function getErrorMessage(error) {
+  switch (error.code) {
+    case "autoplay-blocked":
+      return "Playback needs a direct action.";
+    case "network":
+      return "The media could not be reached.";
+    case "cors":
+      return "The media source is not available.";
+    case "decode":
+      return "This media could not be decoded.";
+    case "unsupported":
+      return "This media format is not supported.";
+    case "audio-context":
+      return "Audio output is not available.";
+    case "unknown":
+      return "Playback is currently unavailable.";
+  }
+}
+function PlayerSurface({
+  appearance,
+  children,
+  className,
+  label
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": label,
+      className: ["player-surface", className].filter(Boolean).join(" "),
+      "data-appearance": appearance,
+      children
+    }
+  );
+}
+function Artwork({ className, item }) {
+  const classes = ["player-artwork", className].filter(Boolean).join(" ");
+  if (item?.artwork !== void 0) {
+    return /* @__PURE__ */ jsx("span", { className: `${classes} player-artwork--image`, children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: item.artwork.alt,
+        className: "player-artwork__image",
+        decoding: "async",
+        src: item.artwork.url
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": "Artwork unavailable",
+      className: `${classes} player-artwork--fallback`,
+      role: "img",
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+    }
+  );
+}
+function ScrollingTitle({
+  enabled,
+  title
+}) {
+  const containsJapanese = /[\u3040-\u30ff\u3400-\u9fff]/u.test(title);
+  const viewportRef = useRef(null);
+  const contentRef = useRef(null);
+  const [marquee, setMarquee] = useState({
+    distance: 0,
+    duration: 10,
+    overflow: false
+  });
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    const content = contentRef.current;
+    if (viewport === null || content === null) {
+      return;
+    }
+    const viewportElement = viewport;
+    const contentElement = content;
+    function measure() {
+      const viewportWidth = Math.max(
+        viewportElement.getBoundingClientRect().width,
+        viewportElement.clientWidth
+      );
+      const contentWidth = Math.max(
+        contentElement.getBoundingClientRect().width,
+        contentElement.scrollWidth
+      );
+      const overflow = contentWidth - viewportWidth > 1;
+      const distance = enabled ? contentWidth + 12 : 0;
+      setMarquee({
+        distance,
+        duration: Math.max(10, distance / 22 + 4),
+        overflow
+      });
+    }
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+      return () => {
+        window.removeEventListener("resize", measure);
+      };
+    }
+    const observer = new ResizeObserver(measure);
+    observer.observe(viewportElement);
+    observer.observe(contentElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [enabled, title]);
+  const style = {
+    "--player-title-scroll-offset": `${String(-marquee.distance)}px`,
+    "--player-title-scroll-duration": `${String(marquee.duration)}s`
+  };
+  return /* @__PURE__ */ jsx(
+    "strong",
+    {
+      className: "player-title",
+      "data-overflow": marquee.overflow ? "true" : "false",
+      "data-scroll": enabled ? "true" : "false",
+      "data-script": containsJapanese ? "japanese" : "latin",
+      ref: viewportRef,
+      style,
+      children: /* @__PURE__ */ jsx("span", { className: "player-title__text", ref: contentRef, children: title })
+    }
+  );
+}
+function TrackMetadata({
+  className,
+  item,
+  scrollTitle = false,
+  status
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["player-metadata", className].filter(Boolean).join(" "),
+      children: [
+        status === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "player-kicker", children: status }),
+        /* @__PURE__ */ jsx(
+          ScrollingTitle,
+          {
+            enabled: item !== null && scrollTitle,
+            title: item?.title ?? "No media selected"
+          },
+          item?.title ?? "No media selected"
+        ),
+        /* @__PURE__ */ jsx("span", { className: "player-creator", children: item === null ? "Select media to begin" : item.creatorName ?? "Artist unavailable" }),
+        item?.collectionTitle === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "player-collection", children: item.collectionTitle })
+      ]
+    }
+  );
+}
+function TimeReadout({
+  className,
+  currentTimeSec,
+  durationSec
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": `${formatTime(currentTimeSec)} of ${formatTime(durationSec)}`,
+      className: ["player-time", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("time", { children: formatTime(currentTimeSec) }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "/" }),
+        /* @__PURE__ */ jsx("time", { children: formatTime(durationSec) })
+      ]
+    }
+  );
+}
+function IconButton({
+  children,
+  className,
+  disabled = false,
+  label,
+  onClick,
+  pressed
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": label,
+      ...pressed === void 0 ? {} : { "aria-pressed": pressed },
+      className: ["player-icon-button", className].filter(Boolean).join(" "),
+      disabled,
+      onClick,
+      title: label,
+      type: "button",
+      children
+    }
+  );
+}
+function PrimaryPlaybackButton({
+  className,
+  commands,
+  state
+}) {
+  const isPlaying = state.status === "playing";
+  const label = isPlaying ? "Pause" : "Play";
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      className: [
+        "player-play-button",
+        isPlaying ? "player-play-button--active" : "",
+        className
+      ].filter(Boolean).join(" "),
+      disabled: state.currentItem === null || state.status === "loading",
+      label,
+      onClick: () => {
+        void commands.togglePlayback();
+      },
+      children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, { size: 22 }) : /* @__PURE__ */ jsx(PlayIcon, { size: 22 })
+    }
+  );
+}
+function TransportControls({
+  className,
+  commands,
+  compact = false,
+  showModes = true,
+  state
+}) {
+  const RepeatModeIcon = state.repeatMode === "one" ? RepeatOneIcon : RepeatIcon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Playback controls",
+      className: [
+        "player-transport",
+        compact ? "player-transport--compact" : "",
+        className
+      ].filter(Boolean).join(" "),
+      role: "group",
+      children: [
+        showModes ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: state.shuffleEnabled ? "Shuffle on" : "Shuffle off",
+            onClick: () => {
+              commands.setShuffle(!state.shuffleEnabled);
+            },
+            pressed: state.shuffleEnabled,
+            children: /* @__PURE__ */ jsx(ShuffleIcon, {})
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            disabled: !state.canGoPrevious,
+            label: "Previous",
+            onClick: () => {
+              void commands.previous();
+            },
+            children: /* @__PURE__ */ jsx(PreviousIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(PrimaryPlaybackButton, { commands, state }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            disabled: !state.canGoNext,
+            label: "Next",
+            onClick: () => {
+              void commands.next();
+            },
+            children: /* @__PURE__ */ jsx(NextIcon, {})
+          }
+        ),
+        showModes ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: getRepeatLabel(state.repeatMode),
+            onClick: () => {
+              commands.setRepeatMode(getNextRepeatMode(state.repeatMode));
+            },
+            pressed: state.repeatMode !== "off",
+            children: /* @__PURE__ */ jsx(RepeatModeIcon, {})
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function VolumeControl({
+  className,
+  commands,
+  state
+}) {
+  const isMuted = state.muted || state.volume === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["player-volume", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: isMuted ? "Unmute" : "Mute",
+            onClick: () => {
+              commands.toggleMute();
+            },
+            pressed: state.muted,
+            children: isMuted ? /* @__PURE__ */ jsx(MuteIcon, {}) : /* @__PURE__ */ jsx(VolumeIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs("label", { children: [
+          /* @__PURE__ */ jsx("span", { className: "player-visually-hidden", children: "Volume" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "aria-label": "Volume",
+              max: 1,
+              min: 0,
+              onChange: (event) => {
+                commands.setVolume(Number(event.currentTarget.value));
+              },
+              step: 0.01,
+              type: "range",
+              value: state.volume
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function PopoverVolumeControl({
+  className,
+  commands,
+  label,
+  state
+}) {
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const rootRef = useRef(null);
+  const sliderRef = useRef(null);
+  const panelId = useId();
+  const isMuted = state.muted || state.volume === 0;
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    sliderRef.current?.focus();
+    const closeOnOutsidePointer = (event) => {
+      if (event.target instanceof Node && !rootRef.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", closeOnOutsidePointer);
+    return () => {
+      document.removeEventListener("pointerdown", closeOnOutsidePointer);
+    };
+  }, [open]);
+  function closeWhenFocusLeaves(event) {
+    if (event.relatedTarget instanceof Node && rootRef.current?.contains(event.relatedTarget)) {
+      return;
+    }
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["player-volume-popover", className].filter(Boolean).join(" "),
+      onBlur: closeWhenFocusLeaves,
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          setOpen(false);
+          buttonRef.current?.focus();
+        }
+      },
+      ref: rootRef,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-controls": panelId,
+            "aria-expanded": open,
+            "aria-label": `${open ? "Close" : "Open"} ${label}`,
+            className: "player-icon-button",
+            onClick: () => {
+              setOpen((current) => !current);
+            },
+            ref: buttonRef,
+            title: `${open ? "Close" : "Open"} ${label}`,
+            type: "button",
+            children: isMuted ? /* @__PURE__ */ jsx(MuteIcon, {}) : /* @__PURE__ */ jsx(VolumeIcon, {})
+          }
+        ),
+        open ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "aria-label": label,
+            className: "player-volume-popover__panel",
+            id: panelId,
+            role: "group",
+            children: [
+              /* @__PURE__ */ jsxs("label", { children: [
+                /* @__PURE__ */ jsx("span", { className: "player-visually-hidden", children: label }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    "aria-label": label,
+                    max: 1,
+                    min: 0,
+                    onChange: (event) => {
+                      commands.setVolume(Number(event.currentTarget.value));
+                    },
+                    ref: sliderRef,
+                    step: 0.01,
+                    type: "range",
+                    value: state.volume
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("output", { children: Math.round(state.volume * 100) })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function QueueToggle({
+  expanded = false,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      label: expanded ? "Close queue" : "Open queue",
+      onClick,
+      pressed: expanded,
+      children: /* @__PURE__ */ jsx(QueueIcon, {})
+    }
+  );
+}
+function PlayerStatus({ state }) {
+  return /* @__PURE__ */ jsx("span", { className: "player-status", "data-status": state.status, children: getStatusLabel(state) });
+}
+function PlayerErrorNotice({
+  commands,
+  state
+}) {
+  if (state.error === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "player-error", role: "alert", children: [
+    /* @__PURE__ */ jsx("span", { children: getErrorMessage(state.error) }),
+    state.error.recoverable ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => {
+          void commands.retry();
+        },
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx(RetryIcon, { size: 16 }),
+          "Retry"
+        ]
+      }
+    ) : null
+  ] });
+}
+var FALLBACK_PEAKS = [
+  0.16,
+  0.24,
+  0.42,
+  0.3,
+  0.58,
+  0.76,
+  0.48,
+  0.34,
+  0.66,
+  0.88,
+  0.62,
+  0.4,
+  0.52,
+  0.72,
+  0.44,
+  0.28,
+  0.56,
+  0.82,
+  0.68,
+  0.38,
+  0.24,
+  0.46,
+  0.32,
+  0.18
+];
+var BAR_COUNT = 512;
+var VIEWBOX_WIDTH = BAR_COUNT;
+function createWaveformBars(peaks) {
+  const source = peaks.length > 1 ? peaks : FALLBACK_PEAKS;
+  return Array.from({ length: BAR_COUNT }, (_, index) => {
+    const sourcePosition = index / Math.max(BAR_COUNT - 1, 1) * (source.length - 1);
+    const leftIndex = Math.floor(sourcePosition);
+    const rightIndex = Math.min(leftIndex + 1, source.length - 1);
+    const mix = sourcePosition - leftIndex;
+    const leftPeak = Math.abs(source[leftIndex] ?? 0);
+    const rightPeak = Math.abs(source[rightIndex] ?? leftPeak);
+    const interpolated = leftPeak + (rightPeak - leftPeak) * mix;
+    if (source.length >= BAR_COUNT) {
+      return clamp(Math.pow(interpolated, 1.18), 0.04, 1);
+    }
+    const noiseSeed = Math.sin((index + 1) * 12.9898 + source.length * 78.233) * 43758.5453;
+    const noise = noiseSeed - Math.floor(noiseSeed);
+    const fineDetail = 0.76 + noise * 0.34;
+    const transient = noise > 0.975 ? 3.2 : noise > 0.91 ? 1.75 : 1;
+    return clamp(
+      Math.pow(interpolated, 1.22) * fineDetail * transient,
+      0.04,
+      1
+    );
+  });
+}
+function Waveform({
+  className,
+  opacity = 1,
+  playedStateEnabled = true,
+  progress = 0,
+  waveform
+}) {
+  const clipId = useId().replaceAll(":", "");
+  const bars = createWaveformBars(waveform?.peaks ?? FALLBACK_PEAKS);
+  const progressWidth = clamp(progress, 0, 1) * VIEWBOX_WIDTH;
+  const classes = ["player-waveform", className].filter(Boolean).join(" ");
+  const barPath = bars.map((peak, index) => {
+    const halfHeight = peak * 47;
+    const x = index + 0.5;
+    return `M ${String(x)} ${String(50 - halfHeight)} V ${String(
+      50 + halfHeight
+    )}`;
+  }).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: classes,
+      focusable: "false",
+      preserveAspectRatio: "none",
+      style: { opacity: clamp(opacity, 0, 1), pointerEvents: "none" },
+      viewBox: `0 0 ${String(VIEWBOX_WIDTH)} 100`,
+      children: [
+        /* @__PURE__ */ jsx("path", { className: "player-waveform__base", d: barPath }),
+        playedStateEnabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { width: progressWidth, height: "100" }) }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: "player-waveform__played",
+              clipPath: `url(#${clipId})`,
+              d: barPath
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+function CompactPlayer({
+  appearance,
+  className,
+  commands,
+  state
+}) {
+  const progress = state.durationSec === null || state.durationSec <= 0 ? 0 : state.currentTimeSec / state.durationSec;
+  return /* @__PURE__ */ jsxs(
+    PlayerSurface,
+    {
+      appearance,
+      className: ["player-compact", className].filter(Boolean).join(" "),
+      label: "Compact music player",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "player-compact__main", children: [
+          /* @__PURE__ */ jsx(PrimaryPlaybackButton, { commands, state }),
+          /* @__PURE__ */ jsx(Artwork, { className: "player-compact__artwork", item: state.currentItem }),
+          /* @__PURE__ */ jsx(
+            TrackMetadata,
+            {
+              item: state.currentItem,
+              scrollTitle: state.status === "playing"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "player-compact__signal", children: [
+            /* @__PURE__ */ jsx(PlayerStatus, { state }),
+            /* @__PURE__ */ jsx(
+              Waveform,
+              {
+                opacity: state.experienceConfig.waveformOpacity,
+                playedStateEnabled: state.experienceConfig.waveformPlayedStateEnabled,
+                progress,
+                waveform: state.currentItem?.waveform
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TimeReadout,
+              {
+                currentTimeSec: state.currentTimeSec,
+                durationSec: state.durationSec
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            PopoverVolumeControl,
+            {
+              commands,
+              label: "Compact volume",
+              state
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(PlayerErrorNotice, { commands, state })
+      ]
+    }
+  );
+}
+function SeekBar({
+  canSeek,
+  className,
+  commitMode,
+  currentTimeSec,
+  durationSec,
+  label = "Seek",
+  onSeek,
+  status
+}) {
+  const duration = durationSec !== null && Number.isFinite(durationSec) && durationSec > 0 ? durationSec : 0;
+  const disabled = !canSeek || duration === 0 || status === "loading";
+  const safeCurrentTime = clamp(currentTimeSec, 0, duration);
+  const [previewTime, setPreviewTime] = useState(safeCurrentTime);
+  const previewProgress = duration === 0 ? 0 : clamp(previewTime / duration, 0, 1) * 100;
+  const isAdjusting = useRef(false);
+  const lastCommitted = useRef(null);
+  useEffect(() => {
+    if (!isAdjusting.current) {
+      setPreviewTime(safeCurrentTime);
+    }
+  }, [safeCurrentTime]);
+  function updatePreview(value) {
+    const nextValue = clamp(value, 0, duration);
+    isAdjusting.current = true;
+    setPreviewTime(nextValue);
+    if (commitMode === "live") {
+      onSeek(nextValue);
+      lastCommitted.current = nextValue;
+    }
+  }
+  function commitPreview(value = previewTime) {
+    const nextValue = clamp(value, 0, duration);
+    if (disabled || !isAdjusting.current || commitMode === "live" && lastCommitted.current === nextValue) {
+      isAdjusting.current = false;
+      return;
+    }
+    onSeek(nextValue);
+    lastCommitted.current = nextValue;
+    isAdjusting.current = false;
+  }
+  function cancelPreview() {
+    isAdjusting.current = false;
+    lastCommitted.current = null;
+    setPreviewTime(safeCurrentTime);
+  }
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: ["player-seek", className].filter(Boolean).join(" "),
+      "data-disabled": disabled ? "true" : "false",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "player-visually-hidden", children: label }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "player-seek__progress",
+            style: { width: `${String(disabled ? 0 : previewProgress)}%` }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-label": label,
+            "aria-valuetext": formatTimeAria(previewTime),
+            disabled,
+            max: duration || 1,
+            min: 0,
+            onBlur: (event) => {
+              commitPreview(Number(event.currentTarget.value));
+            },
+            onChange: (event) => {
+              updatePreview(Number(event.currentTarget.value));
+            },
+            onKeyUp: (event) => {
+              commitPreview(Number(event.currentTarget.value));
+            },
+            onPointerDown: () => {
+              isAdjusting.current = true;
+            },
+            onPointerCancel: cancelPreview,
+            onPointerUp: (event) => {
+              commitPreview(Number(event.currentTarget.value));
+            },
+            step: 0.1,
+            type: "range",
+            value: disabled ? 0 : previewTime
+          }
+        )
+      ]
+    }
+  );
+}
+function QueueRow({
+  commands,
+  index,
+  isCurrent,
+  queue,
+  queueItem
+}) {
+  return /* @__PURE__ */ jsx("li", { "data-current": isCurrent ? "true" : "false", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-current": isCurrent ? "true" : void 0,
+      "aria-label": `Play ${queueItem.item.title}`,
+      onClick: () => {
+        void commands.setQueue(queue, {
+          autoplay: true,
+          startQueueItemId: queueItem.queueItemId
+        });
+      },
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "player-queue-number", children: String(index + 1).padStart(2, "0") }),
+        /* @__PURE__ */ jsx("span", { className: "player-queue-title", children: queueItem.item.title }),
+        /* @__PURE__ */ jsx("time", { children: formatTime(queueItem.item.durationHintSec ?? null) })
+      ]
+    }
+  ) });
+}
+function DetailedPlayer({
+  appearance,
+  className,
+  commands,
+  queueLimit = 8,
+  state
+}) {
+  const safeQueueLimit = Math.max(1, Math.floor(queueLimit));
+  const visibleQueue = state.queue.slice(0, safeQueueLimit);
+  const progress = state.durationSec === null || state.durationSec <= 0 ? 0 : state.currentTimeSec / state.durationSec;
+  return /* @__PURE__ */ jsxs(
+    PlayerSurface,
+    {
+      appearance,
+      className: ["player-detailed", className].filter(Boolean).join(" "),
+      label: "Detailed music player",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "player-detailed__display", children: [
+          /* @__PURE__ */ jsx(
+            Artwork,
+            {
+              className: "player-detailed__artwork",
+              item: state.currentItem
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "player-detailed__primary", children: [
+            /* @__PURE__ */ jsx(
+              TrackMetadata,
+              {
+                item: state.currentItem,
+                scrollTitle: state.status === "playing",
+                status: "Now playing"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Waveform,
+              {
+                opacity: state.experienceConfig.waveformOpacity,
+                playedStateEnabled: state.experienceConfig.waveformPlayedStateEnabled,
+                progress,
+                waveform: state.currentItem?.waveform
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SeekBar,
+              {
+                canSeek: state.canSeek,
+                commitMode: state.experienceConfig.seekCommitMode,
+                currentTimeSec: state.currentTimeSec,
+                durationSec: state.durationSec,
+                onSeek: (seconds) => {
+                  commands.seekTo(seconds);
+                },
+                status: state.status
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "player-detailed__numbers", children: [
+            /* @__PURE__ */ jsxs("div", { className: "player-detailed__metric", children: [
+              /* @__PURE__ */ jsx("span", { className: "player-detailed__metric-label", children: "Track" }),
+              /* @__PURE__ */ jsxs("span", { className: "player-queue-count", children: [
+                state.currentQueueIndex === null ? "--" : String(state.currentQueueIndex + 1).padStart(2, "0"),
+                " / ",
+                String(state.queue.length).padStart(2, "0")
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "player-detailed__metric", children: [
+              /* @__PURE__ */ jsx("span", { className: "player-detailed__metric-label", children: "Current" }),
+              /* @__PURE__ */ jsx("time", { className: "player-detailed__metric-value", children: formatTime(state.currentTimeSec) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "player-detailed__metric", children: [
+              /* @__PURE__ */ jsx("span", { className: "player-detailed__metric-label", children: "Total" }),
+              /* @__PURE__ */ jsx("time", { className: "player-detailed__metric-value", children: formatTime(state.durationSec) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "player-detailed__metric", children: [
+              /* @__PURE__ */ jsx("span", { className: "player-detailed__metric-label", children: "Status" }),
+              /* @__PURE__ */ jsx(PlayerStatus, { state })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "player-detailed__transport", children: /* @__PURE__ */ jsx(TransportControls, { commands, state }) }),
+        /* @__PURE__ */ jsxs("div", { className: "player-detailed__queue", children: [
+          /* @__PURE__ */ jsxs("div", { className: "player-section-heading", children: [
+            /* @__PURE__ */ jsx("span", { children: "Queue" }),
+            /* @__PURE__ */ jsxs("span", { className: "player-queue-count", children: [
+              String(state.queue.length),
+              " items"
+            ] })
+          ] }),
+          visibleQueue.length === 0 ? /* @__PURE__ */ jsx("p", { className: "player-empty", children: "Queue is empty." }) : /* @__PURE__ */ jsx("ol", { children: visibleQueue.map((queueItem, index) => /* @__PURE__ */ jsx(
+            QueueRow,
+            {
+              commands,
+              index,
+              isCurrent: queueItem.queueItemId === state.currentQueueItemId,
+              queue: state.queue,
+              queueItem
+            },
+            queueItem.queueItemId
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx(PlayerErrorNotice, { commands, state })
+      ]
+    }
+  );
+}
+function MiniPlayer({
+  appearance,
+  className,
+  commands,
+  state
+}) {
+  if (state.currentItem === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    PlayerSurface,
+    {
+      appearance,
+      className: ["player-mini", className].filter(Boolean).join(" "),
+      label: "Mini music player",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "player-mini__main", children: [
+          /* @__PURE__ */ jsx(Artwork, { className: "player-mini__artwork", item: state.currentItem }),
+          /* @__PURE__ */ jsx(
+            TrackMetadata,
+            {
+              item: state.currentItem,
+              scrollTitle: state.status === "playing"
+            }
+          ),
+          /* @__PURE__ */ jsx(PlayerStatus, { state }),
+          /* @__PURE__ */ jsxs("div", { className: "player-mini__controls", children: [
+            /* @__PURE__ */ jsx(
+              TransportControls,
+              {
+                commands,
+                compact: true,
+                showModes: false,
+                state
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              PopoverVolumeControl,
+              {
+                commands,
+                label: "Mini volume",
+                state
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "player-mini__timeline", children: [
+            /* @__PURE__ */ jsx(
+              SeekBar,
+              {
+                canSeek: state.canSeek,
+                commitMode: state.experienceConfig.seekCommitMode,
+                currentTimeSec: state.currentTimeSec,
+                durationSec: state.durationSec,
+                label: "Seek in mini player",
+                onSeek: (seconds) => {
+                  commands.seekTo(seconds);
+                },
+                status: state.status
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TimeReadout,
+              {
+                currentTimeSec: state.currentTimeSec,
+                durationSec: state.durationSec
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(PlayerErrorNotice, { commands, state })
+      ]
+    }
+  );
+}
+function PodcastPlayer({
+  appearance,
+  className,
+  commands,
+  state
+}) {
+  const progress = state.durationSec === null || state.durationSec <= 0 ? 0 : state.currentTimeSec / state.durationSec;
+  const backSeconds = state.experienceConfig.podcastBackSec;
+  const forwardSeconds = state.experienceConfig.podcastForwardSec;
+  return /* @__PURE__ */ jsxs(
+    PlayerSurface,
+    {
+      appearance,
+      className: ["player-podcast", className].filter(Boolean).join(" "),
+      label: "Podcast player",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "player-podcast__header", children: [
+          /* @__PURE__ */ jsx(
+            Artwork,
+            {
+              className: "player-podcast__artwork",
+              item: state.currentItem
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TrackMetadata,
+            {
+              item: state.currentItem,
+              scrollTitle: state.status === "playing",
+              status: "Now playing"
+            }
+          ),
+          /* @__PURE__ */ jsx(PlayerStatus, { state })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "player-podcast__timeline", children: [
+          /* @__PURE__ */ jsx(
+            Waveform,
+            {
+              opacity: state.experienceConfig.waveformOpacity,
+              playedStateEnabled: state.experienceConfig.waveformPlayedStateEnabled,
+              progress,
+              waveform: state.currentItem?.waveform
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SeekBar,
+            {
+              canSeek: state.canSeek,
+              commitMode: state.experienceConfig.seekCommitMode,
+              currentTimeSec: state.currentTimeSec,
+              durationSec: state.durationSec,
+              onSeek: (seconds) => {
+                commands.seekTo(seconds);
+              },
+              status: state.status
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TimeReadout,
+            {
+              currentTimeSec: state.currentTimeSec,
+              durationSec: state.durationSec
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "aria-label": "Podcast playback controls",
+            className: "player-podcast__transport",
+            role: "group",
+            children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  disabled: !state.canGoPrevious,
+                  label: "Previous episode",
+                  onClick: () => {
+                    void commands.previous();
+                  },
+                  children: /* @__PURE__ */ jsx(PreviousIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  disabled: !state.canSeek,
+                  label: `Skip back ${String(backSeconds)} seconds`,
+                  onClick: () => {
+                    commands.seekBy(-backSeconds);
+                  },
+                  children: /* @__PURE__ */ jsx(PodcastSkipBackIcon, { size: 28 })
+                }
+              ),
+              /* @__PURE__ */ jsx(PrimaryPlaybackButton, { commands, state }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  disabled: !state.canSeek,
+                  label: `Skip forward ${String(forwardSeconds)} seconds`,
+                  onClick: () => {
+                    commands.seekBy(forwardSeconds);
+                  },
+                  children: /* @__PURE__ */ jsx(PodcastSkipForwardIcon, { size: 28 })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  disabled: !state.canGoNext,
+                  label: "Next episode",
+                  onClick: () => {
+                    void commands.next();
+                  },
+                  children: /* @__PURE__ */ jsx(NextIcon, {})
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(PlayerErrorNotice, { commands, state })
+      ]
+    }
+  );
+}
+function QueuePanel({
+  appearance,
+  className,
+  commands,
+  label = "Queue",
+  onClose,
+  state
+}) {
+  return /* @__PURE__ */ jsxs(
+    PlayerSurface,
+    {
+      appearance,
+      className: ["player-queue-panel", className].filter(Boolean).join(" "),
+      label: "Queue panel",
+      children: [
+        /* @__PURE__ */ jsxs("header", { children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "player-kicker", children: "Playlist" }),
+            /* @__PURE__ */ jsx("h2", { children: label })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "player-queue-count", children: [
+            String(state.queue.length),
+            " items"
+          ] }),
+          onClose === void 0 ? null : /* @__PURE__ */ jsx(IconButton, { label: "Close queue", onClick: onClose, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+        ] }),
+        state.queue.length === 0 ? /* @__PURE__ */ jsx("p", { className: "player-empty", children: "Queue is empty." }) : /* @__PURE__ */ jsx("ol", { children: state.queue.map((queueItem, index) => {
+          const isCurrent = queueItem.queueItemId === state.currentQueueItemId;
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              "data-current": isCurrent ? "true" : "false",
+              children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  "aria-current": isCurrent ? "true" : void 0,
+                  "aria-label": `Play ${queueItem.item.title}`,
+                  onClick: () => {
+                    void commands.setQueue(state.queue, {
+                      autoplay: true,
+                      startQueueItemId: queueItem.queueItemId
+                    });
+                  },
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "player-queue-number", children: String(index + 1).padStart(2, "0") }),
+                    /* @__PURE__ */ jsxs("span", { className: "player-queue-copy", children: [
+                      /* @__PURE__ */ jsx("strong", { children: queueItem.item.title }),
+                      /* @__PURE__ */ jsx("small", { children: queueItem.item.creatorName ?? "Creator unavailable" })
+                    ] }),
+                    /* @__PURE__ */ jsx("time", { children: formatTime(queueItem.item.durationHintSec ?? null) })
+                  ]
+                }
+              )
+            },
+            queueItem.queueItemId
+          );
+        }) })
+      ]
+    }
+  );
+}
+function WidePlayer({
+  appearance,
+  className,
+  commands,
+  state
+}) {
+  const progress = state.durationSec === null || state.durationSec <= 0 ? 0 : state.currentTimeSec / state.durationSec;
+  return /* @__PURE__ */ jsxs(
+    PlayerSurface,
+    {
+      appearance,
+      className: ["player-wide", className].filter(Boolean).join(" "),
+      label: "Wide music player",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "player-wide__grid", children: [
+          /* @__PURE__ */ jsxs("div", { className: "player-wide__header", children: [
+            /* @__PURE__ */ jsx(Artwork, { className: "player-wide__artwork", item: state.currentItem }),
+            /* @__PURE__ */ jsxs("div", { className: "player-wide__identity", children: [
+              /* @__PURE__ */ jsx(
+                TrackMetadata,
+                {
+                  item: state.currentItem,
+                  scrollTitle: state.status === "playing",
+                  status: "Now playing"
+                }
+              ),
+              /* @__PURE__ */ jsx(PlayerStatus, { state })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "player-wide__content", children: [
+            /* @__PURE__ */ jsxs("div", { className: "player-timeline", children: [
+              /* @__PURE__ */ jsx(
+                Waveform,
+                {
+                  opacity: state.experienceConfig.waveformOpacity,
+                  playedStateEnabled: state.experienceConfig.waveformPlayedStateEnabled,
+                  progress,
+                  waveform: state.currentItem?.waveform
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SeekBar,
+                {
+                  canSeek: state.canSeek,
+                  commitMode: state.experienceConfig.seekCommitMode,
+                  currentTimeSec: state.currentTimeSec,
+                  durationSec: state.durationSec,
+                  onSeek: (seconds) => {
+                    commands.seekTo(seconds);
+                  },
+                  status: state.status
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "player-wide__timeline-footer", children: [
+                /* @__PURE__ */ jsx(
+                  TimeReadout,
+                  {
+                    currentTimeSec: state.currentTimeSec,
+                    durationSec: state.durationSec
+                  }
+                ),
+                /* @__PURE__ */ jsx(VolumeControl, { commands, state })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(TransportControls, { commands, state })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(PlayerErrorNotice, { commands, state })
+      ]
+    }
+  );
+}
+
+export { Artwork, CompactPlayer, DetailedPlayer, IconButton, MiniPlayer, PlayerErrorNotice, PlayerStatus, PlayerSurface, PodcastPlayer, PopoverVolumeControl, PrimaryPlaybackButton, QueuePanel, QueueToggle, SeekBar, TimeReadout, TrackMetadata, TransportControls, VolumeControl, Waveform, WidePlayer, clamp, formatTime, formatTimeAria, getErrorMessage, getNextRepeatMode, getRepeatLabel, getStatusLabel };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map