From 475d12c52f617e9bece51013ddf262e410ff3cdf Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Sun, 10 Mar 2019 00:14:30 +0100
Subject: [PATCH] feat: Add capture state

---
 src/assets/css/4-modules/progress-bar.css | 24 +++++++++++++
 src/assets/css/5-screens/capture.css      | 44 +++++++++++++++++++++--
 src/assets/css/style.css                  |  1 +
 src/components/capture-progress.vue       | 18 ++++++++++
 src/store.js                              | 13 +++++++
 src/views/capture.vue                     | 36 +++++++++++++++++--
 6 files changed, 130 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/css/4-modules/progress-bar.css
 create mode 100644 src/components/capture-progress.vue

diff --git a/src/assets/css/4-modules/progress-bar.css b/src/assets/css/4-modules/progress-bar.css
new file mode 100644
index 0000000..c7bf67e
--- /dev/null
+++ b/src/assets/css/4-modules/progress-bar.css
@@ -0,0 +1,24 @@
+/* ----------------------------------------------------------- */
+/* == Progress Bar */
+/* ----------------------------------------------------------- */
+
+.progressBar {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.progressBar {
+  overflow: hidden;
+  width: 100%;
+  height: 2.3rem;
+  border-radius: .3rem;
+  background: rgba(0, 0, 0, .4);
+  box-shadow: inset 0 -.2rem 1rem rgba(0, 0, 0, .25);
+}
+
+.progressBar__state {
+  height: 2.3rem;
+  border-radius: .3rem;
+  background: linear-gradient(91.78deg, var(--color-primary) 0%,var(--color-secondary) 100%);
+  font-size: 0;
+}
diff --git a/src/assets/css/5-screens/capture.css b/src/assets/css/5-screens/capture.css
index 1b6b6d3..7272a1b 100644
--- a/src/assets/css/5-screens/capture.css
+++ b/src/assets/css/5-screens/capture.css
@@ -46,11 +46,21 @@
   margin-right: 1.5rem;
 }
 
+/* Progress bar
+-------------------------------------------------------------- */
+
+.capture-progress {
+  display: flex;
+  align-items: center;
+  height: 11rem;
+}
+
 /* Capture button
 -------------------------------------------------------------- */
 
 .capture-btn,
 .capture-btn:visited {
+  position: relative;
   align-self: center;
   margin-top: auto;
   margin-bottom: 4rem;
@@ -63,8 +73,6 @@
   box-shadow: 2px 4px 15px rgba(0, 0, 0, .25);
   font-size: 0;
   cursor: pointer;
-
-  user-select: none;
 }
 
 .capture-btn:active {
@@ -72,8 +80,38 @@
   box-shadow: none;
 }
 
-
 .capture-btn:focus {
   outline: none;
   box-shadow: var(--focus-ring);
 }
+
+/* Capturing state */
+
+
+.capture-btn--capturing {
+  position: relative;
+  background: linear-gradient(135deg, #212045 0%, #3633a0 100%);
+}
+
+.capture-btn--capturing::after {
+  position: absolute;
+  top: calc(50% - (6rem / 2));
+  left: calc(50% - (6rem / 2));
+  display: block;
+  width: 6rem;
+  height: 6rem;
+  border: .2rem solid transparent;
+  border-color: transparent transparent rgba(255, 255, 255, .8) rgba(255, 255, 255, .8);
+  border-radius: 42rem;
+  content: "";
+  animation: captureSpinAround 1000ms infinite linear;
+}
+
+@keyframes captureSpinAround {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 56c183b..c4336e2 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -31,6 +31,7 @@
 /* ----------------------------------------------------------- */
 
 @import "4-modules/preview.css";
+@import "4-modules/progress-bar.css";
 
 /* ----------------------------------------------------------- */
 /* == screens */
diff --git a/src/components/capture-progress.vue b/src/components/capture-progress.vue
new file mode 100644
index 0000000..531a318
--- /dev/null
+++ b/src/components/capture-progress.vue
@@ -0,0 +1,18 @@
+<template lang="html">
+  <div class="progressBar">
+    <div class="progressBar__state" :style="'width: ' + capturing.state + '%;'"></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'progressBar',
+  computed: {
+    ...mapState([
+      'capturing'
+    ])
+  }
+}
+</script>
diff --git a/src/store.js b/src/store.js
index cb82e8a..1835f29 100644
--- a/src/store.js
+++ b/src/store.js
@@ -9,6 +9,10 @@ export default new Vuex.Store({
     timer: {
       selected: 2,
       list: [2, 3, 5]
+    },
+    capturing: {
+      status: false,
+      state: 0
     }
   },
   mutations: {
@@ -17,6 +21,15 @@ export default new Vuex.Store({
     },
     updateTimer (store, time) {
       store.timer.selected = time
+    },
+    startCapture (store) {
+      store.capturing.status = true
+    },
+    stopCapture (store) {
+      store.capturing.status = false
+    },
+    updateCaptureState (store, percent) {
+      store.capturing.state = percent
     }
   },
   actions: {
diff --git a/src/views/capture.vue b/src/views/capture.vue
index dbe8929..3cefcd6 100644
--- a/src/views/capture.vue
+++ b/src/views/capture.vue
@@ -1,23 +1,53 @@
 <template>
   <div class="capture">
-    <capture-options/>
+    <div class="capture-progress" v-if="capturing.status">
+      <capture-progress/>
+    </div>
+    <capture-options v-else/>
 
     <div class="preview">
       <video class="preview-visual" height="200px"></video>
     </div>
 
-    <button class="capture-btn">Capture</button>
+    <button class="capture-btn" :class="{ 'capture-btn--capturing': capturing.status }" @click="startCapture">Capture</button>
 
   </div>
 </template>
 
 <script>
 import captureOptions from '@/components/capture-options'
+import captureProgress from '@/components/capture-progress'
+
+import { mapState } from 'vuex'
 
 export default {
   name: 'capture',
   components: {
-    captureOptions
+    captureOptions,
+    captureProgress
+  },
+  computed: {
+    ...mapState([
+      'capturing',
+      'timer'
+    ])
+  },
+  methods: {
+    startCapture () {
+      this.$store.commit('startCapture')
+      this.fakeCapture()
+    },
+    fakeCapture () {
+      const interval = (this.timer.selected * 1000) / 100
+      const fakeProgress = window.setInterval(() => {
+        if (this.capturing.state < 100) {
+          this.$store.commit('updateCaptureState', this.capturing.state + 1)
+        } else {
+          window.clearInterval(fakeProgress)
+          this.$store.commit('stopCapture')
+        }
+      }, interval)
+    }
   }
 }
 </script>