feat(encoding overlay): Show a simple percentage of the progress

src/store.js

@@ -21,7 +21,8 @@ export default new Vuex.Store({
       state: 0
     },
     encoding: {
-      status: false
+      status: false,
+      progress: 0
     },
     downloading: {
       status: false,
@@ -64,6 +65,9 @@ export default new Vuex.Store({
     stopEncoding (store) {
       store.encoding.status = false
     },
+    updateEncodingProgress (store, progress) {
+      store.encoding.progress = progress
+    },
     startDownloading (store, objectUrl) {
       store.downloading.status = true
       store.downloading.objectUrl = objectUrl
@@ -132,10 +136,14 @@ export default new Vuex.Store({
 
       encoding.once('error', error => console.error(error))
 
-      encoding.on('progress', value => console.log(`Encoding progress ${Math.round(value * 100)}% (${value})`))
+      encoding.on('progress', value => {
+        console.log(`Encoding progress ${Math.round(value * 100)}% (${value})`)
+        commit('updateEncodingProgress', Math.round(value * 100))
+      })
 
       encoding.once('done', objectUrl => {
         commit('stopEncoding')
+        commit('updateEncodingProgress', 0)
         commit('startDownloading', objectUrl)
       })
     }

src/views/components/encoding.vue

@@ -1,10 +1,13 @@
 <template lang="html">
   <div class="encoding">
-    Encoding {{ ellipsis }}
+    Encoding {{ ellipsis }}<br/>
+    {{ encoding.progress }}%
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'encodingOverlay',
   data () {
@@ -13,6 +16,11 @@ export default {
       interval: null
     }
   },
+  computed: {
+    ...mapState([
+      'encoding'
+    ])
+  },
   methods: {
     makeLoading () {
       // Dot loading