Countdown before taking snapshot

app/actions.js

@@ -7,7 +7,15 @@ const snapshot = (image_data) => {
   });
 };
 
+const initiateCountdown = () => {
+  console.log('Countdown initiated');
+  AppDispatcher.dispatch({
+    type: 'initiate-countdown'
+  });
+};
+
 export default {
-  snapshot
+  snapshot,
+  initiateCountdown
 };
 

app/components/countdown.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Actions from '../actions';
+import CountdownStore from '../stores/countdown-store';
+
+let countdownTimer;
+
+class Countdown extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      timeLeft: null
+    };
+  }
+
+  componentDidMount() {
+    CountdownStore.addChangeListener(this.updateCountdown.bind(this));
+  }
+
+  updateCountdown() {
+    this.setState({ timeLeft: CountdownStore.getTimeLeft() })
+  }
+
+  render() {
+    return (
+      <div className='countdown'>{this.state.timeLeft}</div>
+    );
+  }
+}
+
+export default Countdown;

app/components/photobooth.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Video from './video';
+import Countdown from './countdown';
 import SnapshotList from './snapshot-list';
 
 class Photobooth extends React.Component {
@@ -8,6 +9,7 @@ class Photobooth extends React.Component {
       <div className="photobooth">
         <h1>React Photobooth</h1>
         <Video />
+        <Countdown />
         <SnapshotList />
       </div>
     );

app/components/video.js

@@ -1,7 +1,16 @@
 import React from 'react';
 import Actions from '../actions';
+import CountdownStore from '../stores/countdown-store';
 
 class Video extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      snapshotButtonDisabled: false
+    };
+  }
+
   componentDidMount() {
     let mediaOptions = { audio: false, video: true };
     let video = this.video();
@@ -17,13 +26,19 @@ class Video extends React.Component {
     };
 
     navigator.getUserMedia(mediaOptions, success, error);
+
+    CountdownStore.addChangeListener(this.takeSnapshot.bind(this));
   }
 
   video() {
     return React.findDOMNode(this.refs.video)
   }
 
   takeSnapshot() {
+    if (CountdownStore.getTimeLeft() != 0) {
+      return;
+    }
+
     let canvas = document.createElement('canvas');
     const width = 200;
     const height = 150;
@@ -40,13 +55,20 @@ class Video extends React.Component {
     var data = canvas.toDataURL('image/png');
 
     Actions.snapshot(data);
+
+    this.setState({ snapshotButtonDisabled: false });
+  }
+
+  initiateCountdown() {
+    this.setState({ snapshotButtonDisabled: true });
+    Actions.initiateCountdown();
   }
 
   render() {
     return (
       <div className='video'>
         <video ref="video" autoPlay="true"></video>
-        <button onClick={this.takeSnapshot.bind(this)}>Take snapshot</button>
+        <button disabled={this.state.snapshotButtonDisabled} onClick={this.initiateCountdown.bind(this)}>Take snapshot</button>
       </div>
     );
   }

app/stores/countdown-store.js

@@ -0,0 +1,46 @@
+import AppDispatcher from '../app-dispatcher.js';
+import BaseStore from './base-store.js';
+
+const TIMEOUT_LENGTH = 3;
+
+let timeLeft;
+let timer;
+
+class _CountdownStore extends BaseStore {
+  getTimeLeft() {
+    return timeLeft;
+  }
+}
+
+const CountdownStore = new _CountdownStore();
+
+let initiateCountdown = () => {
+  clearTimeout(timer);
+  timeLeft = TIMEOUT_LENGTH;
+
+  timer = setInterval(() => {
+    timeLeft = timeLeft - 1;
+
+    if (timeLeft == 0) {
+      clearTimeout(timer);
+      CountdownStore.emitChange();
+      timeLeft = null;
+    }
+
+    CountdownStore.emitChange();
+  }, 1000);
+}
+
+AppDispatcher.register((payload) => {
+  switch(payload.type) {
+    case 'initiate-countdown':
+      initiateCountdown();
+      CountdownStore.emitChange();
+      break;
+    default:
+      break;
+  }
+  return true;
+});
+
+export default CountdownStore;

css/countdown.scss

@@ -0,0 +1,3 @@
+.countdown {
+  font-size: 48px;
+}

css/main.scss

@@ -1,2 +1,3 @@
+@import 'countdown';
 @import 'snapshot-list';
 @import 'video';