refactor: turn events into promises

turn any once occuring event on any element into a promise. This
pattern is already in use but now abstracted into a function.

Author: gruhn

src/components/QrcodeReader.vue

@@ -28,6 +28,7 @@
 import * as Scanner from '../misc/scanner.js'
 import Camera from '../misc/camera.js'
 import { imageDataFromFile, imageDataFromUrl } from '../misc/image-data.js'
+import { hasFired } from '../misc/promisify.js'
 import isBoolean from 'lodash/isBoolean'
 
 export default {
@@ -160,7 +161,7 @@ export default {
       }
     },
 
-    paused (paused) {
+    async paused (paused) {
       const video = this.$refs.video
 
       if (paused) {
@@ -172,11 +173,9 @@ export default {
 
         video.play()
 
-        video.addEventListener(
-          'timeupdate',
-          () => { this.readyAfterPause = true },
-          { once: true }
-        )
+        await hasFired(video, 'timeupdate')
+
+        this.readyAfterPause = true
       }
     },
 

src/misc/camera.js

@@ -1,4 +1,5 @@
 import { imageDataFromVideo } from './image-data.js'
+import { hasFired } from './promisify.js'
 
 class Camera {
 
@@ -41,11 +42,7 @@ export default async function (constraints, videoEl) {
   }
 
   const stream = await navigator.mediaDevices.getUserMedia(constraints)
-
-  const streamLoadedPromise = new Promise((resolve, reject) => {
-    videoEl.addEventListener('loadeddata', resolve, { once: true })
-    videoEl.addEventListener('error', reject, { once: true })
-  })
+  const streamLoaded = hasFired(videoEl, 'loadeddata', 'error')
 
   if (videoEl.srcObject !== undefined) {
     videoEl.srcObject = stream
@@ -62,7 +59,7 @@ export default async function (constraints, videoEl) {
   videoEl.playsInline = true
   videoEl.play() // firefox does not emit `loadeddata` if video not playing
 
-  await streamLoadedPromise
+  await streamLoaded
 
   return new Camera(videoEl, stream)
 }

src/misc/image-data.js

@@ -1,4 +1,5 @@
 import { DropImageFetchError, DropImageDecodeError } from './errors.js'
+import { hasFired } from './promisify.js'
 
 const canvas = document.createElement('canvas')
 const canvasCtx = canvas.getContext('2d')
@@ -31,29 +32,23 @@ export async function imageDataFromUrl (url) {
   }
 
   const image = document.createElement('img')
-
-  const imageLoadedPromise = new Promise((resolve, reject) => {
-    image.onload = resolve
-  })
+  const imageLoaded = hasFired(image, 'load')
 
   image.src = url
 
-  await imageLoadedPromise
+  await imageLoaded
 
   return imageDataFromImage(image)
 }
 
 export async function imageDataFromFile (file) {
   if (/image.*/.test(file.type)) {
     const reader = new FileReader()
-
-    const readerLoadedPromise = new Promise((resolve, reject) => {
-      reader.onload = event => resolve(event.target.result)
-    })
+    const readerLoaded = hasFired(reader, 'load')
 
     reader.readAsDataURL(file)
 
-    const dataURL = await readerLoadedPromise
+    const dataURL = (await readerLoaded).target.result
 
     return imageDataFromUrl(dataURL)
   } else {

src/misc/promisify.js

@@ -0,0 +1,10 @@
+
+export function hasFired (element, successEvent, errorEvent) {
+  return new Promise((resolve, reject) => {
+    element.addEventListener(successEvent, resolve, { once: true })
+
+    if (errorEvent !== undefined) {
+      element.addEventListener(errorEvent, reject, { once: true })
+    }
+  })
+}