@naxodev/opencode-music-player 0.2.1 → 0.2.2

package/index.tsx

@@ -18,6 +18,7 @@ type SeekIntent = {
 
 export type Controller = {
   session: SessionStore
+  subscribe: (listener: (session: SessionStore) => void) => () => void
   openApp: () => Promise<void>
   refreshAll: () => Promise<void>
   playPause: () => Promise<void>
@@ -87,7 +88,7 @@ export function createController(
   context: Context,
   dependencies: ControllerDependencies = controllerDependencies,
 ): Controller {
-  const [session, setSession] = context.storage.memory<SessionStore>(
+  const [session, setSessionStore] = context.storage.memory<SessionStore>(
     "music-player.session.v6",
     {
       initial: {
@@ -98,6 +99,17 @@ export function createController(
       },
     },
   )
+  const sessionListeners = new Set<(session: SessionStore) => void>()
+  const setSession = (update: (draft: SessionStore) => void) => {
+    setSessionStore(update)
+    for (const listener of [...sessionListeners]) {
+      try {
+        listener(session)
+      } catch {
+        // One mounted presentation cannot block controller state.
+      }
+    }
+  }
   const loadingOwner = crypto.randomUUID()
   const media = dependencies.createSessionMedia()
   let disposed = false
@@ -301,6 +313,11 @@ export function createController(
 
   return {
     session,
+    subscribe(listener) {
+      sessionListeners.add(listener)
+      listener(session)
+      return () => sessionListeners.delete(listener)
+    },
     refreshAll,
     async openApp() {
       if (!isActive()) return
@@ -334,6 +351,7 @@ export function createController(
       for (const resolve of [...pending]) settle(resolve)
       void media.dispose().catch(() => {})
       setLoadingOwner(false)
+      sessionListeners.clear()
     },
   }
 }
@@ -435,6 +453,7 @@ export function createMusicPlayerPlugin(options?: {
             <SidebarPlayer
               context={context}
               state={ctrl.session}
+              subscribe={ctrl.subscribe}
               onPlayPause={() => void ctrl.playPause()}
               onNext={() => void ctrl.next()}
               onPrev={() => void ctrl.prev()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@naxodev/opencode-music-player",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "macOS system Now Playing controls for the OpenCode 2 TUI",
   "license": "MIT",
   "author": {

package/ui.tsx

@@ -14,10 +14,9 @@ import {
   type TextNodeRenderable,
   type TextRenderable,
 } from "@opentui/core"
-import { waveformSeedKey } from "@naxodev/music-core"
 import { formatMs } from "./types.ts"
 import { AlbumArtwork } from "./artwork.tsx"
-import { Waveform } from "./waveform.tsx"
+import { Waveform, type PlayerPresentationSource } from "./waveform.tsx"
 
 export type UiState = {
   loading: boolean
@@ -27,6 +26,7 @@ export type UiState = {
 
 type Theme = Context["theme"]
 type Context = Plugin.Context
+type UiStateSubscribe = (listener: (state: UiState) => void) => () => void
 
 /** Text presentation keeps media symbols single-cell on emoji fonts. */
 const t = (s: string) => s + "\uFE0E"
@@ -335,8 +335,7 @@ function progressSegments(progress: number, duration: number, width: number) {
 
 function ProgressBar(props: {
   theme: Theme
-  player: UiState["player"]
-  duration: number
+  source: PlayerPresentationSource
   width?: number
   accent?: string | undefined
   onSeek: (positionMs: number) => void
@@ -346,8 +345,14 @@ function ProgressBar(props: {
   let thumbNode: TextNodeRenderable | undefined
   let rightNode: TextNodeRenderable | undefined
   const width = () => Math.max(8, props.width ?? 28)
-  const rendered = () =>
-    progressSegments(liveProgress(props.player), props.duration, width())
+  const rendered = () => {
+    const player = props.source.current()
+    return progressSegments(
+      liveProgress(player),
+      player?.track?.duration_ms ?? 0,
+      width(),
+    )
+  }
   const paint = () => {
     const next = rendered()
     if (leftNode) leftNode.children = [next.left]
@@ -355,18 +360,15 @@ function ProgressBar(props: {
     if (rightNode) rightNode.children = [next.right]
   }
 
-  createEffect(() => {
-    void props.player
-    void props.duration
-    void props.width
-    paint()
-  })
   onMount(() => {
-    paint()
+    const unsubscribe = props.source.subscribe(() => paint())
     const timer = setInterval(() => {
-      if (props.player?.is_playing) paint()
+      if (props.source.current()?.is_playing) paint()
     }, 1_000)
-    onCleanup(() => clearInterval(timer))
+    onCleanup(() => {
+      unsubscribe()
+      clearInterval(timer)
+    })
   })
 
   return (
@@ -380,7 +382,7 @@ function ProgressBar(props: {
         const position = seekPositionForCell(
           event.x - bar.x,
           bar.width,
-          props.duration,
+          props.source.current()?.track?.duration_ms ?? 0,
         )
         if (position === null) return
         event.preventDefault()
@@ -416,25 +418,27 @@ function ProgressBar(props: {
   )
 }
 
-function LiveElapsed(props: { theme: Theme; player: UiState["player"] }) {
+function LiveElapsed(props: {
+  theme: Theme
+  source: PlayerPresentationSource
+}) {
   let text: TextRenderable | undefined
   const paint = () => {
-    if (text) text.content = formatMs(liveProgress(props.player))
+    if (text) text.content = formatMs(liveProgress(props.source.current()))
   }
-  createEffect(() => {
-    void props.player
-    paint()
-  })
   onMount(() => {
-    paint()
+    const unsubscribe = props.source.subscribe(() => paint())
     const timer = setInterval(() => {
-      if (props.player?.is_playing) paint()
+      if (props.source.current()?.is_playing) paint()
     }, 1_000)
-    onCleanup(() => clearInterval(timer))
+    onCleanup(() => {
+      unsubscribe()
+      clearInterval(timer)
+    })
   })
   return (
     <text ref={(element) => (text = element)} fg={props.theme.text.subdued}>
-      {formatMs(liveProgress(props.player))}
+      {formatMs(liveProgress(props.source.current()))}
     </text>
   )
 }
@@ -510,12 +514,45 @@ function IconBtn(props: {
 export function SidebarPlayer(props: {
   context: Context
   state: UiState
+  subscribe?: UiStateSubscribe
   onPlayPause: () => void
   onNext: () => void
   onPrev: () => void
   onSeek: (positionMs: number) => void
 }) {
   const theme = () => props.context.theme
+  let latestPlayer = props.state.player
+  const presentationListeners = new Set<(player: UiState["player"]) => void>()
+  const publishPlayer = (player: UiState["player"]) => {
+    latestPlayer = player
+    for (const listener of [...presentationListeners]) {
+      try {
+        listener(player)
+      } catch {
+        // One presentation widget cannot block its siblings.
+      }
+    }
+  }
+  const source: PlayerPresentationSource = {
+    current: () => latestPlayer,
+    subscribe(listener) {
+      presentationListeners.add(listener)
+      try {
+        listener(latestPlayer)
+      } catch {
+        // Initial presentation failure remains isolated to this widget.
+      }
+      return () => presentationListeners.delete(listener)
+    },
+  }
+  createEffect(() => publishPlayer(props.state.player))
+  const unsubscribeSession = props.subscribe?.((state) =>
+    publishPlayer(state.player),
+  )
+  onCleanup(() => {
+    unsubscribeSession?.()
+    presentationListeners.clear()
+  })
   const player = createMemo(() => props.state.player)
   const track = createMemo(() => player()?.track)
   const playing = createMemo(() => !!player()?.is_playing)
@@ -594,29 +631,20 @@ export function SidebarPlayer(props: {
       </Show>
 
       <box flexDirection="row" justifyContent="center" overflow="hidden">
-        <Waveform
-          theme={theme()}
-          player={player()}
-          trackIdentity={
-            track() ? waveformSeedKey(track()!.name, track()!.id) : ""
-          }
-          bars={24}
-          variant="hero"
-        />
+        <Waveform theme={theme()} source={source} bars={24} variant="hero" />
       </box>
 
       <Show when={track() && duration() > 0}>
         <box flexDirection="column" gap={0} overflow="hidden">
           <ProgressBar
             theme={theme()}
-            player={player()}
-            duration={duration()}
+            source={source}
             width={24}
             accent={track()?.artwork?.accent}
             onSeek={props.onSeek}
           />
           <box flexDirection="row" justifyContent="space-between">
-            <LiveElapsed theme={theme()} player={player()} />
+            <LiveElapsed theme={theme()} source={source} />
             <text fg={theme().text.subdued}>{formatMs(duration())}</text>
           </box>
         </box>

package/waveform.tsx

@@ -5,21 +5,22 @@ import {
   isFlat,
   sameTrackIdentity,
   stepEngine,
+  waveformSeedKey,
   type WaveEngine,
 } from "@naxodev/music-core"
-import {
-  For,
-  createEffect,
-  createMemo,
-  createSignal,
-  onCleanup,
-} from "solid-js"
+import { onCleanup, onMount } from "solid-js"
+import { StyledText, fg, type TextRenderable } from "@opentui/core"
 import type { Plugin } from "@opencode-ai/plugin/tui"
 import type { PlayerState } from "./types.ts"
 
 type Context = Plugin.Context
 type Theme = Context["theme"]
 
+export type PlayerPresentationSource = {
+  current: () => PlayerState | null
+  subscribe: (listener: (player: PlayerState | null) => void) => () => void
+}
+
 export type WaveformScheduler = {
   setInterval: (callback: () => void, ms: number) => unknown
   clearInterval: (timer: unknown) => void
@@ -149,18 +150,26 @@ function blockChar(level: number): string {
 
 export function Waveform(props: {
   theme: Theme
-  player: PlayerState | null
-  trackIdentity: string
+  source: PlayerPresentationSource
   bars?: number
   /** Kept for API compatibility; both variants render one clean row. */
   variant?: "mini" | "hero"
   rows?: number
 }) {
   const barCount = () => props.bars ?? (props.variant === "hero" ? 48 : 16)
-  const [rendered, setRendered] = createSignal<{
-    player: PlayerState
-    engine: WaveEngine
-  } | null>(null)
+  let text: TextRenderable | undefined
+  const paint = (player: PlayerState, engine: WaveEngine) => {
+    if (!text) return
+    const playing = player.is_playing
+    text.content = new StyledText(
+      Array.from({ length: barCount() }, (_, index) => {
+        const level = displayLevel(engine.levels[index] ?? 0, index, playing)
+        return fg(blueFor(level, playing || level > 0.05, props.theme))(
+          blockChar(level),
+        )
+      }),
+    )
+  }
   const coordinator = createWaveformCoordinator({
     now: () => Date.now(),
     scheduler: {
@@ -169,37 +178,28 @@ export function Waveform(props: {
         clearInterval(timer as ReturnType<typeof setInterval>),
     },
     intervalMs: props.variant === "hero" ? 48 : 64,
-    render: (player, engine) => setRendered({ player, engine }),
-    clear: () => setRendered(null),
+    render: paint,
+    clear: () => {
+      if (text) text.content = " ".repeat(barCount())
+    },
   })
 
-  createEffect(() => {
-    coordinator.setInput(props.player, props.trackIdentity, barCount())
+  const update = (player: PlayerState | null) => {
+    coordinator.setInput(
+      player,
+      player?.track ? waveformSeedKey(player.track.name, player.track.id) : "",
+      barCount(),
+    )
     coordinator.frame()
-  })
-  onCleanup(() => coordinator.dispose())
-
-  const cells = createMemo(() => {
-    const current = rendered()
-    const n = barCount()
-    const levels = current?.engine.levels ?? new Float64Array(n)
-    const playing = current?.player.is_playing ?? false
-    const out: { ch: string; fg: ReturnType<typeof blueFor> }[] = []
-    for (let i = 0; i < n; i++) {
-      const level = displayLevel(levels[i] ?? 0, i, playing)
-      out.push({
-        ch: blockChar(level),
-        fg: blueFor(level, playing || level > 0.05, props.theme),
-      })
-    }
-    return out
+  }
+  const unsubscribe = props.source.subscribe(update)
+  onMount(() => coordinator.frame())
+  onCleanup(() => {
+    unsubscribe()
+    coordinator.dispose()
   })
 
   return (
-    <text>
-      <For each={cells()}>
-        {(cell) => <span style={{ fg: cell.fg }}>{cell.ch}</span>}
-      </For>
-    </text>
+    <text ref={(element) => (text = element)}>{" ".repeat(barCount())}</text>
   )
 }