83 lines
3.5 KiB
TypeScript
83 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { X, RefreshCw, CheckCircle, AlertCircle } from "lucide-react";
|
|
import { api } from "@/services/apiClient";
|
|
|
|
interface SettingsModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
|
|
const [updating, setUpdating] = useState(false);
|
|
const [status, setStatus] = useState<{ type: "success" | "error" | null; message: string }>({ type: null, message: "" });
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const handleUpdate = async () => {
|
|
setUpdating(true);
|
|
setStatus({ type: null, message: "" });
|
|
try {
|
|
await api.post("/settings/update-ytdlp", {});
|
|
setStatus({ type: "success", message: "Update successful! Server is restarting..." });
|
|
// Reload page after a delay to reflect restart
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 5000);
|
|
} catch (e: any) {
|
|
setStatus({ type: "error", message: e.message || "Update failed" });
|
|
} finally {
|
|
setUpdating(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
|
<div className="bg-[#1e1e1e] rounded-xl p-6 w-full max-w-md shadow-2xl border border-white/10">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h2 className="text-xl font-bold">Settings</h2>
|
|
<button onClick={onClose} className="p-2 hover:bg-white/10 rounded-full transition">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="bg-[#2a2a2a] p-4 rounded-lg">
|
|
<h3 className="font-semibold mb-2">Core Components</h3>
|
|
<p className="text-sm text-gray-400 mb-4">
|
|
Update the core playback library (yt-dlp) to the latest version to fix playback issues.
|
|
</p>
|
|
|
|
<button
|
|
onClick={handleUpdate}
|
|
disabled={updating}
|
|
className={`w-full py-3 rounded-lg font-medium flex items-center justify-center gap-2 transition ${updating ? "bg-blue-600/50 cursor-not-allowed" : "bg-blue-600 hover:bg-blue-500"
|
|
}`}
|
|
>
|
|
{updating ? (
|
|
<>
|
|
<RefreshCw className="animate-spin" size={18} />
|
|
Updating...
|
|
</>
|
|
) : (
|
|
<>
|
|
<RefreshCw size={18} />
|
|
Update yt-dlp (Nightly)
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{status.message && (
|
|
<div className={`p-4 rounded-lg flex items-start gap-3 ${status.type === "success" ? "bg-green-500/10 text-green-400" : "bg-red-500/10 text-red-400"
|
|
}`}>
|
|
{status.type === "success" ? <CheckCircle size={20} /> : <AlertCircle size={20} />}
|
|
<p className="text-sm">{status.message}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|