From f9b23499dca2547508c4fb390a9bc5cc8636f08b Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Fri, 26 Feb 2016 12:43:27 +1300 Subject: [PATCH] styling. add self to participants --- app/assets/javascripts/src/Metamaps.js.erb | 33 +++++++++++++------ .../javascripts/src/views/chatView.js.erb | 19 +++++++++-- app/assets/stylesheets/junto.css.erb | 10 +++++- 3 files changed, 49 insertions(+), 13 deletions(-) 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;