refact(countdown): rewrite with task

package-lock.json

@@ -3584,6 +3584,11 @@
       "integrity": "sha512-R+H8IZclI8AAkSBRQJLVOsxwAoHd6WC40b4QTNWIjzAa6BXOBfQcM587MXDTVPeYaopFNWHUFLx7eNmHDSxMWg==",
       "dev": true
     },
+    "folktale": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/folktale/-/folktale-2.3.2.tgz",
+      "integrity": "sha512-+8GbtQBwEqutP0v3uajDDoN64K2ehmHd0cjlghhxh0WpcfPzAIjPA03e1VvHlxL02FVGR0A6lwXsNQKn3H1RNQ=="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@babel/runtime": "^7.4.3",
     "eventemitter3": "^3.1.0",
+    "folktale": "^2.3.2",
     "generic-pool": "^3.6.1",
     "gif-writer": "^0.9.3",
     "objectFitPolyfill": "^2.1.1",

src/services/countdown.js

@@ -1,68 +1,20 @@
-import EventEmitter from 'eventemitter3'
+import { task } from 'folktale/concurrency/task'
 
-export function countdown (n, delay) {
-  return new Countdown(n, delay)
-}
-
-class Countdown extends EventEmitter {
-  constructor (n, delay) {
-    super()
-
-    this._n = n
-    this._delay = delay
-
-    this._count = 0
-    this._intervalId = null
-
-    this._running = false
-    this._started = false
-    this._ended = false
-    this._cancelled = false
-    this._done = false
-  }
-
-  run () {
-    if (!this._running && !this._started) {
-      this._running = true
-      this._started = true
-      this.emit('started')
-      this._update()
-
-      this._intervalId = setInterval(() => {
-        this._count++
-        this._update()
-
-        if (this._count >= this._n) {
-          this._cleanup()
-          this.done = true
-          this.emit('done')
-          this._end()
-        }
-      }, this._delay)
-    }
-  }
-
-  cancel () {
-    if (this._running && !this._ended) {
-      this._cleanup()
-      this._cancelled = true
-      this.emit('cancelled')
-      this._end()
-    }
-  }
-
-  _update () {
-    this.emit('progress', this._count / this._n)
-    this.emit('update', this._n - this._count)
-  }
-
-  _end () {
-    this.ended = true
-    this.emit('ended')
-    this._running = false
-  }
-
-  _cleanup () {
-    clearInterval(this._intervalId)
-  }
+export function countdown (n, delay, onStep) {
+  return task(resolver => {
+    let count = 0
+
+    let intervalId = setInterval(() => {
+      count++
+      onStep(n - count)
+
+      if (count >= n) {
+        resolver.resolve()
+      }
+    }, delay)
+
+    resolver.cleanup(() => {
+      clearTimeout(intervalId)
+    })
+  })
 }

src/views/screens/capture.vue

@@ -89,27 +89,28 @@ export default {
       }
     },
     runCountdown () {
-      this.countdown = countdown(this.timer, 1000)
-
-      this.countdown.on('started', value => {
-        this.timerActive = true
-      })
-
-      this.countdown.on('update', value => {
+      const step = (value) => {
         this.timerProgress = value
-      })
+      }
 
-      this.countdown.on('ended', () => {
+      const cleanup = () => {
         this.timerActive = false
         this.timerProgress = 0
         this.countdown = null
-      })
+      }
 
-      this.countdown.on('done', () => {
+      this.timerActive = true
+      this.timerProgress = this.timer
+
+      this.countdown = countdown(this.timer, 1000, step).run()
+
+      this.countdown.listen({
+        onCancelled: cleanup,
+        onRejected: cleanup,
+        onResolved: () => {
           this.runCapture()
+        }
       })
-
-      this.countdown.run()
     },
     cancelCountdown () {
       if (this.countdown) {