add initial support for more integrations in the now playing panel

2026-08-19 03:54:23 +02:00 · 2026-04-11 22:05:00 -04:00
parent 85eddbbad5
commit 71fd59c710
30 changed files with 2479 additions and 404 deletions
@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type JSX, type WheelEvent } from 'react'
-import { useAstraStore } from '../stores/astraStore'
+import { useNowPlayingStore } from '../stores/nowPlayingStore'
 import { useAudioStore } from '../stores/audioStore'
 import { usePerformanceStore } from '../stores/performanceStore'
 import { useSettingsStore } from '../stores/settingsStore'
@@ -9,7 +9,6 @@ import { getHorizontalWheelScrollResult } from '../utils/horizontalWheelScroll'
 import type { ScopeKind } from '../../types/scope'
 import { VISUALIZER_FRAME_TARGETS, type VisualizerFrameTarget } from '../../types/performance'
 import { SCOPE_KINDS } from '../../types/scope'
-import type { AstraIntegrationConfig } from '../../types/astra'
 import ThemedSelect from './ThemedSelect'

 const SCOPE_LABELS: Record<ScopeKind, string> = {
@@ -20,7 +19,7 @@ const SCOPE_LABELS: Record<ScopeKind, string> = {
  vumeter: 'VU Meter',
  lufsmeter: 'LUFS Meter',
  waveform: 'Waveform',
-  astra: 'Astra',
+  nowPlaying: 'Now Playing',
 }

 interface BottomBarProps {
@@ -84,8 +83,6 @@ export function resolveThemeCreditDetails(theme: ThemeCreditSource): {

 export default function BottomBar({ onClose, onHeightChange }: BottomBarProps): JSX.Element {
  const rootRef = useRef<HTMLDivElement | null>(null)
-  const [astraBaseUrlInput, setAstraBaseUrlInput] = useState('')
-  const [astraTokenInput, setAstraTokenInput] = useState('')
  const [isRefreshingThemes, setIsRefreshingThemes] = useState(false)

  const hiddenScopes = useSettingsStore((s) => s.hiddenScopes)
@@ -102,8 +99,9 @@ export default function BottomBar({ onClose, onHeightChange }: BottomBarProps):
    reloadThemes,
    showThemesFolder,
  } = useThemeStore()
-  const astraState = useAstraStore((s) => s.integrationState)
-  const saveAstraConfig = useAstraStore((s) => s.saveConfig)
+  const nowPlayingState = useNowPlayingStore((s) => s.nowPlayingState)
+  const retryNowPlayingProvider = useNowPlayingStore((s) => s.retryProvider)
+  const openNowPlayingConfigWindow = useNowPlayingStore((s) => s.openConfigWindow)

  const {
    systemSources,
@@ -126,7 +124,6 @@ export default function BottomBar({ onClose, onHeightChange }: BottomBarProps):
    setInputGain,
  } = useAudioStore()
  const showBanner = useUiStore((s) => s.showBanner)
-  const setSettingsOpen = useUiStore((s) => s.setSettingsOpen)

  useEffect(() => {
    void refreshBackendSupport()
@@ -134,11 +131,6 @@ export default function BottomBar({ onClose, onHeightChange }: BottomBarProps):
    void refreshDevices()
  }, [refreshBackendSupport, refreshSystemSources, refreshDevices])

-  useEffect(() => {
-    setAstraBaseUrlInput(astraState.config.baseUrl)
-    setAstraTokenInput(astraState.config.token)
-  }, [astraState.config.baseUrl, astraState.config.token])
-
  useLayoutEffect(() => {
    if (!onHeightChange || !rootRef.current) return

@@ -207,22 +199,6 @@ export default function BottomBar({ onClose, onHeightChange }: BottomBarProps):
    await loadTheme(value)
  }

-  const handleSaveAstraConfig = async (): Promise<void> => {
-    const nextConfig: AstraIntegrationConfig = {
-      baseUrl: astraBaseUrlInput,
-      token: astraTokenInput,
-    }
-    try {
-      await saveAstraConfig(nextConfig)
-    } catch (error) {
-      showBanner({
-        tone: 'error',
-        message: getErrorMessage(error, 'Could not save the Astra settings.'),
-        actions: [],
-      })
-    }
-  }
-
  const handleRetryCapture = async (): Promise<void> => {
    clearCaptureNotice()
    await startCapture()
@@ -238,8 +214,27 @@ export default function BottomBar({ onClose, onHeightChange }: BottomBarProps):
    await startCapture()
  }

-  const handleRetryAstra = async (): Promise<void> => {
-    await handleSaveAstraConfig()
+  const handleRetryNowPlaying = async (): Promise<void> => {
+    const providerId = nowPlayingState.activeProviderId
+      ?? nowPlayingState.providerPriority.find((candidate) => {
+        const provider = nowPlayingState.providers[candidate]
+        return provider.available && provider.isConfigured
+      })
+
+    if (!providerId) {
+      await openNowPlayingConfigWindow()
+      return
+    }
+
+    try {
+      await retryNowPlayingProvider(providerId)
+    } catch (error) {
+      showBanner({
+        tone: 'error',
+        message: getErrorMessage(error, 'Could not reconnect the provider.'),
+        actions: [],
+      })
+    }
  }

  const handleShowThemesFolder = async (): Promise<void> => {
@@ -307,15 +302,36 @@ export default function BottomBar({ onClose, onHeightChange }: BottomBarProps):
    event.preventDefault()
  }

-  const astraStatusLabel = astraState.connectionState === 'connected'
-    ? 'Connected'
-    : astraState.connectionState === 'connecting'
-      ? 'Connecting'
-      : astraState.connectionState === 'error'
-        ? 'Error'
-        : 'Off'
+  const currentNowPlayingProviderId = nowPlayingState.activeProviderId
+    ?? nowPlayingState.providerPriority.find((providerId) => {
+      const provider = nowPlayingState.providers[providerId]
+      return provider.available && provider.isConfigured
+    })
+    ?? null
+  const currentNowPlayingProvider = currentNowPlayingProviderId
+    ? nowPlayingState.providers[currentNowPlayingProviderId]
+    : null
+  const nowPlayingStatusLabel = nowPlayingState.onboardingRequired
+    ? 'Not Set Up'
+    : currentNowPlayingProvider?.connectionState === 'connected'
+      ? 'Connected'
+      : currentNowPlayingProvider?.connectionState === 'connecting'
+        ? 'Connecting'
+        : currentNowPlayingProvider?.connectionState === 'error'
+          ? 'Error'
+          : 'Idle'
+  const nowPlayingSummary = nowPlayingState.onboardingRequired
+    ? 'Set up Astra to enable live track data.'
+    : `Priority: ${nowPlayingState.providerPriority
+      .map((providerId) => nowPlayingState.definitions[providerId].label)
+      .join(' → ')}`
  const captureMessage = captureError ?? captureNotice
-  const astraErrorMessage = astraState.lastError ?? astraState.lastControlError
+  const nowPlayingErrorMessage = currentNowPlayingProvider?.lastError ?? currentNowPlayingProvider?.lastControlError ?? null
+  const nowPlayingDetail = nowPlayingErrorMessage
+    ? `${currentNowPlayingProviderId ? `${nowPlayingState.definitions[currentNowPlayingProviderId].label} · ` : ''}${nowPlayingErrorMessage}`
+    : currentNowPlayingProviderId
+      ? `${nowPlayingState.definitions[currentNowPlayingProviderId].label} · ${nowPlayingSummary}`
+      : nowPlayingSummary
  const canUseDefaultSource = captureMode === 'system'
    ? selectedSystemSourceId !== defaultSystemSourceId
    : selectedDeviceId !== null
@@ -408,65 +424,45 @@ export default function BottomBar({ onClose, onHeightChange }: BottomBarProps):

          <div className="bottom-bar__divider" />

-          <section className="bottom-bar__section bottom-bar__section--astra">
-            <div className="bottom-bar__section-title">Astra</div>
+          <section className="bottom-bar__section bottom-bar__section--now-playing">
+            <div className="bottom-bar__section-header bottom-bar__section-header--now-playing">
+              <div className="bottom-bar__section-title">Now Playing</div>
+              <div
+                className={`${nowPlayingErrorMessage ? 'bottom-bar__now-playing-summary is-error' : 'bottom-bar__now-playing-summary'}`.trim()}
+                title={nowPlayingDetail}
+              >
+                {nowPlayingDetail}
+              </div>
+            </div>
            <div className="bottom-bar__section-body">
-              <div className="bottom-bar__inline bottom-bar__inline--theme">
-                <input
-                  className="bottom-bar__text-input bottom-bar__text-input--url"
-                  type="text"
-                  value={astraBaseUrlInput}
-                  placeholder="Astra Base URL"
-                  onChange={(event) => setAstraBaseUrlInput(event.target.value)}
-                />
+              <div className="bottom-bar__inline bottom-bar__inline--now-playing">
+                <div className={`settings-status-pill ${currentNowPlayingProvider?.connectionState === 'disabled' || !currentNowPlayingProvider ? '' : `is-${currentNowPlayingProvider.connectionState}`}`.trim()}>
+                  <span className="settings-status-pill__dot" />
+                  <span>{nowPlayingStatusLabel}</span>
+                </div>

-                <input
-                  className="bottom-bar__text-input bottom-bar__text-input--token"
-                  type="password"
-                  value={astraTokenInput}
-                  placeholder="Astra API Token"
-                  onChange={(event) => setAstraTokenInput(event.target.value)}
-                />
+                {nowPlayingErrorMessage ? (
+                  <button
+                    type="button"
+                    className="settings-chip"
+                    onClick={() => {
+                      void handleRetryNowPlaying()
+                    }}
+                  >
+                    Retry
+                  </button>
+                ) : null}

                <button
                  type="button"
                  className="settings-chip"
                  onClick={() => {
-                    void handleSaveAstraConfig()
+                    void openNowPlayingConfigWindow()
                  }}
                >
-                  Save
+                  Configure...
                </button>
-
-                <div className={`settings-status-pill ${astraState.connectionState === 'disabled' ? '' : `is-${astraState.connectionState}`}`.trim()}>
-                  <span className="settings-status-pill__dot" />
-                  <span>{astraStatusLabel}</span>
-                </div>
              </div>
-
-              {astraErrorMessage ? (
-                <>
-                  <div className="settings-error-text bottom-bar__error-text">{astraErrorMessage}</div>
-                  <div className="settings-inline-actions">
-                    <button
-                      type="button"
-                      className="settings-chip"
-                      onClick={() => {
-                        void handleRetryAstra()
-                      }}
-                    >
-                      Retry
-                    </button>
-                    <button
-                      type="button"
-                      className="settings-chip"
-                      onClick={() => setSettingsOpen(true)}
-                    >
-                      Open Settings
-                    </button>
-                  </div>
-                </>
-              ) : null}
            </div>
          </section>