glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

videos positioning decently. chats loading more smoothly

Browse source
This commit is contained in:
Connor Turland 2015-12-22 12:43:50 -05:00
parent a905094d4d
commit 8d85f8d308
7 changed files with 75 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/javascripts/src/Metamaps.Backbone.js.erb
View file

@ -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'
});
});

26
app/assets/javascripts/src/Metamaps.js.erb
View file

@ -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) {

22
app/assets/javascripts/src/views/chatView.js.erb
View file

@ -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;

13
app/assets/javascripts/src/views/room.js
View file

@ -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

34
app/assets/javascripts/src/views/videoView.js
View file

@ -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

2
app/assets/stylesheets/clean.css.erb
View file

@ -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;
}

4
app/assets/stylesheets/junto.css.erb
View file

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