v6.8

2025-12-14 07:47:18 +07:00
parent 6c3fb13b25
commit b44a9abdd6
19 changed files with 506 additions and 191 deletions
@@ -1,4 +1,4 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Spinner } from "@/components/ui/spinner";
 import { Button } from "@/components/ui/button";
 import {
@@ -17,13 +17,15 @@ interface AudioAnalysisProps {
  analyzing: boolean;
  onAnalyze?: () => void;
  showAnalyzeButton?: boolean;
+  filePath?: string;
 }

 export function AudioAnalysis({
  result,
  analyzing,
  onAnalyze,
-  showAnalyzeButton = true
+  showAnalyzeButton = true,
+  filePath
 }: AudioAnalysisProps) {
  if (analyzing) {
    return (
@@ -43,7 +45,7 @@ export function AudioAnalysis({
      <Card>
        <CardContent className="px-6">
          <div className="flex flex-col items-center justify-center py-8 gap-4">
-            <Activity className="h-12 w-12 text-muted-foreground/50" />
+            <Activity className="h-12 w-12 text-primary" />
            <div className="text-center space-y-2">
              <p className="font-medium">Audio Quality Analysis</p>
              <p className="text-sm text-muted-foreground">
@@ -82,85 +84,60 @@ export function AudioAnalysis({
  return (
    <Card>
      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Activity className="h-5 w-5" />
-          Audio Quality Analysis
-        </CardTitle>
+        {filePath && (
+          <p className="text-sm font-mono truncate">{filePath}</p>
+        )}
      </CardHeader>

-      <CardContent className="px-6 space-y-6">
-
-        {/* Technical Specifications */}
-        <div className="grid grid-cols-2 gap-4">
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              <Radio className="h-3 w-3" />
-              Sample Rate
-            </div>
-            <p className="font-semibold">{(result.sample_rate / 1000).toFixed(1)} kHz</p>
+      <CardContent className="space-y-2">
+        {/* Audio Properties - Single line */}
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+          <div className="flex items-center gap-1">
+            <Radio className="h-3 w-3 text-muted-foreground" />
+            <span className="text-muted-foreground">Sample Rate:</span>
+            <span className="font-semibold">{(result.sample_rate / 1000).toFixed(1)} kHz</span>
          </div>
-
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              <FileAudio className="h-3 w-3" />
-              Bit Depth
-            </div>
-            <p className="font-semibold">{result.bit_depth}</p>
+          <div className="flex items-center gap-1">
+            <FileAudio className="h-3 w-3 text-muted-foreground" />
+            <span className="text-muted-foreground">Bit Depth:</span>
+            <span className="font-semibold">{result.bit_depth}</span>
          </div>
-
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              <Waves className="h-3 w-3" />
-              Channels
-            </div>
-            <p className="font-semibold">{result.channels === 2 ? "Stereo" : result.channels === 1 ? "Mono" : `${result.channels} channels`}</p>
+          <div className="flex items-center gap-1">
+            <Waves className="h-3 w-3 text-muted-foreground" />
+            <span className="text-muted-foreground">Channels:</span>
+            <span className="font-semibold">{result.channels === 2 ? "Stereo" : result.channels === 1 ? "Mono" : `${result.channels}`}</span>
          </div>
-
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              <Clock className="h-3 w-3" />
-              Duration
-            </div>
-            <p className="font-semibold">{formatDuration(result.duration)}</p>
+          <div className="flex items-center gap-1">
+            <Clock className="h-3 w-3 text-muted-foreground" />
+            <span className="text-muted-foreground">Duration:</span>
+            <span className="font-semibold">{formatDuration(result.duration)}</span>
          </div>
-
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              <Gauge className="h-3 w-3" />
-              Nyquist Frequency
-            </div>
-            <p className="font-semibold">{(nyquistFreq / 1000).toFixed(1)} kHz</p>
+          <div className="flex items-center gap-1">
+            <Gauge className="h-3 w-3 text-muted-foreground" />
+            <span className="text-muted-foreground">Nyquist:</span>
+            <span className="font-semibold">{(nyquistFreq / 1000).toFixed(1)} kHz</span>
          </div>
        </div>

-        {/* Dynamic Range Analysis */}
-        <div className="border rounded-lg p-4 space-y-3 bg-muted/30">
-          <div className="flex items-center gap-2 text-sm font-medium">
-            <TrendingUp className="h-4 w-4" />
-            Dynamic Range Analysis
+        {/* Dynamic Range - Single line */}
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs border-t pt-2">
+          <div className="flex items-center gap-1">
+            <TrendingUp className="h-3 w-3 text-muted-foreground" />
+            <span className="text-muted-foreground">Dynamic Range:</span>
+            <span className="font-semibold">{formatNumber(result.dynamic_range)} dB</span>
          </div>
-
-          <div className="grid grid-cols-3 gap-3 text-sm">
-            <div>
-              <p className="text-xs text-muted-foreground">Dynamic Range</p>
-              <p className="font-semibold">{formatNumber(result.dynamic_range)} dB</p>
-            </div>
-            <div>
-              <p className="text-xs text-muted-foreground">Peak Level</p>
-              <p className="font-semibold">{formatNumber(result.peak_amplitude)} dB</p>
-            </div>
-            <div>
-              <p className="text-xs text-muted-foreground">RMS Level</p>
-              <p className="font-semibold">{formatNumber(result.rms_level)} dB</p>
-            </div>
+          <div className="flex items-center gap-1">
+            <span className="text-muted-foreground">Peak:</span>
+            <span className="font-semibold">{formatNumber(result.peak_amplitude)} dB</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="text-muted-foreground">RMS:</span>
+            <span className="font-semibold">{formatNumber(result.rms_level)} dB</span>
+          </div>
+          <div className="flex items-center gap-1 ml-auto">
+            <span className="text-muted-foreground">Samples:</span>
+            <span className="font-semibold">{result.total_samples.toLocaleString()}</span>
          </div>
-        </div>
-
-        {/* Technical Info Footer */}
-        <div className="pt-2 border-t">
-          <p className="text-xs text-muted-foreground">
-            Total Samples: {result.total_samples.toLocaleString()}
-          </p>
        </div>
      </CardContent>
    </Card>
@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Upload, ArrowLeft } from "lucide-react";
+import { Upload, ArrowLeft, Trash2 } from "lucide-react";
 import { AudioAnalysis } from "@/components/AudioAnalysis";
 import { SpectrumVisualization } from "@/components/SpectrumVisualization";
 import { useAudioAnalysis } from "@/hooks/useAudioAnalysis";
@@ -13,15 +13,13 @@ interface AudioAnalysisPageProps {
 }

 export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
-  const { analyzing, result, analyzeFile, clearResult } = useAudioAnalysis();
-  const [selectedFilePath, setSelectedFilePath] = useState<string>("");
+  const { analyzing, result, analyzeFile, clearResult, selectedFilePath, spectrumLoading } = useAudioAnalysis();
  const [isDragging, setIsDragging] = useState(false);

  const handleSelectFile = async () => {
    try {
      const filePath = await SelectFile();
      if (filePath) {
-        setSelectedFilePath(filePath);
        await analyzeFile(filePath);
      }
    } catch (err) {
@@ -46,7 +44,6 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
        return;
      }

-      setSelectedFilePath(filePath);
      await analyzeFile(filePath);
    },
    [analyzeFile]
@@ -64,19 +61,26 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {

  const handleAnalyzeAnother = () => {
    clearResult();
-    setSelectedFilePath("");
  };

  return (
    <div className="space-y-6">
      {/* Header */}
-      <div className="flex items-center gap-4">
-        {onBack && (
-          <Button variant="ghost" size="icon" onClick={onBack}>
-            <ArrowLeft className="h-5 w-5" />
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          {onBack && (
+            <Button variant="ghost" size="icon" onClick={onBack}>
+              <ArrowLeft className="h-5 w-5" />
+            </Button>
+          )}
+          <h1 className="text-2xl font-bold">Audio Quality Analyzer</h1>
+        </div>
+        {result && (
+          <Button onClick={handleAnalyzeAnother} variant="outline" size="sm">
+            <Trash2 className="h-4 w-4" />
+            Clear
          </Button>
        )}
-        <h1 className="text-2xl font-bold">Audio Quality Analyzer</h1>
      </div>

      {/* File Selection */}
@@ -102,7 +106,7 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
          style={{ "--wails-drop-target": "drop" } as React.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-muted-foreground" />
+            <Upload className="h-8 w-8 text-primary" />
          </div>
          <p className="text-sm text-muted-foreground mb-4 text-center">
            {isDragging
@@ -127,25 +131,23 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
      {/* Analysis Results */}
      {result && (
        <div className="space-y-4">
-          {/* File Info with Analyze Another Button */}
-          <div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg">
-            <p className="text-sm font-mono truncate flex-1 min-w-0">{selectedFilePath}</p>
-            <Button onClick={handleAnalyzeAnother} variant="outline" size="sm" className="ml-4 shrink-0">
-              <Upload className="h-4 w-4" />
-              Analyze Another File
-            </Button>
-          </div>
+          {/* Detailed Analysis */}
+          <AudioAnalysis result={result} analyzing={analyzing} showAnalyzeButton={false} filePath={selectedFilePath} />

          {/* Spectrum Visualization */}
-          <SpectrumVisualization
-            sampleRate={result.sample_rate}
-            bitsPerSample={result.bits_per_sample}
-            duration={result.duration}
-            spectrumData={result.spectrum}
-          />
-
-          {/* Detailed Analysis */}
-          <AudioAnalysis result={result} analyzing={analyzing} showAnalyzeButton={false} />
+          {spectrumLoading ? (
+            <div className="flex flex-col items-center justify-center py-16 border rounded-lg">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-2"></div>
+              <p className="text-sm text-muted-foreground">Loading spectrum data...</p>
+            </div>
+          ) : (
+            <SpectrumVisualization
+              sampleRate={result.sample_rate}
+              bitsPerSample={result.bits_per_sample}
+              duration={result.duration}
+              spectrumData={result.spectrum}
+            />
+          )}
        </div>
      )}
    </div>
@@ -13,6 +13,7 @@ import {
  AlertCircle,
  Trash2,
  FileMusic,
+  WandSparkles,
 } from "lucide-react";
 import { Spinner } from "@/components/ui/spinner";
 import {
@@ -113,6 +114,19 @@ export function AudioConverterPage() {
    saveState({ files, outputFormat, bitrate });
  }, [files, outputFormat, bitrate, saveState]);

+  // Auto-set output format to M4A if all files are MP3
+  useEffect(() => {
+    if (files.length === 0) return;
+    
+    const allMP3 = files.every((f) => f.format === "mp3");
+    if (allMP3 && outputFormat !== "m4a") {
+      setOutputFormat("m4a");
+    }
+  }, [files, outputFormat]);
+
+  // Check if format selection should be disabled (all files are MP3)
+  const isFormatDisabled = files.length > 0 && files.every((f) => f.format === "mp3");
+
  // Detect fullscreen/maximized window
  useEffect(() => {
    const checkFullscreen = () => {
@@ -236,7 +250,20 @@ export function AudioConverterPage() {
  };

  const addFiles = useCallback((paths: string[]) => {
-    const validExtensions = [".mp3", ".m4a", ".flac"];
+    const validExtensions = [".mp3", ".flac"];
+    
+    // Check for M4A files specifically
+    const m4aFiles = paths.filter((path) => {
+      const ext = path.toLowerCase().slice(path.lastIndexOf("."));
+      return ext === ".m4a";
+    });
+
+    if (m4aFiles.length > 0) {
+      toast.error("M4A files not supported", {
+        description: "Only FLAC and MP3 files are supported as input. Please convert M4A files first.",
+      });
+    }
+
    setFiles((prev) => {
      const newFiles: AudioFile[] = paths
        .filter((path) => {
@@ -266,7 +293,7 @@ export function AudioConverterPage() {
        return [...prev, ...newFiles];
      }

-      if (paths.length > 0) {
+      if (paths.length > 0 && m4aFiles.length === 0) {
        toast.info("No new files added", {
          description: "All files were already added or have unsupported format",
        });
@@ -462,8 +489,25 @@ export function AudioConverterPage() {
  return (
    <div className={`space-y-6 ${isFullscreen ? "h-full flex flex-col" : ""}`}>
      {/* Header */}
-      <div className="flex items-center gap-4">
+      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">Audio Converter</h1>
+        {files.length > 0 && (
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={handleSelectFiles}>
+              <Upload className="h-4 w-4" />
+              Add More
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={clearFiles}
+              disabled={converting}
+            >
+              <Trash2 className="h-4 w-4" />
+              Clear All
+            </Button>
+          </div>
+        )}
      </div>

      {/* Drop Zone / File List */}
@@ -492,7 +536,7 @@ export function AudioConverterPage() {
        {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-muted-foreground" />
+              <Upload className="h-8 w-8 text-primary" />
            </div>
            <p className="text-sm text-muted-foreground mb-2 text-center">
              {isDragging
@@ -500,7 +544,7 @@ export function AudioConverterPage() {
                : "Drag and drop audio files here, or click the button below to select"}
            </p>
            <p className="text-xs text-muted-foreground mb-4 text-center">
-              Supported formats: MP3, M4A, FLAC
+              Supported formats: FLAC, MP3
            </p>
            <Button onClick={handleSelectFiles} size="lg">
              <Upload className="h-5 w-5" />
@@ -520,13 +564,16 @@ export function AudioConverterPage() {
                      variant="outline"
                      value={outputFormat}
                      onValueChange={(value) => {
-                        if (value) setOutputFormat(value as "mp3" | "m4a");
+                        if (value && !isFormatDisabled) setOutputFormat(value as "mp3" | "m4a");
                      }}
+                      disabled={isFormatDisabled}
                    >
-                      <ToggleGroupItem value="mp3" aria-label="MP3">
-                        MP3
-                      </ToggleGroupItem>
-                      <ToggleGroupItem value="m4a" aria-label="M4A">
+                      {!isFormatDisabled && (
+                        <ToggleGroupItem value="mp3" aria-label="MP3">
+                          MP3
+                        </ToggleGroupItem>
+                      )}
+                      <ToggleGroupItem value="m4a" aria-label="M4A" disabled={isFormatDisabled}>
                        M4A
                      </ToggleGroupItem>
                    </ToggleGroup>
@@ -552,21 +599,6 @@ export function AudioConverterPage() {
                      ))}
                    </ToggleGroup>
                  </div>
-                  <div className="flex gap-2 ml-auto">
-                    <Button variant="outline" size="sm" onClick={handleSelectFiles}>
-                      <Upload className="h-4 w-4" />
-                      Add More
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={clearFiles}
-                      disabled={converting}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                      Clear All
-                    </Button>
-                  </div>
                </div>
              </div>

@@ -625,7 +657,7 @@ export function AudioConverterPage() {
                  </>
                ) : (
                  <>
-                    <FileMusic className="h-4 w-4" />
+                    <WandSparkles className="h-4 w-4" />
                    Convert {convertableCount > 0 ? `${convertableCount} File(s)` : ""}
                  </>
                )}
@@ -43,6 +43,7 @@ export function SearchBar({
            </TooltipTrigger>
            <TooltipContent side="right">
              <p>Supports track, album, playlist, and artist URLs</p>
+              <p className="mt-1">Note: Playlist must be public (not private)</p>
            </TooltipContent>
          </Tooltip>
        </div>
@@ -279,17 +279,27 @@ export function SettingsPage() {
            </div>
          </div>

-          {/* Embed Lyrics */}
-          <div className="flex items-center gap-3">
-            <Label htmlFor="embed-lyrics" className="cursor-pointer text-sm">Embed Lyrics</Label>
-            <Switch
-              id="embed-lyrics"
-              checked={tempSettings.embedLyrics}
-              onCheckedChange={(checked) => setTempSettings(prev => ({ ...prev, embedLyrics: checked }))}
-            />
+          {/* Embed Lyrics & Embed Max Quality Cover */}
+          <div className="flex items-center gap-6">
+            <div className="flex items-center gap-3">
+              <Label htmlFor="embed-lyrics" className="cursor-pointer text-sm">Embed Lyrics</Label>
+              <Switch
+                id="embed-lyrics"
+                checked={tempSettings.embedLyrics}
+                onCheckedChange={(checked) => setTempSettings(prev => ({ ...prev, embedLyrics: checked }))}
+              />
+            </div>
+            <div className="flex items-center gap-3">
+              <Label htmlFor="embed-max-quality-cover" className="cursor-pointer text-sm">Embed Max Quality Cover</Label>
+              <Switch
+                id="embed-max-quality-cover"
+                checked={tempSettings.embedMaxQualityCover}
+                onCheckedChange={(checked) => setTempSettings(prev => ({ ...prev, embedMaxQualityCover: checked }))}
+              />
+            </div>
          </div>

-          <div className="border-t pt-2" />
+          <div className="border-t" />

          {/* Folder Structure */}
          <div className="space-y-2">
@@ -339,7 +349,7 @@ export function SettingsPage() {
            )}
          </div>

-          <div className="border-t pt-2" />
+          <div className="border-t" />

          {/* Filename Format */}
          <div className="space-y-2">