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;