|
|
@@ -124,7 +124,7 @@
|
|
|
delimiters: ['@{{', '}}'],
|
|
|
data: {
|
|
|
|
|
|
- // model - declare up-front to make reactive - override with server data on mount
|
|
|
+ // main model - declare up-front to make reactive - override with server data on mount
|
|
|
amIInAMeeting: false,
|
|
|
meetingType: '', // PRO/CLIENT,
|
|
|
inMeetingForClientUid: '',
|
|
|
@@ -182,7 +182,7 @@
|
|
|
unrenderedParticipantsTimer: false,
|
|
|
unresolvedParticipantsTimer: false,
|
|
|
|
|
|
- // main-view & thumb views
|
|
|
+ // main-view participant
|
|
|
mainViewParticipant: {
|
|
|
self: true,
|
|
|
uid: '',
|
|
|
@@ -192,52 +192,13 @@
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
- toggleRinger: function () {
|
|
|
- let self = this, endPoint = this.ringer ? 'turnOffRing' : 'turnOnRing';
|
|
|
- $.post('/api/pro/' + endPoint, function (_data) {
|
|
|
- if (_data && _data.success) {
|
|
|
- self.ringer = !self.ringer;
|
|
|
- } else {
|
|
|
- if (_data.message) {
|
|
|
- toastr.error(_data.message);
|
|
|
- } else {
|
|
|
- toastr.error('Unable to change ringer status');
|
|
|
- }
|
|
|
- }
|
|
|
- }, 'json');
|
|
|
- },
|
|
|
- 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');
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
+ // start: main flow
|
|
|
enterClientRoomAsPro: function() {
|
|
|
- @if($client)
|
|
|
$.post('/api/meeting/enterClientRoomAsPro', {clientUid: '{{ $client->uid }}'}, (_data) => {
|
|
|
// TODO: check success
|
|
|
console.log(_data);
|
|
|
this.getMeetingInfo(true);
|
|
|
});
|
|
|
- @endif
|
|
|
},
|
|
|
getMeetingInfo: function(_firstRun = false) {
|
|
|
$.post('/api/meeting/getMyMeeting', (_data) => {
|
|
|
@@ -294,6 +255,20 @@
|
|
|
return _eventData.performer === '{{ $session->uid }}';
|
|
|
}
|
|
|
|
|
|
+ function _setParticipantMediaProperty(_message, _propertyName, _value) {
|
|
|
+ if(_message && _message.body) {
|
|
|
+ let eventData = JSON.parse(_message.body);
|
|
|
+ if(!_isSelf(eventData) && eventData.data) {
|
|
|
+ for (let i = 0; i < this.otherParticipants.length; i++) {
|
|
|
+ if(this.otherParticipants[i].uid === eventData.performer) {
|
|
|
+ this.otherParticipants[i].media[_propertyName] = _value;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
this.socketClient.subscribe("/user/topic/newParticipant", (message) => {
|
|
|
console.log("newParticipant received:", message.body);
|
|
|
if(message && message.body) {
|
|
|
@@ -309,56 +284,42 @@
|
|
|
|
|
|
this.socketClient.subscribe("/user/topic/myMicrophoneIsAcquired", (message) => {
|
|
|
console.log("myMicrophoneIsAcquired received:", message.body);
|
|
|
+ _setParticipantMediaProperty.call(this, message, 'isMicrophoneAcquired', true);
|
|
|
});
|
|
|
|
|
|
this.socketClient.subscribe("/user/topic/myMicrophoneIsNotAcquired", (message) => {
|
|
|
console.log("myMicrophoneIsNotAcquired received:", message.body);
|
|
|
+ _setParticipantMediaProperty.call(this, message, 'isMicrophoneAcquired', false);
|
|
|
});
|
|
|
|
|
|
this.socketClient.subscribe("/user/topic/myMicrophoneIsOn", (message) => {
|
|
|
console.log("myMicrophoneIsOn received:", message.body);
|
|
|
- if(message && message.body) {
|
|
|
- let eventData = JSON.parse(message.body);
|
|
|
- if(!_isSelf(eventData) && eventData.data) {
|
|
|
- for (let i = 0; i < this.otherParticipants.length; i++) {
|
|
|
- if(this.otherParticipants[i].uid === eventData.performer) {
|
|
|
- this.otherParticipants[i].media.isMicrophoneOn = true;
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ _setParticipantMediaProperty.call(this, message, 'isMicrophoneOn', true);
|
|
|
});
|
|
|
|
|
|
this.socketClient.subscribe("/user/topic/myMicrophoneIsOff", (message) => {
|
|
|
console.log("ALIX myMicrophoneIsOff received:", message.body);
|
|
|
- if(message && message.body) {
|
|
|
- let eventData = JSON.parse(message.body);
|
|
|
- if(!_isSelf(eventData) && eventData.data) {
|
|
|
- for (let i = 0; i < this.otherParticipants.length; i++) {
|
|
|
- if(this.otherParticipants[i].uid === eventData.performer) {
|
|
|
- this.otherParticipants[i].media.isMicrophoneOn = false;
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ _setParticipantMediaProperty.call(this, message, 'isMicrophoneOn', false);
|
|
|
});
|
|
|
|
|
|
this.socketClient.subscribe("/user/topic/myCameraIsAcquired", (message) => {
|
|
|
console.log("myCameraIsAcquired received:", message.body);
|
|
|
+ _setParticipantMediaProperty.call(this, message, 'isCameraAcquired', true);
|
|
|
});
|
|
|
|
|
|
this.socketClient.subscribe("/user/topic/myCameraIsNotAcquired", (message) => {
|
|
|
console.log("myCameraIsNotAcquired received:", message.body);
|
|
|
+ _setParticipantMediaProperty.call(this, message, 'isCameraAcquired', false);
|
|
|
});
|
|
|
|
|
|
this.socketClient.subscribe("/user/topic/myCameraIsOn", (message) => {
|
|
|
console.log("myCameraIsOn received:", message.body);
|
|
|
+ _setParticipantMediaProperty.call(this, message, 'isCameraOn', true);
|
|
|
});
|
|
|
|
|
|
this.socketClient.subscribe("/user/topic/myCameraIsOff", (message) => {
|
|
|
console.log("myCameraIsOff received:", message.body);
|
|
|
+ _setParticipantMediaProperty.call(this, message, 'isCameraOn', false);
|
|
|
});
|
|
|
|
|
|
this.socketClient.subscribe("/user/topic/editMyName", (message) => {
|
|
|
@@ -384,6 +345,7 @@
|
|
|
if (this.otherParticipants[i].uid === eventData.performer) {
|
|
|
if(this.mainViewParticipant.uid === (+this.otherParticipants[i].mediaServiceIdentifier)) {
|
|
|
this.showInCenterView(true, this.myMediaServiceIdentifier, 'You', 'PRO');
|
|
|
+ break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -469,29 +431,49 @@
|
|
|
[this.myMicrophone, this.myCamera].filter(Boolean)
|
|
|
);
|
|
|
|
|
|
- // notify others that I have arrived
|
|
|
- if(this.myCamera && this.myMedia.isCameraAcquired) {
|
|
|
- this.myCameraIsOn();
|
|
|
+ // notify others about my camera status
|
|
|
+ if(this.myCamera) {
|
|
|
+ if(this.myMedia.isCameraAcquired) {
|
|
|
+ this.myCameraIsAcquired();
|
|
|
+ this.myCameraIsOn(true);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.myCameraIsNotAcquired();
|
|
|
+ }
|
|
|
}
|
|
|
- if(this.myMicrophone && this.myMedia.isMicrophoneAcquired) {
|
|
|
- this.myMicrophoneIsOn();
|
|
|
+ else {
|
|
|
+ this.myCameraIsNotAcquired();
|
|
|
+ }
|
|
|
+
|
|
|
+ // notify others about my microphone status
|
|
|
+ if(this.myMicrophone) {
|
|
|
+ if(this.myMedia.isMicrophoneAcquired) {
|
|
|
+ this.myMicrophoneIsAcquired();
|
|
|
+ this.myMicrophoneIsOn(true);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.myMicrophoneIsNotAcquired();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.myMicrophoneIsNotAcquired();
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
_initMediaService.call(this);
|
|
|
},
|
|
|
-
|
|
|
- // attemptToPlayParticipantMedia
|
|
|
- // if user already in otherParticipants
|
|
|
- // if user's thumb already rendered
|
|
|
- // if yes, check participant's isCameraOn is true
|
|
|
- // if yes, play participant's video in his thumb
|
|
|
- // else store "user" in unrenderedParticipants
|
|
|
- // and keep retrying after 500mx (max 2 times) - i.e. give vue a cycle or 2 to render thumb
|
|
|
- // else store "user" in unresolvedParticipants
|
|
|
- // and keep retrying after 500ms (max 10 times) till resolved - i.e. give WS time to receive the newParticipant event
|
|
|
attemptToPlayParticipantMedia: function(user, mediaType) {
|
|
|
+ // LOGIC
|
|
|
+ // attemptToPlayParticipantMedia
|
|
|
+ // if user already in otherParticipants
|
|
|
+ // if user's thumb already rendered
|
|
|
+ // if yes, check participant's isCameraOn is true
|
|
|
+ // if yes, play participant's video in his thumb
|
|
|
+ // else store "user" in unrenderedParticipants
|
|
|
+ // and keep retrying after 500mx (max 2 times) - i.e. give vue a cycle or 2 to render thumb
|
|
|
+ // else store "user" in unresolvedParticipants
|
|
|
+ // and keep retrying after 500ms (max 10 times) till resolved - i.e. give WS time to receive the newParticipant event
|
|
|
let participant = this.otherParticipants.filter(function(_participant) {
|
|
|
return (+_participant.mediaServiceIdentifier) === user.uid;
|
|
|
});
|
|
|
@@ -517,6 +499,7 @@
|
|
|
this.markUserAsUnresolved(user, mediaType);
|
|
|
}
|
|
|
},
|
|
|
+ // end: main flow
|
|
|
|
|
|
// start: agora <-> WS sync helpers
|
|
|
initUnrenderedParticipantsTimer: function() {
|
|
|
@@ -566,10 +549,12 @@
|
|
|
JSON.stringify({sessionKey: '{{$performer->session_key}}'})
|
|
|
);
|
|
|
},
|
|
|
- myMicrophoneIsOn: function () {
|
|
|
+ myMicrophoneIsOn: function (_notifyOnly = false) {
|
|
|
if(!this.myMedia.isMicrophoneAcquired) return;
|
|
|
- this.myMicrophone.setEnabled(true);
|
|
|
- this.myMedia.isMicrophoneOn = true;
|
|
|
+ if(!_notifyOnly) {
|
|
|
+ this.myMicrophone.setEnabled(true);
|
|
|
+ this.myMedia.isMicrophoneOn = true;
|
|
|
+ }
|
|
|
this.socketClient.send("/app/myMicrophoneIsOn", {},
|
|
|
JSON.stringify({sessionKey: '{{$performer->session_key}}'})
|
|
|
);
|
|
|
@@ -592,10 +577,12 @@
|
|
|
JSON.stringify({sessionKey: '{{$performer->session_key}}'})
|
|
|
);
|
|
|
},
|
|
|
- myCameraIsOn: function () {
|
|
|
+ myCameraIsOn: function (_notifyOnly = false) {
|
|
|
if(!this.myMedia.isCameraAcquired) return;
|
|
|
- this.myCamera.setEnabled(true);
|
|
|
- this.myMedia.isCameraOn = true;
|
|
|
+ if(!_notifyOnly) {
|
|
|
+ this.myCamera.setEnabled(true);
|
|
|
+ this.myMedia.isCameraOn = true;
|
|
|
+ }
|
|
|
this.socketClient.send("/app/myCameraIsOn", {},
|
|
|
JSON.stringify({sessionKey: '{{$performer->session_key}}'})
|
|
|
);
|
|
|
@@ -678,7 +665,14 @@
|
|
|
},
|
|
|
// end: main view / thumb views
|
|
|
|
|
|
- // start: utils
|
|
|
+ // start: other/misc
|
|
|
+ toggleRinger: function () {
|
|
|
+ $.post('/api/pro/' + (this.ringer ? 'turnOffRing' : 'turnOnRing'), (_data) => {
|
|
|
+ if(!this.hasError(_data)) {
|
|
|
+ this.ringer = !this.ringer;
|
|
|
+ }
|
|
|
+ }, 'json');
|
|
|
+ },
|
|
|
hasError: function(_data) { // check and report error if exists via toastr
|
|
|
let msg = 'Unknown error!';
|
|
|
if(_data) {
|
|
|
@@ -688,10 +682,12 @@
|
|
|
toastr.error(msg);
|
|
|
return true;
|
|
|
}
|
|
|
- // end: utils
|
|
|
+ // end: other/misc
|
|
|
},
|
|
|
mounted: function () {
|
|
|
- this.enterClientRoomAsPro();
|
|
|
+ @if($client)
|
|
|
+ this.enterClientRoomAsPro();
|
|
|
+ @endif
|
|
|
}
|
|
|
});
|
|
|
})();
|
