@naxodev/opencode-music-player 0.1.4 → 0.1.5

package/index.tsx

@@ -5,7 +5,7 @@ import { isMac, mergeArtworkCompletion, type SessionMedia } from "./types.ts"
 import { CompactPlayer, SidebarPlayer, type UiState } from "./ui.tsx"
 
 type Context = Plugin.Context
-type SessionStore = UiState
+type SessionStore = UiState & { loadingOwners?: string[] }
 type SeekIntent = {
   positionMs: number
   resolves: Array<() => void>
@@ -13,7 +13,6 @@ type SeekIntent = {
 
 export type Controller = {
   session: SessionStore
-  subscribe: (listener: (session: SessionStore) => void) => () => void
   openApp: () => Promise<void>
   refreshAll: () => Promise<void>
   playPause: () => Promise<void>
@@ -83,16 +82,18 @@ export function createController(
   context: Context,
   dependencies: ControllerDependencies = controllerDependencies,
 ): Controller {
-  const session: SessionStore = {
-    loading: false,
-    error: null,
-    player: null,
-  }
-  const sessionListeners = new Set<(session: SessionStore) => void>()
-  const setSession = (update: (draft: SessionStore) => void) => {
-    update(session)
-    for (const listener of sessionListeners) listener(session)
-  }
+  const [session, setSession] = context.storage.memory<SessionStore>(
+    "music-player.session.v6",
+    {
+      initial: {
+        loading: false,
+        loadingOwners: [],
+        error: null,
+        player: null,
+      },
+    },
+  )
+  const loadingOwner = crypto.randomUUID()
   const media = dependencies.createSessionMedia()
   let disposed = false
   let lifecycleGeneration = 0
@@ -134,12 +135,18 @@ export function createController(
     transportError = message
     publishError()
   }
-  const updateLoading = () => {
-    if (!isActive()) return
+  const setLoadingOwner = (active: boolean) => {
     setSession((draft) => {
-      draft.loading = pending.size > 0
+      const owners = new Set(draft.loadingOwners ?? [])
+      if (active) owners.add(loadingOwner)
+      else owners.delete(loadingOwner)
+      draft.loadingOwners = [...owners]
+      draft.loading = owners.size > 0
     })
   }
+  const updateLoading = () => {
+    if (isActive()) setLoadingOwner(pending.size > 0)
+  }
   const settle = (resolve: () => void) => {
     if (!pending.delete(resolve)) return
     resolve()
@@ -289,11 +296,6 @@ export function createController(
 
   return {
     session,
-    subscribe(listener) {
-      sessionListeners.add(listener)
-      listener(session)
-      return () => sessionListeners.delete(listener)
-    },
     refreshAll,
     async openApp() {
       if (!isActive()) return
@@ -326,12 +328,7 @@ export function createController(
       activeSeek = null
       for (const resolve of [...pending]) settle(resolve)
       void media.dispose().catch(() => {})
-      if (session.loading) {
-        setSession((draft) => {
-          draft.loading = false
-        })
-      }
-      sessionListeners.clear()
+      setLoadingOwner(false)
     },
   }
 }
@@ -380,7 +377,6 @@ 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)}
     />
@@ -413,23 +409,34 @@ export function createMusicPlayerPlugin(options?: {
               }
             : controllerDependencies,
         )
+      // Slot renderers must observe host-owned state before package components run.
+      const observeSession = () => {
+        void ctrl.session.loading
+        void ctrl.session.error
+        void ctrl.session.player
+      }
       const unsubApp = context.ui.slot({
         append: "session.composer.top",
-        render: () => <AppHost context={context} ctrl={ctrl} />,
+        render: () => {
+          observeSession()
+          return <AppHost context={context} ctrl={ctrl} />
+        },
       })
       const unsubSidebar = context.ui.slot({
         append: "sidebar.content",
-        render: () => (
-          <SidebarPlayer
-            context={context}
-            state={ctrl.session}
-            subscribe={ctrl.subscribe}
-            onPlayPause={() => void ctrl.playPause()}
-            onNext={() => void ctrl.next()}
-            onPrev={() => void ctrl.prev()}
-            onSeek={(positionMs) => void ctrl.seek(positionMs)}
-          />
-        ),
+        render: () => {
+          observeSession()
+          return (
+            <SidebarPlayer
+              context={context}
+              state={ctrl.session}
+              onPlayPause={() => void ctrl.playPause()}
+              onNext={() => void ctrl.next()}
+              onPrev={() => void ctrl.prev()}
+              onSeek={(positionMs) => void ctrl.seek(positionMs)}
+            />
+          )
+        },
       })
       return () => {
         unsubApp()

package/package.json

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

package/ui.tsx

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