Play an audio notification when the timer ends

.gitignore

@@ -6,9 +6,11 @@ tmp/app.js
 tmp/main.css
 tmp/main.css.map
 tmp/images
+tmp/audio
 
 public/app.js
 public/app.min.js
 public/main.css
 public/main.css.map
 public/images
+public/audio

Gruntfile.js

@@ -13,17 +13,37 @@ module.exports = function(grunt) {
     // Images
     copy: {
       dev: {
-        expand: true,
-        cwd: 'images',
-        src: '**/*',
-        dest: 'tmp/images'
+        files: [
+          {
+            expand: true,
+            cwd: 'images',
+            src: '**/*',
+            dest: 'tmp/images'
+          },
+          {
+            expand: true,
+            cwd: 'audio',
+            src: '**/*',
+            dest: 'tmp/audio'
+          },
+        ],
       },
       dist: {
-        expand: true,
-        cwd: 'images',
-        src: '**/*',
-        dest: 'public/images'
-      }
+        files: [
+          {
+            expand: true,
+            cwd: 'images',
+            src: '**/*',
+            dest: 'public/images'
+          },
+          {
+            expand: true,
+            cwd: 'audio',
+            src: '**/*',
+            dest: 'public/audio'
+          },
+        ],
+      },
     },
     // Sass
     sass: {

src/actions/timer_actions.js

@@ -4,7 +4,8 @@ var Actions = Reflux.createActions([
   'start',
   'pause',
   'reset',
-  'minutesChanged'
+  'minutesChanged',
+  'notificationPlayed'
 ]);
 
 export default Actions;

src/app.js

@@ -6,6 +6,7 @@ import Message from './components/message';
 import Timer from './components/timer';
 import Interval from './components/interval';
 import People from './components/people';
+import AudioNotification from './components/audio_notification';
 
 // Stores
 import PeopleStore from './stores/people_store';
@@ -46,6 +47,7 @@ const App = React.createClass({
         <Interval minutes={this.state.timer.minutes} state={this.state.timer.state} />
         <People people={this.state.people} currentDriverIndex={this.state.currentDriverIndex} />
         <a href="https://github.com/zoeesilcock/mobtimer-react" target="blank" className="github"><img src="images/github_mark.png" />github</a>
+        <AudioNotification playNotification={this.state.timer.playNotification} />
       </div>
     );
   }

src/components/audio_notification.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import TimerActions from '../actions/timer_actions';
+
+class AudioNotification extends React.Component {
+  propTypes: {
+    playNotification: React.PropTypes.bool.isRequired
+  }
+
+  componentWillReceiveProps(props) {
+    if (props.playNotification) {
+      this.play();
+      TimerActions.notificationPlayed();
+    }
+  }
+
+  play() {
+    var audio = React.findDOMNode(this.refs.audioTag);
+
+    audio.load();
+    audio.play();
+  }
+
+  render() {
+    return (
+      <audio ref="audioTag">
+        <source src="audio/music_box.mp3" type="audio/mpeg" />
+        <source src="audio/music_box.wav" type="audio/wav" />
+      </audio>
+    );
+  }
+};
+
+export default AudioNotification;

src/stores/timer_store.js

@@ -12,6 +12,7 @@ var Store = Reflux.createStore({
       minutes: this.loadMinutes(),
       msLeft: 0,
       end: 0,
+      playNotification: false,
       state: 'idle' // idle -> running -> paused
     };
   },
@@ -53,6 +54,11 @@ var Store = Reflux.createStore({
     this.trigger();
   },
 
+  onNotificationPlayed() {
+    this.data.playNotification = false;
+    this.trigger();
+  },
+
   // Internal
 
   scheduleUpdate() {
@@ -79,11 +85,11 @@ var Store = Reflux.createStore({
   },
 
   timerEnded() {
+    this.data.playNotification = true;
     this.onReset();
     PeopleActions.nextDriver();
   },
 
-  // Internal
   loadMinutes() {
     var minutes = Storage.getItem('minutes');
     return minutes != null ? minutes : 30;