diff --git a/public/images/meet-icons/applause.svg b/public/images/meet-icons/applause.svg new file mode 100644 index 0000000..95a5694 --- /dev/null +++ b/public/images/meet-icons/applause.svg @@ -0,0 +1,2 @@ + + diff --git a/public/images/meet-icons/raise-hand.svg b/public/images/meet-icons/raise-hand.svg new file mode 100644 index 0000000..3c5d22e --- /dev/null +++ b/public/images/meet-icons/raise-hand.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/meet-icons/screen-share.svg b/public/images/meet-icons/screen-share.svg new file mode 100644 index 0000000..dc3de42 --- /dev/null +++ b/public/images/meet-icons/screen-share.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/meet-icons/upload-file.svg b/public/images/meet-icons/upload-file.svg new file mode 100644 index 0000000..e2f7351 --- /dev/null +++ b/public/images/meet-icons/upload-file.svg @@ -0,0 +1,4 @@ + + + + diff --git a/resources/css/app.css b/resources/css/app.css index 4547a36..633d7f8 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -15,6 +15,19 @@ display: none !important; } +.meet-toolbar-icon { + filter: brightness(0) invert(1); + opacity: 0.92; +} + +.meet-chat-bubble { + max-width: 85%; +} + +.meet-chat-bubble--own { + margin-left: auto; +} + /* QR create/show: flush mobile action bar to the physical screen bottom (mobile only) */ @media (max-width: 1023px) { .mobile-action-bar { diff --git a/resources/js/meet-room.js b/resources/js/meet-room.js index 14772bc..642708c 100644 --- a/resources/js/meet-room.js +++ b/resources/js/meet-room.js @@ -550,6 +550,22 @@ function meetRoom() { }); }, + toggleChat() { + this.chatOpen = !this.chatOpen; + if (this.chatOpen) { + this.featuresOpen = false; + this.shareOpen = false; + } + }, + + toggleFeatures() { + this.featuresOpen = !this.featuresOpen; + if (this.featuresOpen) { + this.chatOpen = false; + this.shareOpen = false; + } + }, + async openShare() { if (navigator.share && this.joinUrl) { try { @@ -632,11 +648,23 @@ function meetRoom() { 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 = 'text-sm'; + div.className = `meet-chat-bubble${isOwn ? ' meet-chat-bubble--own' : ''}`; div.dataset.uuid = message.uuid; - div.innerHTML = `${this.escape(message.sender_name)} -

${this.escape(message.body)}

`; + + const time = message.created_at + ? new Date(message.created_at).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) + : ''; + + div.innerHTML = ` +
+ ${isOwn ? '' : `

${this.escape(message.sender_name)}

`} +

${this.escape(message.body)}

+
+

${this.escape(time)}

`; + container.appendChild(div); container.scrollTop = container.scrollHeight; }, diff --git a/resources/views/meet/room/partials/meet-icon.blade.php b/resources/views/meet/room/partials/meet-icon.blade.php new file mode 100644 index 0000000..593ad20 --- /dev/null +++ b/resources/views/meet/room/partials/meet-icon.blade.php @@ -0,0 +1,3 @@ +@props(['icon', 'class' => 'h-5 w-5']) + +merge(['class' => 'meet-toolbar-icon '.$class]) }}> diff --git a/resources/views/meet/room/show.blade.php b/resources/views/meet/room/show.blade.php index f44a456..a2c0fbe 100644 --- a/resources/views/meet/room/show.blade.php +++ b/resources/views/meet/room/show.blade.php @@ -54,12 +54,12 @@ @endif
-
-
-

{{ $room->title }}

+
+
+

{{ $room->title }}

-
+
REC Locked - +
@@ -95,8 +95,8 @@

-
-
+
+
@@ -108,37 +108,62 @@
-