start player

src/components/PlaybackControls.tsx

@@ -1,7 +1,11 @@
+import type { BackendName } from "../utils/audio-player"
+
 type PlaybackControlsProps = {
   isPlaying: boolean
   volume: number
   speed: number
+  backendName?: BackendName
+  hasAudioUrl?: boolean
   onToggle: () => void
   onPrev: () => void
   onNext: () => void
@@ -9,6 +13,14 @@ type PlaybackControlsProps = {
   onSpeedChange: (value: number) => void
 }
 
+const BACKEND_LABELS: Record<BackendName, string> = {
+  mpv: "mpv",
+  ffplay: "ffplay",
+  afplay: "afplay",
+  system: "system",
+  none: "none",
+}
+
 export function PlaybackControls(props: PlaybackControlsProps) {
   return (
     <box flexDirection="row" gap={1} alignItems="center" border padding={1}>
@@ -29,6 +41,22 @@ export function PlaybackControls(props: PlaybackControlsProps) {
         <text fg="gray">Speed</text>
         <text fg="white">{props.speed}x</text>
       </box>
+      {props.backendName && props.backendName !== "none" && (
+        <box flexDirection="row" gap={1} marginLeft={2}>
+          <text fg="gray">via</text>
+          <text fg="cyan">{BACKEND_LABELS[props.backendName]}</text>
+        </box>
+      )}
+      {props.backendName === "none" && (
+        <box marginLeft={2}>
+          <text fg="yellow">No audio player found</text>
+        </box>
+      )}
+      {props.hasAudioUrl === false && (
+        <box marginLeft={2}>
+          <text fg="yellow">No audio URL</text>
+        </box>
+      )}
     </box>
   )
 }