feat(notification): add done notification

src/views/screens/download.vue

@@ -24,6 +24,7 @@ import { encode } from '/services/encode.js'
 import encodingScreen from '/views/screens/encoding'
 import iconDl from '/views/icons/ico-download'
 import illuFlower from '/views/icons/flower'
+import appLogo from '/assets/img/icons/android-chrome-512x512.png'
 
 export default {
   name: 'download',
@@ -85,6 +86,19 @@ export default {
         this.$store.commit('updateGif', gif)
         this.fillGIF()
         this.downloadReady = true
+
+        if (document.hidden && ('Notification' in window) && Notification.permission === 'granted') {
+          const notification = new Notification('You can now download your souvenir', {
+            body: 'Thank you for your patience.',
+            icon: appLogo
+          })
+
+          notification.addEventListener('click', () => {
+            parent.focus()
+          }, {
+            once: true
+          })
+        }
       })
     }
   },

src/views/screens/encoding.vue

@@ -12,7 +12,7 @@
       <div class="layoutOverlay-subtitle">{{ labelSubtitle }}</div>
     </div>
 
-    <button class="encoding-notif">
+    <button v-if="showNotificationButton" class="encoding-notif" @click="noticeMeSenpai">
       <icon-notif class="encoding-notif__icon"></icon-notif>
       <div>Get notified when It’s done</div>
     </button>
@@ -36,7 +36,8 @@ export default {
   },
   data: () => ({
     lastTitleUpdate: null,
-    labelTitle: 'Encoding…'
+    labelTitle: 'Encoding…',
+    showNotificationButton: showNotificationButton()
   }),
   computed: {
     percentage () {
@@ -69,6 +70,11 @@ export default {
             break
         }
       }
+    },
+    noticeMeSenpai () {
+      Notification.requestPermission().then(() => {
+        this.showNotificationButton = showNotificationButton()
+      })
     }
   },
   watch: {
@@ -77,4 +83,10 @@ export default {
     }
   }
 }
+
+function showNotificationButton () {
+  return ('Notification' in window) &&
+    Notification.permission !== 'granted' &&
+    Notification.permission !== 'denied'
+}
 </script>