convert to something more 'call' style

app/assets/javascripts/src/Metamaps.js.erb

@@ -1948,6 +1948,8 @@ Metamaps.Realtime = {
             console.log('connected');
             self.startActiveMap();
         });
+
+        if (Metamaps.Active.Mapper) {
           self.webrtc = new SimpleWebRTC({
             connection: self.socket,
             localVideoEl: self.videoId,
@@ -1966,19 +1968,6 @@ Metamaps.Realtime = {
             },
             nick: Metamaps.Active.Mapper.id
           });
-        self.webrtc.on('readyToCall', function () {
-          console.log('readyToCall');
-          self.videoInitialized = true;
-          self.readyToCall = true;
-          if (self.localVideo && self.status) {
-            $('#wrapper').append(self.localVideo.view.$container);
-          }
-          self.socket.emit('videoAdded');
-          self.webrtc.webrtc.peers.forEach(function (p) {
-            p.pc.addStream(self.webrtc.webrtc.localStream);
-            p.start();
-          });
-        });
 
           var
             $video = $('<video></video>').attr('id', self.videoId);
@@ -1987,7 +1976,7 @@ Metamaps.Realtime = {
               view: new Metamaps.Views.videoView($video[0], $('body'), 'me', true, {
                   DOUBLE_CLICK_TOLERANCE: 200,
                   avatar: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : ''
-            }),
+              })
           };
 
           self.room = new Metamaps.Views.room({
@@ -2001,9 +1990,22 @@ Metamaps.Realtime = {
             config: { DOUBLE_CLICK_TOLERANCE: 200 }
           });
           if (Metamaps.Messages) self.room.messages.add(Metamaps.Messages);
+          self.room.videoAdded(self.handleVideoAdded);
 
           self.createChat();
-        //self.webrtc.startLocalVideo();
+        } // if Metamaps.Active.Mapper
+    },
+    handleVideoAdded: function (v) {
+      // random position for now
+      var top = Math.floor((Math.random() * ($('#wrapper').height() - 100)) + 1);
+      var left = Math.floor((Math.random() * ($('#wrapper').width() - 100)) + 1);
+      //var right = Math.floor((Math.random() * (468 - 100)) + 1);
+      v.setParent($('#wrapper'));
+      $('#wrapper').append(v.$container);
+      v.$container.css({
+          top: top + 'px',
+          left: left + 'px'
+      });
     },
     startActiveMap: function () {
         var self = Metamaps.Realtime;
@@ -2053,30 +2055,86 @@ Metamaps.Realtime = {
         self.status = true;
         //$(".sidebarCollaborateIcon").addClass("blue");
         $(".collabCompass").show();
-        self.localVideo.view.$container.show();
         self.room.room = 'map-' + Metamaps.Active.Map.id;
-        self.room.join(function (err, roomDesc) {
+        self.checkForACallToJoin();
-          //attachMediaStream(self.webrtc.webrtc.localStream, self.localVideo.$video[0]);
+    },
+    checkForACallToJoin: function () {
+      var self = Metamaps.Realtime;
+      self.socket.emit('checkForCall', { room: self.room.room, mapid: Metamaps.Active.Map.id });
+    },
+    promptToJoin: function (data) {
+      var self = Metamaps.Realtime;
 
-          function addVideo(v) {
+      console.log(data);
-            // random position for now
+      var notifyText = 'There\'s a conversation happening, want to join?';
-            var top = Math.floor((Math.random() * ($('#wrapper').height() - 100)) + 1);
+      notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>';
-            var left = Math.floor((Math.random() * ($('#wrapper').width() - 100)) + 1);
+      notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>';
-            //var right = Math.floor((Math.random() * (468 - 100)) + 1);
+      Metamaps.GlobalUI.notifyUser(notifyText);
-            v.setParent($('#wrapper'));
+    },
-            $('#wrapper').append(v.$container);
+    invitedToCall: function (inviter) {
-            v.$container.css({
+      var self = Metamaps.Realtime;
-                top: top + 'px',
+
-                left: left + 'px'
+      var username = self.mappersOnMap[inviter].name;
+      var notifyText = username + ' is suggesting a video call. What do you think?';
+      notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.acceptCall(' + inviter + ')">Yes</button>';
+      notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>';
+      Metamaps.GlobalUI.notifyUser(notifyText);
+    },
+    acceptCall: function (userid) {
+      var self = Metamaps.Realtime;
+      self.socket.emit('callAccepted', {
+        mapid: Metamaps.Active.Map.id,
+        invited: Metamaps.Active.Mapper.id,
+        inviter: userid
       });
-          }
+      self.joinCall();
-
+      Metamaps.GlobalUI.clearNotify();
-          self.room.videoAdded(addVideo);
+    },
-
+    denyCall: function (userid) {
-          for (peer in self.room.videos) {
+      var self = Metamaps.Realtime;
-            addVideo(self.room.videos[peer]);
+      self.socket.emit('callDenied', {
-          }
+        mapid: Metamaps.Active.Map.id,
+        invited: Metamaps.Active.Mapper.id,
+        inviter: userid
       });
+      Metamaps.GlobalUI.clearNotify();
+    },
+    inviteACall: function (userid) {
+      var self = Metamaps.Realtime;
+      self.socket.emit('inviteACall', {
+        mapid: Metamaps.Active.Map.id,
+        inviter: Metamaps.Active.Mapper.id,
+        invited: userid
+      });
+    },
+    callAccepted: function (userid) {
+      var self = Metamaps.Realtime;
+
+      var username = self.mappersOnMap[userid].name;
+      Metamaps.GlobalUI.notifyUser(username + ' liked your suggestion! Video call starting...');
+      self.joinCall();
+    },
+    callDenied: function (userid) {
+      var self = Metamaps.Realtime;
+
+      var username = self.mappersOnMap[userid].name;
+      Metamaps.GlobalUI.notifyUser(username + ' isn\'t feeling it right now...');
+    },
+    joinCall: function () {
+      var self = Metamaps.Realtime;
+
+      self.webrtc.off('readyToCall');
+      self.webrtc.on('readyToCall', function () {
+        self.videoInitialized = true;
+        self.readyToCall = true;
+        self.localVideo.view.$container.show();
+        if (self.localVideo && self.status) {
+          $('#wrapper').append(self.localVideo.view.$container);
+        }
+        self.room.join();
+      });
+      self.webrtc.startLocalVideo();
+      Metamaps.GlobalUI.clearNotify();
     },
     startVideo: function() {
         var
@@ -2134,6 +2192,13 @@ Metamaps.Realtime = {
             mapid: Metamaps.Active.Map.id
         });
 
+        socket.on(myId + '-' + Metamaps.Active.Map.id + '-invitedToCall', self.invitedToCall);
+        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);
+
         // if you're the 'new guy' update your list with who's already online
         socket.on(myId + '-' + Metamaps.Active.Map.id + '-UpdateMapperList', self.updateMapperList);
 
@@ -2244,6 +2309,16 @@ Metamaps.Realtime = {
         };
         $(document).on(Metamaps.Views.room.events.newMessage, sendNewMessage);
 
+        $(document).on(Metamaps.Views.room.events.callEnded, function () {
+          Metamaps.GlobalUI.notifyUser('Conversation has ended.');
+          self.localVideo.view.$container.hide();
+          self.webrtc.webrtc.localStreams.forEach(function (stream) {
+            stream.getTracks().forEach(function (track) {
+              track.stop();
+            });
+          });
+        });
+
     },
     attachMapListener: function(){
         var self = Metamaps.Realtime;
@@ -2291,6 +2366,7 @@ Metamaps.Realtime = {
         // data.userrealtime
 
         self.mappersOnMap[data.userid] = {
+            id: data.userid,
             name: data.username,
             username: data.username,
             image: data.userimage,
@@ -2330,8 +2406,10 @@ Metamaps.Realtime = {
         // data.username
         // data.userimage
         // data.coords
+        var firstOtherPerson = Object.keys(self.mappersOnMap).length === 0;
 
         self.mappersOnMap[data.userid] = {
+            id: data.userid,
             name: data.username,
             username: data.username,
             image: data.userimage,
@@ -2357,7 +2435,11 @@ Metamaps.Realtime = {
             // create a div for the collaborators compass
             self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status);
 
-            Metamaps.GlobalUI.notifyUser(data.username + ' just joined the map');
+            var notifyMessage = data.username + ' just joined the map';
+            if (firstOtherPerson) {
+              notifyMessage += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.inviteACall(' + data.userid + ')">Suggest A Video Call</button>';
+            }
+            Metamaps.GlobalUI.notifyUser(notifyMessage);
 
             // send this new mapper back your details, and the awareness that you've loaded the map
             var update = {

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

@@ -12,7 +12,7 @@ Metamaps.Views.chatView = (function () {
             "<div class='chat-message-time'>{{ timestamp }}</div>" +
             "<div class='clearfloat'></div>" +
           "</div>",
-        participantHTML: "<div class='participant participant-{{ username }}'>" +
+        participantHTML: "<div class='participant participant-{{ id }}'>" +
                 "<div class='chat-participant-image'><img src='{{ image }}' /></div>" +
                 "<div class='chat-participant-name'>{{ username }}</div>" +
                 "<div class='clearfloat'></div>" +
@@ -151,7 +151,7 @@ Metamaps.Views.chatView = (function () {
             this.$participants.append(html);
         },
         removeParticipant: function(participant) {
-            this.$container.find('.participant-' + participant.get('username')).remove();
+            this.$container.find('.participant-' + participant.get('id')).remove();
         }
     };
 

app/assets/javascripts/src/views/room.js

@@ -33,6 +33,11 @@ Metamaps.Views.room = (function () {
       this.webrtc.joinRoom(this.room, cb);
     }
 
+    room.prototype.leaveVideoOnly = function() {
+      this.isActiveRoom = false;
+      this.webrtc.leaveRoom();
+    }
+
     room.prototype.leave = function() {
       for (var id in this.videos) {
         this.removeVideo(id);
@@ -51,10 +56,6 @@ Metamaps.Views.room = (function () {
     room.prototype.init = function () {
         var self = this;
 
-        /*this.roomRef.child('messages').on('child_added', function (snap) {
-          self.messages.add(snap.val());
-        });*/
-
         $(document).on(VideoView.events.audioControlClick, function (event, videoView) {
           if (!videoView.audioStatus) self.webrtc.mute();
           else if (videoView.audioStatus) self.webrtc.unmute();
@@ -70,7 +71,6 @@ Metamaps.Views.room = (function () {
           var mapper = Metamaps.Realtime.mappersOnMap[peer.nick];
           peer.avatar = mapper.image;
           peer.username = mapper.name;
-          console.log(peer);
           if (self.isActiveRoom) {
               self.addVideo(peer);
           }
@@ -148,7 +148,6 @@ Metamaps.Views.room = (function () {
           id = this.webrtc.getDomId(peer),
           video = attachMediaStream(peer.stream);
 
-        $(video).prop('muted', true); // until the viewer accepts the viewing
         var
           v = new VideoView(video, null, id, false, { DOUBLE_CLICK_TOLERANCE: 200, avatar: peer.avatar, username: peer.username });
 
@@ -162,6 +161,10 @@ 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);
+            }
           }
       }
 
@@ -190,7 +193,8 @@ Metamaps.Views.room = (function () {
      * @static
      */
     room.events = {
-        newMessage: "Room:newMessage"
+        newMessage: "Room:newMessage",
+        callEnded: "Room:callEnded"
     };
 
     return room;

app/assets/javascripts/src/views/videoView.js

@@ -98,14 +98,14 @@ Metamaps.Views.videoView = (function () {
             this.videoStatus = !this.videoStatus;
             $(document).trigger(videoView.events.videoControlClick, [this]);
         },
-        yesReceiveClick: function () {
+        /*yesReceiveClick: function () {
           this.$receiveContainer.hide();
           this.$avatar.hide();
           $(this.video).prop('muted', false);
         },
         noReceiveClick: function () {
           this.$container.hide();
-        }
+        }*/
     };
 
     var videoView = function(video, $parent, id, isMyself, config) {
@@ -135,6 +135,7 @@ Metamaps.Views.videoView = (function () {
         $vidContainer.addClass('video-cutoff');
         $vidContainer.append(this.video);
 
+        /*
         if (!isMyself) {
           this.$receiveContainer = $('<div class="video-receive"><div class="video-statement">' + config.username + ' is sharing their audio and video. Do you wish to receive it?</div><div class="btn-group"><button type="button" class="button btn-yes">Yes</button><button type="button" class="button btn-no">No</button></div></div>');
           this.$container.append(this.$receiveContainer);
@@ -144,7 +145,7 @@ Metamaps.Views.videoView = (function () {
           this.$container.find('.btn-no').on('click', function (event) {
               Handlers.noReceiveClick.call(self, event);
           });
-        }
+        }*/
 
         this.avatar = config.avatar;
         this.$avatar = $('<img draggable="false" class="collaborator-video-avatar" src="' + config.avatar + '" width="150" height="150" />');
@@ -157,7 +158,6 @@ Metamaps.Views.videoView = (function () {
         });
 
         if (isMyself) {
-          this.$avatar.hide();
           Private.addControls.call(this);
         }
 

app/assets/stylesheets/application.css.erb

@@ -132,6 +132,17 @@ a.button:active,
 input[type="submit"]:active {
     background: #429B46;
 }
+
+button.button.btn-no {
+    background-color: #c04f4f;
+}
+button.button.btn-no:hover {
+    background-color: #A54242;
+}
+.toast .toast-button {
+    margin-top: -10px;
+    margin-left: 10px;
+}
 /*
  * Utility
  */

app/assets/stylesheets/junto.css.erb

@@ -54,6 +54,7 @@
   -o-user-select: none;
   user-select: none;
   -webkit-user-drag: none;
+  display: none;
 }
 .collaborator-video .video-audio {
   position: absolute;

app/views/layouts/_upperelements.html.erb

@@ -20,7 +20,6 @@
 <div class="upperRightUI">
     <div class="supportUs upperRightEl openLightbox" data-open="donate">SUPPORT US!</div>
     <div class="mapElement upperRightEl upperRightMapButtons">
-        <div class="startVideo upperRightEl">start my video</div>
         <!-- filtering -->
         <div class="sidebarFilter upperRightEl">
             <div class="sidebarFilterIcon upperRightIcon"><div class="tooltipsUnder">Filter</div></div>

realtime/realtime-server.js

@@ -22,6 +22,23 @@ function start() {
             socket.broadcast.emit(data.userToNotify + '-' + data.mapid + '-UpdateMapperList', existingUser);
         });
 
+        // as a new mapper check whether there's a call in progress to join
+        socket.on('checkForCall', function (data) {
+          var socketsInRoom = io.sockets.clients(data.room);
+          if (socketsInRoom.length) socket.emit('maps-' + data.mapid + '-callInProgress', socketsInRoom.length);
+        });
+        // send the invitation to start a call
+        socket.on('inviteACall', function (data) {
+          socket.broadcast.emit(data.invited + '-' + data.mapid + '-invitedToCall', data.inviter);
+        });
+        // send response back to the inviter
+        socket.on('callAccepted', function (data) {
+          socket.broadcast.emit(data.inviter + '-' + data.mapid + '-callAccepted', data.invited);
+        });
+        socket.on('callDenied', function (data) {
+          socket.broadcast.emit(data.inviter + '-' + data.mapid + '-callDenied', data.invited);
+        });
+
         // this will ping everyone on a map that there's a person just joined the map
         socket.on('newMapperNotify', function (data) {
             socket.set('mapid', data.mapid);

realtime/signal.js

@@ -29,7 +29,7 @@ module.exports = function(io, stunservers) {
 
         client.resources = {
             screen: false,
-            video: false,
+            video: true,
             audio: false
         };
 
@@ -54,17 +54,6 @@ module.exports = function(io, stunservers) {
         });
 
         client.on('join', join);
-        client.on('videoAdded', videoAdded);
-
-        function videoAdded(data) {
-          var socketsInRoom = io.sockets.clients(client.room);
-          client.resources.video = true;
-          socketsInRoom.forEach(function(socket) {
-            if (socket.id !== client.id) {
-              socket.emit('addVideo', { id: client.id });
-            }
-          });
-        }
 
         function removeFeed(type) {
             if (client.room) {