Video call - call duration display, hang up action

public/css/meeting.css

@@ -155,3 +155,11 @@ h1 {
 body .OT_fit-mode-cover .OT_video-element {
     object-fit: contain;
 }
+.hang-up {
+    position: absolute;
+    z-index: 2;
+    bottom: 1rem;
+    left: 1rem;
+    width: 50px;
+    height: 50px;
+}

resources/views/meet.blade.php

@@ -15,23 +15,31 @@
         </h5>--}}
 
         @if(!$guest)
-            <div class="d-flex align-items-center justify-content-center py-2">
+            <div v-if="!started" class="d-flex align-items-center justify-content-center py-2">
                 <button class="btn btn-sm btn-primary px-4 font-weight-bold"
                         v-on:click.prevent="nextPatient()"
                         :disabled="client || checkingForNextPatient">Next Patient</button>
             </div>
-            <div v-if="noNextPatient" class="bg-light rounded text-center py-1 font-weight-bold text-sm">@{{ noNextPatient }}</div>
+            <div v-if="!started && noNextPatient" class="bg-light rounded text-center py-1 font-weight-bold text-sm">@{{ noNextPatient }}</div>
         @endif
 
         <div class="">
+            <div class="py-3 text-center" v-if="started">
+                <h6 class="text-black font-weight-bold m-0">Call in progress: @{{ timeDisplay() }}</h6>
+            </div>
             @if($guest)
-            <div class="py-3 text-center" v-if="!pro">
-                <h6 class="text--black font-weight-bold m-0">Please wait. Your doctor will be with you shortly...</h6>
+            <div class="py-3 text-center" v-if="!pro || !started">
+                <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>
+                <button class="btn btn-danger rounded-circle hang-up"
+                        v-if="started"
+                        v-on:click.prevent="hangUp()">
+                    <i class="fa fa-phone"></i>
+                </button>
             </div>
         </div>
 
@@ -106,25 +114,19 @@
                     seconds = parseInt(seconds % 60, 10);
                     return minutes + " min, " + seconds + " sec";
                 },
-                connectToFirstPro: function() {
-                    console.log('Connecting to first pro ...');
-                    this.pros = [];
-                    this.addPro();
-                    $.post('/api/meeting/request-dial-pro', {
-                        meetingUid: this.meetingID,
-                    }, function(_data) {
-                        console.log('Response to /api/meeting/request-dial-pro');
-                        console.log(_data);
-                    }, 'json');
-                },
-                onProJoined: function(_data) {
-                    // TODO:
-                },
-                onProLeft: function(_id) {
-                    // TODO:
-                },
-                leaveCall: function() {
-                    // TODO:
+                hangUp: function() {
+                    if(this.otSession) {
+                        this.otSession.disconnect();
+                        this.otSession = false;
+                        this.otSessionId = '';
+                        this.started = false;
+                        this.startTime = false;
+                        @if(!$guest)
+                        this.client = false;
+                        @else
+                        window.location = '/join';
+                        @endif
+                    }
                 },
 
                 // OT methods
@@ -158,16 +160,12 @@
                     var token = this.selfToken;
 
                     // destroy if existing
-                    if(self.otSession) {
-                        self.otSession.disconnect();
-                        self.otSession = '';
-                    }
+                    self.hangUp();
 
                     self.otSession = OT.initSession(apiKey, sessionId);
 
                     // TODO: Subscribe to remote stream
                     self.otSession.on('streamCreated', function streamCreated(event) {
-                        console.log(event);
                         var subscriberOptions = {
                             insertMode: 'append',
                             width: '100%',
@@ -178,7 +176,33 @@
                         @if($guest)
                         $('#self-view').removeClass('full-view').addClass('thumb-view');
                         $('#remote-view').removeClass('thumb-view').addClass('full-view');
+                        self.pro = true;
+                        @else
+                        self.client = true;
                         @endif
+
+                        if(!self.startTime) {
+                            self.startTime = new Date().getTime();
+                            window.setInterval(function() {
+                                self.time = new Date().getTime() - self.startTime;
+                            }, 1000);
+                            self.started = true;
+                        }
+                    });
+
+                    self.otSession.on("streamDestroyed", function(event) {
+                        @if($guest)
+                        $('#remote-view').removeClass('full-view').addClass('thumb-view');
+                        $('#self-view').removeClass('thumb-view').addClass('full-view');
+                        self.pro = false;
+                        @else
+                        self.client = false;
+                        @endif
+
+                        self.started = false;
+                        self.startTime = false;
+
+                        self.hangUp();
                     });
 
                     self.otSession.on('sessionDisconnected', function sessionDisconnected(event) {