etro 0.12.0 → 0.13.0

package/dist/etro-iife.js

@@ -47,7 +47,7 @@ var etro = (function () {
             function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
             function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
             function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
+            step((generator = generator.apply(thisArg, [])).next());
         });
     }
 
@@ -240,9 +240,9 @@ var etro = (function () {
     var event = /*#__PURE__*/Object.freeze({
         __proto__: null,
         deprecate: deprecate,
+        publish: publish,
         subscribe: subscribe,
-        unsubscribe: unsubscribe,
-        publish: publish
+        unsubscribe: unsubscribe
     });
 
     /**
@@ -360,7 +360,9 @@ var etro = (function () {
             for (var i = 0; i < this.value.length; i++) {
                 var startTime = this.value[i][0];
                 var startValue = this.value[i][1];
-                var interpolate = this.value[i].length === 3 ? this.value[i][2] : linearInterp;
+                var interpolate = this.value[i].length === 3
+                    ? this.value[i][2]
+                    : linearInterp;
                 if (i + 1 < this.value.length) {
                     var endTime = this.value[i + 1][0];
                     var endValue = this.value[i + 1][1];
@@ -836,7 +838,7 @@ var etro = (function () {
     /**
      * A layer outputs content for the movie
      */
-    var Base = /** @class */ (function () {
+    var Base$1 = /** @class */ (function () {
         /**
          * Creates a new empty layer
          *
@@ -1030,9 +1032,9 @@ var etro = (function () {
     }());
     // id for events (independent of instance, but easy to access when on prototype
     // chain)
-    Base.prototype.type = 'layer';
-    Base.prototype.publicExcludes = ['active'];
-    Base.prototype.propertyFilters = {};
+    Base$1.prototype.type = 'layer';
+    Base$1.prototype.publicExcludes = ['active'];
+    Base$1.prototype.propertyFilters = {};
 
     // TODO: rename to something more consistent with the naming convention of Visual and VisualSourceMixin
     /**
@@ -1064,7 +1066,7 @@ var etro = (function () {
                 sourceStartTime: 0, duration: undefined });
         };
         return Audio;
-    }(AudioSourceMixin(Base)));
+    }(AudioSourceMixin(Base$1)));
 
     var CustomArrayListener = /** @class */ (function () {
         function CustomArrayListener() {
@@ -1077,7 +1079,7 @@ var etro = (function () {
     var CustomArray = /** @class */ (function (_super) {
         __extends(CustomArray, _super);
         function CustomArray(target, listener) {
-            var _this = _super.call(this) || this;
+            _super.call(this) || this;
             for (var _i = 0, target_1 = target; _i < target_1.length; _i++) {
                 var item = target_1[_i];
                 listener.onAdd(item);
@@ -1133,7 +1135,7 @@ var etro = (function () {
         return VisualEffects;
     }(CustomArray));
     /** Any layer that renders to a canvas */
-    var Visual = /** @class */ (function (_super) {
+    var Visual$1 = /** @class */ (function (_super) {
         __extends(Visual, _super);
         /**
          * Creates a visual layer
@@ -1227,7 +1229,7 @@ var etro = (function () {
         Object.defineProperty(Visual.prototype, "ready", {
             get: function () {
                 // Typescript doesn't support `super.ready` when targeting es5
-                var superReady = Object.getOwnPropertyDescriptor(Base.prototype, 'ready').get.call(this);
+                var superReady = Object.getOwnPropertyDescriptor(Base$1.prototype, 'ready').get.call(this);
                 return superReady && this.effects.every(function (effect) { return effect.ready; });
             },
             enumerable: false,
@@ -1237,7 +1239,7 @@ var etro = (function () {
          * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
          */
         Visual.prototype.getDefaultOptions = function () {
-            return __assign(__assign({}, Base.prototype.getDefaultOptions()), { 
+            return __assign(__assign({}, Base$1.prototype.getDefaultOptions()), { 
                 /**
                  * @name module:layer.Visual#x
                  * @desc The offset of the layer relative to the movie
@@ -1273,9 +1275,9 @@ var etro = (function () {
                 opacity: 1 });
         };
         return Visual;
-    }(Base));
-    Visual.prototype.publicExcludes = Base.prototype.publicExcludes.concat(['canvas', 'cctx', 'effects']);
-    Visual.prototype.propertyFilters = __assign(__assign({}, Base.prototype.propertyFilters), { 
+    }(Base$1));
+    Visual$1.prototype.publicExcludes = Base$1.prototype.publicExcludes.concat(['canvas', 'cctx', 'effects']);
+    Visual$1.prototype.propertyFilters = __assign(__assign({}, Base$1.prototype.propertyFilters), { 
         /*
          * If this.width or this.height is null, that means "take all available screen
          * space", so set it to this._move.width or this._movie.height, respectively
@@ -1375,7 +1377,7 @@ var etro = (function () {
             };
             return MixedVisualSource;
         }(superclass));
-        MixedVisualSource.prototype.propertyFilters = __assign(__assign({}, Visual.prototype.propertyFilters), { 
+        MixedVisualSource.prototype.propertyFilters = __assign(__assign({}, Visual$1.prototype.propertyFilters), { 
             /*
              * If no layer width was provided, fall back to the dest width.
              * If no dest width was provided, fall back to the source width.
@@ -1433,7 +1435,7 @@ var etro = (function () {
             return _super.call(this, options) || this;
         }
         return Image;
-    }(VisualSourceMixin(Visual)));
+    }(VisualSourceMixin(Visual$1)));
 
     var TextStrokePosition;
     (function (TextStrokePosition) {
@@ -1529,10 +1531,10 @@ var etro = (function () {
          * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
          */
         Text.prototype.getDefaultOptions = function () {
-            return __assign(__assign({}, Visual.prototype.getDefaultOptions()), { background: null, text: undefined, font: '10px sans-serif', color: parseColor('#fff'), textX: 0, textY: 0, maxWidth: null, textAlign: 'start', textBaseline: 'top', textDirection: 'ltr', textStroke: null });
+            return __assign(__assign({}, Visual$1.prototype.getDefaultOptions()), { background: null, text: undefined, font: '10px sans-serif', color: parseColor('#fff'), textX: 0, textY: 0, maxWidth: null, textAlign: 'start', textBaseline: 'top', textDirection: 'ltr', textStroke: null });
         };
         return Text;
-    }(Visual));
+    }(Visual$1));
 
     /**
      * Layer for an HTML video element
@@ -1554,29 +1556,30 @@ var etro = (function () {
                 duration: (_a = options.duration) !== null && _a !== void 0 ? _a : 0 })) || this;
         }
         return Video;
-    }(AudioSourceMixin(VisualSourceMixin(Visual))));
+    }(AudioSourceMixin(VisualSourceMixin(Visual$1))));
 
     /**
      * @module layer
-     */
+     */
+    // TODO: Add aligning options, like horizontal and vertical align modes
 
-    var index = /*#__PURE__*/Object.freeze({
+    var index$1 = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        AudioSourceMixin: AudioSourceMixin,
         Audio: Audio,
-        Base: Base,
+        AudioSourceMixin: AudioSourceMixin,
+        Base: Base$1,
         Image: Image,
         Text: Text,
         get TextStrokePosition () { return TextStrokePosition; },
         Video: Video,
-        VisualSourceMixin: VisualSourceMixin,
-        Visual: Visual
+        Visual: Visual$1,
+        VisualSourceMixin: VisualSourceMixin
     });
 
     /**
      * @deprecated All visual effects now inherit from `Visual` instead
      */
-    var Base$1 = /** @class */ (function () {
+    var Base = /** @class */ (function () {
         function Base() {
             this.enabled = true;
             this._occurrenceCount = 0;
@@ -1676,14 +1679,14 @@ var etro = (function () {
     }());
     // id for events (independent of instance, but easy to access when on prototype
     // chain)
-    Base$1.prototype.type = 'effect';
-    Base$1.prototype.publicExcludes = [];
-    Base$1.prototype.propertyFilters = {};
+    Base.prototype.type = 'effect';
+    Base.prototype.publicExcludes = [];
+    Base.prototype.propertyFilters = {};
 
     /**
      * Modifies the visual contents of a layer.
      */
-    var Visual$1 = /** @class */ (function (_super) {
+    var Visual = /** @class */ (function (_super) {
         __extends(Visual, _super);
         function Visual() {
             return _super !== null && _super.apply(this, arguments) || this;
@@ -1701,7 +1704,7 @@ var etro = (function () {
             _super.prototype.apply.call(this, target, reltime);
         };
         return Visual;
-    }(Base$1));
+    }(Base));
 
     /**
      * A hardware-accelerated pixel mapping using WebGL
@@ -1773,8 +1776,8 @@ var etro = (function () {
         Shader.prototype._initAttribs = function () {
             var gl = this._gl;
             this._attribLocations = {
+                vertexPosition: gl.getAttribLocation(this._program, 'a_VertexPosition'),
                 textureCoord: gl.getAttribLocation(this._program, 'a_TextureCoord')
-                // a_VertexPosition ?? somehow it works without it though...
             };
         };
         Shader.prototype._initUniforms = function (userUniforms) {
@@ -1992,10 +1995,10 @@ var etro = (function () {
         Shader._initRectBuffers = function (gl) {
             var position = [
                 // the screen/canvas (output)
-                -1.0, 1.0,
+                -1, 1.0,
                 1.0, 1.0,
-                -1.0, -1.0,
-                1.0, -1.0
+                -1, -1,
+                1.0, -1
             ];
             var textureCoord = [
                 // the texture/canvas (input)
@@ -2131,7 +2134,7 @@ var etro = (function () {
         Shader._VERTEX_SOURCE = "\n    attribute vec4 a_VertexPosition;\n    attribute vec2 a_TextureCoord;\n\n    varying highp vec2 v_TextureCoord;\n\n    void main() {\n        // no need for projection or model-view matrices, since we're just rendering a rectangle\n        // that fills the screen (see position values)\n        gl_Position = a_VertexPosition;\n        v_TextureCoord = a_TextureCoord;\n    }\n  ";
         Shader._IDENTITY_FRAGMENT_SOURCE = "\n    precision mediump float;\n\n    uniform sampler2D u_Source;\n\n    varying highp vec2 v_TextureCoord;\n\n    void main() {\n        gl_FragColor = texture2D(u_Source, v_TextureCoord);\n    }\n  ";
         return Shader;
-    }(Visual$1));
+    }(Visual));
     var isPowerOf2 = function (value) { return (value && (value - 1)) === 0; };
 
     /**
@@ -2304,7 +2307,7 @@ var etro = (function () {
             ctx.restore();
         };
         return EllipticalMask;
-    }(Visual$1));
+    }(Visual));
 
     var StackEffectsListener = /** @class */ (function (_super) {
         __extends(StackEffectsListener, _super);
@@ -2377,7 +2380,7 @@ var etro = (function () {
             return this;
         };
         return Stack;
-    }(Visual$1));
+    }(Visual));
 
     /**
      * Applies a Gaussian blur
@@ -2598,7 +2601,7 @@ var etro = (function () {
                 this._tmpCanvas.height = target.canvas.height;
             }
             // Use data, since that's the underlying storage
-            this._tmpMatrix.data = val(this, 'matrix.data', reltime);
+            this._tmpMatrix.data = val(this, 'matrix', reltime).data;
             this._tmpCtx.setTransform(this._tmpMatrix.a, this._tmpMatrix.b, this._tmpMatrix.c, this._tmpMatrix.d, this._tmpMatrix.e, this._tmpMatrix.f);
             this._tmpCtx.drawImage(target.canvas, 0, 0);
             // Assume it was identity for now
@@ -2607,7 +2610,7 @@ var etro = (function () {
             target.cctx.drawImage(this._tmpCanvas, 0, 0);
         };
         return Transform;
-    }(Visual$1));
+    }(Visual));
     (function (Transform) {
         /**
          * @class
@@ -2751,17 +2754,22 @@ var etro = (function () {
 
     /**
      * @module effect
-     */
+     */
+    // TODO: Investigate why an effect might run once in the beginning even if its layer isn't at the beginning
+    // TODO: Add audio effect support
+    // TODO: implement directional blur
+    // TODO: implement radial blur
+    // TODO: implement zoom blur
 
-    var index$1 = /*#__PURE__*/Object.freeze({
+    var index = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        Base: Base$1,
+        Base: Base,
         Brightness: Brightness,
         Channels: Channels,
         ChromaKey: ChromaKey,
         Contrast: Contrast,
-        EllipticalMaskOptions: EllipticalMaskOptions,
         EllipticalMask: EllipticalMask,
+        EllipticalMaskOptions: EllipticalMaskOptions,
         GaussianBlur: GaussianBlur,
         GaussianBlurHorizontal: GaussianBlurHorizontal,
         GaussianBlurVertical: GaussianBlurVertical,
@@ -2770,7 +2778,7 @@ var etro = (function () {
         Shader: Shader,
         Stack: Stack,
         get Transform () { return Transform; },
-        Visual: Visual$1
+        Visual: Visual
     });
 
     var MovieEffectsListener = /** @class */ (function (_super) {
@@ -2884,9 +2892,9 @@ var etro = (function () {
          * Plays the movie
          *
          * @param [options]
+         * @param [options.onDraw] Called when the current frame is drawn to the canvas
          * @param [options.onStart] Called when the movie starts playing
          * @param [options.duration] The duration of the movie to play in seconds
-         *
          * @return Fulfilled when the movie is done playing, never fails
          */
         Movie.prototype.play = function (options) {
@@ -2912,7 +2920,7 @@ var etro = (function () {
                             return [4 /*yield*/, new Promise(function (resolve) {
                                     if (!_this.renderingFrame) {
                                         // Not rendering (and not playing), so play.
-                                        _this._render(undefined, resolve);
+                                        _this._render(undefined, resolve, options.onDraw);
                                     }
                                     // Stop rendering frame if currently doing so, because playing has higher
                                     // priority. This will affect the next _render call.
@@ -3146,13 +3154,14 @@ var etro = (function () {
          * Processes one frame of the movie and draws it to the canvas
          *
          * @param [timestamp=performance.now()]
-         * @param [done=undefined] - Called when done playing or when the current
-         * frame is loaded
+         * @param [done=undefined] - Called when done playing or when the current frame is loaded
+         * @param [onFrameRender=undefined] - Called when the current frame is rendered
          */
-        Movie.prototype._render = function (timestamp, done) {
+        Movie.prototype._render = function (timestamp, done, onFrameRender) {
             var _this = this;
             if (timestamp === void 0) { timestamp = performance.now(); }
             if (done === void 0) { done = undefined; }
+            if (onFrameRender === void 0) { onFrameRender = undefined; }
             clearCachedValues(this);
             if (!this.rendering) {
                 // (this.paused && !this._renderingFrame) is true so it's playing or it's
@@ -3216,6 +3225,7 @@ var etro = (function () {
                 this._renderBackground(timestamp);
                 this._renderLayers();
                 this._applyEffects();
+                onFrameRender === null || onFrameRender === void 0 ? void 0 : onFrameRender();
             }
             else {
                 // If we are recording, pause the media recorder until the movie is
@@ -3310,7 +3320,7 @@ var etro = (function () {
                 }
                 layer.render();
                 // if the layer has visual component
-                if (layer instanceof Visual) {
+                if (layer instanceof Visual$1) {
                     var canvas = layer.canvas;
                     if (canvas.width * canvas.height > 0) {
                         this.cctx.drawImage(canvas, val(layer, 'x', reltime), val(layer, 'y', reltime), canvas.width, canvas.height);
@@ -3619,26 +3629,31 @@ var etro = (function () {
      * make typedoc work, this module exports everything as named exports. Then,
      * ./index imports everything from this module and exports it as a default
      * export. Typedoc uses this file, and rollup and NPM use ./index
-     */
+     */
+    // TODO: investigate possibility of changing movie (canvas) width/height after
+    // layers added. I think it's fine, but still make sure.
+    // TODO: create built-in audio gain node for volume control in movie and/or
+    // layer.
+    // TODO: figure out InvalidStateError in beginning only when reloaded
 
     var etro = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        layer: index,
-        effect: index$1,
-        event: event,
-        MovieOptions: MovieOptions,
+        Color: Color,
+        Font: Font,
+        KeyFrame: KeyFrame,
         Movie: Movie,
+        MovieOptions: MovieOptions,
         applyOptions: applyOptions,
         clearCachedValues: clearCachedValues,
-        KeyFrame: KeyFrame,
-        val: val,
-        linearInterp: linearInterp,
         cosineInterp: cosineInterp,
-        Color: Color,
+        effect: index,
+        event: event,
+        layer: index$1,
+        linearInterp: linearInterp,
+        mapPixels: mapPixels,
         parseColor: parseColor,
-        Font: Font,
         parseFont: parseFont,
-        mapPixels: mapPixels
+        val: val
     });
 
     /**
@@ -3648,4 +3663,4 @@ var etro = (function () {
 
     return etro;
 
-}());
+})();

package/dist/movie/movie.d.ts

@@ -73,12 +73,13 @@ export declare class Movie {
      * Plays the movie
      *
      * @param [options]
+     * @param [options.onDraw] Called when the current frame is drawn to the canvas
      * @param [options.onStart] Called when the movie starts playing
      * @param [options.duration] The duration of the movie to play in seconds
-     *
      * @return Fulfilled when the movie is done playing, never fails
      */
     play(options?: {
+        onDraw?: () => void;
         onStart?: () => void;
         duration?: number;
     }): Promise<void>;
@@ -141,8 +142,8 @@ export declare class Movie {
      * Processes one frame of the movie and draws it to the canvas
      *
      * @param [timestamp=performance.now()]
-     * @param [done=undefined] - Called when done playing or when the current
-     * frame is loaded
+     * @param [done=undefined] - Called when done playing or when the current frame is loaded
+     * @param [onFrameRender=undefined] - Called when the current frame is rendered
      */
     private _render;
     private _updateCurrentTime;

package/dist/util.d.ts

@@ -15,6 +15,7 @@ import { Movie } from './movie';
  */
 export declare function applyOptions(options: object, destObj: EtroObject): void;
 export declare function clearCachedValues(movie: Movie): void;
+declare type Interpolate = <U = number | object>(startValue: U, endValue: U, percentProgress: number, interpolationKeys: string[]) => U;
 /**
  * A keyframe set.
  *
@@ -25,10 +26,10 @@ export declare function clearCachedValues(movie: Movie): void;
  * TypeScript users need to specify the type of the value as a type parameter.
  */
 export declare class KeyFrame<T> {
-    value: unknown[][];
+    value: (number | T | Interpolate)[][];
     /** Keys to interpolate, or all keys if undefined */
     interpolationKeys: string[];
-    constructor(...value: T[][]);
+    constructor(...value: (number | T)[][]);
     withKeys(keys: string[]): KeyFrame<T>;
     evaluate(time: number): T;
 }
@@ -119,3 +120,4 @@ export declare function parseFont(str: string): Font;
  * @deprecated Use {@link effect.Shader} instead
  */
 export declare function mapPixels(mapper: (pixels: Uint8ClampedArray, i: number) => void, canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, flush?: boolean): void;
+export {};

package/karma.conf.js

@@ -87,5 +87,14 @@ module.exports = function (config) {
     // Concurrency level
     // how many browser should be started simultaneous
     concurrency: Infinity,
+
+    karmaTypescriptConfig: {
+      bundlerOptions: {
+        // Resemblejs only references the `canvas` dependency in the node
+        // runtime. Since the tests are run in a browser, we need to exclude it
+        // from the bundle to prevent false errors.
+        exclude: ['canvas']
+      }
+    }
   })
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "etro",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "An extendable video-editing framework for the browser",
-  "browser": "dist/etro-cjs.js",
+  "main": "dist/etro-cjs.js",
   "types": "dist/index.d.ts",
   "directories": {
     "doc": "docs",
@@ -12,11 +12,10 @@
   "devDependencies": {
     "@commitlint/cli": "^17.6.6",
     "@commitlint/format": "^17.4.4",
-    "@rollup/plugin-eslint": "^8.0.2",
+    "@rollup/plugin-eslint": "^9.2.0",
     "@types/jest": "^29.0.0",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
-    "canvas": "^2.11.2",
     "cross-env": "^7.0.3",
     "docdash": "^1.1.1",
     "ecstatic": ">=4.1.3",
@@ -41,12 +40,12 @@
     "keep-a-changelog": "^0.10.4",
     "puppeteer": "^2.0.0",
     "resemblejs": "^4.1.0",
-    "rollup": "^1.19.4",
+    "rollup": "^4.53.3",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-uglify-es": "^0.0.1",
-    "shipjs": "^0.26.3",
+    "shipjs": "^0.27.0",
     "typedoc": "^0.23.8",
     "typescript": "^4.7.4"
   },

package/src/effect/shader.ts

@@ -163,8 +163,8 @@ export class Shader extends Visual {
   private _initAttribs () {
     const gl = this._gl
     this._attribLocations = {
+      vertexPosition: gl.getAttribLocation(this._program, 'a_VertexPosition'),
       textureCoord: gl.getAttribLocation(this._program, 'a_TextureCoord')
-      // a_VertexPosition ?? somehow it works without it though...
     }
   }
 

package/src/effect/transform.ts

@@ -45,7 +45,7 @@ class Transform extends Visual {
     }
 
     // Use data, since that's the underlying storage
-    this._tmpMatrix.data = val(this, 'matrix.data', reltime)
+    this._tmpMatrix.data = val(this, 'matrix', reltime).data
 
     this._tmpCtx.setTransform(
       this._tmpMatrix.a, this._tmpMatrix.b, this._tmpMatrix.c,

package/src/movie/movie.ts

@@ -124,12 +124,13 @@ export class Movie {
    * Plays the movie
    *
    * @param [options]
+   * @param [options.onDraw] Called when the current frame is drawn to the canvas
    * @param [options.onStart] Called when the movie starts playing
    * @param [options.duration] The duration of the movie to play in seconds
-   *
    * @return Fulfilled when the movie is done playing, never fails
    */
   async play (options: {
+    onDraw?: () => void,
     onStart?: () => void,
     duration?: number,
   } = {}): Promise<void> {
@@ -152,7 +153,7 @@ export class Movie {
     await new Promise<void>(resolve => {
       if (!this.renderingFrame) {
         // Not rendering (and not playing), so play.
-        this._render(undefined, resolve)
+        this._render(undefined, resolve, options.onDraw)
       }
 
       // Stop rendering frame if currently doing so, because playing has higher
@@ -399,10 +400,10 @@ export class Movie {
    * Processes one frame of the movie and draws it to the canvas
    *
    * @param [timestamp=performance.now()]
-   * @param [done=undefined] - Called when done playing or when the current
-   * frame is loaded
+   * @param [done=undefined] - Called when done playing or when the current frame is loaded
+   * @param [onFrameRender=undefined] - Called when the current frame is rendered
    */
-  private _render (timestamp = performance.now(), done = undefined) {
+  private _render (timestamp = performance.now(), done = undefined, onFrameRender = undefined) {
     clearCachedValues(this)
 
     if (!this.rendering) {
@@ -482,6 +483,7 @@ export class Movie {
       this._renderBackground(timestamp)
       this._renderLayers()
       this._applyEffects()
+      onFrameRender?.()
     } else {
       // If we are recording, pause the media recorder until the movie is
       // ready.

package/src/util.ts

@@ -91,6 +91,13 @@ export function clearCachedValues (movie: Movie): void {
   valCache.delete(movie)
 }
 
+type Interpolate = <U = number | object>(
+  startValue: U,
+  endValue: U,
+  percentProgress: number,
+  interpolationKeys: string[]
+) => U
+
 /**
  * A keyframe set.
  *
@@ -101,11 +108,11 @@ export function clearCachedValues (movie: Movie): void {
  * TypeScript users need to specify the type of the value as a type parameter.
  */
 export class KeyFrame<T> {
-  value: unknown[][]
+  value: (number|T|Interpolate)[][]
   /** Keys to interpolate, or all keys if undefined */
   interpolationKeys: string[]
 
-  constructor (...value: T[][]) {
+  constructor (...value: (number|T)[][]) {
     this.value = value
     this.interpolationKeys = []
   }
@@ -133,8 +140,10 @@ export class KeyFrame<T> {
     for (let i = 0; i < this.value.length; i++) {
       const startTime = this.value[i][0] as number
       const startValue = this.value[i][1] as T
-      type interpolateType = <U = number | object>(startValue: U, endValue: U, percentProgress: number, interpolationKeys: string[]) => U // eslint-disable-line @typescript-eslint/ban-types
-      const interpolate = this.value[i].length === 3 ? this.value[i][2] as interpolateType : linearInterp
+      const interpolate =
+        this.value[i].length === 3
+          ? (this.value[i][2] as Interpolate)
+          : linearInterp
       if (i + 1 < this.value.length) {
         const endTime = this.value[i + 1][0] as number
         const endValue = this.value[i + 1][1] as T