afkarxyz
282 lines
16 KiB
TypeScript
282 lines
16 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Trash2, ExternalLink, Search, ArrowUpDown, History } from "lucide-react";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog";
|
|
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination";
|
|
import { GetDownloadHistory, ClearDownloadHistory } from "../../wailsjs/go/main/App";
|
|
import { openExternal } from "@/lib/utils";
|
|
const formatDate = (timestamp: number) => {
|
|
const date = new Date(timestamp * 1000);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
};
|
|
interface HistoryItem {
|
|
id: string;
|
|
spotify_id: string;
|
|
title: string;
|
|
artists: string;
|
|
album: string;
|
|
duration_str: string;
|
|
cover_url: string;
|
|
quality: string;
|
|
format: string;
|
|
path: string;
|
|
timestamp: number;
|
|
}
|
|
export function HistoryPage() {
|
|
const [history, setHistory] = useState<HistoryItem[]>([]);
|
|
const [filteredHistory, setFilteredHistory] = useState<HistoryItem[]>([]);
|
|
const [showClearConfirm, setShowClearConfirm] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [sortBy, setSortBy] = useState("default");
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const ITEMS_PER_PAGE = 50;
|
|
const fetchHistory = async () => {
|
|
try {
|
|
const items = await GetDownloadHistory();
|
|
setHistory(items || []);
|
|
}
|
|
catch (err) {
|
|
console.error("Failed to fetch history:", err);
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
fetchHistory();
|
|
const interval = setInterval(fetchHistory, 5000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
useEffect(() => {
|
|
let result = [...history];
|
|
if (searchQuery) {
|
|
const query = searchQuery.toLowerCase();
|
|
result = result.filter(item => item.title.toLowerCase().includes(query) ||
|
|
item.artists.toLowerCase().includes(query) ||
|
|
item.album.toLowerCase().includes(query));
|
|
}
|
|
const parseDuration = (str: string) => {
|
|
const parts = str.split(':').map(Number);
|
|
if (parts.length === 2)
|
|
return parts[0] * 60 + parts[1];
|
|
if (parts.length === 3)
|
|
return parts[0] * 3600 + parts[1] * 60 + parts[2];
|
|
return 0;
|
|
};
|
|
result.sort((a, b) => {
|
|
switch (sortBy) {
|
|
case "default":
|
|
case "date_desc":
|
|
return b.timestamp - a.timestamp;
|
|
case "date_asc":
|
|
return a.timestamp - b.timestamp;
|
|
case "title_asc":
|
|
return a.title.localeCompare(b.title);
|
|
case "title_desc":
|
|
return b.title.localeCompare(a.title);
|
|
case "artist_asc":
|
|
return a.artists.localeCompare(b.artists);
|
|
case "artist_desc":
|
|
return b.artists.localeCompare(a.artists);
|
|
case "duration_asc":
|
|
return parseDuration(a.duration_str) - parseDuration(b.duration_str);
|
|
case "duration_desc":
|
|
return parseDuration(b.duration_str) - parseDuration(a.duration_str);
|
|
default:
|
|
return 0;
|
|
}
|
|
});
|
|
setFilteredHistory(result);
|
|
setCurrentPage(1);
|
|
}, [history, searchQuery, sortBy]);
|
|
const totalPages = Math.ceil(filteredHistory.length / ITEMS_PER_PAGE);
|
|
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
|
const paginatedHistory = filteredHistory.slice(startIndex, startIndex + ITEMS_PER_PAGE);
|
|
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 handleClearHistory = async () => {
|
|
await ClearDownloadHistory();
|
|
fetchHistory();
|
|
setShowClearConfirm(false);
|
|
};
|
|
return (<div className="space-y-6">
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="text-2xl font-bold tracking-tight">Download History</h2>
|
|
{history.length > 0 && (<Badge variant="secondary" className="font-mono">
|
|
{history.length.toLocaleString('en-US')}
|
|
</Badge>)}
|
|
</div>
|
|
<Button variant="outline" size="sm" onClick={() => setShowClearConfirm(true)} disabled={history.length === 0} className="cursor-pointer gap-2">
|
|
<Trash2 className="h-4 w-4"/> Clear
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground"/>
|
|
<Input placeholder="Search history..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pl-8 h-9"/>
|
|
</div>
|
|
<Select value={sortBy} onValueChange={setSortBy}>
|
|
<SelectTrigger className="w-[180px] h-9">
|
|
<ArrowUpDown className="mr-2 h-4 w-4"/>
|
|
<SelectValue placeholder="Sort by"/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="default">Default</SelectItem>
|
|
<SelectItem value="date_desc">Date (Newest)</SelectItem>
|
|
<SelectItem value="date_asc">Date (Oldest)</SelectItem>
|
|
<SelectItem value="title_asc">Title (A-Z)</SelectItem>
|
|
<SelectItem value="title_desc">Title (Z-A)</SelectItem>
|
|
<SelectItem value="artist_asc">Artist (A-Z)</SelectItem>
|
|
<SelectItem value="artist_desc">Artist (Z-A)</SelectItem>
|
|
<SelectItem value="duration_asc">Duration (Short)</SelectItem>
|
|
<SelectItem value="duration_desc">Duration (Long)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-md border overflow-hidden">
|
|
{paginatedHistory.length === 0 ? (<div className="flex flex-col items-center justify-center p-16 text-center text-muted-foreground gap-3">
|
|
<div className="rounded-full bg-muted/50 p-4 ring-8 ring-muted/20">
|
|
<History className="h-10 w-10 opacity-40"/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="font-medium text-foreground/80">No download history</p>
|
|
<p className="text-sm">Your downloaded tracks will appear here.</p>
|
|
</div>
|
|
</div>) : (<table className="w-full table-fixed">
|
|
<thead>
|
|
<tr className="border-b bg-muted/50">
|
|
<th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground w-12 text-xs uppercase">#</th>
|
|
<th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground text-xs uppercase">Title</th>
|
|
<th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground hidden md:table-cell text-xs uppercase w-1/4">Album</th>
|
|
<th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground hidden lg:table-cell w-32 text-xs uppercase">Format</th>
|
|
<th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground hidden xl:table-cell w-16 text-xs uppercase text-nowrap">Dur</th>
|
|
<th className="h-10 px-4 text-left align-middle font-medium text-muted-foreground hidden md:table-cell w-40 text-xs uppercase text-nowrap">Downloaded At</th>
|
|
<th className="h-10 px-4 text-center align-middle font-medium text-muted-foreground w-16 text-xs uppercase text-nowrap">Link</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{paginatedHistory.map((item, index) => (<tr key={item.id} className="border-b transition-colors hover:bg-muted/50">
|
|
<td className="p-3 align-middle text-sm text-muted-foreground text-left font-mono">
|
|
{startIndex + index + 1}
|
|
</td>
|
|
<td className="p-3 align-middle min-w-0">
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
<img src={item.cover_url || "https://placehold.co/300?text=No+Cover"} alt={item.album} className="h-10 w-10 rounded shrink-0 bg-secondary object-cover" onError={(e) => { (e.target as HTMLImageElement).src = "https://placehold.co/300?text=No+Cover"; }}/>
|
|
<div className="flex flex-col min-w-0 flex-1">
|
|
<span className="font-medium text-sm truncate">{item.title}</span>
|
|
<span className="text-xs text-muted-foreground truncate">{item.artists}</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="p-3 align-middle text-sm text-muted-foreground hidden md:table-cell">
|
|
<div className="truncate">{item.album}</div>
|
|
</td>
|
|
<td className="p-3 align-middle text-left hidden lg:table-cell">
|
|
<div className="flex flex-col items-start gap-1">
|
|
<span className="text-[10px] font-bold text-foreground">{item.format}</span>
|
|
{item.quality && <span className="text-[9px] text-muted-foreground leading-none whitespace-nowrap">{item.quality}</span>}
|
|
</div>
|
|
</td>
|
|
<td className="p-3 align-middle text-sm text-muted-foreground text-left hidden xl:table-cell font-mono">
|
|
{item.duration_str}
|
|
</td>
|
|
<td className="p-3 align-middle text-xs text-muted-foreground hidden md:table-cell whitespace-nowrap">
|
|
{formatDate(item.timestamp)}
|
|
</td>
|
|
<td className="p-3 align-middle text-center">
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 cursor-pointer" onClick={() => openExternal(`https://open.spotify.com/track/${item.spotify_id}`)}>
|
|
<ExternalLink className="h-4 w-4"/>
|
|
</Button>
|
|
</td>
|
|
</tr>))}
|
|
</tbody>
|
|
</table>)}
|
|
</div>
|
|
|
|
{totalPages > 1 && (<Pagination>
|
|
<PaginationContent>
|
|
<PaginationItem>
|
|
<PaginationPrevious href="#" onClick={(e) => {
|
|
e.preventDefault();
|
|
if (currentPage > 1)
|
|
setCurrentPage(currentPage - 1);
|
|
}} className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}/>
|
|
</PaginationItem>
|
|
|
|
{getPaginationPages(currentPage, totalPages).map((page, index) => (page === 'ellipsis' ? (<PaginationItem key={`ellipsis-${index}`}>
|
|
<PaginationEllipsis />
|
|
</PaginationItem>) : (<PaginationItem key={page}>
|
|
<PaginationLink href="#" onClick={(e) => {
|
|
e.preventDefault();
|
|
setCurrentPage(page);
|
|
}} isActive={currentPage === page} className="cursor-pointer">
|
|
{page}
|
|
</PaginationLink>
|
|
</PaginationItem>)))}
|
|
|
|
<PaginationItem>
|
|
<PaginationNext href="#" onClick={(e) => {
|
|
e.preventDefault();
|
|
if (currentPage < totalPages)
|
|
setCurrentPage(currentPage + 1);
|
|
}} className={currentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}/>
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>)}
|
|
|
|
<Dialog open={showClearConfirm} onOpenChange={setShowClearConfirm}>
|
|
<DialogContent className="max-w-md [&>button]:hidden">
|
|
<DialogHeader>
|
|
<DialogTitle>Clear Download History?</DialogTitle>
|
|
<DialogDescription>
|
|
This will remove all entries from your download history. This action cannot be undone.
|
|
Note: The actual downloaded files will NOT be deleted.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setShowClearConfirm(false)} className="cursor-pointer">Cancel</Button>
|
|
<Button variant="destructive" onClick={handleClearHistory} className="cursor-pointer">
|
|
Clear History
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>);
|
|
}
|