feat: initial owlcub-meet LiveKit frontend
This commit is contained in:
Romain bogdanovic
commit
e98985d760
|
|
@ -0,0 +1,4 @@
|
||||||
|
# LiveKit server (wss:// pour la prod)
|
||||||
|
LIVEKIT_URL=wss://livekit.cupadev.com
|
||||||
|
LIVEKIT_API_KEY=owlcub
|
||||||
|
LIVEKIT_API_SECRET=7e58d884465fe162c4f6b71846a75a797e071c9c53eb20eaf664a2141760ffed
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"framework": "nextjs",
|
||||||
|
"buildCommand": "npm install && npm run build",
|
||||||
|
"startCommand": "npm start",
|
||||||
|
"port": 3000
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
import type { NextConfig } from 'next';
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
async headers() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
source: '/(.*)',
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
key: 'Content-Security-Policy',
|
||||||
|
value: [
|
||||||
|
"default-src 'self'",
|
||||||
|
"script-src 'self' 'unsafe-inline' 'unsafe-eval'",
|
||||||
|
"style-src 'self' 'unsafe-inline'",
|
||||||
|
"img-src 'self' data: blob:",
|
||||||
|
"media-src 'self' blob:",
|
||||||
|
"connect-src 'self' https: wss:",
|
||||||
|
"worker-src 'self' blob:",
|
||||||
|
"frame-ancestors 'none'",
|
||||||
|
].join('; '),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"name": "owlcub-meet",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@livekit/components-react": "^2.9.0",
|
||||||
|
"@livekit/components-styles": "^1.1.0",
|
||||||
|
"livekit-client": "^2.9.0",
|
||||||
|
"livekit-server-sdk": "^2.10.0",
|
||||||
|
"next": "15.3.0",
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0",
|
||||||
|
"clsx": "^2.1.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^22",
|
||||||
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
"typescript": "^5",
|
||||||
|
"tailwindcss": "^3.4.0",
|
||||||
|
"autoprefixer": "^10.4.0",
|
||||||
|
"postcss": "^8.4.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import { AccessToken } from 'livekit-server-sdk';
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
const { searchParams } = new URL(req.url);
|
||||||
|
const room = searchParams.get('room');
|
||||||
|
const username = searchParams.get('username');
|
||||||
|
|
||||||
|
if (!room || !username) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'room and username are required' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const apiKey = process.env.LIVEKIT_API_KEY;
|
||||||
|
const apiSecret = process.env.LIVEKIT_API_SECRET;
|
||||||
|
const serverUrl = process.env.LIVEKIT_URL;
|
||||||
|
|
||||||
|
if (!apiKey || !apiSecret || !serverUrl) {
|
||||||
|
console.error('Missing LiveKit env vars: LIVEKIT_API_KEY, LIVEKIT_API_SECRET, LIVEKIT_URL');
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Server configuration error' },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const token = new AccessToken(apiKey, apiSecret, {
|
||||||
|
identity: `${username}-${Date.now()}`,
|
||||||
|
name: username,
|
||||||
|
ttl: '4h',
|
||||||
|
});
|
||||||
|
|
||||||
|
token.addGrant({
|
||||||
|
roomJoin: true,
|
||||||
|
room,
|
||||||
|
canPublish: true,
|
||||||
|
canSubscribe: true,
|
||||||
|
canPublishData: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
token: await token.toJwt(),
|
||||||
|
serverUrl,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@import '@livekit/components-styles';
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--lk-theme-color: #3b5ff8;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: #0f1117;
|
||||||
|
color: #f1f5f9;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import type { Metadata } from 'next';
|
||||||
|
import './globals.css';
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'OwlCub Meet',
|
||||||
|
description: 'Visioconférence sécurisée OwlCub',
|
||||||
|
icons: { icon: '/favicon.ico' },
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<html lang="fr">
|
||||||
|
<body>{children}</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,179 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useCallback } from 'react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { clsx } from 'clsx';
|
||||||
|
|
||||||
|
function generateRoomCode(): string {
|
||||||
|
const adjectives = ['swift', 'bright', 'calm', 'bold', 'clear', 'deep', 'keen', 'sharp'];
|
||||||
|
const nouns = ['falcon', 'summit', 'bridge', 'stream', 'nexus', 'forge', 'pulse', 'orbit'];
|
||||||
|
const adj = adjectives[Math.floor(Math.random() * adjectives.length)];
|
||||||
|
const noun = nouns[Math.floor(Math.random() * nouns.length)];
|
||||||
|
const num = Math.floor(1000 + Math.random() * 9000);
|
||||||
|
return `${adj}-${noun}-${num}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [displayName, setDisplayName] = useState('');
|
||||||
|
const [roomCode, setRoomCode] = useState('');
|
||||||
|
const [mode, setMode] = useState<'create' | 'join'>('create');
|
||||||
|
const [generatedRoom] = useState(() => generateRoomCode());
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
const roomToJoin = mode === 'create' ? generatedRoom : roomCode;
|
||||||
|
|
||||||
|
const handleStart = useCallback(() => {
|
||||||
|
if (!displayName.trim()) {
|
||||||
|
setError('Veuillez entrer votre nom');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (mode === 'join' && !roomCode.trim()) {
|
||||||
|
setError('Veuillez entrer le code de la réunion');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const room = encodeURIComponent(roomToJoin.trim());
|
||||||
|
const name = encodeURIComponent(displayName.trim());
|
||||||
|
router.push(`/room/${room}?name=${name}`);
|
||||||
|
}, [displayName, roomCode, mode, roomToJoin, router]);
|
||||||
|
|
||||||
|
const copyLink = useCallback(async () => {
|
||||||
|
const url = `${window.location.origin}/room/${encodeURIComponent(generatedRoom)}`;
|
||||||
|
await navigator.clipboard.writeText(url);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
}, [generatedRoom]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col items-center justify-center p-4 bg-gradient-to-br from-[#0f1117] via-[#131829] to-[#0f1117]">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="mb-10 text-center">
|
||||||
|
<div className="flex items-center justify-center gap-3 mb-2">
|
||||||
|
<div className="w-10 h-10 rounded-xl bg-brand-500 flex items-center justify-center">
|
||||||
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" className="text-white">
|
||||||
|
<path d="M15 10l4.553-2.277A1 1 0 0121 8.723v6.554a1 1 0 01-1.447.894L15 14M3 8a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span className="text-2xl font-bold text-white tracking-tight">OwlCub Meet</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-400 text-sm">Visioconférence sécurisée</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Card */}
|
||||||
|
<div className="w-full max-w-md bg-[#1a1f2e] border border-white/8 rounded-2xl p-6 shadow-2xl">
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="flex gap-1 mb-6 bg-[#0f1117] rounded-lg p-1">
|
||||||
|
<button
|
||||||
|
onClick={() => { setMode('create'); setError(''); }}
|
||||||
|
className={clsx(
|
||||||
|
'flex-1 py-2 px-4 rounded-md text-sm font-medium transition-all',
|
||||||
|
mode === 'create'
|
||||||
|
? 'bg-brand-600 text-white shadow-sm'
|
||||||
|
: 'text-slate-400 hover:text-slate-200'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Créer une réunion
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => { setMode('join'); setError(''); }}
|
||||||
|
className={clsx(
|
||||||
|
'flex-1 py-2 px-4 rounded-md text-sm font-medium transition-all',
|
||||||
|
mode === 'join'
|
||||||
|
? 'bg-brand-600 text-white shadow-sm'
|
||||||
|
: 'text-slate-400 hover:text-slate-200'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Rejoindre
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Room code display (create mode) */}
|
||||||
|
{mode === 'create' && (
|
||||||
|
<div className="mb-5">
|
||||||
|
<label className="block text-xs text-slate-400 mb-2 font-medium uppercase tracking-wider">
|
||||||
|
Code de la réunion
|
||||||
|
</label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<div className="flex-1 bg-[#0f1117] border border-white/10 rounded-lg px-4 py-3 font-mono text-brand-300 text-sm tracking-widest select-all">
|
||||||
|
{generatedRoom}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={copyLink}
|
||||||
|
className="px-4 py-3 bg-[#0f1117] border border-white/10 rounded-lg text-slate-300 hover:text-white hover:border-white/20 transition-all text-sm whitespace-nowrap"
|
||||||
|
title="Copier le lien"
|
||||||
|
>
|
||||||
|
{copied ? (
|
||||||
|
<span className="text-green-400">✓ Copié</span>
|
||||||
|
) : (
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
|
||||||
|
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-slate-500 mt-2">
|
||||||
|
Partagez ce code ou{' '}
|
||||||
|
<button onClick={copyLink} className="text-brand-400 hover:text-brand-300 underline-offset-2 hover:underline">
|
||||||
|
copiez le lien direct
|
||||||
|
</button>{' '}
|
||||||
|
à votre interlocuteur.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Room code input (join mode) */}
|
||||||
|
{mode === 'join' && (
|
||||||
|
<div className="mb-5">
|
||||||
|
<label className="block text-xs text-slate-400 mb-2 font-medium uppercase tracking-wider">
|
||||||
|
Code de la réunion
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={roomCode}
|
||||||
|
onChange={e => { setRoomCode(e.target.value); setError(''); }}
|
||||||
|
placeholder="ex: swift-falcon-4821"
|
||||||
|
className="w-full bg-[#0f1117] border border-white/10 rounded-lg px-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-brand-500 transition-colors text-sm"
|
||||||
|
onKeyDown={e => e.key === 'Enter' && handleStart()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Display name */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<label className="block text-xs text-slate-400 mb-2 font-medium uppercase tracking-wider">
|
||||||
|
Votre nom
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={displayName}
|
||||||
|
onChange={e => { setDisplayName(e.target.value); setError(''); }}
|
||||||
|
placeholder="Jean Dupont"
|
||||||
|
className="w-full bg-[#0f1117] border border-white/10 rounded-lg px-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-brand-500 transition-colors text-sm"
|
||||||
|
onKeyDown={e => e.key === 'Enter' && handleStart()}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<p className="text-red-400 text-sm mb-4 bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleStart}
|
||||||
|
className="w-full py-3 bg-brand-600 hover:bg-brand-500 text-white font-semibold rounded-lg transition-all shadow-lg shadow-brand-900/40 active:scale-[0.98]"
|
||||||
|
>
|
||||||
|
{mode === 'create' ? 'Démarrer la réunion' : 'Rejoindre'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="mt-8 text-xs text-slate-600">
|
||||||
|
Visioconférence chiffrée · Propulsé par LiveKit
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useParams, useSearchParams, useRouter } from 'next/navigation';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { MeetingRoom } from '@/components/MeetingRoom';
|
||||||
|
|
||||||
|
export default function RoomPage() {
|
||||||
|
const params = useParams();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const roomName = decodeURIComponent(params.name as string);
|
||||||
|
const displayName = searchParams.get('name') ?? '';
|
||||||
|
|
||||||
|
const [askName, setAskName] = useState(!displayName);
|
||||||
|
const [inputName, setInputName] = useState('');
|
||||||
|
|
||||||
|
// Si le user arrive directement via un lien partagé sans ?name=
|
||||||
|
if (askName) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col items-center justify-center p-4 bg-gradient-to-br from-[#0f1117] via-[#131829] to-[#0f1117]">
|
||||||
|
<div className="w-full max-w-sm bg-[#1a1f2e] border border-white/8 rounded-2xl p-6 shadow-2xl">
|
||||||
|
<h2 className="text-lg font-semibold text-white mb-1">Rejoindre la réunion</h2>
|
||||||
|
<p className="text-slate-400 text-sm mb-5">
|
||||||
|
Code :{' '}
|
||||||
|
<span className="text-brand-300 font-mono text-xs">{roomName}</span>
|
||||||
|
</p>
|
||||||
|
<label className="block text-xs text-slate-400 mb-2 font-medium uppercase tracking-wider">
|
||||||
|
Votre nom
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={inputName}
|
||||||
|
onChange={e => setInputName(e.target.value)}
|
||||||
|
placeholder="Jean Dupont"
|
||||||
|
autoFocus
|
||||||
|
className="w-full mb-5 bg-[#0f1117] border border-white/10 rounded-lg px-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-brand-500 transition-colors text-sm"
|
||||||
|
onKeyDown={e => {
|
||||||
|
if (e.key === 'Enter' && inputName.trim()) setAskName(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => { if (inputName.trim()) setAskName(false); }}
|
||||||
|
className="w-full py-3 bg-brand-600 hover:bg-brand-500 text-white font-semibold rounded-lg transition-all"
|
||||||
|
>
|
||||||
|
Rejoindre
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const finalName = displayName || inputName;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MeetingRoom
|
||||||
|
roomName={roomName}
|
||||||
|
displayName={finalName}
|
||||||
|
onLeave={() => router.push('/')}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import '@livekit/components-styles';
|
||||||
|
import {
|
||||||
|
LiveKitRoom,
|
||||||
|
VideoConference,
|
||||||
|
RoomAudioRenderer,
|
||||||
|
useConnectionState,
|
||||||
|
} from '@livekit/components-react';
|
||||||
|
import { ConnectionState } from 'livekit-client';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
roomName: string;
|
||||||
|
displayName: string;
|
||||||
|
onLeave: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ConnectionStatus() {
|
||||||
|
const state = useConnectionState();
|
||||||
|
if (state === ConnectionState.Connected) return null;
|
||||||
|
|
||||||
|
const messages: Record<string, string> = {
|
||||||
|
[ConnectionState.Connecting]: 'Connexion en cours…',
|
||||||
|
[ConnectionState.Reconnecting]: 'Reconnexion…',
|
||||||
|
[ConnectionState.Disconnected]: 'Déconnecté',
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed top-4 left-1/2 -translate-x-1/2 z-50 bg-[#1a1f2e] border border-white/10 rounded-full px-4 py-2 text-sm text-slate-300 shadow-xl flex items-center gap-2">
|
||||||
|
<span className="w-2 h-2 rounded-full bg-amber-400 animate-pulse" />
|
||||||
|
{messages[state] ?? state}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MeetingRoom({ roomName, displayName, onLeave }: Props) {
|
||||||
|
const [token, setToken] = useState<string | null>(null);
|
||||||
|
const [serverUrl, setServerUrl] = useState<string | null>(null);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const params = new URLSearchParams({ room: roomName, username: displayName });
|
||||||
|
fetch(`/api/token?${params}`)
|
||||||
|
.then(r => {
|
||||||
|
if (!r.ok) throw new Error(`HTTP ${r.status}`);
|
||||||
|
return r.json();
|
||||||
|
})
|
||||||
|
.then(d => {
|
||||||
|
setToken(d.token);
|
||||||
|
setServerUrl(d.serverUrl);
|
||||||
|
})
|
||||||
|
.catch(e => setError(e.message));
|
||||||
|
}, [roomName, displayName]);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[#0f1117] text-white">
|
||||||
|
<p className="text-red-400 text-sm">Impossible de rejoindre la réunion : {error}</p>
|
||||||
|
<button onClick={onLeave} className="text-sm text-slate-400 hover:text-white underline">
|
||||||
|
Retour
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!token || !serverUrl) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-[#0f1117]">
|
||||||
|
<div className="flex items-center gap-3 text-slate-400">
|
||||||
|
<span className="w-5 h-5 border-2 border-brand-500 border-t-transparent rounded-full animate-spin" />
|
||||||
|
<span className="text-sm">Connexion à la réunion…</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LiveKitRoom
|
||||||
|
serverUrl={serverUrl}
|
||||||
|
token={token}
|
||||||
|
connect={true}
|
||||||
|
video={true}
|
||||||
|
audio={true}
|
||||||
|
onDisconnected={onLeave}
|
||||||
|
style={{ height: '100dvh', width: '100vw' }}
|
||||||
|
>
|
||||||
|
<ConnectionStatus />
|
||||||
|
<VideoConference />
|
||||||
|
<RoomAudioRenderer />
|
||||||
|
</LiveKitRoom>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import type { Config } from 'tailwindcss';
|
||||||
|
|
||||||
|
const config: Config = {
|
||||||
|
content: ['./src/**/*.{ts,tsx}'],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
50: '#f0f4ff',
|
||||||
|
100: '#dde8ff',
|
||||||
|
200: '#c3d4fe',
|
||||||
|
300: '#9ab7fd',
|
||||||
|
400: '#6b8dfb',
|
||||||
|
500: '#3b5ff8',
|
||||||
|
600: '#2640ed',
|
||||||
|
700: '#1e2fd9',
|
||||||
|
800: '#1f29b0',
|
||||||
|
900: '#1f278b',
|
||||||
|
950: '#161a55',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2017",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [{ "name": "next" }],
|
||||||
|
"paths": { "@/*": ["./src/*"] }
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue