Integrate LiveKit SFU and harden booking workflow

2026-09-16 19:38:28 +02:00
parent f1cd07b3ad
commit d0864e2911
55 changed files with 1648 additions and 1234 deletions
@@ -0,0 +1,64 @@
+"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 Video-Call 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" : "Call 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>
+  );
+}