3-way call logical updates

public/css/meeting.css

@@ -100,6 +100,23 @@ h1 {
     border-radius: 3px;
     margin: 0 auto;
 }
+
+.main-view .full-view[data-from]::after {
+    position: absolute;
+    content: attr(data-from);
+    left: 0;
+    width: 100%;
+    top: 0;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    font-size: 13px;
+    white-space: nowrap;
+    padding: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+}
+
 .main-view .thumbs {
     position: absolute;
     z-index: 2;
@@ -113,13 +130,32 @@ h1 {
     justify-content: flex-end;
 }
 .main-view .thumbs .thumb-view {
-    width: 160px;
-    height: 120px;
+    width: 120px;
+    height: 90px;
     border: 1px solid #0d5875;
     box-shadow: 0 0 3px #888;
     border-radius: 3px;
     background: #444;
     margin-top: 1rem;
+    position: relative;
+    cursor: pointer;
+}
+.main-view .thumbs .thumb-view>* {
+    pointer-events: none;
+}
+.main-view .thumbs .thumb-view[data-from]::after {
+    position: absolute;
+    content: attr(data-from);
+    left: 0;
+    width: 100%;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    font-size: 11px;
+    white-space: nowrap;
+    padding: 0 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .main-view .thumbs .disconnected-view {
     opacity: 0;

resources/views/meet.blade.php

@@ -42,12 +42,12 @@
             </div>
             @endif
             <div class="main-view mx-auto" <?= !$guest ? 'v-show="!!client"' : '' ?>>
-                <div id="self-view" class="full-view"></div>
+                <div id="self-view" class="full-view" data-type="{{ $guest ? 'CLIENT' : 'PRO' }}"></div>
                 <div class="thumbs">
                     <div id="remote-view-1" class="remote-view disconnected-view"
-                         data-stream="" data-from=""></div>
+                         data-stream="" data-from="" data-type=""></div>
                     <div id="remote-view-2" class="remote-view disconnected-view"
-                         data-stream="" data-from=""></div>
+                         data-stream="" data-from="" data-type=""></div>
                 </div>
                 <button class="btn btn-danger rounded-circle hang-up"
                         v-if="started"
@@ -99,6 +99,7 @@
                 patientInQueue: false,
             },
             methods: {
+                @if(!$guest)
                 pollForNextPatient: function() {
                     if(!this.started) {
                         this.nextPatient(true);
@@ -124,7 +125,7 @@
                                 self.client = true;
                                 self.clientUid = _data.data;
                                 self.getOpenTokSessionId(function() {
-                                    self.selfName = 'Pro'; // TODO: replace with name of authed pro
+                                    self.selfName = '{{ $pro->name_display  }}';
                                     $.post('/api/openTok/getClientToken', {
                                         opentokSessionId: self.otSessionId,
                                         name: self.selfName
@@ -137,6 +138,7 @@
                         }
                     }, 'json');
                 },
+                @endif
                 getInitials: function(_name) {
                     var parts = _name.split(/\s+/g);
                     parts = parts.map(_part => _part[0]);
@@ -162,6 +164,7 @@
                         @endif
                     }
                 },
+                @if(!$guest)
                 callMCPPro: function() {
 
                     // put client in mcp queue
@@ -201,7 +204,7 @@
                     });
 
                 },
-
+                @endif
                 // OT methods
                 initOpenTok: function() {
 
@@ -252,8 +255,17 @@
 
                         self.otSession.subscribe(event.stream, remoteViewElem, subscriberOptions, self.handleOpenTokError);
 
-                        $('#' + remoteViewElem).attr('data-stream', event.stream.id);
-                        $('#' + remoteViewElem).attr('data-from', event.stream.connection.data);
+                        remoteViewElem = $('#' + remoteViewElem);
+                        remoteViewElem.attr('data-stream', event.stream.id);
+                        remoteViewElem.attr('data-from', event.stream.connection.data.split('|')[0]);
+
+                        var userType = event.target.connection.data.split('|')[1];
+                        if(userType === 'CLIENT') {
+                            remoteViewElem.attr('data-type', 'CLIENT');
+                        }
+                        else {
+                            remoteViewElem.attr('data-type', 'PRO');
+                        }
 
                         @if($guest)
                         self.pro = true;
@@ -262,16 +274,6 @@
                         self.client = true;
                         @endif
 
-                        $('.full-view:not(.disconnected-view)')
-                            .removeClass('full-view')
-                            .addClass('thumb-view')
-                            .prependTo('.thumbs');
-                        $('#' + remoteViewElem)
-                            .removeClass('thumb-view')
-                            .removeClass('disconnected-view')
-                            .addClass('full-view')
-                            .prependTo('.main-view');
-
                         if(!self.startTime) {
                             self.startTime = new Date().getTime();
                             window.setInterval(function() {
@@ -279,41 +281,29 @@
                             }, 1000);
                             self.started = true;
                         }
+
+                        self.activateParty(event.stream.id);
                     });
 
                     // peer disconnected
                     self.otSession.on("streamDestroyed", function(event) {
-                        @if($guest)
+
+                        self.activateParty('self');
+
                         var remoteViewElem = $('[data-stream="' + event.stream.id + '"]');
                         if(remoteViewElem.length) {
-                            remoteViewElem
-                                .removeClass('full-view')
-                                .removeClass('thumb-view')
-                                .addClass('disconnected-view')
-                                .prependTo('.thumbs');
                             remoteViewElem.attr('data-stream', '');
                             remoteViewElem.attr('data-from', '');
                         }
-                        $('#self-view')
-                            .removeClass('thumb-view')
-                            .removeClass('disconnected-view')
-                            .addClass('full-view')
-                            .prependTo('.main-view');
+
+                        @if($guest)
                         self.pro = false;
                         @else
-                        $('#self-view')
-                            .removeClass('thumb-view')
-                            .removeClass('disconnected-view')
-                            .removeClass('full-view')
-                            .prependTo('.thumbs');
                         self.client = false;
                         @endif
 
-                        self.started = false;
-                        self.startTime = false;
-
                         // if no other parties in call, hang up
-                        if(!$(':not([data-stream=""])').length) {
+                        if(!$('[data-stream]:not([data-stream=""])').length) {
                             self.hangUp();
                         }
                     });
@@ -340,6 +330,17 @@
                     };
                     var publisher = OT.initPublisher('self-view', publisherOptions, self.handleOpenTokError);
 
+                    publisher.on('streamCreated', function(event) {
+                        var selfView = $('#self-view');
+                        selfView.attr('data-stream', event.stream.id);
+                        selfView.attr('data-from', event.stream.connection.data.split('|')[0]);
+                        @if($guest)
+                        selfView.attr('data-type', 'CLIENT');
+                        @else
+                        selfView.attr('data-type', 'PRO');
+                        @endif
+                    });
+
                     // Connect to the session
                     self.otSession.connect(token, function callback(error) {
                         if (error) {
@@ -396,6 +397,8 @@
                     }, 'json');
                     @endif
                 },
+
+                @if(!$guest)
                 joinMeetingAsPro: function() {
                     var self = this;
                     $.ajax({
@@ -414,7 +417,35 @@
                         console.warn(_data);
                         alert(_data.message);
                     });
+                },
+                @endif
+
+                activateParty: function(_stream = 'self') {
+                    var current = $('.full-view');
+                    if(current.attr('data-stream') === _stream) return;
+                    current.removeClass('full-view').addClass('thumb-view');
+                    if(current.attr('data-type') === 'CLIENT') {
+                        current.prependTo('.thumbs');
+                    }
+                    else {
+                        current.appendTo('.thumbs');
+                    }
+                    if(_stream === 'self') {
+                        $('#self-view')
+                            .removeClass('thumb-view')
+                            .removeClass('disconnected-view')
+                            .addClass('full-view')
+                            .prependTo('.main-view');
+                    }
+                    else {
+                        $('div[data-stream="' + _stream + '"]')
+                            .removeClass('thumb-view')
+                            .removeClass('disconnected-view')
+                            .addClass('full-view')
+                            .prependTo('.main-view');
+                    }
                 }
+
             },
             mounted: function() {
 
@@ -453,19 +484,12 @@
 
                     });
                 });
+                @else
+                    localStorage.sessionKey = '{{ $session->session_key }}';
                 @endif
 
-                $(document).on('click', '.thumbs>div', function() {
-                    $('.full-view')
-                        .removeClass('full-view')
-                        .removeClass('disconnected-view')
-                        .addClass('thumb-view')
-                        .prependTo('.thumbs');
-                    $(this)
-                        .removeClass('thumb-view')
-                        .removeClass('disconnected-view')
-                        .addClass('full-view')
-                        .prependTo('.main-view');
+                $(document).on('click', '.thumbs>div[data-stream]', function() {
+                    self.activateParty($(this).attr('data-stream'));
                     return false;
                 });