@brika/plugin-spotify 0.3.0 → 0.3.1

package/locales/en/plugin.json

@@ -34,6 +34,10 @@
       }
     }
   },
+  "player": {
+    "title": "Spotify",
+    "login": "Login with Spotify"
+  },
   "blocks": {
     "play": {
       "name": "Play Spotify",

package/locales/fr/plugin.json

@@ -34,6 +34,10 @@
       }
     }
   },
+  "player": {
+    "title": "Spotify",
+    "login": "Se connecter à Spotify"
+  },
   "blocks": {
     "play": {
       "name": "Lire Spotify",

package/package.json

@@ -2,13 +2,13 @@
   "$schema": "https://schema.brika.dev/plugin.schema.json",
   "name": "@brika/plugin-spotify",
   "displayName": "Spotify",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Spotify Connect player for BRIKA dashboards",
   "author": "BRIKA Team",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/maxscharwath/brika.git",
+    "url": "https://github.com/brikalabs/brika.git",
     "directory": "plugins/spotify"
   },
   "icon": "./icon.svg",
@@ -29,7 +29,7 @@
   },
   "scripts": {
     "link": "bun link",
-    "tsc": "bunx --bun tsc --noEmit",
+    "typecheck": "tsgo --noEmit",
     "prepublishOnly": "brika-verify-plugin"
   },
   "preferences": [
@@ -106,7 +106,11 @@
     }
   ],
   "dependencies": {
-    "@brika/sdk": "0.3.0"
+    "@brika/sdk": "0.3.1"
+  },
+  "devDependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1"
   },
   "files": [
     "src",

package/src/actions.ts

@@ -0,0 +1,52 @@
+/**
+ * Server-side actions for the Spotify player brick.
+ *
+ * Client-side bricks import these refs — the module compiler replaces them
+ * with `{ __actionId }` stubs at build time. The plugin process handles
+ * the actual Spotify API calls when the hub forwards the action.
+ */
+
+import { defineAction } from '@brika/sdk/actions';
+import {
+  next,
+  pause,
+  play,
+  previous,
+  seek,
+  setVolume,
+  startPlayback,
+  usePlayerStore,
+} from './playback-store';
+import { resolveDeviceId } from './shared';
+
+function resolveTarget(deviceId?: string): string | undefined {
+  const id = resolveDeviceId(deviceId);
+  return id ?? usePlayerStore.get().devices[0]?.id;
+}
+
+export const doPlay = defineAction(async (input?: { deviceId?: string }) => {
+  const target = resolveTarget(input?.deviceId);
+  const { playback } = usePlayerStore.get();
+  if (playback) play(target);
+  else await startPlayback(target);
+});
+
+export const doPause = defineAction(async (input?: { deviceId?: string }) => {
+  pause(resolveTarget(input?.deviceId));
+});
+
+export const doNext = defineAction(async () => {
+  next();
+});
+
+export const doPrevious = defineAction(async () => {
+  previous();
+});
+
+export const doSeek = defineAction(async (input: { positionMs: number }) => {
+  seek(input.positionMs);
+});
+
+export const doSetVolume = defineAction(async (input: { percent: number }) => {
+  setVolume(input.percent);
+});

package/src/bricks/components.tsx

@@ -1,81 +1,135 @@
-/**
- * Shared sub-components for the Spotify player brick.
- * Each renders a reusable piece of the player UI.
- */
+import { cva } from 'class-variance-authority';
+import clsx from 'clsx';
+import { Music, Pause, Play } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
 
-import { Box, Button, Row, Slider, Text } from '@brika/sdk/bricks';
-import { formatMs, progressPercent } from './utils';
+export function ScrollText({ text, className }: Readonly<{ text: string; className?: string }>) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const textRef = useRef<HTMLSpanElement>(null);
+  const [scrollPx, setScrollPx] = useState(0);
 
-// ─── Types ──────────────────────────────────────────────────────────────────
+  useEffect(() => {
+    const container = containerRef.current;
+    const textEl = textRef.current;
+    if (!container || !textEl) return;
+    const frame = requestAnimationFrame(() => {
+      const diff = textEl.offsetWidth - container.offsetWidth;
+      setScrollPx(diff > 2 ? diff : 0);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [text]);
 
-export interface PlayerActions {
-  onPlay: () => void;
-  onPause: () => void;
-  onNext: () => void;
-  onPrev: () => void;
-  onSeek: (payload?: Record<string, unknown>) => void;
-  onVolume: (payload?: Record<string, unknown>) => void;
-}
-
-// ─── Transport Controls ─────────────────────────────────────────────────────
+  const needsScroll = scrollPx > 0;
+  const duration = Math.max(4, scrollPx / 25);
 
-export function Controls({ isPlaying, onPlay, onPause, onPrev, onNext }: Readonly<{
-  isPlaying: boolean;
-  onPlay: () => void;
-  onPause: () => void;
-  onPrev: () => void;
-  onNext: () => void;
-}>) {
   return (
-    <Row gap="sm" justify="center" align="center">
-      <Button onPress={onPrev} icon="skip-back" color="rgba(0,0,0,0.3)" />
-      {isPlaying
-        ? <Button onPress={onPause} icon="pause" color="rgba(0,0,0,0.5)" />
-        : <Button onPress={onPlay} icon="play" color="rgba(0,0,0,0.5)" />}
-      <Button onPress={onNext} icon="skip-forward" color="rgba(0,0,0,0.3)" />
-    </Row>
+    <div
+      ref={containerRef}
+      className={clsx('overflow-hidden', className)}
+      style={needsScroll ? {
+        maskImage: 'linear-gradient(to right, transparent, black 6%, black 94%, transparent)',
+        WebkitMaskImage: 'linear-gradient(to right, transparent, black 6%, black 94%, transparent)',
+      } : undefined}
+    >
+      <span
+        ref={textRef}
+        className={needsScroll ? 'inline-block whitespace-nowrap' : 'block truncate'}
+        style={needsScroll ? {
+          animationName: 'spotify-scroll',
+          animationDuration: `${duration}s`,
+          animationTimingFunction: 'ease-in-out',
+          animationIterationCount: 'infinite',
+          animationDirection: 'alternate',
+          '--scroll-dist': `-${scrollPx}px`,
+        } as React.CSSProperties : undefined}
+      >
+        {text}
+      </span>
+    </div>
   );
 }
 
-// ─── Track Info ─────────────────────────────────────────────────────────────
-
-export function TrackInfo({ trackName, artistName }: Readonly<{
+export function AlbumCover({ trackName, artistName, albumArt }: Readonly<{
   trackName: string;
   artistName: string;
+  albumArt?: string;
 }>) {
+  if (albumArt) {
+    return (
+      <img
+        src={albumArt}
+        alt={`${trackName} by ${artistName}`}
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+    );
+  }
   return (
-    <Row gap="sm" align="center">
-      <Text content={trackName} variant="heading" color="rgba(255,255,255,0.95)" />
-      <Text content={artistName} variant="caption" color="rgba(255,255,255,0.55)" />
-    </Row>
+    <div className="absolute inset-0 flex items-center justify-center bg-muted">
+      <Music className="size-8 text-muted-foreground" />
+    </div>
   );
 }
 
-// ─── Progress Bar ───────────────────────────────────────────────────────────
+const transportVariants = cva('cursor-pointer transition-colors', {
+  variants: {
+    size: {
+      sm: 'text-muted-foreground hover:text-foreground',
+      md: 'flex size-7 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm hover:bg-white/30',
+    },
+  },
+  defaultVariants: { size: 'sm' },
+});
 
-export function ProgressBar({ localProgressMs, durationMs, onSeek }: Readonly<{
-  localProgressMs: number;
-  durationMs: number;
-  onSeek: (payload?: Record<string, unknown>) => void;
+const transportIconVariants = cva('', {
+  variants: {
+    size: { sm: 'size-3.5', md: 'size-3' },
+  },
+  defaultVariants: { size: 'sm' },
+});
+
+export function TransportButton({ onClick, icon: Icon, size = 'sm' }: Readonly<{
+  onClick: () => void;
+  icon: typeof Play;
+  size?: 'sm' | 'md';
 }>) {
   return (
-    <Row gap="sm" align="center">
-      <Text content={formatMs(localProgressMs)} variant="caption" color="rgba(255,255,255,0.55)" />
-      <Box grow>
-        <Slider value={progressPercent(localProgressMs, durationMs)} min={0} max={100} step={1} onChange={onSeek} color="#1DB954" />
-      </Box>
-      <Text content={formatMs(durationMs)} variant="caption" color="rgba(255,255,255,0.55)" />
-    </Row>
+    <button type="button" onClick={onClick} className={transportVariants({ size })}>
+      <Icon className={transportIconVariants({ size })} fill="currentColor" />
+    </button>
   );
 }
 
-// ─── Volume Slider ──────────────────────────────────────────────────────────
+const playPauseVariants = cva(
+  'flex cursor-pointer items-center justify-center rounded-full bg-foreground text-background transition-transform hover:scale-105 active:scale-95',
+  {
+    variants: {
+      variant: {
+        idle: 'size-12',
+        compact: 'size-10',
+        default: 'size-8',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+);
+
+const playPauseIconVariants = cva('', {
+  variants: {
+    variant: { idle: 'size-5', compact: 'size-4', default: 'size-3.5' },
+  },
+  defaultVariants: { variant: 'default' },
+});
 
-export function VolumeSlider({ volume, onVolume }: Readonly<{
-  volume: number;
-  onVolume: (payload?: Record<string, unknown>) => void;
+export function PlayPauseButton({ isPlaying, onToggle, variant = 'default' }: Readonly<{
+  isPlaying: boolean;
+  onToggle: () => void;
+  variant?: 'default' | 'compact' | 'idle';
 }>) {
+  const Icon = isPlaying ? Pause : Play;
+
   return (
-    <Slider label="Volume" value={volume} min={0} max={100} step={5} unit="%" onChange={onVolume} icon="volume-2" color="rgba(255,255,255,0.6)" />
+    <button type="button" onClick={onToggle} className={playPauseVariants({ variant })}>
+      <Icon className={clsx(playPauseIconVariants({ variant }), !isPlaying && 'translate-x-px')} fill="currentColor" />
+    </button>
   );
 }

package/src/bricks/player.tsx

@@ -1,194 +1,176 @@
-import { Badge, Box, Button, Column, defineBrick, Icon, Image, Row, Spacer, Text, useBrickSize, useEffect, usePluginPreference, usePreference, useRef, useState } from '@brika/sdk/bricks';
-import { spotify } from '../index';
-import {
-  acquirePolling,
-  next,
-  pause,
-  play,
-  previous,
-  seek,
-  setVolume,
-  startPlayback,
-  usePlayerStore,
-} from '../playback-store';
-import type { PlaybackState } from '../spotify-api';
-import { Controls, type PlayerActions, ProgressBar, TrackInfo, VolumeSlider } from './components';
-
-// ─── Common layout props ─────────────────────────────────────────────────────
-
-interface TrackDisplay {
-  trackName: string;
-  artistName: string;
-  albumArt: string | null;
-}
-
-interface LayoutProps {
-  track: TrackDisplay;
+/**
+ * Spotify Player — client-rendered brick.
+ *
+ * Design: full-bleed album art, gradient overlay with scrolling track info,
+ * pointer-draggable progress bar, and minimal transport controls.
+ * Compact layout (≤2×2) shows cover art with overlay buttons.
+ */
+
+import { useBrickConfig, useBrickData, useBrickSize } from '@brika/sdk/brick-views';
+import { useCallAction, useLocale } from '@brika/sdk/ui-kit/hooks';
+import { LogIn, Music, SkipBack, SkipForward } from 'lucide-react';
+import { useCallback } from 'react';
+import { doNext, doPause, doPlay, doPrevious } from '../actions';
+import type { PlaybackState, RecentTrack } from '../spotify-api';
+import { AlbumCover, PlayPauseButton, ScrollText, TransportButton } from './components';
+import { useProgress } from './use-progress';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface SpotifyPlayerData {
   playback: PlaybackState | null;
-  actions: PlayerActions;
+  recentTrack: RecentTrack | null;
+  isAuthed: boolean;
+  loaded: boolean;
+  anchor: { progressMs: number; timestamp: number };
+  authUrl: string;
 }
 
-// ─── Layout: Small (1-2 cols) ───────────────────────────────────────────────
-
-function SmallPlayer({ track, playback, width, actions }: Readonly<LayoutProps & { width: number }>) {
-  const isPlaying = playback?.isPlaying ?? false;
-  return (
-    <Box backgroundImage={track.albumArt ?? undefined} backgroundFit="cover" rounded="lg" grow>
-      <Box background="rgba(0,0,0,0.3)" grow>
-        <Column justify="center" align="center" gap="sm">
-          <Spacer />
-          {width >= 2
-            ? <Controls isPlaying={isPlaying} onPlay={actions.onPlay} onPause={actions.onPause} onPrev={actions.onPrev} onNext={actions.onNext} />
-            : <Button onPress={isPlaying ? actions.onPause : actions.onPlay} icon={isPlaying ? 'pause' : 'play'} color="rgba(0,0,0,0.4)" />}
-          <Spacer />
-        </Column>
-      </Box>
-    </Box>
-  );
+function formatMs(ms: number) {
+  const totalSec = Math.floor(ms / 1000);
+  const m = Math.floor(totalSec / 60);
+  return `${m}:${String(totalSec % 60).padStart(2, '0')}`;
 }
 
-// ─── Layout: Medium (3-4 cols) ──────────────────────────────────────────────
+// ─── Main Component ──────────────────────────────────────────────────────────
 
-function MediumPlayer({ track, playback, height, localProgressMs, actions }: Readonly<LayoutProps & { height: number; localProgressMs: number }>) {
-  const isPlaying = playback?.isPlaying ?? false;
-  return (
-    <Box backgroundImage={track.albumArt ?? undefined} backgroundFit="cover" rounded="lg" grow padding="sm">
-      <Column grow justify={height >= 2 ? 'end' : 'start'}>
-        <Box background="rgba(0,0,0,0.7)" blur="lg" padding="md" grow={height < 2} rounded={height < 2 ? 'lg' : 'md'}>
-          <Column gap="sm">
-            <TrackInfo trackName={track.trackName} artistName={track.artistName} />
-            <Controls isPlaying={isPlaying} onPlay={actions.onPlay} onPause={actions.onPause} onPrev={actions.onPrev} onNext={actions.onNext} />
-            {playback && <ProgressBar localProgressMs={localProgressMs} durationMs={playback.durationMs} onSeek={actions.onSeek} />}
-            {playback && height >= 4 && <VolumeSlider volume={playback.volume} onVolume={actions.onVolume} />}
-          </Column>
-        </Box>
-      </Column>
-    </Box>
-  );
-}
+export default function SpotifyPlayer() {
+  const { width, height } = useBrickSize();
+  const config = useBrickConfig();
+  const data = useBrickData<SpotifyPlayerData>();
+  const { t } = useLocale();
+  const callAction = useCallAction();
 
-// ─── Layout: Large (5+ cols) ────────────────────────────────────────────────
+  const deviceId = typeof config.device === 'string' && config.device ? config.device : undefined;
+  const playback = data?.playback ?? null;
+  const recentTrack = data?.recentTrack ?? null;
+  const isAuthed = data?.isAuthed ?? false;
+  const anchor = data?.anchor ?? { progressMs: 0, timestamp: Date.now() };
+  const authUrl = data?.authUrl ?? '';
 
-function LargePlayer({ track, playback, height, localProgressMs, actions }: Readonly<LayoutProps & { height: number; localProgressMs: number }>) {
+  const track = playback ?? recentTrack;
   const isPlaying = playback?.isPlaying ?? false;
+  const durationMs = playback?.durationMs ?? 0;
+
+  const progress = useProgress(anchor, isPlaying, durationMs, callAction);
+
+  const onToggle = useCallback(() => {
+    callAction(isPlaying ? doPause : doPlay, { deviceId });
+  }, [callAction, isPlaying, deviceId]);
+  const onNext = useCallback(() => { callAction(doNext); }, [callAction]);
+  const onPrev = useCallback(() => { callAction(doPrevious); }, [callAction]);
+
+  // ─── Loading ──────────────────────────────────────────────────────
+
+  if (!data?.loaded) {
+    return (
+      <div className="flex flex-1 items-center justify-center">
+        <div className="size-5 animate-spin rounded-full border-2 border-white/20 border-t-white/80" />
+      </div>
+    );
+  }
+
+  // ─── Auth required ────────────────────────────────────────────────
+
+  if (!isAuthed) {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center gap-3 p-4">
+        <Music className="size-8 text-[#1DB954]" />
+        <span className="font-semibold text-foreground">{t('player.title')}</span>
+        <a
+          href={authUrl}
+          className="mt-2 flex items-center gap-2 rounded-full bg-[#1DB954] px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-[#1ed760]"
+        >
+          <LogIn className="size-4" />
+          {t('player.login')}
+        </a>
+      </div>
+    );
+  }
+
+  // ─── No track — idle play button ──────────────────────────────────
+
+  if (!track) {
+    return (
+      <div className="flex flex-1 items-center justify-center">
+        <PlayPauseButton isPlaying={false} onToggle={onToggle} variant="idle" />
+      </div>
+    );
+  }
+
+  // ─── Compact layout (≤2×2) ────────────────────────────────────────
+
+  if (width <= 2 && height <= 2) {
+    return (
+      <div className="relative flex h-full items-center justify-center overflow-hidden rounded-lg">
+        <AlbumCover trackName={track.trackName} artistName={track.artistName} albumArt={track.albumArt} />
+        <div className="absolute inset-0 bg-radial from-black/10 to-black/50" />
+        <div className="relative flex items-center gap-2">
+          <TransportButton onClick={onPrev} icon={SkipBack} size="md" />
+          <PlayPauseButton isPlaying={isPlaying} onToggle={onToggle} variant="compact" />
+          <TransportButton onClick={onNext} icon={SkipForward} size="md" />
+        </div>
+      </div>
+    );
+  }
+
+  // ─── Default layout ───────────────────────────────────────────────
+
   return (
-    <Box backgroundImage={track.albumArt ?? undefined} backgroundFit="cover" rounded="lg" blur="sm">
-      <Box background="rgba(0,0,0,0.7)" blur="lg" padding="lg" rounded="lg" grow>
-        <Row gap="lg">
-          {track.albumArt == null
-            ? <Box padding="none" />
-            : <Image src={track.albumArt} alt={playback?.albumName ?? track.trackName} fit="cover" rounded aspectRatio="1/1" />}
-          <Box grow padding="none">
-            <Column gap="sm" justify="center">
-              <TrackInfo trackName={track.trackName} artistName={track.artistName} />
-              <Controls isPlaying={isPlaying} onPlay={actions.onPlay} onPause={actions.onPause} onPrev={actions.onPrev} onNext={actions.onNext} />
-              {playback && <ProgressBar localProgressMs={localProgressMs} durationMs={playback.durationMs} onSeek={actions.onSeek} />}
-              {playback && height >= 4 && <VolumeSlider volume={playback.volume} onVolume={actions.onVolume} />}
-              {playback && height >= 5 && <Badge label={playback.deviceName} icon="speaker" variant="secondary" color="rgba(255,255,255,0.6)" />}
-            </Column>
-          </Box>
-        </Row>
-      </Box>
-    </Box>
+    <div className="flex h-full flex-col overflow-hidden rounded-lg">
+      <style>{`@keyframes spotify-scroll{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(var(--scroll-dist))}}`}</style>
+
+      {/* Album cover + track info */}
+      <div className="relative flex-1 overflow-hidden">
+        <AlbumCover trackName={track.trackName} artistName={track.artistName} albumArt={track.albumArt} />
+        <div className="absolute inset-0 bg-linear-to-t from-black/85 via-black/15 to-black/25" />
+        <div className="absolute inset-x-0 bottom-0 px-3 pb-2">
+          <ScrollText text={track.trackName} className="text-sm font-bold text-white [text-shadow:0_1px_4px_rgba(0,0,0,0.8)]" />
+          <ScrollText text={track.artistName} className="mt-0.5 text-[11px] text-[rgba(255,255,255,0.8)] [text-shadow:0_1px_3px_rgba(0,0,0,0.6)]" />
+        </div>
+      </div>
+
+      {/* Controls */}
+      <div className="space-y-1.5 px-3 pb-3 pt-2">
+        {/* Progress bar */}
+        <div>
+          <div
+            ref={progress.barRef}
+            className="group/bar relative h-1 cursor-pointer rounded-full bg-muted touch-none"
+            onPointerDown={progress.onPointerDown}
+            onPointerMove={progress.onPointerMove}
+            onPointerUp={progress.onPointerUp}
+            role="slider"
+            aria-valuenow={progress.localProgressMs}
+            aria-valuemin={0}
+            aria-valuemax={durationMs}
+            tabIndex={0}
+          >
+            <div
+              className="h-full rounded-full bg-primary"
+              style={{
+                width: `${progress.pct}%`,
+                transition: progress.dragging ? 'none' : 'width 0.3s ease',
+              }}
+            />
+            <div
+              className="absolute top-1/2 -translate-y-1/2 size-2.5 rounded-full bg-primary shadow-sm opacity-0 transition-opacity group-hover/bar:opacity-100"
+              style={{ left: `calc(${progress.pct}% - 5px)` }}
+            />
+          </div>
+          <div className="mt-0.5 flex justify-between text-[9px] text-muted-foreground tabular-nums">
+            <span>{formatMs(progress.localProgressMs)}</span>
+            <span>{formatMs(durationMs)}</span>
+          </div>
+        </div>
+
+        {/* Transport */}
+        <div className="flex items-center justify-center gap-4">
+          <TransportButton onClick={onPrev} icon={SkipBack} />
+          <PlayPauseButton isPlaying={isPlaying} onToggle={onToggle} />
+          <TransportButton onClick={onNext} icon={SkipForward} />
+        </div>
+      </div>
+    </div>
   );
 }
-
-// ─── Brick ──────────────────────────────────────────────────────────────────
-
-export const playerBrick = defineBrick(
-  {
-    id: 'player',
-    families: ['sm', 'md', 'lg'],
-    minSize: { w: 1, h: 1 },
-    maxSize: { w: 12, h: 8 },
-  },
-  () => {
-    const { width, height } = useBrickSize();
-    const { playback, recentTrack, devices, isAuthed, anchor } = usePlayerStore();
-    const [instanceDeviceId] = usePreference<string>('device', '');
-    const pluginDeviceId = usePluginPreference<string>('defaultDevice', '');
-    const preferredId = instanceDeviceId || pluginDeviceId || undefined;
-    const targetId = preferredId ?? devices[0]?.id;
-    const [localProgressMs, setLocalProgressMs] = useState(anchor.progressMs);
-    const anchorRef = useRef(anchor);
-
-    // Start/stop shared polling
-    useEffect(() => acquirePolling(), []);
-
-    // Keep anchor ref in sync and snap localProgressMs immediately
-    useEffect(() => {
-      anchorRef.current = anchor;
-      setLocalProgressMs(anchor.progressMs);
-    }, [anchor]);
-
-    // ─── Local progress interpolation (1s tick) ─────────────────────────
-
-    useEffect(() => {
-      if (!playback?.isPlaying) return;
-      const id = setInterval(() => {
-        const elapsed = Date.now() - anchorRef.current.timestamp;
-        const interpolated = Math.min(
-          anchorRef.current.progressMs + elapsed,
-          playback.durationMs,
-        );
-        setLocalProgressMs(interpolated);
-      }, 1000);
-      return () => clearInterval(id);
-    }, [playback?.isPlaying, playback?.durationMs]);
-
-    // ─── Actions ────────────────────────────────────────────────────────
-
-    const actions: PlayerActions = {
-      onPlay() {
-        if (playback) play(targetId);
-        else startPlayback(targetId);
-      },
-      onPause() { pause(targetId); },
-      onNext() { next(); },
-      onPrev() { previous(); },
-      onSeek(payload) {
-        if (typeof payload?.value === 'number' && playback) {
-          const positionMs = Math.round((payload.value / 100) * playback.durationMs);
-          seek(positionMs);
-          setLocalProgressMs(positionMs);
-        }
-      },
-      onVolume(payload) {
-        if (typeof payload?.value === 'number') setVolume(payload.value);
-      },
-    };
-
-    // ─── Render ─────────────────────────────────────────────────────────
-
-    if (!isAuthed) {
-      return (
-        <Box background="rgba(0,0,0,0.4)" blur="md" padding="lg" rounded="lg">
-          <Column gap="md" align="center" justify="center" grow>
-            <Icon name="music" size="lg" color="#1DB954" />
-            <Text content="Spotify" variant="heading" color="rgba(255,255,255,0.95)" />
-            <Spacer size="sm" />
-            <Button label="Login with Spotify" url={spotify.getAuthUrl()} icon="log-in" color="#1DB954" />
-          </Column>
-        </Box>
-      );
-    }
-
-    const track = playback ?? recentTrack;
-
-    if (!track) {
-      return (
-        <Box background="rgba(0,0,0,0.3)" blur="sm" padding="md" rounded="lg">
-          <Column align="center" justify="center" grow>
-            <Button icon="play" color="#1DB954" onPress={actions.onPlay} />
-          </Column>
-        </Box>
-      );
-    }
-
-    const layoutProps = { track, playback, actions };
-
-    if (width <= 2) return <SmallPlayer {...layoutProps} width={width} />;
-    if (width <= 4) return <MediumPlayer {...layoutProps} height={height} localProgressMs={localProgressMs} />;
-    return <LargePlayer {...layoutProps} height={height} localProgressMs={localProgressMs} />;
-  },
-);

package/src/bricks/use-progress.ts

@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { doSeek } from '../actions';
+
+type CallAction = <I, O>(ref: { readonly __actionId: string }, input?: I) => Promise<O>;
+
+export function useProgress(
+  anchor: { progressMs: number; timestamp: number },
+  isPlaying: boolean,
+  durationMs: number,
+  callAction: CallAction,
+) {
+  const [localProgressMs, setLocalProgressMs] = useState(anchor.progressMs);
+  const draggingRef = useRef(false);
+  const [dragging, setDragging] = useState(false);
+  const barRef = useRef<HTMLDivElement>(null);
+  const anchorRef = useRef(anchor);
+
+  useEffect(() => {
+    anchorRef.current = anchor;
+    setLocalProgressMs(anchor.progressMs);
+  }, [anchor.progressMs, anchor.timestamp]);
+
+  useEffect(() => {
+    if (!isPlaying || dragging) return;
+    const id = setInterval(() => {
+      const elapsed = Date.now() - anchorRef.current.timestamp;
+      setLocalProgressMs(Math.min(anchorRef.current.progressMs + elapsed, durationMs));
+    }, 1000);
+    return () => clearInterval(id);
+  }, [isPlaying, dragging, durationMs]);
+
+  const positionFromPointer = useCallback(
+    (clientX: number) => {
+      const bar = barRef.current;
+      if (!bar || durationMs <= 0) return 0;
+      const rect = bar.getBoundingClientRect();
+      const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      const positionMs = Math.round(ratio * durationMs);
+      setLocalProgressMs(positionMs);
+      return positionMs;
+    },
+    [durationMs],
+  );
+
+  const onPointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      draggingRef.current = true;
+      setDragging(true);
+      e.currentTarget.setPointerCapture(e.pointerId);
+      positionFromPointer(e.clientX);
+    },
+    [positionFromPointer],
+  );
+
+  const onPointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (!draggingRef.current) return;
+      positionFromPointer(e.clientX);
+    },
+    [positionFromPointer],
+  );
+
+  const onPointerUp = useCallback(
+    (e: React.PointerEvent) => {
+      if (!draggingRef.current) return;
+      draggingRef.current = false;
+      setDragging(false);
+      // Only send the seek API call on drag end (not on every move)
+      const positionMs = positionFromPointer(e.clientX);
+      callAction(doSeek, { positionMs });
+    },
+    [positionFromPointer, callAction],
+  );
+
+  const pct = durationMs > 0 ? (localProgressMs / durationMs) * 100 : 0;
+
+  return { localProgressMs, pct, dragging, barRef, onPointerDown, onPointerMove, onPointerUp };
+}

package/src/index.tsx

@@ -1,4 +1,4 @@
-import { defineOAuth, definePreferenceOptions } from '@brika/sdk';
+import { defineOAuth, definePreferenceOptions, setBrickData } from '@brika/sdk';
 import { log, onStop } from '@brika/sdk/lifecycle';
 
 // ─── OAuth ────────────────────────────────────────────────────────────────────
@@ -36,13 +36,39 @@ export { trackChanged } from './sparks';
 
 export { playBlock } from './blocks/play';
 
+// ─── Actions (registers defineAction handlers for client-side brick) ─────────
+
+import './actions';
+
 // ─── Bricks ───────────────────────────────────────────────────────────────────
 
-export { playerBrick } from './bricks/player';
+// Player brick is client-rendered — no server-side defineBrick export needed.
+// Brick type is registered from package.json metadata.
+
+// ─── Client-side data push ───────────────────────────────────────────────────
+
+import { acquirePolling, usePlayerStore } from './playback-store';
+
+// Start polling immediately so data is ready when the brick mounts
+const releasePolling = acquirePolling();
+
+// Push player state to client bricks whenever the store changes
+usePlayerStore.subscribe(() => {
+  const state = usePlayerStore.get();
+  setBrickData('player', {
+    playback: state.playback,
+    recentTrack: state.recentTrack,
+    isAuthed: state.isAuthed,
+    loaded: state.loaded,
+    anchor: state.anchor,
+    authUrl: spotify.getAuthUrl(),
+  });
+});
 
 // ─── Lifecycle ────────────────────────────────────────────────────────────────
 
 onStop(() => {
+  releasePolling();
   log.info('Spotify plugin stopping');
 });
 

package/src/playback-store.ts

@@ -5,8 +5,7 @@
  * `usePlayerStore()` automatically re-renders when the state changes.
  */
 
-import { log } from '@brika/sdk';
-import { defineSharedStore } from '@brika/sdk/bricks';
+import { defineSharedStore, log } from '@brika/sdk';
 import { spotify } from './index';
 import { getApi } from './shared';
 import { trackChanged } from './sparks';

package/src/bricks/utils.ts

@@ -1,13 +0,0 @@
-/** Format milliseconds as m:ss */
-export function formatMs(ms: number): string {
-  const s = Math.floor(ms / 1000);
-  const m = Math.floor(s / 60);
-  const sec = s % 60;
-  return `${m}:${sec.toString().padStart(2, '0')}`;
-}
-
-/** Convert progress/duration to 0-100 percentage */
-export function progressPercent(progress: number, duration: number): number {
-  if (duration <= 0) return 0;
-  return Math.round((progress / duration) * 100);
-}