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,69 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import type { Track } from "livekit-client";
+
+export function SfuVideoTile({
+  videoTrack,
+  audioTrack,
+  name,
+  isLocal = false,
+  isHost = false,
+  muted = false,
+  videoOff = false,
+  speaking = false,
+  compact = false,
+}: {
+  videoTrack?: Track | null;
+  audioTrack?: Track | null;
+  name: string;
+  isLocal?: boolean;
+  isHost?: boolean;
+  muted?: boolean;
+  videoOff?: boolean;
+  speaking?: boolean;
+  compact?: boolean;
+}) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  useEffect(() => {
+    const videoElement = videoRef.current;
+    if (!videoElement || !videoTrack || videoOff) return;
+    videoTrack.attach(videoElement);
+    return () => {
+      videoTrack.detach(videoElement);
+    };
+  }, [videoTrack, videoOff]);
+
+  useEffect(() => {
+    const audioElement = audioRef.current;
+    if (!audioElement || !audioTrack || isLocal) return;
+    audioTrack.attach(audioElement);
+    return () => {
+      audioTrack.detach(audioElement);
+    };
+  }, [audioTrack, isLocal]);
+
+  return (
+    <div className={`relative aspect-video overflow-hidden rounded-2xl bg-neutral-800 ${speaking ? "ring-2 ring-anouma-rose" : ""}`}>
+      {videoTrack && !videoOff ? (
+        <video ref={videoRef} autoPlay playsInline muted={isLocal} className="h-full w-full object-cover" />
+      ) : (
+        <div className="flex h-full w-full items-center justify-center bg-neutral-800">
+          <div className={`${compact ? "h-10 w-10 text-lg" : "h-16 w-16 text-2xl"} flex items-center justify-center rounded-full bg-neutral-700 font-serif text-white`}>
+            {name.charAt(0).toUpperCase()}
+          </div>
+        </div>
+      )}
+      {!isLocal && <audio ref={audioRef} autoPlay />}
+      <div className="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-black/75 to-transparent px-3 py-2">
+        <span className="truncate text-sm font-medium text-white">{name}{isLocal && " (du)"}</span>
+        <div className="flex items-center gap-2 text-white/80">
+          {muted && <span aria-label="Mikrofon stumm">⌁</span>}
+          {isHost && <span className="rounded-full bg-anouma-mauve-dark/90 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-white">Host</span>}
+        </div>
+      </div>
+    </div>
+  );
+}