feat: Add capture state

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;
+}

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);
+  }
+}

src/assets/css/style.css

@@ -31,6 +31,7 @@
 /* ----------------------------------------------------------- */
 
 @import "4-modules/preview.css";
+@import "4-modules/progress-bar.css";
 
 /* ----------------------------------------------------------- */
 /* == screens */

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>

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: {

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>