vidar - npm Package Compare versions

Comparing version 0.8.4 to 0.8.5

CHANGELOG.md

@@ -8,2 +8,9 @@ # Changelog
 
+## [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
@@ -40,3 +47,3 @@ ### Fixed
 - Grayscale effect.
-- `vd.event.unsubscribe` to remove event listeners.
+- `etro.event.unsubscribe` to remove event listeners.
 - Image and video layers' `destX`, `destY`, `destWidth` and `destHeight`.
@@ -49,3 +56,3 @@ - Previously `imageX`, `imageY`, `imageWidth`, `imageHeight`, ...
 - Now `Movie#record` also accepts its arguments through an `options` object.
-- Keyframes are now entered as `new vd.KeyFrame([time1, val1, interp],
+- Keyframes are now entered as `new etro.KeyFrame([time1, val1, interp],
   [time2, val2])`
@@ -62,3 +69,3 @@ - Rename `clip*` to `source*` for image layers.
 ### Deprecated
-- `vd.mapPixels` - use `vd.effect.Shader` instead, because it supports
+- `etro.mapPixels` - use `etro.effect.Shader` instead, because it supports
   hardware-acceleration
@@ -110,9 +117,9 @@ - `audioContext` option for `Movie` - use `actx` instead.
 ### Added
-- Add [API documentation](https://clabe45.github.io/vidar/).
+- Add [API documentation](https://etrojs.dev/).
 - Support enabling and disabling layers and effects.
 - Implement more movie events (*movie.play*, *movie.record*, *movie.pause*, *movie.change.duration*).
-- Implement [property filters](https://github.com/clabe45/vidar/wiki/Property-Filters).
+- Implement [property filters](https://github.com/etro-js/etro/wiki/Property-Filters).
 - Implement property caching.
 - Media layer supports media whose duration changes.
-- Add unimplemented `vd.Font` properties.
+- Add unimplemented `etro.Font` properties.
 - Add example that uses a live stream (the webcam).
@@ -124,3 +131,3 @@
 - Make some properties public (`_getDefaultOptions`, `_publicExcludes`, `layer.Base#_render`, `event._publish`, `layer.Base#_render`, `event._publish`, `layer.Visual#_doRender`).
-- Change `vd.val(property, element, time)` → `vd.val(element, path, time)`.
+- Change `etro.val(property, element, time)` → `etro.val(element, path, time)`.
 - Make event properties specific to event type
@@ -138,3 +145,3 @@ - *layer.attach|detach*: `source` → `effectTarget`
 - Use `sourceTextureOptions` in shader effects.
-- Recursive property changes now emit events with `vd.watchPublic`.
+- Recursive property changes now emit events with `etro.watchPublic`.
 - Public properties set to keyframes are treated as keyframes.
@@ -153,3 +160,3 @@ - Update event names in examples.
 ### Fixed
-- Update IIFE global export from `mv` to `vd`.
+- Update IIFE global export from `mv` to `etro`.
 - Fix recording audio.
@@ -166,3 +173,3 @@ - Fix recording movies without audio in Chrome.
 - Most visual effects now use GLSL.
-- New `element` argument passed to function properties to see which Vidar object the property belongs to.
+- New `element` argument passed to function properties to see which Etro object the property belongs to.
 
@@ -213,12 +220,13 @@ ## [0.3.0] - 2018-12-11
 
-[0.8.4]: https://github.com/clabe45/vidar/compare/v0.8.3...v0.8.4
-[0.8.3]: https://github.com/clabe45/vidar/compare/v0.8.2...v0.8.3
-[0.8.2]: https://github.com/clabe45/vidar/compare/v0.8.1...v0.8.2
-[0.8.1]: https://github.com/clabe45/vidar/compare/v0.8.0...v0.8.1
-[0.8.0]: https://github.com/clabe45/vidar/compare/v0.7.0...v0.8.0
-[0.7.0]: https://github.com/clabe45/vidar/compare/v0.6.0...v0.7.0
-[0.6.0]: https://github.com/clabe45/vidar/compare/v0.5.0...v0.6.0
-[0.5.0]: https://github.com/clabe45/vidar/compare/v0.4.0...v0.5.0
-[0.4.0]: https://github.com/clabe45/vidar/compare/v0.3.0...v0.4.0
-[0.3.0]: https://github.com/clabe45/vidar/compare/v0.2.0...v0.3.0
-[0.2.0]: https://github.com/clabe45/vidar/compare/v0.1.0...v0.2.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
+[0.8.0]: https://github.com/etro-js/etro/compare/v0.7.0...v0.8.0
+[0.7.0]: https://github.com/etro-js/etro/compare/v0.6.0...v0.7.0
+[0.6.0]: https://github.com/etro-js/etro/compare/v0.5.0...v0.6.0
+[0.5.0]: https://github.com/etro-js/etro/compare/v0.4.0...v0.5.0
+[0.4.0]: https://github.com/etro-js/etro/compare/v0.3.0...v0.4.0
+[0.3.0]: https://github.com/etro-js/etro/compare/v0.2.0...v0.3.0
+[0.2.0]: https://github.com/etro-js/etro/compare/v0.1.0...v0.2.0

CODE_OF_CONDUCT.md

@@ -58,3 +58,3 @@ # Contributor Covenant Code of Conduct
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting me at **\@clabe45** 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
@@ -75,5 +75,5 @@ and appropriate to the circumstances. The project team is obligated to maintain
 [homepage]: https://www.contributor-covenant.org
-[slack workspace]: https://join.slack.com/t/vidarjs/shared_invite/enQtNzgxODc0ODUyMjU2LTA5MGM5YzIyOGU5NjQxY2E0YmIzYzhhZTU4ODdjNzBiY2M3MzgwZTZiYzU5ZmE2NmYyMjc0ZTE0ZWIxMjBmN2Q
+[slack workspace]: https://join.slack.com/t/etrojs/shared_invite/enQtNzgxODc0ODUyMjU2LTA5MGM5YzIyOGU5NjQxY2E0YmIzYzhhZTU4ODdjNzBiY2M3MzgwZTZiYzU5ZmE2NmYyMjc0ZTE0ZWIxMjBmN2Q
 
 For answers to common questions about this code of conduct, see
 https://www.contributor-covenant.org/faq

CONTRIBUTING.md

@@ -5,5 +5,5 @@ # Contributing
 
-Thank you for considering contributing to Vidar! There are many ways you can contribute to Vidar, 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).
+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).
 
-> Vidar has a [Taiga Project](https://tree.taiga.io/project/clabe45-vidar/epics) for managing issues and a [GitHub Discussion page](https://github.com/clabe45/vidar/discussions) for questions, ideas and casual discussion
+> 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
 
@@ -18,7 +18,7 @@ ## Setting up your local environment
 
-- Create your own fork of Vidar. Then run
+- Create your own fork of Etro. Then run
 
   ```
-  git clone -b master --single-branch https://github.com/username/vidar.git
-  cd vidar
+  git clone -b master --single-branch https://github.com/username/etro.git
+  cd etro
   npm install
@@ -83,20 +83,20 @@ node node_modules/puppeteer/install.js
 
-### Vidar Overview
+### Etro Overview
 
-If you are new to the core elements of vidar, you should probably read [the overview guide](https://clabe45.github.io/vidar/docs/overview).
+If you are new to the core elements of etro, you should probably read [the overview guide](https://etrojs.dev/docs/overview).
 
 ### API Structure
 
-* `vd.Movie` - the movie
-* `vd.layer.*` - all layers
-* `vd.effect.*` - all (visual) effects
-- `vd.event.publish` - emit an event
-- `vd.event.subscribe` - add an event listener
-- `vd.*` - other utility classes and methods (see **src/util.ts**)
+* `etro.Movie` - the movie
+* `etro.layer.*` - all layers
+* `etro.effect.*` - all (visual) effects
+- `etro.event.publish` - emit an event
+- `etro.event.subscribe` - add an event listener
+- `etro.*` - other utility classes and methods (see **src/util.ts**)
 
-### Vidar concepts
+### Etro concepts
 
 #### Pub/sub system
 
-Events emitted by Vidar objects use a [pub/sub system](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern). To emit an event, use `event.publish(target, type, event)`. For instance,
+Events emitted by Etro objects use a [pub/sub system](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern). To emit an event, use `event.publish(target, type, event)`. For instance,
 
@@ -103,0 +103,0 @@ ```js

dist/effect/base.d.ts

@@ -5,3 +5,3 @@ import { Movie } from '../movie';
 /**
- * Modifies the visual contents of a layer.
+ * @deprecated All visual effects now inherit from `Visual` instead
  */
@@ -8,0 +8,0 @@ export declare class Base implements BaseObject {

dist/effect/elliptical-mask.d.ts

 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 {
@@ -18,3 +18,3 @@ x: Dynamic<number>;
  */
-export declare class EllipticalMask extends Base {
+export declare class EllipticalMask extends Visual {
     x: Dynamic<number>;
@@ -31,3 +31,3 @@ y: Dynamic<number>;
     constructor(options: EllipticalMaskOptions);
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | VisualLayer, reltime: number): void;
 }

dist/effect/index.d.ts

@@ -16,1 +16,2 @@ /**
 export * from './transform';
+export * from './visual';

dist/effect/shader.d.ts

@@ -1,4 +0,4 @@
-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 {
@@ -29,3 +29,3 @@ type?: string;
  */
-export declare class Shader extends Base {
+export declare class Shader extends Visual {
     /**
@@ -61,3 +61,3 @@ * WebGL texture units consumed by {@link Shader}
     private _initUniforms;
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | VisualLayer, reltime: number): void;
     private _checkDimensions;
@@ -64,0 +64,0 @@ private _refreshGl;

dist/effect/stack.d.ts

 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[];
 }
@@ -11,4 +11,4 @@ /**
  */
-export declare class Stack extends Base {
-    readonly effects: Base[];
+export declare class Stack extends Visual {
+    readonly effects: Visual[];
     private _effectsBack;
@@ -18,3 +18,3 @@ constructor(options: StackOptions);
     detach(): void;
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | VisualLayer, reltime: number): void;
     /**
@@ -24,3 +24,3 @@ * Convenience method for chaining
      */
-    addEffect(effect: Base): Stack;
+    addEffect(effect: Visual): Stack;
 }

dist/effect/transform.d.ts

@@ -1,5 +0,5 @@
-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 {
@@ -14,3 +14,3 @@ matrix: Dynamic<Transform.Matrix>;
  */
-declare class Transform extends Base {
+declare class Transform extends Visual {
     /** Matrix that determines how to transform the target */
@@ -25,3 +25,3 @@ matrix: Dynamic<Transform.Matrix>;
     constructor(options: TransformOptions);
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | VisualLayer, reltime: number): void;
 }
@@ -28,0 +28,0 @@ declare namespace Transform {

dist/event.d.ts

 /**
  * @module event
  */
-import VidarObject from './object';
+import EtroObject from './object';
 export interface Event {
-    target: VidarObject;
+    target: EtroObject;
     type: string;
@@ -12,3 +12,3 @@ }
  *
- * @param target - a vidar object
+ * @param target - a etro object
  * @param type - the id of the type (can contain subtypes, such as
@@ -18,7 +18,7 @@ * "type.subtype")
  */
-export declare function subscribe(target: VidarObject, type: string, listener: <T extends Event>(T: any) => void): void;
+export declare function subscribe(target: EtroObject, type: string, listener: <T extends Event>(T: any) => void): void;
 /**
  * Remove an event listener
  *
- * @param target - a vidar object
+ * @param target - a etro object
  * @param type - the id of the type (can contain subtypes, such as
@@ -28,7 +28,7 @@ * "type.subtype")
  */
-export declare function unsubscribe(target: VidarObject, listener: <T extends Event>(T: any) => void): void;
+export declare function unsubscribe(target: EtroObject, listener: <T extends Event>(T: any) => void): void;
 /**
  * Emits an event to all listeners
  *
- * @param target - a vidar object
+ * @param target - a etro object
  * @param type - the id of the type (can contain subtypes, such as
@@ -38,2 +38,2 @@ * "type.subtype")
  */
-export declare function publish(target: VidarObject, type: string, event: Record<string, unknown>): Event;
+export declare function publish(target: EtroObject, type: string, event: Record<string, unknown>): Event;

dist/index.d.ts

@@ -5,3 +5,3 @@ /**
  */
-import * as vd from './vidar';
-export default vd;
+import * as etro from './etro';
+export default etro;

dist/layer/base.d.ts

@@ -1,2 +0,2 @@
-import VidarObject from '../object';
+import EtroObject from '../object';
 import { Movie } from '../movie';
@@ -11,3 +11,3 @@ interface BaseOptions {
  */
-declare class Base implements VidarObject {
+declare class Base implements EtroObject {
     type: string;
@@ -14,0 +14,0 @@ publicExcludes: string[];

dist/layer/visual.d.ts

 import { Dynamic } from '../util';
 import { Base, BaseOptions } from './base';
-import { Base as BaseEffect } from '../effect/base';
+import { Visual as VisualEffect } from '../effect/visual';
 interface VisualOptions extends BaseOptions {
@@ -36,3 +36,3 @@ x?: Dynamic<number>;
     readonly cctx: CanvasRenderingContext2D;
-    readonly effects: BaseEffect[];
+    readonly effects: VisualEffect[];
     private _effectsBack;
@@ -56,5 +56,5 @@ /**
      */
-    addEffect(effect: BaseEffect): Visual;
+    addEffect(effect: VisualEffect): Visual;
     getDefaultOptions(): VisualOptions;
 }
 export { Visual, VisualOptions };

dist/movie.d.ts

@@ -191,5 +191,3 @@ /**
     get movie(): Movie;
-    getDefaultOptions(): MovieOptions & {
-        _actx: AudioContext;
-    };
+    getDefaultOptions(): MovieOptions;
 }

dist/object.d.ts

 import { Movie } from './movie';
 /** A movie, layer or effect  */
-export default interface VidarObject {
-    /** Used in vidar internals */
+export default interface EtroObject {
+    /** Used in etro internals */
     type: string;
@@ -6,0 +6,0 @@ /** Which properties to not watch for changes, for `Movie#autoRefresh` */

dist/util.d.ts

 /**
  * @module util
  */
-import VidarObject from './object';
+import EtroObject from './object';
 import { Movie } from './movie';
@@ -12,3 +12,3 @@ /**
  */
-export declare function applyOptions(options: object, destObj: VidarObject): void;
+export declare function applyOptions(options: object, destObj: EtroObject): void;
 export declare function clearCachedValues(movie: Movie): void;
@@ -20,3 +20,3 @@ /**
  * ```js
- new vd.KeyFrame([time1, value1, interpolation1], [time2, value2])`
+ new etro.KeyFrame([time1, value1, interpolation1], [time2, value2])`
  * ```
@@ -34,7 +34,7 @@ * TypeScript users need to specify the type of the value as a type parameter.
 /** A dynamic property. Supports simple values, keyframes and functions */
-export declare type Dynamic<T> = T | KeyFrame<T> | ((element: VidarObject, time: number) => T);
+export declare type Dynamic<T> = T | KeyFrame<T> | ((element: EtroObject, time: number) => T);
 /**
  * Computes a property.
  *
- * @param element - the vidar object to which the property belongs to
+ * @param element - the etro object to which the property belongs to
  * @param path - the dot-separated path to a property on `element`
@@ -49,3 +49,3 @@ * @param time - time to calculate keyframes for, if necessary
  */
-export declare function val(element: VidarObject, path: string, time: number): any;
+export declare function val(element: EtroObject, path: string, time: number): any;
 export declare function linearInterp(x1: number | object, x2: number | object, t: number, objectKeys?: string[]): number | object;
@@ -129,2 +129,2 @@ export declare function cosineInterp(x1: number | object, x2: number | object, t: number, objectKeys?: string[]): number | object;
  */
-export declare function watchPublic(target: VidarObject): VidarObject;
+export declare function watchPublic(target: EtroObject): EtroObject;

eslint.example-conf.js

 const conf = require('./eslint.conf.js')
-conf.globals.vd = 'readonly'
+conf.globals.etro = 'readonly'
 conf.plugins = ['html']
@@ -4,0 +4,0 @@ conf.settings = {

eslint.test-conf.js

 const conf = require('./eslint.conf.js')
 conf.env.jasmine = true
 conf.globals.define = 'readonly'
-conf.globals.vd = 'readonly'
+conf.globals.etro = 'readonly'
 module.exports = conf

karma.conf.js

@@ -18,3 +18,3 @@ // Karma configuration
     files: [
-      'dist/vidar-iife.js',
+      'dist/etro-iife.js',
       { pattern: 'spec/*.spec.js', included: false },
@@ -21,0 +21,0 @@ { pattern: 'node_modules/resemblejs/*.js', included: false },

package.json

 {
   "name": "vidar",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "An extendable video-editing framework for the browser and Node",
-  "browser": "dist/vidar-cjs.js",
+  "browser": "dist/etro-cjs.js",
   "types": "dist/index.d.ts",
@@ -36,3 +36,3 @@ "directories": {
     "puppeteer": "^2.0.0",
-    "resemblejs": "^3.2.5",
+    "resemblejs": "^4.1.0",
     "rollup": "^1.19.4",
@@ -50,3 +50,3 @@ "rollup-plugin-cleaner": "^1.0.0",
     "build": "rollup -c",
-    "doc": "rm -rf docs && npx typedoc src/vidar.ts --excludePrivate --readme none",
+    "doc": "rm -rf docs && npx typedoc src/etro.ts --excludePrivate --readme none",
     "assets": "git fetch origin example-assets:example-assets && git cherry-pick example-assets && git reset --soft HEAD^ && git reset HEAD examples/assets",
@@ -64,3 +64,3 @@ "effects": "node scripts/save-effect-samples.js",
     "type": "git",
-    "url": "git+https://github.com/clabe45/vidar.git"
+    "url": "git+https://github.com/etro-js/etro.git"
   },
@@ -77,10 +77,10 @@ "keywords": [
     "api-driven",
-    "vidar"
+    "etro"
   ],
-  "author": "clabe45",
+  "author": "Caleb Sacks (https://calebsacks.me)",
   "license": "GPL-3.0",
   "bugs": {
-    "url": "https://github.com/clabe45/vidar/issues"
+    "url": "https://github.com/etro-js/etro/issues"
   },
-  "homepage": "https://github.com/clabe45/vidar#readme"
+  "homepage": "https://github.com/etro-js/etro#readme"
 }

README.md

@@ -1,16 +0,14 @@
-# Vidar
+# Etro
 
-[![](https://img.shields.io/npm/v/vidar)](https://www.npmjs.com/package/vidar)
-[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fclabe45%2Fvidar%2Fbadge&style=flat)](https://actions-badge.atrox.dev/clabe45/vidar/goto)
+[![](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://clabe45.github.io/vidar/blog/introducing-v0-8-0)!
-> Check out [this guide](https://clabe45.github.io/vidar/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.
 
-Vidar 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.
 
@@ -22,5 +20,5 @@ ## Features
 - 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)*
 
@@ -30,22 +28,15 @@ ## Installation
 ```
-npm i vidar
+npm i etro
 ```
 
-## Usage
+## Basic Usage
 
-You can use CommonJS syntax:
+Let's look at an example:
 ```js
-import vd from 'vidar'
-```
+import etro from 'etro'
 
-Or include it as a global vd:
-```js
-<script src="node_modules/vidar/dist/vidar-iife.js"></script>
-```
+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)
 
-Let's look at an example:
-```js
-var movie = new vd.Movie({ canvas: outputCanvas })
-var layer = new vd.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
@@ -55,38 +46,31 @@ .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
-var layer = new vd.layer.Video({ startTime: 0, source: videoElement })
-    .addEffect(new vd.effect.Brightness({ brightness: +100) }))
+var layer = new etro.layer.Video({ startTime: 0, source: videoElement })
+    .addEffect(new etro.effect.Brightness({ brightness: +100) }))
 ```
 
-## Using in Node
+## Dynamic Properties
 
-To use Vidar in Node, use the [wrapper](https://github.com/clabe45/vidar-node):
-```
-npm i vidar-node
-```
-
+Most properties also support keyframes and functions:
 ```js
-var vidarNode = require('vidar-node')
+// Keyframes
+layer.effects[0].brightness = new etro.KeyFrame(
+  [0, -75],  // brightness == -75 at 0 seconds
+  [2, +75]  // +75 at 2 seconds
+)
 
-vidarNode(() => {
-  // You can access inputs as html elements and pass them to Vidar as usual.
-  var image = document.getElementById('input1') // <img> element
+// Function
+layer.effects[0].brightness = () => 100 * Math.random() - 50
+```
 
-  // Use vidar normally ...
+## Using in Node
 
-  movie
-    .exportRaw()
-    .then(window.done)
-// Tell Vidar Node what inputs to load with { id: path }
-}, { input1: 'image.png' }, 'output.mp4')
-```
+To use Etro in Node, see the [wrapper](https://github.com/etro-js/etro-node):
 
-`vidarNode()` takes an optional Puppeteer page argument, so you can run
-multiple Vidar scripts on the same movie (useful for servers). See [the
-docs](https://github.com/clabe45/vidar-node#documentation).
-
 ## Running the Examples
@@ -101,3 +85,3 @@
 Then, start the development server (only used for convience while developing;
-you don't need a server to use Vidar):
+you don't need a server to use Etro):
 
@@ -111,11 +95,5 @@ ```
 
-## TypeScript
-
-Vidar 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://clabe45.github.io/vidar/docs)
+- [Documentation](https://etrojs.dev/docs)
 
@@ -122,0 +100,0 @@ ## Contributing

rollup.config.js

@@ -10,3 +10,3 @@ // import uglify from "rollup-plugin-uglify-es";
     input: 'src/index.ts',
-    output: { file: 'dist/vidar-iife.js', format: 'iife', name: 'vd' },
+    output: { file: 'dist/etro-iife.js', format: 'iife', name: 'etro' },
     plugins: [
@@ -22,3 +22,3 @@ cleaner({
     input: 'src/index.ts',
-    output: { file: 'dist/vidar-cjs.js', format: 'cjs' },
+    output: { file: 'dist/etro-cjs.js', format: 'cjs' },
     plugins: [
@@ -32,3 +32,3 @@ typescript(),
   //     input: "src/index.js",
-  //     output: { file: "dist/vidar-esm.js", format: "esm", name: "vd" }
+  //     output: { file: "dist/etro-esm.js", format: "esm", name: "etro" }
   // },
@@ -40,3 +40,3 @@
         input: 'src/index.js',
-        output: { file: 'dist/vidar-iife.min.js', format: 'iife', name: 'mv' },
+        output: { file: 'dist/etro-iife.min.js', format: 'iife', name: 'mv' },
         plugins: [ uglify() ]
@@ -47,3 +47,3 @@ },
         input: 'src/index.js',
-        output: { file: 'dist/vidar-esm.min.js', format: 'esm', name: 'mv' },
+        output: { file: 'dist/etro-esm.min.js', format: 'esm', name: 'mv' },
         plugins: [ uglify() ]
@@ -50,0 +50,0 @@ }

src/effect/base.ts

@@ -8,3 +8,3 @@ import { watchPublic } from '../util'
 /**
- * Modifies the visual contents of a layer.
+ * @deprecated All visual effects now inherit from `Visual` instead
  */
@@ -11,0 +11,0 @@ export class Base implements BaseObject {

src/effect/elliptical-mask.ts

 import { Movie } from '../movie'
 import { Dynamic, val } from '../util'
-import { Base } from './base'
-import { Visual } from '../layer/index'
+import { Visual } from './visual'
+import { Visual as VisualLayer } from '../layer/index'
 
@@ -21,3 +21,3 @@ export class EllipticalMaskOptions {
 // TODO: Parent layer mask effects will make more complex masks easier
-export class EllipticalMask extends Base {
+export class EllipticalMask extends Visual {
   x: Dynamic<number>
@@ -50,3 +50,3 @@ y: Dynamic<number>
 
-  apply (target: Movie | Visual, reltime: number): void {
+  apply (target: Movie | VisualLayer, reltime: number): void {
     const ctx = target.cctx
@@ -53,0 +53,0 @@ const canvas = target.canvas

src/effect/index.ts

@@ -23,1 +23,2 @@ /**
 export * from './transform'
+export * from './visual'

src/effect/shader.ts

@@ -1,5 +0,5 @@
-import { Visual } from '../layer/index'
+import { Visual as VisualLayer } from '../layer/index'
 import { Movie } from '../movie'
 import { val } from '../util'
-import { Base } from './base'
+import { Visual } from './visual'
 
@@ -35,3 +35,3 @@ export interface UniformOptions {
 // TODO: can `v_TextureCoord` be replaced by `gl_FragUV`?
-export class Shader extends Base {
+export class Shader extends Visual {
   /**
@@ -200,3 +200,3 @@ * WebGL texture units consumed by {@link Shader}
 
-  apply (target: Movie | Visual, reltime: number): void {
+  apply (target: Movie | VisualLayer, reltime: number): void {
     this._checkDimensions(target)
@@ -360,3 +360,3 @@ this._refreshGl()
        * texImage2D) and setting the |sampler| uniform equal to the index of
-       * the texture. In vidar shader effects, the subclass passes the names of
+       * the texture. In etro shader effects, the subclass passes the names of
        * all the textures ot this base class, along with all the names of
@@ -363,0 +363,0 @@ * uniforms. By default, corresponding uniforms (with the same name) are

src/effect/stack.ts

 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[]
 }
@@ -13,6 +13,6 @@
  */
-export class Stack extends Base {
-  readonly effects: Base[]
+export class Stack extends Visual {
+  readonly effects: Visual[]
 
-  private _effectsBack: Base[]
+  private _effectsBack: Visual[]
 
@@ -25,3 +25,3 @@ constructor (options: StackOptions) {
     this.effects = new Proxy(this._effectsBack, {
-      deleteProperty: function (target: Base[], property: number | string): boolean {
+      deleteProperty: function (target: Visual[], property: number | string): boolean {
         const value = target[property]
@@ -32,3 +32,3 @@ value.detach() // Detach effect from movie
       },
-      set: function (target: Base[], property: number | string, value: Base): boolean {
+      set: function (target: Visual[], property: number | string, value: Visual): boolean {
         // TODO: make sure type check works
@@ -65,3 +65,3 @@ if (!isNaN(Number(property))) { // if property is a number (index)
 
-  apply (target: Movie | Visual, reltime: number): void {
+  apply (target: Movie | VisualLayer, reltime: number): void {
     for (let i = 0; i < this.effects.length; i++) {
@@ -78,3 +78,3 @@ const effect = this.effects[i]
    */
-  addEffect (effect: Base): Stack {
+  addEffect (effect: Visual): Stack {
     this.effects.push(effect)
@@ -81,0 +81,0 @@ return this

src/effect/transform.ts

@@ -1,5 +0,5 @@
-import { Visual } from '../layer/index'
+import { Visual as VisualLayer } from '../layer/index'
 import { Movie } from '../movie'
 import { val, Dynamic } from '../util'
-import { Base } from './base'
+import { Visual } from './visual'
 
@@ -16,3 +16,3 @@ export interface TransformOptions {
  */
-class Transform extends Base {
+class Transform extends Visual {
   /** Matrix that determines how to transform the target */
@@ -39,3 +39,3 @@ matrix: Dynamic<Transform.Matrix>
 
-  apply (target: Movie | Visual, reltime: number): void {
+  apply (target: Movie | VisualLayer, reltime: number): void {
     if (target.canvas.width !== this._tmpCanvas.width)
@@ -42,0 +42,0 @@ this._tmpCanvas.width = target.canvas.width

src/event.ts

@@ -5,6 +5,6 @@ /**
 
-import VidarObject from './object'
+import EtroObject from './object'
 
 export interface Event {
-  target: VidarObject
+  target: EtroObject
   type: string
@@ -43,3 +43,3 @@ }
  *
- * @param target - a vidar object
+ * @param target - a etro object
  * @param type - the id of the type (can contain subtypes, such as
@@ -49,3 +49,3 @@ * "type.subtype")
  */
-export function subscribe (target: VidarObject, type: string, listener: <T extends Event>(T) => void): void {
+export function subscribe (target: EtroObject, type: string, listener: <T extends Event>(T) => void): void {
   if (!listeners.has(target))
@@ -62,3 +62,3 @@ listeners.set(target, [])
  *
- * @param target - a vidar object
+ * @param target - a etro object
  * @param type - the id of the type (can contain subtypes, such as
@@ -68,3 +68,3 @@ * "type.subtype")
  */
-export function unsubscribe (target: VidarObject, listener: <T extends Event>(T) => void): void {
+export function unsubscribe (target: EtroObject, listener: <T extends Event>(T) => void): void {
   // Make sure `listener` has been added with `subscribe`.
@@ -83,3 +83,3 @@ if (!listeners.has(target) ||
  *
- * @param target - a vidar object
+ * @param target - a etro object
  * @param type - the id of the type (can contain subtypes, such as
@@ -89,3 +89,3 @@ * "type.subtype")
  */
-export function publish (target: VidarObject, type: string, event: Record<string, unknown>): Event {
+export function publish (target: EtroObject, type: string, event: Record<string, unknown>): Event {
   (event as unknown as Event).target = target; // could be a proxy
@@ -116,5 +116,5 @@ (event as unknown as Event).type = type
 
-const listeners: WeakMap<VidarObject, {
+const listeners: WeakMap<EtroObject, {
   type: TypeId,
   listener: (Event) => void
 }[]> = new WeakMap()

src/index.ts

@@ -6,4 +6,4 @@ /**
 
-import * as vd from './vidar'
+import * as etro from './etro'
 
-export default vd
+export default etro

src/layer/base.ts

@@ -1,2 +0,2 @@
-import VidarObject from '../object'
+import EtroObject from '../object'
 import { publish, subscribe } from '../event'
@@ -15,3 +15,3 @@ import { watchPublic, applyOptions } from '../util'
  */
-class Base implements VidarObject {
+class Base implements EtroObject {
   type: string
@@ -18,0 +18,0 @@ publicExcludes: string[]

src/layer/visual.ts

 import { Dynamic, val, applyOptions } from '../util'
 import { Base, BaseOptions } from './base'
-import { Base as BaseEffect } from '../effect/base'
+import { Visual as VisualEffect } from '../effect/visual'
 
@@ -44,5 +44,5 @@ interface VisualOptions extends BaseOptions {
   // readonly because it's a proxy
-  readonly effects: BaseEffect[]
+  readonly effects: VisualEffect[]
 
-  private _effectsBack: BaseEffect[]
+  private _effectsBack: VisualEffect[]
 
@@ -146,3 +146,3 @@ /**
    */
-  addEffect (effect: BaseEffect): Visual {
+  addEffect (effect: VisualEffect): Visual {
     this.effects.push(effect); return this
@@ -149,0 +149,0 @@ }

src/movie.ts

@@ -701,6 +701,5 @@ /**
 
-  getDefaultOptions (): MovieOptions & { _actx: AudioContext } {
+  getDefaultOptions (): MovieOptions {
     return {
       canvas: undefined, // required
-      _actx: new AudioContext(),
       /**
@@ -707,0 +706,0 @@ * @name module:movie#background

src/object.ts

 import { Movie } from './movie'
 
 /** A movie, layer or effect  */
-export default interface VidarObject {
-  /** Used in vidar internals */
+export default interface EtroObject {
+  /** Used in etro internals */
   type: string
@@ -7,0 +7,0 @@ /** Which properties to not watch for changes, for `Movie#autoRefresh` */

src/util.ts

@@ -5,3 +5,3 @@ /**
 
-import VidarObject from './object'
+import EtroObject from './object'
 import { publish } from './event'
@@ -34,3 +34,3 @@ import { Movie } from './movie'
 // TODO: Make methods like getDefaultOptions private
-export function applyOptions (options: object, destObj: VidarObject): void { // eslint-disable-line @typescript-eslint/ban-types
+export function applyOptions (options: object, destObj: EtroObject): void { // eslint-disable-line @typescript-eslint/ban-types
   const defaultOptions = destObj.getDefaultOptions()
@@ -58,3 +58,3 @@
 const valCache = new WeakMap()
-function cacheValue (element: VidarObject, path: string, value: unknown) {
+function cacheValue (element: EtroObject, path: string, value: unknown) {
   // Initiate movie cache
@@ -93,3 +93,3 @@ if (!valCache.has(element.movie))
  * ```js
- new vd.KeyFrame([time1, value1, interpolation1], [time2, value2])`
+ new etro.KeyFrame([time1, value1, interpolation1], [time2, value2])`
  * ```
@@ -158,3 +158,3 @@ * TypeScript users need to specify the type of the value as a type parameter.
 /** A dynamic property. Supports simple values, keyframes and functions */
-export type Dynamic<T> = T | KeyFrame<T> | ((element: VidarObject, time: number) => T)
+export type Dynamic<T> = T | KeyFrame<T> | ((element: EtroObject, time: number) => T)
 
@@ -164,3 +164,3 @@ /**
  *
- * @param element - the vidar object to which the property belongs to
+ * @param element - the etro object to which the property belongs to
  * @param path - the dot-separated path to a property on `element`
@@ -177,3 +177,3 @@ * @param time - time to calculate keyframes for, if necessary
 // TODO: Update doc @params to allow for keyframes
-export function val (element: VidarObject, path: string, time: number): any { // eslint-disable-line @typescript-eslint/no-explicit-any
+export function val (element: EtroObject, path: string, time: number): any { // eslint-disable-line @typescript-eslint/no-explicit-any
   if (hasCachedValue(element, path))
@@ -427,3 +427,3 @@ return getCachedValue(element, path)
  */
-export function watchPublic (target: VidarObject): VidarObject {
+export function watchPublic (target: EtroObject): EtroObject {
   const getPath = (receiver, prop) =>
@@ -430,0 +430,0 @@ (receiver === proxy ? '' : (paths.get(receiver) + '.')) + prop

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

517593

increased by0.99%

Number of package files

92

increased by3.37%

Lines of code

10762

increased by0.28%

Worsened metrics

Number of lines in readme file

103

decreased by-17.6%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes