Home Explore Help
Sign In
tigerphp
/
stagfe
4
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Guest: meeting workflow [WIP]

Vijayakrishnan 5 years ago
parent
7caccc8a19
commit
64d6f6c0a2
3 changed files with 143 additions and 40 deletions
Unified View Show Diff Stats
  1. 4 0
      resources/views/layouts/guest-meeting.blade.php
  2. 135 39
      resources/views/meeting.blade.php
  3. 4 1
      resources/views/start.blade.php

+ 4 - 0
resources/views/layouts/guest-meeting.blade.php
View File 

@@ -18,6 +18,10 @@
 
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
 
 
     <link rel="stylesheet" href="/css/meeting.css">
 
     <link rel="stylesheet" href="/css/meeting.css">
 
+
 
+    {{-- WS --}}
 
+    <script src="/js/sockjs.min.js"></script>
 
+    <script src="/js/stomp.min.js"></script>
 
 </head>
 
 </head>
 
 <body class="p-0 m-0">
 
 <body class="p-0 m-0">

+ 135 - 39
resources/views/meeting.blade.php
View File 

@@ -64,6 +64,8 @@
 
             data: {
 
             data: {
 
                 meetingID: '<?= $meetingID ?>',
 
                 meetingID: '<?= $meetingID ?>',
 
                 participantID: '<?= $participantID ?>',
 
                 participantID: '<?= $participantID ?>',
 
+                socket: null,
 
+                stompClient: null,
 
                 time: 0,
 
                 time: 0,
 
                 startTime: 0,
 
                 startTime: 0,
 
                 started: false,
 
                 started: false,
 
@@ -75,7 +77,7 @@
 
                         id: 1,
 
                         id: 1,
 
                         name: 'You',
 
                         name: 'You',
 
                         image: '/images/person/you.jpg',
 
                         image: '/images/person/you.jpg',
 
-                        status: 'active',
 
+                        status: 'connecting',
 
                     },
 
                     },
 
                 ],
 
                 ],
 
                 pros: [
 
                 pros: [
 
@@ -87,7 +89,6 @@
 
                         status: 'connecting',
 
                         status: 'connecting',
 
                     }
 
                     }
 
                 ]
 
                 ]
 
-                // pros: []
 
             },
 
             },
 
             methods: {
 
             methods: {
 
                 setActiveView: function(_type, _participant) {
 
                 setActiveView: function(_type, _participant) {
 
@@ -102,55 +103,150 @@
 
                         minutes = parseInt(seconds / 60, 10);
 
                         minutes = parseInt(seconds / 60, 10);
 
                     seconds = parseInt(seconds % 60, 10);
 
                     seconds = parseInt(seconds % 60, 10);
 
                     return minutes + " min, " + seconds + " sec";
 
                     return minutes + " min, " + seconds + " sec";
 
-                }
 
-            },
 
-            mounted: function() {
 
-                this.activeType = 'guest';
 
-                this.activeParticipant = this.guests[0];
 
+                },
 
+                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');
 
+                },
 
+                addPro: function() {
 
+                    this.pros.push({
 
+                        id: '0',
 
+                        name: 'Pro',
 
+                        type: 'Receptionist',
 
+                        image: '/images/person/nancy.jpg',
 
+                        status: 'connecting',
 
+                    });
 
+                    return this.pros[this.pros.length - 1];
 
+                },
 
+                onProJoined: function(_pID) {
 
 
 
-                var self = this;
 
+                    var found = false;
 
 
 
-                // after 2 seconds, connect recep
 
-                window.setTimeout(function() {
 
-                    self.pros[0].status = 'active';
 
-                    self.started = true;
 
-                    self.startTime = new Date().getTime();
 
-                    self.activeType = 'pro';
 
-                    self.activeParticipant = self.pros[0];
 
-                    window.setInterval(function() {
 
-                        self.time = new Date().getTime() - self.startTime;
 
-                    }, 1000);
 
-
 
-                    // after 1 second, add 2 docs in connecting state
 
-                    window.setTimeout(function() {
 
-                        self.pros.push({
 
-                            id: 2,
 
-                            name: 'Dr. Strange',
 
-                            type: 'Dietitian',
 
-                            image: '/images/person/strange.0.jpg',
 
-                            status: 'connecting',
 
-                        });
 
-                        self.pros.push({
 
-                            id: 3,
 
-                            name: 'Dr. Do Little',
 
-                            type: 'Cardiologist',
 
-                            image: '/images/person/dl.jpg',
 
-                            status: 'connecting',
 
+                    // find pro with participant id
 
+                    var pro = this.pros.filter(function(_pro) {
 
+                        return _pro.id === _pID;
 
+                    });
 
+
 
+                    // no pro with id, find first one with id = 0
 
+                    if(!pro.length) {
 
+                        pro = this.pros.filter(function(_pro) {
 
+                            return _pro.id === "0";
 
                         });
 
                         });
 
+                    }
 
+
 
+                    // no pro with id = 0, create one
 
+                    if(!pro.length) {
 
+                        pro = this.addPro();
 
+                    }
 
+                    else {
 
+                        pro = pro[0];
 
+                    }
 
+
 
+                    pro.id = _pID;
 
+                    pro.status = 'active';
 
+
 
+                    // TODO: init pro stream
 
+                },
 
+                playDemo: function() {
 
+                    this.activeType = 'guest';
 
+                    this.activeParticipant = this.guests[0];
 
+
 
+                    var self = this;
 
 
 
-                        // after a second, connect strange
 
+                    // after 2 seconds, connect recep
 
+                    window.setTimeout(function() {
 
+                        self.pros[0].status = 'active';
 
+                        self.started = true;
 
+                        self.startTime = new Date().getTime();
 
+                        self.activeType = 'pro';
 
+                        self.activeParticipant = self.pros[0];
 
+                        window.setInterval(function() {
 
+                            self.time = new Date().getTime() - self.startTime;
 
+                        }, 1000);
 
+
 
+                        // after 1 second, add 2 docs in connecting state
 
                         window.setTimeout(function() {
 
                         window.setTimeout(function() {
 
-                            self.pros[1].status = 'active';
 
+                            self.pros.push({
 
+                                id: 2,
 
+                                name: 'Dr. Strange',
 
+                                type: 'Dietitian',
 
+                                image: '/images/person/strange.0.jpg',
 
+                                status: 'connecting',
 
+                            });
 
+                            self.pros.push({
 
+                                id: 3,
 
+                                name: 'Dr. Do Little',
 
+                                type: 'Cardiologist',
 
+                                image: '/images/person/dl.jpg',
 
+                                status: 'connecting',
 
+                            });
 
 
 
+                            // after a second, connect strange
 
                             window.setTimeout(function() {
 
                             window.setTimeout(function() {
 
-                                self.pros[2].status = 'active';
 
+                                self.pros[1].status = 'active';
 
+
 
+                                window.setTimeout(function() {
 
+                                    self.pros[2].status = 'active';
 
+                                }, 1000);
 
+
 
                             }, 1000);
 
                             }, 1000);
 
 
 
                         }, 1000);
 
                         }, 1000);
 
 
 
-                    }, 1000);
 
+                    }, 2000);
 
+                }
 
+            },
 
+            mounted: function() {
 
+
 
+                this.pros = [];
 
+
 
+                // this.playDemo();
 
+
 
+                var self = this;
 
+
 
+                // connect to WS
 
+                self.socket = new SockJS('http://localhost:8080/ws');
 
+                self.stompClient = Stomp.over(self.socket);
 
+                self.stompClient.connect({}, function (frame) {
 
+                    console.log('Connected: ' + frame);
 
+
 
+                    // join self
 
+                    self.stompClient.send(
 
+                        "/app/meeting-participant-join-meeting",
 
+                        {},
 
+                        JSON.stringify({meetingParticipantUid: self.participantID})
 
+                    );
 
+
 
+                    // set self as active
 
+                    self.guests[0].id = '<?= $participantID ?>';
 
+                    self.guests[0].status = 'active';
 
+
 
+                    // TODO: init own stream
 
+
 
+                    // attempt to connect to first pro if "start"
 
+                    @if(request('start'))
 
+                        self.connectToFirstPro();
 
+                    @endif
 
+
 
+                    // subscribe to on pro joined WS event
 
+                    self.stompClient.subscribe("/topic/on-pro-join-meeting", function(message){
 
+                        console.log("on-pro-join-meeting:", message);
 
+
 
+                        message = JSON.parse(message.body);
 
+                        console.log(message.meetingParticipantUid);
 
+
 
+                        self.onProJoined(message.meetingParticipantUid);
 
+
 
+                    });
 
 
 
-                }, 2000);
 
+                });
 
             }
 
             }
 
         });
 
         });
 
     </script>
 
     </script>

+ 4 - 1
resources/views/start.blade.php
View File 

@@ -69,7 +69,10 @@
 
                     }, function (_data) {
 
                     }, function (_data) {
 
                         if(_data.data && _data.data.meetingUid && _data.data.meetingParticipantUid) {
 
                         if(_data.data && _data.data.meetingUid && _data.data.meetingParticipantUid) {
 
                             self.process = 'Redirecting ...';
 
                             self.process = 'Redirecting ...';
 
-                            window.location.href = '/meeting/' + _data.data.meetingUid + '/' + _data.data.meetingParticipantUid;
 
+                            window.location.href = '/meeting/'
 
+                                + _data.data.meetingUid + '/'
 
+                                + _data.data.meetingParticipantUid
 
+                                + '?start=1';
 
                         }
 
                         }
 
                         else {
 
                         else {
 
                             self.process = false;
 
                             self.process = false;