isaaccladandCursor
c51e59945e
Deploy Ladill Meet / deploy (push) Successful in 1m3s
Block breakouts, chat, Q&A, and other meeting-only tools in spaces, hide video controls for audio-only rooms, and stabilize mobile nav and toolbar layout. Co-authored-by: Cursor <cursoragent@cursor.com>
2810 lines
100 KiB
JavaScript
2810 lines
100 KiB
JavaScript
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 = [];
|
|
let seenReactionKeys = new Set();
|
|
let applauseClapTimes = [];
|
|
let applauseAudio = null;
|
|
let lastApplauseSoundAt = 0;
|
|
|
|
const APPLAUSE_WINDOW_MS = 4000;
|
|
const APPLAUSE_MIN_CLAPPERS = 2;
|
|
const APPLAUSE_SOUND_COOLDOWN_MS = 3000;
|
|
const APPLAUSE_EMOJIS = new Set(['👍', '👏', '🙌']);
|
|
|
|
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,
|
|
sessionNounLabel: '',
|
|
isGreenRoom: false,
|
|
goingLive: false,
|
|
presenterRefs: [],
|
|
audioOnly: false,
|
|
audioOnlyPublish: false,
|
|
usesSpeakAccess: false,
|
|
canManageSpeak: false,
|
|
speakGranted: false,
|
|
speakRequested: false,
|
|
isSpace: false,
|
|
usesStageLayout: false,
|
|
panelDiscussions: false,
|
|
stageLayout: 'plenary',
|
|
panels: [],
|
|
activePanelId: '',
|
|
spotlightSpeakerRef: '',
|
|
panelSetupOpen: false,
|
|
savingStageLayout: false,
|
|
_stageSnapshot: null,
|
|
qaItems: [],
|
|
activePolls: [],
|
|
breakoutBroadcast: '',
|
|
breakoutBroadcastInput: '',
|
|
inBreakout: false,
|
|
breakoutsActive: false,
|
|
activeBreakouts: [],
|
|
assignedBreakoutRoomId: null,
|
|
breakoutRoomName: '',
|
|
breakoutClosesAt: '',
|
|
sidebarPanel: null,
|
|
whiteboardOpen: false,
|
|
qaInput: '',
|
|
chatInput: '',
|
|
shareOpen: false,
|
|
shareCopied: false,
|
|
breakoutModalOpen: false,
|
|
breakoutCount: '4',
|
|
endMeetingConfirmOpen: false,
|
|
activeRecordingUuid: null,
|
|
joinUrl: '',
|
|
passcode: '',
|
|
roomTitle: '',
|
|
connectionStatus: 'Connecting…',
|
|
participants: [],
|
|
sessionParticipants: [],
|
|
activeSpeakerIds: [],
|
|
roomHost: null,
|
|
floatingReactions: [],
|
|
reactionsInitialized: false,
|
|
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,
|
|
speakRequestUrl: el.dataset.speakRequestUrl,
|
|
speakCancelUrl: el.dataset.speakCancelUrl,
|
|
speakGrantUrl: el.dataset.speakGrantUrl,
|
|
speakRevokeUrl: el.dataset.speakRevokeUrl,
|
|
speakDismissUrl: el.dataset.speakDismissUrl,
|
|
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,
|
|
breakoutsReturnUrl: el.dataset.breakoutsReturnUrl,
|
|
breakoutsBroadcastUrl: el.dataset.breakoutsBroadcastUrl,
|
|
mediaTokenUrl: el.dataset.mediaTokenUrl,
|
|
filesUploadUrl: el.dataset.filesUploadUrl,
|
|
whiteboardUrl: el.dataset.whiteboardUrl,
|
|
whiteboardSaveUrl: el.dataset.whiteboardSaveUrl,
|
|
goLiveUrl: el.dataset.goLiveUrl,
|
|
addPresenterUrl: el.dataset.addPresenterUrl,
|
|
stageUpdateUrl: el.dataset.stageUpdateUrl,
|
|
csrf: el.dataset.csrf,
|
|
sessionUuid: el.dataset.sessionUuid,
|
|
};
|
|
|
|
this.joinUrl = el.dataset.joinUrl || '';
|
|
this.passcode = el.dataset.passcode || '';
|
|
this.roomTitle = el.dataset.roomTitle || '';
|
|
|
|
this.initApplauseAudio(el.dataset.applauseAudio || '');
|
|
|
|
this.isHost = el.dataset.isHost === '1';
|
|
this.config.participantUuid = el.dataset.participant || '';
|
|
this.canPublish = el.dataset.canPublish !== '0';
|
|
this.audioOnlyPublish = el.dataset.audioOnlyPublish === '1';
|
|
this.usesSpeakAccess = el.dataset.usesSpeakAccess === '1';
|
|
this.canManageSpeak = el.dataset.canManageSpeak === '1';
|
|
this.speakGranted = el.dataset.speakGranted === '1';
|
|
this.speakRequested = el.dataset.speakRequested === '1';
|
|
this.inBreakout = el.dataset.inBreakout === '1';
|
|
this.isWebinar = el.dataset.isWebinar === '1';
|
|
this.isConference = el.dataset.isConference === '1';
|
|
this.sessionNounLabel = el.dataset.sessionNoun || '';
|
|
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.activeRecordingUuid = el.dataset.activeRecordingUuid || null;
|
|
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 = [];
|
|
}
|
|
|
|
this.usesStageLayout = el.dataset.usesStageLayout === '1';
|
|
this.panelDiscussions = el.dataset.panelDiscussions === '1';
|
|
this.stageLayout = el.dataset.stageLayout || 'plenary';
|
|
this.activePanelId = el.dataset.activePanelId || '';
|
|
this.spotlightSpeakerRef = el.dataset.spotlightSpeakerRef || '';
|
|
|
|
try {
|
|
this.panels = JSON.parse(el.dataset.panels || '[]');
|
|
} catch {
|
|
this.panels = [];
|
|
}
|
|
|
|
if (!this.panelDiscussions && this.stageLayout === 'panel') {
|
|
this.stageLayout = 'plenary';
|
|
}
|
|
|
|
try {
|
|
this.sessionParticipants = JSON.parse(el.dataset.initialParticipants || '[]');
|
|
} catch {
|
|
this.sessionParticipants = [];
|
|
}
|
|
|
|
this.waitingCount = this.sessionParticipants.filter((p) => p.status === 'waiting').length;
|
|
|
|
const selfParticipant = this.sessionParticipants.find((p) => p.uuid === this.config.participantUuid);
|
|
this.assignedBreakoutRoomId = selfParticipant?.breakout_room_id ?? null;
|
|
|
|
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);
|
|
this.applyStageLayout();
|
|
|
|
this.$nextTick(() => {
|
|
document.querySelector('.meet-toolbar__track')?.classList.add('is-ready');
|
|
});
|
|
},
|
|
|
|
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.syncParticipants();
|
|
|
|
if (this.canPublish) {
|
|
await this.enableLocalMedia(room);
|
|
} else {
|
|
this.isMuted = true;
|
|
this.isVideoOff = true;
|
|
}
|
|
|
|
await this.ensureAudioPlayback();
|
|
|
|
this.setupCaptionPipeline();
|
|
|
|
this.attachExistingTracks(room.localParticipant);
|
|
room.remoteParticipants.forEach((participant) => this.attachExistingTracks(participant));
|
|
this.syncParticipants();
|
|
|
|
await this.maybeStartAutoRecording();
|
|
} 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.inBreakout ? !this.muteOnJoin : (!this.muteOnJoin || this.isHost);
|
|
const wantCamera = !this.videoOffOnJoin && !this.audioOnly && !this.audioOnlyPublish;
|
|
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%))`,
|
|
};
|
|
},
|
|
|
|
participantForIdentity(identity) {
|
|
return this.sessionParticipants.find((entry) => entry.uuid === identity);
|
|
},
|
|
|
|
displayNameForParticipant(participant) {
|
|
const person = this.participantForIdentity(participant.identity);
|
|
|
|
return person?.display_name || participant.name || participant.identity;
|
|
},
|
|
|
|
avatarUrlForPerson(person) {
|
|
if (!person) {
|
|
return null;
|
|
}
|
|
|
|
if (person.avatar_url) {
|
|
return person.avatar_url;
|
|
}
|
|
|
|
if (['host', 'co_host'].includes(person.role) && this.roomHost?.avatar_url) {
|
|
return this.roomHost.avatar_url;
|
|
}
|
|
|
|
if (this.roomHost?.user_ref && person.user_ref === this.roomHost.user_ref && this.roomHost.avatar_url) {
|
|
return this.roomHost.avatar_url;
|
|
}
|
|
|
|
return null;
|
|
},
|
|
|
|
avatarUrlForParticipant(participant) {
|
|
return this.avatarUrlForPerson(this.participantForIdentity(participant.identity));
|
|
},
|
|
|
|
updateTileAvatarCircle(tile, participant) {
|
|
const circle = tile.querySelector('[data-tile-avatar-circle]');
|
|
if (!circle) {
|
|
return;
|
|
}
|
|
|
|
const displayName = this.displayNameForParticipant(participant);
|
|
const avatarUrl = this.avatarUrlForParticipant(participant);
|
|
const isAudioTile = tile.classList.contains('meet-audio-tile');
|
|
const sizeClass = isAudioTile ? 'h-[4.5rem] w-[4.5rem] text-xl' : 'h-20 w-20 text-2xl';
|
|
|
|
circle.replaceChildren();
|
|
|
|
if (avatarUrl) {
|
|
circle.className = `flex ${sizeClass} shrink-0 items-center justify-center overflow-hidden rounded-full shadow-lg`;
|
|
circle.style.background = '';
|
|
|
|
const img = document.createElement('img');
|
|
img.src = avatarUrl;
|
|
img.alt = '';
|
|
img.className = 'h-full w-full object-cover';
|
|
circle.appendChild(img);
|
|
|
|
return;
|
|
}
|
|
|
|
const hue = this.avatarHue(displayName);
|
|
circle.className = `flex ${sizeClass} shrink-0 items-center justify-center rounded-full font-semibold text-white shadow-lg`;
|
|
circle.style.background = `linear-gradient(135deg, hsl(${hue} 45% 42%), hsl(${(hue + 40) % 360} 50% 28%))`;
|
|
circle.textContent = this.participantInitials(displayName);
|
|
},
|
|
|
|
refreshParticipantTileAvatars() {
|
|
if (!room) {
|
|
return;
|
|
}
|
|
|
|
[room.localParticipant, ...room.remoteParticipants.values()].forEach((participant) => {
|
|
const tile = this.findParticipantTile(participant.identity);
|
|
if (tile) {
|
|
this.updateTileAvatarCircle(tile, participant);
|
|
tile.querySelector('[data-tile-name]')?.replaceChildren(
|
|
document.createTextNode(this.displayNameForParticipant(participant)),
|
|
);
|
|
}
|
|
});
|
|
},
|
|
|
|
isSpeakerPerson(person) {
|
|
if (!person) return false;
|
|
|
|
if (['host', 'co_host', 'panelist'].includes(person.role)) {
|
|
return true;
|
|
}
|
|
|
|
return Boolean(person.user_ref && this.presenterRefs.includes(person.user_ref));
|
|
},
|
|
|
|
/** Stable key for spotlight and panel assignment (user_ref when logged in, else participant uuid). */
|
|
spotlightKey(person) {
|
|
if (!person) {
|
|
return '';
|
|
}
|
|
|
|
return person.user_ref || person.uuid || '';
|
|
},
|
|
|
|
matchesSpotlightKey(key, person) {
|
|
if (!key || !person) {
|
|
return false;
|
|
}
|
|
|
|
return key === person.user_ref || key === person.uuid;
|
|
},
|
|
|
|
findSpeakerBySpotlightKey(key) {
|
|
if (!key) {
|
|
return null;
|
|
}
|
|
|
|
return this.speakerParticipants().find((person) => this.matchesSpotlightKey(key, person)) || null;
|
|
},
|
|
|
|
speakerParticipants() {
|
|
return this.inCallParticipants().filter((person) => this.isSpeakerPerson(person));
|
|
},
|
|
|
|
speakerParticipantsSorted() {
|
|
const order = { host: 0, co_host: 1, panelist: 2 };
|
|
|
|
return [...this.speakerParticipants()].sort((a, b) => {
|
|
const aSpeaking = this.isSpeaking(a.uuid);
|
|
const bSpeaking = this.isSpeaking(b.uuid);
|
|
|
|
if (aSpeaking !== bSpeaking) {
|
|
return aSpeaking ? -1 : 1;
|
|
}
|
|
|
|
const roleDiff = (order[a.role] ?? 9) - (order[b.role] ?? 9);
|
|
if (roleDiff !== 0) {
|
|
return roleDiff;
|
|
}
|
|
|
|
return a.display_name.localeCompare(b.display_name);
|
|
});
|
|
},
|
|
|
|
speakerCount() {
|
|
return this.speakerParticipants().length;
|
|
},
|
|
|
|
audienceParticipants() {
|
|
return this.inCallParticipants().filter((person) => !this.isSpeakerPerson(person));
|
|
},
|
|
|
|
audienceParticipantsSorted() {
|
|
return [...this.audienceParticipants()].sort((a, b) => a.display_name.localeCompare(b.display_name));
|
|
},
|
|
|
|
resolveSpotlightParticipantUuid() {
|
|
const spotlightKey = this.resolveSpotlightKey();
|
|
if (spotlightKey) {
|
|
const match = this.findSpeakerBySpotlightKey(spotlightKey);
|
|
if (match) {
|
|
return match.uuid;
|
|
}
|
|
}
|
|
|
|
return this.speakerParticipantsSorted()[0]?.uuid || null;
|
|
},
|
|
|
|
plenaryStripParticipants() {
|
|
const spotlightUuid = this.resolveSpotlightParticipantUuid();
|
|
|
|
return this.inCallParticipants()
|
|
.filter((person) => person.uuid !== spotlightUuid)
|
|
.sort((a, b) => this.compareStripParticipants(a, b));
|
|
},
|
|
|
|
panelStripParticipants() {
|
|
const onPanelKeys = new Set(this.getActivePanelSpeakerKeys());
|
|
|
|
return this.inCallParticipants()
|
|
.filter((person) => {
|
|
if (!this.isSpeakerPerson(person)) {
|
|
return true;
|
|
}
|
|
|
|
const key = this.spotlightKey(person);
|
|
|
|
return !key || !onPanelKeys.has(key);
|
|
})
|
|
.sort((a, b) => this.compareStripParticipants(a, b));
|
|
},
|
|
|
|
compareStripParticipants(a, b) {
|
|
const aSpeaker = this.isSpeakerPerson(a);
|
|
const bSpeaker = this.isSpeakerPerson(b);
|
|
|
|
if (aSpeaker !== bSpeaker) {
|
|
return aSpeaker ? -1 : 1;
|
|
}
|
|
|
|
return a.display_name.localeCompare(b.display_name);
|
|
},
|
|
|
|
stripParticipants() {
|
|
if (this.stageLayout === 'panel') {
|
|
return this.panelStripParticipants();
|
|
}
|
|
|
|
return this.plenaryStripParticipants();
|
|
},
|
|
|
|
createStripInitials(person) {
|
|
const initials = document.createElement('span');
|
|
initials.className = 'meet-audience-avatar__initials';
|
|
initials.style.background = this.avatarStyle(person.display_name).background;
|
|
initials.textContent = this.participantInitials(person.display_name);
|
|
|
|
return initials;
|
|
},
|
|
|
|
appendStripAvatarItem(strip, person, index, total) {
|
|
const item = document.createElement('div');
|
|
item.className = 'meet-audience-avatar';
|
|
if (this.isSpeakerPerson(person)) {
|
|
item.classList.add('meet-audience-avatar--speaker');
|
|
}
|
|
item.style.zIndex = String(total - index);
|
|
item.title = person.display_name;
|
|
|
|
const avatarUrl = this.avatarUrlForPerson(person);
|
|
|
|
if (avatarUrl) {
|
|
const img = document.createElement('img');
|
|
img.src = avatarUrl;
|
|
img.alt = '';
|
|
img.className = 'meet-audience-avatar__image';
|
|
img.addEventListener('error', () => {
|
|
img.replaceWith(this.createStripInitials(person));
|
|
}, { once: true });
|
|
item.appendChild(img);
|
|
} else {
|
|
item.appendChild(this.createStripInitials(person));
|
|
}
|
|
|
|
strip.appendChild(item);
|
|
},
|
|
|
|
resolveSpotlightKey() {
|
|
const speakers = this.speakerParticipants();
|
|
|
|
if (this.spotlightSpeakerRef) {
|
|
const match = this.findSpeakerBySpotlightKey(this.spotlightSpeakerRef);
|
|
if (match) {
|
|
return this.spotlightKey(match);
|
|
}
|
|
}
|
|
|
|
const fallback = this.speakerParticipantsSorted()[0];
|
|
|
|
return fallback ? this.spotlightKey(fallback) : '';
|
|
},
|
|
|
|
getActivePanelSpeakerKeys() {
|
|
if (!this.panelDiscussions || this.stageLayout !== 'panel') {
|
|
return this.speakerParticipants()
|
|
.map((person) => this.spotlightKey(person))
|
|
.filter(Boolean);
|
|
}
|
|
|
|
if (!this.activePanelId) {
|
|
return this.speakerParticipants()
|
|
.map((person) => this.spotlightKey(person))
|
|
.filter(Boolean);
|
|
}
|
|
|
|
const panel = this.panels.find((entry) => entry.id === this.activePanelId);
|
|
|
|
return panel?.speaker_refs || [];
|
|
},
|
|
|
|
mergeStageConfig(data) {
|
|
const editingStage = this.panelSetupOpen;
|
|
|
|
if (!editingStage) {
|
|
if (typeof data.stage_layout === 'string') {
|
|
this.stageLayout = data.stage_layout;
|
|
}
|
|
if (Array.isArray(data.panels)) {
|
|
this.panels = data.panels;
|
|
}
|
|
if (data.active_panel_id !== undefined) {
|
|
this.activePanelId = data.active_panel_id || '';
|
|
}
|
|
}
|
|
|
|
if (typeof data.panel_discussions === 'boolean') {
|
|
this.panelDiscussions = data.panel_discussions;
|
|
}
|
|
if (data.spotlight_speaker_ref !== undefined) {
|
|
this.spotlightSpeakerRef = data.spotlight_speaker_ref || '';
|
|
}
|
|
|
|
if (!this.panelDiscussions && this.stageLayout === 'panel') {
|
|
this.stageLayout = 'plenary';
|
|
}
|
|
},
|
|
|
|
findParticipantTile(identity) {
|
|
return document.querySelector(`[data-participant-tile="${identity}"]`);
|
|
},
|
|
|
|
getTileContainerForIdentity(identity) {
|
|
if (!this.usesStageLayout) {
|
|
return document.getElementById('video-grid');
|
|
}
|
|
|
|
const person = this.sessionParticipants.find((entry) => entry.uuid === identity);
|
|
const spotlight = document.getElementById('meet-stage-spotlight');
|
|
const grid = document.getElementById('video-grid');
|
|
|
|
if (this.stageLayout === 'plenary') {
|
|
if (!this.isSpeakerPerson(person)) {
|
|
return null;
|
|
}
|
|
|
|
const spotlightKey = this.resolveSpotlightKey();
|
|
if (spotlightKey && this.matchesSpotlightKey(spotlightKey, person)) {
|
|
return spotlight;
|
|
}
|
|
|
|
if (!spotlightKey && this.speakerParticipantsSorted()[0]?.uuid === identity) {
|
|
return spotlight;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
if (this.stageLayout === 'panel') {
|
|
if (!this.isSpeakerPerson(person)) {
|
|
return null;
|
|
}
|
|
|
|
const keys = this.getActivePanelSpeakerKeys();
|
|
const personKey = this.spotlightKey(person);
|
|
if (!personKey || !keys.includes(personKey)) {
|
|
return null;
|
|
}
|
|
|
|
return grid;
|
|
}
|
|
|
|
return grid;
|
|
},
|
|
|
|
renderAudienceStrip() {
|
|
const strip = document.getElementById('meet-audience-strip');
|
|
if (!strip) return;
|
|
|
|
strip.replaceChildren();
|
|
|
|
if (!this.usesStageLayout) {
|
|
return;
|
|
}
|
|
|
|
const audience = this.stripParticipants();
|
|
if (audience.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const maxVisible = 12;
|
|
const visible = audience.slice(0, maxVisible);
|
|
const overflow = audience.length - visible.length;
|
|
|
|
visible.forEach((person, index) => {
|
|
this.appendStripAvatarItem(strip, person, index, visible.length);
|
|
});
|
|
|
|
if (overflow > 0) {
|
|
const more = document.createElement('div');
|
|
more.className = 'meet-audience-avatar meet-audience-avatar--more';
|
|
more.style.zIndex = '0';
|
|
more.textContent = `+${overflow} others`;
|
|
strip.appendChild(more);
|
|
}
|
|
},
|
|
|
|
applyStageLayout() {
|
|
if (!this.usesStageLayout) {
|
|
document.getElementById('meet-stage-spotlight')?.replaceChildren();
|
|
document.getElementById('meet-audience-strip')?.replaceChildren();
|
|
return;
|
|
}
|
|
|
|
const spotlight = document.getElementById('meet-stage-spotlight');
|
|
const grid = document.getElementById('video-grid');
|
|
|
|
if (room) {
|
|
const all = [room.localParticipant, ...room.remoteParticipants.values()];
|
|
all.forEach((participant) => {
|
|
const target = this.getTileContainerForIdentity(participant.identity);
|
|
if (!target) {
|
|
this.removeParticipantTile(participant.identity);
|
|
return;
|
|
}
|
|
|
|
const existingTile = this.findParticipantTile(participant.identity);
|
|
const previousParent = existingTile?.parentElement ?? null;
|
|
const tile = this.getOrCreateParticipantTile(participant);
|
|
if (!tile) {
|
|
return;
|
|
}
|
|
|
|
const isSpotlightTile = target === spotlight;
|
|
|
|
tile.classList.toggle('meet-stage-spotlight-tile', isSpotlightTile);
|
|
tile.classList.toggle('meet-stage-panel-tile', target === grid && this.stageLayout === 'panel');
|
|
tile.classList.toggle('aspect-video', !isSpotlightTile && !this.audioOnly);
|
|
tile.classList.toggle('rounded-xl', !isSpotlightTile && !this.audioOnly);
|
|
|
|
if (!existingTile || previousParent !== target) {
|
|
this.reattachParticipantVideo(participant);
|
|
} else {
|
|
this.updateParticipantTile(participant);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (grid) {
|
|
grid.dataset.panelCount = String(this.getActivePanelSpeakerKeys().length || this.speakerCount());
|
|
}
|
|
|
|
this.renderAudienceStrip();
|
|
},
|
|
|
|
async saveStageLayout() {
|
|
if (!this.config.stageUpdateUrl || this.savingStageLayout) {
|
|
return;
|
|
}
|
|
|
|
this.savingStageLayout = true;
|
|
|
|
try {
|
|
const res = await fetch(this.config.stageUpdateUrl, {
|
|
method: 'POST',
|
|
headers: this.headers(),
|
|
body: JSON.stringify({
|
|
stage_layout: this.stageLayout,
|
|
panel_discussions: this.panelDiscussions || this.stageLayout === 'panel',
|
|
panels: this.panels,
|
|
active_panel_id: this.activePanelId || null,
|
|
spotlight_speaker_ref: this.spotlightSpeakerRef || null,
|
|
}),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
return;
|
|
}
|
|
|
|
const data = await res.json();
|
|
this._stageSnapshot = null;
|
|
this.panelSetupOpen = false;
|
|
this.mergeStageConfig(data);
|
|
this.applyStageLayout();
|
|
} finally {
|
|
this.savingStageLayout = false;
|
|
}
|
|
},
|
|
|
|
async setSpotlight(speakerKey) {
|
|
if (!speakerKey) {
|
|
return;
|
|
}
|
|
|
|
this.spotlightSpeakerRef = speakerKey;
|
|
this.stageLayout = 'plenary';
|
|
this.applyStageLayout();
|
|
|
|
if (!this.config.stageUpdateUrl) {
|
|
return;
|
|
}
|
|
|
|
await fetch(this.config.stageUpdateUrl, {
|
|
method: 'POST',
|
|
headers: this.headers(),
|
|
body: JSON.stringify({
|
|
stage_layout: 'plenary',
|
|
spotlight_speaker_ref: speakerKey,
|
|
}),
|
|
});
|
|
},
|
|
|
|
addPanel() {
|
|
this.panels.push({
|
|
id: `panel-${Math.random().toString(36).slice(2, 10)}`,
|
|
name: `Panel ${this.panels.length + 1}`,
|
|
speaker_refs: [],
|
|
});
|
|
},
|
|
|
|
removePanel(index) {
|
|
const removed = this.panels.splice(index, 1)[0];
|
|
if (removed && this.activePanelId === removed.id) {
|
|
this.activePanelId = this.panels[0]?.id || '';
|
|
}
|
|
},
|
|
|
|
setActivePanel(panelId) {
|
|
this.activePanelId = panelId;
|
|
this.stageLayout = 'panel';
|
|
this.panelDiscussions = true;
|
|
},
|
|
|
|
togglePanelSpeaker(panel, speakerKey) {
|
|
if (!panel || !speakerKey) {
|
|
return;
|
|
}
|
|
|
|
const refs = panel.speaker_refs || [];
|
|
if (refs.includes(speakerKey)) {
|
|
panel.speaker_refs = refs.filter((ref) => ref !== speakerKey);
|
|
} else {
|
|
panel.speaker_refs = [...refs, speakerKey];
|
|
}
|
|
},
|
|
|
|
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;
|
|
},
|
|
|
|
headerParticipantCount() {
|
|
if (this.usesStageLayout) {
|
|
return String(this.speakerCount());
|
|
}
|
|
|
|
return String(this.participantCount());
|
|
},
|
|
|
|
headerParticipantSuffix() {
|
|
if (this.usesStageLayout) {
|
|
const count = this.speakerCount();
|
|
|
|
return count === 1 ? ' speaker' : ' speakers';
|
|
}
|
|
|
|
return ' in call';
|
|
},
|
|
|
|
headerParticipantLabel() {
|
|
return this.headerParticipantCount() + this.headerParticipantSuffix();
|
|
},
|
|
|
|
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);
|
|
|
|
document.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) {
|
|
this.findParticipantTile(identity)?.remove();
|
|
},
|
|
|
|
getOrCreateParticipantTile(participant) {
|
|
const container = this.getTileContainerForIdentity(participant.identity);
|
|
const identity = participant.identity;
|
|
const existing = this.findParticipantTile(identity);
|
|
|
|
if (!container) {
|
|
existing?.remove();
|
|
return null;
|
|
}
|
|
|
|
let tile = existing;
|
|
|
|
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 overflow-hidden rounded-2xl bg-slate-900'
|
|
: 'relative flex aspect-video w-full flex-col overflow-hidden rounded-xl bg-slate-900 min-h-0';
|
|
tile.innerHTML = `
|
|
<div data-tile-body class="relative min-h-0 flex-1">
|
|
<div data-tile-stage class="absolute inset-0 flex items-center justify-center"></div>
|
|
<div data-tile-avatar class="absolute inset-0 flex items-center justify-center">
|
|
<div data-tile-avatar-circle class="flex h-20 w-20 shrink-0 items-center justify-center rounded-full text-2xl font-semibold text-white shadow-lg"></div>
|
|
</div>
|
|
</div>
|
|
<div data-tile-footer class="relative flex shrink-0 items-center justify-between gap-2 border-t border-slate-800/80 bg-slate-950/95 px-3 py-2">
|
|
<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-speaking class="hidden meet-speaking-badge rounded-full bg-emerald-500/90 p-1 text-white" title="Speaking">
|
|
<svg class="h-3.5 w-3.5" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
|
<rect class="meet-speaking-bar meet-speaking-bar--1" x="1" y="5" width="2.5" height="6" rx="1"/>
|
|
<rect class="meet-speaking-bar meet-speaking-bar--2" x="6.75" y="3" width="2.5" height="10" rx="1"/>
|
|
<rect class="meet-speaking-bar meet-speaking-bar--3" x="12.5" y="6" width="2.5" height="4" rx="1"/>
|
|
</svg>
|
|
</span>
|
|
<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>`;
|
|
}
|
|
|
|
if (tile.parentElement !== container) {
|
|
container.appendChild(tile);
|
|
}
|
|
|
|
const isSpotlightTile = container.id === 'meet-stage-spotlight';
|
|
|
|
tile.classList.toggle('meet-stage-spotlight-tile', isSpotlightTile);
|
|
tile.classList.toggle('meet-stage-panel-tile', container.id === 'video-grid' && this.stageLayout === 'panel');
|
|
tile.classList.toggle('aspect-video', !isSpotlightTile && !this.audioOnly);
|
|
tile.classList.toggle('rounded-xl', !isSpotlightTile && !this.audioOnly);
|
|
|
|
this.updateTileAvatarCircle(tile, participant);
|
|
tile.querySelector('[data-tile-name]').textContent = this.displayNameForParticipant(participant);
|
|
|
|
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');
|
|
if (!stage.querySelector('video')) {
|
|
const publication = Array.from(participant.videoTrackPublications.values())
|
|
.find((pub) => pub.source !== Track.Source.ScreenShare && pub.track && !pub.isMuted);
|
|
if (publication?.track) {
|
|
this.attachVideoToTile(participant, publication.track);
|
|
}
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
avatar.classList.remove('hidden');
|
|
this.updateTileAvatarCircle(tile, participant);
|
|
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);
|
|
},
|
|
|
|
reattachParticipantVideo(participant) {
|
|
if (this.audioOnly || !participant) {
|
|
return;
|
|
}
|
|
|
|
const publication = Array.from(participant.videoTrackPublications.values())
|
|
.find((pub) => pub.source !== Track.Source.ScreenShare && pub.track && !pub.isMuted);
|
|
|
|
if (publication?.track) {
|
|
this.attachVideoToTile(participant, publication.track);
|
|
return;
|
|
}
|
|
|
|
this.updateParticipantTile(participant);
|
|
},
|
|
|
|
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 maybeStartAutoRecording() {
|
|
if (!this.isHost || !this.isRecording || recordingMediaRecorder) {
|
|
return;
|
|
}
|
|
|
|
const el = document.getElementById('meet-config');
|
|
const existingUuid = this.activeRecordingUuid || el?.dataset.activeRecordingUuid || '';
|
|
|
|
if (existingUuid) {
|
|
this.activeRecordingUuid = existingUuid;
|
|
} else {
|
|
await this.startServerRecording();
|
|
return;
|
|
}
|
|
|
|
const started = await this.tryStartClientRecordingWithRetry();
|
|
if (!started) {
|
|
console.warn('Auto-record client capture could not start.');
|
|
}
|
|
},
|
|
|
|
async tryStartClientRecordingWithRetry() {
|
|
if (this.startClientRecording()) {
|
|
return true;
|
|
}
|
|
|
|
await new Promise((resolve) => setTimeout(resolve, 1500));
|
|
|
|
return this.startClientRecording();
|
|
},
|
|
|
|
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 (! await this.tryStartClientRecordingWithRetry()) {
|
|
await this.abortServerRecording('Could not capture meeting video in this browser.');
|
|
this.isRecording = false;
|
|
this.activeRecordingUuid = null;
|
|
window.alert(`Recording could not start because this browser could not capture the ${this.sessionNoun()} video. Try Chrome on desktop, or disable stage-only layouts temporarily.`);
|
|
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;
|
|
|
|
let videoSource = screenVideo;
|
|
if (!videoSource) {
|
|
videoSource = this.recordingVideoCaptureElement();
|
|
}
|
|
|
|
if (!videoSource?.captureStream) {
|
|
return null;
|
|
}
|
|
|
|
const videoStream = videoSource.captureStream(25);
|
|
const tracks = [...videoStream.getVideoTracks(), ...this.collectMeetingAudioTracks()];
|
|
|
|
return tracks.length ? new MediaStream(tracks) : null;
|
|
},
|
|
|
|
recordingVideoCaptureElement() {
|
|
if (!this.usesStageLayout) {
|
|
return document.getElementById('video-grid');
|
|
}
|
|
|
|
const spotlight = document.getElementById('meet-stage-spotlight');
|
|
const grid = document.getElementById('video-grid');
|
|
const stage = document.getElementById('meet-stage');
|
|
|
|
if (spotlight?.querySelector('video')) {
|
|
return spotlight;
|
|
}
|
|
|
|
if (grid?.querySelector('video')) {
|
|
return grid;
|
|
}
|
|
|
|
return stage || spotlight || grid;
|
|
},
|
|
|
|
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 hadClientRecorder = !!recordingMediaRecorder;
|
|
const blob = await this.stopClientRecording();
|
|
this.isRecording = false;
|
|
|
|
let recordingUuid = this.activeRecordingUuid;
|
|
const res = await fetch(this.config.recordingStopUrl, { method: 'POST', headers: this.headers() });
|
|
if (res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
recordingUuid = data.recording_uuid || recordingUuid;
|
|
} else if (res.status !== 404 || !recordingUuid) {
|
|
this.activeRecordingUuid = null;
|
|
return;
|
|
}
|
|
|
|
if (blob && recordingUuid) {
|
|
const uploaded = await this.uploadRecording(blob, recordingUuid);
|
|
if (!uploaded) {
|
|
window.alert(`Recording upload failed. Open Recordings and refresh shortly, or re-record the ${this.sessionNoun()}.`);
|
|
}
|
|
} else if (recordingUuid) {
|
|
await this.failServerRecording(
|
|
recordingUuid,
|
|
hadClientRecorder
|
|
? `No recording was captured from this ${this.sessionNoun()}.`
|
|
: 'Recording capture stopped before any video was saved.',
|
|
);
|
|
if (hadClientRecorder) {
|
|
window.alert(`No recording was captured from this ${this.sessionNoun()}. Start recording again while the ${this.sessionNoun()} is live.`);
|
|
}
|
|
}
|
|
|
|
this.activeRecordingUuid = null;
|
|
},
|
|
|
|
async abortServerRecording(reason) {
|
|
await fetch(this.config.recordingStopUrl, {
|
|
method: 'POST',
|
|
headers: this.headers(),
|
|
body: JSON.stringify({ failed: true, reason }),
|
|
});
|
|
},
|
|
|
|
async failServerRecording(recordingUuid, reason) {
|
|
const url = `/room/${this.config.sessionUuid}/recordings/${recordingUuid}/fail`;
|
|
await fetch(url, {
|
|
method: 'POST',
|
|
headers: this.headers(),
|
|
body: JSON.stringify({ reason }),
|
|
});
|
|
},
|
|
|
|
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() {
|
|
if (this.isSpace) {
|
|
return;
|
|
}
|
|
|
|
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.isSpace || !this.isHost || !this.config.breakoutsCreateUrl) return;
|
|
this.breakoutCount = '4';
|
|
this.breakoutModalOpen = true;
|
|
this.closeSidebar();
|
|
},
|
|
|
|
async submitBreakouts() {
|
|
if (this.isSpace || !this.isHost || !this.config.breakoutsCreateUrl) return;
|
|
|
|
const count = parseInt(this.breakoutCount, 10);
|
|
if (!count || count < 1) return;
|
|
|
|
const res = await fetch(this.config.breakoutsCreateUrl, {
|
|
method: 'POST',
|
|
headers: this.headers(),
|
|
body: JSON.stringify({ count }),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
return;
|
|
}
|
|
|
|
this.breakoutModalOpen = false;
|
|
this.breakoutsActive = true;
|
|
},
|
|
|
|
async closeBreakouts() {
|
|
if (this.isSpace || !this.isHost || !this.config.breakoutsCloseUrl) return;
|
|
|
|
await fetch(this.config.breakoutsCloseUrl, { method: 'POST', headers: this.headers() });
|
|
this.closeSidebar();
|
|
this.breakoutsActive = false;
|
|
this.activeBreakouts = [];
|
|
},
|
|
|
|
async broadcastToBreakouts() {
|
|
if (this.isSpace) {
|
|
return;
|
|
}
|
|
|
|
const message = this.breakoutBroadcastInput.trim();
|
|
if (!this.isHost || !message || !this.config.breakoutsBroadcastUrl) {
|
|
return;
|
|
}
|
|
|
|
const res = await fetch(this.config.breakoutsBroadcastUrl, {
|
|
method: 'POST',
|
|
headers: this.headers(),
|
|
body: JSON.stringify({ message }),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
return;
|
|
}
|
|
|
|
this.breakoutBroadcastInput = '';
|
|
this.breakoutBroadcast = message;
|
|
},
|
|
|
|
applyMediaSessionState(media) {
|
|
if (!media) {
|
|
return;
|
|
}
|
|
|
|
this.inBreakout = Boolean(media.in_breakout);
|
|
this.assignedBreakoutRoomId = media.breakout_room_id ?? null;
|
|
this.canPublish = Boolean(media.can_publish);
|
|
this.audioOnlyPublish = Boolean(media.audio_only_publish);
|
|
this.speakGranted = Boolean(media.speak_granted);
|
|
this.speakRequested = Boolean(media.speak_requested);
|
|
this.usesStageLayout = Boolean(media.uses_stage_layout);
|
|
this.breakoutRoomName = media.breakout?.name || '';
|
|
this.breakoutClosesAt = media.breakout?.closes_at || '';
|
|
},
|
|
|
|
async syncMediaSessionFromPoll(data) {
|
|
const media = data.media;
|
|
if (!media) {
|
|
return;
|
|
}
|
|
|
|
const previousBreakoutId = this.assignedBreakoutRoomId;
|
|
const previousCanPublish = this.canPublish;
|
|
const previousAudioOnlyPublish = this.audioOnlyPublish;
|
|
const previousSpeakGranted = this.speakGranted;
|
|
const previousUsesStageLayout = this.usesStageLayout;
|
|
|
|
this.applyMediaSessionState(media);
|
|
this.breakoutsActive = Boolean(data.breakouts_active);
|
|
this.activeBreakouts = Array.isArray(data.breakouts) ? data.breakouts : [];
|
|
|
|
const needsReconnect = previousBreakoutId !== this.assignedBreakoutRoomId
|
|
|| previousCanPublish !== this.canPublish
|
|
|| previousAudioOnlyPublish !== this.audioOnlyPublish
|
|
|| previousSpeakGranted !== this.speakGranted
|
|
|| previousUsesStageLayout !== this.usesStageLayout;
|
|
|
|
if (needsReconnect && this.config.configured) {
|
|
await this.reconnectLiveKit();
|
|
}
|
|
},
|
|
|
|
async reconnectLiveKit() {
|
|
if (!this.config.mediaTokenUrl) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch(this.config.mediaTokenUrl, { headers: { Accept: 'application/json' } });
|
|
if (!res.ok) {
|
|
return;
|
|
}
|
|
|
|
const data = await res.json();
|
|
this.config.token = data.token;
|
|
this.applyMediaSessionState(data);
|
|
this.breakoutsActive = Boolean(data.breakouts_active);
|
|
|
|
if (room) {
|
|
await room.disconnect();
|
|
room = null;
|
|
}
|
|
|
|
connectPromise = null;
|
|
document.getElementById('video-grid')?.replaceChildren();
|
|
document.getElementById('meet-stage-spotlight')?.replaceChildren();
|
|
document.getElementById('meet-audience-strip')?.replaceChildren();
|
|
|
|
this.connectionStatus = this.inBreakout ? 'Joining breakout…' : 'Returning to main room…';
|
|
await this.connectLiveKit();
|
|
this.applyStageLayout();
|
|
} catch (error) {
|
|
console.error(error);
|
|
this.connectionStatus = this.connectionErrorMessage(error);
|
|
}
|
|
},
|
|
|
|
breakoutTimeRemaining() {
|
|
if (!this.breakoutClosesAt) {
|
|
return '';
|
|
}
|
|
|
|
const closes = Date.parse(this.breakoutClosesAt);
|
|
if (Number.isNaN(closes)) {
|
|
return '';
|
|
}
|
|
|
|
const seconds = Math.max(0, Math.floor((closes - Date.now()) / 1000));
|
|
if (seconds === 0) {
|
|
return 'Ending soon';
|
|
}
|
|
|
|
const minutes = Math.floor(seconds / 60);
|
|
const remainder = seconds % 60;
|
|
|
|
return minutes > 0
|
|
? `${minutes}m ${remainder}s remaining`
|
|
: `${remainder}s remaining`;
|
|
},
|
|
|
|
toggleProgramme() {
|
|
if (this.isSpace) {
|
|
return;
|
|
}
|
|
|
|
this.toggleSidebarPanel('programme');
|
|
},
|
|
|
|
openUploadPicker() {
|
|
if (this.isSpace) {
|
|
return;
|
|
}
|
|
|
|
document.getElementById('meet-file-input')?.click();
|
|
this.closeSidebar();
|
|
},
|
|
|
|
async toggleRecordingFromMenu() {
|
|
await this.toggleRecording();
|
|
this.closeSidebar();
|
|
},
|
|
|
|
async toggleLockFromMenu() {
|
|
if (this.isSpace) {
|
|
return;
|
|
}
|
|
|
|
await this.toggleLock();
|
|
this.closeSidebar();
|
|
},
|
|
|
|
openEndMeetingConfirm() {
|
|
this.endMeetingConfirmOpen = true;
|
|
},
|
|
|
|
submitEndMeeting() {
|
|
if (this.isRecording || this.activeRecordingUuid || recordingMediaRecorder) {
|
|
this.stopServerAndUploadRecording().finally(() => {
|
|
document.getElementById('meet-end-form')?.requestSubmit();
|
|
});
|
|
} else {
|
|
document.getElementById('meet-end-form')?.requestSubmit();
|
|
}
|
|
this.endMeetingConfirmOpen = false;
|
|
},
|
|
|
|
async submitLeave() {
|
|
if (this.isHost && (this.isRecording || this.activeRecordingUuid || recordingMediaRecorder)) {
|
|
await this.stopServerAndUploadRecording();
|
|
}
|
|
|
|
document.getElementById('meet-leave-form')?.submit();
|
|
},
|
|
|
|
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.applyStageLayout();
|
|
this.updateGalleryGridLayout();
|
|
this.syncActiveSpeakers(room.activeSpeakers ?? []);
|
|
},
|
|
|
|
updateGalleryGridLayout() {
|
|
const grid = document.getElementById('video-grid');
|
|
if (!grid || this.usesStageLayout || this.audioOnly) {
|
|
return;
|
|
}
|
|
|
|
const count = grid.querySelectorAll('[data-participant-tile]').length;
|
|
grid.classList.toggle('meet-gallery-grid--solo', count === 1);
|
|
grid.classList.toggle('meet-gallery-grid--many', count >= 5);
|
|
grid.classList.toggle('meet-gallery-grid--dense', count >= 9);
|
|
},
|
|
|
|
pruneTilesFromSession() {
|
|
const joinedIds = new Set(
|
|
this.sessionParticipants
|
|
.filter((p) => p.status === 'joined')
|
|
.map((p) => p.uuid),
|
|
);
|
|
|
|
document.querySelectorAll('[data-participant-tile]').forEach((tile) => {
|
|
const identity = tile.dataset.participantTile;
|
|
if (room?.localParticipant?.identity === identity) return;
|
|
if (!joinedIds.has(identity)) {
|
|
tile.remove();
|
|
}
|
|
});
|
|
|
|
this.applyStageLayout();
|
|
},
|
|
|
|
async toggleMute() {
|
|
if (!room || !this.showMicrophoneControl()) 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 || this.audioOnlyPublish || !this.canPublish) 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 || this.audioOnlyPublish || !this.canPublish) 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(),
|
|
});
|
|
},
|
|
|
|
showMicrophoneControl() {
|
|
if (!this.canPublish) {
|
|
return false;
|
|
}
|
|
|
|
if (this.audioOnlyPublish) {
|
|
return this.speakGranted;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
showVideoControl() {
|
|
return this.canPublish && !this.audioOnly && !this.audioOnlyPublish;
|
|
},
|
|
|
|
showAudienceControls() {
|
|
if (this.isSpace) {
|
|
return !this.canPublish;
|
|
}
|
|
|
|
if (!this.usesSpeakAccess) {
|
|
return this.canPublish;
|
|
}
|
|
|
|
return !this.canPublish || this.audioOnlyPublish;
|
|
},
|
|
|
|
/** Mobile primary toolbar — webinars/conferences and audio room listeners. */
|
|
showPrimaryToolbarAudienceControls() {
|
|
if (this.isSpace) {
|
|
return !this.canPublish;
|
|
}
|
|
|
|
if (!this.usesSpeakAccess) {
|
|
return false;
|
|
}
|
|
|
|
return this.showAudienceControls();
|
|
},
|
|
|
|
showStagePublisherControls() {
|
|
return this.usesSpeakAccess && this.canPublish && !this.audioOnlyPublish;
|
|
},
|
|
|
|
speakRequestParticipants() {
|
|
return this.inCallParticipants().filter((person) => person.speak_requested && !person.speak_granted);
|
|
},
|
|
|
|
syncSelfSpeakState() {
|
|
const self = this.sessionParticipants.find((person) => person.uuid === this.config.participantUuid);
|
|
if (!self) {
|
|
return;
|
|
}
|
|
|
|
this.speakGranted = Boolean(self.speak_granted);
|
|
this.speakRequested = Boolean(self.speak_requested);
|
|
},
|
|
|
|
mergeSpeakParticipant(participant) {
|
|
if (!participant?.uuid) {
|
|
return;
|
|
}
|
|
|
|
const index = this.sessionParticipants.findIndex((person) => person.uuid === participant.uuid);
|
|
if (index >= 0) {
|
|
this.sessionParticipants[index] = {
|
|
...this.sessionParticipants[index],
|
|
speak_requested: Boolean(participant.speak_requested),
|
|
speak_granted: Boolean(participant.speak_granted),
|
|
};
|
|
}
|
|
|
|
if (participant.uuid === this.config.participantUuid) {
|
|
this.speakGranted = Boolean(participant.speak_granted);
|
|
this.speakRequested = Boolean(participant.speak_requested);
|
|
}
|
|
},
|
|
|
|
speakActionUrl(template, participantUuid) {
|
|
return template?.replace('__UUID__', participantUuid) || '';
|
|
},
|
|
|
|
async requestSpeak() {
|
|
if (!this.config.speakRequestUrl) {
|
|
return;
|
|
}
|
|
|
|
const res = await fetch(this.config.speakRequestUrl, {
|
|
method: 'POST',
|
|
headers: this.headers(),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
return;
|
|
}
|
|
|
|
const data = await res.json();
|
|
this.mergeSpeakParticipant(data.participant);
|
|
},
|
|
|
|
async cancelSpeakRequest() {
|
|
if (!this.config.speakCancelUrl) {
|
|
return;
|
|
}
|
|
|
|
const res = await fetch(this.config.speakCancelUrl, {
|
|
method: 'POST',
|
|
headers: this.headers(),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
return;
|
|
}
|
|
|
|
const data = await res.json();
|
|
this.mergeSpeakParticipant(data.participant);
|
|
},
|
|
|
|
async grantSpeakAccess(participantUuid) {
|
|
const url = this.speakActionUrl(this.config.speakGrantUrl, participantUuid);
|
|
if (!url) {
|
|
return;
|
|
}
|
|
|
|
const res = await fetch(url, {
|
|
method: 'POST',
|
|
headers: this.headers(),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
return;
|
|
}
|
|
|
|
const data = await res.json();
|
|
this.mergeSpeakParticipant(data.participant);
|
|
await this.poll();
|
|
},
|
|
|
|
async revokeSpeakAccess(participantUuid) {
|
|
const url = this.speakActionUrl(this.config.speakRevokeUrl, participantUuid);
|
|
if (!url) {
|
|
return;
|
|
}
|
|
|
|
const res = await fetch(url, {
|
|
method: 'POST',
|
|
headers: this.headers(),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
return;
|
|
}
|
|
|
|
const data = await res.json();
|
|
this.mergeSpeakParticipant(data.participant);
|
|
await this.poll();
|
|
},
|
|
|
|
async dismissSpeakRequest(participantUuid) {
|
|
const url = this.speakActionUrl(this.config.speakDismissUrl, participantUuid);
|
|
if (!url) {
|
|
return;
|
|
}
|
|
|
|
const res = await fetch(url, {
|
|
method: 'POST',
|
|
headers: this.headers(),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
return;
|
|
}
|
|
|
|
const data = await res.json();
|
|
this.mergeSpeakParticipant(data.participant);
|
|
},
|
|
|
|
async goLive() {
|
|
if (!this.config.goLiveUrl || this.goingLive) {
|
|
return;
|
|
}
|
|
|
|
this.goingLive = true;
|
|
|
|
if (this.pollTimer) {
|
|
clearInterval(this.pollTimer);
|
|
this.pollTimer = null;
|
|
}
|
|
|
|
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.replace(data.room_url || `/room/${data.session_uuid}`);
|
|
} catch {
|
|
this.goingLive = false;
|
|
this.pollTimer = setInterval(() => this.poll(), 3000);
|
|
}
|
|
},
|
|
|
|
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
|
|
));
|
|
this.applyStageLayout();
|
|
},
|
|
|
|
closeSidebar() {
|
|
this.sidebarPanel = null;
|
|
},
|
|
|
|
toggleSidebarPanel(name) {
|
|
this.sidebarPanel = this.sidebarPanel === name ? null : name;
|
|
|
|
if (this.sidebarPanel) {
|
|
this.shareOpen = false;
|
|
}
|
|
},
|
|
|
|
toggleChat() {
|
|
if (this.isSpace) {
|
|
return;
|
|
}
|
|
|
|
this.toggleSidebarPanel('chat');
|
|
},
|
|
|
|
toggleParticipants() {
|
|
this.toggleSidebarPanel('participants');
|
|
},
|
|
|
|
toggleFeatures() {
|
|
this.toggleSidebarPanel('features');
|
|
},
|
|
|
|
openParticipantsPanel() {
|
|
this.sidebarPanel = 'participants';
|
|
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.closeSidebar();
|
|
},
|
|
|
|
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);
|
|
|
|
if (kind === 'thumbs') {
|
|
this.registerApplauseClap(this.displayName);
|
|
}
|
|
},
|
|
|
|
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) {
|
|
if (this.goingLive) {
|
|
return;
|
|
}
|
|
this.redirectToMeetingEnded(data.redirect);
|
|
return;
|
|
}
|
|
if (data.participants) {
|
|
const previousSpeakRequestCount = this.speakRequestParticipants().length;
|
|
this.sessionParticipants = data.participants;
|
|
if (this.usesSpeakAccess) {
|
|
this.syncSelfSpeakState();
|
|
}
|
|
this.pruneTilesFromSession();
|
|
this.refreshParticipantTileAvatars();
|
|
this.renderAudienceStrip();
|
|
const speakRequestCount = this.speakRequestParticipants().length;
|
|
if (this.canManageSpeak && speakRequestCount > previousSpeakRequestCount) {
|
|
this.openParticipantsPanel();
|
|
}
|
|
}
|
|
if (typeof data.uses_stage_layout === 'boolean' || typeof data.stage_layout === 'string') {
|
|
this.mergeStageConfig(data);
|
|
this.applyStageLayout();
|
|
}
|
|
if (typeof data.waiting_count === 'number') {
|
|
const previous = this.waitingCount;
|
|
this.waitingCount = data.waiting_count;
|
|
if (this.isHost && data.waiting_count > previous) {
|
|
this.openParticipantsPanel();
|
|
}
|
|
}
|
|
this.updateChatFromPoll(data.messages || []);
|
|
this.qaItems = data.qa || [];
|
|
this.activePolls = data.polls || [];
|
|
if (data.broadcasts?.length) {
|
|
this.breakoutBroadcast = data.broadcasts[0].body;
|
|
}
|
|
await this.syncMediaSessionFromPoll(data);
|
|
this.processReactionsFromPoll(data.reactions || []);
|
|
} catch (e) {
|
|
// ignore poll errors
|
|
}
|
|
},
|
|
|
|
sessionNoun() {
|
|
if (this.sessionNounLabel) {
|
|
return this.sessionNounLabel;
|
|
}
|
|
|
|
return this.isConference ? 'conference' : 'meeting';
|
|
},
|
|
|
|
stageLayoutLabel() {
|
|
return this.stageLayout === 'panel' ? 'Panel discussion' : 'Plenary';
|
|
},
|
|
|
|
conferenceStatusLabel() {
|
|
if (this.inBreakout) {
|
|
return 'Breakout · meeting mode';
|
|
}
|
|
|
|
if (this.isGreenRoom) {
|
|
if (this.usesStageLayout) {
|
|
return `Green room · ${this.stageLayoutLabel()}`;
|
|
}
|
|
|
|
return 'Green room';
|
|
}
|
|
|
|
if (!this.usesStageLayout) {
|
|
return 'Conference live';
|
|
}
|
|
|
|
return this.stageLayout === 'panel' ? 'Panel discussion live' : 'Plenary live';
|
|
},
|
|
|
|
conferenceStatusClass() {
|
|
if (this.inBreakout) {
|
|
return 'text-amber-400/90';
|
|
}
|
|
|
|
if (this.isGreenRoom) {
|
|
return 'text-violet-400/90';
|
|
}
|
|
|
|
if (this.stageLayout === 'panel') {
|
|
return 'text-violet-400/90';
|
|
}
|
|
|
|
return 'text-sky-400/90';
|
|
},
|
|
|
|
stageLayoutDescription() {
|
|
if (this.stageLayout === 'panel') {
|
|
const panelName = this.activePanelName();
|
|
if (panelName) {
|
|
return `Showing ${panelName} — multiple speakers in a split grid.`;
|
|
}
|
|
|
|
return 'Multiple speakers shown together in a split-screen grid.';
|
|
}
|
|
|
|
const spotlight = this.findSpeakerBySpotlightKey(this.resolveSpotlightKey());
|
|
if (spotlight) {
|
|
return `${spotlight.display_name} is on stage.`;
|
|
}
|
|
|
|
return 'Choose who fills the stage from Stage layout or Spotlight on a speaker.';
|
|
},
|
|
|
|
spotlightSpeakerName() {
|
|
return this.findSpeakerBySpotlightKey(this.resolveSpotlightKey())?.display_name || '';
|
|
},
|
|
|
|
activePanelName() {
|
|
if (!this.activePanelId) {
|
|
return '';
|
|
}
|
|
|
|
const panel = this.panels.find((entry) => entry.id === this.activePanelId);
|
|
|
|
return panel?.name || '';
|
|
},
|
|
|
|
openPanelSetup() {
|
|
this._stageSnapshot = {
|
|
stageLayout: this.stageLayout,
|
|
panels: JSON.parse(JSON.stringify(this.panels)),
|
|
activePanelId: this.activePanelId,
|
|
panelDiscussions: this.panelDiscussions,
|
|
spotlightSpeakerRef: this.spotlightSpeakerRef,
|
|
};
|
|
this.panelSetupOpen = true;
|
|
},
|
|
|
|
cancelPanelSetup() {
|
|
if (this._stageSnapshot) {
|
|
this.stageLayout = this._stageSnapshot.stageLayout;
|
|
this.panels = JSON.parse(JSON.stringify(this._stageSnapshot.panels));
|
|
this.activePanelId = this._stageSnapshot.activePanelId;
|
|
this.panelDiscussions = this._stageSnapshot.panelDiscussions;
|
|
this.spotlightSpeakerRef = this._stageSnapshot.spotlightSpeakerRef || '';
|
|
this.applyStageLayout();
|
|
}
|
|
|
|
this._stageSnapshot = null;
|
|
this.panelSetupOpen = false;
|
|
},
|
|
|
|
selectStageLayout(layout) {
|
|
this.stageLayout = layout;
|
|
|
|
if (layout === 'panel') {
|
|
this.panelDiscussions = true;
|
|
|
|
if (this.panels.length === 0) {
|
|
this.addPanel();
|
|
}
|
|
|
|
if (!this.activePanelId && this.panels[0]) {
|
|
this.activePanelId = this.panels[0].id;
|
|
}
|
|
}
|
|
},
|
|
|
|
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 = `
|
|
<div class="rounded-2xl px-3 py-2 ${isOwn ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-100'}">
|
|
${isOwn ? '' : `<p class="mb-0.5 text-xs font-medium text-sky-300">${this.escape(message.sender_name)}</p>`}
|
|
<p class="text-sm leading-relaxed">${this.escape(message.body)}</p>
|
|
</div>
|
|
<p class="mt-1 text-[10px] text-slate-500 ${isOwn ? 'text-right' : ''}">${this.escape(time)}</p>`;
|
|
|
|
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);
|
|
},
|
|
|
|
initApplauseAudio(url) {
|
|
if (!url) {
|
|
return;
|
|
}
|
|
|
|
applauseAudio = new Audio(url);
|
|
applauseAudio.preload = 'auto';
|
|
},
|
|
|
|
isApplauseEmoji(emoji) {
|
|
return APPLAUSE_EMOJIS.has(emoji);
|
|
},
|
|
|
|
registerApplauseClap(senderName) {
|
|
if (!senderName) {
|
|
return;
|
|
}
|
|
|
|
applauseClapTimes.push({ at: Date.now(), sender: senderName });
|
|
this.maybePlayApplauseSound();
|
|
},
|
|
|
|
maybePlayApplauseSound() {
|
|
if (!applauseAudio?.src) {
|
|
return;
|
|
}
|
|
|
|
const now = Date.now();
|
|
applauseClapTimes = applauseClapTimes.filter((entry) => now - entry.at <= APPLAUSE_WINDOW_MS);
|
|
|
|
const clappers = new Set(applauseClapTimes.map((entry) => entry.sender));
|
|
if (clappers.size < APPLAUSE_MIN_CLAPPERS) {
|
|
return;
|
|
}
|
|
|
|
if (now - lastApplauseSoundAt < APPLAUSE_SOUND_COOLDOWN_MS) {
|
|
return;
|
|
}
|
|
|
|
const volume = 0.35 + Math.min(clappers.size - APPLAUSE_MIN_CLAPPERS + 1, 4) * 0.12;
|
|
this.playApplauseSound(volume);
|
|
},
|
|
|
|
playApplauseSound(volume = 0.7) {
|
|
if (!applauseAudio?.src) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
applauseAudio.volume = Math.min(1, Math.max(0.2, volume));
|
|
applauseAudio.currentTime = 0;
|
|
applauseAudio.play().catch(() => {});
|
|
lastApplauseSoundAt = Date.now();
|
|
} catch {
|
|
// Browser blocked playback until user gesture.
|
|
}
|
|
},
|
|
|
|
processReactionsFromPoll(reactions) {
|
|
if (!Array.isArray(reactions)) {
|
|
return;
|
|
}
|
|
|
|
if (!this.reactionsInitialized) {
|
|
reactions.forEach((reaction) => {
|
|
seenReactionKeys.add(`${reaction.created_at}|${reaction.sender_name}|${reaction.emoji}`);
|
|
});
|
|
this.reactionsInitialized = true;
|
|
|
|
return;
|
|
}
|
|
|
|
reactions.forEach((reaction) => {
|
|
const key = `${reaction.created_at}|${reaction.sender_name}|${reaction.emoji}`;
|
|
if (seenReactionKeys.has(key)) {
|
|
return;
|
|
}
|
|
|
|
seenReactionKeys.add(key);
|
|
|
|
if (this.isApplauseEmoji(reaction.emoji)) {
|
|
if (reaction.sender_name !== this.displayName) {
|
|
this.showFloatingReaction('thumbs');
|
|
}
|
|
|
|
this.registerApplauseClap(reaction.sender_name);
|
|
|
|
return;
|
|
}
|
|
|
|
if (reaction.emoji === '❤️' && reaction.sender_name !== this.displayName) {
|
|
this.showFloatingReaction('heart');
|
|
}
|
|
});
|
|
|
|
if (seenReactionKeys.size > 200) {
|
|
seenReactionKeys = new Set([...seenReactionKeys].slice(-100));
|
|
}
|
|
},
|
|
|
|
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();
|