From 8d85f8d308fdcd1204e475aaa5a81d94a5ee0834 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Tue, 22 Dec 2015 12:43:50 -0500 Subject: [PATCH] videos positioning decently. chats loading more smoothly --- .../javascripts/src/Metamaps.Backbone.js.erb | 8 +++-- app/assets/javascripts/src/Metamaps.js.erb | 26 ++++++++++---- .../javascripts/src/views/chatView.js.erb | 22 ++++++------ app/assets/javascripts/src/views/room.js | 13 +++++-- app/assets/javascripts/src/views/videoView.js | 34 ++++++++++++++----- app/assets/stylesheets/clean.css.erb | 2 +- app/assets/stylesheets/junto.css.erb | 4 +-- 7 files changed, 75 insertions(+), 34 deletions(-) diff --git a/app/assets/javascripts/src/Metamaps.Backbone.js.erb b/app/assets/javascripts/src/Metamaps.Backbone.js.erb index 55ba8107..dead8d44 100644 --- a/app/assets/javascripts/src/Metamaps.Backbone.js.erb +++ b/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' -}); \ No newline at end of file +}); diff --git a/app/assets/javascripts/src/Metamaps.js.erb b/app/assets/javascripts/src/Metamaps.js.erb index f22d824e..7f2c04f0 100644 --- a/app/assets/javascripts/src/Metamaps.js.erb +++ b/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 left = Math.floor((Math.random() * ($('#wrapper').width() - 100)) + 1); + var paddingAboveTop = 72; + 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) { diff --git a/app/assets/javascripts/src/views/chatView.js.erb b/app/assets/javascripts/src/views/chatView.js.erb index fcbb9eda..61887937 100644 --- a/app/assets/javascripts/src/views/chatView.js.erb +++ b/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; diff --git a/app/assets/javascripts/src/views/room.js b/app/assets/javascripts/src/views/room.js index 9f1c32c9..813452e7 100644 --- a/app/assets/javascripts/src/views/room.js +++ b/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 diff --git a/app/assets/javascripts/src/views/videoView.js b/app/assets/javascripts/src/views/videoView.js index eb234ece..629dc2e0 100644 --- a/app/assets/javascripts/src/views/videoView.js +++ b/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.$avatar.show(); + this.videoOff(); } else { - this.$videoControl.removeClass('active'); - this.$avatar.hide(); + this.videoOn(); } - 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 diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb index 992ced76..93f6d9c9 100644 --- a/app/assets/stylesheets/clean.css.erb +++ b/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; } diff --git a/app/assets/stylesheets/junto.css.erb b/app/assets/stylesheets/junto.css.erb index f66dd6ee..e0660cad 100644 --- a/app/assets/stylesheets/junto.css.erb +++ b/app/assets/stylesheets/junto.css.erb @@ -87,8 +87,8 @@ background-position-y: -24px; } .collaborator-video.my-video { - left: 50px; - top: 50px; + left: 30px; + top: 72px; } .chat-box { position: relative;