styling. add self to participants

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 = '<li id="mapper' + data.userid + '" class="rtMapper littleRtOn">';
-            mapperListItem += '<img style="border: 2px solid ' + self.mappersOnMap[data.userid].color + ';"';
-            mapperListItem += ' src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />';
-            mapperListItem += data.username;
-            mapperListItem += '<div class="littleJuntoIcon"></div>';
-            mapperListItem += '</li>';
-            //$('#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();
         }
     },

app/assets/javascripts/src/views/chatView.js.erb

@@ -12,9 +12,9 @@ Metamaps.Views.chatView = (function () {
             "<div class='chat-message-time'>{{ timestamp }}</div>" +
             "<div class='clearfloat'></div>" +
           "</div>",
-        participantHTML: "<div class='participant participant-{{ id }}'>" +
+        participantHTML: "<div class='participant participant-{{ id }} {{ selfClass }}'>" +
                 "<div class='chat-participant-image'><img src='{{ image }}' style='border: 2px solid {{ color }};' /></div>" +
-                "<div class='chat-participant-name'>{{ username }}</div>" +
+                "<div class='chat-participant-name'>{{ username }} {{ selfName }}</div>" +
                 "<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>" +
@@ -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);
     }

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;