refact(gif effects): extract boomerang effect

src/services/effects.js

@@ -0,0 +1 @@
+export const boomerang = xs => [...xs, ...xs.slice(1, xs.length - 1).reverse()]

src/services/encode-core.js

@@ -6,7 +6,8 @@ import {
   IndexedColorImage
 } from 'gif-writer'
 
-import { calcProgress } from '/services/util.js'
+import { boomerang } from '/services/effects.js'
+import { pipe, calcProgress } from '/services/util.js'
 
 class OutputStream {
   constructor () {
@@ -41,9 +42,9 @@ export function write (imageWidth, imageHeight, delay, indexedColorImages, boome
 
     writer.writeLoopControlInfo(0)
 
-    const frames = boomerangEffect
-      ? [...indexedColorImages, ...indexedColorImages.slice(1, indexedColorImages.length - 1).reverse()]
-      : indexedColorImages
+    const frames = pipe(indexedColorImages, [
+      (images) => boomerangEffect ? boomerang(images) : images
+    ])
 
     frames.forEach((indexedColorImage, index, { length }) => {
       writer.writeTableBasedImageWithGraphicControl(indexedColorImage, { delayTimeInMS: delay })

src/services/util.js

@@ -1,3 +1,5 @@
+export const pipe = (x, fs) => fs.reduce((a, f) => f(a), x)
+
 export function * cycle (xs) {
   while (true) {
     yield * xs

src/views/screens/preview.vue

@@ -16,7 +16,8 @@
 import { encode } from '/services/encode.js'
 import encodingOverlay from '/views/components/encoding'
 import captureOptions from '/views/components/capture-options'
-import { cycle } from '/services/util.js'
+import { boomerang } from '/services/effects.js'
+import { pipe, cycle } from '/services/util.js'
 
 import { mapState } from 'vuex'
 
@@ -54,11 +55,10 @@ export default {
         canvas.height = this.capture.imageHeight
         const canvasContext = canvas.getContext('2d')
 
-        const frames = this.boomerang
-          ? [...this.capture.imageDataList, ...this.capture.imageDataList.slice(1, this.capture.imageDataList.length - 1).reverse()]
-          : this.capture.imageDataList
-
-        const imagesIterator = cycle(frames)
+        const imagesIterator = pipe(this.capture.imageDataList, [
+          (images) => this.boomerang ? boomerang(images) : images,
+          cycle
+        ])
         const delay = this.capture.delayTime
 
         this.previewInterval = setInterval(() => {