Claude Opus 5
6e07da7a36
Everything the plugin is, moved out of officerdev/platform on 2026-08-15 — 41 files, unchanged from the tree they left. manifest.ts identity, one permission, ffmpeg/ffprobe declared api/ the sidecar proxy; the prefix comes from mountPrefix() sidecar/ the whole /api/music contract — indexing, streaming, per-user state db/ music_favorites, _playlists, _playlist_items, _now_playing web/ panels, layout, and the player: engine, bar, lyrics, favourites cliamp/ the second playback path, parked — not working, kept deliberately widgets/ the dashboard widget, parked — plugins cannot contribute widgets assets/ icon.png, the dock tile scripts/ the reindex CLI PLUGIN.md is the design record: what moved, what stayed, what broke, and why. MUSIC_API.md is the contract the phone and tablet apps speak, and the reason the sidecar's HTTP shape is not free to change. ── It does not build here, and that is the point ── The platform resolves `hooks/useClient`, `officerdev`, `officerdb/db` and `@@/*` through the workspace links in its own node_modules. Measured from this directory, outside the platform checkout, every one of them fails to resolve — 7 imports in the backend, ~29 in the frontend. So this repository is the source of truth, not yet a buildable unit. Making it one means the host API becoming something a plugin can depend on rather than something it reaches into. That is the next problem, and having the code here is what makes it unavoidable rather than theoretical. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
50 lines
2.1 KiB
TypeScript
50 lines
2.1 KiB
TypeScript
import { useClient } from 'hooks/useClient';
|
|
import { MicVocal } from 'lucide-react';
|
|
import { LyricsPane } from './LyricsPane';
|
|
import { useLyrics } from './useLyrics';
|
|
import { useLyricsOpen } from './useLyricsOpen';
|
|
import { useMusicPlayer } from './useMusicPlayer';
|
|
|
|
/**
|
|
* The right-hand half of the /music detail panel when lyrics are on. It follows the PLAYING track, not
|
|
* the browsed album — which is why it reads the player rather than taking props from the album view.
|
|
*/
|
|
export const LyricsPanel = () => {
|
|
const { token } = useClient();
|
|
const { current } = useMusicPlayer();
|
|
const [, toggleLyrics] = useLyricsOpen();
|
|
const lyrics = useLyrics(current?.albumRel ?? '', current?.file ?? '', true, token);
|
|
|
|
// `dark` is not decoration: the theme tokens are CSS variables scoped to a `.dark` ancestor, so marking
|
|
// this subtree re-points foreground/muted-foreground/border at their dark values. Without it a light
|
|
// theme would paint near-black text on the black sheet.
|
|
return (
|
|
<div className="dark flex h-full flex-col bg-black">
|
|
<div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-2">
|
|
<MicVocal size={15} className="shrink-0 text-muted-foreground" />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium text-foreground">{current?.title ?? current?.file ?? 'Lyrics'}</p>
|
|
{current?.artist && <p className="truncate text-xs text-muted-foreground">{current.artist}</p>}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={toggleLyrics}
|
|
title="Hide lyrics"
|
|
className="shrink-0 cursor-pointer text-xs text-muted-foreground hover:text-foreground"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
<div className="min-h-0 flex-1">
|
|
{current ? (
|
|
<LyricsPane lines={lyrics.lines} synced={lyrics.synced} loading={lyrics.loading} />
|
|
) : (
|
|
<div className="flex h-full items-center justify-center px-6 text-center text-sm text-muted-foreground">
|
|
Play something to see its lyrics.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|