Call-actions + hang-up function

public/css/call-minimal.css

@@ -1,3 +1,6 @@
+.videos-container {
+    padding-bottom: 60px;
+}
 .main-view {
 
 }
@@ -17,6 +20,25 @@
     padding: 3px 6px;
     color: #fff;
 }
+#call-actions {
+    justify-content: center;
+    align-items: center;
+    background: #00000033;
+    position: fixed;
+    width: 100%;
+    height: 60px;
+    left: 0;
+    bottom: 0;
+}
+#call-actions .btn {
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+}
 @media all and (min-width: 768px) {
     .main-view {
         display: flex;

resources/views/app/video/call-minimal.blade.php

@@ -57,12 +57,13 @@
         </div>
     </div>
 
-<!--    <div class="call-actions d-none align-items-center">
-        <button class="btn btn-danger rounded-circle"
+    <div id="call-actions" class="d-none">
+        <button class="btn btn-danger"
+                id="btn-hang-up"
                 title="Leave Call">
             <i class="fa fa-phone"></i>
         </button>
-        <button v-if="myMedia.isCameraOn" class="btn btn-default bg-light border rounded-circle"
+<!--        <button v-if="myMedia.isCameraOn" class="btn btn-default bg-light border rounded-circle"
                 title="Stop Camera">
             <i class="fa fa-video"></i>
         </button>
@@ -78,8 +79,8 @@
         <button v-if="!myMedia.isMicrophoneOn" class="btn btn-secondary rounded-circle"
                 title="Start Microphone">
             <i class="fa fa-microphone-slash"></i>
-        </button>
-    </div>-->
+        </button>-->
+    </div>
 
 </div>
 
@@ -136,6 +137,8 @@
             $btnStartVideo: null,
             $videoContainer: null,
             $selfView: null,
+            $callActions: null,
+            $btnHangUp: null,
 
             // methods
             init: function() {
@@ -144,16 +147,24 @@
                 this.$btnStartVideo = $('#btn-start-video');
                 this.$videoContainer = $('#video-container');
                 this.$selfView = $('#self-view');
+                this.$callActions = $('#call-actions');
+                this.$btnHangUp = $('#btn-hang-up');
 
                 this.registerSocket();
 
                 // event handlers
                 $(document)
-                    .off('click', '#btn-start-video')
-                    .on('click', '#btn-start-video', () => {
+                    .off('click.start-video', '#btn-start-video')
+                    .on('click.start-video', '#btn-start-video', () => {
                         this.initMedia();
                     });
 
+                $(document)
+                    .off('click.hang-up', '#btn-hang-up')
+                    .on('click.hang-up', '#btn-hang-up', () => {
+                        this.leaveRoomAsPro();
+                    });
+
                 this.enterRoomAsPro();
             },
 
@@ -186,6 +197,20 @@
                 });
             },
 
+            // leave meeting
+            leaveRoomAsPro: function() {
+
+                // notify java
+                this.socketClient.send("/app/leaveClientRoom",
+                    {},
+                    JSON.stringify({sessionKey: '{{$performer->session_key}}'})
+                );
+
+                // refresh to non-client page
+                window.location.href = '/pro/meet/';
+
+            },
+
             // get meeting info and populate model
             getMeetingInfo: function (_firstRun = false, _done = null) {
                 this.ajax('/api/meeting/getMyMeeting', {}, (_data) => {
@@ -215,6 +240,9 @@
                         this.$btnStartVideo.removeClass('d-block').addClass('d-none');
                         this.$videoContainer.removeClass('d-none').addClass('d-block');
 
+                        // show call actions
+                        this.$callActions.removeClass('d-none').addClass('d-flex');
+
                         // show own video
                         this.$selfView.height(this.$selfView.width() * 0.75); // 4x3 mode
                         this.myVideo.play(this.$selfView[0], {fit: 'contain'});