import Alpine from 'alpinejs'; import { ConnectionState, Room, RoomEvent, Track } from 'livekit-client'; function readMeetBootState() { const el = document.getElementById('meet-config'); return { isRecording: el?.dataset.recordingActive === '1', isLocked: el?.dataset.locked === '1', }; } function meetRoom() { const boot = readMeetBootState(); // 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; let recordingMediaRecorder = null; let recordingChunks = []; return { isMuted: true, isVideoOff: true, isScreenSharing: false, isRecording: boot.isRecording, isLocked: boot.isLocked, isHost: false, watermark: false, liveCaptions: false, captionText: '', displayName: '', canPublish: true, muteOnJoin: true, videoOffOnJoin: false, audioPlaybackBlocked: false, needsMediaUnlock: false, waitingCount: 0, isWebinar: false, isConference: false, isGreenRoom: false, goingLive: false, presenterRefs: [], audioOnly: false, isSpace: false, qaItems: [], activePolls: [], breakoutBroadcast: '', featuresOpen: false, whiteboardOpen: false, qaInput: '', chatOpen: false, participantsOpen: false, chatInput: '', shareOpen: false, shareCopied: false, breakoutModalOpen: false, breakoutCount: '4', endMeetingConfirmOpen: false, activeRecordingUuid: null, joinUrl: '', passcode: '', roomTitle: '', connectionStatus: 'Connecting…', participants: [], sessionParticipants: [], activeSpeakerIds: [], roomHost: null, floatingReactions: [], pollTimer: null, config: {}, init() { if (initialized) return; initialized = true; const el = document.getElementById('meet-config'); if (!el) return; this.config = { token: el.dataset.token, url: el.dataset.url, configured: el.dataset.configured === '1', pollUrl: el.dataset.pollUrl, endedUrl: el.dataset.endedUrl, chatUrl: el.dataset.chatUrl, reactionUrl: el.dataset.reactionUrl, raiseHandUrl: el.dataset.raiseHandUrl, recordingStartUrl: el.dataset.recordingStartUrl, recordingStopUrl: el.dataset.recordingStopUrl, lockUrl: el.dataset.lockUrl, unlockUrl: el.dataset.unlockUrl, captionUrl: el.dataset.captionUrl, qaUrl: el.dataset.qaUrl, pollsCreateUrl: el.dataset.pollsCreateUrl, breakoutsCreateUrl: el.dataset.breakoutsCreateUrl, breakoutsCloseUrl: el.dataset.breakoutsCloseUrl, breakoutsBroadcastUrl: el.dataset.breakoutsBroadcastUrl, filesUploadUrl: el.dataset.filesUploadUrl, whiteboardUrl: el.dataset.whiteboardUrl, whiteboardSaveUrl: el.dataset.whiteboardSaveUrl, goLiveUrl: el.dataset.goLiveUrl, addPresenterUrl: el.dataset.addPresenterUrl, csrf: el.dataset.csrf, sessionUuid: el.dataset.sessionUuid, }; this.joinUrl = el.dataset.joinUrl || ''; this.passcode = el.dataset.passcode || ''; this.roomTitle = el.dataset.roomTitle || ''; this.isHost = el.dataset.isHost === '1'; this.canPublish = el.dataset.canPublish !== '0'; this.isWebinar = el.dataset.isWebinar === '1'; this.isConference = el.dataset.isConference === '1'; this.isGreenRoom = el.dataset.isGreenRoom === '1'; this.audioOnly = el.dataset.audioOnly === '1'; this.isSpace = el.dataset.isSpace === '1'; this.muteOnJoin = el.dataset.muteOnJoin === '1'; this.videoOffOnJoin = el.dataset.videoOffOnJoin === '1' || this.audioOnly; this.isRecording = el.dataset.recordingActive === '1'; this.isLocked = el.dataset.locked === '1'; this.watermark = el.dataset.watermark === '1'; this.liveCaptions = el.dataset.liveCaptions === '1'; this.displayName = el.dataset.displayName || ''; try { this.presenterRefs = JSON.parse(el.dataset.presenterRefs || '[]'); } catch { this.presenterRefs = []; } try { this.sessionParticipants = JSON.parse(el.dataset.initialParticipants || '[]'); } catch { this.sessionParticipants = []; } this.waitingCount = this.sessionParticipants.filter((p) => p.status === 'waiting').length; try { this.roomHost = JSON.parse(el.dataset.roomHost || 'null'); } catch { this.roomHost = null; } if (this.config.configured && this.config.token) { this.connectLiveKit(); } else { this.connectionStatus = 'Video unavailable — configure LiveKit'; } 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 { await connectPromise; } catch (e) { connectPromise = null; throw e; } }, async startLiveKitSession() { try { room = new Room({ adaptiveStream: true, dynacast: true, disconnectOnPageLeave: true, }); 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); } }); 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) { publication.track?.detach(); 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 && publication.track) { this.attachTrack(publication.track, publication, participant); 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.MediaDevicesError, (error) => { console.error(error); this.needsMediaUnlock = true; this.connectionStatus = this.connectionErrorMessage(error); this.registerAudioUnlockGesture(); }); room.on(RoomEvent.ParticipantConnected, (participant) => { this.attachExistingTracks(participant); this.syncParticipants(); }); room.on(RoomEvent.ParticipantDisconnected, (participant) => { this.removeParticipantTile(participant.identity); this.syncParticipants(); }); room.on(RoomEvent.Disconnected, () => { this.connectionStatus = 'Disconnected'; }); room.on(RoomEvent.AudioPlaybackStatusChanged, () => { this.audioPlaybackBlocked = room ? !room.canPlaybackAudio : false; if (this.audioPlaybackBlocked) { this.connectionStatus = 'Connected — click anywhere to enable audio'; this.registerAudioUnlockGesture(); } else if (this.connectionStatus.includes('enable audio')) { this.connectionStatus = 'Connected'; } }); room.on(RoomEvent.ActiveSpeakersChanged, (speakers) => { this.syncActiveSpeakers(speakers); }); 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.enableLocalMedia(room); } else { this.connectionStatus = this.audioOnly ? 'Listening' : 'View-only audience mode'; this.isMuted = true; this.isVideoOff = true; } await this.ensureAudioPlayback(); this.setupCaptionPipeline(); this.attachExistingTracks(room.localParticipant); room.remoteParticipants.forEach((participant) => this.attachExistingTracks(participant)); this.syncParticipants(); } catch (e) { console.error(e); 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) { const wantMic = !this.muteOnJoin || this.isHost; const wantCamera = !this.videoOffOnJoin && !this.audioOnly; const audioOptions = { echoCancellation: true, noiseSuppression: true, autoGainControl: true, }; for (let attempt = 1; attempt <= attempts; attempt += 1) { let lastError = null; try { if (wantMic && wantCamera) { await activeRoom.localParticipant.enableCameraAndMicrophone(); } else if (wantCamera) { await activeRoom.localParticipant.setCameraEnabled(true); } else if (wantMic) { await activeRoom.localParticipant.setMicrophoneEnabled(true, audioOptions); } } catch (error) { lastError = error; if (wantCamera) { try { await activeRoom.localParticipant.setCameraEnabled(true); } catch (cameraError) { lastError = cameraError; } } if (wantMic) { try { await activeRoom.localParticipant.setMicrophoneEnabled(true, audioOptions); } catch (micError) { lastError = micError; } } } this.syncLocalMediaState(); this.updateParticipantTile(activeRoom.localParticipant); if (wantCamera) { activeRoom.localParticipant.videoTrackPublications.forEach((pub) => { if (pub.track && !pub.isMuted && pub.source !== Track.Source.ScreenShare) { this.attachTrack(pub.track, pub, activeRoom.localParticipant); } }); } const micMissing = wantMic && !activeRoom.localParticipant.isMicrophoneEnabled; const cameraMissing = wantCamera && !activeRoom.localParticipant.isCameraEnabled; if (micMissing) { this.needsMediaUnlock = true; this.connectionStatus = 'Connected — click mic to enable your microphone'; this.registerAudioUnlockGesture(); } else if (cameraMissing && lastError) { this.connectionStatus = this.connectionErrorMessage(lastError); } else { this.needsMediaUnlock = false; this.connectionStatus = 'Connected'; } if (!micMissing && !cameraMissing) { return; } const retryable = lastError?.message?.includes('engine not connected within timeout'); if (!retryable || attempt === attempts) { return; } await new Promise((resolve) => setTimeout(resolve, 1000 * attempt)); } }, async ensureAudioPlayback() { if (!room || room.canPlaybackAudio) { this.audioPlaybackBlocked = false; return; } try { await room.startAudio(); this.audioPlaybackBlocked = false; if (this.connectionStatus.includes('enable audio')) { this.connectionStatus = 'Connected'; } } catch (e) { this.audioPlaybackBlocked = true; this.registerAudioUnlockGesture(); } }, registerAudioUnlockGesture() { if (this._audioUnlockRegistered) return; this._audioUnlockRegistered = true; const unlock = async () => { await this.ensureAudioPlayback(); if (this.needsMediaUnlock) { await this.unlockLocalMicrophone(); } if (!this.audioPlaybackBlocked && !this.needsMediaUnlock) { document.removeEventListener('click', unlock, true); document.removeEventListener('keydown', unlock, true); } }; document.addEventListener('click', unlock, true); document.addEventListener('keydown', unlock, true); }, async unlockAllAudio() { await this.ensureAudioPlayback(); if (this.needsMediaUnlock) { await this.unlockLocalMicrophone(); } }, async unlockLocalMicrophone() { if (!room || !this.canPublish || !this.needsMediaUnlock) { if (room?.localParticipant.isMicrophoneEnabled) { this.needsMediaUnlock = false; } return; } try { await room.localParticipant.setMicrophoneEnabled(true, { echoCancellation: true, noiseSuppression: true, autoGainControl: true, }); this.needsMediaUnlock = false; this.syncLocalMediaState(); this.updateParticipantTile(room.localParticipant); if (this.connectionStatus.includes('microphone') || this.connectionStatus.includes('enable audio')) { this.connectionStatus = 'Connected'; } } catch (error) { console.error(error); this.needsMediaUnlock = true; } }, 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; }, avatarStyle(name) { if (!name) return {}; const hue = this.avatarHue(name); return { background: `linear-gradient(135deg, hsl(${hue} 70% 45%), hsl(${hue} 70% 32%))`, }; }, hostParticipant() { const hosts = this.inCallParticipants().filter((p) => p.role === 'host' || p.role === 'co_host'); if (hosts.length) { return hosts[0]; } if (this.roomHost?.user_ref) { const inCall = this.sessionParticipants.find((p) => p.user_ref === this.roomHost.user_ref); if (inCall) { return inCall; } return this.roomHost; } return null; }, participantCount() { return this.inCallParticipants().length; }, inCallParticipants() { return this.sessionParticipants.filter((p) => p.status === 'joined'); }, waitingParticipants() { return this.sessionParticipants.filter((p) => p.status === 'waiting'); }, sortedParticipants() { const order = { host: 0, co_host: 1, panelist: 2, participant: 3, guest: 4, attendee: 5 }; return [...this.inCallParticipants()].sort((a, b) => { const diff = (order[a.role] ?? 9) - (order[b.role] ?? 9); return diff !== 0 ? diff : a.display_name.localeCompare(b.display_name); }); }, roleLabel(role) { const labels = { host: 'Host', co_host: 'Co-host', panelist: 'Panelist', attendee: 'Attendee', guest: 'Guest', participant: 'Participant', }; return labels[role] || 'Participant'; }, isSpeaking(uuid) { return this.activeSpeakerIds.includes(uuid); }, activeSpeakerNames() { return this.activeSpeakerIds .map((id) => { const person = this.sessionParticipants.find((p) => p.uuid === id); if (person?.display_name) { return person.display_name; } if (room?.localParticipant?.identity === id) { return room.localParticipant.name || 'You'; } return room?.remoteParticipants.get(id)?.name || 'Someone'; }) .filter(Boolean); }, activeSpeakersMessage() { const names = this.activeSpeakerNames(); if (names.length === 0) return ''; if (names.length === 1) return `${names[0]} is speaking`; if (names.length === 2) return `${names[0]} and ${names[1]} are speaking`; const last = names[names.length - 1]; const rest = names.slice(0, -1).join(', '); return `${rest}, and ${last} are speaking`; }, activeSpeakerCount() { return this.activeSpeakerIds.length; }, inCallParticipantsSorted() { return [...this.inCallParticipants()].sort((a, b) => { const aSpeaking = this.isSpeaking(a.uuid); const bSpeaking = this.isSpeaking(b.uuid); if (aSpeaking !== bSpeaking) { return aSpeaking ? -1 : 1; } return a.display_name.localeCompare(b.display_name); }); }, syncActiveSpeakers(speakers) { this.activeSpeakerIds = speakers.map((p) => p.identity); const grid = document.getElementById('video-grid'); if (!grid) return; grid.querySelectorAll('[data-participant-tile]').forEach((tile) => { const identity = tile.dataset.participantTile; const speaking = this.activeSpeakerIds.includes(identity); tile.classList.toggle('meet-tile-speaking', speaking); tile.querySelector('[data-tile-speaking]')?.classList.toggle('hidden', !speaking); }); }, async admitParticipant(uuid) { if (!this.isHost || !this.config.sessionUuid) return; await fetch(`/room/${this.config.sessionUuid}/participants/${uuid}/admit`, { method: 'POST', headers: this.headers(), }); await this.poll(); }, async denyParticipant(uuid) { if (!this.isHost || !this.config.sessionUuid) return; await fetch(`/room/${this.config.sessionUuid}/participants/${uuid}/deny`, { method: 'POST', headers: this.headers(), }); await this.poll(); }, removeParticipantTile(identity) { const grid = document.getElementById('video-grid'); if (!grid || !identity) return; grid.querySelector(`[data-participant-tile="${identity}"]`)?.remove(); }, 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 = this.audioOnly ? 'meet-audio-tile relative flex aspect-square w-full max-w-[9rem] flex-col items-center justify-center overflow-hidden rounded-2xl bg-slate-900' : 'relative aspect-video w-full overflow-hidden rounded-xl bg-slate-900'; tile.innerHTML = `
`; 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; const speaking = this.activeSpeakerIds.includes(identity); tile.classList.toggle('meet-tile-speaking', speaking); tile.querySelector('[data-tile-speaking]')?.classList.toggle('hidden', !speaking); 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 || this.audioOnly); 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; if (room?.localParticipant?.isMicrophoneEnabled) return; const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; if (!SpeechRecognition) return; const recognition = new SpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.onresult = (event) => { const text = event.results[event.results.length - 1][0].transcript.trim(); if (!text) return; this.captionText = text; fetch(this.config.captionUrl, { method: 'POST', headers: this.headers(), body: JSON.stringify({ text }), }).catch(() => {}); }; recognition.onerror = () => {}; try { recognition.start(); } catch (e) { // browser may block without gesture } }, async toggleRecording() { if (!this.isHost) return; if (this.isRecording) { await this.stopServerAndUploadRecording(); } else { await this.startServerRecording(); } }, async startServerRecording() { const res = await fetch(this.config.recordingStartUrl, { method: 'POST', headers: this.headers() }); if (!res.ok) return; const data = await res.json(); this.activeRecordingUuid = data.recording_uuid; if (!this.startClientRecording()) { this.isRecording = false; this.activeRecordingUuid = null; return; } this.isRecording = true; }, startClientRecording() { const stream = this.buildRecordingStream(); if (!stream || typeof MediaRecorder === 'undefined') { return false; } recordingChunks = []; const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9,opus') ? 'video/webm;codecs=vp9,opus' : (MediaRecorder.isTypeSupported('video/webm') ? 'video/webm' : ''); try { recordingMediaRecorder = mimeType ? new MediaRecorder(stream, { mimeType, videoBitsPerSecond: 2_500_000 }) : new MediaRecorder(stream, { videoBitsPerSecond: 2_500_000 }); } catch { return false; } recordingMediaRecorder.ondataavailable = (event) => { if (event.data?.size > 0) { recordingChunks.push(event.data); } }; recordingMediaRecorder.start(1000); return true; }, buildRecordingStream() { if (!room) return null; const screenEl = document.getElementById('screen-share'); const screenVideo = screenEl && !screenEl.classList.contains('hidden') ? screenEl.querySelector('video') : null; const videoSource = screenVideo || document.getElementById('video-grid'); if (!videoSource?.captureStream) { return null; } const videoStream = videoSource.captureStream(25); const tracks = [...videoStream.getVideoTracks(), ...this.collectMeetingAudioTracks()]; return tracks.length ? new MediaStream(tracks) : null; }, collectMeetingAudioTracks() { const tracks = []; const addFromParticipant = (participant) => { participant?.audioTrackPublications?.forEach((publication) => { const mediaTrack = publication.track?.mediaStreamTrack; if (mediaTrack && mediaTrack.readyState === 'live') { tracks.push(mediaTrack); } }); }; if (room?.localParticipant) { addFromParticipant(room.localParticipant); } room?.remoteParticipants?.forEach(addFromParticipant); return tracks; }, async stopServerAndUploadRecording() { const res = await fetch(this.config.recordingStopUrl, { method: 'POST', headers: this.headers() }); const blob = await this.stopClientRecording(); this.isRecording = false; if (!res.ok) { this.activeRecordingUuid = null; return; } const data = await res.json().catch(() => ({})); const recordingUuid = data.recording_uuid || this.activeRecordingUuid; if (blob && recordingUuid) { const uploaded = await this.uploadRecording(blob, recordingUuid); if (!uploaded) { window.alert(`Recording upload failed. Open Recordings and try again, or re-record the ${this.sessionNoun()}.`); } } else if (recordingUuid) { window.alert(`No recording was captured from this ${this.sessionNoun()}. Start recording again while the ${this.sessionNoun()} is live.`); } this.activeRecordingUuid = null; }, stopClientRecording() { return new Promise((resolve) => { const recorder = recordingMediaRecorder; if (!recorder || recorder.state === 'inactive') { recordingMediaRecorder = null; recordingChunks = []; resolve(null); return; } recorder.onstop = () => { const blob = new Blob(recordingChunks, { type: recorder.mimeType || 'video/webm', }); recordingMediaRecorder = null; recordingChunks = []; recorder.stream?.getTracks().forEach((track) => track.stop()); resolve(blob.size > 0 ? blob : null); }; recorder.stop(); }); }, async uploadRecording(blob, recordingUuid) { const form = new FormData(); form.append('recording', blob, `${recordingUuid}.webm`); const res = await fetch(`/room/${this.config.sessionUuid}/recordings/${recordingUuid}/upload`, { method: 'POST', headers: { 'X-CSRF-TOKEN': this.config.csrf, Accept: 'application/json' }, body: form, }); return res.ok; }, async toggleLock() { if (!this.isHost) return; const url = this.isLocked ? this.config.unlockUrl : this.config.lockUrl; const res = await fetch(url, { method: 'POST', headers: this.headers() }); if (res.ok) { this.isLocked = !this.isLocked; } }, async submitQuestion() { const question = this.qaInput.trim(); if (!question || !this.config.qaUrl) return; this.qaInput = ''; await fetch(this.config.qaUrl, { method: 'POST', headers: this.headers(), body: JSON.stringify({ question }), }); }, async createBreakouts() { if (!this.isHost || !this.config.breakoutsCreateUrl) return; this.breakoutCount = '4'; this.breakoutModalOpen = true; this.featuresOpen = false; }, async submitBreakouts() { if (!this.isHost || !this.config.breakoutsCreateUrl) return; const count = parseInt(this.breakoutCount, 10); if (!count || count < 1) return; await fetch(this.config.breakoutsCreateUrl, { method: 'POST', headers: this.headers(), body: JSON.stringify({ count }), }); this.breakoutModalOpen = false; }, async closeBreakouts() { if (!this.isHost || !this.config.breakoutsCloseUrl) return; await fetch(this.config.breakoutsCloseUrl, { method: 'POST', headers: this.headers() }); this.featuresOpen = false; }, openUploadPicker() { document.getElementById('meet-file-input')?.click(); this.featuresOpen = false; }, async toggleRecordingFromMenu() { await this.toggleRecording(); this.featuresOpen = false; }, async toggleLockFromMenu() { await this.toggleLock(); this.featuresOpen = false; }, openEndMeetingConfirm() { this.endMeetingConfirmOpen = true; }, submitEndMeeting() { if (this.isRecording) { this.stopServerAndUploadRecording().finally(() => { document.getElementById('meet-end-form')?.requestSubmit(); }); } else { document.getElementById('meet-end-form')?.requestSubmit(); } this.endMeetingConfirmOpen = false; }, async uploadFile(event) { const file = event.target.files?.[0]; if (!file || !this.config.filesUploadUrl) return; const form = new FormData(); form.append('file', file); await fetch(this.config.filesUploadUrl, { method: 'POST', headers: { 'X-CSRF-TOKEN': this.config.csrf, Accept: 'application/json' }, body: form, }); }, attachExistingTracks(participant) { if (!participant) return; const isLocal = room && participant === room.localParticipant; if (!isLocal) { participant.audioTrackPublications.forEach((pub) => { if (pub.track) { this.attachTrack(pub.track, pub, participant); } }); } participant.videoTrackPublications.forEach((pub) => { if (this.audioOnly) return; if (pub.track && !pub.isMuted && pub.source !== Track.Source.ScreenShare) { this.attachTrack(pub.track, pub, participant); } }); this.updateParticipantTile(participant); }, attachTrack(track, publication, participant) { if (track.kind === Track.Kind.Audio) { if (participant === room?.localParticipant) return; const element = track.attach(); element.className = 'meet-remote-audio'; element.style.display = 'none'; if (!element.parentElement) { document.body.appendChild(element); } element.play().catch(() => { this.audioPlaybackBlocked = true; this.registerAudioUnlockGesture(); }); this.ensureAudioPlayback(); return; } if (track.kind !== Track.Kind.Video) return; if (this.audioOnly) { this.updateParticipantTile(participant); return; } 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 = '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 (!room) return; const all = [room.localParticipant, ...room.remoteParticipants.values()]; const activeIdentities = new Set(all.map((p) => p.identity)); this.participants = all.map((p) => ({ identity: p.identity, name: p.name })); all.forEach((participant) => this.updateParticipantTile(participant)); const grid = document.getElementById('video-grid'); if (!grid) return; grid.querySelectorAll('[data-participant-tile]').forEach((tile) => { if (!activeIdentities.has(tile.dataset.participantTile)) { tile.remove(); } }); this.syncActiveSpeakers(room.activeSpeakers ?? []); }, pruneTilesFromSession() { const joinedIds = new Set( this.sessionParticipants .filter((p) => p.status === 'joined') .map((p) => p.uuid), ); const grid = document.getElementById('video-grid'); if (!grid) return; grid.querySelectorAll('[data-participant-tile]').forEach((tile) => { const identity = tile.dataset.participantTile; if (room?.localParticipant?.identity === identity) return; if (!joinedIds.has(identity)) { tile.remove(); } }); }, async toggleMute() { if (!room) return; await this.ensureAudioPlayback(); const enabled = room.localParticipant.isMicrophoneEnabled; if (enabled) { await room.localParticipant.setMicrophoneEnabled(false); } else { try { await room.localParticipant.setMicrophoneEnabled(true, { echoCancellation: true, noiseSuppression: true, autoGainControl: true, }); this.needsMediaUnlock = false; } catch (error) { console.error(error); this.connectionStatus = this.connectionErrorMessage(error); this.needsMediaUnlock = true; return; } } this.syncLocalMediaState(); this.updateParticipantTile(room.localParticipant); }, async toggleVideo() { if (!room || this.audioOnly) return; await this.ensureAudioPlayback(); 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 (!room || this.audioOnly) return; this.isScreenSharing = !this.isScreenSharing; await room.localParticipant.setScreenShareEnabled(this.isScreenSharing); if (!this.isScreenSharing) { const screen = document.getElementById('screen-share'); if (screen) { screen.classList.add('hidden'); screen.innerHTML = ''; } } }, async raiseHand() { await fetch(this.config.raiseHandUrl, { method: 'POST', headers: this.headers(), }); }, async goLive() { if (!this.config.goLiveUrl || this.goingLive) { return; } this.goingLive = true; try { const res = await fetch(this.config.goLiveUrl, { method: 'POST', headers: this.headers(), }); if (!res.ok) { throw new Error('Go live failed'); } const data = await res.json(); window.location.href = data.room_url || `/room/${data.session_uuid}`; } catch { this.goingLive = false; } }, async makeSpeaker(userRef) { if (!this.config.addPresenterUrl || !userRef) { return; } const res = await fetch(this.config.addPresenterUrl, { method: 'POST', headers: this.headers(), body: JSON.stringify({ user_ref: userRef }), }); if (! res.ok) { return; } const data = await res.json(); this.presenterRefs = data.presenter_refs || this.presenterRefs; this.sessionParticipants = this.sessionParticipants.map((person) => ( person.user_ref === userRef ? { ...person, role: 'panelist' } : person )); }, toggleChat() { this.chatOpen = !this.chatOpen; if (this.chatOpen) { this.participantsOpen = false; this.featuresOpen = false; this.shareOpen = false; } }, toggleParticipants() { this.participantsOpen = !this.participantsOpen; if (this.participantsOpen) { this.chatOpen = false; this.featuresOpen = false; this.shareOpen = false; } }, toggleFeatures() { this.featuresOpen = !this.featuresOpen; if (this.featuresOpen) { this.chatOpen = false; this.participantsOpen = false; this.shareOpen = false; } }, async openShare() { const useNativeShare = navigator.share && this.joinUrl && window.matchMedia('(max-width: 767px)').matches; if (useNativeShare) { try { await navigator.share({ title: this.roomTitle || 'Ladill Meet', text: `Join my ${this.sessionNoun()} on Ladill Meet`, url: this.joinUrl, }); return; } catch (e) { // User cancelled or native share failed — fall through to copy-link panel. } } this.shareOpen = true; this.shareCopied = false; this.participantsOpen = false; this.chatOpen = false; this.featuresOpen = false; }, async copyJoinLink() { if (!this.joinUrl) return; try { await navigator.clipboard.writeText(this.joinUrl); this.shareCopied = true; setTimeout(() => { this.shareCopied = false; }, 2000); } catch (e) { console.error(e); } }, async sendChat() { const body = this.chatInput.trim(); if (!body) return; this.chatInput = ''; const res = await fetch(this.config.chatUrl, { method: 'POST', headers: this.headers(), body: JSON.stringify({ body }), }); const data = await res.json(); if (data.message) this.appendChatMessage(data.message); }, async sendReaction(kind) { const emoji = kind === 'heart' ? '❤️' : '👍'; await fetch(this.config.reactionUrl, { method: 'POST', headers: this.headers(), body: JSON.stringify({ emoji }), }); this.showFloatingReaction(kind); }, async poll() { try { const res = await fetch(this.config.pollUrl, { headers: { Accept: 'application/json' } }); if (!res.ok) { if (res.status === 404 && this.config.endedUrl) { this.redirectToMeetingEnded(this.config.endedUrl); } return; } const data = await res.json(); if (data.ended && data.redirect) { this.redirectToMeetingEnded(data.redirect); return; } if (data.participants) { this.sessionParticipants = data.participants; this.pruneTilesFromSession(); } if (typeof data.waiting_count === 'number') { const previous = this.waitingCount; this.waitingCount = data.waiting_count; if (this.isHost && data.waiting_count > previous) { this.participantsOpen = true; } } this.updateChatFromPoll(data.messages || []); this.qaItems = data.qa || []; this.activePolls = data.polls || []; if (data.broadcasts?.length) { this.breakoutBroadcast = data.broadcasts[0].body; } } catch (e) { // ignore poll errors } }, sessionNoun() { return this.isConference ? 'conference' : 'meeting'; }, sessionNounTitle() { return this.isConference ? 'Conference' : 'Meeting'; }, redirectToMeetingEnded(url) { if (this.pollTimer) { clearInterval(this.pollTimer); this.pollTimer = null; } if (room) { room.disconnect().catch(() => {}); } window.location.href = url; }, updateChatFromPoll(messages) { const container = document.getElementById('chat-messages'); if (!container) return; const existing = new Set([...container.querySelectorAll('[data-uuid]')].map((el) => el.dataset.uuid)); messages.forEach((m) => { if (!existing.has(m.uuid)) this.appendChatMessage(m); }); }, appendChatMessage(message) { const container = document.getElementById('chat-messages'); if (!container) return; const isOwn = message.sender_name === this.displayName; const div = document.createElement('div'); div.className = `meet-chat-bubble${isOwn ? ' meet-chat-bubble--own' : ''}`; div.dataset.uuid = message.uuid; const time = message.created_at ? new Date(message.created_at).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) : ''; div.innerHTML = `
${isOwn ? '' : `

${this.escape(message.sender_name)}

`}

${this.escape(message.body)}

${this.escape(time)}

`; container.appendChild(div); container.scrollTop = container.scrollHeight; }, showFloatingReaction(kind) { const id = Date.now(); this.floatingReactions.push({ id, kind }); setTimeout(() => { this.floatingReactions = this.floatingReactions.filter((r) => r.id !== id); }, 2000); }, headers() { return { 'Content-Type': 'application/json', Accept: 'application/json', 'X-CSRF-TOKEN': this.config.csrf, 'X-Requested-With': 'XMLHttpRequest', }; }, escape(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; }, }; } window.meetRoom = meetRoom; Alpine.data('meetRoom', meetRoom); Alpine.start();