diff --git a/app/assets/javascripts/src/Metamaps.js.erb b/app/assets/javascripts/src/Metamaps.js.erb
index 14c4e28b..90ab4a8e 100644
--- a/app/assets/javascripts/src/Metamaps.js.erb
+++ b/app/assets/javascripts/src/Metamaps.js.erb
@@ -1948,6 +1948,7 @@ Metamaps.Realtime = {
});
if (Metamaps.Active.Mapper) {
+
self.webrtc = new SimpleWebRTC({
connection: self.socket,
localVideoEl: self.videoId,
@@ -2035,7 +2036,7 @@ Metamaps.Realtime = {
left: left + 'px'
});
v.$container.find('.video-cutoff').css({
- border: '2px solid ' + self.mappersOnMap[id].color
+ border: '5px solid ' + self.mappersOnMap[id].color
});
self.videosInPosition += 1;
},
@@ -2093,6 +2094,19 @@ Metamaps.Realtime = {
self.room.chat.$container.show();
self.room.room = 'map-' + Metamaps.Active.Map.id;
self.checkForACallToJoin();
+
+ self.activeMapper = {
+ id: Metamaps.Active.Mapper.id,
+ name: Metamaps.Active.Mapper.get('name'),
+ username: Metamaps.Active.Mapper.get('name'),
+ image: Metamaps.Active.Mapper.get('image'),
+ color: Metamaps.Util.getPastelColor(),
+ self: true
+ };
+ self.localVideo.view.$container.find('.video-cutoff').css({
+ border: '5px solid ' + self.activeMapper.color
+ });
+ self.room.chat.addParticipant(self.activeMapper);
},
checkForACallToJoin: function () {
var self = Metamaps.Realtime;
@@ -2225,7 +2239,8 @@ Metamaps.Realtime = {
inviter: Metamaps.Active.Mapper.id,
invited: userid
});
- Metamaps.GlobalUI.notifyUser('Invitation pending...', true);
+ self.room.chat.invitationPending(userid);
+ Metamaps.GlobalUI.clearNotify();
},
inviteToJoin: function (userid) {
var self = Metamaps.Realtime;
@@ -2242,12 +2257,14 @@ Metamaps.Realtime = {
var username = self.mappersOnMap[userid].name;
Metamaps.GlobalUI.notifyUser('Conversation starting...');
self.joinCall();
+ self.room.chat.invitationAnswered(userid);
},
callDenied: function (userid) {
var self = Metamaps.Realtime;
var username = self.mappersOnMap[userid].name;
Metamaps.GlobalUI.notifyUser(username + ' didn\'t accept your invite.');
+ self.room.chat.invitationAnswered(userid);
},
joinCall: function () {
var self = Metamaps.Realtime;
@@ -2269,6 +2286,7 @@ Metamaps.Realtime = {
});
self.webrtc.startLocalVideo();
Metamaps.GlobalUI.clearNotify();
+ self.room.chat.mapperJoinedCall(Metamaps.Active.Mapper.id);
},
leaveCall: function () {
var self = Metamaps.Realtime;
@@ -2278,6 +2296,7 @@ Metamaps.Realtime = {
id: Metamaps.Active.Mapper.id
});
+ self.room.chat.mapperLeftCall(Metamaps.Active.Mapper.id);
self.room.leaveVideoOnly();
self.inConversation = false;
self.videosInPosition = 1;
@@ -2535,13 +2554,6 @@ Metamaps.Realtime = {
// create an item for them in the realtime box
if (data.userid !== Metamaps.Active.Mapper.id && self.status) {
- var mapperListItem = '
';
- mapperListItem += '';
- mapperListItem += data.username;
- mapperListItem += '';
- mapperListItem += '';
- //$('#mapper' + data.userid).remove();
self.room.chat.addParticipant(self.mappersOnMap[data.userid]);
// create a div for the collaborators compass
@@ -2598,7 +2610,8 @@ Metamaps.Realtime = {
Metamaps.GlobalUI.notifyUser(data.username + ' just left the map');
- if (self.inConversation && self.countOthersInConversation() < 2) {
+ if ((self.inConversation && self.countOthersInConversation() === 0) ||
+ (!self.inConversation && self.countOthersInConversation() === 1)) {
self.callEnded();
}
},
diff --git a/app/assets/javascripts/src/views/chatView.js.erb b/app/assets/javascripts/src/views/chatView.js.erb
index b3d02999..064cc557 100644
--- a/app/assets/javascripts/src/views/chatView.js.erb
+++ b/app/assets/javascripts/src/views/chatView.js.erb
@@ -12,9 +12,9 @@ Metamaps.Views.chatView = (function () {
"{{ timestamp }}
" +
"" +
"",
- participantHTML: "" +
+ participantHTML: "
" +
"
" +
- "
{{ username }}
" +
+ "
{{ username }} {{ selfName }}
" +
"
" +
"
" +
"
IN CALL" +
@@ -146,6 +146,13 @@ Metamaps.Views.chatView = (function () {
},
addParticipant: function(participant) {
var p = _.clone(participant.attributes);
+ if (p.self) {
+ p.selfClass = 'is-self';
+ p.selfName = '(me)';
+ } else {
+ p.selfClass = '';
+ p.selfName = '';
+ }
var html = this.participantTemplate(p);
this.$participants.append(html);
},
@@ -242,6 +249,14 @@ Metamaps.Views.chatView = (function () {
this.$participants.find('.participant-' + id).removeClass('active');
}
+ chatView.prototype.invitationPending = function (id) {
+ this.$participants.find('.participant-' + id).addClass('pending');
+ }
+
+ chatView.prototype.invitationAnswered = function (id) {
+ this.$participants.find('.participant-' + id).removeClass('pending');
+ }
+
chatView.prototype.addParticipant = function (participant) {
this.participants.add(participant);
}
diff --git a/app/assets/stylesheets/junto.css.erb b/app/assets/stylesheets/junto.css.erb
index a583affc..7606532f 100644
--- a/app/assets/stylesheets/junto.css.erb
+++ b/app/assets/stylesheets/junto.css.erb
@@ -170,7 +170,7 @@
.chat-box .participants {
width: 100%;
min-height: 150px;
- padding: 16px 0px 0px 0px;
+ padding: 16px 0px 16px 0px;
text-align: left;
color: #f5f5f5;
overflow-y: auto;
@@ -226,6 +226,10 @@
padding: 2px 8px 0;
text-align: left;
}
+.chat-box .participants .participant.is-self .chat-participant-invite-call,
+.chat-box .participants .participant.is-self .chat-participant-invite-join {
+ display: none !important;
+}
.chat-box .participants.is-live .participant .chat-participant-invite-call {
display: none;
}
@@ -241,6 +245,10 @@
float: right;
background: #4FC059 url(<%= asset_path 'invitepeer16.png' %>) no-repeat center center;
}
+.chat-box .participants .participant.pending .chat-participant-invite-call,
+.chat-box .participants .participant.pending .chat-participant-invite-join {
+ background: #dab539 url(<%= asset_path 'ellipsis.gif' %>) no-repeat center center;
+}
.chat-box .participants .participant .chat-participant-participating {
float: right;
display: none;