etro 0.7.0 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/nodejs.yml +4 -2
- package/.github/workflows/shipjs-trigger.yml +29 -0
- package/CHANGELOG.md +73 -12
- package/CODE_OF_CONDUCT.md +5 -5
- package/CONTRIBUTING.md +31 -77
- package/README.md +81 -26
- package/dist/effect/base.d.ts +51 -0
- package/dist/effect/brightness.d.ts +16 -0
- package/dist/effect/channels.d.ts +23 -0
- package/dist/effect/chroma-key.d.ts +23 -0
- package/dist/effect/contrast.d.ts +15 -0
- package/dist/effect/elliptical-mask.d.ts +31 -0
- package/dist/effect/gaussian-blur.d.ts +60 -0
- package/dist/effect/grayscale.d.ts +7 -0
- package/dist/effect/index.d.ts +15 -0
- package/dist/effect/pixelate.d.ts +18 -0
- package/dist/effect/shader.d.ts +99 -0
- package/dist/effect/stack.d.ts +23 -0
- package/dist/effect/transform.d.ts +73 -0
- package/dist/etro-cjs.js +9287 -3331
- package/dist/etro-iife.js +9229 -3273
- package/dist/etro.d.ts +7 -0
- package/dist/event.d.ts +35 -0
- package/dist/index.d.ts +6 -0
- package/dist/layer/audio-source.d.ts +24 -0
- package/dist/layer/audio.d.ts +14 -0
- package/dist/layer/base.d.ts +82 -0
- package/dist/layer/image.d.ts +6 -0
- package/dist/layer/index.d.ts +11 -0
- package/dist/layer/text.d.ts +60 -0
- package/dist/layer/video.d.ts +11 -0
- package/dist/layer/visual-source.d.ts +32 -0
- package/dist/layer/visual.d.ts +58 -0
- package/dist/movie.d.ts +192 -0
- package/dist/object.d.ts +12 -0
- package/dist/util.d.ts +125 -0
- package/eslint.conf.js +2 -9
- package/eslint.example-conf.js +9 -0
- package/eslint.test-conf.js +1 -0
- package/eslint.typescript-conf.js +5 -0
- package/examples/application/readme-screenshot.html +16 -17
- package/examples/application/video-player.html +10 -11
- package/examples/application/webcam.html +6 -6
- package/examples/introduction/audio.html +30 -18
- package/examples/introduction/effects.html +37 -14
- package/examples/introduction/export.html +32 -25
- package/examples/introduction/functions.html +6 -4
- package/examples/introduction/hello-world1.html +9 -5
- package/examples/introduction/hello-world2.html +5 -5
- package/examples/introduction/keyframes.html +35 -23
- package/examples/introduction/media.html +26 -18
- package/examples/introduction/text.html +9 -5
- package/karma.conf.js +5 -3
- package/package.json +36 -14
- package/rollup.config.js +15 -4
- package/scripts/gen-effect-samples.html +26 -25
- package/scripts/save-effect-samples.js +14 -15
- package/ship.config.js +80 -0
- package/src/effect/base.ts +115 -0
- package/src/effect/brightness.ts +43 -0
- package/src/effect/channels.ts +50 -0
- package/src/effect/chroma-key.ts +82 -0
- package/src/effect/contrast.ts +42 -0
- package/src/effect/elliptical-mask.ts +75 -0
- package/src/effect/gaussian-blur.ts +232 -0
- package/src/effect/grayscale.ts +34 -0
- package/src/effect/index.ts +22 -0
- package/src/effect/pixelate.ts +58 -0
- package/src/effect/shader.ts +557 -0
- package/src/effect/stack.ts +78 -0
- package/src/effect/transform.ts +193 -0
- package/src/etro.ts +26 -0
- package/src/event.ts +112 -0
- package/src/index.ts +8 -0
- package/src/layer/audio-source.ts +219 -0
- package/src/layer/audio.ts +34 -0
- package/src/layer/base.ts +175 -0
- package/src/layer/image.ts +8 -0
- package/src/layer/index.ts +13 -0
- package/src/layer/text.ts +138 -0
- package/src/layer/video.ts +15 -0
- package/src/layer/visual-source.ts +150 -0
- package/src/layer/visual.ts +197 -0
- package/src/movie.ts +707 -0
- package/src/object.ts +14 -0
- package/src/util.ts +466 -0
- package/tsconfig.json +8 -0
- package/docs/effect.js.html +0 -1215
- package/docs/event.js.html +0 -145
- package/docs/index.html +0 -81
- package/docs/index.js.html +0 -92
- package/docs/layer.js.html +0 -888
- package/docs/module-effect-GaussianBlurComponent.html +0 -345
- package/docs/module-effect.Brightness.html +0 -339
- package/docs/module-effect.Channels.html +0 -319
- package/docs/module-effect.ChromaKey.html +0 -611
- package/docs/module-effect.Contrast.html +0 -339
- package/docs/module-effect.EllipticalMask.html +0 -200
- package/docs/module-effect.GaussianBlur.html +0 -202
- package/docs/module-effect.GaussianBlurHorizontal.html +0 -242
- package/docs/module-effect.GaussianBlurVertical.html +0 -242
- package/docs/module-effect.Pixelate.html +0 -330
- package/docs/module-effect.Shader.html +0 -1227
- package/docs/module-effect.Stack.html +0 -406
- package/docs/module-effect.Transform.Matrix.html +0 -193
- package/docs/module-effect.Transform.html +0 -1174
- package/docs/module-effect.html +0 -148
- package/docs/module-event.html +0 -473
- package/docs/module-index.html +0 -186
- package/docs/module-layer-Media.html +0 -1116
- package/docs/module-layer-MediaMixin.html +0 -164
- package/docs/module-layer.Audio.html +0 -1188
- package/docs/module-layer.Base.html +0 -629
- package/docs/module-layer.Image.html +0 -1421
- package/docs/module-layer.Text.html +0 -1731
- package/docs/module-layer.Video.html +0 -1938
- package/docs/module-layer.Visual.html +0 -1698
- package/docs/module-layer.html +0 -137
- package/docs/module-movie.html +0 -3118
- package/docs/module-util.Color.html +0 -702
- package/docs/module-util.Font.html +0 -395
- package/docs/module-util.html +0 -845
- package/docs/movie.js.html +0 -689
- package/docs/scripts/collapse.js +0 -20
- package/docs/scripts/linenumber.js +0 -25
- package/docs/scripts/nav.js +0 -12
- package/docs/scripts/polyfill.js +0 -4
- package/docs/scripts/prettify/Apache-License-2.0.txt +0 -202
- package/docs/scripts/prettify/lang-css.js +0 -2
- package/docs/scripts/prettify/prettify.js +0 -28
- package/docs/scripts/search.js +0 -83
- package/docs/styles/jsdoc.css +0 -671
- package/docs/styles/prettify.css +0 -79
- package/docs/util.js.html +0 -503
- package/screenshots/2019-08-17_0.png +0 -0
- package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
- package/spec/assets/effect/gaussian-blur-vertical.png +0 -0
- package/spec/assets/effect/original.png +0 -0
- package/spec/assets/effect/pixelate.png +0 -0
- package/spec/assets/effect/transform/multiply.png +0 -0
- package/spec/assets/effect/transform/rotate.png +0 -0
- package/spec/assets/effect/transform/scale-fraction.png +0 -0
- package/spec/assets/effect/transform/scale.png +0 -0
- package/spec/assets/effect/transform/translate-fraction.png +0 -0
- package/spec/assets/effect/transform/translate.png +0 -0
- package/spec/assets/layer/audio.wav +0 -0
- package/spec/assets/layer/image.jpg +0 -0
- package/spec/effect.spec.js +0 -352
- package/spec/event.spec.js +0 -25
- package/spec/layer.spec.js +0 -150
- package/spec/movie.spec.js +0 -162
- package/spec/util.spec.js +0 -285
- package/src/effect.js +0 -1268
- package/src/event.js +0 -78
- package/src/index.js +0 -23
- package/src/layer.js +0 -897
- package/src/movie.js +0 -637
- package/src/util.js +0 -505
|
@@ -4,12 +4,11 @@ on: [push]
|
|
|
4
4
|
|
|
5
5
|
jobs:
|
|
6
6
|
build:
|
|
7
|
-
|
|
8
7
|
runs-on: ubuntu-latest
|
|
9
8
|
|
|
10
9
|
strategy:
|
|
11
10
|
matrix:
|
|
12
|
-
node-version: [
|
|
11
|
+
node-version: [10.x, 12.x]
|
|
13
12
|
|
|
14
13
|
steps:
|
|
15
14
|
- uses: actions/checkout@v1
|
|
@@ -17,6 +16,9 @@ jobs:
|
|
|
17
16
|
uses: actions/setup-node@v1
|
|
18
17
|
with:
|
|
19
18
|
node-version: ${{ matrix.node-version }}
|
|
19
|
+
- name: Update npm
|
|
20
|
+
run: |
|
|
21
|
+
npm i -g npm@^7.x
|
|
20
22
|
- name: npm install, lint, build, and test
|
|
21
23
|
run: |
|
|
22
24
|
npm ci
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
name: Ship js trigger
|
|
2
|
+
on:
|
|
3
|
+
pull_request:
|
|
4
|
+
types:
|
|
5
|
+
- closed
|
|
6
|
+
jobs:
|
|
7
|
+
build:
|
|
8
|
+
name: Release
|
|
9
|
+
runs-on: ubuntu-latest
|
|
10
|
+
if: github.event.pull_request.merged == true && startsWith(github.head_ref, 'releases/v')
|
|
11
|
+
steps:
|
|
12
|
+
- uses: actions/checkout@v2
|
|
13
|
+
with:
|
|
14
|
+
fetch-depth: 0
|
|
15
|
+
ref: master
|
|
16
|
+
- uses: actions/setup-node@v1
|
|
17
|
+
with:
|
|
18
|
+
registry-url: "https://registry.npmjs.org"
|
|
19
|
+
- run: |
|
|
20
|
+
if [ -f "yarn.lock" ]; then
|
|
21
|
+
yarn install
|
|
22
|
+
else
|
|
23
|
+
npm install
|
|
24
|
+
fi
|
|
25
|
+
- run: npx shipjs trigger
|
|
26
|
+
env:
|
|
27
|
+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
28
|
+
NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
|
|
29
|
+
SLACK_INCOMING_HOOK: ${{ secrets.SLACK_INCOMING_HOOK }}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,65 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](http://keepachangelog.com/)
|
|
6
|
+
and this project adheres to [Semantic Versioning](http://semver.org/).
|
|
7
|
+
|
|
8
|
+
## [0.8.2] - 2021-07-08
|
|
9
|
+
### Fixed
|
|
10
|
+
- `GaussianBlur` effect throwing a `TypeError` when applied to a movie or layer (the problem persisted).
|
|
11
|
+
- Ignore layers and effects removed with `delete`.
|
|
12
|
+
|
|
13
|
+
## [0.8.1] - 2021-04-20
|
|
14
|
+
### Fixed
|
|
15
|
+
- `sourceStartTime` getting ignored on `'movie.seek'`.
|
|
16
|
+
- Calling methods like `unshift` on `Movie#layers` and `Movie#effects`.
|
|
17
|
+
- `GaussianBlur` effect throwing a `TypeError` when applied to a movie or layer.
|
|
18
|
+
- Issues with audio and video layers re-attaching to a movie.
|
|
19
|
+
|
|
20
|
+
## [0.8.0] - 2021-04-11
|
|
21
|
+
### Added
|
|
22
|
+
- Type declarations.
|
|
23
|
+
- `duration` option for `Movie#record`, to only record a subsection of the movie.
|
|
24
|
+
- `'movie.recordended'` event. This does not affect the behavior of `'movie.ended'`.
|
|
25
|
+
- Grayscale effect.
|
|
26
|
+
- `etro.event.unsubscribe` to remove event listeners.
|
|
27
|
+
- Image and video layers' `destX`, `destY`, `destWidth` and `destHeight`.
|
|
28
|
+
- Previously `imageX`, `imageY`, `imageWidth`, `imageHeight`, ...
|
|
29
|
+
- Allows for rotating these layers without cropping out parts.
|
|
30
|
+
|
|
31
|
+
### Changed
|
|
32
|
+
- All constructor arguments are now supplied through an `options` object.
|
|
33
|
+
- Now `Movie#record` also accepts its arguments through an `options` object.
|
|
34
|
+
- Keyframes are now entered as `new etro.KeyFrame([time1, val1, interp],
|
|
35
|
+
[time2, val2])`
|
|
36
|
+
- Rename `clip*` to `source*` for image layers.
|
|
37
|
+
- `clipX` is now `sourceX`, etc.
|
|
38
|
+
- Rename `image` to `source` for image layers.
|
|
39
|
+
- Rename `source` to `audioNode` and `media` to `source` for audio and video layers.
|
|
40
|
+
- And `mediaStartTime` to `sourceStartTime`
|
|
41
|
+
- For image and video layers, `width` now defaults to `destWidth`, which defaults to `sourceWidth`, which defaults to the width of the image or video.
|
|
42
|
+
- The `movie.audiodestinationupdate` event is now published on the movie instead of each layer.
|
|
43
|
+
- The movie's `audioContext` option is now `actx` (to match the property).
|
|
44
|
+
|
|
45
|
+
### Deprecated
|
|
46
|
+
- `etro.mapPixels` - use `etro.effect.Shader` instead, because it supports
|
|
47
|
+
hardware-acceleration
|
|
48
|
+
- `audioContext` option for `Movie` - use `actx` instead.
|
|
49
|
+
|
|
50
|
+
### Removed
|
|
51
|
+
- Video files for examples (can now be downloaded with `npm run assets`).
|
|
52
|
+
|
|
53
|
+
### Fixed
|
|
54
|
+
- Browsers that do not implement `AudioContext` are now supported.
|
|
55
|
+
- Movie not rendering with no layers.
|
|
56
|
+
- Issues with modifying `Movie#layers` and `Movie#effects`.
|
|
57
|
+
- Layers no longer error on 'movie.seek' event.
|
|
58
|
+
- Property filters' `this` is now set to the owner of the property.
|
|
59
|
+
- Visual layers' `width` and `height` property filters now default to the movie's width and height.
|
|
60
|
+
- Visual layers' `border` property not being processed correctly.
|
|
61
|
+
- Effects' and layers' `attach()` and `detach()` methods not being called when replaced by another effect or layer.
|
|
62
|
+
|
|
3
63
|
## [0.7.0] - 2020-12-17
|
|
4
64
|
### Added
|
|
5
65
|
- Importing with CommonJS syntax.
|
|
@@ -93,12 +153,12 @@
|
|
|
93
153
|
- Null or undefined layer dimensions default to the width or height of the movie.
|
|
94
154
|
- Movie "end" event is now called "ended".
|
|
95
155
|
|
|
96
|
-
### Fixed
|
|
97
|
-
- Bug with layer options
|
|
98
|
-
|
|
99
156
|
### Removed
|
|
100
157
|
- Volume, speed and muted properties. These will most likely be added as separate audio effects in the future.
|
|
101
158
|
|
|
159
|
+
### Fixed
|
|
160
|
+
- Bug with layer options
|
|
161
|
+
|
|
102
162
|
## [0.2.0] - 2018-10-14
|
|
103
163
|
### Added
|
|
104
164
|
- Keyframes
|
|
@@ -108,7 +168,7 @@
|
|
|
108
168
|
- Elliptical mask effect.
|
|
109
169
|
- Many small improvements.
|
|
110
170
|
|
|
111
|
-
##
|
|
171
|
+
## 0.1.0 - 2018-10-06
|
|
112
172
|
### Added
|
|
113
173
|
- Movies
|
|
114
174
|
- Timeline
|
|
@@ -128,11 +188,12 @@
|
|
|
128
188
|
- Gaussian blur
|
|
129
189
|
- Transform
|
|
130
190
|
|
|
131
|
-
[
|
|
132
|
-
[0.
|
|
133
|
-
[0.
|
|
134
|
-
[0.
|
|
135
|
-
[0.
|
|
136
|
-
[0.
|
|
137
|
-
[0.
|
|
138
|
-
[0.
|
|
191
|
+
[0.8.2]: https://github.com/etro-js/etro/compare/v0.8.1...v0.8.2
|
|
192
|
+
[0.8.1]: https://github.com/etro-js/etro/compare/v0.8.0...v0.8.1
|
|
193
|
+
[0.8.0]: https://github.com/etro-js/etro/compare/v0.7.0...v0.8.0
|
|
194
|
+
[0.7.0]: https://github.com/etro-js/etro/compare/v0.6.0...v0.7.0
|
|
195
|
+
[0.6.0]: https://github.com/etro-js/etro/compare/v0.5.0...v0.6.0
|
|
196
|
+
[0.5.0]: https://github.com/etro-js/etro/compare/v0.4.0...v0.5.0
|
|
197
|
+
[0.4.0]: https://github.com/etro-js/etro/compare/v0.3.0...v0.4.0
|
|
198
|
+
[0.3.0]: https://github.com/etro-js/etro/compare/v0.2.0...v0.3.0
|
|
199
|
+
[0.2.0]: https://github.com/etro-js/etro/compare/v0.1.0...v0.2.0
|
package/CODE_OF_CONDUCT.md
CHANGED
|
@@ -55,11 +55,11 @@ further defined and clarified by project maintainers.
|
|
|
55
55
|
## Enforcement
|
|
56
56
|
|
|
57
57
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
|
58
|
-
reported by contacting me at **\@etro-js**
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
58
|
+
reported by contacting me at **\@etro-js** on Twitter. All complaints will be
|
|
59
|
+
reviewed and investigated and will result in a response that is deemed necessary
|
|
60
|
+
and appropriate to the circumstances. The project team is obligated to maintain
|
|
61
|
+
confidentiality with regard to the reporter of an incident. Further details of
|
|
62
|
+
specific enforcement policies may be posted separately.
|
|
63
63
|
|
|
64
64
|
Project maintainers who do not follow or enforce the Code of Conduct in good
|
|
65
65
|
faith may face temporary or permanent repercussions as determined by other
|
package/CONTRIBUTING.md
CHANGED
|
@@ -4,66 +4,47 @@
|
|
|
4
4
|
|
|
5
5
|
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).
|
|
6
6
|
|
|
7
|
-
> Etro has a [Taiga Project](https://tree.taiga.io/project/etro-js-etro/epics) for managing issues and a [
|
|
7
|
+
> 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
|
|
8
8
|
|
|
9
9
|
## Setting up your local environment
|
|
10
10
|
|
|
11
11
|
#### Step 0: Dependencies
|
|
12
12
|
|
|
13
|
-
- You will need Git, Node, NPM and Chrome (for headless unit testing) installed
|
|
13
|
+
- You will need Git, Node, NPM (at least 7.x) and Chrome (for headless unit testing) installed
|
|
14
14
|
|
|
15
15
|
#### Step 1: Fork
|
|
16
16
|
|
|
17
17
|
- Create your own fork of Etro. Then run
|
|
18
18
|
|
|
19
19
|
```
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
$ git fetch upstream
|
|
24
|
-
$ npm install
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
#### Step 2: Branch
|
|
28
|
-
|
|
29
|
-
- To help organize your work, create a branch for your topic. Avoid working directly off the `master` branch
|
|
30
|
-
|
|
31
|
-
```
|
|
32
|
-
$ git checkout -b topic-branch
|
|
20
|
+
git clone -b master --single-branch https://github.com/username/etro.git
|
|
21
|
+
cd etro
|
|
22
|
+
npm install
|
|
33
23
|
```
|
|
34
24
|
|
|
35
25
|
## Making your changes
|
|
36
26
|
|
|
37
|
-
#### Step
|
|
38
|
-
|
|
39
|
-
- If you are writing code, please follow the style guide [StandardJS](https://standardjs.com/rules.html)
|
|
27
|
+
#### Step 2: Code
|
|
40
28
|
|
|
41
|
-
-
|
|
29
|
+
- Make some changes.
|
|
30
|
+
- If you are writing code, the linter uses [StandardJS](https://standardjs.com/rules.html) for style conventions.
|
|
31
|
+
- When you're ready to submit a piece of code, first run
|
|
42
32
|
|
|
43
33
|
```
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
Then, you can see your changes by running some [examples](examples).
|
|
48
|
-
|
|
49
|
-
- When you're ready to submit a piece of work, first run
|
|
50
|
-
|
|
51
|
-
```
|
|
52
|
-
$ npm run lint
|
|
53
|
-
$ npm run build
|
|
54
|
-
$ npm test
|
|
34
|
+
npm run lint
|
|
35
|
+
npm run build
|
|
36
|
+
npm test
|
|
55
37
|
```
|
|
56
38
|
|
|
57
39
|
to lint the code, generate the [dist](dist) files and run unit tests on them. It may be helpful to put these commands in a pre-commit hook.
|
|
58
40
|
|
|
59
41
|
- Commit your changes
|
|
60
|
-
- Please avoid squashing all your commits into one; we try to keep
|
|
42
|
+
- Please avoid squashing all your commits into one; we try to keep atomic commits.
|
|
61
43
|
- Please follow these commit message guidelines:
|
|
62
|
-
- Optionally,
|
|
63
|
-
- Then, write a concise summary of your changes. If you feel you need to, bullet the main idea of your changes in the description and/or explain why you made the changes.
|
|
44
|
+
- Optionally, prefix each commit message with [an appropriate emoji](https://gitmoji.dev)
|
|
64
45
|
- Write in the imperative tense
|
|
65
|
-
-
|
|
66
|
-
-
|
|
46
|
+
- Wrap lines after 72 characters (for Vim add `filetype indent plugin on` to ~/.vimrc, it's enabled by default in Atom).
|
|
47
|
+
- Example:
|
|
67
48
|
|
|
68
49
|
```
|
|
69
50
|
:emoji: One-liner
|
|
@@ -78,59 +59,36 @@ Thank you for considering contributing to Etro! There are many ways you can cont
|
|
|
78
59
|
- First, rebase (don't merge) to integrate your work with the main repository
|
|
79
60
|
|
|
80
61
|
```
|
|
81
|
-
|
|
82
|
-
|
|
62
|
+
git fetch upstream
|
|
63
|
+
git rebase upstream/master
|
|
83
64
|
```
|
|
84
65
|
|
|
85
|
-
- Push
|
|
86
|
-
|
|
87
|
-
```
|
|
88
|
-
$ git push origin topic-branch
|
|
89
|
-
```
|
|
66
|
+
- Push to your fork
|
|
90
67
|
|
|
91
68
|
#### Step 4: Pull request
|
|
92
69
|
|
|
93
|
-
- Open a pull request from your
|
|
70
|
+
- Open a pull request from your the branch in your fork to the main repository
|
|
94
71
|
- In the PR title, include **fixes ###** for bugs and **resolves ###** for feature requests
|
|
95
72
|
- If you changed any core functionality, make sure you explain your motives for those changes
|
|
96
73
|
|
|
97
74
|
#### Step 5: Feedback
|
|
98
75
|
|
|
99
|
-
- A large part of the submission process is receiving feedback on how you can improve you pull request. If you need change your pull request,
|
|
100
|
-
|
|
101
|
-
```
|
|
102
|
-
$ git add path/to/changes
|
|
103
|
-
$ git commit
|
|
104
|
-
$ git push origin topic-branch
|
|
105
|
-
```
|
|
76
|
+
- A large part of the submission process is receiving feedback on how you can improve you pull request. If you need to change your pull request, feel free to push more commits.
|
|
106
77
|
|
|
107
78
|
## Code overview
|
|
108
79
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
### Module Structure
|
|
80
|
+
### Etro Overview
|
|
112
81
|
|
|
113
|
-
If you are new to the core elements of etro, you should probably read [the
|
|
82
|
+
If you are new to the core elements of etro, you should probably read [the overview guide](https://etrojs.dev/docs/overview).
|
|
114
83
|
|
|
115
|
-
|
|
84
|
+
### API Structure
|
|
116
85
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
| [**movie.js**](src/movie.js) | the `Movie` class |
|
|
124
|
-
| [**util.js**](src/util.js) | general utility |
|
|
125
|
-
|
|
126
|
-
Note that most of the above files will (hopefully soon) be broken down into multiple files each.
|
|
127
|
-
|
|
128
|
-
### Etro Objects
|
|
129
|
-
|
|
130
|
-
The base etro objects are the following:
|
|
131
|
-
* `Movie` - the movie (or entire user project)
|
|
132
|
-
* `layer.Base` - the root type of layer
|
|
133
|
-
* `effect.Base` - the root type of visual effect
|
|
86
|
+
* `etro.Movie` - the movie
|
|
87
|
+
* `etro.layer.*` - all layers
|
|
88
|
+
* `etro.effect.*` - all (visual) effects
|
|
89
|
+
- `etro.event.publish` - emit an event
|
|
90
|
+
- `etro.event.subscribe` - add an event listener
|
|
91
|
+
- `etro.*` - other utility classes and methods (see **src/util.ts**)
|
|
134
92
|
|
|
135
93
|
### Etro concepts
|
|
136
94
|
|
|
@@ -147,9 +105,5 @@ That will notify all listeners of `movie` for event types `'movie'`, `'movie.typ
|
|
|
147
105
|
```js
|
|
148
106
|
event.subscribe(movie, 'movie.type', event => {
|
|
149
107
|
console.log(event.target, event.type, event.additionalData) // should print the movie, 'movie.type.of.event', 'foo'
|
|
150
|
-
}
|
|
108
|
+
})
|
|
151
109
|
```
|
|
152
|
-
|
|
153
|
-
#### Values vs. Properties
|
|
154
|
-
|
|
155
|
-
In Etro objects, almost any property can be a [keyframe](https://github.com/etro-js/etro/wiki/Keyframes), [function](https://github.com/etro-js/etro/wiki/Functions), or just a constant value. To access the current value of the property at a given time, use `util.val(property, element, time)`; where `property` is the keyframe set, function or constant value, `element` is the object to which `property` belongs, and `time` is the current time relative to the element.
|
package/README.md
CHANGED
|
@@ -3,25 +3,30 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/etro)
|
|
4
4
|
[](https://actions-badge.atrox.dev/etro-js/etro/goto)
|
|
5
5
|
|
|
6
|
-
>
|
|
6
|
+
> [Version 0.8 is out](https://etrojs.dev/blog/introducing-v0-8-0)!
|
|
7
|
+
> Check out [this guide](https://etrojs.dev/docs/migrating-v0-8-0)
|
|
8
|
+
> for migrating.
|
|
7
9
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
Etro is a typescript framework for programmatically editing videos. Similar
|
|
11
|
+
to GUI-based video-editing software, it lets you layer media and other
|
|
12
|
+
content on a timeline. Audio, image, video and other tracks are supported,
|
|
13
|
+
along with powerful video effectts for existing tracks. Being very flexible
|
|
14
|
+
and extendable, you can choose to only use the core components or define your
|
|
15
|
+
own.
|
|
11
16
|
|
|
12
17
|
## Features
|
|
13
18
|
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
- Write
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
19
|
+
- Composite video and audio layers
|
|
20
|
+
- Use built-in hardware accelerated effects
|
|
21
|
+
- Write your own effects in JavaScript and GLSL
|
|
22
|
+
- Manipulate audio with the web audio API
|
|
23
|
+
- Define layer and effect properties as keyframes and functions
|
|
24
|
+
- Export to a blob or file
|
|
20
25
|
|
|
21
26
|
## Installation
|
|
22
27
|
|
|
23
28
|
```
|
|
24
|
-
npm
|
|
29
|
+
npm i etro
|
|
25
30
|
```
|
|
26
31
|
|
|
27
32
|
## Usage
|
|
@@ -31,34 +36,83 @@ You can use CommonJS syntax:
|
|
|
31
36
|
import etro from 'etro'
|
|
32
37
|
```
|
|
33
38
|
|
|
34
|
-
Or include it as a global
|
|
35
|
-
```
|
|
39
|
+
Or include it as a global etro:
|
|
40
|
+
```js
|
|
36
41
|
<script src="node_modules/etro/dist/etro-iife.js"></script>
|
|
37
42
|
```
|
|
38
43
|
|
|
39
|
-
|
|
44
|
+
Let's look at an example:
|
|
40
45
|
```js
|
|
41
|
-
var movie = new etro.Movie(canvas)
|
|
46
|
+
var movie = new etro.Movie({ canvas: outputCanvas })
|
|
47
|
+
var layer = new etro.layer.Video({ startTime: 0, source: videoElement }) // the layer starts at 0s
|
|
48
|
+
movie.addLayer(layer)
|
|
49
|
+
movie.record({ frameRate: 24 }) // or just `play` if you don't need to save it
|
|
50
|
+
.then(blob => ...)
|
|
42
51
|
```
|
|
43
52
|
|
|
44
|
-
|
|
53
|
+
This renders `videoElement` to a blob at 24 fps. This blob can then be
|
|
54
|
+
downloaded as a video file.
|
|
55
|
+
|
|
56
|
+
Effects can transform the output of a layer or movie:
|
|
45
57
|
```js
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
58
|
+
var layer = new etro.layer.Video({ startTime: 0, source: videoElement })
|
|
59
|
+
.addEffect(new etro.effect.Brightness({ brightness: +100) }))
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Using in Node
|
|
63
|
+
|
|
64
|
+
To use Etro in Node, use the [wrapper](https://github.com/etro-js/etro-node):
|
|
65
|
+
```
|
|
66
|
+
npm i etro-node
|
|
51
67
|
```
|
|
52
68
|
|
|
53
|
-
Finally, start the movie
|
|
54
69
|
```js
|
|
55
|
-
|
|
70
|
+
var etroNode = require('etro-node')
|
|
71
|
+
|
|
72
|
+
etroNode(() => {
|
|
73
|
+
// You can access inputs as html elements and pass them to Etro as usual.
|
|
74
|
+
var image = document.getElementById('input1') // <img> element
|
|
75
|
+
|
|
76
|
+
// Use etro normally ...
|
|
77
|
+
|
|
78
|
+
movie
|
|
79
|
+
.exportRaw()
|
|
80
|
+
.then(window.done)
|
|
81
|
+
// Tell Etro Node what inputs to load with { id: path }
|
|
82
|
+
}, { input1: 'image.png' }, 'output.mp4')
|
|
56
83
|
```
|
|
57
84
|
|
|
85
|
+
`etroNode()` takes an optional Puppeteer page argument, so you can run
|
|
86
|
+
multiple Etro scripts on the same movie (useful for servers). See [the
|
|
87
|
+
docs](https://github.com/etro-js/etro-node#documentation).
|
|
88
|
+
|
|
89
|
+
## Running the Examples
|
|
90
|
+
|
|
91
|
+
First, download the assets for the examples:
|
|
92
|
+
|
|
93
|
+
```
|
|
94
|
+
npm run assets
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
Then, start the development server (only used for convience while developing;
|
|
98
|
+
you don't need a server to use Etro):
|
|
99
|
+
|
|
100
|
+
```
|
|
101
|
+
npm start
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
Now you can open any example (such as
|
|
105
|
+
http://127.0.0.1:8080/examples/introduction/hello-world1.html).
|
|
106
|
+
|
|
107
|
+
## TypeScript
|
|
108
|
+
|
|
109
|
+
Etro is written in TypeScript, so it should work out of the box with TypeScript
|
|
110
|
+
projects. However, it is also compatible with projects that do not use
|
|
111
|
+
TypeScript.
|
|
112
|
+
|
|
58
113
|
## Further Reading
|
|
59
114
|
|
|
60
|
-
- [Documentation](https://etrojs.dev)
|
|
61
|
-
- [Wiki (WIP)](https://github.com/etro-js/etro/wiki)
|
|
115
|
+
- [Documentation](https://etrojs.dev/docs)
|
|
62
116
|
|
|
63
117
|
## Contributing
|
|
64
118
|
|
|
@@ -66,4 +120,5 @@ See the [contributing guide](CONTRIBUTING.md)
|
|
|
66
120
|
|
|
67
121
|
## License
|
|
68
122
|
|
|
69
|
-
Distributed under GNU General Public License v3. See `LICENSE` for more
|
|
123
|
+
Distributed under GNU General Public License v3. See `LICENSE` for more
|
|
124
|
+
information.
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { Movie } from '../movie';
|
|
2
|
+
import { Visual } from '../layer/index';
|
|
3
|
+
import BaseObject from '../object';
|
|
4
|
+
/**
|
|
5
|
+
* Modifies the visual contents of a layer.
|
|
6
|
+
*/
|
|
7
|
+
export declare class Base implements BaseObject {
|
|
8
|
+
type: string;
|
|
9
|
+
publicExcludes: string[];
|
|
10
|
+
propertyFilters: Record<string, <T>(value: T) => T>;
|
|
11
|
+
enabled: boolean;
|
|
12
|
+
private _target;
|
|
13
|
+
/**
|
|
14
|
+
* The number of times this effect has been attached to a target minus the
|
|
15
|
+
* number of times it's been detached. (Used for the target's array proxy with
|
|
16
|
+
* `unshift`)
|
|
17
|
+
*/
|
|
18
|
+
private _occurrenceCount;
|
|
19
|
+
constructor();
|
|
20
|
+
/**
|
|
21
|
+
* Attaches this effect to `target` if not already attached.
|
|
22
|
+
* @ignore
|
|
23
|
+
*/
|
|
24
|
+
tryAttach(target: Movie | Visual): void;
|
|
25
|
+
attach(movie: Movie | Visual): void;
|
|
26
|
+
/**
|
|
27
|
+
* Dettaches this effect from its target if the number of times `tryDetach`
|
|
28
|
+
* has been called (including this call) equals the number of times
|
|
29
|
+
* `tryAttach` has been called.
|
|
30
|
+
*
|
|
31
|
+
* @ignore
|
|
32
|
+
*/
|
|
33
|
+
tryDetach(): void;
|
|
34
|
+
detach(): void;
|
|
35
|
+
/**
|
|
36
|
+
* Apply this effect to a target at the given time
|
|
37
|
+
*
|
|
38
|
+
* @param target
|
|
39
|
+
* @param reltime - the movie's current time relative to the layer
|
|
40
|
+
* (will soon be replaced with an instance getter)
|
|
41
|
+
* @abstract
|
|
42
|
+
*/
|
|
43
|
+
apply(target: Movie | Visual, reltime: number): void;
|
|
44
|
+
/**
|
|
45
|
+
* The current time of the target
|
|
46
|
+
*/
|
|
47
|
+
get currentTime(): number;
|
|
48
|
+
get parent(): Movie | Visual;
|
|
49
|
+
get movie(): Movie;
|
|
50
|
+
getDefaultOptions(): Record<string, unknown>;
|
|
51
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Dynamic } from '../util';
|
|
2
|
+
import { Shader } from './shader';
|
|
3
|
+
export interface BrightnessOptions {
|
|
4
|
+
brightness?: Dynamic<number>;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Changes the brightness
|
|
8
|
+
*/
|
|
9
|
+
export declare class Brightness extends Shader {
|
|
10
|
+
brightness: Dynamic<number>;
|
|
11
|
+
/**
|
|
12
|
+
* @param [brightness=0] - the value to add to each pixel's color
|
|
13
|
+
* channels (between -255 and 255)
|
|
14
|
+
*/
|
|
15
|
+
constructor(options?: BrightnessOptions);
|
|
16
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Dynamic } from '../util';
|
|
2
|
+
import { Shader } from './shader';
|
|
3
|
+
export interface ChannelsOptions {
|
|
4
|
+
factors?: Dynamic<{
|
|
5
|
+
r?: number;
|
|
6
|
+
g?: number;
|
|
7
|
+
b?: number;
|
|
8
|
+
}>;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Multiplies each channel by a different factor
|
|
12
|
+
*/
|
|
13
|
+
export declare class Channels extends Shader {
|
|
14
|
+
factors: Dynamic<{
|
|
15
|
+
r?: number;
|
|
16
|
+
b?: number;
|
|
17
|
+
g?: number;
|
|
18
|
+
}>;
|
|
19
|
+
/**
|
|
20
|
+
* @param factors - channel factors, each defaulting to 1
|
|
21
|
+
*/
|
|
22
|
+
constructor(options?: ChannelsOptions);
|
|
23
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Dynamic, Color } from '../util';
|
|
2
|
+
import { Shader } from './shader';
|
|
3
|
+
export interface ChromaKeyOptions {
|
|
4
|
+
target?: Dynamic<Color>;
|
|
5
|
+
threshold?: Dynamic<number>;
|
|
6
|
+
interpolate?: Dynamic<boolean>;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Reduces alpha for pixels which are close to a specified target color
|
|
10
|
+
*/
|
|
11
|
+
export declare class ChromaKey extends Shader {
|
|
12
|
+
target: Dynamic<Color>;
|
|
13
|
+
threshold: Dynamic<number>;
|
|
14
|
+
interpolate: Dynamic<boolean>;
|
|
15
|
+
/**
|
|
16
|
+
* @param [target={r: 0, g: 0, b: 0, a: 1}] - the color to remove
|
|
17
|
+
* @param [threshold=0] - how much error to allow
|
|
18
|
+
* @param [interpolate=false] - <code>true</code> to interpolate
|
|
19
|
+
* the alpha channel, or <code>false</code> value for no smoothing (i.e. an
|
|
20
|
+
* alpha of either 0 or 255)
|
|
21
|
+
*/
|
|
22
|
+
constructor(options?: ChromaKeyOptions);
|
|
23
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Dynamic } from '../util';
|
|
2
|
+
import { Shader } from './shader';
|
|
3
|
+
export interface ContrastOptions {
|
|
4
|
+
contrast?: Dynamic<number>;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Changes the contrast by multiplying the RGB channels by a constant
|
|
8
|
+
*/
|
|
9
|
+
export declare class Contrast extends Shader {
|
|
10
|
+
contrast: Dynamic<number>;
|
|
11
|
+
/**
|
|
12
|
+
* @param [contrast=1] - the contrast multiplier
|
|
13
|
+
*/
|
|
14
|
+
constructor(options?: ContrastOptions);
|
|
15
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Movie } from '../movie';
|
|
2
|
+
import { Dynamic } from '../util';
|
|
3
|
+
import { Base } from './base';
|
|
4
|
+
import { Visual } from '../layer/index';
|
|
5
|
+
export declare class EllipticalMaskOptions {
|
|
6
|
+
x: Dynamic<number>;
|
|
7
|
+
y: Dynamic<number>;
|
|
8
|
+
radiusX: Dynamic<number>;
|
|
9
|
+
radiusY: Dynamic<number>;
|
|
10
|
+
rotation?: Dynamic<number>;
|
|
11
|
+
startAngle?: Dynamic<number>;
|
|
12
|
+
endAngle?: Dynamic<number>;
|
|
13
|
+
anticlockwise?: Dynamic<boolean>;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Preserves an ellipse of the layer and clears the rest
|
|
17
|
+
*/
|
|
18
|
+
export declare class EllipticalMask extends Base {
|
|
19
|
+
x: Dynamic<number>;
|
|
20
|
+
y: Dynamic<number>;
|
|
21
|
+
radiusX: Dynamic<number>;
|
|
22
|
+
radiusY: Dynamic<number>;
|
|
23
|
+
rotation: Dynamic<number>;
|
|
24
|
+
startAngle: Dynamic<number>;
|
|
25
|
+
endAngle: Dynamic<number>;
|
|
26
|
+
anticlockwise: Dynamic<boolean>;
|
|
27
|
+
private _tmpCanvas;
|
|
28
|
+
private _tmpCtx;
|
|
29
|
+
constructor(options: EllipticalMaskOptions);
|
|
30
|
+
apply(target: Movie | Visual, reltime: number): void;
|
|
31
|
+
}
|