etro 0.8.2 → 0.8.5

package/.github/workflows/nodejs.yml

@@ -1,6 +1,8 @@
 name: Node CI
 
-on: [push]
+on:
+- push
+- pull_request
 
 jobs:
   build:
@@ -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,26 @@ 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.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.
+- Effects throwing 'empty canvas' errors when the target's width or height is 0.
+
 ## [0.8.2] - 2021-07-08
 ### Fixed
 - `GaussianBlur` effect throwing a `TypeError` when applied to a movie or layer (the problem persisted).
@@ -188,6 +208,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - Gaussian blur
   - Transform
 
+[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
 [0.8.0]: https://github.com/etro-js/etro/compare/v0.7.0...v0.8.0

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

@@ -20,6 +20,7 @@ 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

package/README.md

@@ -3,25 +3,23 @@
 [![](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 Vidar, 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 effectts 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.
 
 ## 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 +27,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 +52,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 +88,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

@@ -2,7 +2,7 @@ import { Movie } from '../movie';
 import { Visual } 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;

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,6 @@
+import { Base } from './base';
+/**
+ * Modifies the visual contents of a layer.
+ */
+export declare class Visual extends Base {
+}