etro 0.8.3 → 0.9.0

package/.github/workflows/nodejs.yml

@@ -1,6 +1,8 @@
 name: Node CI
 
-on: [push]
+on:
+- push
+- pull_request
 
 jobs:
   build:
@@ -8,7 +10,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x]
+        node-version: [15.x, 16.x, 17.x]
 
     steps:
     - uses: actions/checkout@v1
@@ -22,8 +24,9 @@ jobs:
     - name: npm install, lint, build, and test
       run: |
         npm ci
+        node node_modules/puppeteer/install.js
         npm run lint
         npm run build
-        npm test
+        xvfb-run --auto-servernum npm test
       env:
         CI: true

package/CHANGELOG.md

@@ -5,6 +5,40 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.9.0] - 2022-07-17
+### Changed
+- Methods in the `Base` effect now accept `Base` layers instead of `Visual` layers.
+
+### Deprecated
+- `autoRefresh` option ([#130](https://github.com/etro-js/etro/issues/130)).
+- `publicExcludes` ([#130](https://github.com/etro-js/etro/issues/130)).
+- All `change` events ([#130](https://github.com/etro-js/etro/issues/130)).
+
+### Fixed
+- Layers no longer trigger infinite loops when their active states change ([#127](https://github.com/etro-js/etro/issues/127)).
+- Add missing `VisualSource` options to `Image` layer ([#128](https://github.com/etro-js/etro/pull/128)).
+- Layers are now stopped when recording ends.
+- `stop()` is no longer called on inactive layers.
+- Movies no longer publish `'movie.ended'` when done recording.
+- `Audio` and `Video` layers not detaching properly.
+- When done playing or recording, movies only reset their time if they're in repeat mode.
+- The `timeupdate` event is no longer fired when `currentTime` remains the same (due to `performance.now()` rounding).
+
+## [0.8.5] - 2022-03-06
+### Deprecated
+- `vd.effect.Base` - All visual effects now inherit from `vd.effect.Visual` instead.
+
+### Fixed
+- Movie constructor throwing `Can't find variable: AudioContext` on WebKit browsers.
+
+## [0.8.4] - 2022-02-23
+### Fixed
+- **Major memory leak.**
+- `Movie#play()` not resolving.
+- `Movie#paused` set to false after done playing or recording.
+- Movies' `currentTime` being off by a fraction of a second a few frames after playing.
+- Movies' `currentTime` setter not respecting `autoRefresh`.
+
 ## [0.8.3] - 2022-01-18
 ### Fixed
 - Recording not respecting the `type` option.
@@ -193,6 +227,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - Gaussian blur
   - Transform
 
+[0.9.0]: https://github.com/etro-js/etro/compare/v0.8.5...v0.9.0
+[0.8.5]: https://github.com/etro-js/etro/compare/v0.8.4...v0.8.5
+[0.8.4]: https://github.com/etro-js/etro/compare/v0.8.3...v0.8.4
 [0.8.3]: https://github.com/etro-js/etro/compare/v0.8.2...v0.8.3
 [0.8.2]: https://github.com/etro-js/etro/compare/v0.8.1...v0.8.2
 [0.8.1]: https://github.com/etro-js/etro/compare/v0.8.0...v0.8.1

package/CODE_OF_CONDUCT.md

@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting me at **\@etro-js** on Twitter. All complaints will be
+reported by contacting us at etroframework\@gmail.com. All complaints will be
 reviewed and investigated and will result in a response that is deemed necessary
 and appropriate to the circumstances. The project team is obligated to maintain
 confidentiality with regard to the reporter of an incident. Further details of

package/CONTRIBUTING.md

@@ -4,13 +4,13 @@
 
 Thank you for considering contributing to Etro! There are many ways you can contribute to Etro, like creating issues for features or bugs, improving the docs or wiki, or writing the actual code for the library. This page covers how to make changes to the repository files (either code or docs).
 
-> Etro has a [Taiga Project](https://tree.taiga.io/project/etro-js-etro/epics) for managing issues and a [GitHub Discussion page](https://github.com/etro-js/etro/discussions) for questions, ideas and casual discussion
+[Join our Discord](https://discord.gg/myrBsQ8Cht)
 
 ## Setting up your local environment
 
 #### Step 0: Dependencies
 
-- You will need Git, Node, NPM (at least 7.x) and Chrome (for headless unit testing) installed
+- You will need Git, Node, NPM (at least 7.x) and Firefox (for headless unit testing) installed
 
 #### Step 1: Fork
 
@@ -20,15 +20,16 @@ Thank you for considering contributing to Etro! There are many ways you can cont
   git clone -b master --single-branch https://github.com/username/etro.git
   cd etro
   npm install
+  node node_modules/puppeteer/install.js
   ```
 
 ## Making your changes
 
 #### Step 2: Code
 
-- Make some changes.
-- If you are writing code, the linter uses [StandardJS](https://standardjs.com/rules.html) for style conventions.
-- When you're ready to submit a piece of code, first run
+- Make some changes
+- If you are writing code, the linter uses [StandardJS](https://standardjs.com/rules.html) for style conventions
+- When you're ready to submit, first run
 
   ```
   npm run lint
@@ -56,19 +57,18 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 
 #### Step 3: Push
 
-- First, rebase (don't merge) to integrate your work with the main repository
+- First, rebase (please avoid merging) to integrate your work with any new changes in the main repository
 
   ```
   git fetch upstream
   git rebase upstream/master
   ```
 
-- Push to your fork
+- Push to the fork
 
 #### Step 4: Pull request
 
-- Open a pull request from your the branch in your fork to the main repository
-- In the PR title, include **fixes ###** for bugs and **resolves ###** for feature requests
+- Open a pull request from the branch in your fork to the main repository
 - If you changed any core functionality, make sure you explain your motives for those changes
 
 #### Step 5: Feedback
@@ -79,7 +79,7 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 
 ### Etro Overview
 
-If you are new to the core elements of etro, you should probably read [the overview guide](https://etrojs.dev/docs/overview).
+Check out [the overview guide](https://etrojs.dev/docs/overview) for usage information
 
 ### API Structure
 

package/README.md

@@ -3,25 +3,25 @@
 [![](https://img.shields.io/npm/v/etro)](https://www.npmjs.com/package/etro)
 [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fetro-js%2Fetro%2Fbadge&style=flat)](https://actions-badge.atrox.dev/etro-js/etro/goto)
 
-> [Version 0.8 is out](https://etrojs.dev/blog/introducing-v0-8-0)!
-> Check out [this guide](https://etrojs.dev/docs/migrating-v0-8-0)
-> for migrating.
+> Etro was previously known as Etro, but it had to be renamed to avoid
+> confusion with an existing software product.
 
-Etro is a typescript framework for programmatically editing videos. Similar
-to GUI-based video-editing software, it lets you layer media and other
-content on a timeline. Audio, image, video and other tracks are supported,
-along with powerful video effects for existing tracks. Being very flexible
-and extendable, you can choose to only use the core components or define your
-own.
+Etro is a typescript framework for programmatically editing videos. Similar to
+GUI-based video-editing software, it lets you composite layers and add effects.
+Etro comes shipped with text, video, audio and image layers, along with a bunch
+of GLSL effects. You can also define your own layers and effects with javascript
+and GLSL.
+
+[Join our Discord](https://discord.gg/myrBsQ8Cht)
 
 ## Features
 
 - Composite video and audio layers
 - Use built-in hardware accelerated effects
 - Write your own effects in JavaScript and GLSL
-- Manipulate audio with the web audio API
-- Define layer and effect properties as keyframes and functions
-- Export to a blob or file
+- Manipulate audio with the web audio API *(audio effects coming soon)*
+- Define layer and effect parameters as keyframes or custom functions
+- Render to a blob in realtime *(offline rendering coming soon)*
 
 ## Installation
 
@@ -29,29 +29,24 @@ own.
 npm i etro
 ```
 
-## Usage
+## Basic Usage
 
-You can use CommonJS syntax:
+Let's look at an example:
 ```js
 import etro from 'etro'
-```
-
-Or include it as a global etro:
-```js
-<script src="node_modules/etro/dist/etro-iife.js"></script>
-```
 
-Let's look at an example:
-```js
 var movie = new etro.Movie({ canvas: outputCanvas })
 var layer = new etro.layer.Video({ startTime: 0, source: videoElement })  // the layer starts at 0s
 movie.addLayer(layer)
+
 movie.record({ frameRate: 24 })  // or just `play` if you don't need to save it
     .then(blob => ...)
 ```
 
-This renders `videoElement` to a blob at 24 fps. This blob can then be
-downloaded as a video file.
+The blob could then be downloaded as a video file or displayed using a `<video>`
+element.
+
+## Effects
 
 Effects can transform the output of a layer or movie:
 ```js
@@ -59,32 +54,23 @@ var layer = new etro.layer.Video({ startTime: 0, source: videoElement })
     .addEffect(new etro.effect.Brightness({ brightness: +100) }))
 ```
 
-## Using in Node
-
-To use Etro in Node, use the [wrapper](https://github.com/etro-js/etro-node):
-```
-npm i etro-node
-```
+## Dynamic Properties
 
+Most properties also support keyframes and functions:
 ```js
-var etroNode = require('etro-node')
-
-etroNode(() => {
-  // You can access inputs as html elements and pass them to Etro as usual.
-  var image = document.getElementById('input1') // <img> element
-
-  // Use etro normally ...
-
-  movie
-    .exportRaw()
-    .then(window.done)
-// Tell Etro Node what inputs to load with { id: path }
-}, { input1: 'image.png' }, 'output.mp4')
+// Keyframes
+layer.effects[0].brightness = new etro.KeyFrame(
+  [0, -75],  // brightness == -75 at 0 seconds
+  [2, +75]  // +75 at 2 seconds
+)
+
+// Function
+layer.effects[0].brightness = () => 100 * Math.random() - 50
 ```
 
-`etroNode()` takes an optional Puppeteer page argument, so you can run
-multiple Etro scripts on the same movie (useful for servers). See [the
-docs](https://github.com/etro-js/etro-node#documentation).
+## Using in Node
+
+To use Etro in Node, see the [wrapper](https://github.com/etro-js/etro-node):
 
 ## Running the Examples
 
@@ -104,12 +90,6 @@ npm start
 Now you can open any example (such as
 http://127.0.0.1:8080/examples/introduction/hello-world1.html).
 
-## TypeScript
-
-Etro is written in TypeScript, so it should work out of the box with TypeScript
-projects. However, it is also compatible with projects that do not use
-TypeScript.
-
 ## Further Reading
 
 - [Documentation](https://etrojs.dev/docs)

package/dist/effect/base.d.ts

@@ -1,8 +1,8 @@
 import { Movie } from '../movie';
-import { Visual } from '../layer/index';
+import { Base as BaseLayer } from '../layer/index';
 import BaseObject from '../object';
 /**
- * Modifies the visual contents of a layer.
+ * @deprecated All visual effects now inherit from `Visual` instead
  */
 export declare class Base implements BaseObject {
     type: string;
@@ -21,8 +21,8 @@ export declare class Base implements BaseObject {
      * Attaches this effect to `target` if not already attached.
      * @ignore
      */
-    tryAttach(target: Movie | Visual): void;
-    attach(movie: Movie | Visual): void;
+    tryAttach(target: Movie | BaseLayer): void;
+    attach(movie: Movie | BaseLayer): void;
     /**
      * Dettaches this effect from its target if the number of times `tryDetach`
      * has been called (including this call) equals the number of times
@@ -40,12 +40,12 @@ export declare class Base implements BaseObject {
      * (will soon be replaced with an instance getter)
      * @abstract
      */
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | BaseLayer, reltime: number): void;
     /**
      * The current time of the target
      */
     get currentTime(): number;
-    get parent(): Movie | Visual;
+    get parent(): Movie | BaseLayer;
     get movie(): Movie;
     getDefaultOptions(): Record<string, unknown>;
 }

package/dist/effect/elliptical-mask.d.ts

@@ -1,7 +1,7 @@
 import { Movie } from '../movie';
 import { Dynamic } from '../util';
-import { Base } from './base';
-import { Visual } from '../layer/index';
+import { Visual } from './visual';
+import { Visual as VisualLayer } from '../layer/index';
 export declare class EllipticalMaskOptions {
     x: Dynamic<number>;
     y: Dynamic<number>;
@@ -15,7 +15,7 @@ export declare class EllipticalMaskOptions {
 /**
  * Preserves an ellipse of the layer and clears the rest
  */
-export declare class EllipticalMask extends Base {
+export declare class EllipticalMask extends Visual {
     x: Dynamic<number>;
     y: Dynamic<number>;
     radiusX: Dynamic<number>;
@@ -27,5 +27,5 @@ export declare class EllipticalMask extends Base {
     private _tmpCanvas;
     private _tmpCtx;
     constructor(options: EllipticalMaskOptions);
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | VisualLayer, reltime: number): void;
 }

package/dist/effect/index.d.ts

@@ -13,3 +13,4 @@ export * from './pixelate';
 export * from './shader';
 export * from './stack';
 export * from './transform';
+export * from './visual';

package/dist/effect/shader.d.ts

@@ -1,6 +1,6 @@
-import { Visual } from '../layer/index';
+import { Visual as VisualLayer } from '../layer/index';
 import { Movie } from '../movie';
-import { Base } from './base';
+import { Visual } from './visual';
 export interface UniformOptions {
     type?: string;
     defaultFloatComponent?: number;
@@ -26,7 +26,7 @@ export interface ShaderOptions {
 /**
  * A hardware-accelerated pixel mapping using WebGL
  */
-export declare class Shader extends Base {
+export declare class Shader extends Visual {
     /**
      * WebGL texture units consumed by {@link Shader}
      */
@@ -57,7 +57,7 @@ export declare class Shader extends Base {
     private _initTextures;
     private _initAttribs;
     private _initUniforms;
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | VisualLayer, reltime: number): void;
     private _checkDimensions;
     private _refreshGl;
     private _enablePositionAttrib;

package/dist/effect/stack.d.ts

@@ -1,23 +1,23 @@
 import { Movie } from '../movie';
-import { Base } from './base';
-import { Visual } from '../layer';
+import { Visual } from './visual';
+import { Visual as VisualLayer } from '../layer';
 export interface StackOptions {
-    effects: Base[];
+    effects: Visual[];
 }
 /**
  * A sequence of effects to apply, treated as one effect. This can be useful
  * for defining reused effect sequences as one effect.
  */
-export declare class Stack extends Base {
-    readonly effects: Base[];
+export declare class Stack extends Visual {
+    readonly effects: Visual[];
     private _effectsBack;
     constructor(options: StackOptions);
     attach(movie: Movie): void;
     detach(): void;
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | VisualLayer, reltime: number): void;
     /**
      * Convenience method for chaining
      * @param effect - the effect to append
      */
-    addEffect(effect: Base): Stack;
+    addEffect(effect: Visual): Stack;
 }

package/dist/effect/transform.d.ts

@@ -1,7 +1,7 @@
-import { Visual } from '../layer/index';
+import { Visual as VisualLayer } from '../layer/index';
 import { Movie } from '../movie';
 import { Dynamic } from '../util';
-import { Base } from './base';
+import { Visual } from './visual';
 export interface TransformOptions {
     matrix: Dynamic<Transform.Matrix>;
 }
@@ -11,7 +11,7 @@ export interface TransformOptions {
  * translations, scalings and rotations) or B) input the matrix values
  * directly, using the optional argument in the constructor.
  */
-declare class Transform extends Base {
+declare class Transform extends Visual {
     /** Matrix that determines how to transform the target */
     matrix: Dynamic<Transform.Matrix>;
     private _tmpMatrix;
@@ -21,7 +21,7 @@ declare class Transform extends Base {
      * @param matrix - matrix that determines how to transform the target
      */
     constructor(options: TransformOptions);
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | VisualLayer, reltime: number): void;
 }
 declare namespace Transform {
     /**

package/dist/effect/visual.d.ts

@@ -0,0 +1,17 @@
+import { Movie } from '../movie';
+import { Visual as VisualLayer } from '../layer/index';
+import { Base } from './base';
+/**
+ * Modifies the visual contents of a layer.
+ */
+export declare class Visual extends Base {
+    /**
+     * Apply this effect to a target at the given time
+     *
+     * @param target
+     * @param reltime - the movie's current time relative to the layer
+     * (will soon be replaced with an instance getter)
+     * @abstract
+     */
+    apply(target: Movie | VisualLayer, reltime: number): void;
+}