Yahya Alhinai
418 lines
14 KiB
TypeScript
418 lines
14 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { RoomEvent, Track } from 'livekit-client';
|
|
import {
|
|
ArrowLeftIcon,
|
|
CheckIcon,
|
|
CircleDotIcon,
|
|
MonitorUpIcon,
|
|
RadioTowerIcon,
|
|
SparklesIcon,
|
|
Volume2Icon,
|
|
XIcon,
|
|
} from 'lucide-react';
|
|
import type { Room, RemoteTrack, RemoteTrackPublication, RemoteParticipant } from 'livekit-client';
|
|
import type { Pod } from '@podman/shared';
|
|
import { startBeat, type BeatHandle } from '../lib/beat.js';
|
|
import { useInterventions } from '../livekit/useInterventions.js';
|
|
import LiveWaveform from '@/components/ruixen/live-waveform';
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { Avatar, AvatarBadge, AvatarFallback } from '@/components/ui/avatar';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import {
|
|
Empty,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyMedia,
|
|
EmptyTitle,
|
|
} from '@/components/ui/empty';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface PInfo {
|
|
id: string;
|
|
name: string;
|
|
isLocal: boolean;
|
|
speaking: boolean;
|
|
}
|
|
|
|
function snapshot(room: Room, fallbackName: string): PInfo[] {
|
|
const lp = room.localParticipant;
|
|
const local: PInfo = {
|
|
id: lp.identity,
|
|
name: lp.name || fallbackName,
|
|
isLocal: true,
|
|
speaking: lp.isSpeaking,
|
|
};
|
|
const remotes = Array.from(room.remoteParticipants.values()).map((p) => ({
|
|
id: p.identity,
|
|
name: p.name || p.identity,
|
|
isLocal: false,
|
|
speaking: p.isSpeaking,
|
|
}));
|
|
return [local, ...remotes];
|
|
}
|
|
|
|
export function PodView({
|
|
team,
|
|
me,
|
|
room,
|
|
devMode,
|
|
onLeave,
|
|
}: {
|
|
team: Pod;
|
|
me: string;
|
|
room: Room | null;
|
|
devMode: boolean;
|
|
onLeave: () => void;
|
|
}) {
|
|
const [participants, setParticipants] = useState<PInfo[]>([]);
|
|
const [sharing, setSharing] = useState(false);
|
|
const [playingBeat, setPlayingBeat] = useState(false);
|
|
const [note, setNote] = useState<string | null>(null);
|
|
const { active, respond } = useInterventions(room);
|
|
|
|
const audioRef = useRef<HTMLDivElement>(null);
|
|
const beatRef = useRef<BeatHandle | null>(null);
|
|
const screenTrackRef = useRef<MediaStreamTrack | null>(null);
|
|
const onLeaveRef = useRef(onLeave);
|
|
onLeaveRef.current = onLeave;
|
|
|
|
useEffect(() => {
|
|
if (!room) return;
|
|
const refresh = () => setParticipants(snapshot(room, me));
|
|
refresh();
|
|
|
|
const onAudio = (track: RemoteTrack, _pub: RemoteTrackPublication, _p: RemoteParticipant) => {
|
|
if (track.kind === Track.Kind.Audio && audioRef.current) {
|
|
audioRef.current.appendChild(track.attach());
|
|
}
|
|
};
|
|
const onAudioGone = (track: RemoteTrack) => track.detach().forEach((el) => el.remove());
|
|
const onDisconnected = () => onLeaveRef.current();
|
|
|
|
room
|
|
.on(RoomEvent.ParticipantConnected, refresh)
|
|
.on(RoomEvent.ParticipantDisconnected, refresh)
|
|
.on(RoomEvent.ActiveSpeakersChanged, refresh)
|
|
.on(RoomEvent.TrackSubscribed, onAudio)
|
|
.on(RoomEvent.TrackUnsubscribed, onAudioGone)
|
|
.on(RoomEvent.Disconnected, onDisconnected);
|
|
|
|
return () => {
|
|
room
|
|
.off(RoomEvent.ParticipantConnected, refresh)
|
|
.off(RoomEvent.ParticipantDisconnected, refresh)
|
|
.off(RoomEvent.ActiveSpeakersChanged, refresh)
|
|
.off(RoomEvent.TrackSubscribed, onAudio)
|
|
.off(RoomEvent.TrackUnsubscribed, onAudioGone)
|
|
.off(RoomEvent.Disconnected, onDisconnected);
|
|
};
|
|
}, [room, me]);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
beatRef.current?.stop();
|
|
beatRef.current = null;
|
|
screenTrackRef.current?.stop();
|
|
screenTrackRef.current = null;
|
|
};
|
|
}, []);
|
|
|
|
async function toggleBeat() {
|
|
if (!room) return;
|
|
setNote(null);
|
|
try {
|
|
if (playingBeat) {
|
|
if (beatRef.current) await room.localParticipant.unpublishTrack(beatRef.current.track);
|
|
beatRef.current?.stop();
|
|
beatRef.current = null;
|
|
setPlayingBeat(false);
|
|
} else {
|
|
await room.startAudio().catch(() => {});
|
|
const handle = startBeat();
|
|
beatRef.current = handle;
|
|
await room.localParticipant.publishTrack(handle.track, { name: 'podman-beat' });
|
|
setPlayingBeat(true);
|
|
}
|
|
} catch (e) {
|
|
setNote(`Audio test failed: ${(e as Error).message}`);
|
|
}
|
|
}
|
|
|
|
async function toggleScreen() {
|
|
if (!room) return;
|
|
setNote(null);
|
|
try {
|
|
if (sharing) {
|
|
if (screenTrackRef.current)
|
|
await room.localParticipant.unpublishTrack(screenTrackRef.current);
|
|
screenTrackRef.current?.stop();
|
|
screenTrackRef.current = null;
|
|
setSharing(false);
|
|
return;
|
|
}
|
|
if (!window.isSecureContext || !navigator.mediaDevices?.getDisplayMedia) {
|
|
setNote('Screen capture needs HTTPS.');
|
|
return;
|
|
}
|
|
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
|
|
const track = stream.getVideoTracks()[0];
|
|
if (!track) return;
|
|
track.onended = () => {
|
|
screenTrackRef.current = null;
|
|
setSharing(false);
|
|
};
|
|
await room.localParticipant.publishTrack(track, { source: Track.Source.ScreenShare });
|
|
screenTrackRef.current = track;
|
|
setSharing(true);
|
|
} catch (e) {
|
|
setNote(`Screen share stopped: ${(e as Error).message}`);
|
|
}
|
|
}
|
|
|
|
const podmanPresent = participants.some((p) => p.name.toLowerCase() === 'podman');
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground">
|
|
<div className="mx-auto flex min-h-screen w-full max-w-[1440px] flex-col gap-5 px-4 py-4 sm:px-6 lg:px-8">
|
|
<header className="sticky top-0 z-10 -mx-4 flex flex-col gap-3 border-b bg-background/86 px-4 pb-4 pt-2 backdrop-blur-xl sm:-mx-6 sm:px-6 md:flex-row md:items-center md:justify-between lg:-mx-8 lg:px-8">
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" onClick={onLeave}>
|
|
<ArrowLeftIcon />
|
|
<span className="sr-only">Leave pod</span>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Leave pod</TooltipContent>
|
|
</Tooltip>
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<h1 className="truncate text-xl font-semibold tracking-tight">{team.name}</h1>
|
|
<Badge variant={room ? 'default' : 'secondary'} className="rounded-md">
|
|
{room ? 'live' : 'local'}
|
|
</Badge>
|
|
</div>
|
|
<p className="truncate font-mono text-xs text-muted-foreground">{team.repo}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2 sm:flex sm:items-center">
|
|
<Button variant="outline" onClick={toggleBeat} disabled={!room}>
|
|
<Volume2Icon data-icon="inline-start" />
|
|
{playingBeat ? 'Stop audio' : 'Test audio'}
|
|
</Button>
|
|
<Button onClick={toggleScreen} disabled={!room}>
|
|
<MonitorUpIcon data-icon="inline-start" />
|
|
{sharing ? 'Stop sharing' : 'Share screen'}
|
|
</Button>
|
|
</div>
|
|
</header>
|
|
|
|
{devMode && (
|
|
<Alert>
|
|
<RadioTowerIcon />
|
|
<AlertTitle>Local mode</AlertTitle>
|
|
<AlertDescription>LiveKit is not configured for this session.</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{note && (
|
|
<Alert>
|
|
<CircleDotIcon />
|
|
<AlertTitle>Room notice</AlertTitle>
|
|
<AlertDescription>{note}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
<main className="grid flex-1 gap-5 lg:grid-cols-[minmax(0,1fr)_360px]">
|
|
<section className="flex min-w-0 flex-col gap-5">
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
<Metric label="Participants" value={participants.length || 1} />
|
|
<Metric label="Screen" value={sharing ? 'sharing' : 'idle'} />
|
|
<Metric label="PodMan" value={podmanPresent ? 'online' : 'waiting'} />
|
|
</div>
|
|
|
|
<Card className="flex-1">
|
|
<CardHeader>
|
|
<CardTitle>Room state</CardTitle>
|
|
<CardDescription>People and media currently visible to PodMan.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{participants.length === 0 ? (
|
|
<Empty className="min-h-80">
|
|
<EmptyHeader>
|
|
<EmptyMedia variant="icon">
|
|
<RadioTowerIcon />
|
|
</EmptyMedia>
|
|
<EmptyTitle>Connecting</EmptyTitle>
|
|
<EmptyDescription>Waiting for LiveKit room state.</EmptyDescription>
|
|
</EmptyHeader>
|
|
</Empty>
|
|
) : (
|
|
<div className="grid gap-2 md:grid-cols-2">
|
|
{participants.map((p) => (
|
|
<Participant key={p.id} participant={p} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
<CardFooter>
|
|
<p className="truncate text-sm text-muted-foreground">
|
|
Roster: {team.members.join(', ') || 'No saved members'}
|
|
</p>
|
|
</CardFooter>
|
|
</Card>
|
|
</section>
|
|
|
|
<aside className="flex flex-col gap-5">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Intervention</CardTitle>
|
|
<CardDescription>Card first, voice only for urgent escalation.</CardDescription>
|
|
<CardAction>
|
|
<Badge variant={active ? 'default' : 'secondary'} className="rounded-md">
|
|
{active ? 'active' : 'clear'}
|
|
</Badge>
|
|
</CardAction>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{active ? (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="rounded-lg border bg-muted/35 p-3">
|
|
<p className="text-sm leading-6">{active.message}</p>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-3 text-sm">
|
|
<span className="text-muted-foreground">Suggested action</span>
|
|
<Badge variant="outline">
|
|
{active.suggestedAction.kind.replaceAll('_', ' ')}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<Empty className="min-h-72 border-0 p-0">
|
|
<EmptyHeader>
|
|
<EmptyMedia variant="icon">
|
|
<SparklesIcon />
|
|
</EmptyMedia>
|
|
<EmptyTitle>No collision detected</EmptyTitle>
|
|
<EmptyDescription>
|
|
Share your screen when ready. PodMan will stay quiet until there is a useful
|
|
signal.
|
|
</EmptyDescription>
|
|
</EmptyHeader>
|
|
</Empty>
|
|
)}
|
|
</CardContent>
|
|
{active && (
|
|
<CardFooter className="justify-end gap-2">
|
|
<Button variant="outline" onClick={() => void respond('dismissed', false)}>
|
|
<XIcon data-icon="inline-start" />
|
|
Dismiss
|
|
</Button>
|
|
<Button onClick={() => void respond('accepted', true)}>
|
|
<CheckIcon data-icon="inline-start" />
|
|
Accept
|
|
</Button>
|
|
</CardFooter>
|
|
)}
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Status</CardTitle>
|
|
<CardDescription>Connection, media, and agent presence.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<LiveWaveform
|
|
processing={!!room}
|
|
active={false}
|
|
height={32}
|
|
barWidth={2}
|
|
barGap={3}
|
|
className="mb-4 px-3 py-2 text-muted-foreground"
|
|
/>
|
|
<div className="flex flex-col gap-3">
|
|
<StatusLine label="LiveKit" value={room ? 'connected' : 'offline'} />
|
|
<StatusLine label="Screen" value={sharing ? 'published' : 'not shared'} />
|
|
<StatusLine label="Audio" value={playingBeat ? 'publishing' : 'ready'} />
|
|
<StatusLine label="Agent" value={podmanPresent ? 'watching' : 'waiting'} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</aside>
|
|
</main>
|
|
<div ref={audioRef} className="hidden" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Metric({ label, value }: { label: string; value: number | string }) {
|
|
return (
|
|
<Card size="sm">
|
|
<CardContent>
|
|
<p className="text-xs text-muted-foreground">{label}</p>
|
|
<p className="mt-1 text-lg font-medium">{value}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function Participant({ participant }: { participant: PInfo }) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex min-h-16 items-center justify-between gap-3 rounded-lg border bg-muted/20 px-3 transition',
|
|
participant.speaking && 'bg-muted',
|
|
)}
|
|
>
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
<Avatar>
|
|
<AvatarFallback>{initials(participant.name)}</AvatarFallback>
|
|
{participant.speaking && <AvatarBadge />}
|
|
</Avatar>
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-medium">{participant.name}</p>
|
|
<p className="text-xs text-muted-foreground">{participant.isLocal ? 'you' : 'remote'}</p>
|
|
</div>
|
|
</div>
|
|
<Badge variant={participant.speaking ? 'default' : 'secondary'} className="rounded-md">
|
|
{participant.speaking ? 'speaking' : 'connected'}
|
|
</Badge>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatusLine({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="text-sm text-muted-foreground">{label}</span>
|
|
<span className="text-sm font-medium">{value}</span>
|
|
</div>
|
|
<Separator />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function initials(name: string): string {
|
|
return name
|
|
.split(/\s+/)
|
|
.map((w) => w[0] ?? '')
|
|
.join('')
|
|
.slice(0, 2)
|
|
.toUpperCase();
|
|
}
|