glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fixed up call ending/starting events

Browse source
This commit is contained in:
Connor Turland 2016-02-17 13:27:22 +13:00
parent e29b683b38
commit d82288c9f2
5 changed files with 154 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
app/assets/javascripts/src/Metamaps.js.erb
View file

@ -2061,6 +2061,7 @@ Metamaps.Realtime = {
$(document).off('mousemove');
self.socket.removeAllListeners();
if (self.inConversation) self.leaveCall();
self.socket.emit('endMapperNotify');
$(".collabCompass").remove();
self.status = false;
@ -2100,7 +2101,6 @@ Metamaps.Realtime = {
promptToJoin: function (data) {
var self = Metamaps.Realtime;
console.log(data);
var notifyText = 'There\'s a conversation happening, want to join?';
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>';
notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>';
@ -2117,10 +2117,68 @@ Metamaps.Realtime = {
Metamaps.GlobalUI.notifyUser(notifyText, true);
self.room.conversationInProgress();
},
conversationHasEnded: function () {
countOthersInConversation: function () {
var self = Metamaps.Realtime;
var count = 0;
for (var key in self.mappersOnMap) {
if (self.mappersOnMap[key].inConversation) count++;
}
return count;
},
mapperJoinedCall: function (id) {
var self = Metamaps.Realtime;
var mapper = self.mappersOnMap[id];
if (mapper) {
if (self.inConversation) {
var username = mapper.name;
var notifyText = username + ' joined the call';
Metamaps.GlobalUI.notifyUser(notifyText);
}
mapper.inConversation = true;
self.room.chat.mapperJoinedCall(id);
}
},
mapperLeftCall: function (id) {
var self = Metamaps.Realtime;
var mapper = self.mappersOnMap[id];
if (mapper) {
if (self.inConversation) {
var username = mapper.name;
var notifyText = username + ' left the call';
Metamaps.GlobalUI.notifyUser(notifyText);
}
mapper.inConversation = false;
self.room.chat.mapperLeftCall(id);
if (self.countOthersInConversation() < 2) {
self.callEnded();
}
}
},
callEnded: function () {
var self = Metamaps.Realtime;
self.room.conversationEnding();
self.room.leaveVideoOnly();
self.inConversation = false;
self.videosInPosition = 1;
self.localVideo.view.$container.hide().css({
top: '72px',
left: '30px'
});
self.localVideo.view.audioOn();
self.localVideo.view.videoOn();
self.webrtc.webrtc.localStreams.forEach(function (stream) {
stream.getTracks().forEach(function (track) {
track.stop();
});
});
self.webrtc.webrtc.localStreams = [];
},
invitedToCall: function (inviter) {
var self = Metamaps.Realtime;
@ -2131,6 +2189,15 @@ Metamaps.Realtime = {
notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>';
Metamaps.GlobalUI.notifyUser(notifyText, true);
},
invitedToJoin: function (inviter) {
var self = Metamaps.Realtime;
var username = self.mappersOnMap[inviter].name;
var notifyText = username + ' is inviting you to the conversation. Join?';
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>';
notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>';
Metamaps.GlobalUI.notifyUser(notifyText, true);
},
acceptCall: function (userid) {
var self = Metamaps.Realtime;
self.socket.emit('callAccepted', {
@ -2159,6 +2226,15 @@ Metamaps.Realtime = {
});
Metamaps.GlobalUI.notifyUser('Invitation pending...', true);
},
inviteToJoin: function (userid) {
var self = Metamaps.Realtime;
self.socket.emit('inviteToJoin', {
mapid: Metamaps.Active.Map.id,
inviter: Metamaps.Active.Mapper.id,
invited: userid
});
Metamaps.GlobalUI.notifyUser('Invitation has been sent.');
},
callAccepted: function (userid) {
var self = Metamaps.Realtime;
@ -2170,7 +2246,7 @@ Metamaps.Realtime = {
var self = Metamaps.Realtime;
var username = self.mappersOnMap[userid].name;
Metamaps.GlobalUI.notifyUser(username + ' isn\'t feeling it right now...');
Metamaps.GlobalUI.notifyUser(username + ' didn\'t accept your invite.');
},
joinCall: function () {
var self = Metamaps.Realtime;
@ -2186,16 +2262,31 @@ Metamaps.Realtime = {
self.room.join();
});
self.inConversation = true;
self.socket.emit('mapperJoinedCall', {
mapid: Metamaps.Active.Map.id,
id: Metamaps.Active.Mapper.id
});
self.webrtc.startLocalVideo();
Metamaps.GlobalUI.clearNotify();
},
leaveCall: function () {
var self = Metamaps.Realtime;
self.socket.emit('mapperLeftCall', {
mapid: Metamaps.Active.Map.id,
id: Metamaps.Active.Mapper.id
});
self.room.leaveVideoOnly();
self.inConversation = false;
self.videosInPosition = 1;
self.localVideo.view.$container.hide();
// if there's only two people in the room, and we're leaving
// we should shut down the call locally
if (self.countOthersInConversation() === 1) {
self.callEnded();
}
},
turnOff: function (silent) {
var self = Metamaps.Realtime;
@ -2223,14 +2314,17 @@ Metamaps.Realtime = {
mapid: Metamaps.Active.Map.id
});
socket.on(myId + '-' + Metamaps.Active.Map.id + '-invitedToCall', self.invitedToCall);
socket.on(myId + '-' + Metamaps.Active.Map.id + '-invitedToCall', self.invitedToCall); // new call
socket.on(myId + '-' + Metamaps.Active.Map.id + '-invitedToJoin', self.invitedToJoin); // call already in progress
socket.on(myId + '-' + Metamaps.Active.Map.id + '-callAccepted', self.callAccepted);
socket.on(myId + '-' + Metamaps.Active.Map.id + '-callDenied', self.callDenied);
// receive word that there's a conversation in progress
socket.on('maps-' + Metamaps.Active.Map.id + '-callInProgress', self.promptToJoin);
socket.on('maps-' + Metamaps.Active.Map.id + '-callStarting', self.conversationHasBegun);
socket.on('maps-' + Metamaps.Active.Map.id + '-callEnding', self.conversationHasEnded);
socket.on('maps-' + Metamaps.Active.Map.id + '-mapperJoinedCall', self.mapperJoinedCall);
socket.on('maps-' + Metamaps.Active.Map.id + '-mapperLeftCall', self.mapperLeftCall);
// if you're the 'new guy' update your list with who's already online
socket.on(myId + '-' + Metamaps.Active.Map.id + '-UpdateMapperList', self.updateMapperList);
@ -2342,25 +2436,6 @@ Metamaps.Realtime = {
};
$(document).on(Metamaps.Views.room.events.newMessage, sendNewMessage);
$(document).on(Metamaps.Views.room.events.callEnded, function () {
socket.emit('callEnded', { mapid: Metamaps.Active.Map.id }); // so that anyone who isn't currently in the call gets notified
self.inConversation = false;
self.videosInPosition = 1;
Metamaps.GlobalUI.notifyUser('Conversation has ended.');
self.localVideo.view.$container.hide().css({
top: '72px',
left: '30px'
});
self.localVideo.view.audioOn();
self.localVideo.view.videoOn();
self.webrtc.webrtc.localStreams.forEach(function (stream) {
stream.getTracks().forEach(function (track) {
track.stop();
});
});
self.webrtc.webrtc.localStreams = [];
});
},
attachMapListener: function(){
var self = Metamaps.Realtime;
@ -2521,6 +2596,10 @@ Metamaps.Realtime = {
self.room.chat.removeParticipant(data.username);
Metamaps.GlobalUI.notifyUser(data.username + ' just left the map');
if (self.inConversation && self.countOthersInConversation() < 2) {
self.callEnded();
}
},
newCollaborator: function (data) {
var self = Metamaps.Realtime;

23
app/assets/javascripts/src/views/chatView.js.erb
View file

@ -15,7 +15,9 @@ Metamaps.Views.chatView = (function () {
participantHTML: "<div class='participant participant-{{ id }}'>" +
"<div class='chat-participant-image'><img src='{{ image }}' style='border: 2px solid {{ color }};' /></div>" +
"<div class='chat-participant-name'>{{ username }}</div>" +
"<button type='button' class='button chat-participant-invite' onclick='Metamaps.Realtime.inviteACall({{ id}});'></button>" +
"<button type='button' class='button chat-participant-invite-call' onclick='Metamaps.Realtime.inviteACall({{ id}});'></button>" +
"<button type='button' class='button chat-participant-invite-join' onclick='Metamaps.Realtime.inviteToJoin({{ id}});'></button>" +
"<span class='chat-participant-participating'>IN CALL</span>" +
"<div class='clearfloat'></div>" +
"</div>",
templates: function() {
@ -214,15 +216,30 @@ Metamaps.Views.chatView = (function () {
chatView.prototype.conversationInProgress = function (participating) {
this.$conversationInProgress.show();
this.$participants.addClass('is-live');
if (participating) this.$conversationInProgress.addClass('is-participating');
if (participating) this.$participants.addClass('is-participating');
this.$button.addClass('active');
// hide invite to call buttons
}
chatView.prototype.conversationEnded = function () {
this.$conversationInProgress.hide();
this.$participants.removeClass('is-live');
this.$conversationInProgress.removeClass('is-participating');
this.$participants.removeClass('is-participating');
this.$button.removeClass('active');
this.$participants.find('.participant').removeClass('active');
}
chatView.prototype.leaveConversation = function () {
this.$participants.removeClass('is-participating');
}
chatView.prototype.mapperJoinedCall = function (id) {
this.$participants.find('.participant-' + id).addClass('active');
}
chatView.prototype.mapperLeftCall = function (id) {
this.$participants.find('.participant-' + id).removeClass('active');
}
chatView.prototype.addParticipant = function (participant) {

9
app/assets/javascripts/src/views/room.js
View file

@ -43,12 +43,12 @@ Metamaps.Views.room = (function () {
}
room.prototype.leaveVideoOnly = function() {
this.chat.leaveConversation(); // the conversation will carry on without you
for (var id in this.videos) {
this.removeVideo(id);
}
this.isActiveRoom = false;
this.webrtc.leaveRoom();
this.chat.conversationEnded();
}
room.prototype.leave = function() {
@ -150,10 +150,6 @@ Metamaps.Views.room = (function () {
if (this.videos[id]) {
this.videos[id].remove();
delete this.videos[id];
if (Object.keys(this.videos).length === 0) {
this.leaveVideoOnly();
$(document).trigger(room.events.callEnded);
}
}
}
@ -191,8 +187,7 @@ Metamaps.Views.room = (function () {
* @static
*/
room.events = {
newMessage: "Room:newMessage",
callEnded: "Room:callEnded"
newMessage: "Room:newMessage"
};
return room;

24
app/assets/stylesheets/junto.css.erb
View file

@ -190,10 +190,10 @@
.chat-box .participants .conversation-live .leave {
display: none;
}
.chat-box .participants .conversation-live.is-participating .leave {
.chat-box .participants.is-participating .conversation-live .leave {
display: block;
}
.chat-box .participants .conversation-live.is-participating .join {
.chat-box .participants.is-participating .conversation-live .join {
display: none;
}
.chat-box .participants .participant {
@ -226,13 +226,29 @@
padding: 2px 8px 0;
text-align: left;
}
.chat-box .participants.is-live .participant .chat-participant-invite {
.chat-box .participants.is-live .participant .chat-participant-invite-call {
display: none;
}
.chat-box .participants .participant .chat-participant-invite {
.chat-box .participants .participant .chat-participant-invite-join {
display: none;
}
.chat-box .participants.is-live .participant:not(.active) .chat-participant-invite-join {
display: block;
}
.chat-box .participants .participant .chat-participant-invite-call,
.chat-box .participants .participant .chat-participant-invite-join
{
float: right;
background: #4FC059 url(<%= asset_path 'invitepeer16.png' %>) no-repeat center center;
}
.chat-box .participants .participant .chat-participant-participating {
float: right;
display: none;
margin-top: 14px;
}
.chat-box .participants .participant.active .chat-participant-participating {
display: block;
}
.chat-box .chat-header {
width: 100%;
padding: 16px 8px 16px 16px;

11
realtime/realtime-server.js
View file

@ -31,6 +31,10 @@ function start() {
socket.on('inviteACall', function (data) {
socket.broadcast.emit(data.invited + '-' + data.mapid + '-invitedToCall', data.inviter);
});
// send an invitation to join a call in progress
socket.on('inviteToJoin', function (data) {
socket.broadcast.emit(data.invited + '-' + data.mapid + '-invitedToJoin', data.inviter);
});
// send response back to the inviter
socket.on('callAccepted', function (data) {
socket.broadcast.emit(data.inviter + '-' + data.mapid + '-callAccepted', data.invited);
@ -39,8 +43,11 @@ function start() {
socket.on('callDenied', function (data) {
socket.broadcast.emit(data.inviter + '-' + data.mapid + '-callDenied', data.invited);
});
socket.on('callEnded', function (data) {
socket.broadcast.emit('maps-' + data.mapid + '-callEnding');
socket.on('mapperJoinedCall', function (data) {
socket.broadcast.emit('maps-' + data.mapid + '-mapperJoinedCall', data.id);
});
socket.on('mapperLeftCall', function (data) {
socket.broadcast.emit('maps-' + data.mapid + '-mapperLeftCall', data.id);
});
// this will ping everyone on a map that there's a person just joined the map