feat: Add fake encoding state

src/assets/css/4-modules/encoding.css

@@ -0,0 +1,18 @@
+/* ----------------------------------------------------------- */
+/* == Encoding overlay */
+/* ----------------------------------------------------------- */
+
+.encoding {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .7);
+  color: #fff;
+  text-align: center;
+  font-size: 2.4rem;
+}

src/assets/css/style.css

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

src/components/capture-options.vue

@@ -1,11 +1,11 @@
 <template lang="html">
   <div class="capture-options">
-    <select class="capture-options__select" v-model="timer.selected" @change="updateTimer(timer.selected)">
+    <select class="capture-options__select" v-model="timer.selected" @change="updateTimer(timer.selected)" :disabled="encoding.status">
       <option v-for="time in timer.list" :key="time" :value="time">
         {{ timeLabel(time) }}
       </option>
     </select>
-    <button class="capture-options__switch" @click="back"><icon-switch/>switch</button>
+    <button class="capture-options__switch" @click="back" :disabled="encoding.status"><icon-switch/>switch</button>
   </div>
 </template>
 
@@ -21,7 +21,8 @@ export default {
   },
   computed: {
     ...mapState([
-      'timer'
+      'timer',
+      'encoding'
     ])
   },
   methods: {

src/components/encoding.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="encoding">
+    Encoding {{ ellipsis }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'encodingOverlay',
+  data () {
+    return {
+      ellipsis: '',
+      interval: null
+    }
+  },
+  methods: {
+    makeLoading () {
+      // Dot loading
+      this.interval = setInterval(() => {
+        if (this.ellipsis.length < 3) {
+          this.ellipsis += '.'
+        } else {
+          this.ellipsis = ''
+        }
+      }, 200)
+    }
+  },
+  mounted: function () {
+    this.makeLoading()
+    window.setTimeout(() => {
+      this.$store.commit('stopEncoding')
+    }, 2000)
+  },
+  destroyed: function () {
+    window.clearTimeout(this.interval)
+  }
+}
+</script>

src/store.js

@@ -13,6 +13,9 @@ export default new Vuex.Store({
     capturing: {
       status: false,
       state: 0
+    },
+    encoding: {
+      status: false
     }
   },
   mutations: {
@@ -30,6 +33,12 @@ export default new Vuex.Store({
     },
     updateCaptureState (store, percent) {
       store.capturing.state = percent
+    },
+    startEncoding (store) {
+      store.encoding.status = true
+    },
+    stopEncoding (store) {
+      store.encoding.status = false
     }
   },
   actions: {

src/views/capture.vue

@@ -11,12 +11,14 @@
 
     <button class="capture-btn" :class="{ 'capture-btn--capturing': capturing.status }" @click="startCapture">Capture</button>
 
+    <encoding-overlay v-if="encoding.status"/>
   </div>
 </template>
 
 <script>
 import captureOptions from '@/components/capture-options'
 import captureProgress from '@/components/capture-progress'
+import encodingOverlay from '@/components/encoding'
 
 import { mapState } from 'vuex'
 
@@ -24,12 +26,14 @@ export default {
   name: 'capture',
   components: {
     captureOptions,
-    captureProgress
+    captureProgress,
+    encodingOverlay
   },
   computed: {
     ...mapState([
       'capturing',
-      'timer'
+      'timer',
+      'encoding'
     ])
   },
   methods: {
@@ -45,6 +49,8 @@ export default {
         } else {
           window.clearInterval(fakeProgress)
           this.$store.commit('stopCapture')
+          this.$store.commit('updateCaptureState', 0)
+          this.$store.commit('startEncoding')
         }
       }, interval)
     }