officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

music becomes a plugin, and the player stays behind

Browse Source 
The whole of music moves to plugins/music/: the sidecar (index, indexer,
stream-audio, nightly-reindex), the four Postgres tables and their queries,
the /music workspace panels, MUSIC_API.md and the reindex CLI. The platform
keeps no music routes, no music capability entry, no music screen and no
music schema.

Three things stayed, each on purpose.

cliamp and the widget were out of scope by the owner's decision. The plugin's
sidecar still serves the two cliamp sockets, so it imports cliamp-ws.ts and
pulse-audio.ts from @@/sidecar/music/ — the files stay where they were.

The player did not move, and that was the open judgement call. Deciding it
took one fact: the dashboard widget imports useMusicPlayer and PlayerTrack
from officerdev, and the platform cannot import from a plugin. So the player
STATE stays whatever is decided about the UI around it, and two copies would
mean two audio engines. Given that, the engine and the bar stayed with the
state rather than being split from the thing they drive. Moving them would
also have needed a shell slot rendering a plugin-provided component on every
route — the one escape hatch this system deleted on purpose. MusicPlayerHost
gates on can('music'), which is now the plugin's permission, so the seam
switches itself off with the plugin.

api/music/router.ts stays too: api/cliamp/relay.ts imports getMusicServerWsUrl
from it. The plugin's api/router.ts re-exports that proxy rather than building
a second one — two subscribers to the one-shot music:server port announcement
would work today and 503 on the first reconnect where only one was listening.

Two bugs found on the way, neither visible from reading.

The app-store catalogue still listed music. Availability is derived from
sidecar_installs and a PLUGIN never gets a row there, so `music` would have
been permanently unavailable — which puts /music into deniedRoutes and blanks
the screen on a server where the plugin was installed and healthy. Exactly
the headscale bug documented six lines above it in the same file, and it would
have fired on the first install. Entry removed.

[test] root was "./src", so moving lyrics.test.ts into plugins/ stopped it
running and said nothing — the count fell by nine and the suite still read
green. Root is now the repo. Positional filters cannot fix this: `bun test
plugins` matches under root and finds src/servers/plugins/ instead.

registry.test.ts tested the `personal` mechanism THROUGH the music capability.
Re-anchored on a fixture rather than on another entry, because borrowing a
feature only moves the problem to the next extraction — and three of those
four tests had been passing for the wrong reason since music's api was
commented out on 2026-08-13, when everything started resolving to "refused
because nothing is claimed". The cliamp sockets being claimed by nothing is
now pinned by a test instead of being rediscovered.

music's `personal` paths ride across on readOnlyWrites, the one field a
manifest has. isRequestAllowedAtLevel concatenates the two lists, so a read
grant permits exactly the four paths it permitted yesterday, and no field was
added to the manifest to design a per-user model that is not this work.

bunx tsgo clean. 772 tests, 762 pass, 7 fail — all seven pre-existing and
unrelated (cliamp, pty, and five capability tests that other switched-off
plugins break). Baseline was 757/10; the three that went green are the ones
re-anchored above.

Not yet verified on the live server — that is next.
This commit is contained in:
pastilhas
2026-08-15 01:46:43 +00:00
parent 18c4ebd0b4
commit de3340398c
44 changed files with 418 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/music/web/FavoritesView.tsx
+215
View File
@@ -0,0 +1,215 @@
import { useState, type ReactNode } from 'react';
import { Link, useNavigate } from 'react-router';
import { useClient } from 'hooks/useClient';
import { usePanelChannel } from 'hooks/usePanelChannel';
import { Heart, User, Disc3, Music, ChevronRight, X } from 'lucide-react';
import { useMusicPlayer, type PlayerTrack } from 'officerdev';
import { MusicHeart } from 'officerdev';
import { useMusicFavorites } from 'officerdev';
import {
MUSIC_FAV_CHANNEL,
coverUrl,
musicPath,
parseAlbumName,
sortTracks,
toRel,
type AlbumMeta,
type FavoriteKind,
} from './shared';
// The user's favorited artists / albums / tracks, grouped — shown in the right panel. Keys follow the
// favorites convention: album/artist are music-relative ("Albums/…"), tracks are home paths
// ("Music/…/file"). An album/artist row is a link into the library; a track row plays, so it stays a
// button — it mutates rather than navigates, even though it also moves the library to the album.
export const FavoritesView = () => {
const { get, token } = useClient();
const navigate = useNavigate();
const player = useMusicPlayer();
const { favorites } = useMusicFavorites();
const [, setFavOpen] = usePanelChannel<boolean>(MUSIC_FAV_CHANNEL, false);
const playTrack = async (homePath: string) => {
const cut = homePath.lastIndexOf('/');
const albumHome = homePath.slice(0, cut);
const file = homePath.slice(cut + 1);
const albumRel = toRel(albumHome);
try {
const meta = await get<AlbumMeta>(`/music/meta?path=${encodeURIComponent(albumRel)}`);
const q: PlayerTrack[] = sortTracks(meta.tracks).map((t) => ({
albumRel,
file: t.file,
title: t.title,
artist: t.artist,
}));
player.playQueue(
q,
Math.max(
0,
q.findIndex((t) => t.file === file),
),
);
} catch {
player.playQueue([{ albumRel, file }], 0);
}
navigate(musicPath(albumRel));
setFavOpen(false);
};
const empty = !favorites.artists.length && !favorites.albums.length && !favorites.tracks.length;
return (
<div className="h-full overflow-y-auto p-4 md:p-6">
<div className="mb-4 flex items-center gap-2">
<Heart size={20} className="fill-red-500 text-red-500" />
<h1 className="flex-1 text-2xl font-bold text-foreground">Favorites</h1>
<button
type="button"
onClick={() => setFavOpen(false)}
className="cursor-pointer rounded p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
>
<X size={18} />
</button>
</div>
{empty ? (
<div className="flex flex-col items-center justify-center gap-3 py-24 text-center">
<Heart size={44} className="text-muted-foreground/30" />
<p className="text-sm text-muted-foreground">
No favorites yet. Click the heart on any artist, album or track.
</p>
</div>
) : (
<div className="flex flex-col gap-6">
<Section title="Artists" count={favorites.artists.length}>
{favorites.artists.map((key) => {
const segs = key.split('/');
return (
<FavRow
key={key}
kind="artist"
favKey={key}
cover={coverUrl(key, token)}
fallback={<User size={18} className="text-muted-foreground" />}
title={segs[segs.length - 1] ?? key}
to={musicPath(key)}
onClick={() => setFavOpen(false)}
chevron
/>
);
})}
</Section>
<Section title="Albums" count={favorites.albums.length}>
{favorites.albums.map((key) => {
const segs = key.split('/');
const { title, year } = parseAlbumName(segs[segs.length - 1] ?? key);
const artist = segs.length >= 3 ? segs[1] : '';
return (
<FavRow
key={key}
kind="album"
favKey={key}
cover={coverUrl(key, token)}
fallback={<Disc3 size={18} className="text-muted-foreground" />}
title={title}
subtitle={[artist, year].filter(Boolean).join(' · ')}
to={musicPath(key)}
onClick={() => setFavOpen(false)}
chevron
/>
);
})}
</Section>
<Section title="Tracks" count={favorites.tracks.length}>
{favorites.tracks.map((key) => {
const segs = key.split('/');
const base = segs[segs.length - 1] ?? key;
const albumRel = toRel(key.slice(0, Math.max(0, key.lastIndexOf('/'))));
const album = segs.length >= 2 ? parseAlbumName(segs[segs.length - 2]!).title : '';
return (
<FavRow
key={key}
kind="track"
favKey={key}
cover={coverUrl(albumRel, token)}
fallback={<Music size={18} className="text-muted-foreground" />}
title={base.replace(/\.[^/.]+$/, '')}
subtitle={album}
onClick={() => playTrack(key)}
/>
);
})}
</Section>
</div>
)}
</div>
);
};
const Section = ({ title, count, children }: { title: string; count: number; children: ReactNode }) =>
count ? (
<div>
<h2 className="mb-1 px-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{title} <span className="text-muted-foreground/60">{count}</span>
</h2>
<div className="flex flex-col">{children}</div>
</div>
) : null;
// `to` makes the row an anchor (an album or artist, which is a place); without it the row is a button
// (a track, which plays). The heart stays a sibling either way — it must not be inside either one.
const FavRow = ({
kind,
favKey,
cover,
fallback,
title,
subtitle,
to,
onClick,
chevron,
}: {
kind: FavoriteKind;
favKey: string;
cover: string;
fallback: ReactNode;
title: string;
subtitle?: string;
to?: string;
onClick: () => void;
chevron?: boolean;
}) => {
const [failed, setFailed] = useState(false);
const inner = (
<>
<div className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded bg-muted">
{cover && !failed ? (
<img src={cover} alt="" className="h-full w-full object-cover" onError={() => setFailed(true)} />
) : (
fallback
)}
</div>
<div className="min-w-0 flex-1">
<span className="block truncate text-sm text-foreground">{title}</span>
{subtitle ? <span className="block truncate text-xs text-muted-foreground">{subtitle}</span> : null}
</div>
</>
);
const cls = 'flex min-w-0 flex-1 cursor-pointer items-center gap-3 text-left';
return (
<div className="group flex items-center gap-3 rounded-md px-2 py-1.5 hover:bg-muted">
{to ? (
<Link to={to} onClick={onClick} className={cls}>
{inner}
</Link>
) : (
<button type="button" onClick={onClick} className={cls}>
{inner}
</button>
)}
<MusicHeart kind={kind} favKey={favKey} size={16} className="shrink-0" />
{chevron ? <ChevronRight size={16} className="shrink-0 text-muted-foreground" /> : null}
</div>
);
};
plugins/music/web/LyricsPane.tsx
+84
View File
@@ -0,0 +1,84 @@
import { useEffect, useMemo, useRef } from 'react';
import { Loader2, Music4 } from 'lucide-react';
import type { LyricLine } from './lyrics';
import { seekPlayer } from 'officerdev';
import { useActiveLyricIndex } from './useLyrics';
type LyricsPaneProps = {
lines: LyricLine[] | null;
synced: boolean;
loading: boolean;
};
/**
* The lyrics sheet. Synced (.lrc) lyrics centre, highlight the current line, auto-scroll and seek on
* click; plain (.txt) lyrics left-align and scroll by hand only.
*
* It takes no position prop: it subscribes to the player clock itself and only re-renders when the
* highlight moves, so the sixty-frames-a-second feed never reaches the DOM.
*/
export const LyricsPane = ({ lines, synced, loading }: LyricsPaneProps) => {
const scrollRef = useRef<HTMLDivElement>(null);
const lineRefs = useRef<(HTMLParagraphElement | null)[]>([]);
const activeIndex = useActiveLyricIndex(lines, synced);
// Keep the active line ~40% down the panel. scrollTop rather than scrollIntoView, which would also
// scroll every ancestor and drag the whole workspace.
useEffect(() => {
if (!synced || activeIndex < 0) return;
const box = scrollRef.current;
const el = lineRefs.current[activeIndex];
if (!box || !el) return;
box.scrollTo({ top: Math.max(0, el.offsetTop - box.clientHeight * 0.4), behavior: 'smooth' });
}, [activeIndex, synced]);
const rendered = useMemo(() => {
if (!lines) return null;
return lines.map((line, i) => {
const active = synced && i === activeIndex;
const seekable = synced && line.timeSec != null;
return (
<p
key={i}
ref={(el) => {
lineRefs.current[i] = el;
}}
onClick={seekable ? () => seekPlayer(line.timeSec!) : undefined}
className={[
'py-1 text-[15px] font-semibold leading-7 transition-colors duration-200',
synced ? 'text-center' : 'text-left text-foreground/85',
// Only the colour changes on the active line — no weight or size change, so nothing reflows
// and the sheet does not jitter as the highlight moves.
active ? 'text-foreground' : synced ? 'text-muted-foreground' : '',
seekable ? 'cursor-pointer hover:text-foreground/80' : '',
]
.filter(Boolean)
.join(' ')}
>
{line.text || (synced ? '♪' : ' ')}
</p>
);
});
}, [lines, synced, activeIndex]);
const empty = !loading && (!lines || !lines.length);
return (
<div ref={scrollRef} className="h-full overflow-y-auto px-6 pt-3">
{loading && (
<div className="flex h-full items-center justify-center text-muted-foreground">
<Loader2 size={20} className="animate-spin" />
</div>
)}
{empty && (
<div className="flex h-full flex-col items-center justify-center gap-2 text-muted-foreground">
<Music4 size={28} className="opacity-40" />
<p className="text-sm">No lyrics for this track.</p>
</div>
)}
{!loading && <div className="mx-auto max-w-2xl">{rendered}</div>}
{/* Tail so the last lines can still scroll up to the 40% mark. */}
{!loading && synced && <div style={{ height: '55%' }} />}
</div>
);
};
plugins/music/web/LyricsPanel.tsx
+49
View File
@@ -0,0 +1,49 @@
import { useClient } from 'hooks/useClient';
import { MicVocal } from 'lucide-react';
import { LyricsPane } from './LyricsPane';
import { useLyrics } from './useLyrics';
import { useLyricsOpen } from 'officerdev';
import { useMusicPlayer } from 'officerdev';
/**
* 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>
);
};
plugins/music/web/MusicBrowser.tsx
+226
View File
@@ -0,0 +1,226 @@
import { useState, useEffect, type ReactNode } from 'react';
import { Link } from 'react-router';
import { useClient } from 'hooks/useClient';
import { usePanelChannel } from 'hooks/usePanelChannel';
import { Library, Music2, ChevronLeft, Folder, Search, X, RefreshCw, Heart } from 'lucide-react';
import {
MUSIC_ROOT,
MUSIC_FAV_CHANNEL,
MUSIC_RESYNC_CHANNEL,
coverUrl,
fuzzyMatch,
musicParentPath,
musicPath,
toRel,
useMusicCwd,
type LsResult,
type Manifest,
type ManifestAlbum,
} from './shared';
// A row's leading thumbnail: the folder's indexed cover (its folder.jpg/cover.jpg, server-compressed),
// falling back to an icon when it has none or the image fails to load.
const RowThumb = ({ src, fallback }: { src: string | null; fallback: ReactNode }) => {
const [failed, setFailed] = useState(false);
useEffect(() => setFailed(false), [src]);
return (
<div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded bg-muted">
{src && !failed ? (
<img src={src} alt="" className="h-full w-full object-cover" onError={() => setFailed(true)} />
) : (
fallback
)}
</div>
);
};
// Hidden files/folders (dotfiles like .claude, .git) never belong in the library listing.
const visibleDirs = (r: LsResult) =>
r.entries
.filter((e) => e.type === 'directory' && !e.name.startsWith('.'))
.map((e) => e.name)
.sort();
// Left panel of the /music workspace — a single-column drill-down LIST navigator (libraries →
// artists → albums as list items; never a grid). Every row is a link to `/music?path=…`; MusicDetail
// (right panel) reads the same param and renders the rich detail (covers/grids/tracklist).
export const MusicBrowser = () => {
const { get, post, token } = useClient();
const cwd = useMusicCwd();
const [favOpen, setFavOpen] = usePanelChannel<boolean>(MUSIC_FAV_CHANNEL, false);
const [resync, setResync] = usePanelChannel<number>(MUSIC_RESYNC_CHANNEL, 0);
const [manifest, setManifest] = useState<Record<string, ManifestAlbum>>({});
const [libraries, setLibraries] = useState<string[]>([]);
const [folders, setFolders] = useState<string[]>([]);
const [query, setQuery] = useState('');
const [reindexing, setReindexing] = useState(false);
// Refetch manifest + libraries on mount and whenever a reindex bumps the resync nonce.
useEffect(() => {
get<Manifest>('/music/manifest')
.then((m) => setManifest(m.albums))
.catch(() => setManifest({}));
get<LsResult>(`/file-browser/ls?path=${encodeURIComponent(MUSIC_ROOT)}`)
.then((r) => setLibraries(visibleDirs(r)))
.catch(() => setLibraries([]));
}, [resync]);
// The container folder whose children we list = the current folder, or its parent when the current
// path is an album leaf (so its siblings stay listed while the right shows the tracklist).
const rel = toRel(cwd);
const isAlbum = (manifest[rel]?.tracks ?? 0) > 0;
const navFolder = !cwd ? null : isAlbum ? cwd.split('/').slice(0, -1).join('/') : cwd;
const selected = cwd ? cwd.split('/').pop() : null;
useEffect(() => {
if (!navFolder) {
setFolders([]);
return;
}
let cancelled = false;
get<LsResult>(`/file-browser/ls?path=${encodeURIComponent(navFolder)}`)
.then((r) => {
if (!cancelled) setFolders(visibleDirs(r));
})
.catch(() => {});
return () => {
cancelled = true;
};
}, [navFolder, resync]);
// Start each folder unfiltered.
useEffect(() => setQuery(''), [navFolder]);
// Trigger a server-side library rebuild, then bump the resync nonce so BOTH panels refetch their
// manifest / listings / meta (a fresh Date.now() value guarantees the effects re-run).
const reindex = async () => {
if (reindexing) return;
setReindexing(true);
try {
await post('/music/reindex');
setResync(Date.now());
} finally {
setReindexing(false);
}
};
const crumbs = navFolder ? navFolder.slice(MUSIC_ROOT.length + 1).split('/') : [];
const coverFor = (childRel: string) => (manifest[childRel]?.cover ? coverUrl(childRel, token) : null);
const shownLibraries = libraries.filter((l) => fuzzyMatch(query, l));
const shownFolders = folders.filter((f) => fuzzyMatch(query, f));
return (
<div className="flex h-full flex-col overflow-y-auto p-3">
<div className="flex items-center gap-1 pb-2">
{/* Favorites is a view of this panel, not a location, so it stays a channel — but going home
has to close it explicitly: the route doesn't change when you are already at the root. */}
<Link
to="/music"
onClick={() => setFavOpen(false)}
className="flex flex-1 cursor-pointer items-center gap-2 px-2 text-left text-foreground"
>
<Music2 size={20} className="text-primary" />
<span className="text-lg font-semibold">Music</span>
</Link>
<button
type="button"
onClick={() => setFavOpen(!favOpen)}
title="Favorites"
className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md hover:bg-muted"
>
<Heart
size={18}
className={favOpen ? 'fill-red-500 text-red-500' : 'text-muted-foreground hover:text-foreground'}
/>
</button>
</div>
<div className="mb-2 flex items-center gap-1.5 px-1">
<div className="flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-md border border-border bg-background px-2">
<Search size={13} className="shrink-0 text-muted-foreground" />
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Filter…"
className="min-w-0 flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
/>
{query && (
<button
type="button"
onClick={() => setQuery('')}
className="shrink-0 text-muted-foreground hover:text-foreground"
>
<X size={13} />
</button>
)}
</div>
<button
type="button"
onClick={reindex}
disabled={reindexing}
title="Reindex library"
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50"
>
<RefreshCw size={14} className={reindexing ? 'animate-spin' : ''} />
</button>
</div>
{!navFolder ? (
<>
<div className="flex items-center gap-2 px-2 pb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
<Library size={13} /> Libraries
</div>
<div className="flex flex-col gap-1.5">
{shownLibraries.map((lib) => (
<Link
key={lib}
to={musicPath(lib)}
className="flex items-center gap-3 truncate rounded-md px-2 py-2 text-left text-base text-muted-foreground hover:bg-muted/60 hover:text-foreground"
>
<RowThumb src={coverFor(lib)} fallback={<Library size={18} className="text-muted-foreground" />} />
<span className="truncate">{lib}</span>
</Link>
))}
{!shownLibraries.length && (
<span className="px-2 text-base text-muted-foreground">{query ? 'No matches' : 'No libraries'}</span>
)}
</div>
</>
) : (
<>
<Link
to={musicParentPath(toRel(navFolder))}
className="mb-1 flex items-center gap-1 truncate px-2 py-1 text-left text-xs text-muted-foreground hover:text-foreground"
>
<ChevronLeft size={13} className="shrink-0" />
<span className="truncate">{crumbs.join(' / ')}</span>
</Link>
<div className="flex flex-col gap-1.5">
{shownFolders.map((f) => (
<Link
key={f}
to={musicPath(toRel(`${navFolder}/${f}`))}
className={`flex items-center gap-3 truncate rounded-md px-2 py-2 text-left text-base ${
selected === f
? 'bg-muted text-foreground'
: 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
}`}
>
<RowThumb
src={coverFor(toRel(`${navFolder}/${f}`))}
fallback={<Folder size={18} className="text-muted-foreground" />}
/>
<span className="truncate">{f}</span>
</Link>
))}
{!shownFolders.length && (
<span className="px-2 py-2 text-base text-muted-foreground">
{query ? 'No matches' : 'No subfolders'}
</span>
)}
</div>
</>
)}
</div>
);
};
plugins/music/web/MusicDetail.tsx
+427
View File
@@ -0,0 +1,427 @@
import type { ReactNode } from 'react';
import { createContext, useContext, useState, useEffect, useRef } from 'react';
import { Link, useNavigate } from 'react-router';
import { useClient } from 'hooks/useClient';
import { usePanelChannel } from 'hooks/usePanelChannel';
import { Play, Pause, ChevronLeft, MicVocal, Volume2 } from 'lucide-react';
import type { LayoutNode, PanelComponents } from 'officerdev';
import { WorkspaceLayout } from 'officerdev';
import { MusicHeart } from 'officerdev';
import { FavoritesView } from './FavoritesView';
import { useMusicPlayer } from 'officerdev';
import type { PlayerTrack } from 'officerdev';
import { LyricsPanel } from './LyricsPanel';
import { MusicMiniBar } from './MusicMiniBar';
import { useLyricsOpen } from 'officerdev';
import {
MUSIC_ROOT,
MUSIC_FAV_CHANNEL,
MUSIC_RESYNC_CHANNEL,
TYPE_ORDER,
coverUrl,
fmtDuration,
isAudio,
musicParentPath,
musicPath,
sortTracks,
toRel,
trackHomePath,
useMusicCwd,
type AlbumMeta,
type Discography,
type LsResult,
type Manifest,
type ManifestAlbum,
type Track,
} from './shared';
// Turning the lyrics on splits THIS panel in two rather than opening a panel of its own: the workspace
// system is a layout engine as well as a shell, so a nested WorkspaceLayout with a fixed layout and
// components keyed by panel id gets a resizable split with no persistence and no registry entries.
const LYRICS_LAYOUT: LayoutNode = {
type: 'group',
id: 'music-detail-split',
direction: 'horizontal',
children: [
{ node: { type: 'panel', id: 'music-detail-list', appType: null }, size: 62 },
{ node: { type: 'panel', id: 'music-detail-lyrics', appType: null }, size: 38 },
],
};
// The library view is rendered by MusicDetail itself and passed down through context, so toggling the
// split moves the same element rather than mounting a second copy — the fetched album, and every request
// that produced it, survives the toggle.
const LibraryViewContext = createContext<ReactNode>(null);
const LibraryViewPanel = () => <>{useContext(LibraryViewContext)}</>;
const LYRICS_PANELS: PanelComponents = {
'music-detail-list': LibraryViewPanel,
'music-detail-lyrics': LyricsPanel,
};
const keepLayout = () => {};
// Right panel of the /music workspace — renders the content of `/music?path=…`: an album (tracklist),
// an artist (album cards grouped by discography type), or a folder grid. Drilling in is a link, so it
// changes the address; playback goes through the app-wide player.
export const MusicDetail = () => {
const { token, get } = useClient();
const navigate = useNavigate();
const player = useMusicPlayer();
const cwd = useMusicCwd();
const [favOpen, setFavOpen] = usePanelChannel<boolean>(MUSIC_FAV_CHANNEL, false);
const [resync] = usePanelChannel<number>(MUSIC_RESYNC_CHANNEL, 0);
const [lyricsOpen, toggleLyrics] = useLyricsOpen();
const [manifest, setManifest] = useState<Record<string, ManifestAlbum>>({});
const [libraries, setLibraries] = useState<string[]>([]);
const [folders, setFolders] = useState<string[]>([]);
const [album, setAlbum] = useState<Track[] | null>(null);
const [disco, setDisco] = useState<Discography | null>(null);
const [loading, setLoading] = useState(false);
// On first mount with no location yet, open the currently-playing album — so a reload/return lands on
// the track you were listening to (the player itself restores via the saved now-playing snapshot).
// Once only, so it never yanks you back after you navigate away (e.g. up to the library root).
const autoNavRef = useRef(false);
useEffect(() => {
if (autoNavRef.current) return;
if (cwd) {
autoNavRef.current = true;
return;
}
if (player.current) {
autoNavRef.current = true;
// `replace`: landing on /music and being moved to the playing album is one arrival, not two, so
// Back should leave the screen rather than undo a jump the user never asked for.
navigate(musicPath(player.current.albumRel), { replace: true });
}
}, [player.current, cwd, navigate]);
// Navigating anywhere (left panel or from within Favorites) closes the Favorites view.
useEffect(() => {
setFavOpen(false);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [cwd]);
// Refetch manifest + libraries on mount and whenever a reindex bumps the resync nonce. A fresh manifest
// object identity also re-runs the [cwd, manifest] listing effect below, refreshing the folder grid /
// album meta for whatever is currently open — so the right panel updates in place, no nav required.
useEffect(() => {
get<Manifest>('/music/manifest')
.then((m) => setManifest(m.albums))
.catch(() => setManifest({}));
get<LsResult>(`/file-browser/ls?path=${encodeURIComponent(MUSIC_ROOT)}`)
.then((r) =>
setLibraries(
r.entries
.filter((e) => e.type === 'directory' && !e.name.startsWith('.'))
.map((e) => e.name)
.sort(),
),
)
.catch(() => setLibraries([]));
}, [resync]);
const rel = toRel(cwd);
const childRel = (name: string) => (rel ? `${rel}/${name}` : name);
useEffect(() => {
if (!cwd) {
setFolders([]);
setAlbum(null);
setDisco(null);
return;
}
let cancelled = false;
setLoading(true);
setAlbum(null);
setDisco(null);
setFolders([]);
get<LsResult>(`/file-browser/ls?path=${encodeURIComponent(cwd)}`)
.then(async (r) => {
if (cancelled) return;
setFolders(
r.entries
.filter((e) => e.type === 'directory' && !e.name.startsWith('.'))
.map((e) => e.name)
.sort(),
);
const audio = r.entries.filter((e) => e.type === 'file' && isAudio(e.name)).map((e) => e.name);
if (audio.length) {
try {
const meta = await get<AlbumMeta>(`/music/meta?path=${encodeURIComponent(rel)}`);
if (!cancelled) setAlbum(sortTracks(meta.tracks));
} catch {
if (!cancelled) setAlbum(audio.sort().map((f) => ({ file: f })));
}
} else if (manifest[rel]?.disco) {
try {
const d = await get<Discography>(`/music/discography?path=${encodeURIComponent(rel)}`);
if (!cancelled) setDisco(d);
} catch {
/* plain grid */
}
}
})
.catch(() => {})
.finally(() => {
if (!cancelled) setLoading(false);
});
return () => {
cancelled = true;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [cwd, manifest]);
const playAlbum = async (albumRel: string, startIndex = 0) => {
try {
const meta = await get<AlbumMeta>(`/music/meta?path=${encodeURIComponent(albumRel)}`);
const queue: PlayerTrack[] = sortTracks(meta.tracks).map((t) => ({
albumRel,
file: t.file,
title: t.title,
artist: t.artist,
}));
player.playQueue(queue, startIndex);
} catch {
/* ignore */
}
};
const playCurrent = (i: number) => {
if (!album) return;
const queue: PlayerTrack[] = album.map((t) => ({ albumRel: rel, file: t.file, title: t.title, artist: t.artist }));
player.playQueue(queue, i);
};
const isCurrent = (albumRel: string, file: string) =>
player.current?.albumRel === albumRel && player.current?.file === file;
// The album's play button is the dock's play button when the dock is already on this album: same
// useGlobal state, so it shows pause while it plays and resumes where it stopped. It only starts the
// album from the top when something else (or nothing) is loaded.
const albumLoaded = !!album && player.current?.albumRel === rel;
const albumPlaying = albumLoaded && player.playing;
const toggleAlbum = () => (albumLoaded ? player.toggle() : playCurrent(0));
const crumbs = rel ? rel.split('/') : [];
// `r` is already the child's rel, so it is both the cover key and the link target — a library root and
// a nested album need no different treatment. Play and heart are siblings of the anchor, never inside it.
const Card = ({ r, name, playable }: { r: string; name: string; playable: boolean }) => (
<div className="group relative">
<Link
to={musicPath(r)}
className="flex w-full flex-col gap-2 rounded-lg bg-card/60 p-3 text-left transition-colors hover:bg-card"
>
<div className="aspect-square w-full overflow-hidden rounded-md bg-muted">
<img
src={coverUrl(r, token)}
alt=""
loading="lazy"
className="h-full w-full object-cover"
onError={(e) => {
(e.currentTarget as HTMLImageElement).style.visibility = 'hidden';
}}
/>
</div>
<span className="truncate text-sm font-medium text-foreground">{name}</span>
</Link>
{playable && (
<button
type="button"
onClick={() => playAlbum(r, 0)}
className="absolute bottom-14 right-4 flex h-10 w-10 translate-y-2 items-center justify-center rounded-full bg-primary text-primary-foreground opacity-0 shadow-lg transition-all group-hover:translate-y-0 group-hover:opacity-100 hover:scale-105"
>
<Play size={18} className="ml-0.5" />
</button>
)}
{playable && (
<MusicHeart
kind="album"
favKey={r}
size={18}
hoverReveal
className="absolute right-2 top-2 rounded-full bg-black/40 p-1.5 text-white"
/>
)}
</div>
);
const content = favOpen ? (
<div className="min-h-0 flex-1">
<FavoritesView />
</div>
) : (
<div className="min-h-0 flex-1 overflow-y-auto p-4 md:p-6">
{cwd && (
<Link
to={musicParentPath(rel)}
className="mb-4 flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
>
<ChevronLeft size={16} />
<span className="truncate">{crumbs.length ? crumbs.join(' / ') : cwd.split('/')[1]}</span>
</Link>
)}
{loading && <p className="text-sm text-muted-foreground">Loading…</p>}
{/* Home — the library roots carry their own folder art (the manifest indexes them like any other
folder), so they get the same cards as everything else rather than a wall of flat tiles. */}
{!cwd && (
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
{libraries.map((lib) => (
<Card key={lib} r={lib} name={lib} playable={(manifest[lib]?.tracks ?? 0) > 0} />
))}
</div>
)}
{/* Album */}
{album && (
<div className="flex flex-col gap-5">
<div className="flex items-end gap-5">
<div className="h-40 w-40 shrink-0 overflow-hidden rounded-lg bg-muted shadow-lg">
<img
src={coverUrl(rel, token)}
alt=""
className="h-full w-full object-cover"
onError={(e) => {
(e.currentTarget as HTMLImageElement).style.visibility = 'hidden';
}}
/>
</div>
<div className="min-w-0">
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Album</p>
<h1 className="truncate text-3xl font-bold text-foreground">{crumbs[crumbs.length - 1]}</h1>
<p className="mt-1 truncate text-sm text-muted-foreground">
{crumbs[crumbs.length - 2] ?? ''} · {album.length} songs
</p>
<div className="mt-3 flex items-center gap-3">
<button
type="button"
onClick={toggleAlbum}
title={albumPlaying ? 'Pause' : 'Play'}
className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-foreground hover:scale-105"
>
{albumPlaying ? <Pause size={18} /> : <Play size={18} className="ml-0.5" />}
</button>
<MusicHeart kind="album" favKey={rel} size={24} className="p-1" />
<button
type="button"
onClick={toggleLyrics}
title={lyricsOpen ? 'Hide lyrics' : 'Show lyrics'}
aria-pressed={lyricsOpen}
className={`cursor-pointer p-1 hover:text-foreground ${
lyricsOpen ? 'text-primary' : 'text-muted-foreground'
}`}
>
<MicVocal size={22} />
</button>
</div>
</div>
</div>
<div className="flex flex-col">
{album.map((t, i) => {
const cur = isCurrent(rel, t.file);
const artist = t.artist ?? t.albumArtist ?? '';
const dur = fmtDuration(t.durationSec);
return (
<div
key={t.file}
className={`group flex items-center gap-3 rounded px-3 py-2 ${
cur ? 'bg-primary/10 text-primary' : 'text-foreground hover:bg-muted'
}`}
>
<button
type="button"
onClick={() => playCurrent(i)}
className="flex min-w-0 flex-1 items-center gap-3 text-left"
>
<span className="flex w-5 shrink-0 justify-end">
{cur ? (
<Volume2 size={15} className="text-primary" />
) : (
<span className="text-sm tabular-nums text-muted-foreground">{i + 1}</span>
)}
</span>
<span className="min-w-0 flex-1">
<span className={`block truncate text-sm ${cur ? 'font-medium' : ''}`}>{t.title ?? t.file}</span>
{artist && <span className="block truncate text-xs text-muted-foreground">{artist}</span>}
</span>
{dur && <span className="shrink-0 text-xs tabular-nums text-muted-foreground">{dur}</span>}
</button>
<MusicHeart
kind="track"
favKey={trackHomePath(rel, t.file)}
size={16}
hoverReveal
className="shrink-0"
/>
</div>
);
})}
</div>
</div>
)}
{/* Artist — discography sections */}
{disco && !album && (
<div className="flex flex-col gap-6">
<div className="flex items-center gap-3">
<h1 className="text-3xl font-bold text-foreground">{disco.artist}</h1>
<MusicHeart kind="artist" favKey={rel} size={22} className="p-1" />
</div>
{TYPE_ORDER.filter((type) => folders.some((f) => (disco.albums[f] ?? 'Other') === type)).map((type) => (
<section key={type}>
<h2 className="mb-2 text-lg font-semibold text-foreground">
{type === 'Studio' ? 'Studio Albums' : type}
</h2>
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
{folders
.filter((f) => (disco.albums[f] ?? 'Other') === type)
.map((f) => (
<Card key={f} r={childRel(f)} name={f} playable={(manifest[childRel(f)]?.tracks ?? 0) > 0} />
))}
</div>
</section>
))}
</div>
)}
{/* Grid — a library root, or an artist folder (crumbs>=2) whose albums aren't grouped by a
discography. Show an artist header + heart on the latter. */}
{!album && !disco && cwd && !loading && (
<div className="flex flex-col gap-6">
{crumbs.length >= 2 && (
<div className="flex items-center gap-3">
<h1 className="text-3xl font-bold text-foreground">{crumbs[crumbs.length - 1]}</h1>
<MusicHeart kind="artist" favKey={rel} size={22} className="p-1" />
</div>
)}
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
{folders.map((f) => (
<Card key={f} r={childRel(f)} name={f} playable={(manifest[childRel(f)]?.tracks ?? 0) > 0} />
))}
{!folders.length && <p className="text-sm text-muted-foreground">Empty</p>}
</div>
</div>
)}
</div>
);
// The scrubber sits at the foot of this panel instead of the app-wide dock, which hides itself on
// /music: the album view already carries the transport, so all the dock added here was a second row.
const libraryView = (
<div className="flex h-full flex-col">
{content}
<MusicMiniBar />
</div>
);
if (!lyricsOpen) return libraryView;
return (
<LibraryViewContext.Provider value={libraryView}>
<WorkspaceLayout layout={LYRICS_LAYOUT} onLayoutChange={keepLayout} components={LYRICS_PANELS} noHeader />
</LibraryViewContext.Provider>
);
};
plugins/music/web/MusicMiniBar.tsx
+103
View File
@@ -0,0 +1,103 @@
import { useRef } from 'react';
import { useClient } from 'hooks/useClient';
import { MicVocal, Pause, Play } from 'lucide-react';
import { SeekBar } from 'officerdev';
import { coverUrl, fmtClock } from './shared';
import { seekPlayer } from 'officerdev';
import { useLyricsOpen } from 'officerdev';
import { useMusicPlayer } from 'officerdev';
import { usePlayerClock } from './usePlayerClock';
/**
* The player, reduced to what the /music screen does not already show. The album view has the transport
* and the tracklist, so this is the scrubber — plus play/pause and the lyrics toggle, which are the two
* controls you can still want while browsing an album that ISN'T the one playing.
*
* It sits inside the detail panel, which is why the full dock hides on /music: two bars would be one bar
* too many, and the dock's own row costs the workspace its height on every screen.
*/
export const MusicMiniBar = () => {
const { token } = useClient();
const { current, playing, toggle } = useMusicPlayer();
const [lyricsOpen, toggleLyrics] = useLyricsOpen();
const { position, duration } = usePlayerClock();
const barRef = useRef<HTMLDivElement>(null);
if (!current) return null;
const onSeekDown = (ev: React.MouseEvent<HTMLDivElement>) => {
const seekAt = (clientX: number) => {
const bar = barRef.current;
if (!bar || !duration) return;
const rect = bar.getBoundingClientRect();
seekPlayer(Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)) * duration);
};
ev.preventDefault();
seekAt(ev.clientX);
const onMove = (moveEv: MouseEvent) => seekAt(moveEv.clientX);
const onUp = () => {
window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseup', onUp);
};
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseup', onUp);
};
return (
<div className="flex shrink-0 items-center gap-3 border-t border-border bg-card/60 px-4 py-2">
<div className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded bg-muted">
<img
src={coverUrl(current.albumRel, token)}
alt=""
className="h-full w-full object-cover"
onError={(ev) => {
(ev.currentTarget as HTMLImageElement).style.visibility = 'hidden';
}}
/>
</div>
<button
type="button"
onClick={toggle}
title={playing ? 'Pause' : 'Play'}
className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-foreground hover:opacity-90 active:scale-95"
>
{playing ? <Pause size={15} /> : <Play size={15} className="ml-0.5" />}
</button>
<div className="hidden w-48 min-w-0 shrink-0 sm:block">
<p className="truncate text-xs font-medium text-foreground">{current.title ?? current.file}</p>
{current.artist && <p className="truncate text-[11px] text-muted-foreground">{current.artist}</p>}
</div>
<span className="w-10 shrink-0 text-right font-mono text-[10px] tabular-nums text-muted-foreground">
{fmtClock(position)}
</span>
<div className="min-w-0 flex-1">
<SeekBar
barRef={barRef}
onSeekDown={onSeekDown}
pct={duration ? (position / duration) * 100 : 0}
trackClass="bg-muted"
fillClass="bg-primary"
thumbClass="border-background"
/>
</div>
<span className="w-10 shrink-0 font-mono text-[10px] tabular-nums text-muted-foreground">
{fmtClock(duration)}
</span>
<button
type="button"
onClick={toggleLyrics}
title={lyricsOpen ? 'Hide lyrics' : 'Show lyrics'}
aria-pressed={lyricsOpen}
className={`shrink-0 cursor-pointer p-1 hover:text-foreground ${
lyricsOpen ? 'text-primary' : 'text-muted-foreground'
}`}
>
<MicVocal size={16} />
</button>
</div>
);
};
plugins/music/web/layout.ts
+11
View File
@@ -0,0 +1,11 @@
import type { LayoutNode } from 'officerdev';
export const defaultLayout: LayoutNode = {
type: 'group',
id: 'music-root',
direction: 'horizontal',
children: [
{ node: { type: 'panel', id: 'music-browser', appType: 'music-browser' }, size: 26 },
{ node: { type: 'panel', id: 'music-detail', appType: 'music-detail' }, size: 74 },
],
};
plugins/music/web/lyrics.test.ts
+73
View File
@@ -0,0 +1,73 @@
import { describe, expect, test } from 'bun:test';
import { parseLyrics, activeLineIndex } from './lyrics';
describe('parseLyrics', () => {
test('plain text is not synced and keeps every line, blanks included', () => {
const { synced, lines } = parseLyrics('first\n\n second \n');
expect(synced).toBe(false);
expect(lines.map((l) => l.text)).toEqual(['first', '', 'second', '']);
expect(lines.every((l) => l.timeSec === undefined)).toBe(true);
});
test('lrc timestamps parse to seconds, with hundredths', () => {
const { synced, lines } = parseLyrics('[00:12.50]hello\n[01:03]world');
expect(synced).toBe(true);
expect(lines).toEqual([
{ timeSec: 12.5, text: 'hello' },
{ timeSec: 63, text: 'world' },
]);
});
test('a single-digit fraction is tenths, not thousandths', () => {
expect(parseLyrics('[00:01.5]x').lines[0]?.timeSec).toBe(1.5);
});
test('metadata tags are dropped', () => {
const { lines } = parseLyrics('[ar:Artist]\n[ti:Title]\n[00:01.00]real');
expect(lines).toEqual([{ timeSec: 1, text: 'real' }]);
});
test('several stamps on one line become several lines, sorted by time', () => {
const { lines } = parseLyrics('[02:00.00][00:30.00]chorus\n[01:00.00]verse');
expect(lines).toEqual([
{ timeSec: 30, text: 'chorus' },
{ timeSec: 60, text: 'verse' },
{ timeSec: 120, text: 'chorus' },
]);
});
test('an untimed line inside a synced file survives, but blanks do not', () => {
const { lines } = parseLyrics('[00:01.00]a\n\nspoken\n');
expect(lines.map((l) => l.text)).toEqual(['spoken', 'a']);
});
test('an empty timed line is kept — it is a musical rest', () => {
expect(parseLyrics('[00:10.00]').lines).toEqual([{ timeSec: 10, text: '' }]);
});
});
describe('activeLineIndex', () => {
const lines = [
{ timeSec: 10, text: 'a' },
{ timeSec: 20, text: 'b' },
{ timeSec: 30, text: 'c' },
];
test('-1 before the first line', () => {
expect(activeLineIndex(lines, 0)).toBe(-1);
});
test('the 0.2s lookahead highlights fractionally early', () => {
expect(activeLineIndex(lines, 9.7)).toBe(-1);
expect(activeLineIndex(lines, 9.9)).toBe(0);
});
test('holds the last line past the end', () => {
expect(activeLineIndex(lines, 25)).toBe(1);
expect(activeLineIndex(lines, 9999)).toBe(2);
});
test('untimed lines never become active', () => {
expect(activeLineIndex([{ text: 'x' }, { timeSec: 5, text: 'y' }], 60)).toBe(1);
});
});
plugins/music/web/lyrics.ts
+64
View File
@@ -0,0 +1,64 @@
/**
* Parse lyrics text into displayable lines. `.lrc` carries `[mm:ss.xx]` timestamps (possibly several per
* line, e.g. repeated choruses) and metadata tags ([ar:], [ti:], …) which are dropped. `.txt` is plain.
* A synced result is sorted by time so the active-line lookup is a simple scan.
*
* Ported from the mobile app (packages/core/src/services/lyrics.ts) — same file format, same server,
* so the two must agree on what a line is.
*/
export type LyricLine = { timeSec?: number; text: string };
export type ParsedLyrics = { synced: boolean; lines: LyricLine[] };
const TIME_RE = /\[(\d{1,2}):(\d{2})(?:[.:](\d{1,3}))?\]/g;
const META_RE = /^\[(ar|ti|al|by|offset|length|re|ve|au|la|id):/i;
/**
* Lines are treated as synced whenever the text actually contains `[mm:ss]` timestamps — the server's
* `X-Lyrics-Format` header is not trusted (it need not survive a proxy, and embedded lyrics carrying
* timestamps should sync regardless of which file they came from). No timestamps → plain text.
*/
export function parseLyrics(text: string): ParsedLyrics {
if (!/\[\d{1,2}:\d{2}/.test(text)) {
return { synced: false, lines: text.split(/\r?\n/).map((t) => ({ text: t.trim() })) };
}
const out: LyricLine[] = [];
for (const rawLine of text.split(/\r?\n/)) {
if (META_RE.test(rawLine.trim())) continue;
const stamps: number[] = [];
let m: RegExpExecArray | null;
TIME_RE.lastIndex = 0;
while ((m = TIME_RE.exec(rawLine)) !== null) {
const min = Number(m[1]);
const sec = Number(m[2]);
// "[00:12.3]" is three tenths, not three milliseconds — pad right before reading as thousandths.
const frac = m[3] ? Number(`${m[3]}00`.slice(0, 3)) / 1000 : 0;
stamps.push(min * 60 + sec + frac);
}
const lyric = rawLine.replace(TIME_RE, '').trim();
if (!stamps.length) {
if (lyric) out.push({ text: lyric }); // a plain line inside an otherwise-synced file
continue;
}
for (const t of stamps) out.push({ timeSec: t, text: lyric });
}
const synced = out.some((l) => l.timeSec != null);
if (synced) out.sort((a, b) => (a.timeSec ?? 0) - (b.timeSec ?? 0));
return { synced, lines: out };
}
/**
* Index of the active line for a playback position (synced only); -1 before the first line. The 0.2s
* lookahead lands the highlight fractionally early, which reads as on-time — arriving late reads as lag.
*/
export function activeLineIndex(lines: LyricLine[], positionSec: number): number {
let idx = -1;
for (let i = 0; i < lines.length; i++) {
const t = lines[i]?.timeSec;
if (t == null) continue;
if (t <= positionSec + 0.2) idx = i;
else break;
}
return idx;
}
plugins/music/web/panels.ts
+18
View File
@@ -0,0 +1,18 @@
import type { AppRegistryMeta } from 'officerdev';
import { Music, ListMusic } from 'lucide-react';
import { MusicBrowser } from './MusicBrowser';
import { MusicDetail } from './MusicDetail';
// The panels this plugin contributes. The shell renders `WorkspaceView` around them, arranged by
// `layout.ts` — a plugin never renders the screen.
//
// The two do not coordinate with each other: both read `?path=` off the URL, which is why there is no
// channel between them and why a library location is linkable and cmd-clickable. `MusicDetail` opens a
// NESTED workspace of its own for the lyrics split, which is a layout inside a panel rather than a second
// screen.
//
// `availableOnPanel: false` keeps them off the generic panel picker: they belong to this plugin's screen.
export const appRegistryMetas: AppRegistryMeta[] = [
{ key: 'music-browser', name: 'Library', icon: ListMusic, component: MusicBrowser, availableOnPanel: false },
{ key: 'music-detail', name: 'Music', icon: Music, component: MusicDetail, availableOnPanel: false },
];
plugins/music/web/shared.ts
+13
View File
@@ -0,0 +1,13 @@
// The library vocabulary, re-exported from the host.
//
// It lives at `officerdev/src/MusicPlayer/shared.ts` rather than here because `MusicPlayerHost` — the
// global player bar, which stays in the platform; see that directory's index.ts for why — needs a third
// of it. One definition on the host side beats a copy either side of the plugin boundary drifting apart.
//
// Taken from the `officerdev/MusicPlayer/shared` subpath rather than the `officerdev` barrel because the
// type names here (`DirEntry`, `Track`, `Manifest`) are ones the barrel already spends on the FileBrowser.
// The subpath is a declared export of the package (`"./*": "./src/*.ts"`), not a reach into its insides.
//
// Every panel in this directory imports from HERE, so the seam is one file to read rather than a
// different specifier in each of them.
export * from 'officerdev/MusicPlayer/shared';
plugins/music/web/useLyrics.ts
+78
View File
@@ -0,0 +1,78 @@
import { useEffect, useState } from 'react';
import type { LyricLine } from './lyrics';
import { activeLineIndex, parseLyrics } from './lyrics';
import { getPlayerTime, subscribePlayerTime } from 'officerdev';
export type UseLyrics = {
loading: boolean;
/** null while loading, and when the track has none. */
lines: LyricLine[] | null;
synced: boolean;
};
/**
* Fetch + parse the current track's lyrics. Gated on `enabled` so nothing is requested until the pane
* is actually open — the dock lives on every screen and most listening happens with it closed.
*
* Deliberately NOT gated on an index "has lyrics" flag the way the mobile app does: the web player's
* queue carries only what it needs to stream, and a 404 for a track without lyrics is cheaper than
* threading that flag through every producer of a queue.
*
* Auth goes in the query string rather than a header, matching how this component already builds its
* /stream and /cover URLs.
*/
export const useLyrics = (albumRel: string, file: string, enabled: boolean, token: string | null): UseLyrics => {
const [state, setState] = useState<UseLyrics>({ loading: false, lines: null, synced: false });
useEffect(() => {
if (!enabled || !albumRel || !file) {
setState({ loading: false, lines: null, synced: false });
return;
}
const url =
`/api/music/lyrics?path=${encodeURIComponent(albumRel)}&file=${encodeURIComponent(file)}` +
(token ? `&token=${encodeURIComponent(token)}` : '');
const ctrl = new AbortController();
setState({ loading: true, lines: null, synced: false });
fetch(url, { signal: ctrl.signal })
.then(async (res) => {
// 404 is the ordinary "this track has no lyrics" answer, not an error worth surfacing.
if (!res.ok) return setState({ loading: false, lines: null, synced: false });
const { synced, lines } = parseLyrics(await res.text());
setState({ loading: false, lines, synced });
})
.catch(() => {
if (!ctrl.signal.aborted) setState({ loading: false, lines: null, synced: false });
});
return () => ctrl.abort();
}, [albumRel, file, enabled, token]);
return state;
};
/**
* Index of the line to highlight, driven by the engine's position feed.
*
* The feed ticks every animation frame; this re-renders only when the index actually moves — React bails
* out of an identical setState — so a synced sheet repaints about once a line instead of sixty times a
* second, even though it lives nowhere near the component that owns the clock.
*/
export const useActiveLyricIndex = (lines: LyricLine[] | null, synced: boolean): number => {
const [index, setIndex] = useState(-1);
useEffect(() => {
if (!synced || !lines) {
setIndex(-1);
return;
}
setIndex(activeLineIndex(lines, getPlayerTime()));
return subscribePlayerTime((sec) => {
const next = activeLineIndex(lines, sec);
setIndex((prev) => (prev === next ? prev : next));
});
}, [lines, synced]);
return index;
};
plugins/music/web/usePlayerClock.ts
+16
View File
@@ -0,0 +1,16 @@
import { useEffect, useState } from 'react';
import { getPlayerDuration, getPlayerTime, subscribePlayerTime } from 'officerdev';
/**
* Position + duration, straight off the engine's per-frame feed.
*
* A scrubber genuinely wants every frame, so — unlike the lyrics — this does re-render at 60fps. Keep it
* in the smallest component that draws the bar: whatever calls this hook repaints with it.
*/
export const usePlayerClock = () => {
const [clock, setClock] = useState(() => ({ position: getPlayerTime(), duration: getPlayerDuration() }));
useEffect(() => subscribePlayerTime((position, duration) => setClock({ position, duration })), []);
return clock;
};