admin/SpotiFLAC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.cleanup

Browse Source
This commit is contained in:
afkarxyz
2026-04-02 17:41:25 +07:00
parent 99f5e4e8b3
commit 7f12b76fd9
11 changed files with 151 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AboutPage.tsx
+2 -7
View File
@@ -15,16 +15,13 @@ import KofiLogo from "@/assets/ko-fi.gif";
import KofiSvg from "@/assets/kofi_symbol.svg";
import UsdtBarcode from "@/assets/usdt.jpg";
import { langColors } from "@/assets/github-lang-colors";
const browserExtensionItems = [
{ icon: AudioTTSProIcon, label: "AudioTTS Pro", alt: "AudioTTS Pro" },
{ icon: ChatGPTTTSIcon, label: "ChatGPT TTS", alt: "ChatGPT TTS" },
{ icon: XIcon, label: "Twitter/X Media Batch Downloader", alt: "Twitter/X Media Batch Downloader" },
{ icon: XProIcon, label: "Twitter/X Media Batch Downloader Pro", alt: "Twitter/X Media Batch Downloader Pro" },
];
const projectCardClass = "cursor-pointer transition-colors hover:bg-muted/50 dark:hover:bg-accent/50";
export function AboutPage() {
const [activeTab, setActiveTab] = useState<"projects" | "support">("projects");
const [repoStats, setRepoStats] = useState<Record<string, any>>({});
@@ -321,14 +318,12 @@ export function AboutPage() {
<CardHeader>
<CardTitle>Browser Extensions & Scripts</CardTitle>
<CardDescription className="flex flex-col gap-2 pt-2">
{browserExtensionItems.map((item) => (
<div key={item.alt} className="flex items-center gap-2">
{browserExtensionItems.map((item) => (<div key={item.alt} className="flex items-center gap-2">
<img src={item.icon} className="h-[22px] w-[22px] rounded-sm shadow-sm" alt={item.alt}/>
<span className="text-[11px] leading-tight text-muted-foreground">
{item.label}
</span>
</div>
))}
</div>))}
</CardDescription>
</CardHeader>
</Card>
frontend/src/components/ApiStatusTab.tsx
-1
View File
@@ -2,7 +2,6 @@ import { Button } from "@/components/ui/button";
import { RefreshCw, CheckCircle2, XCircle, Loader2 } from "lucide-react";
import { TidalIcon, QobuzIcon, AmazonIcon } from "./PlatformIcons";
import { useApiStatus } from "@/hooks/useApiStatus";
export function ApiStatusTab() {
const { sources, statuses, isCheckingAll, refreshAll } = useApiStatus();
return (<div className="space-y-6">
frontend/src/components/AudioAnalysisPage.tsx
+58 -317
View File
@@ -13,14 +13,11 @@ import { loadAudioAnalysisPreferences } from "@/lib/audio-analysis-preferences";
import { toastWithSound as toast } from "@/lib/toast-with-sound";
import { GetFileSizes, ListAudioFilesInDir, SaveSpectrumImage, SelectAudioFiles, SelectFolder } from "../../wailsjs/go/main/App";
import { OnFileDrop, OnFileDropOff } from "../../wailsjs/runtime/runtime";
interface AudioAnalysisPageProps {
onBack?: () => void;
}
type BatchItemStatus = "pending" | "analyzing" | "success" | "error";
type BatchItemSource = "path" | "browser";
interface BatchAnalysisItem {
id: string;
source: BatchItemSource;
@@ -32,19 +29,16 @@ interface BatchAnalysisItem {
result?: AnalysisResult;
file?: File;
}
interface QueueProgressState {
completed: number;
total: number;
fileName: string;
}
const EMPTY_PROGRESS_STATE: QueueProgressState = {
completed: 0,
total: 0,
fileName: "",
};
const SUPPORTED_AUDIO_EXTENSIONS = [".flac", ".mp3", ".m4a", ".aac"];
const SUPPORTED_AUDIO_ACCEPT = [
".flac",
@@ -85,11 +79,9 @@ function fileNameFromPath(filePath: string): string {
const parts = filePath.split(/[/\\]/);
return parts[parts.length - 1] || filePath;
}
function browserFileId(file: File): string {
return `browser:${file.name}:${file.size}:${file.lastModified}`;
}
function downloadDataURL(dataUrl: string, fileName: string): void {
const link = document.createElement("a");
link.href = dataUrl;
@@ -98,24 +90,20 @@ function downloadDataURL(dataUrl: string, fileName: string): void {
link.click();
document.body.removeChild(link);
}
function formatFileSize(bytes: number): string {
if (bytes <= 0) {
return "0 B";
}
const k = 1024;
const sizes = ["B", "KB", "MB", "GB"];
const index = Math.min(sizes.length - 1, Math.floor(Math.log(bytes) / Math.log(k)));
return `${parseFloat((bytes / Math.pow(k, index)).toFixed(1))} ${sizes[index]}`;
}
function formatDuration(seconds: number): string {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, "0")}`;
}
function itemMetaLine(item: BatchAnalysisItem): string {
if (item.result) {
const parts = [
@@ -123,14 +111,11 @@ function itemMetaLine(item: BatchAnalysisItem): string {
`${(item.result.sample_rate / 1000).toFixed(1)} kHz`,
formatDuration(item.result.duration),
];
if (typeof item.result.bitrate_kbps === "number" && item.result.bitrate_kbps > 0) {
parts.push(`${item.result.bitrate_kbps} kbps`);
}
return parts.join(" • ");
}
switch (item.status) {
case "analyzing":
return "Analyzing audio quality...";
@@ -141,7 +126,6 @@ function itemMetaLine(item: BatchAnalysisItem): string {
return "Waiting to be analyzed";
}
}
function statusIcon(status: BatchItemStatus) {
switch (status) {
case "analyzing":
@@ -156,19 +140,7 @@ function statusIcon(status: BatchItemStatus) {
}
}
export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
const {
analysisProgress,
spectrumLoading,
spectrumProgress,
analyzeFile,
analyzeFilePath,
cancelAnalysis,
loadStoredAnalysis,
clearStoredAnalysis,
reAnalyzeSpectrum,
clearResult,
} = useAudioAnalysis();
const { analysisProgress, spectrumLoading, spectrumProgress, analyzeFile, analyzeFilePath, cancelAnalysis, loadStoredAnalysis, clearStoredAnalysis, reAnalyzeSpectrum, clearResult, } = useAudioAnalysis();
const [items, setItems] = useState<BatchAnalysisItem[]>([]);
const [activeItemId, setActiveItemId] = useState<string | null>(null);
const [isDragging, setIsDragging] = useState(false);
@@ -177,53 +149,43 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
const [isBatchRunning, setIsBatchRunning] = useState(false);
const [batchProgress, setBatchProgress] = useState<QueueProgressState>(EMPTY_PROGRESS_STATE);
const [exportProgress, setExportProgress] = useState<QueueProgressState>(EMPTY_PROGRESS_STATE);
const fileInputRef = useRef<HTMLInputElement>(null);
const spectrumRef = useRef<SpectrumVisualizationHandle>(null);
const batchRunIdRef = useRef(0);
const itemsRef = useRef(items);
const activeItemIdRef = useRef<string | null>(activeItemId);
useEffect(() => {
itemsRef.current = items;
}, [items]);
useEffect(() => {
activeItemIdRef.current = activeItemId;
}, [activeItemId]);
const setActiveSelection = useCallback((nextId: string | null) => {
activeItemIdRef.current = nextId;
setActiveItemId(nextId);
}, []);
const activeItem = items.find((item) => item.id === activeItemId) ?? null;
const successItems = items.filter((item) => item.status === "success" && item.result?.spectrum);
const pendingItems = items.filter((item) => item.status === "pending");
const isSingleMode = items.length === 1;
const isBatchMode = items.length > 1;
const canResumeBatch = isBatchMode && !isBatchRunning && pendingItems.length > 0;
const batchPercent = batchProgress.total > 0
? Math.round(Math.max(0, Math.min(100, ((batchProgress.completed + (isBatchRunning ? analysisProgress.percent / 100 : 0)) / batchProgress.total) * 100)))
: 0;
const exportPercent = exportProgress.total > 0
? Math.round(Math.max(0, Math.min(100, (exportProgress.completed / exportProgress.total) * 100)))
: 0;
useEffect(() => {
if (!activeItem?.result) {
return;
}
loadStoredAnalysis(activeItem.id, activeItem.result, activeItem.path);
}, [activeItem, loadStoredAnalysis]);
const runBatchAnalysis = useCallback(async (entries: BatchAnalysisItem[]) => {
if (entries.length === 0) {
return;
}
const runId = batchRunIdRef.current + 1;
batchRunIdRef.current = runId;
setIsBatchRunning(true);
@@ -232,27 +194,22 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
total: entries.length,
fileName: entries[0]?.name ?? "",
});
let successCount = 0;
let failCount = 0;
try {
for (let index = 0; index < entries.length; index++) {
if (batchRunIdRef.current !== runId) {
return;
}
const entry = entries[index];
setBatchProgress({
completed: index,
total: entries.length,
fileName: entry.name,
});
setItems((prev) => prev.map((item) => item.id === entry.id
? { ...item, status: "analyzing", error: undefined }
: item));
const outcome = entry.source === "browser" && entry.file
? await analyzeFile(entry.file, {
analysisKey: entry.id,
@@ -264,15 +221,12 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
displayPath: entry.path,
suppressToast: true,
});
if (batchRunIdRef.current !== runId) {
return;
}
if (outcome.cancelled) {
return;
}
if (outcome.result) {
const analysisResult = outcome.result;
successCount++;
@@ -285,7 +239,6 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
size: analysisResult.file_size || item.size,
}
: item));
const hasSelectedSuccess = itemsRef.current.some((item) => item.id === activeItemIdRef.current && item.status === "success" && item.result);
if (!hasSelectedSuccess) {
setActiveSelection(entry.id);
@@ -300,20 +253,17 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
error: outcome.error || "Analysis failed",
}
: item));
if (!activeItemIdRef.current) {
setActiveSelection(entry.id);
}
}
}
if (batchRunIdRef.current === runId) {
setBatchProgress({
completed: entries.length,
total: entries.length,
fileName: "",
});
if (successCount > 0) {
toast.success("Batch Analysis Complete", {
description: `Successfully analyzed ${successCount} file(s)${failCount > 0 ? `, ${failCount} failed` : ""}`,
@@ -332,47 +282,38 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
}
}
}, [analyzeFile, analyzeFilePath, setActiveSelection]);
const ensureIdleQueue = useCallback(() => {
if (!isBatchRunning) {
return true;
}
toast.info("Analysis in progress", {
description: "Please wait for the current batch to finish or clear it first.",
});
return false;
}, [isBatchRunning]);
const addPathItems = useCallback(async (paths: string[]) => {
if (!ensureIdleQueue()) {
return;
}
const uniquePaths = Array.from(new Set(paths.filter(Boolean)));
const invalidCount = uniquePaths.filter((path) => !isSupportedAudioPath(path)).length;
const validPaths = uniquePaths.filter(isSupportedAudioPath);
if (invalidCount > 0) {
toast.error("Unsupported format", {
description: `Only ${SUPPORTED_AUDIO_LABEL} files can be analyzed.`,
});
}
if (validPaths.length === 0) {
return;
}
const existingIds = new Set(itemsRef.current.map((item) => item.id));
const newPaths = validPaths.filter((path) => !existingIds.has(path));
if (newPaths.length === 0) {
toast.info("No new files added", {
description: "All selected files were already in the batch queue.",
});
return;
}
const fileSizes = await GetFileSizes(newPaths);
const newItems = newPaths.map((path) => ({
id: path,
@@ -382,39 +323,31 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
size: fileSizes[path] || 0,
status: "pending" as const,
}));
if (validPaths.length !== newPaths.length) {
toast.info("Some files skipped", {
description: `${validPaths.length - newPaths.length} file(s) were already queued.`,
});
}
setItems((prev) => [...prev, ...newItems]);
if (!activeItemIdRef.current) {
setActiveSelection(newItems[0]?.id ?? null);
}
void runBatchAnalysis(newItems);
}, [ensureIdleQueue, runBatchAnalysis, setActiveSelection]);
const addBrowserFiles = useCallback(async (files: File[]) => {
if (!ensureIdleQueue()) {
return;
}
const validFiles = files.filter(isSupportedAudioFile);
const invalidCount = files.length - validFiles.length;
if (invalidCount > 0) {
toast.error("Unsupported format", {
description: `Only ${SUPPORTED_AUDIO_LABEL} files can be analyzed.`,
});
}
if (validFiles.length === 0) {
return;
}
const existingIds = new Set(itemsRef.current.map((item) => item.id));
const newItems = validFiles
.map((file) => ({
@@ -427,33 +360,27 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
file,
}))
.filter((item) => !existingIds.has(item.id));
if (newItems.length === 0) {
toast.info("No new files added", {
description: "All selected files were already in the batch queue.",
});
return;
}
if (validFiles.length !== newItems.length) {
toast.info("Some files skipped", {
description: `${validFiles.length - newItems.length} file(s) were already queued.`,
});
}
setItems((prev) => [...prev, ...newItems]);
if (!activeItemIdRef.current) {
setActiveSelection(newItems[0]?.id ?? null);
}
void runBatchAnalysis(newItems);
}, [ensureIdleQueue, runBatchAnalysis, setActiveSelection]);
const handleSelectFiles = useCallback(async () => {
if (!ensureIdleQueue()) {
return;
}
try {
const selectedPaths = await SelectAudioFiles();
if (selectedPaths && selectedPaths.length > 0) {
@@ -466,18 +393,15 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
return;
}
}, [addPathItems, ensureIdleQueue]);
const handleSelectFolder = useCallback(async () => {
if (!ensureIdleQueue()) {
return;
}
try {
const selectedFolder = await SelectFolder("");
if (!selectedFolder) {
return;
}
const folderFiles = await ListAudioFilesInDir(selectedFolder);
if (!folderFiles || folderFiles.length === 0) {
toast.info("No audio files found", {
@@ -485,7 +409,6 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
});
return;
}
await addPathItems(folderFiles.map((file) => file.path));
}
catch (err) {
@@ -494,59 +417,46 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
});
}
}, [addPathItems, ensureIdleQueue]);
const handleInputChange = useCallback(async (event: ChangeEvent<HTMLInputElement>) => {
const files = Array.from(event.target.files ?? []);
event.target.value = "";
if (files.length === 0) {
return;
}
await addBrowserFiles(files);
}, [addBrowserFiles]);
const handleHtmlDrop = useCallback(async (event: DragEvent<HTMLDivElement>) => {
event.preventDefault();
setIsDragging(false);
const files = Array.from(event.dataTransfer.files ?? []);
if (files.length === 0) {
return;
}
await addBrowserFiles(files);
}, [addBrowserFiles]);
useEffect(() => {
OnFileDrop((_x, _y, paths) => {
setIsDragging(false);
if (!paths || paths.length === 0) {
return;
}
void addPathItems(paths);
}, true);
return () => {
OnFileDropOff();
};
}, [addPathItems]);
const handleSelectItem = useCallback((itemId: string) => {
setActiveSelection(itemId);
}, [setActiveSelection]);
const handleRemoveItem = useCallback((itemId: string) => {
if (isBatchRunning || isExportingBatch || isExportingSelected || spectrumLoading) {
return;
}
clearStoredAnalysis(itemId);
const nextItems = itemsRef.current.filter((item) => item.id !== itemId);
itemsRef.current = nextItems;
setItems(nextItems);
if (activeItemIdRef.current === itemId) {
const nextActive = nextItems.find((item) => item.status === "success" && item.result) ?? nextItems[0] ?? null;
setActiveSelection(nextActive?.id ?? null);
@@ -555,12 +465,10 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
}
}
}, [clearResult, clearStoredAnalysis, isBatchRunning, isExportingBatch, isExportingSelected, setActiveSelection, spectrumLoading]);
const handleClearAll = useCallback(() => {
if (isExportingBatch || isExportingSelected) {
return;
}
batchRunIdRef.current += 1;
itemsRef.current = [];
setItems([]);
@@ -572,12 +480,10 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
setExportProgress(EMPTY_PROGRESS_STATE);
setIsDragging(false);
}, [clearResult, clearStoredAnalysis, isExportingBatch, isExportingSelected, setActiveSelection]);
const handleStopBatch = useCallback(() => {
if (!isBatchRunning) {
return;
}
batchRunIdRef.current += 1;
cancelAnalysis();
setIsBatchRunning(false);
@@ -592,25 +498,20 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
description: "Click Analyze to continue the remaining files.",
});
}, [cancelAnalysis, isBatchRunning]);
const handleAnalyzePending = useCallback(() => {
if (isBatchRunning || isExportingBatch || isExportingSelected || spectrumLoading) {
return;
}
const nextPendingItems = itemsRef.current.filter((item) => item.status === "pending");
if (nextPendingItems.length === 0) {
return;
}
void runBatchAnalysis(nextPendingItems);
}, [isBatchRunning, isExportingBatch, isExportingSelected, runBatchAnalysis, spectrumLoading]);
const handleExportSelected = useCallback(async () => {
if (!activeItem?.result?.spectrum || !spectrumRef.current) {
return;
}
const dataUrl = spectrumRef.current.getCanvasDataURL();
if (!dataUrl) {
toast.error("Export Failed", {
@@ -618,9 +519,7 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
});
return;
}
setIsExportingSelected(true);
try {
if (activeItem.source === "path" && isAbsolutePath(activeItem.path)) {
const outPath = await SaveSpectrumImage(activeItem.path, dataUrl);
@@ -629,7 +528,6 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
});
return;
}
const baseName = activeItem.name.replace(/\.[^/.]+$/, "") || "spectrogram";
downloadDataURL(dataUrl, `${baseName}_spectrogram.png`);
toast.success("PNG Exported", {
@@ -645,17 +543,14 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
setIsExportingSelected(false);
}
}, [activeItem]);
const handleBatchExport = useCallback(async () => {
const exportableItems = itemsRef.current.filter((item) => item.status === "success" && item.result?.spectrum);
if (exportableItems.length === 0) {
toast.error("Nothing to export", {
description: "Analyze at least one file successfully before exporting PNGs.",
});
return;
}
const preferences = loadAudioAnalysisPreferences();
setIsExportingBatch(true);
setExportProgress({
@@ -663,26 +558,21 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
total: exportableItems.length,
fileName: exportableItems[0]?.name ?? "",
});
let successCount = 0;
let failCount = 0;
try {
for (let index = 0; index < exportableItems.length; index++) {
const item = exportableItems[index];
const result = item.result;
if (!result?.spectrum) {
failCount++;
continue;
}
setExportProgress({
completed: index,
total: exportableItems.length,
fileName: item.name,
});
try {
const dataUrl = await createSpectrogramDataURL({
spectrumData: result.spectrum,
@@ -692,7 +582,6 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
colorScheme: preferences.colorScheme,
fileName: item.name,
});
if (item.source === "path" && isAbsolutePath(item.path)) {
await SaveSpectrumImage(item.path, dataUrl);
}
@@ -700,22 +589,18 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
const baseName = item.name.replace(/\.[^/.]+$/, "") || "spectrogram";
downloadDataURL(dataUrl, `${baseName}_spectrogram.png`);
}
successCount++;
}
catch {
failCount++;
}
await new Promise((resolve) => setTimeout(resolve, 0));
}
setExportProgress({
completed: exportableItems.length,
total: exportableItems.length,
fileName: "",
});
if (successCount > 0) {
toast.success("Batch PNG Export Complete", {
description: `Exported ${successCount} spectrogram PNG file(s)${failCount > 0 ? `, ${failCount} failed` : ""}`,
@@ -731,17 +616,14 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
setIsExportingBatch(false);
}
}, []);
const handleReAnalyzeSelectedSpectrum = useCallback(async (fftSize: number, windowFunction: string) => {
if (!activeItem?.result) {
return;
}
const nextResult = await reAnalyzeSpectrum(fftSize, windowFunction);
if (!nextResult) {
return;
}
setItems((prev) => prev.map((item) => item.id === activeItem.id
? {
...item,
@@ -751,88 +633,43 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
}
: item));
}, [activeItem, reAnalyzeSpectrum]);
const batchDetailContent = !activeItem ? (
<Card>
const batchDetailContent = !activeItem ? (<Card>
<CardContent className="flex min-h-[320px] items-center justify-center px-6 py-10">
<p className="text-sm text-muted-foreground">
Select a file from the batch queue to inspect its analysis result.
</p>
</CardContent>
</Card>
) : activeItem.status !== "success" || !activeItem.result ? (
<Card>
</Card>) : activeItem.status !== "success" || !activeItem.result ? (<Card>
<CardHeader className="pb-3">
<CardTitle className="text-base">{activeItem.name}</CardTitle>
<p className="break-all font-mono text-sm text-muted-foreground">{activeItem.path}</p>
</CardHeader>
<CardContent className="space-y-4">
{activeItem.status === "analyzing" && (
<div className="space-y-3">
{activeItem.status === "analyzing" && (<div className="space-y-3">
<div className="flex items-center gap-3">
<Spinner />
<span className="text-sm text-muted-foreground">Analyzing audio quality...</span>
</div>
<Progress value={analysisProgress.percent} className="h-2 w-full"/>
<p className="text-xs text-muted-foreground">{analysisProgress.message}</p>
</div>
)}
{activeItem.status === "pending" && (
<p className="text-sm text-muted-foreground">
</div>)}
{activeItem.status === "pending" && (<p className="text-sm text-muted-foreground">
This file is queued and waiting for batch analysis to start.
</p>
)}
{activeItem.status === "error" && (
<div className="rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive">
</p>)}
{activeItem.status === "error" && (<div className="rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive">
{activeItem.error || "Analysis failed"}
</div>
)}
</div>)}
</CardContent>
</Card>
) : (
<div className="space-y-4">
<AudioAnalysis
result={activeItem.result}
analyzing={false}
showAnalyzeButton={false}
filePath={activeItem.path}
/>
</Card>) : (<div className="space-y-4">
<AudioAnalysis result={activeItem.result} analyzing={false} showAnalyzeButton={false} filePath={activeItem.path}/>
<SpectrumVisualization
ref={spectrumRef}
sampleRate={activeItem.result.sample_rate}
duration={activeItem.result.duration}
spectrumData={activeItem.result.spectrum}
fileName={activeItem.name}
onReAnalyze={handleReAnalyzeSelectedSpectrum}
isAnalyzingSpectrum={spectrumLoading}
spectrumProgress={spectrumProgress}
/>
</div>
);
<SpectrumVisualization ref={spectrumRef} sampleRate={activeItem.result.sample_rate} duration={activeItem.result.duration} spectrumData={activeItem.result.spectrum} fileName={activeItem.name} onReAnalyze={handleReAnalyzeSelectedSpectrum} isAnalyzingSpectrum={spectrumLoading} spectrumProgress={spectrumProgress}/>
</div>);
const singleModeContent = !activeItem ? null : activeItem.status === "success" && activeItem.result ? (<div className="mx-auto w-full max-w-6xl space-y-4">
<AudioAnalysis result={activeItem.result} analyzing={false} showAnalyzeButton={false} filePath={activeItem.path}/>
const singleModeContent = !activeItem ? null : activeItem.status === "success" && activeItem.result ? (
<div className="mx-auto w-full max-w-6xl space-y-4">
<AudioAnalysis
result={activeItem.result}
analyzing={false}
showAnalyzeButton={false}
filePath={activeItem.path}
/>
<SpectrumVisualization
ref={spectrumRef}
sampleRate={activeItem.result.sample_rate}
duration={activeItem.result.duration}
spectrumData={activeItem.result.spectrum}
fileName={activeItem.name}
onReAnalyze={handleReAnalyzeSelectedSpectrum}
isAnalyzingSpectrum={spectrumLoading}
spectrumProgress={spectrumProgress}
/>
</div>
) : activeItem.status === "analyzing" || activeItem.status === "pending" ? (
<div className="flex h-[400px] items-center justify-center">
<SpectrumVisualization ref={spectrumRef} sampleRate={activeItem.result.sample_rate} duration={activeItem.result.duration} spectrumData={activeItem.result.spectrum} fileName={activeItem.name} onReAnalyze={handleReAnalyzeSelectedSpectrum} isAnalyzingSpectrum={spectrumLoading} spectrumProgress={spectrumProgress}/>
</div>) : activeItem.status === "analyzing" || activeItem.status === "pending" ? (<div className="flex h-[400px] items-center justify-center">
<div className="w-full max-w-md space-y-2">
<div className="flex items-center justify-between text-sm text-muted-foreground">
<span>{activeItem.status === "pending" ? "Preparing..." : "Processing..."}</span>
@@ -841,64 +678,33 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
<Progress value={analysisProgress.percent} className="h-2 w-full"/>
<p className="text-center text-xs text-muted-foreground">{analysisProgress.message}</p>
</div>
</div>
) : (
<div className="flex h-[400px] items-center justify-center">
</div>) : (<div className="flex h-[400px] items-center justify-center">
<div className="w-full max-w-md rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive">
{activeItem.error || "Analysis failed"}
</div>
</div>
);
</div>);
const showSingleModeActions = isSingleMode && activeItem?.status === "success" && activeItem.result;
return (
<div className="space-y-6">
<input
ref={fileInputRef}
type="file"
multiple
accept={SUPPORTED_AUDIO_ACCEPT}
className="hidden"
onChange={handleInputChange}
/>
return (<div className="space-y-6">
<input ref={fileInputRef} type="file" multiple accept={SUPPORTED_AUDIO_ACCEPT} className="hidden" onChange={handleInputChange}/>
<div className="flex flex-wrap items-center justify-between gap-3">
<div className="flex items-center gap-4">
{onBack && (
<Button variant="ghost" size="icon" onClick={onBack}>
{onBack && (<Button variant="ghost" size="icon" onClick={onBack}>
<ArrowLeft className="h-5 w-5"/>
</Button>
)}
</Button>)}
<h1 className="text-2xl font-bold">Audio Quality Analyzer</h1>
</div>
<div className="flex flex-wrap gap-2">
{isBatchMode && isBatchRunning && (
<Button
onClick={handleStopBatch}
variant="destructive"
size="sm"
disabled={isExportingBatch || isExportingSelected}
className="gap-1.5"
>
{isBatchMode && isBatchRunning && (<Button onClick={handleStopBatch} variant="destructive" size="sm" disabled={isExportingBatch || isExportingSelected} className="gap-1.5">
<StopCircle className="h-4 w-4"/>
Stop
</Button>
)}
{canResumeBatch && (
<Button
onClick={handleAnalyzePending}
variant="outline"
size="sm"
disabled={isExportingBatch || isExportingSelected || spectrumLoading}
>
</Button>)}
{canResumeBatch && (<Button onClick={handleAnalyzePending} variant="outline" size="sm" disabled={isExportingBatch || isExportingSelected || spectrumLoading}>
<Play className="h-4 w-4"/>
Analyze
</Button>
)}
{isBatchMode && (
<DropdownMenu>
</Button>)}
{isBatchMode && (<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" disabled={isBatchRunning || isExportingBatch || isExportingSelected}>
<Upload className="h-4 w-4 mr-1"/>
@@ -916,27 +722,14 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
Add Folder
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)}
{showSingleModeActions && (
<Button
onClick={handleExportSelected}
variant="outline"
size="sm"
disabled={isExportingSelected || spectrumLoading}
>
</DropdownMenu>)}
{showSingleModeActions && (<Button onClick={handleExportSelected} variant="outline" size="sm" disabled={isExportingSelected || spectrumLoading}>
<Download className="h-4 w-4 mr-1"/>
{isExportingSelected ? "Exporting..." : "Export PNG"}
</Button>
)}
{isBatchMode && (
<DropdownMenu>
</Button>)}
{isBatchMode && (<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="sm"
disabled={successItems.length === 0 || isExportingBatch || isExportingSelected || isBatchRunning || spectrumLoading}
>
<Button variant="outline" size="sm" disabled={successItems.length === 0 || isExportingBatch || isExportingSelected || isBatchRunning || spectrumLoading}>
<Download className="h-4 w-4 mr-1"/>
{isExportingBatch ? "Exporting..." : isExportingSelected ? "Exporting..." : "Export"}
<ChevronDown className="ml-1 h-4 w-4"/>
@@ -952,49 +745,25 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
Export All PNG
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)}
{showSingleModeActions && (
<Button
onClick={handleClearAll}
variant="outline"
size="sm"
disabled={isExportingSelected}
>
</DropdownMenu>)}
{showSingleModeActions && (<Button onClick={handleClearAll} variant="outline" size="sm" disabled={isExportingSelected}>
<Trash2 className="h-4 w-4 mr-1"/>
Clear
</Button>
)}
{isBatchMode && (
<Button
onClick={handleClearAll}
variant="outline"
size="sm"
disabled={isExportingBatch || isExportingSelected}
>
</Button>)}
{isBatchMode && (<Button onClick={handleClearAll} variant="outline" size="sm" disabled={isExportingBatch || isExportingSelected}>
<Trash2 className="h-4 w-4 mr-1"/>
Clear
</Button>
)}
</Button>)}
</div>
</div>
{items.length === 0 && (
<div
className={`flex h-[400px] flex-col items-center justify-center rounded-lg border-2 border-dashed transition-all ${
isDragging ? "border-primary bg-primary/10" : "border-muted-foreground/30"
}`}
onDragOver={(event) => {
{items.length === 0 && (<div className={`flex h-[400px] flex-col items-center justify-center rounded-lg border-2 border-dashed transition-all ${isDragging ? "border-primary bg-primary/10" : "border-muted-foreground/30"}`} onDragOver={(event) => {
event.preventDefault();
setIsDragging(true);
}}
onDragLeave={(event) => {
}} onDragLeave={(event) => {
event.preventDefault();
setIsDragging(false);
}}
onDrop={handleHtmlDrop}
style={{ "--wails-drop-target": "drop" } as CSSProperties}
>
}} onDrop={handleHtmlDrop} style={{ "--wails-drop-target": "drop" } as CSSProperties}>
<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>
@@ -1016,20 +785,15 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
<p className="text-xs text-muted-foreground mt-4 text-center">
Supported formats: FLAC, MP3, M4A, AAC
</p>
</div>
)}
</div>)}
{isSingleMode && (
<div className="space-y-4">
{isSingleMode && (<div className="space-y-4">
{singleModeContent}
</div>
)}
</div>)}
{isBatchMode && (
<div className="grid gap-4 xl:grid-cols-[360px,minmax(0,1fr)]">
{isBatchMode && (<div className="grid gap-4 xl:grid-cols-[360px,minmax(0,1fr)]">
<div className="space-y-3">
{(isBatchRunning || isExportingBatch) && (
<Card className="gap-2 py-4">
{(isBatchRunning || isExportingBatch) && (<Card className="gap-2 py-4">
<CardHeader className="px-4 pb-0">
<CardTitle className="text-sm">
{isExportingBatch ? "Batch PNG Export" : "Batch Analysis"}
@@ -1049,15 +813,12 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
</span>
</div>
<Progress value={isExportingBatch ? exportPercent : batchPercent} className="h-1.5 w-full"/>
{!isExportingBatch && (
<div className="flex items-center justify-between text-xs text-muted-foreground">
{!isExportingBatch && (<div className="flex items-center justify-between text-xs text-muted-foreground">
<span>{analysisProgress.message}</span>
<span className="tabular-nums">{analysisProgress.percent}%</span>
</div>
)}
</div>)}
</CardContent>
</Card>
)}
</Card>)}
<Card className="gap-2 overflow-hidden py-4">
<CardHeader className="px-4 pb-0">
@@ -1073,25 +834,16 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
{items.map((item) => {
const isActive = item.id === activeItemId;
const isSelectable = item.status !== "pending";
return (
<div
key={item.id}
role={isSelectable ? "button" : undefined}
tabIndex={isSelectable ? 0 : -1}
className={`flex w-full items-start gap-2.5 rounded-lg border px-3 py-2.5 text-left transition-colors ${
isActive
return (<div key={item.id} role={isSelectable ? "button" : undefined} tabIndex={isSelectable ? 0 : -1} className={`flex w-full items-start gap-2.5 rounded-lg border px-3 py-2.5 text-left transition-colors ${isActive
? "border-primary bg-primary/5"
: isSelectable
? "border-border hover:border-primary/40"
: "border-border"
}`}
onClick={() => {
: "border-border"}`} onClick={() => {
if (!isSelectable) {
return;
}
handleSelectItem(item.id);
}}
onKeyDown={(event) => {
}} onKeyDown={(event) => {
if (!isSelectable) {
return;
}
@@ -1099,8 +851,7 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
event.preventDefault();
handleSelectItem(item.id);
}
}}
>
}}>
<div className="mt-0.5 shrink-0">{statusIcon(item.status)}</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium">{item.name}</p>
@@ -1112,21 +863,13 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
<span>{fileNameFromPath(item.path).split(".").pop()?.toUpperCase() || "AUDIO"}</span>
</div>
</div>
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8 shrink-0"
onClick={(event) => {
<Button type="button" variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={(event) => {
event.stopPropagation();
handleRemoveItem(item.id);
}}
disabled={isBatchRunning || isExportingBatch || isExportingSelected || spectrumLoading}
>
}} disabled={isBatchRunning || isExportingBatch || isExportingSelected || spectrumLoading}>
<X className="h-4 w-4"/>
</Button>
</div>
);
</div>);
})}
</div>
</CardContent>
@@ -1136,8 +879,6 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
<div className="space-y-4">
{batchDetailContent}
</div>
</div>
)}
</div>
);
</div>)}
</div>);
}
frontend/src/components/PlatformIcons.tsx
+6 -16
View File
@@ -1,17 +1,14 @@
import amazonMusicIcon from "../assets/icons/amazon-music.png";
import qobuzIcon from "../assets/icons/qobuz.png";
import tidalIcon from "../assets/icons/tidal.png";
const PLATFORM_ICON_URLS = {
tidal: tidalIcon,
qobuz: qobuzIcon,
amazon: amazonMusicIcon,
} as const;
type PlatformIconProps = {
className?: string;
};
function sanitizeClassName(className: string): string {
return className
.split(/\s+/)
@@ -19,26 +16,26 @@ function sanitizeClassName(className: string): string {
.filter((part) => part !== "fill-current" && part !== "fill-muted-foreground" && !part.startsWith("text-"))
.join(" ");
}
function hasRoundedClass(className: string): boolean {
return className
.split(/\s+/)
.some((part) => part.startsWith("rounded"));
}
function getStatusClasses(className: string): string {
if (className.includes("text-green-500")) {
return "ring-2 ring-green-500 rounded-sm";
}
if (className.includes("text-red-500")) {
return "ring-2 ring-red-500 rounded-sm opacity-70";
}
return "";
}
function PlatformIcon({ src, alt, className = "w-4 h-4", defaultClassName = "" }: { src: string; alt: string; className?: string; defaultClassName?: string; }) {
function PlatformIcon({ src, alt, className = "w-4 h-4", defaultClassName = "" }: {
src: string;
alt: string;
className?: string;
defaultClassName?: string;
}) {
const cleanedClassName = sanitizeClassName(className);
const statusClasses = getStatusClasses(className);
const imageClassName = [
@@ -49,36 +46,29 @@ function PlatformIcon({ src, alt, className = "w-4 h-4", defaultClassName = "" }
]
.filter(Boolean)
.join(" ");
return <img src={src} alt={alt} className={imageClassName} loading="lazy" referrerPolicy="no-referrer"/>;
}
export function TidalIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <PlatformIcon src={PLATFORM_ICON_URLS.tidal} alt="Tidal" className={className} defaultClassName="rounded-[4px]"/>;
}
export function QobuzIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <PlatformIcon src={PLATFORM_ICON_URLS.qobuz} alt="Qobuz" className={className}/>;
}
export function AmazonIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <PlatformIcon src={PLATFORM_ICON_URLS.amazon} alt="Amazon Music" className={className} defaultClassName="rounded-[4px]"/>;
}
export function TidalAvailabilityIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <svg viewBox="0 0 24 24" className={`${className} fill-current`}>
<path d="M4.022 4.5 0 8.516l3.997 3.99 3.997-3.984L4.022 4.5Zm7.956 0L7.994 8.522l4.003 3.984L16 8.484 11.978 4.5Zm8.007 0L24 8.528l-4.003 3.978L16 8.484 19.985 4.5Z"></path>
<path d="m8.012 16.534 3.991 3.966L16 16.49l-4.003-3.984-3.985 4.028Z"></path>
</svg>;
}
export function QobuzAvailabilityIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <svg viewBox="0 0 24 24" className={`${className} fill-current`}>
<path d="M21.744 9.815C19.836 1.261 8.393-1 3.55 6.64-.618 13.214 4 22 11.988 22c2.387 0 4.63-.83 6.394-2.304l2.252 2.252 1.224-1.224-2.252-2.253c1.983-2.407 2.823-5.586 2.138-8.656Zm-3.508 7.297L16.4 15.275c-.786-.787-2.017.432-1.224 1.225L17 18.326C10.29 23.656.5 16 5.16 7.667c3.502-6.264 13.172-4.348 14.707 2.574.529 2.385-.06 4.987-1.63 6.87Z"></path>
<path d="M13.4 8.684a3.59 3.59 0 0 0-4.712 1.9 3.59 3.59 0 0 0 1.9 4.712 3.594 3.594 0 0 0 4.711-1.89 3.598 3.598 0 0 0-1.9-4.722Zm-.737 3.591a.727.727 0 0 1-.965.384.727.727 0 0 1-.384-.965.727.727 0 0 1 .965-.384.73.73 0 0 1 .384.965Z"></path>
</svg>;
}
export function AmazonAvailabilityIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <svg viewBox="0 0 24 24" className={`${className} fill-current`}>
<path fillRule="evenodd" d="M15.62 11.13c-.15.1-.37.18-.64.18-.42 0-.82-.05-1.21-.18l-.22-.04c-.08 0-.1.04-.1.14v.25c0 .08.02.12.05.17.02.03.07.08.15.1.4.18.84.25 1.33.25.52 0 .91-.12 1.24-.37.32-.25.47-.57.47-.99 0-.3-.08-.52-.23-.72-.15-.17-.4-.34-.74-.47l-.7-.27c-.26-.1-.46-.2-.53-.3a.47.47 0 0 1-.15-.36c0-.38.27-.57.84-.57.32 0 .64.05.94.15l.2.04c.07 0 .12-.04.12-.14v-.25c0-.08-.03-.12-.05-.17-.03-.05-.08-.08-.15-.1-.37-.13-.74-.2-1.11-.2-.47 0-.87.12-1.16.35-.3.22-.45.54-.45.91 0 .57.32.99.97 1.24l.74.27c.24.1.4.17.5.27.09.1.12.2.12.35 0 .2-.08.37-.23.46Zm-3.88-3.55v3.28c-.42.28-.84.42-1.26.42-.27 0-.47-.07-.6-.22-.11-.15-.16-.37-.16-.7V7.59c0-.13-.05-.18-.18-.18h-.52c-.12 0-.17.05-.17.18v3.06c0 .42.1.77.32.99.22.22.55.35.97.35.56 0 1.13-.2 1.68-.6l.05.3c0 .07.02.1.07.12.02.03.07.03.15.03h.37c.12 0 .17-.05.17-.18V7.58c0-.13-.05-.18-.17-.18h-.52c-.15 0-.2.08-.2.18Zm-4.69 4.27h.52c.12 0 .17-.05.17-.17v-3.1c0-.41-.1-.73-.32-.95a1.25 1.25 0 0 0-.94-.35c-.57 0-1.16.2-1.73.62-.2-.42-.57-.62-1.11-.62-.55 0-1.1.2-1.64.57l-.04-.27c0-.08-.03-.1-.08-.13-.02-.02-.07-.02-.12-.02h-.4c-.12 0-.17.05-.17.17v4.1c0 .13.05.18.17.18h.52c.12 0 .17-.05.17-.18V8.37c.42-.25.84-.4 1.29-.4.25 0 .42.08.52.22.1.15.17.35.17.65v2.84c0 .12.05.17.17.17h.52c.13 0 .18-.05.18-.17V8.37c.44-.27.86-.4 1.28-.4.25 0 .42.08.52.22.1.15.17.35.17.65v2.84c0 .12.05.17.18.17Zm13.47 3.29a21.8 21.8 0 0 1-8.3 1.7c-3.96 0-7.8-1.08-10.88-2.89a.35.35 0 0 0-.15-.05c-.17 0-.27.2-.1.37a16.11 16.11 0 0 0 10.87 4.16c3.02 0 6.5-.94 8.9-2.72.42-.3.08-.74-.34-.57Zm-.08-6.74c.22-.26.57-.38 1.06-.38.25 0 .5.03.72.1l.15.02c.07 0 .12-.04.12-.17v-.25c0-.07-.02-.14-.05-.17a.54.54 0 0 0-.12-.1c-.32-.07-.64-.15-.94-.15-.7 0-1.21.2-1.6.62-.38.4-.57 1-.57 1.73 0 .74.17 1.31.54 1.7.37.4.89.6 1.58.6.37 0 .72-.05.99-.17.07-.03.12-.05.15-.1.02-.03.02-.1.02-.17v-.25c0-.13-.05-.17-.12-.17-.03 0-.07 0-.12.02-.28.07-.55.12-.8.12-.46 0-.81-.12-1.03-.37-.23-.24-.32-.64-.32-1.16v-.12c.02-.55.12-.94.34-1.19Z" clipRule="evenodd"></path>
frontend/src/hooks/useApiStatus.ts
+1 -10
View File
@@ -1,22 +1,13 @@
import { useEffect, useState } from "react";
import {
API_SOURCES,
checkAllApiStatuses,
ensureApiStatusCheckStarted,
getApiStatusState,
subscribeApiStatus,
} from "@/lib/api-status";
import { API_SOURCES, checkAllApiStatuses, ensureApiStatusCheckStarted, getApiStatusState, subscribeApiStatus, } from "@/lib/api-status";
export function useApiStatus() {
const [state, setState] = useState(getApiStatusState);
useEffect(() => {
ensureApiStatusCheckStarted();
return subscribeApiStatus(() => {
setState(getApiStatusState());
});
}, []);
return {
...state,
sources: API_SOURCES,
frontend/src/hooks/useAudioAnalysis.ts
+2 -118
View File
@@ -2,21 +2,9 @@ import { useState, useCallback, useRef, useEffect, type MutableRefObject } from
import type { AnalysisResult } from "@/types/api";
import { logger } from "@/lib/logger";
import { toastWithSound as toast } from "@/lib/toast-with-sound";
import {
analyzeAudioArrayBuffer,
analyzeAudioFile,
analyzeDecodedSamples,
analyzeSpectrumFromSamples,
parseAudioMetadataFromInput,
pcm16MonoArrayBufferToFloat32Samples,
type AnalysisProgress,
type FrontendAnalysisPayload,
type ParsedAudioMetadata,
} from "@/lib/flac-analysis";
import { analyzeAudioArrayBuffer, analyzeAudioFile, analyzeDecodedSamples, analyzeSpectrumFromSamples, parseAudioMetadataFromInput, pcm16MonoArrayBufferToFloat32Samples, type AnalysisProgress, type FrontendAnalysisPayload, type ParsedAudioMetadata, } from "@/lib/flac-analysis";
import { loadAudioAnalysisPreferences } from "@/lib/audio-analysis-preferences";
type WindowFunction = "hann" | "hamming" | "blackman" | "rectangular";
function toWindowFunction(value: string): WindowFunction {
switch (value) {
case "hamming":
@@ -28,16 +16,13 @@ function toWindowFunction(value: string): WindowFunction {
return "hann";
}
}
function fileNameFromPath(filePath: string): string {
const parts = filePath.split(/[/\\]/);
return parts[parts.length - 1] || filePath;
}
function nextUiTick(): Promise<void> {
return new Promise((resolve) => setTimeout(resolve, 0));
}
async function base64ToArrayBuffer(base64: string, shouldCancel?: () => boolean): Promise<ArrayBuffer> {
const clean = base64.includes(",") ? base64.split(",")[1] : base64;
const padding = clean.endsWith("==") ? 2 : clean.endsWith("=") ? 1 : 0;
@@ -45,60 +30,48 @@ async function base64ToArrayBuffer(base64: string, shouldCancel?: () => boolean)
const bytes = new Uint8Array(outputLength);
const chunkSize = 4 * 16384;
let writeOffset = 0;
for (let offset = 0; offset < clean.length; offset += chunkSize) {
if (shouldCancel?.()) {
throw new Error("Analysis cancelled");
}
const chunk = clean.slice(offset, Math.min(clean.length, offset + chunkSize));
const binary = atob(chunk);
for (let i = 0; i < binary.length; i++) {
bytes[writeOffset++] = binary.charCodeAt(i);
}
if ((offset / chunkSize) % 4 === 0) {
await nextUiTick();
}
}
return bytes.buffer;
}
let sessionResult: AnalysisResult | null = null;
let sessionSelectedFilePath = "";
let sessionError: string | null = null;
let sessionSamples: Float32Array | null = null;
let sessionCurrentAnalysisKey = "";
const sessionSamplesByKey = new Map<string, Float32Array>();
interface ProgressState {
percent: number;
message: string;
}
const DEFAULT_PROGRESS_STATE: ProgressState = {
percent: 0,
message: "Preparing analysis...",
};
interface CancelToken {
cancelled: boolean;
}
interface AnalyzeExecutionOptions {
analysisKey?: string;
displayPath?: string;
suppressToast?: boolean;
}
export interface AnalyzeExecutionOutcome {
result: AnalysisResult | null;
error: string | null;
cancelled: boolean;
}
interface WailsWindow extends Window {
go?: {
main?: {
@@ -109,7 +82,6 @@ interface WailsWindow extends Window {
};
};
}
interface BackendAnalysisDecodeResponse {
pcm_base64: string;
sample_rate: number;
@@ -119,41 +91,34 @@ interface BackendAnalysisDecodeResponse {
bitrate_kbps?: number;
bit_depth?: string;
}
function cancelToken(tokenRef: MutableRefObject<CancelToken | null>): void {
if (tokenRef.current) {
tokenRef.current.cancelled = true;
tokenRef.current = null;
}
}
function createToken(tokenRef: MutableRefObject<CancelToken | null>): CancelToken {
cancelToken(tokenRef);
const token: CancelToken = { cancelled: false };
tokenRef.current = token;
return token;
}
function isCancelledError(error: unknown): boolean {
return error instanceof Error && error.message === "Analysis cancelled";
}
function toProgressState(progress: AnalysisProgress): ProgressState {
return {
percent: Math.round(Math.max(0, Math.min(100, progress.percent))),
message: progress.message,
};
}
function isDecodeFailure(error: unknown): boolean {
return error instanceof Error && /decode/i.test(error.message);
}
function mergeBackendDecodedMetadata(parsed: ParsedAudioMetadata, decoded: BackendAnalysisDecodeResponse): ParsedAudioMetadata {
const sampleRate = decoded.sample_rate > 0 ? decoded.sample_rate : parsed.sampleRate;
const bitsPerSample = decoded.bits_per_sample > 0 ? decoded.bits_per_sample : parsed.bitsPerSample;
const duration = decoded.duration > 0 ? decoded.duration : parsed.duration;
return {
...parsed,
sampleRate,
@@ -164,7 +129,6 @@ function mergeBackendDecodedMetadata(parsed: ParsedAudioMetadata, decoded: Backe
bitrateKbps: decoded.bitrate_kbps ?? parsed.bitrateKbps,
};
}
export function useAudioAnalysis() {
const [analyzing, setAnalyzing] = useState(false);
const [analysisProgress, setAnalysisProgress] = useState<ProgressState>(DEFAULT_PROGRESS_STATE);
@@ -173,39 +137,32 @@ export function useAudioAnalysis() {
const [error, setError] = useState<string | null>(() => sessionError);
const [spectrumLoading, setSpectrumLoading] = useState(false);
const [spectrumProgress, setSpectrumProgress] = useState<ProgressState>(DEFAULT_PROGRESS_STATE);
const samplesRef = useRef<Float32Array | null>(sessionSamples);
const currentAnalysisKeyRef = useRef(sessionCurrentAnalysisKey);
const analysisTokenRef = useRef<CancelToken | null>(null);
const spectrumTokenRef = useRef<CancelToken | null>(null);
useEffect(() => {
return () => {
cancelToken(analysisTokenRef);
cancelToken(spectrumTokenRef);
};
}, []);
const setResultWithSession = useCallback((next: AnalysisResult | null) => {
sessionResult = next;
setResult(next);
}, []);
const setSelectedFilePathWithSession = useCallback((next: string) => {
sessionSelectedFilePath = next;
setSelectedFilePath(next);
}, []);
const setErrorWithSession = useCallback((next: string | null) => {
sessionError = next;
setError(next);
}, []);
const setCurrentAnalysisKey = useCallback((analysisKey: string) => {
currentAnalysisKeyRef.current = analysisKey;
sessionCurrentAnalysisKey = analysisKey;
}, []);
const storeSuccessfulAnalysis = useCallback((analysisKey: string, displayPath: string, payload: FrontendAnalysisPayload) => {
sessionSamplesByKey.set(analysisKey, payload.samples);
samplesRef.current = payload.samples;
@@ -215,7 +172,6 @@ export function useAudioAnalysis() {
setSelectedFilePathWithSession(displayPath);
setErrorWithSession(null);
}, [setCurrentAnalysisKey, setErrorWithSession, setResultWithSession, setSelectedFilePathWithSession]);
const analyzeFile = useCallback(async (file: File, options?: AnalyzeExecutionOptions): Promise<AnalyzeExecutionOutcome> => {
if (!file) {
const errorMessage = "No file provided";
@@ -226,11 +182,9 @@ export function useAudioAnalysis() {
cancelled: false,
};
}
const token = createToken(analysisTokenRef);
const analysisKey = options?.analysisKey || file.name;
const displayPath = options?.displayPath || file.name;
cancelToken(spectrumTokenRef);
setAnalyzing(true);
setAnalysisProgress({
@@ -241,12 +195,10 @@ export function useAudioAnalysis() {
setResultWithSession(null);
setSelectedFilePathWithSession(displayPath);
setCurrentAnalysisKey(analysisKey);
try {
logger.info(`Analyzing audio file (frontend): ${displayPath}`);
const start = Date.now();
const prefs = loadAudioAnalysisPreferences();
const payload = await analyzeAudioFile(file, {
fftSize: prefs.fftSize,
windowFunction: prefs.windowFunction,
@@ -254,10 +206,8 @@ export function useAudioAnalysis() {
if (token.cancelled) {
return;
}
setAnalysisProgress(toProgressState(progress));
}, () => token.cancelled);
if (token.cancelled) {
return {
result: null,
@@ -265,12 +215,9 @@ export function useAudioAnalysis() {
cancelled: true,
};
}
storeSuccessfulAnalysis(analysisKey, displayPath, payload);
const elapsed = ((Date.now() - start) / 1000).toFixed(2);
logger.success(`Audio analysis completed in ${elapsed}s`);
return {
result: payload.result,
error: null,
@@ -285,7 +232,6 @@ export function useAudioAnalysis() {
cancelled: true,
};
}
const errorMessage = err instanceof Error ? err.message : "Failed to analyze audio file";
logger.error(`Analysis error: ${errorMessage}`);
setErrorWithSession(errorMessage);
@@ -293,13 +239,11 @@ export function useAudioAnalysis() {
percent: 0,
message: "Analysis failed",
});
if (!options?.suppressToast) {
toast.error("Audio Analysis Failed", {
description: errorMessage,
});
}
return {
result: null,
error: errorMessage,
@@ -313,7 +257,6 @@ export function useAudioAnalysis() {
}
}
}, [setCurrentAnalysisKey, setErrorWithSession, setResultWithSession, setSelectedFilePathWithSession, storeSuccessfulAnalysis]);
const analyzeFilePath = useCallback(async (filePath: string, options?: AnalyzeExecutionOptions): Promise<AnalyzeExecutionOutcome> => {
if (!filePath) {
const errorMessage = "No file path provided";
@@ -324,11 +267,9 @@ export function useAudioAnalysis() {
cancelled: false,
};
}
const token = createToken(analysisTokenRef);
const analysisKey = options?.analysisKey || filePath;
const displayPath = options?.displayPath || filePath;
cancelToken(spectrumTokenRef);
setAnalyzing(true);
setAnalysisProgress({
@@ -339,19 +280,15 @@ export function useAudioAnalysis() {
setResultWithSession(null);
setSelectedFilePathWithSession(displayPath);
setCurrentAnalysisKey(analysisKey);
try {
logger.info(`Analyzing audio file (frontend from path): ${filePath}`);
const start = Date.now();
const prefs = loadAudioAnalysisPreferences();
const readFileAsBase64 = (window as WailsWindow).go?.main?.App?.ReadFileAsBase64;
if (!readFileAsBase64) {
throw new Error("ReadFileAsBase64 backend method is unavailable");
}
let base64Data = await readFileAsBase64(filePath);
if (token.cancelled) {
return {
result: null,
@@ -359,15 +296,12 @@ export function useAudioAnalysis() {
cancelled: true,
};
}
setAnalysisProgress({
percent: 10,
message: "File loaded",
});
const arrayBuffer = await base64ToArrayBuffer(base64Data, () => token.cancelled);
base64Data = "";
if (token.cancelled) {
return {
result: null,
@@ -375,12 +309,10 @@ export function useAudioAnalysis() {
cancelled: true,
};
}
setAnalysisProgress({
percent: 15,
message: "Preparing audio buffer...",
});
const fileName = fileNameFromPath(filePath);
const input = {
fileName,
@@ -391,21 +323,17 @@ export function useAudioAnalysis() {
fftSize: prefs.fftSize,
windowFunction: prefs.windowFunction,
} as const;
const updateProgress = (progress: AnalysisProgress) => {
if (token.cancelled) {
return;
}
const mappedPercent = 10 + (progress.percent * 0.9);
setAnalysisProgress({
percent: Math.round(Math.max(0, Math.min(100, mappedPercent))),
message: progress.message,
});
};
let payload: FrontendAnalysisPayload;
try {
payload = await analyzeAudioArrayBuffer(input, analysisParams, updateProgress, () => token.cancelled);
}
@@ -413,21 +341,16 @@ export function useAudioAnalysis() {
if (!isDecodeFailure(err)) {
throw err;
}
const decodeAudioForAnalysis = (window as WailsWindow).go?.main?.App?.DecodeAudioForAnalysis;
if (!decodeAudioForAnalysis) {
throw err;
}
logger.warning(`Browser decoder failed for ${fileName}; trying FFmpeg fallback`);
setAnalysisProgress({
percent: 18,
message: "Browser decoder failed, trying FFmpeg fallback...",
});
const decoded = await decodeAudioForAnalysis(filePath);
if (token.cancelled) {
return {
result: null,
@@ -435,20 +358,15 @@ export function useAudioAnalysis() {
cancelled: true,
};
}
setAnalysisProgress({
percent: 24,
message: "Decoding audio with FFmpeg...",
});
const pcmBase64 = decoded.pcm_base64 || "";
if (!pcmBase64) {
throw new Error("FFmpeg analysis decode returned no PCM data");
}
const pcmBuffer = await base64ToArrayBuffer(pcmBase64, () => token.cancelled);
if (token.cancelled) {
return {
result: null,
@@ -456,22 +374,11 @@ export function useAudioAnalysis() {
cancelled: true,
};
}
const parsedMetadata = parseAudioMetadataFromInput(input);
const mergedMetadata = mergeBackendDecodedMetadata(parsedMetadata, decoded);
const samples = pcm16MonoArrayBufferToFloat32Samples(pcmBuffer);
payload = await analyzeDecodedSamples(
input,
mergedMetadata,
samples,
analysisParams,
updateProgress,
() => token.cancelled,
mergedMetadata.duration,
);
payload = await analyzeDecodedSamples(input, mergedMetadata, samples, analysisParams, updateProgress, () => token.cancelled, mergedMetadata.duration);
}
if (token.cancelled) {
return {
result: null,
@@ -479,12 +386,9 @@ export function useAudioAnalysis() {
cancelled: true,
};
}
storeSuccessfulAnalysis(analysisKey, displayPath, payload);
const elapsed = ((Date.now() - start) / 1000).toFixed(2);
logger.success(`Audio analysis completed in ${elapsed}s`);
return {
result: payload.result,
error: null,
@@ -499,7 +403,6 @@ export function useAudioAnalysis() {
cancelled: true,
};
}
const errorMessage = err instanceof Error ? err.message : "Failed to analyze audio file";
logger.error(`Analysis error: ${errorMessage}`);
setErrorWithSession(errorMessage);
@@ -507,13 +410,11 @@ export function useAudioAnalysis() {
percent: 0,
message: "Analysis failed",
});
if (!options?.suppressToast) {
toast.error("Audio Analysis Failed", {
description: errorMessage,
});
}
return {
result: null,
error: errorMessage,
@@ -527,7 +428,6 @@ export function useAudioAnalysis() {
}
}
}, [setCurrentAnalysisKey, setErrorWithSession, setResultWithSession, setSelectedFilePathWithSession, storeSuccessfulAnalysis]);
const loadStoredAnalysis = useCallback((analysisKey: string, nextResult: AnalysisResult, displayPath: string) => {
setCurrentAnalysisKey(analysisKey);
samplesRef.current = sessionSamplesByKey.get(analysisKey) ?? null;
@@ -536,28 +436,23 @@ export function useAudioAnalysis() {
setSelectedFilePathWithSession(displayPath);
setErrorWithSession(null);
}, [setCurrentAnalysisKey, setErrorWithSession, setResultWithSession, setSelectedFilePathWithSession]);
const clearStoredAnalysis = useCallback((analysisKey?: string) => {
if (analysisKey) {
sessionSamplesByKey.delete(analysisKey);
if (currentAnalysisKeyRef.current === analysisKey) {
currentAnalysisKeyRef.current = "";
sessionCurrentAnalysisKey = "";
samplesRef.current = null;
sessionSamples = null;
}
return;
}
sessionSamplesByKey.clear();
currentAnalysisKeyRef.current = "";
sessionCurrentAnalysisKey = "";
samplesRef.current = null;
sessionSamples = null;
}, []);
const cancelAnalysis = useCallback(() => {
cancelToken(analysisTokenRef);
setAnalyzing(false);
@@ -568,22 +463,18 @@ export function useAudioAnalysis() {
}
: DEFAULT_PROGRESS_STATE);
}, []);
const reAnalyzeSpectrum = useCallback(async (fftSize: number, windowFunction: string) => {
if (!result || !samplesRef.current) {
return null;
}
const token = createToken(spectrumTokenRef);
setSpectrumLoading(true);
setSpectrumProgress({
percent: 0,
message: "Preparing FFT...",
});
try {
await new Promise<void>((resolve) => setTimeout(resolve, 0));
const spectrum = await analyzeSpectrumFromSamples(samplesRef.current, result.sample_rate, {
fftSize,
windowFunction: toWindowFunction(windowFunction),
@@ -591,19 +482,15 @@ export function useAudioAnalysis() {
if (token.cancelled) {
return;
}
setSpectrumProgress(toProgressState(progress));
}, () => token.cancelled);
if (token.cancelled) {
return null;
}
const nextResult = {
...result,
spectrum,
};
setResultWithSession(nextResult);
return nextResult;
}
@@ -611,7 +498,6 @@ export function useAudioAnalysis() {
if (isCancelledError(err)) {
return null;
}
const errorMessage = err instanceof Error ? err.message : "Failed to re-analyze spectrum";
logger.error(`Spectrum re-analysis error: ${errorMessage}`);
setSpectrumProgress({
@@ -630,7 +516,6 @@ export function useAudioAnalysis() {
}
}
}, [result, setResultWithSession]);
const clearResult = useCallback(() => {
cancelToken(analysisTokenRef);
cancelToken(spectrumTokenRef);
@@ -646,7 +531,6 @@ export function useAudioAnalysis() {
samplesRef.current = null;
sessionSamples = null;
}, [setErrorWithSession, setResultWithSession, setSelectedFilePathWithSession]);
return {
analyzing,
analysisProgress,
frontend/src/hooks/useAvailability.ts
+1 -5
View File
@@ -21,11 +21,7 @@ export function useAvailability() {
setError(null);
try {
logger.info(`Checking availability for track: ${spotifyId}`);
const response = await withTimeout(
CheckTrackAvailability(spotifyId),
CHECK_TIMEOUT_MS,
`Availability check timed out after 10 seconds for ${spotifyId}`,
);
const response = await withTimeout(CheckTrackAvailability(spotifyId), CHECK_TIMEOUT_MS, `Availability check timed out after 10 seconds for ${spotifyId}`);
const availability: TrackAvailability = JSON.parse(response);
setAvailabilityMap((prev) => {
const newMap = new Map(prev);
frontend/src/lib/api-status.ts
+5 -27
View File
@@ -1,15 +1,12 @@
import { CheckAPIStatus } from "../../wailsjs/go/main/App";
import { CHECK_TIMEOUT_MS, withTimeout } from "@/lib/async-timeout";
export type ApiCheckStatus = "checking" | "online" | "offline" | "idle";
export interface ApiSource {
id: string;
type: string;
name: string;
url: string;
}
export const API_SOURCES: ApiSource[] = [
{ id: "tidal1", type: "tidal", name: "Tidal A", url: "https://hifi-one.spotisaver.net" },
{ id: "tidal2", type: "tidal", name: "Tidal B", url: "https://hifi-two.spotisaver.net" },
@@ -23,32 +20,25 @@ export const API_SOURCES: ApiSource[] = [
{ id: "qobuz3", type: "qbz", name: "Qobuz C", url: "https://qbz.afkarxyz.qzz.io" },
{ id: "amazon1", type: "amazon", name: "Amazon Music", url: "https://amzn.afkarxyz.qzz.io" },
];
type ApiStatusState = {
isCheckingAll: boolean;
statuses: Record<string, ApiCheckStatus>;
};
let apiStatusState: ApiStatusState = {
isCheckingAll: false,
statuses: {},
};
let activeCheckAll: Promise<void> | null = null;
const listeners = new Set<() => void>();
function emitApiStatusChange() {
for (const listener of listeners) {
listener();
}
}
function setApiStatusState(updater: (current: ApiStatusState) => ApiStatusState) {
apiStatusState = updater(apiStatusState);
emitApiStatusChange();
}
async function checkSingleApiStatus(source: ApiSource): Promise<void> {
setApiStatusState((current) => ({
...current,
@@ -57,14 +47,8 @@ async function checkSingleApiStatus(source: ApiSource): Promise<void> {
[source.id]: "checking",
},
}));
try {
const isOnline = await withTimeout(
CheckAPIStatus(source.type, source.url),
CHECK_TIMEOUT_MS,
`API status check timed out after 10 seconds for ${source.url}`,
);
const isOnline = await withTimeout(CheckAPIStatus(source.type, source.url), CHECK_TIMEOUT_MS, `API status check timed out after 10 seconds for ${source.url}`);
setApiStatusState((current) => ({
...current,
statuses: {
@@ -72,7 +56,8 @@ async function checkSingleApiStatus(source: ApiSource): Promise<void> {
[source.id]: isOnline ? "online" : "offline",
},
}));
} catch {
}
catch {
setApiStatusState((current) => ({
...current,
statuses: {
@@ -82,45 +67,39 @@ async function checkSingleApiStatus(source: ApiSource): Promise<void> {
}));
}
}
export function getApiStatusState(): ApiStatusState {
return apiStatusState;
}
export function subscribeApiStatus(listener: () => void): () => void {
listeners.add(listener);
return () => {
listeners.delete(listener);
};
}
export function hasApiStatusResults(): boolean {
return API_SOURCES.some((source) => {
const status = apiStatusState.statuses[source.id];
return status === "online" || status === "offline";
});
}
export function ensureApiStatusCheckStarted(): void {
if (!activeCheckAll && !hasApiStatusResults()) {
void checkAllApiStatuses();
}
}
export async function checkAllApiStatuses(): Promise<void> {
if (activeCheckAll) {
return activeCheckAll;
}
activeCheckAll = (async () => {
setApiStatusState((current) => ({
...current,
isCheckingAll: true,
}));
try {
await Promise.allSettled(API_SOURCES.map((source) => checkSingleApiStatus(source)));
} finally {
}
finally {
setApiStatusState((current) => ({
...current,
isCheckingAll: false,
@@ -128,6 +107,5 @@ export async function checkAllApiStatuses(): Promise<void> {
activeCheckAll = null;
}
})();
return activeCheckAll;
}
frontend/src/lib/async-timeout.ts
+1 -7
View File
@@ -1,15 +1,9 @@
export const CHECK_TIMEOUT_MS = 10 * 1000;
export function withTimeout<T>(
promise: Promise<T>,
timeoutMs: number = CHECK_TIMEOUT_MS,
message: string = `Operation timed out after ${Math.round(timeoutMs / 1000)} seconds`,
): Promise<T> {
export function withTimeout<T>(promise: Promise<T>, timeoutMs: number = CHECK_TIMEOUT_MS, message: string = `Operation timed out after ${Math.round(timeoutMs / 1000)} seconds`): Promise<T> {
return new Promise<T>((resolve, reject) => {
const timer = window.setTimeout(() => {
reject(new Error(message));
}, timeoutMs);
promise
.then((value) => {
window.clearTimeout(timer);