124 lines
4.4 KiB
TypeScript
124 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { Play, Pause, RefreshCw, Settings } from "lucide-react";
|
|
import { cn } from "@/utils/cn";
|
|
import { GradientSpinner } from "@/components/ui/GradientSpinner";
|
|
import type { DiscoverPlaylist, DiscoverConfig } from "../types";
|
|
|
|
interface BatchStatus {
|
|
active: boolean;
|
|
status: "downloading" | "scanning" | null;
|
|
progress?: number;
|
|
completed?: number;
|
|
failed?: number;
|
|
total?: number;
|
|
}
|
|
|
|
interface DiscoverActionBarProps {
|
|
playlist: DiscoverPlaylist | null;
|
|
config: DiscoverConfig | null;
|
|
isPlaylistPlaying: boolean;
|
|
isPlaying: boolean;
|
|
onPlayToggle: () => void;
|
|
onGenerate: () => void;
|
|
onToggleSettings: () => void;
|
|
isGenerating: boolean;
|
|
batchStatus?: BatchStatus | null;
|
|
}
|
|
|
|
export function DiscoverActionBar({
|
|
playlist,
|
|
config,
|
|
isPlaylistPlaying,
|
|
isPlaying,
|
|
onPlayToggle,
|
|
onGenerate,
|
|
onToggleSettings,
|
|
isGenerating,
|
|
batchStatus,
|
|
}: DiscoverActionBarProps) {
|
|
const getStatusText = () => {
|
|
if (!isGenerating) return null;
|
|
|
|
if (batchStatus?.status === "scanning") {
|
|
return "Importing tracks...";
|
|
}
|
|
|
|
if (batchStatus?.total) {
|
|
return `Downloading ${batchStatus.completed || 0}/${batchStatus.total}`;
|
|
}
|
|
|
|
return "Starting...";
|
|
};
|
|
|
|
return (
|
|
<div className="bg-gradient-to-b from-[#1a1a1a]/60 to-transparent px-4 md:px-8 py-4">
|
|
<div className="flex items-center gap-4">
|
|
{/* Play Button */}
|
|
{playlist && playlist.tracks.length > 0 && (
|
|
<button
|
|
onClick={onPlayToggle}
|
|
disabled={isGenerating}
|
|
className={cn(
|
|
"h-12 w-12 rounded-full flex items-center justify-center shadow-lg transition-all",
|
|
isGenerating
|
|
? "bg-[#ecb200]/50 cursor-not-allowed"
|
|
: "bg-[#ecb200] hover:bg-[#d4a000] hover:scale-105"
|
|
)}
|
|
>
|
|
{isPlaylistPlaying && isPlaying ? (
|
|
<Pause className="w-5 h-5 fill-current text-black" />
|
|
) : (
|
|
<Play className="w-5 h-5 fill-current text-black ml-0.5" />
|
|
)}
|
|
</button>
|
|
)}
|
|
|
|
{/* Generate Button */}
|
|
<button
|
|
onClick={onGenerate}
|
|
disabled={isGenerating || !config?.enabled}
|
|
className={cn(
|
|
"flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all",
|
|
isGenerating || !config?.enabled
|
|
? "bg-white/5 text-white/50 cursor-not-allowed"
|
|
: "bg-purple-600/20 hover:bg-purple-600/30 text-white border border-purple-500/30"
|
|
)}
|
|
>
|
|
{isGenerating ? (
|
|
<>
|
|
<GradientSpinner size="sm" />
|
|
<span className="hidden sm:inline">{getStatusText()}</span>
|
|
<span className="sm:hidden">
|
|
{batchStatus?.completed || 0}/{batchStatus?.total || "?"}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<RefreshCw className="w-4 h-4" />
|
|
<span className="hidden sm:inline">
|
|
{playlist ? "Regenerate" : "Generate"}
|
|
</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
{/* Settings Button */}
|
|
<button
|
|
onClick={onToggleSettings}
|
|
disabled={isGenerating}
|
|
className={cn(
|
|
"h-8 w-8 rounded-full flex items-center justify-center transition-all",
|
|
isGenerating
|
|
? "text-white/30 cursor-not-allowed"
|
|
: "text-white/60 hover:text-white hover:bg-white/10"
|
|
)}
|
|
title="Settings"
|
|
>
|
|
<Settings className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|