Remove image handling from `KeyframeAnimation`

2 files changed, 19 insertions, 53 deletions

diff --git a/gui/packages/desktop/src/main/keyframe-animation.js b/gui/packages/desktop/src/main/keyframe-animation.js
index 606addba5b..a365c5d1f9 100644
--- a/gui/packages/desktop/src/main/keyframe-animation.js
+++ b/gui/packages/desktop/src/main/keyframe-animation.js
@@ -1,9 +1,6 @@
 // @flow
 
-import { nativeImage } from 'electron';
-import type { NativeImage } from 'electron';
-
-export type OnFrameFn = (image: NativeImage) => void;
+export type OnFrameFn = (frame: number) => void;
 export type OnFinishFn = (void) => void;
 export type KeyframeAnimationOptions = {
   startFrame?: number,
@@ -20,7 +17,6 @@ export default class KeyframeAnimation {
   _onFrame: ?OnFrameFn;
   _onFinish: ?OnFinishFn;
 
-  _nativeImages: Array<NativeImage>;
   _frameRange: KeyframeAnimationRange;
   _numFrames: number;
   _currentFrame: number = 0;
@@ -61,49 +57,13 @@ export default class KeyframeAnimation {
     return this._reverse;
   }
 
-  get nativeImages(): Array<NativeImage> {
-    return this._nativeImages.slice();
-  }
   get isFinished(): boolean {
     return this._isFinished;
   }
 
-  // create animation from files matching filename pattern. i.e (bubble-frame-{}.png)
-  static fromFilePattern(filePattern: string, range: KeyframeAnimationRange): KeyframeAnimation {
-    const images: Array<NativeImage> = [];
-
-    if (range.length !== 2 || range[0] > range[1]) {
-      throw new Error('the animation range is invalid');
-    }
-
-    for (let i = range[0]; i <= range[1]; i++) {
-      const filePath = filePattern.replace('{}', i.toString());
-      const image = nativeImage.createFromPath(filePath);
-      images.push(image);
-    }
-    return new KeyframeAnimation(images);
-  }
-
-  static fromFileSequence(files: Array<string>): KeyframeAnimation {
-    const images: Array<NativeImage> = files.map((filePath) =>
-      nativeImage.createFromPath(filePath),
-    );
-    return new KeyframeAnimation(images);
-  }
-
-  constructor(images: Array<NativeImage>) {
-    const len = images.length;
-    if (len < 1) {
-      throw new Error('too few images in animation');
-    }
-
-    this._nativeImages = images.slice();
-    this._numFrames = len;
-    this._frameRange = [0, len];
-  }
-
-  get currentImage(): NativeImage {
-    return this._nativeImages[this._currentFrame];
+  constructor(numFrames: number) {
+    this._numFrames = numFrames;
+    this._frameRange = [0, numFrames];
   }
 
   play(options: KeyframeAnimationOptions = {}) {
@@ -166,7 +126,7 @@ export default class KeyframeAnimation {
 
   _render() {
     if (this._onFrame) {
-      this._onFrame(this._nativeImages[this._currentFrame]);
+      this._onFrame(this._currentFrame);
     }
   }
 
diff --git a/gui/packages/desktop/src/main/tray-icon-controller.js b/gui/packages/desktop/src/main/tray-icon-controller.js
index 54187177f5..469a76e086 100644
--- a/gui/packages/desktop/src/main/tray-icon-controller.js
+++ b/gui/packages/desktop/src/main/tray-icon-controller.js
@@ -2,17 +2,22 @@
 
 import path from 'path';
 import KeyframeAnimation from './keyframe-animation';
-import type { Tray } from 'electron';
+import { nativeImage } from 'electron';
+import type { NativeImage, Tray } from 'electron';
 
 export type TrayIconType = 'unsecured' | 'securing' | 'secured';
 
 export default class TrayIconController {
   _animation: ?KeyframeAnimation;
   _iconType: TrayIconType;
+  _iconImages: Array<NativeImage>;
 
   constructor(tray: Tray, initialType: TrayIconType) {
-    const animation = this._createAnimation();
-    animation.onFrame = (img) => tray.setImage(img);
+    this._loadImages();
+
+    const animation = new KeyframeAnimation(this._iconImages.length);
+    animation.speed = 100;
+    animation.onFrame = (frameNumber) => tray.setImage(this._iconImages[frameNumber]);
     animation.reverse = this._isReverseAnimation(initialType);
     animation.play({ advanceTo: 'end' });
 
@@ -48,12 +53,13 @@ export default class TrayIconController {
     this._iconType = type;
   }
 
-  _createAnimation(): KeyframeAnimation {
+  _loadImages() {
     const basePath = path.resolve(path.join(__dirname, '../assets/images/menubar icons'));
-    const filePath = path.join(basePath, 'lock-{}.png');
-    const animation = KeyframeAnimation.fromFilePattern(filePath, [1, 10]);
-    animation.speed = 100;
-    return animation;
+    const frames = Array.from({ length: 10 }, (_, i) => i + 1);
+
+    this._iconImages = frames.map((frame) =>
+      nativeImage.createFromPath(path.join(basePath, `lock-${frame}.png`)),
+    );
   }
 
   _isReverseAnimation(type: TrayIconType): boolean {