diff --git a/.gitignore b/.gitignore
index 512f808..e02ef7b 100644
--- a/.gitignore
+++ b/.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
diff --git a/Gruntfile.js b/Gruntfile.js
index c29e114..5483df5 100644
--- a/Gruntfile.js
+++ b/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: {
diff --git a/audio/music_box.mp3 b/audio/music_box.mp3
new file mode 100755
index 0000000..c58e664
Binary files /dev/null and b/audio/music_box.mp3 differ
diff --git a/audio/music_box.wav b/audio/music_box.wav
new file mode 100644
index 0000000..9b4066c
Binary files /dev/null and b/audio/music_box.wav differ
diff --git a/src/actions/timer_actions.js b/src/actions/timer_actions.js
index 154cd9b..393a311 100644
--- a/src/actions/timer_actions.js
+++ b/src/actions/timer_actions.js
@@ -4,7 +4,8 @@ var Actions = Reflux.createActions([
'start',
'pause',
'reset',
- 'minutesChanged'
+ 'minutesChanged',
+ 'notificationPlayed'
]);
export default Actions;
diff --git a/src/app.js b/src/app.js
index af8213f..9b005d7 100644
--- a/src/app.js
+++ b/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({
github
+
);
}
diff --git a/src/components/audio_notification.js b/src/components/audio_notification.js
new file mode 100644
index 0000000..14a4b17
--- /dev/null
+++ b/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 (
+
+ );
+ }
+};
+
+export default AudioNotification;
diff --git a/src/stores/timer_store.js b/src/stores/timer_store.js
index eaeff33..3346045 100644
--- a/src/stores/timer_store.js
+++ b/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;