diff --git a/src/workspaces/widgets/MusicPlayer/index.tsx b/plugins/music/widgets/index.tsx similarity index 90% rename from src/workspaces/widgets/MusicPlayer/index.tsx rename to plugins/music/widgets/index.tsx index cb76fd77..13c35a67 100644 --- a/src/workspaces/widgets/MusicPlayer/index.tsx +++ b/plugins/music/widgets/index.tsx @@ -3,7 +3,7 @@ import { useMusicPlayer } from 'officerdev'; import { useState, useEffect } from 'react'; import { Music, ChevronLeft, Play, Folder } from 'lucide-react'; import { useClient } from 'hooks/useClient'; -import { Widget } from '../Widget'; +import { Widget } from 'widgets/Widget'; // Music Player widget — a BROWSER over the library. Top-level dirs of ~/Music are "libraries" (tabs); // within a library you drill through folders (Artist → Albums → …) until a folder has tracks (songs). @@ -36,7 +36,14 @@ export const MusicPlayer = () => { // Top-level libraries (once). useEffect(() => { get(`/file-browser/ls?path=${encodeURIComponent(MUSIC_ROOT)}`) - .then((r) => setLibraries(r.entries.filter((e) => e.type === 'directory').map((e) => e.name).sort())) + .then((r) => + setLibraries( + r.entries + .filter((e) => e.type === 'directory') + .map((e) => e.name) + .sort(), + ), + ) .catch(() => setLibraries([])); }, []); @@ -50,7 +57,12 @@ export const MusicPlayer = () => { get(`/file-browser/ls?path=${encodeURIComponent(cwd)}`) .then(async (r) => { if (cancelled) return; - setDirs(r.entries.filter((e) => e.type === 'directory').map((e) => e.name).sort()); + setDirs( + r.entries + .filter((e) => e.type === 'directory') + .map((e) => e.name) + .sort(), + ); const audio = r.entries.filter((e) => e.type === 'file' && isAudio(e.name)).map((e) => e.name); if (audio.length) { const rel = cwd.slice(MUSIC_ROOT.length + 1); // /<…> @@ -92,7 +104,12 @@ export const MusicPlayer = () => { }; const play = (i: number) => { - const queue: PlayerTrack[] = songs.map((t) => ({ albumRel: relToMusic, file: t.file, title: t.title, artist: t.artist })); + const queue: PlayerTrack[] = songs.map((t) => ({ + albumRel: relToMusic, + file: t.file, + title: t.title, + artist: t.artist, + })); player.playQueue(queue, i); }; const isCurrent = (file: string) => player.current?.albumRel === relToMusic && player.current?.file === file; @@ -107,7 +124,9 @@ export const MusicPlayer = () => { type="button" onClick={() => selectLibrary(lib)} className={`shrink-0 rounded-full px-2.5 py-1 text-xs ${ - library === lib ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:text-foreground' + library === lib + ? 'bg-primary text-primary-foreground' + : 'bg-muted text-muted-foreground hover:text-foreground' }`} > {lib} @@ -144,7 +163,9 @@ export const MusicPlayer = () => { />
-

{breadcrumb[breadcrumb.length - 1] ?? library}

+

+ {breadcrumb[breadcrumb.length - 1] ?? library} +

{breadcrumb[breadcrumb.length - 2] ?? ''}