- (null);
+ const [currentAudio, setCurrentAudio] = useState(null);
+ const [playingTrack, setPlayingTrack] = useState(null);
+ const playPreview = async (trackId: string, trackName: string) => {
+ try {
+ if (playingTrack === trackId && currentAudio) {
+ currentAudio.pause();
+ currentAudio.currentTime = 0;
+ setPlayingTrack(null);
+ setCurrentAudio(null);
+ return;
+ }
+ if (currentAudio) {
+ currentAudio.pause();
+ currentAudio.currentTime = 0;
+ setCurrentAudio(null);
+ setPlayingTrack(null);
+ }
+ setLoadingPreview(trackId);
+ const previewURL = await GetPreviewURL(trackId);
+ if (!previewURL) {
+ toast.error("Preview not available", {
+ description: `No preview found for "${trackName}"`,
+ });
+ setLoadingPreview(null);
+ return;
+ }
+ const audio = new Audio(previewURL);
+ audio.addEventListener("loadeddata", () => {
+ setLoadingPreview(null);
+ setPlayingTrack(trackId);
+ });
+ audio.addEventListener("ended", () => {
+ setPlayingTrack(null);
+ setCurrentAudio(null);
+ });
+ audio.addEventListener("error", () => {
+ toast.error("Failed to play preview", {
+ description: `Could not play preview for "${trackName}"`,
+ });
+ setLoadingPreview(null);
+ setPlayingTrack(null);
+ setCurrentAudio(null);
+ });
+ setCurrentAudio(audio);
+ await audio.play();
+ }
+ catch (error: any) {
+ console.error("Preview error:", error);
+ toast.error("Preview not available", {
+ description: error?.message || `Could not load preview for "${trackName}"`,
+ });
+ setLoadingPreview(null);
+ setPlayingTrack(null);
+ }
+ };
+ const stopPreview = () => {
+ if (currentAudio) {
+ currentAudio.pause();
+ currentAudio.currentTime = 0;
+ setCurrentAudio(null);
+ setPlayingTrack(null);
+ }
+ };
+ return {
+ playPreview,
+ stopPreview,
+ loadingPreview,
+ playingTrack,
+ };
+}
diff --git a/wails.json b/wails.json
index ce9d075..50e95a6 100644
--- a/wails.json
+++ b/wails.json
@@ -12,9 +12,8 @@
},
"info": {
"productName": "SpotiFLAC",
- "productVersion": "7.0.4",
- "copyright": "© 2026 afkarxyz",
- "comments": "Get Spotify tracks in true FLAC from Tidal, Qobuz & Amazon Music — no account required."
+ "productVersion": "7.0.5",
+ "copyright": "© 2026 afkarxyz"
},
"wailsjsdir": "./frontend",
"assetdir": "./frontend/dist",
- {track.images && (
-
- 
-
)}
-
- {formatDuration(track.duration_ms)}
-
-
-
);
}
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 03ad68a..a6bb15e 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -16,9 +16,9 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
- icon: "size-9",
- "icon-sm": "size-8",
- "icon-lg": "size-10",
+ icon: "h-9 w-9 p-0",
+ "icon-sm": "h-8 w-8 p-0",
+ "icon-lg": "h-10 w-10 p-0",
},
},
defaultVariants: {
diff --git a/frontend/src/hooks/usePreview.ts b/frontend/src/hooks/usePreview.ts
new file mode 100644
index 0000000..f9ff87a
--- /dev/null
+++ b/frontend/src/hooks/usePreview.ts
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { GetPreviewURL } from "@/../wailsjs/go/main/App";
+import { toast } from "sonner";
+export function usePreview() {
+ const [loadingPreview, setLoadingPreview] = useState
-
+
- );
+
+
+ );
}
diff --git a/frontend/src/components/TrackList.tsx b/frontend/src/components/TrackList.tsx
index 0f0bd07..e89db0e 100644
--- a/frontend/src/components/TrackList.tsx
+++ b/frontend/src/components/TrackList.tsx
@@ -1,11 +1,12 @@
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
-import { Download, CheckCircle, XCircle, FileCheck, FileText, Globe, ImageDown } from "lucide-react";
+import { Download, CheckCircle, XCircle, FileCheck, FileText, Globe, ImageDown, Play, Pause } from "lucide-react";
import { Spinner } from "@/components/ui/spinner";
import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip";
-import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination";
import type { TrackMetadata, TrackAvailability } from "@/types/api";
import { TidalIcon, QobuzIcon, AmazonIcon } from "./PlatformIcons";
+import { usePreview } from "@/hooks/usePreview";
interface TrackListProps {
tracks: TrackMetadata[];
searchQuery: string;
@@ -52,6 +53,7 @@ interface TrackListProps {
onTrackClick?: (track: TrackMetadata) => void;
}
export function TrackList({ tracks, searchQuery, sortBy, selectedTracks, downloadedTracks, failedTracks, skippedTracks, downloadingTrack, isDownloading, currentPage, itemsPerPage, showCheckboxes = false, hideAlbumColumn = false, folderName, isArtistDiscography = false, downloadedLyrics, failedLyrics, skippedLyrics, downloadingLyricsTrack, checkingAvailabilityTrack, availabilityMap, downloadedCovers, failedCovers, skippedCovers, downloadingCoverTrack, onToggleTrack, onToggleSelectAll, onDownloadTrack, onDownloadLyrics, onCheckAvailability, onDownloadCover, onPageChange, onAlbumClick, onArtistClick, onTrackClick, }: TrackListProps) {
+ const { playPreview, loadingPreview, playingTrack } = usePreview();
let filteredTracks = tracks.filter((track) => {
if (!searchQuery)
return true;
@@ -118,6 +120,35 @@ export function TrackList({ tracks, searchQuery, sortBy, selectedTracks, downloa
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const paginatedTracks = filteredTracks.slice(startIndex, endIndex);
+ const getPaginationPages = (current: number, total: number): (number | 'ellipsis')[] => {
+ if (total <= 10) {
+ return Array.from({ length: total }, (_, i) => i + 1);
+ }
+ const pages: (number | 'ellipsis')[] = [];
+ pages.push(1);
+ if (current <= 7) {
+ for (let i = 2; i <= 10; i++) {
+ pages.push(i);
+ }
+ pages.push('ellipsis');
+ pages.push(total);
+ }
+ else if (current >= total - 7) {
+ pages.push('ellipsis');
+ for (let i = total - 9; i <= total; i++) {
+ pages.push(i);
+ }
+ }
+ else {
+ pages.push('ellipsis');
+ pages.push(current - 1);
+ pages.push(current);
+ pages.push(current + 1);
+ pages.push('ellipsis');
+ pages.push(total);
+ }
+ return pages;
+ };
const tracksWithIsrc = filteredTracks.filter((track) => track.isrc);
const allSelected = tracksWithIsrc.length > 0 &&
tracksWithIsrc.every((track) => selectedTracks.includes(track.isrc));
@@ -135,192 +166,204 @@ export function TrackList({ tracks, searchQuery, sortBy, selectedTracks, downloa
return num.toLocaleString();
};
return (
-
- {track.name}
- {isSkipped ? ({track.artists}
+
+
-
+ {track.images && (
)}
+
+
+
+ {formatDuration(track.duration_ms)}
-
-
- {track.isrc && (
-
-
-
- {track.plays && (Album
-{track.album_name}
-
-
)}
- Total Plays
-{formatPlays(track.plays)}
-
-
-
-
- {track.copyright && (Release Date
-{track.release_date}
-
-
)}
- Copyright
-- {track.copyright} -
-
-
- {track.spotify_id && onDownloadLyrics && (
-
-
-
-
-
- )}
- {track.images && onDownloadCover && (
-
-
-
-
-
- )}
- {track.spotify_id && onCheckAvailability && (
-
-
-
-
- {availability ? (
- )}
- {isDownloaded && ()}
-
)}
- Download Lyric
-Download Cover
-
-
) : (Check Availability
)} -
+
+
+
+
+
+ {track.name}
+ {isSkipped ? ({track.artists}
+
+
+ {track.isrc && (
+
+
+
+ {track.plays && (Album
+{track.album_name}
+
+
)}
+ Total Plays
+{formatPlays(track.plays)}
+
+
+
+
+ {track.copyright && (Release Date
+{track.release_date}
+
+
)}
+ Copyright
++ {track.copyright} +
+
+
+ {track.spotify_id && (
+
+
+
+
+
+ )}
+ {track.spotify_id && onDownloadLyrics && (
+
+
+
+
+
+ )}
+ {track.images && onDownloadCover && (
+
+
+
+
+
+ )}
+ {track.spotify_id && onCheckAvailability && (
+
+
+
+
+ {availability ? (
+ )}
+ {isDownloaded && ()}
+
)}
+ {playingTrack === track.spotify_id ? "Stop Preview" : "Play Preview"}
+Download Lyric
+Download Cover
+
+
) : (Check Availability
)} +
-
-
-
- {
+ {totalPages > 1 && (
+
+
+ {
e.preventDefault();
if (currentPage > 1)
onPageChange(currentPage - 1);
}} className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}/>
-
+
- {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
- {
+ {getPaginationPages(currentPage, totalPages).map((page, index) => (page === 'ellipsis' ? (
+ ) : (
+ {
e.preventDefault();
onPageChange(page);
}} isActive={currentPage === page} className="cursor-pointer">
- {page}
-
- ))}
+ {page}
+
+ )))}
-
- {
+
+ {
e.preventDefault();
if (currentPage < totalPages)
onPageChange(currentPage + 1);
}} className={currentPage === totalPages
? "pointer-events-none opacity-50"
: "cursor-pointer"}/>
-
-
- )}
-
);
+
+
+ )}
+
-
- {totalPages > 1 && (
-
-
-
+ |
- | )}
- - # - | -- Title - | - {!hideAlbumColumn && (- Album - | )} -- Duration - | -- Plays - | -- Actions - | -||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
- {track.isrc && ( | )}
-
-
- {startIndex + index + 1}
- {track.status && (track.status === "UP" || track.status === "DOWN" || track.status === "NEW") && (
+
+
+
+ }} size="icon" variant="outline" disabled={downloadingCoverTrack === (track.spotify_id || `${track.name}-${track.artists}`)}>
+ {downloadingCoverTrack === (track.spotify_id || `${track.name}-${track.artists}`) ? (
Download Cover +
+ ) : (Check Availability )} + |
+