Fix LiveKit connect flow and polish meeting room media UI.

Use the official LiveKit PHP SDK for tokens, harden client connect/publish timing, keep the Room outside Alpine reactivity, and replace emoji toolbar controls with synced mic/camera toggles and avatar tiles for audio-only participants.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/js/meet-room.js

@@ -1,11 +1,16 @@
 import Alpine from 'alpinejs';
-import { Room, RoomEvent, Track } from 'livekit-client';
+import { ConnectionState, Room, RoomEvent, Track } from 'livekit-client';
 
 function meetRoom() {
+    // LiveKit Room must stay outside Alpine's reactive proxy — wrapping it breaks
+    // structuredClone inside the SDK during connect and media setup.
+    let room = null;
+    let connectPromise = null;
+    let initialized = false;
+
     return {
-        room: null,
-        isMuted: false,
-        isVideoOff: false,
+        isMuted: true,
+        isVideoOff: true,
         isScreenSharing: false,
         isRecording: false,
         isLocked: false,
@@ -31,6 +36,9 @@ function meetRoom() {
         config: {},
 
         init() {
+            if (initialized) return;
+            initialized = true;
+
             const el = document.getElementById('meet-config');
             if (!el) return;
 
@@ -76,43 +84,302 @@ function meetRoom() {
             this.pollTimer = setInterval(() => this.poll(), 3000);
         },
 
+        connectionErrorMessage(error) {
+            const name = error?.name || '';
+            const message = error?.message || '';
+
+            if (name === 'NotAllowedError' || message.includes('Permission denied')) {
+                return 'Connected — allow camera and microphone in your browser';
+            }
+            if (name === 'NotFoundError' || message.includes('Requested device not found')) {
+                return 'Connected — no camera or microphone found';
+            }
+            if (message.includes('401') || message.toLowerCase().includes('unauthorized')) {
+                return 'LiveKit rejected the session token';
+            }
+            if (message.includes('engine not connected within timeout')) {
+                return 'In call — camera/mic timed out. Use the mic/camera buttons to retry.';
+            }
+            if (message) {
+                return `Connection failed — ${message}`;
+            }
+
+            return 'Connection failed';
+        },
+
         async connectLiveKit() {
+            if (connectPromise) {
+                return connectPromise;
+            }
+
+            connectPromise = this.startLiveKitSession();
+
             try {
-                this.room = new Room({ adaptiveStream: true, dynacast: true });
-                this.room.on(RoomEvent.TrackSubscribed, (track, publication, participant) => {
-                    this.attachTrack(track, participant);
+                await connectPromise;
+            } catch (e) {
+                connectPromise = null;
+                throw e;
+            }
+        },
+
+        async startLiveKitSession() {
+            try {
+                room = new Room({
+                    adaptiveStream: true,
+                    dynacast: true,
+                    disconnectOnPageLeave: true,
                 });
-                this.room.on(RoomEvent.TrackUnsubscribed, (track) => {
+
+                room.on(RoomEvent.TrackSubscribed, (track, publication, participant) => {
+                    this.attachTrack(track, publication, participant);
+                });
+                room.on(RoomEvent.TrackUnsubscribed, (track, publication, participant) => {
                     track.detach();
+                    if (track.kind === Track.Kind.Video && publication.source !== Track.Source.ScreenShare) {
+                        this.updateParticipantTile(participant);
+                    }
                 });
-                this.room.on(RoomEvent.ParticipantConnected, () => this.syncParticipants());
-                this.room.on(RoomEvent.ParticipantDisconnected, () => this.syncParticipants());
-                this.room.on(RoomEvent.Disconnected, () => {
+                room.on(RoomEvent.TrackMuted, (publication, participant) => {
+                    if (publication.kind === Track.Kind.Video && publication.source !== Track.Source.ScreenShare) {
+                        publication.track?.detach();
+                        this.updateParticipantTile(participant);
+                    }
+                    if (publication.kind === Track.Kind.Audio) {
+                        this.updateParticipantTile(participant);
+                    }
+                    if (participant === room.localParticipant) {
+                        this.syncLocalMediaState();
+                    }
+                });
+                room.on(RoomEvent.TrackUnmuted, (publication, participant) => {
+                    if (publication.kind === Track.Kind.Video && publication.track) {
+                        this.attachTrack(publication.track, publication, participant);
+                    }
+                    if (publication.kind === Track.Kind.Audio) {
+                        this.updateParticipantTile(participant);
+                    }
+                    if (participant === room.localParticipant) {
+                        this.syncLocalMediaState();
+                    }
+                });
+                room.on(RoomEvent.LocalTrackPublished, (publication, participant) => {
+                    if (publication.track?.kind === Track.Kind.Video) {
+                        this.attachTrack(publication.track, publication, participant);
+                    }
+                    this.updateParticipantTile(participant);
+                    this.syncLocalMediaState();
+                });
+                room.on(RoomEvent.LocalTrackUnpublished, (publication, participant) => {
+                    if (publication.kind === Track.Kind.Video) {
+                        this.updateParticipantTile(participant);
+                    }
+                    this.syncLocalMediaState();
+                });
+                room.on(RoomEvent.ParticipantConnected, () => this.syncParticipants());
+                room.on(RoomEvent.ParticipantDisconnected, () => this.syncParticipants());
+                room.on(RoomEvent.Disconnected, () => {
                     this.connectionStatus = 'Disconnected';
                 });
 
-                await this.room.connect(this.config.url, this.config.token);
+                await room.prepareConnection(this.config.url, this.config.token);
+
+                await room.connect(this.config.url, this.config.token, {
+                    autoSubscribe: true,
+                    peerConnectionTimeout: 20_000,
+                    websocketTimeout: 20_000,
+                });
+
+                await this.waitForRoomConnected(room);
+
+                this.connectionStatus = 'Connected';
+                this.syncParticipants();
+
                 if (this.canPublish) {
-                    await this.room.localParticipant.enableCameraAndMicrophone();
-                    this.isMuted = false;
-                    this.isVideoOff = false;
+                    await this.enableLocalMedia(room);
                 } else {
                     this.connectionStatus = 'View-only audience mode';
                     this.isMuted = true;
                     this.isVideoOff = true;
                 }
-                this.connectionStatus = 'Connected';
-                this.syncParticipants();
+
                 this.setupCaptionPipeline();
-                this.room.localParticipant.videoTrackPublications.forEach((pub) => {
-                    if (pub.track) this.attachTrack(pub.track, this.room.localParticipant);
+
+                this.updateParticipantTile(room.localParticipant);
+                room.localParticipant.videoTrackPublications.forEach((pub) => {
+                    if (pub.track && !pub.isMuted && pub.source !== Track.Source.ScreenShare) {
+                        this.attachTrack(pub.track, pub, room.localParticipant);
+                    }
                 });
             } catch (e) {
                 console.error(e);
-                this.connectionStatus = 'Connection failed';
+                this.connectionStatus = this.connectionErrorMessage(e);
             }
         },
 
+        waitForRoomConnected(activeRoom) {
+            if (activeRoom.state === ConnectionState.Connected) {
+                return Promise.resolve();
+            }
+
+            return new Promise((resolve, reject) => {
+                const timeout = setTimeout(() => {
+                    activeRoom.off(RoomEvent.Connected, onConnected);
+                    reject(new Error('Timed out waiting for LiveKit room connection'));
+                }, 20_000);
+
+                const onConnected = () => {
+                    clearTimeout(timeout);
+                    resolve();
+                };
+
+                activeRoom.once(RoomEvent.Connected, onConnected);
+            });
+        },
+
+        async enableLocalMedia(activeRoom, attempts = 3) {
+            for (let attempt = 1; attempt <= attempts; attempt += 1) {
+                try {
+                    await activeRoom.localParticipant.setMicrophoneEnabled(true);
+                    await activeRoom.localParticipant.setCameraEnabled(false);
+                    this.syncLocalMediaState();
+                    this.updateParticipantTile(activeRoom.localParticipant);
+                    this.connectionStatus = 'Connected';
+                    return;
+                } catch (mediaError) {
+                    console.error(mediaError);
+                    const retryable = mediaError?.message?.includes('engine not connected within timeout');
+
+                    if (!retryable || attempt === attempts) {
+                        this.syncLocalMediaState();
+                        this.updateParticipantTile(activeRoom.localParticipant);
+                        this.connectionStatus = this.connectionErrorMessage(mediaError);
+                        return;
+                    }
+
+                    await new Promise((resolve) => setTimeout(resolve, 1000 * attempt));
+                }
+            }
+        },
+
+        syncLocalMediaState() {
+            if (!room) return;
+
+            const local = room.localParticipant;
+            this.isMuted = !local.isMicrophoneEnabled;
+            this.isVideoOff = !local.isCameraEnabled;
+        },
+
+        participantInitials(name) {
+            const parts = (name || '?').trim().split(/\s+/).filter(Boolean);
+            if (parts.length === 0) return '?';
+            if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+
+            return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+        },
+
+        avatarHue(name) {
+            let hash = 0;
+            const value = name || 'guest';
+            for (let i = 0; i < value.length; i += 1) {
+                hash = value.charCodeAt(i) + ((hash << 5) - hash);
+            }
+
+            return Math.abs(hash) % 360;
+        },
+
+        getOrCreateParticipantTile(participant) {
+            const grid = document.getElementById('video-grid');
+            if (!grid) return null;
+
+            const identity = participant.identity;
+            let tile = grid.querySelector(`[data-participant-tile="${identity}"]`);
+
+            if (!tile) {
+                tile = document.createElement('div');
+                tile.dataset.participantTile = identity;
+                tile.className = 'relative aspect-video w-full overflow-hidden rounded-xl bg-slate-900 ring-1 ring-white/10';
+                tile.innerHTML = `
+                    <div data-tile-stage class="absolute inset-0 flex items-center justify-center"></div>
+                    <div data-tile-avatar class="absolute inset-0 flex flex-col items-center justify-center gap-3 px-4">
+                        <div data-tile-avatar-circle class="flex h-20 w-20 items-center justify-center rounded-full text-2xl font-semibold text-white shadow-lg ring-2 ring-white/10"></div>
+                    </div>
+                    <div class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-3 pb-2 pt-8">
+                        <span data-tile-name class="truncate text-xs font-medium text-white"></span>
+                        <div class="flex shrink-0 items-center gap-1.5">
+                            <span data-tile-mic class="hidden rounded-full bg-black/50 p-1 text-red-400" title="Muted">
+                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 0 1 6 0v8.25a3 3 0 0 1-3 3Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m3 3 18 18"/></svg>
+                            </span>
+                            <span data-tile-cam class="hidden rounded-full bg-black/50 p-1 text-slate-300" title="Camera off">
+                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m3 3 18 18"/></svg>
+                            </span>
+                        </div>
+                    </div>`;
+                grid.appendChild(tile);
+            }
+
+            const displayName = participant.name || participant.identity;
+            const hue = this.avatarHue(displayName);
+            const circle = tile.querySelector('[data-tile-avatar-circle]');
+            circle.style.background = `linear-gradient(135deg, hsl(${hue} 45% 42%), hsl(${(hue + 40) % 360} 50% 28%))`;
+            circle.textContent = this.participantInitials(displayName);
+            tile.querySelector('[data-tile-name]').textContent = displayName;
+
+            return tile;
+        },
+
+        isParticipantVideoActive(participant) {
+            if (!participant.isCameraEnabled) return false;
+
+            const publication = Array.from(participant.videoTrackPublications.values())
+                .find((pub) => pub.source !== Track.Source.ScreenShare && pub.track && !pub.isMuted);
+
+            return Boolean(publication?.track);
+        },
+
+        isParticipantMuted(participant) {
+            return !participant.isMicrophoneEnabled;
+        },
+
+        updateParticipantTile(participant) {
+            const tile = this.getOrCreateParticipantTile(participant);
+            if (!tile) return;
+
+            const stage = tile.querySelector('[data-tile-stage]');
+            const avatar = tile.querySelector('[data-tile-avatar]');
+            const micBadge = tile.querySelector('[data-tile-mic]');
+            const camBadge = tile.querySelector('[data-tile-cam]');
+            const hasVideo = this.isParticipantVideoActive(participant);
+
+            micBadge.classList.toggle('hidden', !this.isParticipantMuted(participant));
+            camBadge.classList.toggle('hidden', hasVideo);
+
+            if (hasVideo) {
+                avatar.classList.add('hidden');
+                return;
+            }
+
+            avatar.classList.remove('hidden');
+            stage.innerHTML = '';
+        },
+
+        attachVideoToTile(participant, track) {
+            const tile = this.getOrCreateParticipantTile(participant);
+            if (!tile) return;
+
+            const stage = tile.querySelector('[data-tile-stage]');
+            const avatar = tile.querySelector('[data-tile-avatar]');
+            const camBadge = tile.querySelector('[data-tile-cam]');
+
+            avatar.classList.add('hidden');
+            camBadge.classList.add('hidden');
+            stage.innerHTML = '';
+
+            const el = track.attach();
+            el.className = 'h-full w-full object-cover';
+            el.dataset.participant = participant.identity;
+            stage.appendChild(el);
+        },
+
         setupCaptionPipeline() {
             if (!this.liveCaptions || !this.config.captionUrl) return;
             const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
@@ -196,60 +463,68 @@ function meetRoom() {
             });
         },
 
-        attachTrack(track, participant) {
-            const grid = document.getElementById('video-grid');
-            if (!grid || track.kind !== Track.Kind.Video) return;
+        attachTrack(track, publication, participant) {
+            if (track.kind !== Track.Kind.Video) return;
 
-            const isScreen = track.source === Track.Source.ScreenShare;
-            const container = isScreen ? document.getElementById('screen-share') : grid;
+            const isScreen = publication?.source === Track.Source.ScreenShare
+                || track.source === Track.Source.ScreenShare;
 
             if (isScreen) {
+                const container = document.getElementById('screen-share');
+                if (!container) return;
                 container.classList.remove('hidden');
                 container.innerHTML = '';
-            }
-
-            const el = track.attach();
-            el.className = isScreen
-                ? 'h-full w-full rounded-xl object-contain'
-                : 'aspect-video w-full rounded-xl bg-slate-800 object-cover';
-            el.dataset.participant = participant.identity;
-
-            if (!isScreen) {
-                const wrapper = document.createElement('div');
-                wrapper.className = 'relative overflow-hidden rounded-xl bg-slate-800';
-                const label = document.createElement('span');
-                label.className = 'absolute bottom-2 left-2 rounded bg-black/60 px-2 py-0.5 text-xs';
-                label.textContent = participant.name || participant.identity;
-                wrapper.appendChild(el);
-                wrapper.appendChild(label);
-                container.appendChild(wrapper);
-            } else {
+                const el = track.attach();
+                el.className = 'h-full w-full rounded-xl object-contain';
                 container.appendChild(el);
+                return;
             }
+
+            if (publication?.isMuted) {
+                this.updateParticipantTile(participant);
+                return;
+            }
+
+            this.attachVideoToTile(participant, track);
         },
 
         syncParticipants() {
-            if (!this.room) return;
-            const all = [this.room.localParticipant, ...this.room.remoteParticipants.values()];
+            if (!room) return;
+            const all = [room.localParticipant, ...room.remoteParticipants.values()];
             this.participants = all.map((p) => ({ identity: p.identity, name: p.name }));
+            all.forEach((participant) => this.updateParticipantTile(participant));
         },
 
         async toggleMute() {
-            if (!this.room) return;
-            this.isMuted = !this.isMuted;
-            await this.room.localParticipant.setMicrophoneEnabled(!this.isMuted);
+            if (!room) return;
+            const enabled = room.localParticipant.isMicrophoneEnabled;
+            await room.localParticipant.setMicrophoneEnabled(!enabled);
+            this.syncLocalMediaState();
+            this.updateParticipantTile(room.localParticipant);
         },
 
         async toggleVideo() {
-            if (!this.room) return;
-            this.isVideoOff = !this.isVideoOff;
-            await this.room.localParticipant.setCameraEnabled(!this.isVideoOff);
+            if (!room) return;
+            const enabled = room.localParticipant.isCameraEnabled;
+            await room.localParticipant.setCameraEnabled(!enabled);
+            this.syncLocalMediaState();
+
+            const local = room.localParticipant;
+            const videoPub = Array.from(local.videoTrackPublications.values())
+                .find((pub) => pub.source !== Track.Source.ScreenShare);
+
+            if (!enabled && videoPub?.track) {
+                this.attachTrack(videoPub.track, videoPub, local);
+            } else {
+                videoPub?.track?.detach();
+                this.updateParticipantTile(local);
+            }
         },
 
         async toggleScreenShare() {
-            if (!this.room) return;
+            if (!room) return;
             this.isScreenSharing = !this.isScreenSharing;
-            await this.room.localParticipant.setScreenShareEnabled(this.isScreenSharing);
+            await room.localParticipant.setScreenShareEnabled(this.isScreenSharing);
             if (!this.isScreenSharing) {
                 const screen = document.getElementById('screen-share');
                 if (screen) {
@@ -279,13 +554,14 @@ function meetRoom() {
             if (data.message) this.appendChatMessage(data.message);
         },
 
-        async sendReaction(emoji) {
+        async sendReaction(kind) {
+            const emoji = kind === 'heart' ? '❤️' : '👍';
             await fetch(this.config.reactionUrl, {
                 method: 'POST',
                 headers: this.headers(),
                 body: JSON.stringify({ emoji }),
             });
-            this.showFloatingReaction(emoji);
+            this.showFloatingReaction(kind);
         },
 
         async poll() {
@@ -324,9 +600,9 @@ function meetRoom() {
             container.scrollTop = container.scrollHeight;
         },
 
-        showFloatingReaction(emoji) {
+        showFloatingReaction(kind) {
             const id = Date.now();
-            this.floatingReactions.push({ id, emoji });
+            this.floatingReactions.push({ id, kind });
             setTimeout(() => {
                 this.floatingReactions = this.floatingReactions.filter((r) => r.id !== id);
             }, 2000);

resources/views/meet/room/show.blade.php

@@ -76,7 +76,10 @@
 
                 <div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center gap-2">
                     <template x-for="reaction in floatingReactions" :key="reaction.id">
-                        <span class="animate-bounce text-3xl" x-text="reaction.emoji"></span>
+                        <span class="flex h-10 w-10 animate-bounce items-center justify-center rounded-full bg-slate-800/90 text-sky-300 ring-1 ring-white/20">
+                            <svg x-show="reaction.kind === 'thumbs'" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.25c.806 0 1.533-.278 2.118-.764.585-.486.96-1.15 1.05-1.875.09-.725-.03-1.46-.34-2.115-.31-.655-.8-1.2-1.41-1.56-.61-.36-1.31-.52-2.02-.46-.71.06-1.38.36-1.92.86-.54.5-.92 1.18-1.08 1.92h-.01A4.5 4.5 0 0 0 2.25 12c0 1.59.83 2.99 2.08 3.79.63.4 1.35.61 2.08.61h8.34c.98 0 1.93-.32 2.71-.91.78-.59 1.32-1.42 1.52-2.34l1.14-5.7c.1-.5-.02-1.02-.33-1.42-.31-.4-.78-.63-1.28-.63H9.75"/></svg>
+                            <svg x-show="reaction.kind === 'heart'" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"/></svg>
+                        </span>
                     </template>
                 </div>
             </main>
@@ -103,40 +106,61 @@
         </div>
 
         <footer class="shrink-0 border-t border-slate-800 px-4 py-4">
-            <div class="mx-auto flex max-w-3xl items-center justify-center gap-3">
+            <div class="mx-auto flex max-w-4xl flex-wrap items-center justify-center gap-2 sm:gap-3">
                 <button @click="toggleMute()" type="button"
-                        class="rounded-full p-3"
+                        class="rounded-full p-3 transition-colors"
                         :class="isMuted ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
-                        title="Mute">
-                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 0 1 6 0v8.25a3 3 0 0 1-3 3Z"/></svg>
+                        :title="isMuted ? 'Unmute' : 'Mute'">
+                    <svg x-show="!isMuted" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 0 1 6 0v8.25a3 3 0 0 1-3 3Z"/></svg>
+                    <svg x-show="isMuted" x-cloak class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 0 1 6 0v8.25a3 3 0 0 1-3 3Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m3 3 18 18"/></svg>
                 </button>
                 <button @click="toggleVideo()" type="button"
-                        class="rounded-full p-3"
+                        class="rounded-full p-3 transition-colors"
                         :class="isVideoOff ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
-                        title="Camera">
-                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
+                        :title="isVideoOff ? 'Turn camera on' : 'Turn camera off'">
+                    <svg x-show="!isVideoOff" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
+                    <svg x-show="isVideoOff" x-cloak class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m3 3 18 18"/></svg>
                 </button>
-                <button @click="toggleScreenShare()" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600" title="Share screen">
+                <button @click="toggleScreenShare()" type="button"
+                        class="rounded-full p-3 transition-colors"
+                        :class="isScreenSharing ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
+                        title="Share screen">
                     <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"/></svg>
                 </button>
-                <button @click="raiseHand()" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600" title="Raise hand">✋</button>
-                <button @click="sendReaction('👍')" type="button" class="rounded-full bg-slate-700 px-3 py-3 hover:bg-slate-600">👍</button>
-                <button @click="sendReaction('❤️')" type="button" class="rounded-full bg-slate-700 px-3 py-3 hover:bg-slate-600">❤️</button>
-                <button @click="chatOpen = !chatOpen" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600 lg:hidden" title="Chat">💬</button>
-                <button @click="featuresOpen = !featuresOpen" type="button" class="rounded-full bg-slate-700 px-3 py-3 text-xs hover:bg-slate-600">More</button>
+                <button @click="raiseHand()" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600" title="Raise hand">
+                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.05 4.575a1.575 1.575 0 1 0-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 0 1 3.15 0v1.5m-3.15 3v6.75a1.575 1.575 0 0 0 3.15 0V10.5m-6.3 0H4.875A1.125 1.125 0 0 0 3.75 11.625v4.125c0 .621.504 1.125 1.125 1.125h2.25m8.25-9.75V6.75a1.575 1.575 0 0 1 3.15 0v2.25m-3.15 3v6.75a1.575 1.575 0 0 0 3.15 0V10.5"/></svg>
+                </button>
+                <button @click="sendReaction('thumbs')" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600" title="Applause">
+                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.25c.806 0 1.533-.278 2.118-.764.585-.486.96-1.15 1.05-1.875.09-.725-.03-1.46-.34-2.115-.31-.655-.8-1.2-1.41-1.56-.61-.36-1.31-.52-2.02-.46-.71.06-1.38.36-1.92.86-.54.5-.92 1.18-1.08 1.92h-.01A4.5 4.5 0 0 0 2.25 12c0 1.59.83 2.99 2.08 3.79.63.4 1.35.61 2.08.61h8.34c.98 0 1.93-.32 2.71-.91.78-.59 1.32-1.42 1.52-2.34l1.14-5.7c.1-.5-.02-1.02-.33-1.42-.31-.4-.78-.63-1.28-.63H9.75"/></svg>
+                </button>
+                <button @click="sendReaction('heart')" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600" title="React">
+                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/></svg>
+                </button>
+                <button @click="chatOpen = !chatOpen" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600 lg:hidden" title="Chat">
+                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm3.75 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm3.75 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-8.25 3.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm3.75 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm3.75 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>
+                </button>
+                <button @click="featuresOpen = !featuresOpen" type="button"
+                        class="rounded-full bg-slate-700 px-3 py-3 text-xs font-medium hover:bg-slate-600"
+                        :class="featuresOpen ? 'ring-2 ring-indigo-400' : ''"
+                        title="More options">More</button>
                 <input type="file" id="meet-file-input" class="hidden" @change="uploadFile">
-                <button @click="document.getElementById('meet-file-input').click()" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600" title="Upload file">📎</button>
+                <button @click="document.getElementById('meet-file-input').click()" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600" title="Upload file">
+                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.114-8.962a1.875 1.875 0 1 1-2.652 2.652L8.552 18.32"/></svg>
+                </button>
                 @if ($participant->isHost())
                     <button @click="toggleRecording()" type="button"
-                            class="rounded-full p-3"
+                            class="rounded-full p-3 transition-colors"
                             :class="isRecording ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
-                            title="Record">
-                        <span class="text-xs font-bold">●</span>
+                            :title="isRecording ? 'Stop recording' : 'Start recording'">
+                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/></svg>
                     </button>
                     <button @click="toggleLock()" type="button"
-                            class="rounded-full p-3"
+                            class="rounded-full p-3 transition-colors"
                             :class="isLocked ? 'bg-amber-600 hover:bg-amber-500' : 'bg-slate-700 hover:bg-slate-600'"
-                            title="Lock meeting">🔒</button>
+                            :title="isLocked ? 'Unlock meeting' : 'Lock meeting'">
+                        <svg x-show="!isLocked" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 0 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
+                        <svg x-show="isLocked" x-cloak class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75v-6.75A2.25 2.25 0 0 0 20.25 9.75H3.75A2.25 2.25 0 0 0 1.5 12.75v6.75A2.25 2.25 0 0 0 3.75 21Z"/></svg>
+                    </button>
                 @endif
                 <form method="POST" action="{{ route('meet.room.leave', $session) }}" class="inline">
                     @csrf