feat(encoding): moar labels

src/views/screens/encoding.vue

@@ -2,14 +2,14 @@
   <div class="encoding">
 
     <div class="encoding-loader">
-      <encoding-loader :percent="roundedPercentage" class="encoding-progress"></encoding-loader>
+      <encoding-loader :percent="percentage" class="encoding-progress"></encoding-loader>
       <preview-canvas class="encoding-loader__preview"></preview-canvas>
     </div>
-    <div class="encoding-percent">{{ roundedPercentage }}%</div>
+    <div class="encoding-percent">{{ percentage }}%</div>
 
     <div class="layoutOverlay-content">
-      <div class="layoutOverlay-title">Almost ready~</div>
-      <div class="layoutOverlay-subtitle">Encoding may take some time depending on your device</div>
+      <div class="layoutOverlay-title">{{ labelTitle }}</div>
+      <div class="layoutOverlay-subtitle">{{ labelSubtitle }}</div>
     </div>
 
     <button class="encoding-notif">
@@ -34,12 +34,46 @@ export default {
   props: {
     value: Number
   },
+  data: () => ({
+    lastTitleUpdate: null,
+    labelTitle: 'Encoding…'
+  }),
   computed: {
     percentage () {
-      return this.value * 100
+      return Math.trunc(this.value * 100)
     },
-    roundedPercentage () {
-      return Math.trunc(this.percentage)
+    labelSubtitle () {
+      return Math.random() < 0.7 ? 'Encoding may take some time depending on your device' : 'Encoding may take some time depending on your level of cuteness'
+    }
+  },
+  methods: {
+    updateTitle () {
+      const currentDate = Date.now()
+      if (!this.lastTitleUpdate || (currentDate - this.lastTitleUpdate > 1000)) {
+        this.lastTitleUpdate = currentDate
+        switch (true) {
+          case this.percentage < 25:
+            this.labelTitle = 'Encoding…'
+            break
+          case this.percentage < 50:
+            this.labelTitle = 'A little bit more'
+            break
+          case this.percentage < 75:
+            this.labelTitle = 'One last touch'
+            break
+          case this.percentage >= 75:
+            this.labelTitle = 'Almost ready ~'
+            break
+          default:
+            this.labelTitle = 'Error'
+            break
+        }
+      }
+    }
+  },
+  watch: {
+    percentage: function () {
+      this.updateTitle()
     }
   }
 }