65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
export function AdminCallButton({ eventSlug }: { eventSlug: string }) {
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [copied, setCopied] = useState(false);
|
|
const [url, setUrl] = useState<string | null>(null);
|
|
|
|
async function startCall() {
|
|
setLoading(true);
|
|
setError(null);
|
|
setCopied(false);
|
|
try {
|
|
const response = await fetch("/api/admin/meetings/start", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
credentials: "include",
|
|
body: JSON.stringify({ eventSlug }),
|
|
});
|
|
const data = await response.json().catch(() => ({}));
|
|
if (!response.ok) {
|
|
setError(data.error || "Der Videoanruf konnte nicht gestartet werden.");
|
|
return;
|
|
}
|
|
setUrl(data.testUrl);
|
|
try {
|
|
await navigator.clipboard.writeText(data.testUrl);
|
|
setCopied(true);
|
|
} catch {
|
|
setError("Der Link wurde erzeugt. Bitte kopiere ihn aus dem Feld.");
|
|
}
|
|
} catch {
|
|
setError("Verbindung fehlgeschlagen.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<span className="inline-flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={startCall}
|
|
disabled={loading}
|
|
className="rounded-full bg-anouma-mauve-dark px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-anouma-plum disabled:cursor-wait disabled:opacity-60"
|
|
>
|
|
{loading ? "Test-Link wird erzeugt ..." : copied ? "Test-Link kopiert" : "Videoanruf testen"}
|
|
</button>
|
|
{url && !copied && (
|
|
<input
|
|
type="text"
|
|
readOnly
|
|
value={url}
|
|
aria-label="Test-Link"
|
|
onFocus={(event) => event.currentTarget.select()}
|
|
className="w-56 rounded border border-anouma-taupe/30 bg-white px-2 py-1 text-xs text-anouma-plum"
|
|
/>
|
|
)}
|
|
{error && <span className="text-xs text-red-700">{error}</span>}
|
|
</span>
|
|
);
|
|
}
|