style(encoding overlay): Add new design with better progress feedback

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

@@ -7,12 +7,66 @@
   top: 0;
   left: 0;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, .7);
+  background-color: rgba(0, 0, 0, .9);
   color: #fff;
   text-align: center;
   font-size: 2.4rem;
 }
+
+.encoding-illu {
+  position: relative;
+  margin-bottom: 5rem;
+}
+
+.encoding-illu::before {
+  position: absolute;
+  top: .5rem;
+  right: -1rem;
+  left: -1rem;
+  height: .5rem;
+  border-radius: .5rem;
+  border-radius: .4rem;
+  background: var(--color-primary);
+  box-shadow: 0 .4rem .4rem rgba(0, 0, 0, .25);
+  content: "";
+  animation: encodingProgress .3s ease-in-out infinite alternate;
+}
+
+@keyframes encodingProgress {
+  from {
+    top: .5rem;
+  }
+
+  to {
+    top: calc(100% - 1rem);
+  }
+}
+
+.encoding-label {
+  font-size: 2rem;
+}
+
+.encoding-progressBar {
+  overflow: hidden;
+  margin: 2rem 0;
+  max-width: 30rem;
+  width: 90%;
+  border-radius: .5rem;
+  background-color: rgba(255, 255, 255, .2);
+}
+
+.encoding-progressBar__state {
+  height: .5rem;
+  background: linear-gradient(91.78deg, var(--color-primary) 0%,var(--color-secondary) 100%);
+}
+
+.encoding-percent {
+  padding-bottom: 2rem;
+  font-size: 5rem;
+  line-height: 1;
+}

src/assets/img/video-encoding.svg

@@ -0,0 +1,10 @@
+<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.31355 6.42398C0 12.1722 0 21.1148 0 39C0 56.8852 0 65.8279 5.31355 71.576C5.66901 71.9606 6.03944 72.331 6.42398 72.6864C12.1722 78 21.1148 78 39 78C56.8852 78 65.8279 78 71.576 72.6864C71.9606 72.331 72.331 71.9606 72.6864 71.576C78 65.8279 78 56.8852 78 39C78 21.1148 78 12.1722 72.6864 6.42398C72.331 6.03944 71.9606 5.66901 71.576 5.31355C65.8279 0 56.8852 0 39 0C21.1148 0 12.1722 0 6.42398 5.31355C6.03944 5.66901 5.66901 6.03944 5.31355 6.42398ZM32.8569 52.444L54.0069 40.233C55.0939 39.606 55.0939 38.036 54.0069 37.409L32.8569 25.198C31.7699 24.57 30.4109 25.355 30.4109 26.61V51.032C30.4109 52.287 31.7699 53.072 32.8569 52.444Z" fill="#8420A7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.31355 6.42398C0 12.1722 0 21.1148 0 39C0 56.8852 0 65.8279 5.31355 71.576C5.66901 71.9606 6.03944 72.331 6.42398 72.6864C12.1722 78 21.1148 78 39 78C56.8852 78 65.8279 78 71.576 72.6864C71.9606 72.331 72.331 71.9606 72.6864 71.576C78 65.8279 78 56.8852 78 39C78 21.1148 78 12.1722 72.6864 6.42398C72.331 6.03944 71.9606 5.66901 71.576 5.31355C65.8279 0 56.8852 0 39 0C21.1148 0 12.1722 0 6.42398 5.31355C6.03944 5.66901 5.66901 6.03944 5.31355 6.42398ZM32.8569 52.444L54.0069 40.233C55.0939 39.606 55.0939 38.036 54.0069 37.409L32.8569 25.198C31.7699 24.57 30.4109 25.355 30.4109 26.61V51.032C30.4109 52.287 31.7699 53.072 32.8569 52.444Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="0" y1="0" x2="78" y2="78" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8420A7"/>
+<stop offset="1" stop-color="#55126D"/>
+</linearGradient>
+</defs>
+</svg>

src/store.js

@@ -22,7 +22,7 @@ export default new Vuex.Store({
     },
     encoding: {
       status: false,
-      progress: 0
+      state: 0
     },
     downloading: {
       status: false,
@@ -65,8 +65,8 @@ export default new Vuex.Store({
     stopEncoding (store) {
       store.encoding.status = false
     },
-    updateEncodingProgress (store, progress) {
-      store.encoding.progress = progress
+    updateEncodingState (store, percent) {
+      store.encoding.state = percent
     },
     startDownloading (store, objectUrl) {
       store.downloading.status = true
@@ -138,12 +138,12 @@ export default new Vuex.Store({
 
       encoding.on('progress', value => {
         console.log(`Encoding progress ${Math.round(value * 100)}% (${value})`)
-        commit('updateEncodingProgress', Math.round(value * 100))
+        commit('updateEncodingState', Math.round(value * 100))
       })
 
       encoding.once('done', objectUrl => {
         commit('stopEncoding')
-        commit('updateEncodingProgress', 0)
+        commit('updateEncodingState', 0)
         commit('startDownloading', objectUrl)
       })
     }

src/views/components/encoding.vue

@@ -1,7 +1,13 @@
 <template lang="html">
   <div class="encoding">
-    Encoding {{ ellipsis }}<br/>
-    {{ encoding.progress }}%
+    <div class="encoding-illu">
+      <img src="/assets/img/video-encoding.svg" alt="">
+    </div>
+    <div class="encoding-label">Encoding</div>
+    <div class="encoding-progressBar">
+      <div class="encoding-progressBar__state" :style="'width: ' + encoding.state + '%;'"></div>
+    </div>
+    <div class="encoding-percent">{{ encoding.state }}%</div>
   </div>
 </template>
 
@@ -10,34 +16,10 @@ import { mapState } from 'vuex'
 
 export default {
   name: 'encodingOverlay',
-  data () {
-    return {
-      ellipsis: '',
-      interval: null
-    }
-  },
   computed: {
     ...mapState([
       'encoding'
     ])
-  },
-  methods: {
-    makeLoading () {
-      // Dot loading
-      this.interval = setInterval(() => {
-        if (this.ellipsis.length < 3) {
-          this.ellipsis += '.'
-        } else {
-          this.ellipsis = ''
-        }
-      }, 200)
-    }
-  },
-  mounted: function () {
-    this.makeLoading()
-  },
-  destroyed: function () {
-    window.clearTimeout(this.interval)
   }
 }
 </script>