From 0b09e2398646a3400b02523c24c438337e978544 Mon Sep 17 00:00:00 2001
From: chee <chee@snake.dog>
Date: Thu, 14 Sep 2017 02:45:48 +0100
Subject: [PATCH] wait a second before taking the photo

---
 client/src/api.js               |  4 ++--
 client/src/components/Camera.js | 37 +++++++++++++++++++--------------
 client/src/components/Stream.js |  4 ++--
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/client/src/api.js b/client/src/api.js
index 7112a7e..0221466 100644
--- a/client/src/api.js
+++ b/client/src/api.js
@@ -1,4 +1,4 @@
-const API_ROOT = `${location.origin}/_api/`
+const API_ROOT = `${location.origin}/_api`
 const PUBLIC = 'public'
 
 const getList = channel =>
@@ -18,7 +18,7 @@ const addPicture = (channel, sha) =>
     response.ok
       ? response.json()
       : Promise.reject(response)
-    )
+    ).catch(console.error)
 
 module.exports = {
   getList,
diff --git a/client/src/components/Camera.js b/client/src/components/Camera.js
index d0409ac..e7c11f0 100644
--- a/client/src/components/Camera.js
+++ b/client/src/components/Camera.js
@@ -38,27 +38,32 @@ class Camera extends React.Component {
       .then(stream => {
         this.video.srcObject = stream
         this.video.play()
-        this.video.width = 500
         videoStream = stream
       })
       .catch(error => console.error('oh no:', error))
 
     this.video.addEventListener('canplay', () => {
-      const context = this.canvas.getContext('2d')
-      context.drawImage(
-        this.video,
-        0, 0,
-        this.video.videoWidth,
-        this.video.videoHeight
-      )
-
-      storePicture(this.canvas.toDataURL('image/jpg'))
-        .then(this.props.addPicture)
-        .catch(error => console.error('error adding picture', error))
-
-      this.clearTakingPicture()
-
-      videoStream.getTracks()[0].stop()
+      setTimeout(() => {
+        const context = this.canvas.getContext('2d')
+        const style = getComputedStyle(this.video)
+        const width = parseInt(style.width)
+        const height = parseInt(style.height)
+        this.canvas.setAttribute('width', width)
+        this.canvas.setAttribute('height', height)
+        context.drawImage(
+          this.video,
+          0, 0,
+          width, height
+        )
+        storePicture(this.canvas.toDataURL('image/jpeg', true))
+          .then(picture => {
+            console.log(picture)
+            this.props.addPicture(picture)
+            this.clearTakingPicture()
+            videoStream.getTracks()[0].stop()
+          })
+          .catch(error => console.error('error adding picture', error))
+      }, 1000)
     })
   }
 
diff --git a/client/src/components/Stream.js b/client/src/components/Stream.js
index 0514146..f261dbd 100644
--- a/client/src/components/Stream.js
+++ b/client/src/components/Stream.js
@@ -2,8 +2,8 @@ const React = require('inferno-compat')
 
 const Stream = ({pictures}) =>
   <ul>
-    {
-      pictures && pictures.map(picture =>
+    {pictures &&
+      pictures.map(picture =>
         <li>
           <img src={picture} />
         </li>