From 0f6c1743f0445718387744d7e1d919cf63052aa1 Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Fri, 15 Mar 2019 23:43:14 +0100
Subject: [PATCH] style(encoding overlay): Add new design with better progress
 feedback

---
 src/assets/css/4-modules/encoding.css | 56 ++++++++++++++++++++++++++-
 src/assets/img/video-encoding.svg     | 10 +++++
 src/store.js                          | 10 ++---
 src/views/components/encoding.vue     | 34 ++++------------
 4 files changed, 78 insertions(+), 32 deletions(-)
 create mode 100644 src/assets/img/video-encoding.svg

diff --git a/src/assets/css/4-modules/encoding.css b/src/assets/css/4-modules/encoding.css
index c987ccf..874ca0c 100644
--- a/src/assets/css/4-modules/encoding.css
+++ b/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;
+}
diff --git a/src/assets/img/video-encoding.svg b/src/assets/img/video-encoding.svg
new file mode 100644
index 0000000..d34ae0b
--- /dev/null
+++ b/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>
diff --git a/src/store.js b/src/store.js
index aa91e68..0c3292e 100644
--- a/src/store.js
+++ b/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)
       })
     }
diff --git a/src/views/components/encoding.vue b/src/views/components/encoding.vue
index 5ce31b6..648c009 100644
--- a/src/views/components/encoding.vue
+++ b/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>