429Enjoyer
328 lines
15 KiB
TypeScript
328 lines
15 KiB
TypeScript
import { useState, useCallback, useEffect } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Upload, X, FileText, Trash2, AlertCircle, Music, Clock, Download } from "lucide-react";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import { ReadEmbeddedLyrics, SelectLyricsFiles, ExtractLyricsToLRC } from "../../wailsjs/go/main/App";
|
|
import { toastWithSound as toast } from "@/lib/toast-with-sound";
|
|
import { OnFileDrop, OnFileDropOff } from "../../wailsjs/runtime/runtime";
|
|
interface LyricsFile {
|
|
path: string;
|
|
name: string;
|
|
format: string;
|
|
lyrics: string;
|
|
source: string;
|
|
synced: boolean;
|
|
status: "loading" | "loaded" | "empty" | "error";
|
|
error?: string;
|
|
}
|
|
const SUPPORTED_EXTENSIONS = [".lrc", ".txt", ".flac", ".mp3", ".m4a", ".aac", ".opus", ".ogg"];
|
|
function getExtension(path: string): string {
|
|
const lower = path.toLowerCase();
|
|
const dot = lower.lastIndexOf(".");
|
|
return dot >= 0 ? lower.slice(dot) : "";
|
|
}
|
|
export function LyricsManagerPage() {
|
|
const [files, setFiles] = useState<LyricsFile[]>([]);
|
|
const [selectedPath, setSelectedPath] = useState<string | null>(null);
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
const [extracting, setExtracting] = useState(false);
|
|
useEffect(() => {
|
|
const checkFullscreen = () => {
|
|
setIsFullscreen(window.innerHeight >= window.screen.height * 0.9);
|
|
};
|
|
checkFullscreen();
|
|
window.addEventListener("resize", checkFullscreen);
|
|
window.addEventListener("focus", checkFullscreen);
|
|
return () => {
|
|
window.removeEventListener("resize", checkFullscreen);
|
|
window.removeEventListener("focus", checkFullscreen);
|
|
};
|
|
}, []);
|
|
const addFiles = useCallback(async (paths: string[]) => {
|
|
const validPaths = paths.filter((path) => SUPPORTED_EXTENSIONS.includes(getExtension(path)));
|
|
if (validPaths.length === 0) {
|
|
if (paths.length > 0) {
|
|
toast.error("Unsupported files", {
|
|
description: "Only LRC and audio files (FLAC, MP3, M4A) are supported.",
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
const newPaths: string[] = [];
|
|
setFiles((prev) => {
|
|
const toAdd = validPaths.filter((path) => !prev.some((f) => f.path === path));
|
|
newPaths.push(...toAdd);
|
|
const entries: LyricsFile[] = toAdd.map((path) => {
|
|
const name = path.split(/[/\\]/).pop() || path;
|
|
return {
|
|
path,
|
|
name,
|
|
format: getExtension(path).slice(1),
|
|
lyrics: "",
|
|
source: "",
|
|
synced: false,
|
|
status: "loading" as const,
|
|
};
|
|
});
|
|
if (entries.length === 0) {
|
|
return prev;
|
|
}
|
|
return [...prev, ...entries];
|
|
});
|
|
for (const path of newPaths) {
|
|
try {
|
|
const result = await ReadEmbeddedLyrics(path);
|
|
setFiles((prev) => prev.map((f) => {
|
|
if (f.path !== path)
|
|
return f;
|
|
if (result.error) {
|
|
return { ...f, status: "empty" as const, error: result.error };
|
|
}
|
|
return {
|
|
...f,
|
|
lyrics: result.lyrics,
|
|
source: result.source,
|
|
synced: result.synced,
|
|
status: "loaded" as const,
|
|
};
|
|
}));
|
|
}
|
|
catch (err) {
|
|
setFiles((prev) => prev.map((f) => f.path === path
|
|
? { ...f, status: "error" as const, error: err instanceof Error ? err.message : "Failed to read lyrics" }
|
|
: f));
|
|
}
|
|
}
|
|
setSelectedPath((prev) => prev ?? newPaths[0] ?? null);
|
|
}, []);
|
|
const handleSelectFiles = async () => {
|
|
try {
|
|
const selected = await SelectLyricsFiles();
|
|
if (selected && selected.length > 0) {
|
|
addFiles(selected);
|
|
}
|
|
}
|
|
catch (err) {
|
|
toast.error("File Selection Failed", {
|
|
description: err instanceof Error ? err.message : "Failed to select files",
|
|
});
|
|
}
|
|
};
|
|
const handleFileDrop = useCallback((_x: number, _y: number, paths: string[]) => {
|
|
setIsDragging(false);
|
|
if (paths.length === 0)
|
|
return;
|
|
addFiles(paths);
|
|
}, [addFiles]);
|
|
useEffect(() => {
|
|
OnFileDrop((x, y, paths) => {
|
|
handleFileDrop(x, y, paths);
|
|
}, true);
|
|
return () => {
|
|
OnFileDropOff();
|
|
};
|
|
}, [handleFileDrop]);
|
|
const removeFile = (path: string) => {
|
|
setFiles((prev) => {
|
|
const next = prev.filter((f) => f.path !== path);
|
|
setSelectedPath((current) => {
|
|
if (current !== path)
|
|
return current;
|
|
return next[0]?.path ?? null;
|
|
});
|
|
return next;
|
|
});
|
|
};
|
|
const clearFiles = () => {
|
|
setFiles([]);
|
|
setSelectedPath(null);
|
|
};
|
|
const selectedFile = files.find((f) => f.path === selectedPath) || null;
|
|
const extractFile = async (file: LyricsFile, overwrite: boolean) => {
|
|
const result = await ExtractLyricsToLRC(file.path, overwrite);
|
|
if (result.success) {
|
|
return { ok: true as const, output: result.output_path };
|
|
}
|
|
if (result.already_exists) {
|
|
return { ok: false as const, alreadyExists: true, output: result.output_path };
|
|
}
|
|
return { ok: false as const, error: result.error || "Failed to extract lyrics" };
|
|
};
|
|
const handleExtractSelected = async () => {
|
|
if (!selectedFile || selectedFile.status !== "loaded")
|
|
return;
|
|
setExtracting(true);
|
|
try {
|
|
const result = await extractFile(selectedFile, false);
|
|
if (result.ok) {
|
|
toast.success("Lyrics extracted", { description: result.output });
|
|
}
|
|
else if (result.alreadyExists) {
|
|
toast.info("LRC already exists", {
|
|
description: "A .lrc file with the same name already exists next to this file.",
|
|
});
|
|
}
|
|
else {
|
|
toast.error("Extract failed", { description: result.error });
|
|
}
|
|
}
|
|
catch (err) {
|
|
toast.error("Extract failed", {
|
|
description: err instanceof Error ? err.message : "Unknown error",
|
|
});
|
|
}
|
|
finally {
|
|
setExtracting(false);
|
|
}
|
|
};
|
|
const handleExtractAll = async () => {
|
|
const extractable = files.filter((f) => f.status === "loaded");
|
|
if (extractable.length === 0) {
|
|
toast.error("Nothing to extract", {
|
|
description: "No files with embedded lyrics are loaded.",
|
|
});
|
|
return;
|
|
}
|
|
setExtracting(true);
|
|
let success = 0;
|
|
let skipped = 0;
|
|
let failed = 0;
|
|
for (const file of extractable) {
|
|
try {
|
|
const result = await extractFile(file, false);
|
|
if (result.ok)
|
|
success++;
|
|
else if (result.alreadyExists)
|
|
skipped++;
|
|
else
|
|
failed++;
|
|
}
|
|
catch {
|
|
failed++;
|
|
}
|
|
}
|
|
setExtracting(false);
|
|
if (success > 0) {
|
|
toast.success("Lyrics extracted", {
|
|
description: `${success} file(s) extracted${skipped > 0 ? `, ${skipped} skipped` : ""}${failed > 0 ? `, ${failed} failed` : ""}`,
|
|
});
|
|
}
|
|
else if (skipped > 0 && failed === 0) {
|
|
toast.info("Already extracted", {
|
|
description: `${skipped} .lrc file(s) already exist.`,
|
|
});
|
|
}
|
|
else {
|
|
toast.error("Extract failed", {
|
|
description: `${failed} file(s) failed to extract.`,
|
|
});
|
|
}
|
|
};
|
|
const embeddedLoadedCount = files.filter((f) => f.status === "loaded" && f.source === "embedded").length;
|
|
return (<div className={`space-y-6 ${isFullscreen ? "h-full flex flex-col" : ""}`}>
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold">Lyrics Manager</h1>
|
|
{files.length > 0 && (<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" onClick={handleSelectFiles}>
|
|
<Upload className="h-4 w-4"/>
|
|
Add Files
|
|
</Button>
|
|
{embeddedLoadedCount > 0 && (<Button variant="outline" size="sm" onClick={handleExtractAll} disabled={extracting}>
|
|
{extracting ? <Spinner className="h-4 w-4"/> : <Download className="h-4 w-4"/>}
|
|
Extract All
|
|
</Button>)}
|
|
<Button variant="outline" size="sm" onClick={clearFiles} disabled={extracting}>
|
|
<Trash2 className="h-4 w-4"/>
|
|
Clear All
|
|
</Button>
|
|
</div>)}
|
|
</div>
|
|
|
|
<div className={`flex flex-col items-center justify-center border-2 border-dashed rounded-lg transition-all ${isFullscreen ? "flex-1 min-h-[400px]" : "min-h-[400px]"} ${isDragging
|
|
? "border-primary bg-primary/10"
|
|
: "border-muted-foreground/30"}`} onDragOver={(e) => {
|
|
e.preventDefault();
|
|
setIsDragging(true);
|
|
}} onDragLeave={(e) => {
|
|
e.preventDefault();
|
|
setIsDragging(false);
|
|
}} onDrop={(e) => {
|
|
e.preventDefault();
|
|
setIsDragging(false);
|
|
}} style={{ "--wails-drop-target": "drop" } as React.CSSProperties}>
|
|
{files.length === 0 ? (<>
|
|
<div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
|
|
<Upload className="h-8 w-8 text-primary"/>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground mb-4 text-center">
|
|
{isDragging
|
|
? "Drop your files here"
|
|
: "Drag and drop LRC or audio files here, or click the button below to select"}
|
|
</p>
|
|
<Button onClick={handleSelectFiles} size="lg">
|
|
<Upload className="h-5 w-5"/>
|
|
Select Files
|
|
</Button>
|
|
<p className="text-xs text-muted-foreground mt-4 text-center">
|
|
Reads embedded lyrics from FLAC, MP3, M4A, Opus or plain LRC files
|
|
</p>
|
|
</>) : (<div className="w-full h-full p-4 flex flex-col md:flex-row gap-4 min-h-0">
|
|
|
|
<div className="md:w-64 shrink-0 flex flex-col gap-2 md:border-r md:pr-4 max-h-48 md:max-h-none overflow-y-auto">
|
|
{files.map((file) => {
|
|
const isActive = file.path === selectedPath;
|
|
return (<button key={file.path} onClick={() => setSelectedPath(file.path)} className={`group flex items-center gap-2 rounded-lg border p-2 text-left transition-colors ${isActive ? "border-primary bg-primary/10" : "hover:bg-muted/60"}`}>
|
|
{file.status === "loading" ? (<Spinner className="h-4 w-4 shrink-0 text-primary"/>)
|
|
: file.status === "error" || file.status === "empty" ? (<AlertCircle className="h-4 w-4 shrink-0 text-destructive"/>)
|
|
: (<FileText className="h-4 w-4 shrink-0 text-muted-foreground"/>)}
|
|
<div className="flex-1 min-w-0">
|
|
<p className="truncate text-xs font-medium">{file.name}</p>
|
|
<p className="truncate text-[10px] uppercase text-muted-foreground">{file.format}</p>
|
|
</div>
|
|
<span role="button" tabIndex={-1} onClick={(e) => { e.stopPropagation(); removeFile(file.path); }} className="opacity-0 group-hover:opacity-100 transition-opacity rounded p-1 hover:bg-muted">
|
|
<X className="h-3.5 w-3.5"/>
|
|
</span>
|
|
</button>);
|
|
})}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0 flex flex-col min-h-0">
|
|
{!selectedFile ? (<div className="flex-1 flex items-center justify-center text-sm text-muted-foreground">
|
|
Select a file to view its lyrics
|
|
</div>) : selectedFile.status === "loading" ? (<div className="flex-1 flex items-center justify-center gap-2 text-sm text-muted-foreground">
|
|
<Spinner className="h-4 w-4"/>
|
|
Reading lyrics...
|
|
</div>) : selectedFile.status === "error" || selectedFile.status === "empty" ? (<div className="flex-1 flex flex-col items-center justify-center gap-2 text-center px-6">
|
|
<AlertCircle className="h-8 w-8 text-destructive"/>
|
|
<p className="text-sm font-medium">{selectedFile.name}</p>
|
|
<p className="text-xs text-muted-foreground">{selectedFile.error || "No lyrics found"}</p>
|
|
</div>) : (<>
|
|
<div className="flex flex-col gap-2 pb-3 border-b shrink-0">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<p className="truncate text-sm font-medium flex-1">{selectedFile.name}</p>
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase shrink-0">
|
|
{selectedFile.source === "lrc" ? (<><FileText className="h-3 w-3"/> LRC</>) : (<><Music className="h-3 w-3"/> Embedded</>)}
|
|
</span>
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase shrink-0">
|
|
<Clock className="h-3 w-3"/>
|
|
{selectedFile.synced ? "Synced" : "Plain"}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{selectedFile.source === "embedded" && (<Button variant="outline" size="sm" onClick={handleExtractSelected} disabled={extracting}>
|
|
{extracting ? <Spinner className="h-4 w-4"/> : <Download className="h-4 w-4"/>}
|
|
Extract LRC
|
|
</Button>)}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto pt-3 min-h-0">
|
|
<pre className="whitespace-pre-wrap break-words font-sans text-sm leading-relaxed text-foreground/90">{selectedFile.lyrics}</pre>
|
|
</div>
|
|
</>)}
|
|
</div>
|
|
</div>)}
|
|
</div>
|
|
</div>);
|
|
}
|