Common: Load current participants when loading call page

app/Http/Controllers/GuestController.php

@@ -2,6 +2,8 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Meeting;
+use App\Models\MeetingParticipant;
 use Illuminate\Http\Request;
 use App\Models\Pro;
 
@@ -9,9 +11,18 @@ class GuestController extends Controller
 {
 
     public function meeting(Request $request, $meetingID, $participantID) {
+        $meeting = Meeting::where('uid', $meetingID)->first();
+        if(!$meeting) {
+            return abort(404, "Meeting no longer active");
+        }
+        $participants = MeetingParticipant::where('meeting_id', $meeting->id)->get();
+        foreach ($participants as $participant) {
+            $participant->proName = $participant->proName(); // eager-fill proName
+        }
         return view('meeting', [
             'meetingID' => $meetingID,
             'participantID'=> $participantID,
+            'participants' => $participants,
             'guest' => true
         ]);
     }

app/Http/Controllers/ProController.php

@@ -2,6 +2,8 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Meeting;
+use App\Models\MeetingParticipant;
 use Illuminate\Http\Request;
 use App\Models\Pro;
 
@@ -27,9 +29,18 @@ class ProController extends Controller
     }
 
     public function meeting(Request $request, $meetingID, $participantID) {
+        $meeting = Meeting::where('uid', $meetingID)->first();
+        if(!$meeting) {
+            return abort(404, "Meeting no longer active");
+        }
+        $participants = MeetingParticipant::where('meeting_id', $meeting->id)->get();
+        foreach ($participants as $participant) {
+            $participant->proName = $participant->proName(); // eager-fill proName
+        }
         return view('meeting', [
             'meetingID' => $meetingID,
             'participantID'=> $participantID,
+            'participants' => $participants,
             'guest' => false
         ]);
     }

app/Models/Meeting.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Meeting extends Model
+{
+
+    protected $table = "meeting";
+
+    //
+}

app/Models/MeetingParticipant.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class MeetingParticipant extends Model
+{
+
+    protected $table = "meeting_participant";
+
+    public function proName() {
+        if($this->guest_or_pro === 'PRO' && $this->pro_id) {
+            $pro = Pro::find($this->pro_id);
+            if($pro) {
+                return $pro->name_display;
+            }
+        }
+        return '';
+    }
+}

public/css/meeting.css

@@ -122,3 +122,8 @@ h1 {
     display: block;
 }
 
+.text-single {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}

resources/views/meeting.blade.php

@@ -21,7 +21,7 @@
                      :class="activeParticipant && activeType === 'guest' && activeParticipant.id === guest.id ? 'active' : ''"
                      v-on:click="setActiveView('guest', guest)">
                     <div class="avatar text-white" :style="'background: ' + guest.color">@{{ getInitials(guest.name) }}</div>
-                    <p class="font-weight-bold text-center mt-1 mb-0">@{{ guest.name }}</p>
+                    <p class="font-weight-bold text-center mt-1 mb-0 text-single">@{{ guest.name }}</p>
                 </div>
                 <div v-if="guest" class="tp-item mb-4">
                     <img src="/images/person/guest.png" alt="" class="invite-image">
@@ -42,8 +42,8 @@
                      v-on:click="setActiveView('pro', pro)">
                     <div v-if="pro.status === 'active'">
                         <div class="avatar text-white" :style="'background: ' + pro.color">@{{ getInitials(pro.name) }}</div>
-                        <p class="font-weight-bold text-center mt-1 mb-0">@{{ pro.name }}</p>
-                        <p v-if="pro.type" class="font-weight-normal text-center">@{{ pro.type }}</p>
+                        <p class="font-weight-bold text-center mt-1 mb-0 text-single">@{{ pro.name }}</p>
+                        <p v-if="pro.type" class="font-weight-normal text-center text-single">@{{ pro.type }}</p>
                     </div>
                     <div v-if="pro.status === 'connecting'">
                         <img src="/images/person/connecting.jpg" alt="" class="w-100">
@@ -63,6 +63,32 @@
     </div>
 
     <script>
+
+        const allParticipants = {!! json_encode($participants)  !!},
+            allPros = [],
+            allGuests = [];
+        for (let i = 0; i < allParticipants.length; i++) {
+            if(allParticipants[i].guest_or_pro === 'PRO') {
+                allPros.push({
+                    id: allParticipants[i].uid,
+                    name: allParticipants[i].proName,
+                    type: 'Pro',
+                    image: '',
+                    color: '', // fill in mounted()
+                    status: 'active',
+                });
+            }
+            else {
+                allGuests.push({
+                    id: allParticipants[i].uid,
+                    name: allParticipants[i].guest_name,
+                    image: '',
+                    color: '', // fill in mounted()
+                    status: 'active',
+                })
+            }
+        }
+
         new Vue({
             el: '#meetingComponent',
             delimiters: ['@{{', '}}'],
@@ -170,6 +196,12 @@
                         console.log(_data);
                     }, 'json');
                 },
+                ifGuestExisting: function(_id) {
+                    var matching = this.guests.filter(function(_item) {
+                        return _item.id === _id;
+                    });
+                    return !!matching.length;
+                },
                 addGuest: function() {
                     this.guests.push({
                         id: '',
@@ -244,8 +276,15 @@
             },
             mounted: function() {
 
-                this.guests = [];
-                this.pros = [];
+                this.guests = allGuests;
+                this.pros = allPros;
+
+                for (let i = 0; i < this.guests.length; i++) {
+                    this.guests[i].color = this.getUnusedPastel();
+                }
+                for (let i = 0; i < this.pros.length; i++) {
+                    this.pros[i].color = this.getUnusedPastel();
+                }
 
                 var self = this;
 
@@ -258,10 +297,12 @@
                     @if($guest)
 
                         // add self and set as active
-                        var guest = self.addGuest();
-                        guest.id = '<?= $participantID ?>';
-                        guest.status = 'active';
-                        guest.name = 'Guest';
+                        if(!self.ifGuestExisting('<?= $participantID ?>')) {
+                            var guest = self.addGuest();
+                            guest.id = '<?= $participantID ?>';
+                            guest.status = 'active';
+                            guest.name = 'Guest';
+                        }
 
                         // WS Subscriptions
                         self.stompClient.subscribe("/topic/on-pro-join-meeting", function (message) {