Junto Sounds

* awesome news sounnndzzzz

* prevent double sound

* bug fixes and chat sounds on by default
This commit is contained in:
Connor Turland 2016-04-04 10:50:02 -04:00
parent f21a3d114f
commit 8a6d434fc3
9 changed files with 31 additions and 25 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -1938,15 +1938,6 @@ Metamaps.Realtime = {
init: function () { init: function () {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
var reenableRealtime = function () {
self.reenableRealtime();
};
var turnOff = function () {
self.turnOff();
};
$(".rtOn").click(reenableRealtime);
$(".rtOff").click(turnOff);
self.addJuntoListeners(); self.addJuntoListeners();
self.socket = new SocketIoConnection({ url: '<%= ENV['REALTIME_SERVER'] %>' }); self.socket = new SocketIoConnection({ url: '<%= ENV['REALTIME_SERVER'] %>' });
@ -2248,8 +2239,12 @@ Metamaps.Realtime = {
invitedToCall: function (inviter) { invitedToCall: function (inviter) {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
self.room.chat.sound.stop('sessioninvite');
self.room.chat.sound.play('sessioninvite');
var username = self.mappersOnMap[inviter].name; var username = self.mappersOnMap[inviter].name;
var notifyText = username + ' is suggesting a video call. What do you think?'; var notifyText = "<img src='<%= asset_path('junto_spinner_darkgrey.gif') %>' style='display: inline-block; margin-top: -12px; vertical-align: top;' />";
notifyText += username + ' is inviting you to a conversation. Join live?';
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.acceptCall(' + inviter + ')">Yes</button>'; 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>'; notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>';
Metamaps.GlobalUI.notifyUser(notifyText, true); Metamaps.GlobalUI.notifyUser(notifyText, true);
@ -2257,6 +2252,9 @@ Metamaps.Realtime = {
invitedToJoin: function (inviter) { invitedToJoin: function (inviter) {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
self.room.chat.sound.stop('sessioninvite');
self.room.chat.sound.play('sessioninvite');
var username = self.mappersOnMap[inviter].name; var username = self.mappersOnMap[inviter].name;
var notifyText = username + ' is inviting you to the conversation. Join?'; var notifyText = username + ' is inviting you to the conversation. Join?';
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>'; notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>';
@ -2265,6 +2263,7 @@ Metamaps.Realtime = {
}, },
acceptCall: function (userid) { acceptCall: function (userid) {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
self.room.chat.sound.stop('sessioninvite');
self.socket.emit('callAccepted', { self.socket.emit('callAccepted', {
mapid: Metamaps.Active.Map.id, mapid: Metamaps.Active.Map.id,
invited: Metamaps.Active.Mapper.id, invited: Metamaps.Active.Mapper.id,
@ -2275,6 +2274,7 @@ Metamaps.Realtime = {
}, },
denyCall: function (userid) { denyCall: function (userid) {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
self.room.chat.sound.stop('sessioninvite');
self.socket.emit('callDenied', { self.socket.emit('callDenied', {
mapid: Metamaps.Active.Map.id, mapid: Metamaps.Active.Map.id,
invited: Metamaps.Active.Mapper.id, invited: Metamaps.Active.Mapper.id,
@ -2284,6 +2284,7 @@ Metamaps.Realtime = {
}, },
denyInvite: function (userid) { denyInvite: function (userid) {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
self.room.chat.sound.stop('sessioninvite');
self.socket.emit('inviteDenied', { self.socket.emit('inviteDenied', {
mapid: Metamaps.Active.Map.id, mapid: Metamaps.Active.Map.id,
invited: Metamaps.Active.Mapper.id, invited: Metamaps.Active.Mapper.id,
@ -2322,14 +2323,14 @@ Metamaps.Realtime = {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
var username = self.mappersOnMap[userid].name; var username = self.mappersOnMap[userid].name;
Metamaps.GlobalUI.notifyUser(username + ' didn\'t accept your invite.'); Metamaps.GlobalUI.notifyUser(username + ' didn\'t accept your invitation');
self.room.chat.invitationAnswered(userid); self.room.chat.invitationAnswered(userid);
}, },
inviteDenied: function (userid) { inviteDenied: function (userid) {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
var username = self.mappersOnMap[userid].name; var username = self.mappersOnMap[userid].name;
Metamaps.GlobalUI.notifyUser(username + ' didn\'t accept your invite.'); Metamaps.GlobalUI.notifyUser(username + ' didn\'t accept your invitation');
self.room.chat.invitationAnswered(userid); self.room.chat.invitationAnswered(userid);
}, },
joinCall: function () { joinCall: function () {
@ -2611,6 +2612,7 @@ Metamaps.Realtime = {
// create an item for them in the realtime box // create an item for them in the realtime box
if (data.userid !== Metamaps.Active.Mapper.id && self.status) { if (data.userid !== Metamaps.Active.Mapper.id && self.status) {
self.room.chat.sound.play('joinmap');
self.room.chat.addParticipant(self.mappersOnMap[data.userid]); self.room.chat.addParticipant(self.mappersOnMap[data.userid]);
// create a div for the collaborators compass // create a div for the collaborators compass
@ -2661,7 +2663,7 @@ Metamaps.Realtime = {
// data.username // data.username
delete self.mappersOnMap[data.userid]; delete self.mappersOnMap[data.userid];
self.room.chat.sound.play('leavemap');
//$('#mapper' + data.userid).remove(); //$('#mapper' + data.userid).remove();
$('#compass' + data.userid).remove(); $('#compass' + data.userid).remove();
self.room.chat.removeParticipant(data.username); self.room.chat.removeParticipant(data.username);

View file

@ -38,7 +38,7 @@ Metamaps.Views.chatView = (function () {
this.$participants = $('<div class="participants"></div>'); this.$participants = $('<div class="participants"></div>');
this.$conversationInProgress = $('<div class="conversation-live">LIVE <span class="call-action leave" onclick="Metamaps.Realtime.leaveCall();">LEAVE</span><span class="call-action join" onclick="Metamaps.Realtime.joinCall();">JOIN</span></div>'); this.$conversationInProgress = $('<div class="conversation-live">LIVE <span class="call-action leave" onclick="Metamaps.Realtime.leaveCall();">LEAVE</span><span class="call-action join" onclick="Metamaps.Realtime.joinCall();">JOIN</span></div>');
this.$chatHeader = $('<div class="chat-header">CHAT</div>'); this.$chatHeader = $('<div class="chat-header">CHAT</div>');
this.$soundToggle = $('<div class="sound-toggle active"></div>'); this.$soundToggle = $('<div class="sound-toggle"></div>');
this.$messages = $('<div class="chat-messages"></div>'); this.$messages = $('<div class="chat-messages"></div>');
this.$container = $('<div class="chat-box"></div>'); this.$container = $('<div class="chat-box"></div>');
}, },
@ -94,9 +94,13 @@ Metamaps.Views.chatView = (function () {
}, },
initializeSounds: function() { initializeSounds: function() {
this.sound = new Howl({ this.sound = new Howl({
urls: ["<%= asset_path 'sounds/sounds.mp3' %>", "<%= asset_path 'sounds/sounds.ogg' %>"], urls: ["<%= asset_path 'sounds/MM_sounds.mp3' %>", "<%= asset_path 'sounds/MM_sounds.ogg' %>"],
sprite: { sprite: {
laser: [3000, 700] joinmap: [0, 561],
leavemap: [1000, 592],
receivechat: [2000, 318],
sendchat: [3000, 296],
sessioninvite: [4000, 5393, true]
} }
}); });
}, },
@ -105,7 +109,7 @@ Metamaps.Views.chatView = (function () {
this.$unread.html(this.unreadMessages); this.$unread.html(this.unreadMessages);
this.$unread.show(); this.$unread.show();
}, },
addMessage: function(message, isInitial) { addMessage: function(message, isInitial, wasMe) {
if (!this.isOpen && !isInitial) Private.incrementUnread.call(this); if (!this.isOpen && !isInitial) Private.incrementUnread.call(this);
@ -129,7 +133,7 @@ Metamaps.Views.chatView = (function () {
this.$messages.append($html); this.$messages.append($html);
if (!isInitial) this.scrollMessages(200); if (!isInitial) this.scrollMessages(200);
if (!isInitial && this.alertSound) this.sound.play('laser'); if (!wasMe && !isInitial && this.alertSound) this.sound.play('receivechat');
}, },
initialMessages: function() { initialMessages: function() {
var messages = this.messages.models; var messages = this.messages.models;
@ -203,7 +207,7 @@ Metamaps.Views.chatView = (function () {
this.messages = messages; // backbone collection this.messages = messages; // backbone collection
this.isOpen = false; this.isOpen = false;
this.alertSound = false; // whether to play sounds on arrival of new messages or not this.alertSound = true; // whether to play sounds on arrival of new messages or not
this.cursorsShowing = true; this.cursorsShowing = true;
this.videosShowing = true; this.videosShowing = true;
this.unreadMessages = 0; this.unreadMessages = 0;
@ -285,9 +289,9 @@ Metamaps.Views.chatView = (function () {
$(document).trigger(chatView.events.openTray); $(document).trigger(chatView.events.openTray);
} }
chatView.prototype.addMessage = function(message, isInitial) { chatView.prototype.addMessage = function(message, isInitial, wasMe) {
this.messages.add(message); this.messages.add(message);
Private.addMessage.call(this, message, isInitial); Private.addMessage.call(this, message, isInitial, wasMe);
} }
chatView.prototype.scrollMessages = function(duration) { chatView.prototype.scrollMessages = function(duration) {

View file

@ -156,6 +156,7 @@ Metamaps.Views.room = (function () {
room.prototype.sendChatMessage = function (data) { room.prototype.sendChatMessage = function (data) {
var self = this; var self = this;
//this.roomRef.child('messages').push(data); //this.roomRef.child('messages').push(data);
if (self.chat.alertSound) self.chat.sound.play('sendchat');
var m = new Metamaps.Backbone.Message({ var m = new Metamaps.Backbone.Message({
message: data.message, message: data.message,
resource_id: Metamaps.Active.Map.id, resource_id: Metamaps.Active.Map.id,
@ -163,7 +164,7 @@ Metamaps.Views.room = (function () {
}); });
m.save(null, { m.save(null, {
success: function (model, response) { success: function (model, response) {
self.addMessages(new Metamaps.Backbone.MessageCollection(model)); self.addMessages(new Metamaps.Backbone.MessageCollection(model), false, true);
$(document).trigger(room.events.newMessage, [model]); $(document).trigger(room.events.newMessage, [model]);
}, },
error: function (model, response) { error: function (model, response) {
@ -174,11 +175,11 @@ Metamaps.Views.room = (function () {
// they should be instantiated as backbone models before they get // they should be instantiated as backbone models before they get
// passed to this function // passed to this function
room.prototype.addMessages = function (messages, isInitial) { room.prototype.addMessages = function (messages, isInitial, wasMe) {
var self = this; var self = this;
messages.models.forEach(function (message) { messages.models.forEach(function (message) {
self.chat.addMessage(message, isInitial); self.chat.addMessage(message, isInitial, wasMe);
}); });
} }

View file

@ -273,7 +273,6 @@
box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19); box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
} }
.chat-box .chat-header .sound-toggle { .chat-box .chat-header .sound-toggle {
display: none;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 32px; margin-right: 32px;