Support for 3-parties in the call

public/css/meeting.css

@@ -100,17 +100,30 @@ h1 {
     border-radius: 3px;
     margin: 0 auto;
 }
-.main-view .thumb-view {
+.main-view .thumbs {
     position: absolute;
     z-index: 2;
     bottom: 1rem;
     right: 1rem;
+    width: 180px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: flex-end;
+}
+.main-view .thumbs .thumb-view {
     width: 160px;
     height: 120px;
     border: 1px solid #0d5875;
     box-shadow: 0 0 3px #888;
     border-radius: 3px;
     background: #444;
+    margin-top: 1rem;
+}
+.main-view .thumbs .disconnected-view {
+    opacity: 0;
+    height: 0;
 }
 
 .tp-bar {

resources/views/meet.blade.php

@@ -32,9 +32,14 @@
                 <h6 class="text-black font-weight-bold m-0">Please wait. Your doctor will be with you shortly...</h6>
             </div>
             @endif
-            <div class="main-view mx-auto">
-                <div id="self-view" class="<?= $guest ? 'full-view' : 'd-none' ?>"></div>
-                <div <?= !$guest ? 'v-show="!!client"' : '' ?> id="remote-view" class="<?= $guest ? 'thumb-view' : 'full-view' ?>"></div>
+            <div class="main-view mx-auto" <?= !$guest ? 'v-show="!!client"' : '' ?>>
+                <div id="self-view" class="<?= $guest ? 'full-view' : 'disconnected-view' ?>"></div>
+                <div class="thumbs">
+                    <div id="remote-view-1" class="remote-view disconnected-view"
+                         data-stream="" data-from=""></div>
+                    <div id="remote-view-2" class="remote-view disconnected-view"
+                         data-stream="" data-from=""></div>
+                </div>
                 <button class="btn btn-danger rounded-circle hang-up"
                         v-if="started"
                         v-on:click.prevent="hangUp()">
@@ -170,17 +175,35 @@
                             width: '100%',
                             height: '100%'
                         };
-                        self.otSession.subscribe(event.stream, 'remote-view', subscriberOptions, self.handleOpenTokError);
+
+                        var remoteViewElem = 'remote-view-1';
+                        if($('#remote-view-1').attr('data-stream')) {
+                            remoteViewElem = 'remote-view-2';
+                        }
+
+                        self.otSession.subscribe(event.stream, remoteViewElem, subscriberOptions, self.handleOpenTokError);
+
+                        $('#' + remoteViewElem).attr('data-stream', event.stream.id);
+                        $('#' + remoteViewElem).attr('data-from', event.stream.connection.data);
 
                         @if($guest)
-                        $('#self-view').removeClass('full-view').addClass('thumb-view');
-                        $('#remote-view').removeClass('thumb-view').addClass('full-view');
                         self.pro = true;
                         @else
                         self.joinMeetingAsPro();
                         self.client = true;
                         @endif
 
+                        $('#self-view')
+                            .removeClass('full-view')
+                            .removeClass('disconnected-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() {
@@ -192,17 +215,38 @@
 
                     self.otSession.on("streamDestroyed", function(event) {
                         @if($guest)
-                        $('#remote-view').removeClass('full-view').addClass('thumb-view');
-                        $('#self-view').removeClass('thumb-view').addClass('full-view');
+                        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');
                         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;
 
-                        self.hangUp();
+                        // if no other parties in call, hang up
+                        if(!$(':not([data-stream=""])').length) {
+                            self.hangUp();
+                        }
                     });
 
                     self.otSession.on('sessionDisconnected', function sessionDisconnected(event) {