isaaccladandCursor
4e4bed0df3
Deploy Ladill Meet / deploy (push) Successful in 52s
Server-side room composite egress replaces fragile MediaRecorder DOM capture when enabled, with webhook completion and browser fallback when egress is unavailable. Co-authored-by: Cursor <cursoragent@cursor.com>
1104 lines
82 KiB
PHP
1104 lines
82 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en" class="h-full meet-room-page">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>{{ $room->title }} · Ladill Meet</title>
|
|
@include('partials.favicon')
|
|
<style>
|
|
[x-cloak] { display: none !important; }
|
|
.meet-toolbar__track:not(.is-ready) [data-toolbar-conditional],
|
|
.meet-toolbar__track:not(.is-ready) [data-alpine-toolbar] { display: none !important; }
|
|
</style>
|
|
@vite(['resources/css/app.css', 'resources/js/meet-room.js'])
|
|
</head>
|
|
<body class="h-full overflow-hidden bg-slate-950 font-sans text-white" x-data="meetRoom()" x-init="init()">
|
|
@php
|
|
use App\Models\User;
|
|
use App\Services\Meet\ParticipantPresenter;
|
|
|
|
$joined = $session->participants->whereIn('status', ['joined', 'waiting']);
|
|
$participantAvatars = ParticipantPresenter::avatarMap($joined, $room->host_user_ref);
|
|
$joinedParticipants = $joined
|
|
->map(fn ($p) => ParticipantPresenter::toArray($p, $participantAvatars, $room->host_user_ref))
|
|
->values();
|
|
$roomHostUser = User::query()->where('public_id', $room->host_user_ref)->first();
|
|
$roomHost = [
|
|
'user_ref' => $room->host_user_ref,
|
|
'display_name' => $roomHostUser?->name ?? 'Host',
|
|
'avatar_url' => $roomHostUser?->avatarUrl(),
|
|
];
|
|
$isConferenceSession = $isConference ?? false;
|
|
$sessionNoun = match (true) {
|
|
$isConferenceSession => 'conference',
|
|
($isSpace ?? false) => 'room',
|
|
$room->isWebinar() => 'webinar',
|
|
default => 'meeting',
|
|
};
|
|
$sessionNounTitle = ucfirst($sessionNoun);
|
|
$presenterRefsList = (array) ($presenterRefs ?? []);
|
|
$headerHostPerson = ParticipantPresenter::headerHost($joinedParticipants->all(), $roomHost);
|
|
$headerParticipantCount = ParticipantPresenter::headerCountNumber(
|
|
$joinedParticipants->all(),
|
|
(bool) ($usesStageLayout ?? false),
|
|
$presenterRefsList,
|
|
);
|
|
$headerParticipantSuffix = ParticipantPresenter::headerCountSuffix(
|
|
$joinedParticipants->all(),
|
|
(bool) ($usesStageLayout ?? false),
|
|
$presenterRefsList,
|
|
);
|
|
$headerWaitingCount = $joinedParticipants->where('status', 'waiting')->count();
|
|
$stageLayoutName = ($stageConfig['stage_layout'] ?? 'plenary') === 'panel' ? 'Panel discussion' : 'Plenary';
|
|
$initialConferenceStatus = match (true) {
|
|
($inBreakout ?? false) => 'Breakout · meeting mode',
|
|
($isGreenRoom ?? false) && ($usesStageLayout ?? false) => "Green room · {$stageLayoutName}",
|
|
($isGreenRoom ?? false) => 'Green room',
|
|
! ($usesStageLayout ?? false) => 'Conference live',
|
|
($stageConfig['stage_layout'] ?? 'plenary') === 'panel' => 'Panel discussion live',
|
|
default => 'Plenary live',
|
|
};
|
|
$initialConferenceStatusClass = match (true) {
|
|
($inBreakout ?? false) => 'text-amber-400/90',
|
|
($isGreenRoom ?? false) => 'text-violet-400/90',
|
|
($stageConfig['stage_layout'] ?? 'plenary') === 'panel' => 'text-violet-400/90',
|
|
default => 'text-sky-400/90',
|
|
};
|
|
@endphp
|
|
<div id="meet-config"
|
|
data-token="{{ $mediaToken }}"
|
|
data-url="{{ $mediaUrl }}"
|
|
data-configured="{{ $mediaConfigured ? '1' : '0' }}"
|
|
data-participant="{{ $participant->uuid }}"
|
|
data-display-name="{{ $participant->display_name }}"
|
|
data-is-host="{{ ($canManageConference ?? $participant->isHost()) ? '1' : '0' }}"
|
|
data-poll-url="{{ route('meet.room.poll', $session) }}"
|
|
data-ended-url="{{ route('meet.ended', $session) }}"
|
|
data-chat-url="{{ route('meet.room.chat', $session) }}"
|
|
data-reaction-url="{{ route('meet.room.reaction', $session) }}"
|
|
data-raise-hand-url="{{ route('meet.room.raise-hand', $session) }}"
|
|
data-speak-request-url="{{ ($usesSpeakAccess ?? false) ? route('meet.room.speak.request', $session) : '' }}"
|
|
data-speak-cancel-url="{{ ($usesSpeakAccess ?? false) ? route('meet.room.speak.cancel', $session) : '' }}"
|
|
data-speak-grant-url="{{ ($canManageSpeakAccess ?? false) ? route('meet.room.speak.grant', [$session, '__UUID__']) : '' }}"
|
|
data-speak-revoke-url="{{ ($canManageSpeakAccess ?? false) ? route('meet.room.speak.revoke', [$session, '__UUID__']) : '' }}"
|
|
data-speak-dismiss-url="{{ ($canManageSpeakAccess ?? false) ? route('meet.room.speak.dismiss', [$session, '__UUID__']) : '' }}"
|
|
data-space-promote-url="{{ ($isSpace ?? false) && ($participant->isHost() || ($canManageConference ?? false)) ? route('meet.room.space.promote', [$session, '__UUID__']) : '' }}"
|
|
data-space-demote-url="{{ ($isSpace ?? false) && ($participant->isHost() || ($canManageConference ?? false)) ? route('meet.room.space.demote', [$session, '__UUID__']) : '' }}"
|
|
data-space-speak-accept-url="{{ ($isSpace ?? false) ? route('meet.room.space.speak.accept', $session) : '' }}"
|
|
data-space-speak-decline-url="{{ ($isSpace ?? false) ? route('meet.room.space.speak.decline', $session) : '' }}"
|
|
data-space-speak-dismiss-url="{{ ($isSpace ?? false) && ($participant->isHost() || ($canManageConference ?? false)) ? route('meet.room.space.speak.dismiss', [$session, '__UUID__']) : '' }}"
|
|
data-space-co-host-url="{{ ($isSpace ?? false) && ($participant->isHost() || ($canManageConference ?? false)) ? route('meet.room.space.co-host', [$session, '__UUID__']) : '' }}"
|
|
data-uses-speak-access="{{ ($usesSpeakAccess ?? false) ? '1' : '0' }}"
|
|
data-can-manage-speak="{{ ($canManageSpeakAccess ?? false) ? '1' : '0' }}"
|
|
data-leave-url="{{ route('meet.room.leave', $session) }}"
|
|
data-end-url="{{ route('meet.room.end', $session) }}"
|
|
data-recording-start-url="{{ route('meet.room.recording.start', $session) }}"
|
|
data-recording-stop-url="{{ route('meet.room.recording.stop', $session) }}"
|
|
data-lock-url="{{ ($isSpace ?? false) ? '' : route('meet.room.lock', $session) }}"
|
|
data-unlock-url="{{ ($isSpace ?? false) ? '' : route('meet.room.unlock', $session) }}"
|
|
data-caption-url="{{ route('meet.room.caption', $session) }}"
|
|
data-live-captions="{{ $room->setting('live_captions') ? '1' : '0' }}"
|
|
data-mute-on-join="{{ $room->setting('mute_on_join', true) ? '1' : '0' }}"
|
|
data-video-off-on-join="{{ ($isAudioOnly ?? false) || $room->setting('video_off_on_join', false) ? '1' : '0' }}"
|
|
data-audio-only="{{ ($isAudioOnly ?? false) ? '1' : '0' }}"
|
|
data-is-space="{{ ($isSpace ?? false) ? '1' : '0' }}"
|
|
data-watermark="{{ $watermark ? '1' : '0' }}"
|
|
data-locked="{{ $session->is_locked ? '1' : '0' }}"
|
|
data-recording-active="{{ $activeRecording ? '1' : '0' }}"
|
|
data-active-recording-uuid="{{ $activeRecording?->uuid ?? '' }}"
|
|
data-capture-mode="{{ $activeRecording?->metadata['capture_mode'] ?? '' }}"
|
|
data-server-egress="{{ ($serverEgressAvailable ?? false) ? '1' : '0' }}"
|
|
data-is-webinar="{{ ($isWebinar ?? false) ? '1' : '0' }}"
|
|
data-is-conference="{{ ($isConference ?? false) ? '1' : '0' }}"
|
|
data-session-noun="{{ $sessionNoun }}"
|
|
data-is-green-room="{{ ($isGreenRoom ?? false) ? '1' : '0' }}"
|
|
data-session-mode="{{ $session->session_mode }}"
|
|
data-go-live-url="{{ ($isConference ?? false) && ($isGreenRoom ?? false) && ($canManageConference ?? $participant->isHost()) ? route('meet.room.townhall.live', $session) : '' }}"
|
|
data-add-presenter-url="{{ ($isConference ?? false) && ($canManageConference ?? $participant->isHost()) ? route('meet.room.townhall.presenters', $session) : '' }}"
|
|
data-stage-update-url="{{ ($usesStageLayout ?? false) && ($canManageConference ?? $participant->isHost()) ? route('meet.room.stage.update', $session) : '' }}"
|
|
data-uses-stage-layout="{{ ($usesStageLayout ?? false) ? '1' : '0' }}"
|
|
data-panel-discussions="{{ ($stageConfig['panel_discussions'] ?? false) ? '1' : '0' }}"
|
|
data-stage-layout="{{ $stageConfig['stage_layout'] ?? 'plenary' }}"
|
|
data-panels='@json($stageConfig['panels'] ?? [])'
|
|
data-active-panel-id="{{ $stageConfig['active_panel_id'] ?? '' }}"
|
|
data-spotlight-speaker-ref="{{ $stageConfig['spotlight_speaker_ref'] ?? '' }}"
|
|
data-presenter-refs='@json($presenterRefs ?? [])'
|
|
data-can-publish="{{ ($canPublish ?? true) ? '1' : '0' }}"
|
|
data-audio-only-publish="{{ ($audioOnlyPublish ?? false) ? '1' : '0' }}"
|
|
data-speak-granted="{{ ($speakGranted ?? false) ? '1' : '0' }}"
|
|
data-speak-requested="{{ ($speakRequested ?? false) ? '1' : '0' }}"
|
|
data-in-breakout="{{ ($inBreakout ?? false) ? '1' : '0' }}"
|
|
data-qa-url="{{ ($isSpace ?? false) ? '' : route('meet.room.qa.submit', $session) }}"
|
|
data-polls-create-url="{{ ($isSpace ?? false) ? '' : route('meet.room.polls.create', $session) }}"
|
|
data-breakouts-create-url="{{ ($isSpace ?? false) ? '' : route('meet.room.breakouts.create', $session) }}"
|
|
data-breakouts-close-url="{{ ($isSpace ?? false) ? '' : route('meet.room.breakouts.close', $session) }}"
|
|
data-breakouts-return-url="{{ ($isSpace ?? false) ? '' : route('meet.room.breakouts.return', $session) }}"
|
|
data-breakouts-broadcast-url="{{ ($isSpace ?? false) ? '' : route('meet.room.breakouts.broadcast', $session) }}"
|
|
data-media-token-url="{{ route('meet.room.media-token', $session) }}"
|
|
data-files-upload-url="{{ ($isSpace ?? false) ? '' : route('meet.room.files.upload', $session) }}"
|
|
data-whiteboard-url="{{ ($isSpace ?? false) ? '' : route('meet.room.whiteboard.show', $session) }}"
|
|
data-whiteboard-save-url="{{ ($isSpace ?? false) ? '' : route('meet.room.whiteboard.save', $session) }}"
|
|
data-join-url="{{ $room->joinUrl() }}"
|
|
data-room-title="{{ $room->title }}"
|
|
data-passcode="{{ $room->passcode ?? '' }}"
|
|
@php $applauseAudioVer = @filemtime(public_path('audios/clapping.wav')) ?: null; @endphp
|
|
data-applause-audio="{{ $applauseAudioVer ? asset('audios/clapping.wav') . '?v=' . $applauseAudioVer : '' }}"
|
|
data-csrf="{{ csrf_token() }}"
|
|
data-session-uuid="{{ $session->uuid }}"
|
|
data-initial-participants='@json($joinedParticipants)'
|
|
data-room-host='@json($roomHost)'
|
|
hidden></div>
|
|
|
|
@if (! $mediaConfigured)
|
|
<div class="absolute inset-x-0 top-0 z-50 bg-amber-500 px-4 py-2 text-center text-sm font-medium text-amber-950">
|
|
LiveKit is not configured. Set LIVEKIT_URL, LIVEKIT_API_KEY, and LIVEKIT_API_SECRET in .env for video.
|
|
</div>
|
|
@endif
|
|
|
|
<div class="flex h-full min-w-0">
|
|
<div class="relative flex min-h-0 min-w-0 flex-1 flex-col">
|
|
<header class="flex shrink-0 items-center justify-between gap-2 bg-slate-950 px-4 py-3">
|
|
<div class="min-w-0 max-w-[40%] sm:max-w-none">
|
|
<h1 class="truncate text-sm font-semibold">{{ $room->title }}</h1>
|
|
@if ($isAudioOnly ?? false)
|
|
<p class="text-[10px] font-medium uppercase tracking-wide text-emerald-400/90">Audio room</p>
|
|
@elseif ($isConference ?? false)
|
|
<p class="text-[10px] font-medium uppercase tracking-wide {{ $initialConferenceStatusClass }}"
|
|
:class="conferenceStatusClass()"
|
|
x-text="conferenceStatusLabel()">{{ $initialConferenceStatus }}</p>
|
|
@endif
|
|
<p class="min-h-4 truncate text-xs font-medium leading-4"
|
|
:class="activeSpeakerCount() > 0 ? 'text-emerald-400' : 'text-slate-600'"
|
|
:title="activeSpeakersMessage()"
|
|
x-text="activeSpeakersMessage() || '...'"></p>
|
|
</div>
|
|
<div class="flex shrink-0 items-center gap-2 text-xs text-slate-400">
|
|
<button @click.stop="openShare()" data-share-trigger type="button"
|
|
class="inline-flex items-center justify-center rounded-lg bg-slate-900 p-2 text-slate-200 transition-colors hover:bg-slate-800 sm:gap-1.5 sm:px-2.5 sm:py-1.5"
|
|
title="Share {{ $sessionNoun }} link"
|
|
aria-label="Share {{ $sessionNoun }} link">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'share', 'class' => 'h-4 w-4'])
|
|
<span class="hidden sm:inline text-xs font-medium">Share</span>
|
|
</button>
|
|
<span x-show="isRecording" @unless($activeRecording) style="display: none" @endunless
|
|
class="inline-flex items-center justify-center"
|
|
role="status"
|
|
aria-label="Recording">
|
|
<span class="h-2.5 w-2.5 rounded-full bg-red-500 animate-pulse sm:hidden"></span>
|
|
<span class="hidden rounded bg-red-600 px-2 py-0.5 text-xs font-medium text-white sm:inline">REC</span>
|
|
</span>
|
|
<span x-show="isLocked" @unless($session->is_locked) style="display: none" @endunless class="rounded bg-amber-600 px-2 py-0.5 font-medium text-white">Locked</span>
|
|
<button @click="toggleParticipants()" type="button"
|
|
class="relative inline-flex items-center gap-1 rounded-lg bg-slate-900 px-2 py-1 text-xs font-medium text-slate-200 transition-colors hover:bg-slate-800 sm:gap-2"
|
|
:class="isHost && waitingCount > 0 ? 'ring-2 ring-amber-400/60' : ''"
|
|
:title="usesStageLayout ? 'View speakers' : 'View participants'"
|
|
:aria-label="(usesStageLayout ? 'Speakers' : 'Participants') + ': ' + headerParticipantLabel()">
|
|
<span x-show="isHost && waitingCount > 0" x-cloak
|
|
x-text="waitingCount > 9 ? '9+' : waitingCount"
|
|
class="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-amber-500 px-1 text-[10px] font-bold text-amber-950"></span>
|
|
@if ($headerHostPerson)
|
|
<span class="relative flex h-7 w-7 shrink-0 overflow-hidden rounded-full" aria-hidden="true">
|
|
@if (! empty($headerHostPerson['avatar_url']))
|
|
<img src="{{ $headerHostPerson['avatar_url'] }}" alt="" width="28" height="28"
|
|
class="h-7 w-7 rounded-full object-cover">
|
|
@else
|
|
<span class="flex h-7 w-7 items-center justify-center rounded-full bg-slate-700 text-[11px] font-semibold text-white">
|
|
{{ ParticipantPresenter::initials($headerHostPerson['display_name']) }}
|
|
</span>
|
|
@endif
|
|
</span>
|
|
@endif
|
|
<span><span x-text="headerParticipantCount()">{{ $headerParticipantCount }}</span><span class="hidden sm:inline" x-text="headerParticipantSuffix()">{{ $headerParticipantSuffix }}</span></span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
@if (($isConference ?? false) && ($isGreenRoom ?? false))
|
|
<div x-show="isConference && isGreenRoom" x-cloak
|
|
class="flex shrink-0 flex-col gap-2 border-b border-violet-500/30 bg-violet-500/15 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
|
|
<div class="min-w-0 text-sm text-violet-100">
|
|
<p class="font-medium">Green room</p>
|
|
<p class="truncate text-xs text-violet-200/90">Only hosts and speakers are visible. Attendees join after you go live.</p>
|
|
<p x-show="usesStageLayout" class="mt-1 text-xs text-violet-200/90">
|
|
Stage layout:
|
|
<span class="font-semibold text-violet-50" x-text="stageLayoutLabel()"></span>
|
|
</p>
|
|
</div>
|
|
<div class="flex shrink-0 flex-wrap items-center gap-2">
|
|
<button x-show="isHost && usesStageLayout" @click="openPanelSetup()" type="button"
|
|
class="shrink-0 rounded-lg border border-violet-400/40 bg-violet-500/20 px-3 py-1.5 text-xs font-semibold text-violet-100 transition-colors hover:bg-violet-500/30">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'panel', 'class' => 'mr-1 inline h-3.5 w-3.5'])
|
|
Stage layout
|
|
</button>
|
|
<button x-show="isHost" @click="goLive()" type="button" :disabled="goingLive"
|
|
class="shrink-0 rounded-lg bg-violet-500 px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-violet-400 disabled:opacity-60">
|
|
<span x-text="goingLive ? 'Starting…' : 'Go live'">Go live</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if (($inBreakout ?? false) && ! ($isSpace ?? false))
|
|
<div x-show="inBreakout && !isSpace" x-cloak
|
|
class="flex shrink-0 flex-col gap-1 border-b border-amber-500/30 bg-amber-500/10 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold text-amber-100">Breakout session</p>
|
|
<p class="truncate text-xs text-amber-200/90" x-text="breakoutRoomName ? 'You are in ' + breakoutRoomName : 'You are in a breakout room'"></p>
|
|
</div>
|
|
<p x-show="breakoutTimeRemaining()" class="shrink-0 text-xs font-medium text-amber-200/90" x-text="breakoutTimeRemaining()"></p>
|
|
</div>
|
|
@endif
|
|
|
|
@unless ($isSpace ?? false)
|
|
<div x-show="isHost && breakoutsActive && !inBreakout && !isSpace" x-cloak
|
|
class="flex shrink-0 flex-col gap-2 border-b border-amber-500/25 bg-amber-500/10 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="min-w-0 text-sm text-amber-100">
|
|
<p class="font-medium">Breakouts are active</p>
|
|
<p class="text-xs text-amber-200/90">Attendees are in smaller discussion groups. You remain on the main stage.</p>
|
|
</div>
|
|
<button @click="closeBreakouts()" type="button"
|
|
class="shrink-0 rounded-lg bg-amber-500 px-3 py-1.5 text-xs font-semibold text-amber-950 hover:bg-amber-400">
|
|
End breakouts
|
|
</button>
|
|
</div>
|
|
@endunless
|
|
|
|
@if (($usesStageLayout ?? false) && ! ($isGreenRoom ?? false) && ! ($inBreakout ?? false))
|
|
<div x-show="usesStageLayout && !isGreenRoom && !inBreakout" x-cloak
|
|
class="flex shrink-0 flex-col gap-2 border-b px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between sm:gap-3"
|
|
:class="stageLayout === 'panel' ? 'border-violet-500/25 bg-violet-500/10' : 'border-sky-500/25 bg-sky-500/10'">
|
|
<div class="flex min-w-0 items-start gap-2.5">
|
|
<span class="mt-1.5 flex h-2.5 w-2.5 shrink-0 rounded-full"
|
|
:class="stageLayout === 'panel' ? 'bg-violet-400' : 'bg-sky-400'"></span>
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold"
|
|
:class="stageLayout === 'panel' ? 'text-violet-100' : 'text-sky-100'"
|
|
x-text="stageLayoutLabel()"></p>
|
|
<p x-show="stageLayoutDescription()" class="truncate text-xs"
|
|
:class="stageLayout === 'panel' ? 'text-violet-200/85' : 'text-sky-200/85'"
|
|
x-text="stageLayoutDescription()"></p>
|
|
</div>
|
|
</div>
|
|
<button x-show="isHost" @click="openPanelSetup()" type="button"
|
|
class="inline-flex shrink-0 items-center gap-1.5 self-start rounded-lg border px-3 py-1.5 text-xs font-semibold transition-colors sm:self-center"
|
|
:class="stageLayout === 'panel'
|
|
? 'border-violet-400/40 bg-violet-500/20 text-violet-100 hover:bg-violet-500/30'
|
|
: 'border-sky-400/40 bg-sky-500/20 text-sky-100 hover:bg-sky-500/30'">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'panel', 'class' => 'h-3.5 w-3.5'])
|
|
Change layout
|
|
</button>
|
|
</div>
|
|
@endif
|
|
|
|
<div x-show="isHost && waitingCount > 0" x-cloak
|
|
class="flex shrink-0 items-center justify-between gap-3 border-b border-amber-500/30 bg-amber-500/15 px-4 py-2.5">
|
|
<div class="flex min-w-0 items-center gap-2 text-sm text-amber-100">
|
|
<span class="flex h-2 w-2 shrink-0 animate-pulse rounded-full bg-amber-400"></span>
|
|
<span class="truncate"
|
|
x-text="waitingCount === 1 ? '1 person is waiting to be admitted' : waitingCount + ' people are waiting to be admitted'"></span>
|
|
</div>
|
|
<button @click="openParticipantsPanel()" type="button"
|
|
class="shrink-0 rounded-lg bg-amber-500 px-3 py-1.5 text-xs font-semibold text-amber-950 transition-colors hover:bg-amber-400">
|
|
Review
|
|
</button>
|
|
</div>
|
|
|
|
<div x-show="audioPlaybackBlocked || needsMediaUnlock" x-cloak
|
|
class="flex shrink-0 items-center justify-between gap-3 border-b border-indigo-500/30 bg-indigo-500/15 px-4 py-2.5">
|
|
<p class="text-sm text-indigo-100"
|
|
x-text="needsMediaUnlock ? 'Microphone blocked — click to allow speaking and hearing others.' : 'Audio playback blocked — click to hear other participants.'"></p>
|
|
<button @click="unlockAllAudio()" type="button"
|
|
class="shrink-0 rounded-lg bg-indigo-500 px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-indigo-400">
|
|
Enable audio
|
|
</button>
|
|
</div>
|
|
|
|
<div x-show="shareOpen" x-cloak
|
|
@click.outside="if (! $event.target.closest('[data-share-trigger]')) shareOpen = false"
|
|
class="absolute right-4 top-14 z-50 w-80 rounded-xl bg-slate-900 p-4 shadow-2xl">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div>
|
|
<p class="text-sm font-medium text-white">Invite others</p>
|
|
<p class="mt-0.5 text-xs text-slate-400">Share this link so people can join the {{ $sessionNoun }}.</p>
|
|
</div>
|
|
<button @click="shareOpen = false" type="button" class="rounded p-1 text-slate-400 hover:bg-slate-800 hover:text-white" title="Close">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="mt-3 flex gap-2">
|
|
<input type="text" readonly :value="joinUrl"
|
|
class="min-w-0 flex-1 rounded-lg border-0 bg-slate-950 px-3 py-2 text-xs text-slate-200 ring-1 ring-slate-700/60">
|
|
<button @click="copyJoinLink()" type="button"
|
|
class="shrink-0 rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium text-white hover:bg-indigo-500"
|
|
x-text="shareCopied ? 'Copied' : 'Copy'"></button>
|
|
</div>
|
|
<p x-show="passcode" class="mt-3 text-xs text-slate-400">
|
|
Passcode: <span class="font-mono font-medium text-slate-200" x-text="passcode"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<main class="relative flex min-h-0 min-w-0 flex-1 flex-col p-4 pb-2 meet-room-main">
|
|
<div id="meet-stage" class="flex h-full min-h-0 flex-1 flex-col gap-3" :class="usesStageLayout ? 'meet-stage meet-stage--' + stageLayout : ''">
|
|
<div id="meet-stage-spotlight" class="meet-stage-spotlight relative min-h-0 flex-1 overflow-hidden rounded-xl bg-slate-900"></div>
|
|
<div id="video-grid" class="min-h-0 min-w-0" :class="audioOnly ? ((isSpace ? 'meet-audio-grid meet-space-grid flex-1' : 'meet-audio-grid flex-1')) : (usesStageLayout ? 'meet-stage-panel-grid flex-1 h-full' : 'meet-gallery-grid h-full')"></div>
|
|
<div id="meet-audience-strip" class="meet-audience-strip shrink-0"></div>
|
|
</div>
|
|
<div id="screen-share" class="absolute inset-4 hidden rounded-xl bg-black"></div>
|
|
|
|
<div x-show="watermark" class="pointer-events-none absolute right-6 top-6 rounded bg-black/40 px-3 py-1 text-xs text-white/80" x-text="displayName"></div>
|
|
|
|
<div x-show="liveCaptions && captionText" class="pointer-events-none absolute inset-x-0 bottom-20 flex justify-center px-4">
|
|
<p class="max-w-2xl rounded-lg bg-black/70 px-4 py-2 text-center text-sm text-white" x-text="captionText"></p>
|
|
</div>
|
|
|
|
<div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center gap-2">
|
|
<template x-for="reaction in floatingReactions" :key="reaction.id">
|
|
<span class="flex h-10 w-10 animate-bounce items-center justify-center rounded-full bg-slate-800/90">
|
|
<img x-show="reaction.kind === 'thumbs'" src="{{ asset('images/meet-icons/applause.svg') }}?v={{ @filemtime(public_path('images/meet-icons/applause.svg')) ?: '1' }}" alt="" class="meet-toolbar-icon h-5 w-5">
|
|
<img x-show="reaction.kind === 'heart'" src="{{ asset('images/meet-icons/react.svg') }}?v={{ @filemtime(public_path('images/meet-icons/react.svg')) ?: '1' }}" alt="" class="meet-toolbar-icon h-5 w-5">
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="relative shrink-0 bg-slate-950 py-4 sm:px-4 meet-room-footer">
|
|
@php
|
|
$toolbarShowMic = ($canPublish ?? true) && ((! ($audioOnlyPublish ?? false)) || ($speakGranted ?? false));
|
|
$toolbarShowVideo = ($canPublish ?? true) && ! ($isAudioOnly ?? false) && ! ($audioOnlyPublish ?? false);
|
|
$toolbarShowAudiencePrimary = ($isSpace ?? false)
|
|
? ! ($canPublish ?? true)
|
|
: (($usesSpeakAccess ?? false) && ((! ($canPublish ?? true)) || ($audioOnlyPublish ?? false)));
|
|
$toolbarShowAudienceDesktop = ($isSpace ?? false)
|
|
? ! ($canPublish ?? true)
|
|
: (($usesSpeakAccess ?? false)
|
|
? ((! ($canPublish ?? true)) || ($audioOnlyPublish ?? false))
|
|
: ($canPublish ?? true));
|
|
$toolbarShowReactPrimary = $toolbarShowAudiencePrimary
|
|
&& ! (($usesSpeakAccess ?? false) && ($speakGranted ?? false) && ($audioOnlyPublish ?? false));
|
|
@endphp
|
|
<div x-show="speakGranted && audioOnlyPublish" x-cloak
|
|
class="pointer-events-none absolute inset-x-0 -top-10 flex justify-center px-4 sm:-top-11">
|
|
<p class="rounded-full bg-emerald-500/15 px-4 py-1.5 text-xs font-medium text-emerald-300 ring-1 ring-emerald-500/30">
|
|
You can speak — your microphone is available
|
|
</p>
|
|
</div>
|
|
@if (($isSpace ?? false) && ($speakRequested ?? false) && ! ($canPublish ?? true))
|
|
<div x-show="isSpace && speakRequested && !canPublish" x-cloak
|
|
class="absolute inset-x-0 -top-14 flex justify-center px-4 sm:-top-16">
|
|
<div class="flex flex-wrap items-center justify-center gap-2 rounded-2xl bg-indigo-600/90 px-4 py-2.5 text-sm text-white shadow-lg ring-1 ring-indigo-400/40">
|
|
<span class="font-medium">You've been invited to speak</span>
|
|
<button type="button" @click="acceptSpaceSpeakInvitation()"
|
|
class="rounded-lg bg-white px-3 py-1 text-xs font-semibold text-indigo-700 hover:bg-indigo-50">Accept</button>
|
|
<button type="button" @click="declineSpaceSpeakInvitation()"
|
|
class="rounded-lg bg-indigo-800/80 px-3 py-1 text-xs font-medium text-indigo-100 hover:bg-indigo-800">Decline</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
<div class="meet-toolbar mx-auto max-w-5xl">
|
|
<div class="meet-toolbar__track sm:px-0">
|
|
<div class="meet-toolbar__primary sm:contents">
|
|
<button @click="toggleMute()" type="button"
|
|
x-show="showMicrophoneControl()"
|
|
data-toolbar-conditional
|
|
@unless($toolbarShowMic) style="display:none" @endunless
|
|
class="rounded-full p-3 transition-colors"
|
|
:class="isMuted ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
|
|
:title="isMuted ? 'Unmute' : 'Mute'">
|
|
<svg x-show="!isMuted" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 0 1 6 0v8.25a3 3 0 0 1-3 3Z"/></svg>
|
|
<svg x-show="isMuted" x-cloak class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 0 1 6 0v8.25a3 3 0 0 1-3 3Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m3 3 18 18"/></svg>
|
|
</button>
|
|
<button @click="toggleVideo()" type="button"
|
|
x-show="showVideoControl()"
|
|
data-toolbar-conditional
|
|
@unless($toolbarShowVideo) style="display:none" @endunless
|
|
class="rounded-full p-3 transition-colors"
|
|
:class="isVideoOff ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
|
|
:title="isVideoOff ? 'Turn camera on' : 'Turn camera off'">
|
|
<svg x-show="!isVideoOff" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
|
|
<svg x-show="isVideoOff" x-cloak class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/><path stroke-linecap="round" stroke-linejoin="round" d="m3 3 18 18"/></svg>
|
|
</button>
|
|
<button @click="toggleScreenShare()" type="button"
|
|
x-show="showVideoControl()"
|
|
data-toolbar-conditional
|
|
@unless($toolbarShowVideo) style="display:none" @endunless
|
|
class="rounded-full p-3 transition-colors"
|
|
:class="isScreenSharing ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
|
|
title="Share screen">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'screen-share'])
|
|
</button>
|
|
<button @click="raiseHand()" type="button"
|
|
x-show="showPrimaryToolbarAudienceControls()"
|
|
data-toolbar-conditional
|
|
@unless($toolbarShowAudiencePrimary) style="display:none" @endunless
|
|
class="rounded-full bg-slate-700 p-3 hover:bg-slate-600"
|
|
title="Raise hand">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'raise-hand'])
|
|
</button>
|
|
<button @click="sendReaction('thumbs')" type="button"
|
|
x-show="showPrimaryToolbarAudienceControls()"
|
|
data-toolbar-conditional
|
|
@unless($toolbarShowAudiencePrimary) style="display:none" @endunless
|
|
class="rounded-full bg-slate-700 p-3 hover:bg-slate-600"
|
|
title="Applause — sound plays when others join in">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'applause'])
|
|
</button>
|
|
<button @click="sendReaction('heart')" type="button"
|
|
x-show="showPrimaryToolbarAudienceControls() && !(usesSpeakAccess && speakGranted && audioOnlyPublish)"
|
|
data-toolbar-conditional
|
|
@unless($toolbarShowReactPrimary) style="display:none" @endunless
|
|
class="rounded-full bg-slate-700 p-3 hover:bg-slate-600"
|
|
title="React">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'react'])
|
|
</button>
|
|
@if ($isSpace ?? false)
|
|
<button @click="toggleChat()" type="button"
|
|
data-alpine-toolbar
|
|
class="rounded-full p-3 transition-colors sm:hidden"
|
|
:class="sidebarPanel === 'chat' ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
|
|
title="Chat">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'chat'])
|
|
</button>
|
|
@if ($participant->isHost())
|
|
<button @click="toggleRecording()" type="button"
|
|
data-alpine-toolbar
|
|
class="rounded-full p-3 transition-colors sm:hidden"
|
|
:class="isRecording ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
|
|
:title="isRecording ? 'Stop recording' : 'Start recording'">
|
|
<span class="block h-3 w-3 rounded-full" :class="isRecording ? 'bg-white animate-pulse' : 'bg-red-400'"></span>
|
|
</button>
|
|
@endif
|
|
@else
|
|
<button @click="toggleFeatures()" type="button"
|
|
data-alpine-toolbar
|
|
class="rounded-full p-3 transition-colors sm:hidden"
|
|
:class="sidebarPanel === 'features' ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
|
|
title="More options">
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/></svg>
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<button @click="raiseHand()" type="button" x-show="showAudienceControls()" data-toolbar-conditional @unless($toolbarShowAudienceDesktop) style="display:none" @endunless class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="Raise hand">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'raise-hand'])
|
|
</button>
|
|
<button @click="sendReaction('thumbs')" type="button" x-show="showAudienceControls()" data-toolbar-conditional @unless($toolbarShowAudienceDesktop) style="display:none" @endunless class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="Applause — sound plays when others join in">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'applause'])
|
|
</button>
|
|
<button @click="sendReaction('heart')" type="button" x-show="showAudienceControls()" data-toolbar-conditional @unless($toolbarShowAudienceDesktop) style="display:none" @endunless class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="React">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'react'])
|
|
</button>
|
|
@unless ($isSpace ?? false)
|
|
<button @click="toggleChat()" type="button"
|
|
data-alpine-toolbar
|
|
class="hidden rounded-full p-3 transition-colors sm:inline-flex"
|
|
:class="sidebarPanel === 'chat' ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
|
|
title="Chat">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'chat'])
|
|
</button>
|
|
<input type="file" id="meet-file-input" class="hidden" @change="uploadFile">
|
|
<button @click="toggleFeatures()" type="button"
|
|
data-alpine-toolbar
|
|
class="hidden items-center gap-1.5 rounded-full px-3.5 py-3 text-xs font-medium transition-colors sm:inline-flex"
|
|
:class="sidebarPanel === 'features' ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
|
|
title="More options">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/></svg>
|
|
More
|
|
</button>
|
|
@endunless
|
|
@if ($isSpace ?? false)
|
|
<button @click="toggleChat()" type="button"
|
|
data-alpine-toolbar
|
|
class="hidden rounded-full p-3 transition-colors sm:inline-flex"
|
|
:class="sidebarPanel === 'chat' ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
|
|
title="Chat">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'chat'])
|
|
</button>
|
|
@endif
|
|
@if (($isSpace ?? false) && $participant->isHost())
|
|
<button @click="toggleRecording()" type="button"
|
|
data-alpine-toolbar
|
|
class="hidden rounded-full p-3 transition-colors sm:inline-flex"
|
|
:class="isRecording ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
|
|
:title="isRecording ? 'Stop recording' : 'Start recording'">
|
|
<span class="block h-3 w-3 rounded-full" :class="isRecording ? 'bg-white animate-pulse' : 'bg-red-400'"></span>
|
|
</button>
|
|
@endif
|
|
|
|
<div class="meet-toolbar__divider sm:hidden" aria-hidden="true"></div>
|
|
|
|
<div class="meet-toolbar__actions sm:contents">
|
|
<form id="meet-leave-form" method="POST" action="{{ route('meet.room.leave', $session) }}" class="inline" @submit.prevent="submitLeave()">
|
|
@csrf
|
|
<button type="submit"
|
|
class="rounded-full bg-red-600 p-3 font-medium hover:bg-red-500 sm:px-5 sm:py-3 sm:text-sm"
|
|
title="Leave {{ $sessionNoun }}"
|
|
aria-label="Leave {{ $sessionNoun }}">
|
|
<span class="sm:hidden">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'leave'])
|
|
</span>
|
|
<span class="hidden sm:inline">Leave</span>
|
|
</button>
|
|
</form>
|
|
@if ($participant->isHost())
|
|
<button @click="openEndMeetingConfirm()" type="button"
|
|
class="rounded-full bg-red-950 p-3 text-red-400 hover:bg-red-900 sm:px-4 sm:py-3 sm:text-sm"
|
|
title="End {{ $sessionNoun }} for everyone"
|
|
aria-label="End {{ $sessionNoun }} for everyone">
|
|
<span class="sm:hidden">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'end'])
|
|
</span>
|
|
<span class="hidden sm:inline">End</span>
|
|
</button>
|
|
<form id="meet-end-form" method="POST" action="{{ route('meet.room.end', $session) }}" class="hidden">
|
|
@csrf
|
|
</form>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
@unless ($isSpace ?? false)
|
|
<div x-show="breakoutModalOpen" x-cloak
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
|
|
@keydown.escape.window="breakoutModalOpen = false">
|
|
<div class="w-full max-w-sm rounded-2xl bg-slate-900 p-5 shadow-2xl" @click.outside="breakoutModalOpen = false">
|
|
<h3 class="text-base font-semibold text-white">Start breakout rooms</h3>
|
|
<p class="mt-1 text-sm text-slate-400">Attendees and speakers are split into smaller groups with full meeting controls. You stay on the main stage.</p>
|
|
<form @submit.prevent="submitBreakouts()" class="mt-4 space-y-4">
|
|
<div>
|
|
<label for="breakout-count" class="sr-only">Number of rooms</label>
|
|
<input id="breakout-count" type="number" min="1" max="20" x-model="breakoutCount"
|
|
class="w-full rounded-xl border-0 bg-slate-950 px-3 py-2.5 text-sm text-white ring-1 ring-slate-700/60 focus:ring-indigo-500">
|
|
</div>
|
|
<div class="flex justify-end gap-2">
|
|
<button type="button" @click="breakoutModalOpen = false"
|
|
class="rounded-xl px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800">Cancel</button>
|
|
<button type="submit"
|
|
class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500">Create rooms</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endunless
|
|
|
|
<div x-show="endMeetingConfirmOpen" x-cloak
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
|
|
@keydown.escape.window="endMeetingConfirmOpen = false">
|
|
<div class="w-full max-w-sm rounded-2xl bg-slate-900 p-5 shadow-2xl" @click.outside="endMeetingConfirmOpen = false">
|
|
<h3 class="text-base font-semibold text-white">End {{ $sessionNoun }} for everyone?</h3>
|
|
<p class="mt-2 text-sm text-slate-400">All participants will be disconnected and the session will close.</p>
|
|
<div class="mt-5 flex justify-end gap-2">
|
|
<button type="button" @click="endMeetingConfirmOpen = false"
|
|
class="rounded-xl px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800">Cancel</button>
|
|
<button type="button" @click="submitEndMeeting()"
|
|
class="rounded-xl bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-500">End {{ $sessionNoun }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="meet-room-panels-stack max-sm:contents"
|
|
:class="sidebarPanel ? 'is-open' : ''">
|
|
<div x-show="sidebarPanel" x-cloak
|
|
class="meet-room-panel__backdrop fixed inset-0 z-40 sm:hidden"
|
|
@click="closeSidebar()"
|
|
aria-hidden="true"></div>
|
|
|
|
<x-meet.room.panel show="sidebarPanel === 'chat'" title="{{ ($isSpace ?? false) ? 'Room chat' : $sessionNounTitle.' chat' }}">
|
|
<x-slot:subtitle>
|
|
<p>Messages are visible to everyone in the {{ ($isSpace ?? false) ? 'room' : 'call' }}</p>
|
|
</x-slot:subtitle>
|
|
|
|
<div class="flex min-h-0 flex-1 flex-col">
|
|
<div class="flex-1 space-y-3 overflow-y-auto" id="chat-messages">
|
|
@foreach ($messages as $message)
|
|
@php $isOwn = $message->sender_name === $participant->display_name; @endphp
|
|
<div class="meet-chat-bubble {{ $isOwn ? 'meet-chat-bubble--own' : '' }}">
|
|
<div class="rounded-2xl px-3 py-2 {{ $isOwn ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-100' }}">
|
|
@unless ($isOwn)
|
|
<p class="mb-0.5 text-xs font-medium text-sky-300">{{ $message->sender_name }}</p>
|
|
@endunless
|
|
<p class="text-sm leading-relaxed">{{ $message->body }}</p>
|
|
</div>
|
|
<p class="mt-1 text-[10px] text-slate-500 {{ $isOwn ? 'text-right' : '' }}">{{ $message->created_at->format('g:i A') }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<form @submit.prevent="sendChat" class="mt-3 shrink-0">
|
|
<div class="flex items-end gap-2">
|
|
<input type="text" x-model="chatInput" placeholder="Write a message…"
|
|
class="flex-1 rounded-xl border-0 bg-slate-800 px-3 py-2.5 text-sm text-white placeholder:text-slate-500 focus:ring-2 focus:ring-indigo-500">
|
|
<button type="submit"
|
|
class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-500 disabled:opacity-50"
|
|
:disabled="!chatInput.trim()">Send</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</x-meet.room.panel>
|
|
|
|
@unless ($isSpace ?? false)
|
|
<x-meet.room.panel show="sidebarPanel === 'programme'" title="Programme">
|
|
<x-slot:subtitle>
|
|
<p>Lineup from Events when linked to this {{ $sessionNoun }}</p>
|
|
</x-slot:subtitle>
|
|
|
|
<div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
|
|
@include('meet.room.partials.programme-panel', [
|
|
'programmeSnapshot' => $programmeSnapshot,
|
|
'linkedProgrammeItems' => $linkedProgrammeItems ?? [],
|
|
'sessionNoun' => $sessionNoun,
|
|
])
|
|
</div>
|
|
</x-meet.room.panel>
|
|
@endunless
|
|
|
|
<x-meet.room.panel show="sidebarPanel === 'participants'" :title="null">
|
|
<x-slot:subtitle>
|
|
<template x-if="usesStageLayout">
|
|
<div>
|
|
<p x-text="speakerCount() + (speakerCount() === 1 ? ' speaker' : ' speakers') + ' on stage'"></p>
|
|
<p x-show="activeSpeakerCount() >= 1" x-cloak class="text-emerald-400" x-text="activeSpeakersMessage()"></p>
|
|
</div>
|
|
</template>
|
|
<template x-if="!usesStageLayout">
|
|
<div>
|
|
<p x-text="participantCount() + (participantCount() === 1 ? ' person' : ' people') + ' in this call'"></p>
|
|
<p x-show="activeSpeakerCount() >= 2" x-cloak class="text-emerald-400" x-text="activeSpeakersMessage()"></p>
|
|
</div>
|
|
</template>
|
|
</x-slot:subtitle>
|
|
<x-slot:header>
|
|
<h2 class="text-base font-semibold text-white" x-text="isSpace ? 'People' : (usesStageLayout ? 'Speakers' : 'Participants')"></h2>
|
|
</x-slot:header>
|
|
|
|
<div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
|
|
<template x-if="isSpace && isHost && handRaisedParticipants().length">
|
|
<div class="mb-3 border-b border-slate-800 pb-3">
|
|
<p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-amber-300">
|
|
Raised hands
|
|
<span class="ml-1 rounded-full bg-amber-500/20 px-1.5 py-0.5 text-[10px] text-amber-200"
|
|
x-text="handRaisedParticipants().length"></span>
|
|
</p>
|
|
<template x-for="person in handRaisedParticipants()" :key="'hand-'+person.uuid">
|
|
<div class="flex items-center gap-3 rounded-xl px-2 py-2.5">
|
|
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-500/20 text-sm font-semibold text-amber-200"
|
|
x-text="participantInitials(person.display_name)"></span>
|
|
<span class="min-w-0 flex-1">
|
|
<span class="block truncate text-sm font-medium text-white" x-text="person.display_name"></span>
|
|
<span class="block text-xs text-amber-200/80">Wants to speak</span>
|
|
</span>
|
|
<button type="button" @click="inviteSpaceSpeaker(person.uuid)"
|
|
class="rounded-lg bg-emerald-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-emerald-500">Invite to speak</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<template x-if="isSpace && isHost && spaceSpeakInvitePendingParticipants().length">
|
|
<div class="mb-3 border-b border-slate-800 pb-3">
|
|
<p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-sky-300">
|
|
Invited to speak
|
|
<span class="ml-1 rounded-full bg-sky-500/20 px-1.5 py-0.5 text-[10px] text-sky-200"
|
|
x-text="spaceSpeakInvitePendingParticipants().length"></span>
|
|
</p>
|
|
<template x-for="person in spaceSpeakInvitePendingParticipants()" :key="'space-invite-'+person.uuid">
|
|
<div class="flex items-center gap-3 rounded-xl px-2 py-2.5">
|
|
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-500/20 text-sm font-semibold text-sky-200"
|
|
x-text="participantInitials(person.display_name)"></span>
|
|
<span class="min-w-0 flex-1">
|
|
<span class="block truncate text-sm font-medium text-white" x-text="person.display_name"></span>
|
|
<span class="block text-xs text-sky-200/80">Waiting for response</span>
|
|
</span>
|
|
<button type="button" @click="dismissSpaceSpeakInvitation(person.uuid)"
|
|
class="rounded-lg bg-slate-700 px-2.5 py-1 text-xs font-medium text-slate-200 hover:bg-slate-600">Cancel invite</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<template x-if="isHost && waitingParticipants().length">
|
|
<div class="mb-3 border-b border-slate-800 pb-3">
|
|
<p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-amber-300">
|
|
Waiting to join
|
|
<span class="ml-1 rounded-full bg-amber-500/20 px-1.5 py-0.5 text-[10px] text-amber-200"
|
|
x-text="waitingParticipants().length"></span>
|
|
</p>
|
|
<template x-for="person in waitingParticipants()" :key="'wait-'+person.uuid">
|
|
<div class="flex items-center gap-3 rounded-xl px-2 py-2.5">
|
|
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-500/20 text-sm font-semibold text-amber-200"
|
|
x-text="participantInitials(person.display_name)"></span>
|
|
<span class="min-w-0 flex-1">
|
|
<span class="block truncate text-sm font-medium text-white" x-text="person.display_name"></span>
|
|
<span class="block text-xs text-amber-200/80">Waiting for admission</span>
|
|
</span>
|
|
<span class="flex shrink-0 gap-1">
|
|
<button type="button" @click="admitParticipant(person.uuid)"
|
|
class="rounded-lg bg-emerald-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-emerald-500">Admit</button>
|
|
<button type="button" @click="denyParticipant(person.uuid)"
|
|
class="rounded-lg bg-slate-700 px-2.5 py-1 text-xs font-medium text-slate-200 hover:bg-slate-600">Deny</button>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<template x-if="canManageSpeak && speakRequestParticipants().length">
|
|
<div class="mb-3 border-b border-slate-800 pb-3">
|
|
<p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-sky-300">
|
|
Requesting to speak
|
|
<span class="ml-1 rounded-full bg-sky-500/20 px-1.5 py-0.5 text-[10px] text-sky-200"
|
|
x-text="speakRequestParticipants().length"></span>
|
|
</p>
|
|
<template x-for="person in speakRequestParticipants()" :key="'speak-req-'+person.uuid">
|
|
<div class="flex items-center gap-3 rounded-xl px-2 py-2.5">
|
|
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-500/20 text-sm font-semibold text-sky-200"
|
|
x-text="participantInitials(person.display_name)"></span>
|
|
<span class="min-w-0 flex-1">
|
|
<span class="block truncate text-sm font-medium text-white" x-text="person.display_name"></span>
|
|
<span class="block text-xs text-sky-200/80">Wants to speak</span>
|
|
</span>
|
|
<span class="flex shrink-0 gap-1">
|
|
<button type="button" @click="grantSpeakAccess(person.uuid)"
|
|
class="rounded-lg bg-emerald-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-emerald-500">Allow</button>
|
|
<button type="button" @click="dismissSpeakRequest(person.uuid)"
|
|
class="rounded-lg bg-slate-700 px-2.5 py-1 text-xs font-medium text-slate-200 hover:bg-slate-600">Dismiss</button>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<template x-for="person in (usesStageLayout ? speakerParticipantsSorted() : inCallParticipantsSorted())" :key="person.uuid">
|
|
<div class="flex items-center gap-3 rounded-xl px-2 py-2.5"
|
|
:class="isSpeaking(person.uuid) ? 'bg-emerald-500/10 ring-1 ring-emerald-500/40' : ''">
|
|
<span class="relative flex h-10 w-10 shrink-0">
|
|
<img x-show="person.avatar_url"
|
|
:src="person.avatar_url"
|
|
alt=""
|
|
class="h-10 w-10 rounded-full object-cover"
|
|
:class="isSpeaking(person.uuid) ? 'ring-2 ring-emerald-400 ring-offset-2 ring-offset-slate-900' : ''">
|
|
<span x-show="!person.avatar_url"
|
|
class="flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold text-white"
|
|
:class="isSpeaking(person.uuid) ? 'ring-2 ring-emerald-400 ring-offset-2 ring-offset-slate-900' : ''"
|
|
:style="avatarStyle(person.display_name)"
|
|
x-text="participantInitials(person.display_name)"></span>
|
|
</span>
|
|
<span class="min-w-0 flex-1">
|
|
<span class="block truncate text-sm font-medium text-white" x-text="person.display_name"></span>
|
|
<span x-show="isSpeaking(person.uuid)" class="block text-xs font-medium text-emerald-400">Speaking</span>
|
|
<span x-show="!isSpeaking(person.uuid)" class="block text-xs text-slate-400" x-text="roleLabel(person.role)"></span>
|
|
</span>
|
|
<span class="flex shrink-0 items-center gap-1">
|
|
<button x-show="usesStageLayout && isHost && isSpeakerPerson(person) && !matchesSpotlightKey(resolveSpotlightKey(), person)"
|
|
type="button" @click="setSpotlight(spotlightKey(person))"
|
|
class="rounded-lg bg-indigo-600 px-2 py-1 text-[10px] font-medium text-white hover:bg-indigo-500">
|
|
Spotlight
|
|
</button>
|
|
<button x-show="isConference && isHost && isGreenRoom && person.user_ref && !['host', 'co_host', 'panelist'].includes(person.role)"
|
|
type="button" @click="makeSpeaker(person.user_ref)"
|
|
class="rounded-lg bg-violet-600 px-2 py-1 text-[10px] font-medium text-white hover:bg-violet-500">
|
|
Make speaker
|
|
</button>
|
|
<button x-show="isSpace && isHost && person.role === 'attendee' && !person.speak_requested"
|
|
type="button" @click="inviteSpaceSpeaker(person.uuid)"
|
|
class="rounded-lg bg-emerald-600 px-2 py-1 text-[10px] font-medium text-white hover:bg-emerald-500">
|
|
Invite to speak
|
|
</button>
|
|
<button x-show="isSpace && isHost && person.role === 'panelist'"
|
|
type="button" @click="promoteSpaceCoHost(person.uuid)"
|
|
class="rounded-lg bg-violet-600 px-2 py-1 text-[10px] font-medium text-white hover:bg-violet-500">
|
|
Make co-host
|
|
</button>
|
|
<button x-show="isSpace && isHost && (person.role === 'panelist' || person.role === 'co_host')"
|
|
type="button" @click="demoteSpaceSpeaker(person.uuid)"
|
|
class="rounded-lg bg-slate-600 px-2 py-1 text-[10px] font-medium text-slate-100 hover:bg-slate-500">
|
|
Move to audience
|
|
</button>
|
|
<button x-show="canManageSpeak && usesSpeakAccess && person.role === 'attendee' && !person.speak_granted"
|
|
type="button" @click="grantSpeakAccess(person.uuid)"
|
|
class="rounded-lg bg-emerald-600 px-2 py-1 text-[10px] font-medium text-white hover:bg-emerald-500">
|
|
Invite to speak
|
|
</button>
|
|
<button x-show="canManageSpeak && usesSpeakAccess && person.speak_granted"
|
|
type="button" @click="revokeSpeakAccess(person.uuid)"
|
|
class="rounded-lg bg-slate-600 px-2 py-1 text-[10px] font-medium text-slate-100 hover:bg-slate-500">
|
|
Revoke speak
|
|
</button>
|
|
</span>
|
|
<span class="flex shrink-0 items-center gap-1 text-slate-400">
|
|
<span x-show="person.speak_granted" class="rounded-full bg-emerald-500/20 px-1.5 py-0.5 text-[10px] font-medium text-emerald-300" title="Can speak">Mic</span>
|
|
<span x-show="person.speak_requested && !person.speak_granted" class="rounded-full bg-sky-500/20 p-1 text-sky-300" title="Requested to speak">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'speak', 'class' => 'h-3.5 w-3.5'])
|
|
</span>
|
|
<span x-show="isSpeaking(person.uuid)" class="meet-speaking-badge rounded-full bg-emerald-500/20 p-1 text-emerald-300" 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 x-show="person.hand_raised" class="rounded-full bg-amber-500/20 p-1 text-amber-300" title="Hand raised">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'raise-hand', 'class' => 'h-3.5 w-3.5'])
|
|
</span>
|
|
<svg x-show="person.is_muted" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" title="Muted">
|
|
<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>
|
|
<svg x-show="person.is_video_off" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" title="Camera off">
|
|
<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>
|
|
</template>
|
|
<p x-show="(usesStageLayout ? speakerParticipantsSorted().length : inCallParticipants().length) === 0 && waitingParticipants().length === 0" class="px-2 py-4 text-center text-xs text-slate-500" x-text="usesStageLayout ? 'No speakers yet.' : 'No participants yet.'"></p>
|
|
</div>
|
|
</x-meet.room.panel>
|
|
|
|
<div x-show="panelSetupOpen" x-cloak
|
|
class="fixed inset-0 z-50 flex items-end justify-center bg-black/60 p-4 backdrop-blur-sm sm:items-center"
|
|
@keydown.escape.window="cancelPanelSetup()">
|
|
<div class="w-full max-w-lg rounded-2xl bg-slate-900 p-5 shadow-2xl" @click.outside="cancelPanelSetup()">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h3 class="text-base font-semibold text-white">Stage layout</h3>
|
|
<p class="mt-1 text-sm text-slate-400">Choose how speakers appear on stage. Changes apply when you save.</p>
|
|
</div>
|
|
<button @click="cancelPanelSetup()" type="button" class="rounded-lg p-1 text-slate-400 hover:bg-slate-800 hover:text-white">
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-5 grid gap-3 sm:grid-cols-2">
|
|
<button type="button" @click="selectStageLayout('plenary')"
|
|
class="rounded-xl border p-4 text-left transition-colors"
|
|
:class="stageLayout === 'plenary'
|
|
? 'border-sky-500/60 bg-sky-500/10 ring-1 ring-sky-500/40'
|
|
: 'border-slate-700/60 bg-slate-950/60 hover:border-slate-600'">
|
|
<p class="text-sm font-semibold text-white">Plenary</p>
|
|
<p class="mt-1 text-xs leading-relaxed text-slate-400">One main speaker fills the stage.</p>
|
|
</button>
|
|
<button type="button" @click="selectStageLayout('panel')"
|
|
class="rounded-xl border p-4 text-left transition-colors"
|
|
:class="stageLayout === 'panel'
|
|
? 'border-violet-500/60 bg-violet-500/10 ring-1 ring-violet-500/40'
|
|
: 'border-slate-700/60 bg-slate-950/60 hover:border-slate-600'">
|
|
<p class="text-sm font-semibold text-white">Panel discussion</p>
|
|
<p class="mt-1 text-xs leading-relaxed text-slate-400">Multiple speakers shown together in a split-screen grid. Assign speakers to each panel below.</p>
|
|
</button>
|
|
</div>
|
|
|
|
<p x-show="stageLayout === 'plenary'" x-cloak class="mt-3 rounded-lg border border-sky-500/30 bg-sky-500/10 px-3 py-2 text-xs text-sky-100">
|
|
Plenary shows one speaker on the main stage.
|
|
</p>
|
|
|
|
<div x-show="stageLayout === 'plenary'" x-cloak class="mt-5 space-y-2">
|
|
<p class="text-xs font-semibold uppercase tracking-wide text-slate-400">On stage</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<template x-for="speaker in speakerParticipantsSorted()" :key="'plenary-' + speaker.uuid">
|
|
<button type="button" @click="setSpotlight(spotlightKey(speaker))"
|
|
class="rounded-full px-3 py-1.5 text-xs font-medium transition-colors"
|
|
:class="matchesSpotlightKey(resolveSpotlightKey(), speaker)
|
|
? 'bg-sky-600 text-white ring-1 ring-sky-400/60'
|
|
: 'bg-slate-800 text-slate-300 hover:bg-slate-700'">
|
|
<span x-text="speaker.display_name"></span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<p x-show="stageLayout === 'panel'" x-cloak class="mt-3 rounded-lg border border-violet-500/30 bg-violet-500/10 px-3 py-2 text-xs text-violet-100">
|
|
Switching to panel discussion changes the live stage to a multi-speaker grid for everyone in the room.
|
|
</p>
|
|
|
|
<div x-show="stageLayout === 'panel'" x-cloak class="mt-5 space-y-3">
|
|
<template x-for="(panel, index) in panels" :key="panel.id">
|
|
<div class="rounded-xl border border-slate-700/60 bg-slate-950/60 p-3">
|
|
<div class="flex items-center gap-2">
|
|
<input type="text" x-model="panel.name" placeholder="Panel name"
|
|
class="min-w-0 flex-1 rounded-lg border-0 bg-slate-900 px-3 py-2 text-sm text-white ring-1 ring-slate-700/60">
|
|
<button type="button" @click="setActivePanel(panel.id)"
|
|
class="rounded-lg px-2.5 py-1.5 text-xs font-medium"
|
|
:class="activePanelId === panel.id ? 'bg-violet-600 text-white' : 'bg-slate-800 text-slate-300'">
|
|
<span x-text="activePanelId === panel.id ? 'Active' : 'Show'"></span>
|
|
</button>
|
|
<button type="button" @click="removePanel(index)" class="rounded-lg p-1.5 text-slate-400 hover:bg-slate-800 hover:text-red-300">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
<template x-for="speaker in speakerParticipantsSorted()" :key="panel.id + '-' + speaker.uuid">
|
|
<label class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs"
|
|
:class="panel.speaker_refs.includes(spotlightKey(speaker)) ? 'bg-violet-600/30 text-violet-100 ring-1 ring-violet-500/50' : 'bg-slate-800 text-slate-300'">
|
|
<input type="checkbox" class="sr-only"
|
|
:checked="panel.speaker_refs.includes(spotlightKey(speaker))"
|
|
@change="togglePanelSpeaker(panel, spotlightKey(speaker))">
|
|
<span x-text="speaker.display_name"></span>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<button type="button" @click="addPanel()"
|
|
class="w-full rounded-xl border border-dashed border-slate-600 px-3 py-2.5 text-sm font-medium text-slate-300 hover:border-violet-500/50 hover:text-violet-200">
|
|
+ Add panel
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-6 flex justify-end gap-2">
|
|
<button type="button" @click="cancelPanelSetup()"
|
|
class="rounded-xl px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800">Cancel</button>
|
|
<button type="button" @click="saveStageLayout()" :disabled="savingStageLayout"
|
|
class="rounded-xl bg-violet-600 px-4 py-2 text-sm font-medium text-white hover:bg-violet-500 disabled:opacity-60">
|
|
<span x-text="savingStageLayout ? 'Saving…' : 'Save layout'"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@unless ($isSpace ?? false)
|
|
<x-meet.room.panel show="sidebarPanel === 'features'" title="More options">
|
|
<x-slot:subtitle>
|
|
<p>{{ ($isSpace ?? false) ? 'Audio room controls' : $sessionNounTitle.' tools and extras' }}</p>
|
|
</x-slot:subtitle>
|
|
|
|
<div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
|
|
<div class="space-y-1">
|
|
<div class="space-y-1 sm:hidden" x-show="showAudienceControls()">
|
|
<x-meet.room.menu-item icon="chat" title="Chat" subtitle="Open the {{ $sessionNoun }} chat"
|
|
x-show="!isSpace"
|
|
@click="toggleChat()" />
|
|
<x-meet.room.menu-item icon="raise-hand" title="Raise hand" subtitle="Signal that you have something to share"
|
|
x-show="!usesSpeakAccess || isSpace"
|
|
@click="raiseHand(); closeSidebar()" />
|
|
<x-meet.room.menu-item icon="applause" title="Applause" subtitle="Send applause — sound plays when others join in"
|
|
x-show="!usesSpeakAccess || isSpace"
|
|
@click="sendReaction('thumbs'); closeSidebar()" />
|
|
<x-meet.room.menu-item icon="react" title="React" subtitle="Send a heart to the room"
|
|
x-show="isSpace || !usesSpeakAccess || (usesSpeakAccess && speakGranted && audioOnlyPublish)"
|
|
@click="sendReaction('heart'); closeSidebar()" />
|
|
<div class="my-1 border-t border-slate-800"></div>
|
|
</div>
|
|
<div class="space-y-1" x-show="usesSpeakAccess && !speakGranted && !speakRequested && showAudienceControls()">
|
|
<x-meet.room.menu-item icon="speak" title="Request to speak" subtitle="Ask the host to enable your microphone"
|
|
@click="requestSpeak(); closeSidebar()" />
|
|
<div class="my-1 border-t border-slate-800"></div>
|
|
</div>
|
|
<div class="space-y-1" x-show="usesSpeakAccess && speakRequested && !speakGranted">
|
|
<button type="button" disabled
|
|
class="flex w-full cursor-default items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-400">
|
|
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-sky-500/15">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'speak', 'class' => 'h-5 w-5'])
|
|
</span>
|
|
<span class="min-w-0">
|
|
<span class="block font-medium text-sky-300">Speak request sent</span>
|
|
<span class="block text-xs text-slate-500">Waiting for the host to allow your microphone</span>
|
|
</span>
|
|
</button>
|
|
<button type="button" @click="cancelSpeakRequest(); closeSidebar()"
|
|
class="ml-12 text-xs font-medium text-slate-400 hover:text-slate-200">Cancel request</button>
|
|
<div class="my-1 border-t border-slate-800"></div>
|
|
</div>
|
|
<div class="space-y-1" x-show="usesSpeakAccess && speakGranted && audioOnlyPublish">
|
|
<button type="button" disabled
|
|
class="flex w-full cursor-default items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-400">
|
|
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-emerald-500/15">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'speak', 'class' => 'h-5 w-5'])
|
|
</span>
|
|
<span class="min-w-0">
|
|
<span class="block font-medium text-emerald-300">You can speak</span>
|
|
<span class="block text-xs text-slate-500">Your microphone is available — use the mic control below</span>
|
|
</span>
|
|
</button>
|
|
<div class="my-1 border-t border-slate-800"></div>
|
|
</div>
|
|
<div class="space-y-1 sm:hidden" x-show="showStagePublisherControls()">
|
|
<x-meet.room.menu-item icon="chat" title="Chat" subtitle="Open the {{ $sessionNoun }} chat"
|
|
x-show="!isSpace"
|
|
@click="toggleChat()" />
|
|
<div class="my-1 border-t border-slate-800"></div>
|
|
</div>
|
|
|
|
@unless ($isSpace ?? false)
|
|
<x-meet.room.menu-item icon="programme" title="Programme" :subtitle="'View the '.$sessionNoun.' lineup from Events'"
|
|
@click="toggleProgramme()" />
|
|
|
|
<button @click="openUploadPicker()" type="button"
|
|
class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-200 transition-colors hover:bg-slate-800">
|
|
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-slate-800/80">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'upload-file', 'class' => 'h-5 w-5'])
|
|
</span>
|
|
<span class="min-w-0">
|
|
<span class="block font-medium">Share files</span>
|
|
<span class="block text-xs text-slate-400">Upload a file for everyone in the call</span>
|
|
</span>
|
|
</button>
|
|
@endunless
|
|
|
|
@if ($participant->isHost())
|
|
<button @click="toggleRecordingFromMenu()" type="button"
|
|
class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-200 transition-colors hover:bg-slate-800">
|
|
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-red-500/15">
|
|
<span class="h-3 w-3 rounded-full" :class="isRecording ? 'bg-red-500 animate-pulse' : 'bg-red-400'"></span>
|
|
</span>
|
|
<span class="min-w-0">
|
|
<span class="block font-medium" x-text="isRecording ? 'Stop recording' : 'Start recording'"></span>
|
|
<span class="block text-xs text-slate-400">Save this {{ $sessionNoun }} to the cloud</span>
|
|
</span>
|
|
</button>
|
|
|
|
@unless ($isSpace ?? false)
|
|
<button @click="toggleLockFromMenu()" type="button"
|
|
class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-200 transition-colors hover:bg-slate-800">
|
|
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-slate-800/80">
|
|
@include('meet.room.partials.meet-icon', ['icon' => 'lock', 'class' => 'h-5 w-5'])
|
|
</span>
|
|
<span class="min-w-0">
|
|
<span class="block font-medium" x-text="isLocked ? 'Unlock ' + sessionNoun() : 'Lock ' + sessionNoun()"></span>
|
|
<span class="block text-xs text-slate-400">Control who can join</span>
|
|
</span>
|
|
</button>
|
|
|
|
<x-meet.room.menu-item icon="start-breakout" title="Start breakouts" subtitle="Split participants into smaller rooms"
|
|
@click="createBreakouts()" />
|
|
|
|
<x-meet.room.menu-item icon="close-breakout" title="Close breakouts" subtitle="Bring everyone back to the main room"
|
|
@click="closeBreakouts()" />
|
|
|
|
<div x-show="breakoutsActive" x-cloak class="mt-3 space-y-2 border-t border-slate-800 pt-3">
|
|
<p class="px-1 text-xs font-semibold uppercase tracking-wide text-slate-500">Broadcast to breakouts</p>
|
|
<form @submit.prevent="broadcastToBreakouts()" class="flex gap-2">
|
|
<input type="text" x-model="breakoutBroadcastInput" placeholder="Message all breakout rooms…"
|
|
class="flex-1 rounded-lg border-0 bg-slate-950 px-3 py-2 text-sm text-white placeholder:text-slate-500 ring-1 ring-slate-700/60">
|
|
<button type="submit" class="rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium text-white hover:bg-indigo-500">Send</button>
|
|
</form>
|
|
</div>
|
|
@endunless
|
|
@endif
|
|
</div>
|
|
|
|
@if ($isWebinar ?? false)
|
|
<div class="mt-4 border-t border-slate-800 pt-4">
|
|
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Q&A</p>
|
|
<ul class="mt-2 max-h-36 space-y-2 overflow-y-auto">
|
|
<template x-for="item in qaItems" :key="item.uuid">
|
|
<li class="rounded-lg bg-slate-800/80 px-3 py-2 text-sm">
|
|
<span class="font-medium text-sky-300" x-text="item.asker_name"></span>
|
|
<span class="text-slate-300" x-text="': ' + item.question"></span>
|
|
</li>
|
|
</template>
|
|
<li x-show="qaItems.length === 0" class="text-xs text-slate-500">No questions yet.</li>
|
|
</ul>
|
|
<form @submit.prevent="submitQuestion" class="mt-3 flex gap-2">
|
|
<input type="text" x-model="qaInput" placeholder="Ask a question…"
|
|
class="flex-1 rounded-lg border-0 bg-slate-950 px-3 py-2 text-sm text-white placeholder:text-slate-500 ring-1 ring-slate-700/60">
|
|
<button type="submit" class="rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium hover:bg-indigo-500">Send</button>
|
|
</form>
|
|
</div>
|
|
@endif
|
|
|
|
<p x-show="breakoutBroadcast && !isSpace" class="mt-3 rounded-xl bg-amber-950/40 px-3 py-3 text-sm text-amber-100" x-text="breakoutBroadcast"></p>
|
|
</div>
|
|
</x-meet.room.panel>
|
|
@endunless
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|