Improve conference attendee controls and stage participant strip.
Deploy Ladill Meet / deploy (push) Successful in 58s
Deploy Ladill Meet / deploy (push) Successful in 58s
Give attendees reaction buttons instead of media controls, gate applause audio until multiple people clap, show the avatar strip in panel layout, and remove the plenary stage subtitle. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
@@ -81,6 +81,8 @@
|
||||
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)'
|
||||
@@ -175,7 +177,7 @@
|
||||
<p class="text-sm font-semibold"
|
||||
:class="stageLayout === 'panel' ? 'text-violet-100' : 'text-sky-100'"
|
||||
x-text="stageLayoutLabel()"></p>
|
||||
<p class="truncate text-xs"
|
||||
<p x-show="stageLayoutDescription()" class="truncate text-xs"
|
||||
:class="stageLayout === 'panel' ? 'text-violet-200/85' : 'text-sky-200/85'"
|
||||
x-text="stageLayoutDescription()"></p>
|
||||
</div>
|
||||
@@ -266,6 +268,7 @@
|
||||
<div class="meet-toolbar__track sm:px-0">
|
||||
<div class="meet-toolbar__primary sm:contents">
|
||||
<button @click="toggleMute()" type="button"
|
||||
x-show="canPublish"
|
||||
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'">
|
||||
@@ -273,7 +276,7 @@
|
||||
<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="!audioOnly"
|
||||
x-show="canPublish && !audioOnly"
|
||||
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'">
|
||||
@@ -281,12 +284,30 @@
|
||||
<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="!audioOnly"
|
||||
x-show="canPublish && !audioOnly"
|
||||
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="!canPublish"
|
||||
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="!canPublish"
|
||||
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="!canPublish"
|
||||
class="rounded-full bg-slate-700 p-3 hover:bg-slate-600"
|
||||
title="React">
|
||||
@include('meet.room.partials.meet-icon', ['icon' => 'react'])
|
||||
</button>
|
||||
<button @click="toggleFeatures()" type="button"
|
||||
class="rounded-full p-3 transition-colors sm:hidden"
|
||||
:class="featuresOpen ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
|
||||
@@ -295,13 +316,13 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button @click="raiseHand()" type="button" class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="Raise hand">
|
||||
<button @click="raiseHand()" type="button" x-show="canPublish" 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" class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="Applause">
|
||||
<button @click="sendReaction('thumbs')" type="button" x-show="canPublish" 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" class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="React">
|
||||
<button @click="sendReaction('heart')" type="button" x-show="canPublish" 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>
|
||||
<button @click="toggleChat()" type="button"
|
||||
@@ -613,10 +634,10 @@
|
||||
|
||||
<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">
|
||||
<div class="space-y-1 sm:hidden" x-show="canPublish">
|
||||
<x-meet.room.menu-item icon="raise-hand" title="Raise hand" subtitle="Let the host know you have a question"
|
||||
@click="raiseHand(); featuresOpen = false" />
|
||||
<x-meet.room.menu-item icon="applause" title="Applause" subtitle="Send a quick reaction to everyone"
|
||||
<x-meet.room.menu-item icon="applause" title="Applause" subtitle="Send applause — sound plays when others join in"
|
||||
@click="sendReaction('thumbs'); featuresOpen = false" />
|
||||
<x-meet.room.menu-item icon="react" title="React" subtitle="Send a heart to the room"
|
||||
@click="sendReaction('heart'); featuresOpen = false" />
|
||||
@@ -624,6 +645,11 @@
|
||||
@click="toggleChat(); featuresOpen = false" />
|
||||
<div class="my-1 border-t border-slate-800"></div>
|
||||
</div>
|
||||
<div class="space-y-1 sm:hidden" x-show="!canPublish">
|
||||
<x-meet.room.menu-item icon="chat" title="Chat" subtitle="Open the {{ $sessionNoun }} chat"
|
||||
@click="toggleChat(); featuresOpen = false" />
|
||||
<div class="my-1 border-t border-slate-800"></div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user