Junto Sounds

* awesome news sounnndzzzz

* prevent double sound

* bug fixes and chat sounds on by default

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

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

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

@@ -38,7 +38,7 @@ Metamaps.Views.chatView = (function () {
             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.$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.$container = $('<div class="chat-box"></div>');
         },
@@ -94,9 +94,13 @@ Metamaps.Views.chatView = (function () {
         },
         initializeSounds: function() {
             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: {
-                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.show();
         },
-        addMessage: function(message, isInitial) {
+        addMessage: function(message, isInitial, wasMe) {
 
             if (!this.isOpen && !isInitial) Private.incrementUnread.call(this);
 
@@ -129,7 +133,7 @@ Metamaps.Views.chatView = (function () {
             this.$messages.append($html);
             if (!isInitial) this.scrollMessages(200);
 
-            if (!isInitial && this.alertSound) this.sound.play('laser');
+            if (!wasMe && !isInitial && this.alertSound) this.sound.play('receivechat');
         },
         initialMessages: function() {
             var messages = this.messages.models;
@@ -203,7 +207,7 @@ Metamaps.Views.chatView = (function () {
         this.messages = messages; // backbone collection
 
         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.videosShowing = true;
         this.unreadMessages = 0;
@@ -285,9 +289,9 @@ Metamaps.Views.chatView = (function () {
         $(document).trigger(chatView.events.openTray);
     }
 
-    chatView.prototype.addMessage = function(message, isInitial) {
+    chatView.prototype.addMessage = function(message, isInitial, wasMe) {
       this.messages.add(message);
-      Private.addMessage.call(this, message, isInitial);
+      Private.addMessage.call(this, message, isInitial, wasMe);
     }
 
     chatView.prototype.scrollMessages = function(duration) {

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

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

app/assets/stylesheets/junto.css.erb

@@ -273,7 +273,6 @@
   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 {
-  display: none;
   width: 24px;
   height: 24px;
   margin-right: 32px;