Add share meeting link control to the live room UI.
Deploy Ladill Meet / deploy (push) Successful in 1m16s
Deploy Ladill Meet / deploy (push) Successful in 1m16s
Expose join URL and passcode in the room shell with header and toolbar share buttons, native share on supported devices, and a copy-link popover. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
@@ -41,6 +41,9 @@
|
||||
data-files-upload-url="{{ route('meet.room.files.upload', $session) }}"
|
||||
data-whiteboard-url="{{ route('meet.room.whiteboard.show', $session) }}"
|
||||
data-whiteboard-save-url="{{ route('meet.room.whiteboard.save', $session) }}"
|
||||
data-join-url="{{ $room->joinUrl() }}"
|
||||
data-room-title="{{ $room->title }}"
|
||||
data-passcode="{{ $room->passcode ?? '' }}"
|
||||
data-csrf="{{ csrf_token() }}"
|
||||
hidden></div>
|
||||
|
||||
@@ -50,19 +53,48 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="flex h-full flex-col">
|
||||
<div class="relative flex h-full flex-col">
|
||||
<header class="flex shrink-0 items-center justify-between border-b border-slate-800 px-4 py-3">
|
||||
<div>
|
||||
<h1 class="text-sm font-semibold">{{ $room->title }}</h1>
|
||||
<p class="text-xs text-slate-400" x-text="connectionStatus"></p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs text-slate-400">
|
||||
<button @click="openShare()" type="button"
|
||||
class="inline-flex items-center gap-1.5 rounded-lg border border-slate-700 bg-slate-900 px-2.5 py-1.5 text-xs font-medium text-slate-200 transition-colors hover:bg-slate-800"
|
||||
title="Share meeting link">
|
||||
<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="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.935-2.186 2.25 2.25 0 0 0-3.935 2.186Z"/></svg>
|
||||
Share
|
||||
</button>
|
||||
<span x-show="isRecording" class="rounded bg-red-600 px-2 py-0.5 font-medium text-white">REC</span>
|
||||
<span x-show="isLocked" class="rounded bg-amber-600 px-2 py-0.5 font-medium text-white">Locked</span>
|
||||
<span x-text="participants.length + ' participants'"></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div x-show="shareOpen" x-cloak @click.outside="shareOpen = false"
|
||||
class="absolute right-4 top-14 z-50 w-80 rounded-xl border border-slate-700 bg-slate-900 p-4 shadow-xl">
|
||||
<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 meeting.</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-slate-700 bg-slate-950 px-3 py-2 text-xs text-slate-200">
|
||||
<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>
|
||||
|
||||
<div class="flex min-h-0 flex-1">
|
||||
<main class="relative min-w-0 flex-1 p-4">
|
||||
<div id="video-grid" class="grid h-full gap-2 sm:grid-cols-2 lg:grid-cols-3"></div>
|
||||
@@ -127,6 +159,11 @@
|
||||
title="Share screen">
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"/></svg>
|
||||
</button>
|
||||
<button @click="openShare()" type="button"
|
||||
class="rounded-full bg-slate-700 p-3 hover:bg-slate-600"
|
||||
title="Share meeting link">
|
||||
<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="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.935-2.186 2.25 2.25 0 0 0-3.935 2.186Z"/></svg>
|
||||
</button>
|
||||
<button @click="raiseHand()" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600" title="Raise hand">
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.05 4.575a1.575 1.575 0 1 0-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 0 1 3.15 0v1.5m-3.15 3v6.75a1.575 1.575 0 0 0 3.15 0V10.5m-6.3 0H4.875A1.125 1.125 0 0 0 3.75 11.625v4.125c0 .621.504 1.125 1.125 1.125h2.25m8.25-9.75V6.75a1.575 1.575 0 0 1 3.15 0v2.25m-3.15 3v6.75a1.575 1.575 0 0 0 3.15 0V10.5"/></svg>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user