From eed5853c2f720fa5956f9bbb4e1daf376c55d33c Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Wed, 1 Jul 2026 08:00:22 +0000
Subject: [PATCH] Add share meeting link control to the live room UI.

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>
---
 resources/js/meet-room.js                | 41 ++++++++++++++++++++++++
 resources/views/meet/room/show.blade.php | 39 +++++++++++++++++++++-
 2 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/resources/js/meet-room.js b/resources/js/meet-room.js
index 316fd54..14772bc 100644
--- a/resources/js/meet-room.js
+++ b/resources/js/meet-room.js
@@ -29,6 +29,11 @@ function meetRoom() {
         qaInput: '',
         chatOpen: false,
         chatInput: '',
+        shareOpen: false,
+        shareCopied: false,
+        joinUrl: '',
+        passcode: '',
+        roomTitle: '',
         connectionStatus: 'Connecting…',
         participants: [],
         floatingReactions: [],
@@ -66,6 +71,10 @@ function meetRoom() {
                 csrf: el.dataset.csrf,
             };
 
+            this.joinUrl = el.dataset.joinUrl || '';
+            this.passcode = el.dataset.passcode || '';
+            this.roomTitle = el.dataset.roomTitle || '';
+
             this.isHost = el.dataset.isHost === '1';
             this.canPublish = el.dataset.canPublish !== '0';
             this.isWebinar = el.dataset.isWebinar === '1';
@@ -541,6 +550,38 @@ function meetRoom() {
             });
         },
 
+        async openShare() {
+            if (navigator.share && this.joinUrl) {
+                try {
+                    await navigator.share({
+                        title: this.roomTitle || 'Ladill Meet',
+                        text: 'Join my meeting on Ladill Meet',
+                        url: this.joinUrl,
+                    });
+                    return;
+                } catch (e) {
+                    if (e?.name === 'AbortError') return;
+                }
+            }
+
+            this.shareOpen = true;
+            this.shareCopied = false;
+        },
+
+        async copyJoinLink() {
+            if (!this.joinUrl) return;
+
+            try {
+                await navigator.clipboard.writeText(this.joinUrl);
+                this.shareCopied = true;
+                setTimeout(() => {
+                    this.shareCopied = false;
+                }, 2000);
+            } catch (e) {
+                console.error(e);
+            }
+        },
+
         async sendChat() {
             const body = this.chatInput.trim();
             if (!body) return;
diff --git a/resources/views/meet/room/show.blade.php b/resources/views/meet/room/show.blade.php
index bd29cee..f44a456 100644
--- a/resources/views/meet/room/show.blade.php
+++ b/resources/views/meet/room/show.blade.php
@@ -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>