Sound Notifications

clientapp/app.js

@@ -18,6 +18,8 @@ var Notify = require('notify.js');
 var Desktop = require('./helpers/desktop');
 var AppCache = require('./helpers/cache');
 
+var SoundEffectManager = require('sound-effect-manager');
+
 module.exports = {
     launch: function () {
 
@@ -39,6 +41,7 @@ module.exports = {
         async.series([
             function (cb) {
                 app.notifications = new Notify();
+                app.soundManager = new SoundEffectManager();
                 app.desktop = new Desktop();
                 app.cache = new AppCache();
                 app.storage = new Storage();
@@ -75,6 +78,11 @@ module.exports = {
                 });
                 self.api.connect();
             },
+            function (cb) {
+                app.soundManager.loadFile('/sounds/ding.wav', 'ding');
+                app.soundManager.loadFile('/sounds/threetone-alert.wav', 'threetone-alert');
+                cb();
+            },
             function (cb) {
                 function start() {
                     // start our router and show the appropriate page

clientapp/models/contact.js

@@ -263,6 +263,8 @@ module.exports = HumanModel.define({
                 tag: this.jid,
                 onclick: _.bind(app.navigate, app, '/chat/' + encodeURIComponent(this.jid))
             });
+            if (me.soundEnabled)
+                app.soundManager.play('ding');
         }
 
         var existing = Message.idLookup(message.from[message.type == 'groupchat' ? 'full' : 'bare'], message.mid);

clientapp/models/me.js

@@ -25,6 +25,7 @@ module.exports = HumanModel.define({
         this.bind('change:avatarID', this.save, this);
         this.bind('change:status', this.save, this);
         this.bind('change:rosterVer', this.save, this);
+        this.bind('change:soundEnabled', this.save, this);
         this.contacts.bind('change:unreadCount', this.updateUnreadCount, this);
         app.state.bind('change:active', this.updateIdlePresence, this);
         app.state.bind('change:deviceIDReady', this.registerDevice, this);
@@ -42,7 +43,8 @@ module.exports = HumanModel.define({
         shouldAskForAlertsPermission: ['bool', false, false],
         hasFocus: ['bool', false, false],
         _activeContact: 'string',
-        stream: 'object'
+        stream: 'object',
+        soundEnabled: ['bool', false, true],
     },
     collections: {
         contacts: Contacts,
@@ -70,6 +72,12 @@ module.exports = HumanModel.define({
                 return app.serverConfig().name || 'Otalk';
             }
         },
+        soundEnabledClass: {
+            deps: ['soundEnabled'],
+            fn: function () {
+                return this.soundEnabled ? "primary" : "secondary";
+            }
+        },
     },
     setActiveContact: function (jid) {
         var prev = this.getContact(this._activeContact);
@@ -90,6 +98,9 @@ module.exports = HumanModel.define({
             self.avatar = avatar.uri;
         });
     },
+    setSoundNotification: function(enable) {
+        this.soundEnabled = enable;
+    },
     getContact: function (jid, alt) {
         if (typeof jid === 'string') jid = new client.JID(jid);
         if (typeof alt === 'string') alt = new client.JID(alt);
@@ -134,6 +145,7 @@ module.exports = HumanModel.define({
                 self.nick = self.jid.local;
                 self.status = profile.status;
                 self.avatarID = profile.avatarID;
+                self.soundEnabled = profile.soundEnabled;
             }
             self.save();
             app.storage.roster.getAll(self.jid.bare, function (err, contacts) {
@@ -187,7 +199,8 @@ module.exports = HumanModel.define({
             jid: this.jid.bare,
             avatarID: this.avatarID,
             status: this.status,
-            rosterVer: this.rosterVer
+            rosterVer: this.rosterVer,
+            soundEnabled: this.soundEnabled
         };
         app.storage.profiles.set(data);
     },

clientapp/models/muc.js

@@ -98,6 +98,13 @@ module.exports = HumanModel.define({
                     tag: this.id,
                     onclick: _.bind(app.navigate, app, '/groupchat/' + encodeURIComponent(this.jid))
                 });
+                if (me.soundEnabled)
+                    app.soundManager.play('threetone-alert');
+            }
+            else
+            {
+                if (me.soundEnabled)
+                    app.soundManager.play('ding');
             }
         }
 

clientapp/pages/main.js

@@ -9,7 +9,8 @@ var templates = require('../templates');
 module.exports = BasePage.extend({
     template: templates.pages.main,
     classBindings: {
-        shouldAskForAlertsPermission: '.enableAlerts'
+        shouldAskForAlertsPermission: '.enableAlerts',
+        soundEnabledClass: '.soundNotifs'
     },
     srcBindings: {
         avatar: '#avatarChanger img'
@@ -20,6 +21,7 @@ module.exports = BasePage.extend({
     events: {
         'click .enableAlerts': 'enableAlerts',
         'click .installFirefox': 'installFirefox',
+        'click .soundNotifs': 'handleSoundNotifs',
         'dragover': 'handleAvatarChangeDragOver',
         'drop': 'handleAvatarChange',
         'change #uploader': 'handleAvatarChange'
@@ -87,5 +89,8 @@ module.exports = BasePage.extend({
             };
             fileTracker.readAsDataURL(file);
         }
-    }
+    },
+    handleSoundNotifs: function (e) {
+        this.model.setSoundNotification(!this.model.soundEnabled);
+    },
 });

clientapp/templates.js

@@ -500,7 +500,7 @@ exports.pages.groupchat = function anonymous(locals) {
 exports.pages.main = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page main"><div id="avatarChanger"><h4>Change Avatar</h4><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h4>Desktop Integration</h4><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button></div><div><button class="logout">Logout</button></div></section>');
+        buf.push('<section class="page main"><h1 id="title">Settings</h1><div id="avatarChanger"><h4>Change Avatar</h4><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h4>Desktop Integration</h4><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button><button class="soundNotifs">Sound Notification</button></div><div><button class="logout">Logout</button></div></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/main.jade

@@ -1,5 +1,7 @@
 section.page.main
 
+  h1#title Settings
+
   div#avatarChanger
     h4 Change Avatar
     div.uploadRegion
@@ -12,6 +14,7 @@ section.page.main
     h4 Desktop Integration
     button.enableAlerts Enable alerts
     button.primary.installFirefox Install app
+    button.soundNotifs Sound Notification
 
   div
     button.logout Logout

package.json

@@ -28,7 +28,7 @@
     "notify.js": "0.0.3",
     "semi-static": "0.0.4",
     "serve-static": "1.7.1",
-    "sound-effect-manager": "0.0.5",
+    "sound-effect-manager": "1.0.0",
     "stanza.io": "6.10.2",
     "staydown": "1.0.3",
     "templatizer": "0.1.2",

public/css/components/buttons.styl

@@ -108,8 +108,3 @@ button
 
         &:hover
           background: lighten($blue-light, 40%)
-
-// Specific buttons styles
-
-.installFirefox
-  margin-left: 5px

public/css/otalk.css

@@ -499,9 +499,6 @@ button.secondary:hover:not(:disabled) {
 .button-group.outlined.secondary .button:hover {
   background: #b8e6fa;
 }
-.installFirefox {
-  margin-left: 5px;
-}
 #connectionOverlay {
   position: fixed;
   top: 0px;
@@ -1555,9 +1552,12 @@ button.secondary:hover:not(:disabled) {
 .embed a.source {
   display: none;
 }
+.main h1 {
+  padding: 34px 20px 0 20px;
+  color: #192a47;
+}
 .main > div {
   padding: 20px;
-  padding-top: 64px;
   border-bottom: 1px solid #e0e0e0;
 }
 .main > div h4 {
@@ -1572,6 +1572,10 @@ button.secondary:hover:not(:disabled) {
   max-height: 50px;
   height: auto;
 }
+.main > div .installFirefox,
+.main > div .soundNotifs {
+  margin-left: 5px;
+}
 .uploadRegion {
   padding: 15px;
   -moz-border-radius: 3px;

public/css/pages/settings.styl

@@ -2,22 +2,29 @@
 @import '../_mixins'
 
 // Settings
-.main > div
+.main
-  padding: 20px
-  padding-top: 64px
-  border-bottom: 1px solid $gray-lighter
 
-  h4
+  h1
+    padding: 34px 20px 0 20px
     color: $blue-saturated
 
-  &:last-of-type
+  > div
-    border: none
+    padding: 20px
+    border-bottom: 1px solid $gray-lighter
+    h4
+      color: $blue-saturated
 
-  .status
+    &:last-of-type
-    overflow: hidden
+      border: none
-    min-height: 35px
+
-    max-height: 50px
+    .status
-    height: auto
+      overflow: hidden
+      min-height: 35px
+      max-height: 50px
+      height: auto
+
+    .installFirefox, .soundNotifs
+      margin-left: 5px
 
 .uploadRegion
   padding: 15px

server.js

@@ -37,6 +37,12 @@ app.get('/config.js', function (req, res) {
     res.send("var SERVER_CONFIG = " + JSON.stringify(config.server) + ";");
 });
 
+app.get('/sounds/*', function (req, res) {
+    console.log(req.baseUrl);
+    res.type('audio/wav');
+    res.redirect("./public" + req.baseUrl);
+});
+
 app.get('/oauth/login', function (req, res) {
     res.redirect('https://apps.andyet.com/oauth/authorize?client_id=' + config.andyetAuth.id + '&response_type=token');
 });