videos positioning decently. chats loading more smoothly

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

@@ -6,7 +6,7 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
         return _.omit(this.attributes, this.blacklist);
     },
     save: function (key, val, options) {
-        
+
         var attrs;
 
         // Handle both `"key", value` and `{key: value}` -style arguments.
@@ -221,6 +221,10 @@ Metamaps.Backbone.Message = Backbone.Model.extend({
         return li;*/
     }
 });
+Metamaps.Backbone.MessageCollection = Backbone.Collection.extend({
+    model: Metamaps.Backbone.Message,
+    url: '/messages'
+});
 
 Metamaps.Backbone.Mapper = Backbone.Model.extend({
     urlRoot: '/users',
@@ -240,4 +244,4 @@ Metamaps.Backbone.Mapper = Backbone.Model.extend({
 Metamaps.Backbone.MapperCollection = Backbone.Collection.extend({
     model: Metamaps.Backbone.Mapper,
     url: '/users'
-});
+});

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

@@ -1918,6 +1918,7 @@ Metamaps.Realtime = {
     chatOpen: false,
     status: true, // stores whether realtime is True/On or False/Off,
     broadcastingStatus: false,
+    videosInPosition: 1,
     inConversation: false,
     localVideo: null,
     init: function () {
@@ -1982,7 +1983,6 @@ Metamaps.Realtime = {
             myVideoView: self.localVideo.view,
             config: { DOUBLE_CLICK_TOLERANCE: 200 }
           });
-          if (Metamaps.Messages) self.room.messages.add(Metamaps.Messages);
           self.room.videoAdded(self.handleVideoAdded);
 
           self.createChat();
@@ -2017,8 +2017,12 @@ Metamaps.Realtime = {
     handleVideoAdded: function (v, id) {
       var self = Metamaps.Realtime;
       // random position for now
-      var top = Math.floor((Math.random() * ($('#wrapper').height() - 100)) + 1);
+      var paddingAboveTop = 72;
-      var left = Math.floor((Math.random() * ($('#wrapper').width() - 100)) + 1);
+      var heightOfVideo = 150;
+      var padding = 25;
+      var top = paddingAboveTop + (self.videosInPosition * heightOfVideo) + padding;
+      console.log(top);
+      var left = 30;
       //var right = Math.floor((Math.random() * (468 - 100)) + 1);
       v.setParent($('#wrapper'));
       $('#wrapper').append(v.$container);
@@ -2029,6 +2033,7 @@ Metamaps.Realtime = {
       v.$container.find('.video-cutoff').css({
         border: '2px solid ' + self.mappersOnMap[id].color
       });
+      self.videosInPosition += 1;
     },
     startActiveMap: function () {
         var self = Metamaps.Realtime;
@@ -2044,7 +2049,7 @@ Metamaps.Realtime = {
             else if (publicMap) {
                 self.attachMapListener();
             }
-            self.room.messages.add(Metamaps.Messages);
+            self.room.addMessages(new Metamaps.Backbone.MessageCollection(Metamaps.Messages), true);
         }
     },
     endActiveMap: function () {
@@ -2055,8 +2060,8 @@ Metamaps.Realtime = {
         self.socket.emit('endMapperNotify');
         $(".collabCompass").remove();
         self.status = false;
-        self.stopVideo();
         self.room.leave();
+        self.videosInPosition = 1;
     },
     reenableRealtime: function() {
         var confirmString = "The layout of your map has fallen out of sync with the saved copy. ";
@@ -2181,6 +2186,7 @@ Metamaps.Realtime = {
 
       self.room.leaveVideoOnly();
       self.inConversation = false;
+      self.videosInPosition = 1;
       self.localVideo.view.$container.hide();
     },
     turnOff: function (silent) {
@@ -2331,8 +2337,14 @@ Metamaps.Realtime = {
         $(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();
+          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();
@@ -2748,7 +2760,7 @@ Metamaps.Realtime = {
         var self = Metamaps.Realtime;
         var socket = self.socket;
 
-        self.room.messages.add(data);
+        self.room.addMessages(new Metamaps.Backbone.MessageCollection(data));
     },
     // newTopic
     sendNewTopic: function (data) {

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

@@ -68,13 +68,6 @@ Metamaps.Views.chatView = (function () {
                 Private.removeParticipant.call(self, participant);
             });
 
-            // add the event listener so that when
-            // the realtime module adds messages to the collection
-            // from other mappers, it will update the UI
-            this.messages.on('add', function (message) {
-                Private.addMessage.call(self, message);
-            });
-
             this.$button.on('click', function () {
                 Handlers.buttonClick.call(self);
             });
@@ -110,9 +103,9 @@ Metamaps.Views.chatView = (function () {
             this.$unread.html(this.unreadMessages);
             this.$unread.show();
         },
-        addMessage: function(message) {
+        addMessage: function(message, isInitial) {
 
-            if (!this.isOpen) Private.incrementUnread.call(this);
+            if (!this.isOpen && !isInitial) Private.incrementUnread.call(this);
 
             function addZero(i) {
                 if (i < 10) {
@@ -132,14 +125,14 @@ Metamaps.Views.chatView = (function () {
             m.message = linker.link(m.message);
             var $html = $(this.messageTemplate(m));
             this.$messages.append($html);
-            this.scrollMessages(200);
+            if (!isInitial) this.scrollMessages(200);
 
-            if (this.alertSound) this.sound.play('laser');
+            if (!isInitial && this.alertSound) this.sound.play('laser');
         },
         initialMessages: function() {
             var messages = this.messages.models;
             for (var i = 0; i < messages.length; i++) {
-                Private.addMessage.call(this, messages[i]);
+                Private.addMessage.call(this, messages[i], true);
             }
         },
         handleInputMessage: function() {
@@ -257,6 +250,11 @@ Metamaps.Views.chatView = (function () {
         $(document).trigger(chatView.events.openTray);
     }
 
+    chatView.prototype.addMessage = function(message, isInitial) {
+      this.messages.add(message);
+      Private.addMessage.call(this, message, isInitial);
+    }
+
     chatView.prototype.scrollMessages = function(duration) {
         duration = duration || 0;
 

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

@@ -161,7 +161,6 @@ Metamaps.Views.room = (function () {
       room.prototype.sendChatMessage = function (data) {
         var self = this;
           //this.roomRef.child('messages').push(data);
-          console.log(data);
           var m = new Metamaps.Backbone.Message({
             message: data.message,
             resource_id: Metamaps.Active.Map.id,
@@ -169,7 +168,7 @@ Metamaps.Views.room = (function () {
           });
           m.save(null, {
             success: function (model, response) {
-              self.messages.add(model);
+              self.addMessages(new Metamaps.Backbone.MessageCollection(model));
               $(document).trigger(room.events.newMessage, [model]);
             },
             error: function (model, response) {
@@ -178,6 +177,16 @@ Metamaps.Views.room = (function () {
           });
       }
 
+      // they should be instantiated as backbone models before they get
+      // passed to this function
+      room.prototype.addMessages = function (messages, isInitial) {
+        var self = this;
+
+        messages.models.forEach(function (message) {
+          self.chat.addMessage(message, isInitial);
+        });
+      }
+
     /**
      * @class
      * @static

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

@@ -80,22 +80,18 @@ Metamaps.Views.videoView = (function () {
         },
         audioControlClick: function() {
             if (this.audioStatus) {
-                this.$audioControl.addClass('active');
+              this.audioOff();
             } else {
-                this.$audioControl.removeClass('active');
+              this.audioOn();
             }
-            this.audioStatus = !this.audioStatus;
             $(document).trigger(videoView.events.audioControlClick, [this]);
         },
         videoControlClick: function() {
             if (this.videoStatus) {
-                this.$videoControl.addClass('active');
+              this.videoOff();
-                this.$avatar.show();
             } else {
-                this.$videoControl.removeClass('active');
+              this.videoOn();
-                this.$avatar.hide();
             }
-            this.videoStatus = !this.videoStatus;
             $(document).trigger(videoView.events.videoControlClick, [this]);
         },
         /*yesReceiveClick: function () {
@@ -191,6 +187,28 @@ Metamaps.Views.videoView = (function () {
         this.$container.remove();
     }
 
+    videoView.prototype.videoOff = function () {
+      this.$videoControl.addClass('active');
+      this.$avatar.show();
+      this.videoStatus = false;
+    }
+
+    videoView.prototype.videoOn = function () {
+      this.$videoControl.removeClass('active');
+      this.$avatar.hide();
+      this.videoStatus = true;
+    }
+
+    videoView.prototype.audioOff = function () {
+      this.$audioControl.addClass('active');
+      this.audioStatus = false;
+    }
+
+    videoView.prototype.audioOn = function () {
+      this.$audioControl.removeClass('active');
+      this.audioStatus = true;
+    }
+
     /**
      * @class
      * @static

app/assets/stylesheets/clean.css.erb

@@ -710,7 +710,7 @@
     color: #F5F5F5;
     padding: 16px;
     border-radius: 2px;
-    z-index: 1 !important; /* important necessary for firefox */
+    z-index: 4 !important; /* important necessary for firefox */
     font-size: 14px;
     line-height:14px;
 }

app/assets/stylesheets/junto.css.erb

@@ -87,8 +87,8 @@
   background-position-y: -24px;
 }
 .collaborator-video.my-video {
-  left: 50px;
+  left: 30px;
-  top: 50px;
+  top: 72px;
 }
 .chat-box {
   position: relative;