refactor(preview): Move canvas in a dedicated component

src/views/components/preview-canvas.vue

@@ -0,0 +1,71 @@
+<template>
+  <canvas ref="previewCanvas"></canvas>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { boomerang } from '/services/effects.js'
+import { pipe, cycle } from '/services/util.js'
+
+export default {
+  name: 'previewCanvas',
+  data: () => ({
+    previewInterval: null
+  }),
+  computed: {
+    ...mapState([
+      'capture',
+      'boomerang'
+    ])
+  },
+  methods: {
+    startPreview () {
+      if (!this.capture) {
+        this.backHome()
+      } else {
+        const canvas = this.$refs.previewCanvas
+        canvas.width = this.capture.imageWidth
+        canvas.height = this.capture.imageHeight
+        const canvasContext = canvas.getContext('2d')
+
+        const imagesIterator = pipe(this.capture.imageDataList, [
+          (images) => this.boomerang ? boomerang(images) : images,
+          cycle
+        ])
+        const delay = this.capture.delayTime
+
+        this.previewInterval = setInterval(() => {
+          const {
+            value: image,
+            done
+          } = imagesIterator.next()
+
+          if (image) {
+            canvasContext.putImageData(image, 0, 0)
+          }
+
+          if (done) {
+            clearInterval(this.previewInterval)
+            this.previewInterval = null
+          }
+        }, delay)
+      }
+    },
+    stopPreview () {
+      window.clearInterval(this.previewInterval)
+    }
+  },
+  watch: {
+    boomerang: function () {
+      this.stopPreview()
+      this.startPreview()
+    }
+  },
+  mounted () {
+    this.startPreview()
+  },
+  destroyed () {
+    this.stopPreview()
+  }
+}
+</script>

src/views/screens/preview.vue

@@ -3,7 +3,7 @@
     <capture-options :disabled-time="true" :disabled-timer="true" :back-btn="back"></capture-options>
 
     <div class="preview">
-      <canvas ref="previewCanvas" class="preview-visual"></canvas>
+      <preview-canvas v-if="capture" class="preview-visual"></preview-canvas>
     </div>
 
     <button class="download-btn btn btn--primary w100" :class="{ 'btn--loading': encoding }" :disabled="encoding" @click="startEncoding">Generate GIF</button>
@@ -16,8 +16,7 @@
 import { encode } from '/services/encode.js'
 import encodingOverlay from '/views/components/encoding'
 import captureOptions from '/views/components/capture-options'
-import { boomerang } from '/services/effects.js'
+import previewCanvas from '/views/components/preview-canvas'
-import { pipe, cycle } from '/services/util.js'
 
 import { mapState } from 'vuex'
 
@@ -25,7 +24,8 @@ export default {
   name: 'preview',
   components: {
     encodingOverlay,
-    captureOptions
+    captureOptions,
+    previewCanvas
   },
   data: () => ({
     encoding: false,
@@ -46,41 +46,6 @@ export default {
     backHome () {
       this.$router.push({ name: 'home' })
     },
-    startPreview () {
-      if (!this.capture) {
-        this.backHome()
-      } else {
-        const canvas = this.$refs.previewCanvas
-        canvas.width = this.capture.imageWidth
-        canvas.height = this.capture.imageHeight
-        const canvasContext = canvas.getContext('2d')
-
-        const imagesIterator = pipe(this.capture.imageDataList, [
-          (images) => this.boomerang ? boomerang(images) : images,
-          cycle
-        ])
-        const delay = this.capture.delayTime
-
-        this.previewInterval = setInterval(() => {
-          const {
-            value: image,
-            done
-          } = imagesIterator.next()
-
-          if (image) {
-            canvasContext.putImageData(image, 0, 0)
-          }
-
-          if (done) {
-            clearInterval(this.previewInterval)
-            this.previewInterval = null
-          }
-        }, delay)
-      }
-    },
-    stopPreview () {
-      window.clearInterval(this.previewInterval)
-    },
     startEncoding () {
       this.encoding = true
       const encoding = encode(this.capture, { boomerangEffect: this.boomerang })
@@ -103,22 +68,10 @@ export default {
       })
     }
   },
-  watch: {
-    boomerang: function () {
-      this.stopPreview()
-      this.startPreview()
-    }
-  },
   created () {
     if (!this.capture) {
       this.backHome()
     }
-  },
-  mounted () {
-    this.startPreview()
-  },
-  destroyed () {
-    this.stopPreview()
   }
 }
 </script>