@gentomiyano/optimized-web-audio-player 0.2.2 → 0.3.0

package/dist/ui/index.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useId, useEffect } from 'react';
+import { useState, useRef, useId, useEffect, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/ui/player-primitives.tsx
@@ -174,6 +174,8 @@ function getErrorMessage(error) {
       return "This media could not be decoded.";
     case "unsupported":
       return "This media format is not supported.";
+    case "seek":
+      return "Seeking failed. Try again.";
     case "audio-context":
       return "Audio output is not available.";
     case "unknown":
@@ -293,6 +295,9 @@ function TrackMetadata({
   scrollTitle = false,
   status
 }) {
+  const intrinsicContext = item?.contentContext;
+  const creatorName = item?.creatorName ?? (intrinsicContext?.sourceType === "release-track" ? intrinsicContext.artistName : void 0);
+  const collectionTitle = item?.collectionTitle ?? (intrinsicContext?.sourceType === "release-track" ? intrinsicContext.releaseTitle : intrinsicContext?.sourceType === "podcast-episode" ? intrinsicContext.programTitle : void 0);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -307,8 +312,8 @@ function TrackMetadata({
           },
           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 })
+        /* @__PURE__ */ jsx("span", { className: "player-creator", children: item === null ? "Select media to begin" : creatorName ?? "Artist unavailable" }),
+        collectionTitle === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "player-collection", children: collectionTitle })
       ]
     }
   );
@@ -724,59 +729,84 @@ function Waveform({
     }
   );
 }
-function CompactPlayer({
+function CompactPlayerLayout({
   appearance,
   className,
-  commands,
-  state
+  contextId,
+  contextMode,
+  currentTimeSec,
+  durationSec,
+  errorNotice,
+  isActive,
+  isPlaying,
+  item,
+  label,
+  primaryControl,
+  queueItemId,
+  runtimeStatus,
+  seekControl,
+  status,
+  trailingControl,
+  waveformOpacity,
+  waveformPlayedStateEnabled
 }) {
-  const progress = state.durationSec === null || state.durationSec <= 0 ? 0 : state.currentTimeSec / state.durationSec;
+  const progress = durationSec === null || durationSec <= 0 ? 0 : currentTimeSec / durationSec;
   return /* @__PURE__ */ jsxs(
     PlayerSurface,
     {
       appearance,
       className: ["player-compact", className].filter(Boolean).join(" "),
-      label: "Compact music player",
+      label,
       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 })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "player-compact__main",
+            ...isActive === void 0 ? {} : { "data-active": isActive ? "true" : "false" },
+            "data-has-status": status === void 0 ? "false" : "true",
+            "data-has-trailing-control": trailingControl === void 0 ? "false" : "true",
+            "data-playback-context-id": contextId,
+            "data-playback-context-mode": contextMode,
+            "data-player-runtime-status": runtimeStatus,
+            "data-queue-item-id": queueItemId,
+            children: [
+              primaryControl,
+              /* @__PURE__ */ jsx(Artwork, { className: "player-compact__artwork", item }),
+              /* @__PURE__ */ jsx(TrackMetadata, { item, scrollTitle: isPlaying }),
+              /* @__PURE__ */ jsxs("div", { className: "player-compact__signal", children: [
+                status,
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "player-compact__scrubber",
+                    "data-seek-enabled": seekControl === void 0 ? "false" : "true",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Waveform,
+                        {
+                          opacity: waveformOpacity,
+                          playedStateEnabled: waveformPlayedStateEnabled,
+                          progress,
+                          waveform: item?.waveform
+                        }
+                      ),
+                      seekControl
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TimeReadout,
+                  {
+                    currentTimeSec,
+                    durationSec
+                  }
+                )
+              ] }),
+              trailingControl
+            ]
+          }
+        ),
+        errorNotice
       ]
     }
   );
@@ -875,6 +905,52 @@ function SeekBar({
     }
   );
 }
+function CompactPlayer({
+  appearance,
+  className,
+  commands,
+  state
+}) {
+  return /* @__PURE__ */ jsx(
+    CompactPlayerLayout,
+    {
+      appearance,
+      ...className === void 0 ? {} : { className },
+      currentTimeSec: state.currentTimeSec,
+      durationSec: state.durationSec,
+      errorNotice: /* @__PURE__ */ jsx(PlayerErrorNotice, { commands, state }),
+      isPlaying: state.status === "playing",
+      item: state.currentItem,
+      label: "Compact music player",
+      primaryControl: /* @__PURE__ */ jsx(PrimaryPlaybackButton, { commands, state }),
+      seekControl: /* @__PURE__ */ jsx(
+        SeekBar,
+        {
+          canSeek: state.canSeek,
+          commitMode: state.experienceConfig.seekCommitMode,
+          currentTimeSec: state.currentTimeSec,
+          durationSec: state.durationSec,
+          label: `Seek in ${state.currentItem?.title ?? "current media"}`,
+          onSeek: (seconds) => {
+            commands.seekTo(seconds);
+          },
+          status: state.status
+        }
+      ),
+      status: /* @__PURE__ */ jsx(PlayerStatus, { state }),
+      trailingControl: /* @__PURE__ */ jsx(
+        PopoverVolumeControl,
+        {
+          commands,
+          label: "Compact volume",
+          state
+        }
+      ),
+      waveformOpacity: state.experienceConfig.waveformOpacity,
+      waveformPlayedStateEnabled: state.experienceConfig.waveformPlayedStateEnabled
+    }
+  );
+}
 function BoundCompactPlayerView({
   appearance,
   className,
@@ -885,77 +961,48 @@ function BoundCompactPlayerView({
   runtimeStatus,
   state
 }) {
-  const progress = state.durationSec === null || state.durationSec <= 0 ? 0 : state.currentTimeSec / state.durationSec;
   return /* @__PURE__ */ jsx(
-    PlayerSurface,
+    CompactPlayerLayout,
     {
       appearance,
-      className: ["player-bound-compact", className].filter(Boolean).join(" "),
+      ...className === void 0 ? {} : { className },
+      ...contextId === void 0 ? {} : { contextId },
+      ...contextMode === void 0 ? {} : { contextMode },
+      currentTimeSec: state.currentTimeSec,
+      durationSec: state.durationSec,
+      isActive: state.isActive,
+      isPlaying: state.isPlaying,
+      item: state.item,
       label: `Inline player: ${state.item.title}`,
-      children: /* @__PURE__ */ jsxs(
-        "div",
+      primaryControl: /* @__PURE__ */ jsx(
+        IconButton,
         {
-          className: "player-bound-compact__main",
-          "data-active": state.isActive ? "true" : "false",
-          "data-playback-context-id": contextId,
-          "data-playback-context-mode": contextMode,
-          "data-player-runtime-status": runtimeStatus,
-          "data-queue-item-id": state.queueItemId,
-          children: [
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                className: "player-play-button",
-                label: state.isPlaying ? "Pause" : "Play",
-                onClick: () => {
-                  void commands.togglePlayback();
-                },
-                children: state.isPlaying ? /* @__PURE__ */ jsx(PauseIcon, { size: 22 }) : /* @__PURE__ */ jsx(PlayIcon, { size: 22 })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Artwork,
-              {
-                className: "player-bound-compact__artwork",
-                item: state.item
-              }
-            ),
-            /* @__PURE__ */ jsx(TrackMetadata, { item: state.item, scrollTitle: state.isPlaying }),
-            /* @__PURE__ */ jsxs("div", { className: "player-bound-compact__signal", children: [
-              /* @__PURE__ */ jsx(
-                Waveform,
-                {
-                  opacity: options.waveformOpacity,
-                  playedStateEnabled: options.waveformPlayedStateEnabled,
-                  progress,
-                  waveform: state.item.waveform
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                TimeReadout,
-                {
-                  currentTimeSec: state.currentTimeSec,
-                  durationSec: state.durationSec
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              SeekBar,
-              {
-                canSeek: state.canSeek,
-                commitMode: options.seekCommitMode,
-                currentTimeSec: state.currentTimeSec,
-                durationSec: state.durationSec,
-                label: `Seek in ${state.item.title}`,
-                onSeek: (seconds) => {
-                  commands.seekTo(seconds);
-                },
-                status: state.status
-              }
-            )
-          ]
+          className: "player-play-button",
+          label: state.isPlaying ? "Pause" : "Play",
+          onClick: () => {
+            void commands.togglePlayback();
+          },
+          children: state.isPlaying ? /* @__PURE__ */ jsx(PauseIcon, { size: 22 }) : /* @__PURE__ */ jsx(PlayIcon, { size: 22 })
         }
-      )
+      ),
+      queueItemId: state.queueItemId,
+      ...runtimeStatus === void 0 ? {} : { runtimeStatus },
+      seekControl: /* @__PURE__ */ jsx(
+        SeekBar,
+        {
+          canSeek: state.canSeek,
+          commitMode: options.seekCommitMode,
+          currentTimeSec: state.currentTimeSec,
+          durationSec: state.durationSec,
+          label: `Seek in ${state.item.title}`,
+          onSeek: (seconds) => {
+            commands.seekTo(seconds);
+          },
+          status: state.status
+        }
+      ),
+      waveformOpacity: options.waveformOpacity,
+      waveformPlayedStateEnabled: options.waveformPlayedStateEnabled
     }
   );
 }
@@ -1092,6 +1139,747 @@ function DetailedPlayer({
     }
   );
 }
+
+// src/consumer/content-context.ts
+function contentContextMatches(context, expected) {
+  if (context?.sourceType !== expected.sourceType) {
+    return false;
+  }
+  if (context.sourceType === "release-track") {
+    return context.releaseId === expected.parentId && context.trackId === expected.entryId;
+  }
+  return context.programId === expected.parentId && context.episodeId === expected.entryId;
+}
+function buildIntrinsicContext(entries, contextId, label, expectedSourceType, parentId) {
+  const queue = [];
+  const rejected = [];
+  const contentIds = /* @__PURE__ */ new Set();
+  const queueItemIds = /* @__PURE__ */ new Set();
+  entries.forEach((entry, entryIndex) => {
+    if (contentIds.has(entry.id)) {
+      rejected.push({
+        entryId: entry.id,
+        entryIndex,
+        reason: "duplicate-content-id"
+      });
+      return;
+    }
+    contentIds.add(entry.id);
+    if (entry.availability.state !== "ready") {
+      if (entry.queueItem !== void 0) {
+        rejected.push({
+          entryId: entry.id,
+          entryIndex,
+          reason: "non-ready-with-queue-item"
+        });
+      }
+      return;
+    }
+    if (entry.queueItem === void 0) {
+      rejected.push({
+        entryId: entry.id,
+        entryIndex,
+        reason: "ready-without-queue-item"
+      });
+      return;
+    }
+    if (queueItemIds.has(entry.queueItem.queueItemId)) {
+      rejected.push({
+        entryId: entry.id,
+        entryIndex,
+        reason: "duplicate-queue-item-id"
+      });
+      return;
+    }
+    if (!contentContextMatches(entry.queueItem.item.contentContext, {
+      sourceType: expectedSourceType,
+      parentId,
+      entryId: entry.id
+    })) {
+      rejected.push({
+        entryId: entry.id,
+        entryIndex,
+        reason: "content-context-mismatch"
+      });
+      return;
+    }
+    queueItemIds.add(entry.queueItem.queueItemId);
+    queue.push(entry.queueItem);
+  });
+  return Object.freeze({
+    context: Object.freeze({
+      id: contextId,
+      mode: "ordered-queue",
+      label,
+      queue: Object.freeze(queue)
+    }),
+    rejected: Object.freeze(
+      rejected.map((rejection) => Object.freeze(rejection))
+    )
+  });
+}
+function buildReleasePlaybackContext(release) {
+  return buildIntrinsicContext(
+    release.tracks,
+    release.contextId ?? `release:${release.id}`,
+    release.title,
+    "release-track",
+    release.id
+  );
+}
+function buildPodcastPlaybackContext(program) {
+  return buildIntrinsicContext(
+    program.episodes,
+    program.contextId ?? `podcast:${program.id}`,
+    program.title,
+    "podcast-episode",
+    program.id
+  );
+}
+function findActivePodcastChapter(chapters, currentTimeSec) {
+  if (chapters === void 0 || !Number.isFinite(currentTimeSec)) {
+    return null;
+  }
+  let active = null;
+  for (const chapter of chapters) {
+    if (!Number.isFinite(chapter.startTimeSec) || chapter.startTimeSec < 0 || chapter.startTimeSec > currentTimeSec) {
+      continue;
+    }
+    if (active === null || chapter.startTimeSec >= active.startTimeSec) {
+      active = chapter;
+    }
+  }
+  return active;
+}
+function ContentArtwork({
+  alt,
+  artwork,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: ["player-content__artwork", className].filter(Boolean).join(" "),
+      children: artwork === void 0 ? /* @__PURE__ */ jsx("span", { "aria-label": `${alt} artwork unavailable`, role: "img" }) : /* @__PURE__ */ jsx("img", { alt: artwork.alt, src: artwork.url })
+    }
+  );
+}
+function availabilityLabel(state) {
+  switch (state) {
+    case "ready":
+      return "Ready";
+    case "processing":
+      return "Processing";
+    case "locked":
+      return "Locked";
+    case "failed":
+      return "Unavailable";
+    case "unavailable":
+      return "Unavailable";
+  }
+}
+function IntrinsicTransport({
+  active,
+  canStart,
+  commands,
+  onStart,
+  state
+}) {
+  const isPlaying = active && state.status === "playing";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Content playback controls",
+      className: "player-content__transport",
+      role: "group",
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            disabled: !active || !state.canGoPrevious,
+            label: "Previous item",
+            onClick: () => {
+              void commands.previous();
+            },
+            children: /* @__PURE__ */ jsx(PreviousIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: [
+              "player-play-button",
+              isPlaying ? "player-play-button--active" : ""
+            ].filter(Boolean).join(" "),
+            disabled: !canStart || active && state.status === "loading",
+            label: isPlaying ? "Pause" : "Play",
+            onClick: () => {
+              if (active) {
+                void commands.togglePlayback();
+              } else {
+                onStart();
+              }
+            },
+            children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, { size: 22 }) : /* @__PURE__ */ jsx(PlayIcon, { size: 22 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            disabled: !active || !state.canGoNext,
+            label: "Next item",
+            onClick: () => {
+              void commands.next();
+            },
+            children: /* @__PURE__ */ jsx(NextIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function activateIntrinsicItem(commands, context, queueItemId) {
+  commands.setShuffle(false);
+  commands.setRepeatMode("off");
+  return commands.activateContext({
+    contextId: context.id,
+    mode: "ordered-queue",
+    ...context.label === void 0 ? {} : { label: context.label },
+    queue: context.queue,
+    startQueueItemId: queueItemId,
+    autoplay: true
+  });
+}
+function useIntrinsicContextGuard(commands, context, state) {
+  const nextQueueKey = context.queue.map((entry) => entry.queueItemId).join("\0");
+  const activeQueueKey = state.activeContext?.queue.map((entry) => entry.queueItemId).join("\0");
+  useEffect(() => {
+    if (state.activeContext?.id !== context.id || state.currentQueueItemId === null) {
+      return;
+    }
+    if (!context.queue.some(
+      (entry) => entry.queueItemId === state.currentQueueItemId
+    )) {
+      void commands.clear();
+      return;
+    }
+    if (activeQueueKey !== nextQueueKey) {
+      commands.setShuffle(false);
+      commands.setRepeatMode("off");
+      void commands.activateContext({
+        contextId: context.id,
+        mode: "ordered-queue",
+        ...context.label === void 0 ? {} : { label: context.label },
+        queue: context.queue,
+        startQueueItemId: state.currentQueueItemId,
+        autoplay: state.status === "playing"
+      });
+    }
+  }, [
+    activeQueueKey,
+    commands,
+    context,
+    nextQueueKey,
+    state.activeContext?.id,
+    state.currentQueueItemId,
+    state.status
+  ]);
+}
+function ReleasePlayer({
+  appearance,
+  className,
+  commands,
+  release,
+  state
+}) {
+  const build = useMemo(
+    () => buildReleasePlaybackContext(release),
+    [release]
+  );
+  const playableIds = new Set(
+    build.context.queue.map((entry) => entry.queueItemId)
+  );
+  const active = state.activeContext?.id === build.context.id;
+  useIntrinsicContextGuard(commands, build.context, state);
+  const currentTrackId = active && state.currentItem?.contentContext?.sourceType === "release-track" ? state.currentItem.contentContext.trackId : null;
+  const first = build.context.queue[0];
+  const currentTrack = release.tracks.find((track) => track.id === currentTrackId) ?? release.tracks.find(
+    (track) => track.queueItem?.queueItemId === first?.queueItemId
+  ) ?? null;
+  const displayItem = active ? state.currentItem : first?.item ?? null;
+  const displayCurrentTimeSec = active ? state.currentTimeSec : 0;
+  const displayDurationSec = active ? state.durationSec : displayItem?.durationHintSec ?? null;
+  const waveformProgress = displayDurationSec === null || displayDurationSec <= 0 ? 0 : displayCurrentTimeSec / displayDurationSec;
+  const playTrack = (track) => {
+    if (track.queueItem === void 0 || !playableIds.has(track.queueItem.queueItemId)) {
+      return;
+    }
+    void activateIntrinsicItem(
+      commands,
+      build.context,
+      track.queueItem.queueItemId
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    PlayerSurface,
+    {
+      appearance,
+      className: ["player-release", "player-content", className].filter(Boolean).join(" "),
+      label: "Release player",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "player-release__hero", children: [
+          /* @__PURE__ */ jsx(
+            ContentArtwork,
+            {
+              alt: release.title,
+              artwork: release.artwork,
+              className: "player-release__artwork"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "player-release__detail", children: [
+            /* @__PURE__ */ jsxs("header", { className: "player-release__identity", children: [
+              /* @__PURE__ */ jsx("span", { className: "player-kicker", children: "Release" }),
+              /* @__PURE__ */ jsx("h2", { children: release.title }),
+              /* @__PURE__ */ jsx("p", { className: "player-release__artist", children: release.artistName }),
+              release.releaseDate === void 0 && release.releaseType === void 0 ? null : /* @__PURE__ */ jsxs("dl", { className: "player-release__facts", children: [
+                release.releaseDate === void 0 ? null : /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("dt", { children: "Released" }),
+                  /* @__PURE__ */ jsx("dd", { children: release.releaseDate })
+                ] }),
+                release.releaseType === void 0 ? null : /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("dt", { children: "Format" }),
+                  /* @__PURE__ */ jsx("dd", { children: release.releaseType })
+                ] })
+              ] })
+            ] }),
+            release.notes === void 0 ? null : /* @__PURE__ */ jsx("p", { className: "player-release__notes", children: release.notes }),
+            release.credits === void 0 || release.credits.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: "player-release__credits", children: [
+              /* @__PURE__ */ jsx("span", { children: "Credits" }),
+              /* @__PURE__ */ jsx("ul", { children: release.credits.map((credit) => /* @__PURE__ */ jsx("li", { children: credit }, credit)) })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "section",
+              {
+                "aria-label": "Current Release Track",
+                className: "player-release__playback",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "player-release__now-playing", children: [
+                    /* @__PURE__ */ jsx("span", { children: "Current Track" }),
+                    /* @__PURE__ */ jsx("strong", { children: currentTrack === null ? "No playable Tracks" : currentTrack.title }),
+                    active ? /* @__PURE__ */ jsx(PlayerStatus, { state }) : null
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "player-release__signal", children: [
+                    /* @__PURE__ */ jsx(
+                      Waveform,
+                      {
+                        opacity: state.experienceConfig.waveformOpacity,
+                        playedStateEnabled: state.experienceConfig.waveformPlayedStateEnabled,
+                        progress: waveformProgress,
+                        waveform: displayItem?.waveform
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      SeekBar,
+                      {
+                        canSeek: active && state.canSeek,
+                        commitMode: state.experienceConfig.seekCommitMode,
+                        currentTimeSec: displayCurrentTimeSec,
+                        durationSec: displayDurationSec,
+                        label: "Seek in current Release Track",
+                        onSeek: (seconds) => {
+                          commands.seekTo(seconds);
+                        },
+                        status: active ? state.status : "paused"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      TimeReadout,
+                      {
+                        currentTimeSec: displayCurrentTimeSec,
+                        durationSec: displayDurationSec
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    IntrinsicTransport,
+                    {
+                      active,
+                      canStart: first !== void 0,
+                      commands,
+                      onStart: () => {
+                        if (first !== void 0) {
+                          void activateIntrinsicItem(
+                            commands,
+                            build.context,
+                            first.queueItemId
+                          );
+                        }
+                      },
+                      state
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "section",
+          {
+            "aria-labelledby": `release-tracklist-${release.id}`,
+            className: "player-release__tracklist",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "player-section-heading", children: [
+                /* @__PURE__ */ jsx("span", { id: `release-tracklist-${release.id}`, children: "Tracklist" }),
+                /* @__PURE__ */ jsxs("span", { className: "player-queue-count", children: [
+                  String(release.tracks.length),
+                  " tracks"
+                ] })
+              ] }),
+              release.tracks.length === 0 ? /* @__PURE__ */ jsx("p", { className: "player-empty", children: "Tracklist is empty." }) : /* @__PURE__ */ jsx("ol", { className: "player-content__list", children: release.tracks.map((track, index) => {
+                const playable = track.queueItem !== void 0 && playableIds.has(track.queueItem.queueItemId);
+                const isCurrent = track.id === currentTrackId;
+                return /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    "data-availability": track.availability.state,
+                    "data-current": isCurrent ? "true" : "false",
+                    children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        "aria-current": isCurrent ? "true" : void 0,
+                        "aria-label": playable ? `Play track ${track.title}` : `${track.title}: ${availabilityLabel(track.availability.state)}`,
+                        disabled: !playable,
+                        onClick: () => {
+                          playTrack(track);
+                        },
+                        type: "button",
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "player-queue-number", children: String(track.trackNumber ?? index + 1).padStart(2, "0") }),
+                          /* @__PURE__ */ jsxs("span", { className: "player-content__entry-copy", children: [
+                            /* @__PURE__ */ jsx("strong", { children: track.title }),
+                            /* @__PURE__ */ jsx("small", { children: availabilityLabel(track.availability.state) })
+                          ] }),
+                          /* @__PURE__ */ jsx("time", { children: formatTime(track.durationHintSec ?? null) })
+                        ]
+                      }
+                    )
+                  },
+                  `${track.id}:${String(index)}`
+                );
+              }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(PlayerErrorNotice, { commands, state })
+      ]
+    }
+  );
+}
+function PodcastProgramPlayer({
+  appearance,
+  className,
+  commands,
+  program,
+  state
+}) {
+  const build = useMemo(
+    () => buildPodcastPlaybackContext(program),
+    [program]
+  );
+  const playableIds = new Set(
+    build.context.queue.map((entry) => entry.queueItemId)
+  );
+  const active = state.activeContext?.id === build.context.id;
+  useIntrinsicContextGuard(commands, build.context, state);
+  const currentEpisodeId = active && state.currentItem?.contentContext?.sourceType === "podcast-episode" ? state.currentItem.contentContext.episodeId : null;
+  const currentEpisode = program.episodes.find((episode) => episode.id === currentEpisodeId) ?? null;
+  const first = build.context.queue[0];
+  const displayEpisode = currentEpisode ?? program.episodes.find(
+    (episode) => episode.queueItem?.queueItemId === first?.queueItemId
+  ) ?? null;
+  const selectedEpisodeId = displayEpisode?.id ?? null;
+  const displayItem = active ? state.currentItem : first?.item ?? null;
+  const displayCurrentTimeSec = active ? state.currentTimeSec : 0;
+  const displayDurationSec = active ? state.durationSec : displayEpisode?.durationHintSec ?? displayItem?.durationHintSec ?? null;
+  const waveformProgress = displayDurationSec === null || displayDurationSec <= 0 ? 0 : displayCurrentTimeSec / displayDurationSec;
+  const activeChapter = findActivePodcastChapter(
+    displayEpisode?.chapters,
+    displayCurrentTimeSec
+  );
+  const [pendingChapter, setPendingChapter] = useState(null);
+  const [chaptersExpanded, setChaptersExpanded] = useState(false);
+  useEffect(() => {
+    setChaptersExpanded(false);
+  }, [displayEpisode?.id]);
+  useEffect(() => {
+    if (pendingChapter !== null && state.currentQueueItemId === pendingChapter.queueItemId && state.canSeek) {
+      commands.seekTo(pendingChapter.seconds);
+      setPendingChapter(null);
+    }
+  }, [commands, pendingChapter, state.canSeek, state.currentQueueItemId]);
+  const playEpisode = (episode) => {
+    if (episode.queueItem === void 0 || !playableIds.has(episode.queueItem.queueItemId)) {
+      return null;
+    }
+    return activateIntrinsicItem(
+      commands,
+      build.context,
+      episode.queueItem.queueItemId
+    );
+  };
+  const selectChapter = (episode, chapter) => {
+    if (episode.queueItem === void 0 || !playableIds.has(episode.queueItem.queueItemId)) {
+      return;
+    }
+    if (active && state.currentQueueItemId === episode.queueItem.queueItemId && state.canSeek) {
+      commands.seekTo(chapter.startTimeSec);
+      return;
+    }
+    setPendingChapter({
+      queueItemId: episode.queueItem.queueItemId,
+      seconds: chapter.startTimeSec
+    });
+    void playEpisode(episode)?.then((result) => {
+      if (!result.ok) {
+        setPendingChapter(null);
+      }
+    });
+  };
+  const backSeconds = state.experienceConfig.podcastBackSec;
+  const forwardSeconds = state.experienceConfig.podcastForwardSec;
+  const chapters = displayEpisode?.chapters ?? [];
+  const visibleChapters = chaptersExpanded ? chapters : chapters.slice(0, 4);
+  return /* @__PURE__ */ jsxs(
+    PlayerSurface,
+    {
+      appearance,
+      className: ["player-program", "player-content", className].filter(Boolean).join(" "),
+      label: "Podcast program player",
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "player-program__hero", children: [
+          /* @__PURE__ */ jsx(
+            ContentArtwork,
+            {
+              alt: program.title,
+              artwork: program.artwork,
+              className: "player-program__artwork"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "player-program__detail", children: [
+            /* @__PURE__ */ jsx("span", { className: "player-kicker", children: "Podcast Program" }),
+            /* @__PURE__ */ jsx("h2", { children: program.title }),
+            program.description === void 0 ? null : /* @__PURE__ */ jsx("p", { className: "player-program__description", children: program.description }),
+            program.hosts === void 0 && program.credits === void 0 ? null : /* @__PURE__ */ jsxs("dl", { className: "player-program__credits", children: [
+              program.hosts === void 0 || program.hosts.length === 0 ? null : /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("dt", { children: "Host" }),
+                /* @__PURE__ */ jsx("dd", { children: program.hosts.join(" / ") })
+              ] }),
+              program.credits === void 0 || program.credits.length === 0 ? null : /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("dt", { children: "Credits" }),
+                /* @__PURE__ */ jsx("dd", { children: program.credits.join(" / ") })
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "section",
+          {
+            "aria-label": "Current Podcast Episode",
+            className: "player-program__episode",
+            children: [
+              /* @__PURE__ */ jsxs("header", { className: "player-program__episode-heading", children: [
+                /* @__PURE__ */ jsx("span", { className: "player-kicker", children: "Current Episode" }),
+                /* @__PURE__ */ jsx("h3", { children: displayEpisode === null ? "No playable Episodes" : displayEpisode.title }),
+                displayEpisode === null ? null : /* @__PURE__ */ jsxs("dl", { className: "player-program__episode-facts", children: [
+                  displayEpisode.publishedAt === void 0 ? null : /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("dt", { children: "Published" }),
+                    /* @__PURE__ */ jsx("dd", { children: displayEpisode.publishedAt })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("dt", { children: "Duration" }),
+                    /* @__PURE__ */ jsx("dd", { children: formatTime(displayDurationSec) })
+                  ] })
+                ] }),
+                displayEpisode?.description === void 0 ? null : /* @__PURE__ */ jsx("p", { children: displayEpisode.description }),
+                active ? /* @__PURE__ */ jsx(PlayerStatus, { state }) : null
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "player-program__playback", children: [
+                /* @__PURE__ */ jsxs("div", { className: "player-program__signal", children: [
+                  /* @__PURE__ */ jsx(
+                    Waveform,
+                    {
+                      opacity: state.experienceConfig.waveformOpacity,
+                      playedStateEnabled: state.experienceConfig.waveformPlayedStateEnabled,
+                      progress: waveformProgress,
+                      waveform: displayItem?.waveform
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    SeekBar,
+                    {
+                      canSeek: active && state.canSeek,
+                      commitMode: state.experienceConfig.seekCommitMode,
+                      currentTimeSec: displayCurrentTimeSec,
+                      durationSec: displayDurationSec,
+                      label: "Seek in current Podcast Episode",
+                      onSeek: (seconds) => {
+                        commands.seekTo(seconds);
+                      },
+                      status: active ? state.status : "paused"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TimeReadout,
+                    {
+                      currentTimeSec: displayCurrentTimeSec,
+                      durationSec: displayDurationSec
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "player-program__transport-row", children: [
+                  /* @__PURE__ */ jsx(
+                    IntrinsicTransport,
+                    {
+                      active,
+                      canStart: first !== void 0,
+                      commands,
+                      onStart: () => {
+                        if (first !== void 0) {
+                          void activateIntrinsicItem(
+                            commands,
+                            build.context,
+                            first.queueItemId
+                          );
+                        }
+                      },
+                      state
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      "aria-label": "Podcast seek controls",
+                      className: "player-program__skip-controls",
+                      role: "group",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            disabled: !active || !state.canSeek,
+                            label: `Skip back ${String(backSeconds)} seconds`,
+                            onClick: () => {
+                              commands.seekBy(-backSeconds);
+                            },
+                            children: /* @__PURE__ */ jsx(PodcastSkipBackIcon, {})
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            disabled: !active || !state.canSeek,
+                            label: `Skip forward ${String(forwardSeconds)} seconds`,
+                            onClick: () => {
+                              commands.seekBy(forwardSeconds);
+                            },
+                            children: /* @__PURE__ */ jsx(PodcastSkipForwardIcon, {})
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
+              chapters.length === 0 || displayEpisode === null ? null : /* @__PURE__ */ jsxs("div", { className: "player-program__chapters", children: [
+                /* @__PURE__ */ jsxs("div", { className: "player-section-heading", children: [
+                  /* @__PURE__ */ jsx("span", { id: `program-chapters-${program.id}`, children: "Chapters" }),
+                  /* @__PURE__ */ jsxs("span", { className: "player-queue-count", children: [
+                    String(chapters.length),
+                    " chapters"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("ol", { "aria-labelledby": `program-chapters-${program.id}`, children: visibleChapters.map((chapter) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    "aria-current": chapter.id === activeChapter?.id ? "true" : void 0,
+                    onClick: () => {
+                      selectChapter(displayEpisode, chapter);
+                    },
+                    type: "button",
+                    children: [
+                      /* @__PURE__ */ jsx("time", { children: formatTime(chapter.startTimeSec) }),
+                      /* @__PURE__ */ jsx("span", { children: chapter.title })
+                    ]
+                  }
+                ) }, chapter.id)) }),
+                chapters.length <= 4 ? null : /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "player-program__chapters-toggle",
+                    onClick: () => {
+                      setChaptersExpanded((expanded) => !expanded);
+                    },
+                    type: "button",
+                    children: chaptersExpanded ? "Show fewer chapters" : `Show all ${String(chapters.length)} chapters`
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "section",
+          {
+            "aria-labelledby": `program-episodes-${program.id}`,
+            className: "player-program__episode-list",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "player-section-heading", children: [
+                /* @__PURE__ */ jsx("span", { id: `program-episodes-${program.id}`, children: "Episodes" }),
+                /* @__PURE__ */ jsxs("span", { className: "player-queue-count", children: [
+                  String(program.episodes.length),
+                  " episodes"
+                ] })
+              ] }),
+              program.episodes.length === 0 ? /* @__PURE__ */ jsx("p", { className: "player-empty", children: "No Episodes are available." }) : /* @__PURE__ */ jsx("ol", { className: "player-content__list player-content__episodes", children: program.episodes.map((episode, index) => {
+                const playable = episode.queueItem !== void 0 && playableIds.has(episode.queueItem.queueItemId);
+                const isCurrent = episode.id === selectedEpisodeId;
+                return /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    "data-availability": episode.availability.state,
+                    "data-current": isCurrent ? "true" : "false",
+                    children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        "aria-current": isCurrent ? "true" : void 0,
+                        "aria-label": playable ? `Play episode ${episode.title}` : `${episode.title}: ${availabilityLabel(episode.availability.state)}`,
+                        disabled: !playable,
+                        onClick: () => {
+                          void playEpisode(episode);
+                        },
+                        type: "button",
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "player-queue-number", children: String(index + 1).padStart(2, "0") }),
+                          /* @__PURE__ */ jsxs("span", { className: "player-content__entry-copy", children: [
+                            /* @__PURE__ */ jsx("strong", { children: episode.title }),
+                            /* @__PURE__ */ jsx("small", { children: availabilityLabel(episode.availability.state) })
+                          ] }),
+                          /* @__PURE__ */ jsx("time", { children: formatTime(episode.durationHintSec ?? null) })
+                        ]
+                      }
+                    )
+                  },
+                  `${episode.id}:${String(index)}`
+                );
+              }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(PlayerErrorNotice, { commands, state })
+      ]
+    }
+  );
+}
 function MiniPlayer({
   appearance,
   className,
@@ -1101,17 +1889,23 @@ function MiniPlayer({
   if (state.currentItem === null) {
     return null;
   }
+  const contentContext = state.currentItem.contentContext;
   return /* @__PURE__ */ jsxs(
     PlayerSurface,
     {
       appearance,
       className: ["player-mini", className].filter(Boolean).join(" "),
-      label: "Mini music player",
+      label: contentContext?.sourceType === "podcast-episode" ? "Podcast mini player" : "Mini music player",
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: "player-mini__main",
+            "data-content-source": contentContext?.sourceType,
+            "data-episode-id": contentContext?.sourceType === "podcast-episode" ? contentContext.episodeId : void 0,
+            "data-program-id": contentContext?.sourceType === "podcast-episode" ? contentContext.programId : void 0,
+            "data-release-id": contentContext?.sourceType === "release-track" ? contentContext.releaseId : void 0,
+            "data-track-id": contentContext?.sourceType === "release-track" ? contentContext.trackId : void 0,
             "data-playback-context-id": state.activeContext?.id,
             "data-playback-context-mode": state.activeContext?.mode,
             children: [
@@ -1434,6 +2228,6 @@ function WidePlayer({
   );
 }
 
-export { Artwork, BoundCompactPlayerView, 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 };
+export { Artwork, BoundCompactPlayerView, CompactPlayer, DetailedPlayer, IconButton, MiniPlayer, PlayerErrorNotice, PlayerStatus, PlayerSurface, PodcastPlayer, PodcastProgramPlayer, PopoverVolumeControl, PrimaryPlaybackButton, QueuePanel, QueueToggle, ReleasePlayer, SeekBar, TimeReadout, TrackMetadata, TransportControls, VolumeControl, Waveform, WidePlayer, clamp, formatTime, formatTimeAria, getErrorMessage, getNextRepeatMode, getRepeatLabel, getStatusLabel };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map