diff --git a/src/views/components/preview-canvas.vue b/src/views/components/preview-canvas.vue
new file mode 100644
index 0000000..bc6f1e5
--- /dev/null
+++ b/src/views/components/preview-canvas.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
diff --git a/src/views/screens/preview.vue b/src/views/screens/preview.vue
index 32a75f5..5c3af6f 100644
--- a/src/views/screens/preview.vue
+++ b/src/views/screens/preview.vue
@@ -3,7 +3,7 @@
@@ -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 { pipe, cycle } from '/services/util.js'
+import previewCanvas from '/views/components/preview-canvas'
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()
}
}