@naxodev/opencode-music-player 0.1.3 → 0.1.4

package/index.tsx

@@ -1,6 +1,5 @@
 /** @jsxImportSource @opentui/solid */
 import { Plugin } from "@opencode-ai/plugin/tui"
-import { createStore, produce } from "solid-js/store"
 import { createSessionSystemMedia, openNowPlayingApp } from "./system-media.ts"
 import { isMac, mergeArtworkCompletion, type SessionMedia } from "./types.ts"
 import { CompactPlayer, SidebarPlayer, type UiState } from "./ui.tsx"
@@ -14,6 +13,7 @@ type SeekIntent = {
 
 export type Controller = {
   session: SessionStore
+  subscribe: (listener: (session: SessionStore) => void) => () => void
   openApp: () => Promise<void>
   refreshAll: () => Promise<void>
   playPause: () => Promise<void>
@@ -83,14 +83,16 @@ export function createController(
   context: Context,
   dependencies: ControllerDependencies = controllerDependencies,
 ): Controller {
-  // Host storage may use another Solid runtime when this plugin comes from npm.
-  const [session, setSessionStore] = createStore<SessionStore>({
+  const session: SessionStore = {
     loading: false,
     error: null,
     player: null,
-  })
-  const setSession = (update: (draft: SessionStore) => void) =>
-    setSessionStore(produce(update))
+  }
+  const sessionListeners = new Set<(session: SessionStore) => void>()
+  const setSession = (update: (draft: SessionStore) => void) => {
+    update(session)
+    for (const listener of sessionListeners) listener(session)
+  }
   const media = dependencies.createSessionMedia()
   let disposed = false
   let lifecycleGeneration = 0
@@ -287,6 +289,11 @@ export function createController(
 
   return {
     session,
+    subscribe(listener) {
+      sessionListeners.add(listener)
+      listener(session)
+      return () => sessionListeners.delete(listener)
+    },
     refreshAll,
     async openApp() {
       if (!isActive()) return
@@ -324,6 +331,7 @@ export function createController(
           draft.loading = false
         })
       }
+      sessionListeners.clear()
     },
   }
 }
@@ -372,6 +380,7 @@ function AppHost(props: { context: Context; ctrl: Controller }) {
     <CompactPlayer
       context={context}
       state={ctrl.session}
+      subscribe={ctrl.subscribe}
       onPlayPause={() => void ctrl.playPause()}
       onSeek={(positionMs) => void ctrl.seek(positionMs)}
     />
@@ -414,6 +423,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.1.3",
+  "version": "0.1.4",
   "description": "macOS system Now Playing controls for the OpenCode 2 TUI",
   "license": "MIT",
   "author": {

package/ui.tsx

@@ -7,6 +7,7 @@ import {
   onCleanup,
   onMount,
 } from "solid-js"
+import { createStore, reconcile } from "solid-js/store"
 import type { Plugin } from "@opencode-ai/plugin/tui"
 import {
   MouseButton,
@@ -24,6 +25,19 @@ export type UiState = {
   player: import("./types.ts").PlayerState | null
 }
 
+type UiStateSubscribe = (listener: (state: UiState) => void) => () => void
+
+function reactiveUiState(
+  state: UiState,
+  subscribe: UiStateSubscribe | undefined,
+): UiState {
+  if (!subscribe) return state
+  const [local, setLocal] = createStore<UiState>({ ...state })
+  const unsubscribe = subscribe((next) => setLocal(reconcile({ ...next })))
+  onCleanup(unsubscribe)
+  return local
+}
+
 type Theme = Context["theme"]
 type Context = Plugin.Context
 
@@ -210,14 +224,16 @@ export function compactPresentation(
 export function CompactPlayer(props: {
   context: Context
   state: UiState
+  subscribe?: UiStateSubscribe
   onPlayPause: () => void
   onSeek: (positionMs: number) => void
 }) {
   const theme = () => props.context.theme
+  const state = reactiveUiState(props.state, props.subscribe)
   let row: BoxRenderable | undefined
   let content: TextRenderable | undefined
   let allocatedWidth = Number.MAX_SAFE_INTEGER
-  const track = createMemo(() => props.state.player?.track)
+  const track = createMemo(() => state.player?.track)
   const renderLine = () => {
     const current = track()
     if (!current) return ""
@@ -225,7 +241,7 @@ export function CompactPlayer(props: {
       allocatedWidth,
       current.name,
       current.artists,
-      !!props.state.player?.is_playing,
+      !!state.player?.is_playing,
     )
     const padding = " ".repeat(display.padding)
     return `${padding}${display.marker}${
@@ -263,7 +279,7 @@ export function CompactPlayer(props: {
           overflow="hidden"
           onMouseDown={(event) => {
             if (event.button !== MouseButton.LEFT) return
-            const current = props.state.player?.track
+            const current = state.player?.track
             if (!current || !row) return
 
             const seekWidth = compactSeekRegionWidth(row.width)
@@ -272,7 +288,7 @@ export function CompactPlayer(props: {
               row.width,
               current.name,
               current.artists,
-              !!props.state.player?.is_playing,
+              !!state.player?.is_playing,
             ).padding
             if (cell === markerCell) {
               event.preventDefault()
@@ -457,13 +473,15 @@ 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
-  const player = createMemo(() => props.state.player)
+  const state = reactiveUiState(props.state, props.subscribe)
+  const player = createMemo(() => state.player)
   const track = createMemo(() => player()?.track)
   const playing = createMemo(() => !!player()?.is_playing)
 
@@ -471,7 +489,7 @@ export function SidebarPlayer(props: {
   onMount(() => {
     let id: ReturnType<typeof setInterval> | null = null
     const sync = () => {
-      const on = !!props.state.player?.is_playing
+      const on = !!state.player?.is_playing
       if (on && !id) id = setInterval(() => setTick((t) => t + 1), 1000)
       else if (!on && id) {
         clearInterval(id)
@@ -508,7 +526,7 @@ export function SidebarPlayer(props: {
       gap={1}
       flexShrink={0}
     >
-      <Show when={props.state.error}>
+      <Show when={state.error}>
         {(err) => <text fg={theme().text.feedback.error.default}>{err()}</text>}
       </Show>
 
@@ -544,7 +562,7 @@ export function SidebarPlayer(props: {
         when={track()}
         fallback={
           <text fg={theme().text.subdued}>
-            {props.state.loading ? "Syncing…" : "Nothing playing"}
+            {state.loading ? "Syncing…" : "Nothing playing"}
           </text>
         }
       >