@naxodev/opencode-music-player 0.1.4 → 0.1.6

package/index.tsx

@@ -1,11 +1,16 @@
 /** @jsxImportSource @opentui/solid */
 import { Plugin } from "@opencode-ai/plugin/tui"
 import { createSessionSystemMedia, openNowPlayingApp } from "./system-media.ts"
-import { isMac, mergeArtworkCompletion, type SessionMedia } from "./types.ts"
+import {
+  isMac,
+  mergeArtworkCompletion,
+  mergePlayerSnapshot,
+  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 +18,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 +87,19 @@ 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,
+        clock_ms: Date.now(),
+      },
+    },
+  )
+  const loadingOwner = crypto.randomUUID()
   const media = dependencies.createSessionMedia()
   let disposed = false
   let lifecycleGeneration = 0
@@ -111,8 +118,20 @@ export function createController(
   let activeSeek: SeekIntent | null = null
   let latestSeek: SeekIntent | null = null
   const pending = new Set<() => void>()
-
   const isActive = () => !disposed
+  let clockTimer: ReturnType<typeof setInterval> | null = null
+  const syncClock = () => {
+    if (clockTimer) clearInterval(clockTimer)
+    clockTimer = null
+    if (!isActive() || !session.player?.is_playing) return
+    clockTimer = setInterval(() => {
+      if (!isActive()) return
+      setSession((draft) => {
+        draft.clock_ms = Date.now()
+      })
+    }, 1_000)
+  }
+
   const publishError = () => {
     if (!isActive()) return
     const message =
@@ -134,12 +153,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()
@@ -215,7 +240,9 @@ export function createController(
         return
       setSession((draft) => {
         draft.player = player
+        draft.clock_ms = Date.now()
       })
+      syncClock()
     } catch (error) {
       if (isActive() && generation === lifecycleGeneration)
         setTransportError(errMsg(error))
@@ -232,6 +259,7 @@ export function createController(
         setSession((draft) => {
           draft.player = optimisticPlayerState(draft.player, nextPlaying)
         })
+        syncClock()
       },
     ).finally(() => {
       playbackOperations--
@@ -263,8 +291,10 @@ export function createController(
       receivedSnapshot = true
       snapshotEpoch++
       setSession((draft) => {
-        draft.player = event.state
+        draft.player = mergePlayerSnapshot(draft.player, event.state)
+        draft.clock_ms = Date.now()
       })
+      syncClock()
       return
     }
     if (event?.type === "lifecycle") {
@@ -289,11 +319,6 @@ export function createController(
 
   return {
     session,
-    subscribe(listener) {
-      sessionListeners.add(listener)
-      listener(session)
-      return () => sessionListeners.delete(listener)
-    },
     refreshAll,
     async openApp() {
       if (!isActive()) return
@@ -325,13 +350,9 @@ export function createController(
       activeSeek?.resolves.splice(0).forEach((resolve) => resolve())
       activeSeek = null
       for (const resolve of [...pending]) settle(resolve)
+      if (clockTimer) clearInterval(clockTimer)
       void media.dispose().catch(() => {})
-      if (session.loading) {
-        setSession((draft) => {
-          draft.loading = false
-        })
-      }
-      sessionListeners.clear()
+      setLoadingOwner(false)
     },
   }
 }
@@ -380,7 +401,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 +433,35 @@ 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
+        void ctrl.session.clock_ms
+      }
       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.6",
   "description": "macOS system Now Playing controls for the OpenCode 2 TUI",
   "license": "MIT",
   "author": {

package/types.ts

@@ -113,3 +113,35 @@ export function mergeArtworkCompletion(
     },
   }
 }
+
+/** Keep host-local artwork presentation across playback-only snapshots. */
+export function mergePlayerSnapshot(
+  player: PlayerState | null,
+  snapshot: PlayerState,
+): PlayerState {
+  const current = player?.track
+  const next = snapshot.track
+  if (
+    !current ||
+    !next ||
+    current.name !== next.name ||
+    current.artists !== next.artists ||
+    current.album !== next.album ||
+    (current.duration_ms > 0 &&
+      next.duration_ms > 0 &&
+      current.duration_ms !== next.duration_ms) ||
+    (current.artwork === null && current.artwork_loading !== false)
+  ) {
+    return snapshot
+  }
+  return {
+    ...snapshot,
+    track: {
+      ...next,
+      artwork: next.artwork ?? current.artwork,
+      artwork_loading: false,
+      duration_ms:
+        next.duration_ms > 0 ? next.duration_ms : current.duration_ms,
+    },
+  }
+}

package/ui.tsx

@@ -5,9 +5,7 @@ import {
   createMemo,
   createSignal,
   onCleanup,
-  onMount,
 } from "solid-js"
-import { createStore, reconcile } from "solid-js/store"
 import type { Plugin } from "@opencode-ai/plugin/tui"
 import {
   MouseButton,
@@ -23,19 +21,7 @@ export type UiState = {
   loading: boolean
   error: string | null
   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
+  clock_ms?: number
 }
 
 type Theme = Context["theme"]
@@ -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()
@@ -327,12 +311,12 @@ export function CompactPlayer(props: {
   )
 }
 
-function liveProgress(player: UiState["player"]): number {
+function liveProgress(player: UiState["player"], now = Date.now()): number {
   if (!player?.track) return 0
   if (!player.is_playing) return player.progress_ms
   return Math.min(
     player.track.duration_ms,
-    player.progress_ms + (Date.now() - player.fetched_at),
+    player.progress_ms + (Math.max(now, player.fetched_at) - player.fetched_at),
   )
 }
 
@@ -473,41 +457,19 @@ 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)
 
-  const [tick, setTick] = createSignal(0)
-  onMount(() => {
-    let id: ReturnType<typeof setInterval> | null = null
-    const sync = () => {
-      const on = !!state.player?.is_playing
-      if (on && !id) id = setInterval(() => setTick((t) => t + 1), 1000)
-      else if (!on && id) {
-        clearInterval(id)
-        id = null
-      }
-    }
-    sync()
-    const watch = setInterval(sync, 400)
-    onCleanup(() => {
-      if (id) clearInterval(id)
-      clearInterval(watch)
-    })
-  })
-
-  const progress = createMemo(() => {
-    tick()
-    return liveProgress(player())
-  })
+  const progress = createMemo(() =>
+    liveProgress(player(), props.state.clock_ms),
+  )
   const duration = createMemo(() => track()?.duration_ms ?? 0)
 
   return (
@@ -526,7 +488,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 +524,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>
         }
       >