refactor(gif encoder): expose an Event Emitter API

package-lock.json

@@ -3095,6 +3095,11 @@
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
       "dev": true
     },
+    "eventemitter3": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz",
+      "integrity": "sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA=="
+    },
     "events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",
@@ -3510,14 +3515,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3537,8 +3540,7 @@
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -3686,7 +3688,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3694,8 +3695,7 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
@@ -3799,8 +3799,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",

package.json

@@ -9,6 +9,7 @@
     "lint-fix": "eslint --ext .js,vue . --fix"
   },
   "dependencies": {
+    "eventemitter3": "^3.1.0",
     "gif-writer": "^0.9.3",
     "postcss-modules": "^1.4.1",
     "vue": "^2.6.6",

src/services/encode.js

@@ -1,30 +1,31 @@
-// import EncodeWorker from './encode.worker.js'
+import EventEmitter from 'eventemitter3'
 
 const PALETTE_SIZE = 255
 
 export function encode ({ imageDataList, imageWidth, imageHeight, delayTime }) {
-  return new Promise((resolve, reject) => {
+  const emitter = new EventEmitter()
   const worker = new Worker('/services/encode.worker.js')
 
-    worker.onerror = error => reject(error)
+  worker.onerror = error => emitter.emit('error', error)
+  worker.onmessageerror = error => emitter.emit('error', error)
 
   worker.onmessage = event => {
     const { type, payload } = event.data
 
     switch (type) {
       default:
-          reject(new Error(`Unexpected worker message with type ${type}`))
+        emitter.emit('error', new Error(`Unexpected worker message with type ${type}`))
         break
 
       case 'progress':
-          console.log(`Encoding progress : ${payload.value}`)
+        emitter.emit('progress', payload.value)
         break
 
       case 'done':
         const byteArray = new Uint8Array(payload.buffer)
         const blob = new Blob([byteArray], { type: 'image/gif' })
         const objectUrl = URL.createObjectURL(blob)
-          resolve(objectUrl)
+        emitter.emit('done', objectUrl)
         break
     }
   }
@@ -36,5 +37,6 @@ export function encode ({ imageDataList, imageWidth, imageHeight, delayTime }) {
     paletteSize: PALETTE_SIZE,
     delayTime
   })
-  })
+
+  return emitter
 }

src/services/encode.worker.js

@@ -7,17 +7,13 @@ import {
 onmessage = (event) => {
   const { imageDataList, imageWidth, imageHeight, paletteSize, delayTime } = event.data
 
-  console.log('Write GIF')
-
   const outputStream = new OutputStream()
   const writer = new GifWriter(outputStream)
 
   postProgressMessage(0)
 
-  console.log(`Write header`)
   writer.writeHeader()
 
-  console.log(`Write logical screen informations`)
   writer.writeLogicalScreenInfo({
     width: imageWidth,
     height: imageHeight
@@ -26,19 +22,16 @@ onmessage = (event) => {
   writer.writeLoopControlInfo(0)
 
   const indexedColorImages = imageDataList.map((imageData, index, { length }) => {
-    console.log(`Convert frame ${index} ImageData to IndexedColorImage`)
     const indexedColorImage = imageDataToIndexedColorImage(imageData, paletteSize)
     postProgressMessage(calcProgress(0, 0.9, length, index + 1))
     return indexedColorImage
   })
 
   indexedColorImages.forEach((indexedColorImage, index, { length }) => {
-    console.log(`Write frame IndexedColorImage ${index}`)
     writer.writeTableBasedImageWithGraphicControl(indexedColorImage, { delayTimeInMS: delayTime })
     postProgressMessage(calcProgress(0.9, 1, length, index + 1))
   })
 
-  console.log(`Write trailer`)
   writer.writeTrailer()
 
   postDoneMessage(outputStream.buffer)

src/store.js

@@ -119,15 +119,16 @@ export default new Vuex.Store({
     },
     encode ({ commit }, captureData) {
       commit('startEncoding')
+      const encoding = encode(captureData)
 
-      console.log(captureData)
+      encoding.once('error', error => console.error(error))
 
-      encode(captureData)
+      encoding.on('progress', value => console.log(`Encoding progress ${Math.round(value * 100)}% (${value})`))
-        .then(dataUrl => {
+
+      encoding.once('done', objectUrl => {
         commit('stopEncoding')
-          commit('startDownloading', dataUrl)
+        commit('startDownloading', objectUrl)
       })
-        .catch(error => console.error(error))
     }
   }
 })