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

package/dist/ui/index.js

@@ -724,59 +724,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 +900,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 +956,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
     }
   );
 }