feat: add animation on completion

package.json

@@ -48,6 +48,7 @@
     "vite": "^2.6.10"
   },
   "dependencies": {
+    "canvas-confetti": "^1.4.0",
     "electron-store": "^8.0.1",
     "fs-extra": "^10.0.0",
     "gifsicle": "^5.3.0",

src/main/preload.js

@@ -15,6 +15,7 @@ contextBridge.exposeInMainWorld('electron', {
   },
   store: {
     set: (key, value) => store.app.set(key, value),
-    get: key => store.app.get(key)
+    get: key => store.app.get(key),
+    on: (key, cb) => store.app.onDidChange(key, cb)
   }
 })

src/main/store/module/app.js

@@ -2,6 +2,7 @@ const Store = require('electron-store')
 
 const app = new Store({
   name: 'app',
+  watch: true,
 
   schema: {
     bounds: {
@@ -20,6 +21,10 @@ const app = new Store({
       type: 'boolean',
       default: false
     },
+    animationOnCompletion: {
+      type: 'boolean',
+      default: true
+    },
     concurrency: {
       type: 'number',
       default: 10

src/renderer/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-title-bar" />
+  <div class="app-tool-bar" />
   <main>
     <keep-alive>
       <component :is="component" />
@@ -8,6 +8,10 @@
   <footer>
     <AppFooter @action="onFooterAction" />
   </footer>
+  <canvas
+    ref="canvas"
+    class="confetti"
+  />
 </template>
 
 <script>
@@ -16,7 +20,8 @@ import AppFileList from '@/components/AppFileList.vue'
 import AppFooter from '@/components/AppFooter.vue'
 import AppMain from '@/components/AppMain.vue'
 import AppSettings from '@/components/AppSettings.vue'
-import { ipc } from '@/electron'
+import { ipc, store } from '@/electron'
+import confetti from 'canvas-confetti'
 
 export default {
   name: 'App',
@@ -37,7 +42,9 @@ export default {
 
   data () {
     return {
-      component: 'AppMain'
+      component: 'AppMain',
+      confetti: null,
+      animationOnCompletion: store.get('animationOnCompletion')
     }
   },
 
@@ -46,6 +53,18 @@ export default {
     ipc.on('menu:preferences', () => {
       this.component = 'AppSettings'
     })
+    ipc.on('optimization-complete', () => {
+      if (this.animationOnCompletion) {
+        this.runConfetti()
+      }
+    })
+    store.on('animationOnCompletion', v => {
+      this.animationOnCompletion = v
+    })
+  },
+
+  mounted () {
+    this.confetti = confetti.create(this.$refs.canvas)
   },
 
   methods: {
@@ -62,6 +81,12 @@ export default {
       } else {
         this.component = 'AppMain'
       }
+    },
+    runConfetti () {
+      this.confetti({
+        particleCount: 200,
+        origin: { y: 1 }
+      })
     }
   }
 }
@@ -84,10 +109,18 @@ export default {
     grid-area: footer;
     padding: 0 12px;
   }
+  .confetti {
+    position: absolute;
+    height: 100vh;
+    width: 100%;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
 }
 
 .app {
-  &-title-bar {
+  &-tool-bar {
     position: absolute;
     top: 0;
     width: 100%;

src/renderer/components/AppSettings.vue

@@ -32,6 +32,9 @@
       <AppSettingsRow title="Clear result list when new image added">
         <AppToggle v-model="clearResultList" />
       </AppSettingsRow>
+      <AppSettingsRow title="Animation on completion">
+        <AppToggle v-model="animationOnCompletion" />
+      </AppSettingsRow>
     </div>
   </div>
 </template>
@@ -58,7 +61,8 @@ export default {
       localPngQualityMax: Number(store.get('pngquant.qualityMax')),
       localAddMinSuffix: store.get('addMinSuffix'),
       localAddToSubfolder: store.get('addToSubfolder'),
-      localClearResultList: store.get('clearResultList')
+      localClearResultList: store.get('clearResultList'),
+      localAnimationOnCompletion: store.get('animationOnCompletion')
     }
   },
 
@@ -128,6 +132,15 @@ export default {
         this.localClearResultList = v
         store.set('clearResultList', v)
       }
+    },
+    animationOnCompletion: {
+      get () {
+        return this.localAnimationOnCompletion
+      },
+      set (v) {
+        this.localAnimationOnCompletion = v
+        store.set('animationOnCompletion', v)
+      }
     }
   },
 

yarn.lock

@@ -2817,6 +2817,11 @@ caniuse-lite@^1.0.30001280:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001282.tgz#38c781ee0a90ccfe1fe7fefd00e43f5ffdcb96fd"
   integrity sha512-YhF/hG6nqBEllymSIjLtR2iWDDnChvhnVJqp+vloyt2tEHFG1yBR+ac2B/rOw0qOK0m0lEXU2dv4E/sMk5P9Kg==
 
+canvas-confetti@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/canvas-confetti/-/canvas-confetti-1.4.0.tgz#840f6db4a566f8f32abe28c00dcd82acf39c92bd"
+  integrity sha512-S18o4Y9PqI/uabdlT/jI3MY7XBJjNxnfapFIkjkMwpz6qNxLFZOm2b22OMf4ZYDL9lpNWI+Ih4fEMVPwO1KHFQ==
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -5027,7 +5032,7 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-gifsicle@5.3.0:
+gifsicle@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/gifsicle/-/gifsicle-5.3.0.tgz#499713c6f1e89ebbc3630da3a74fdb4697913b4e"
   integrity sha512-FJTpgdj1Ow/FITB7SVza5HlzXa+/lqEY0tHQazAJbuAdvyJtkH4wIdsR2K414oaTwRXHFLLF+tYbipj+OpYg+Q==