Notifications / Sounds

package.json

@@ -144,7 +144,7 @@
     "grunt-contrib-copy": "=0.8.0",
     "grunt-contrib-less": "=1.0.1",
     "grunt-contrib-watch": "=0.6.1",
-    "jest-cli": "=0.4.5",
+    "jest-cli": "=0.4.12",
     "jscs": "^1.13.1",
     "jshint-stylish": "=1.0.2",
     "jsxhint": "=0.15.0",

src/js/__tests__/components/settings.js

@@ -43,10 +43,10 @@ describe('Test for Settings Component', function () {
     var instance = TestUtils.renderIntoDocument(<Settings />);
 
     expect(instance.state.participating).toBeFalsy();
-    expect(instance.toggleParticipating).toBeDefined();
+    expect(instance.toggleSetting).toBeDefined();
     expect(instance.appQuit).toBeDefined();
 
-    instance.toggleParticipating({
+    instance.toggleSetting('participating', {
       target: {
         checked: true
       }

src/js/__tests__/stores/notifications.js

@@ -30,6 +30,14 @@ describe('Tests for NotificationsStore', function () {
       }
     };
 
+    // Mock Audio
+    window.Audio = function (src) {
+      console.log('Loading Audio: ' + src);
+      return {
+        play: function () {}
+      };
+    };
+
     Actions = require('../../actions/actions.js');
     apiRequests = require('../../utils/api-requests.js');
     NotificationsStore = require('../../stores/notifications.js');

src/js/components/settings.js

@@ -8,13 +8,15 @@ var SettingsStore = require('../stores/settings');
 
 var SettingsPage = React.createClass({
   getInitialState: function () {
+    var settings = SettingsStore.getSettings();
     return {
-      participating: SettingsStore.getSettings().participating
+      participating: settings.participating,
+      playSound: settings.playSound
     };
   },
 
-  toggleParticipating: function (event) {
-    Actions.setSetting('participating', event.target.checked);
+  toggleSetting: function (key, event) {
+    Actions.setSetting(key, event.target.checked);
   },
 
   appQuit: function () {
@@ -29,7 +31,15 @@ var SettingsPage = React.createClass({
           <div className='col-xs-4'>
             <Toggle
               defaultChecked={this.state.participating}
-              onChange={this.toggleParticipating} />
+              onChange={this.toggleSetting.bind(this, 'participating')} />
+          </div>
+        </div>
+        <div className='row'>
+          <div className='col-xs-8'>Play sound</div>
+          <div className='col-xs-4'>
+            <Toggle
+              defaultChecked={this.state.playSound}
+              onChange={this.toggleSetting.bind(this, 'playSound')} />
           </div>
         </div>
         <div className='row'>

src/js/stores/notifications.js

@@ -11,6 +11,7 @@ var NotificationsStore = Reflux.createStore({
 
   init: function () {
     this._notifications = [];
+    this._previousNotifications = [];
   },
 
   updateTrayIcon: function (notifications) {
@@ -21,6 +22,35 @@ var NotificationsStore = Reflux.createStore({
     }
   },
 
+  isNewNotification: function (response) {
+    var self = this;
+    var playSound = SettingsStore.getSettings().playSound;
+
+    if (!playSound) { return; }
+
+    // Check if notification is already in the store.
+    var isNew = false;
+    _.map(response, function (obj) {
+      if (!_.contains(self._previousNotifications, obj.id)) {
+        isNew = true;
+      }
+    });
+
+    // Play Sound.
+    if (isNew) {
+      if (playSound) {
+        var audio = new Audio('sounds/digi.wav');
+        audio.play();
+      }
+    }
+
+    // Now Reset the previousNotifications array.
+    self._previousNotifications = [];
+    _.map(response, function (obj) {
+      self._previousNotifications.push(obj.id);
+    });
+  },
+
   onGetNotifications: function () {
     var self = this;
     var participating = SettingsStore.getSettings().participating;
@@ -33,6 +63,7 @@ var NotificationsStore = Reflux.createStore({
           // Success - Do Something.
           Actions.getNotifications.completed(response.body);
           self.updateTrayIcon(response.body);
+          self.isNewNotification(response.body);
         } else {
           // Error - Show messages.
           Actions.getNotifications.failed(err);

src/js/stores/settings.js

@@ -9,7 +9,8 @@ var SettingsStore = Reflux.createStore({
 
     if (!settings) {
       settings = {
-        'participating': false
+        'participating': false,
+        'playSound': true
       };
     }