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.
Files changed (158) hide show
  1. package/.github/workflows/nodejs.yml +4 -2
  2. package/.github/workflows/shipjs-trigger.yml +29 -0
  3. package/CHANGELOG.md +73 -12
  4. package/CODE_OF_CONDUCT.md +5 -5
  5. package/CONTRIBUTING.md +31 -77
  6. package/README.md +81 -26
  7. package/dist/effect/base.d.ts +51 -0
  8. package/dist/effect/brightness.d.ts +16 -0
  9. package/dist/effect/channels.d.ts +23 -0
  10. package/dist/effect/chroma-key.d.ts +23 -0
  11. package/dist/effect/contrast.d.ts +15 -0
  12. package/dist/effect/elliptical-mask.d.ts +31 -0
  13. package/dist/effect/gaussian-blur.d.ts +60 -0
  14. package/dist/effect/grayscale.d.ts +7 -0
  15. package/dist/effect/index.d.ts +15 -0
  16. package/dist/effect/pixelate.d.ts +18 -0
  17. package/dist/effect/shader.d.ts +99 -0
  18. package/dist/effect/stack.d.ts +23 -0
  19. package/dist/effect/transform.d.ts +73 -0
  20. package/dist/etro-cjs.js +9287 -3331
  21. package/dist/etro-iife.js +9229 -3273
  22. package/dist/etro.d.ts +7 -0
  23. package/dist/event.d.ts +35 -0
  24. package/dist/index.d.ts +6 -0
  25. package/dist/layer/audio-source.d.ts +24 -0
  26. package/dist/layer/audio.d.ts +14 -0
  27. package/dist/layer/base.d.ts +82 -0
  28. package/dist/layer/image.d.ts +6 -0
  29. package/dist/layer/index.d.ts +11 -0
  30. package/dist/layer/text.d.ts +60 -0
  31. package/dist/layer/video.d.ts +11 -0
  32. package/dist/layer/visual-source.d.ts +32 -0
  33. package/dist/layer/visual.d.ts +58 -0
  34. package/dist/movie.d.ts +192 -0
  35. package/dist/object.d.ts +12 -0
  36. package/dist/util.d.ts +125 -0
  37. package/eslint.conf.js +2 -9
  38. package/eslint.example-conf.js +9 -0
  39. package/eslint.test-conf.js +1 -0
  40. package/eslint.typescript-conf.js +5 -0
  41. package/examples/application/readme-screenshot.html +16 -17
  42. package/examples/application/video-player.html +10 -11
  43. package/examples/application/webcam.html +6 -6
  44. package/examples/introduction/audio.html +30 -18
  45. package/examples/introduction/effects.html +37 -14
  46. package/examples/introduction/export.html +32 -25
  47. package/examples/introduction/functions.html +6 -4
  48. package/examples/introduction/hello-world1.html +9 -5
  49. package/examples/introduction/hello-world2.html +5 -5
  50. package/examples/introduction/keyframes.html +35 -23
  51. package/examples/introduction/media.html +26 -18
  52. package/examples/introduction/text.html +9 -5
  53. package/karma.conf.js +5 -3
  54. package/package.json +36 -14
  55. package/rollup.config.js +15 -4
  56. package/scripts/gen-effect-samples.html +26 -25
  57. package/scripts/save-effect-samples.js +14 -15
  58. package/ship.config.js +80 -0
  59. package/src/effect/base.ts +115 -0
  60. package/src/effect/brightness.ts +43 -0
  61. package/src/effect/channels.ts +50 -0
  62. package/src/effect/chroma-key.ts +82 -0
  63. package/src/effect/contrast.ts +42 -0
  64. package/src/effect/elliptical-mask.ts +75 -0
  65. package/src/effect/gaussian-blur.ts +232 -0
  66. package/src/effect/grayscale.ts +34 -0
  67. package/src/effect/index.ts +22 -0
  68. package/src/effect/pixelate.ts +58 -0
  69. package/src/effect/shader.ts +557 -0
  70. package/src/effect/stack.ts +78 -0
  71. package/src/effect/transform.ts +193 -0
  72. package/src/etro.ts +26 -0
  73. package/src/event.ts +112 -0
  74. package/src/index.ts +8 -0
  75. package/src/layer/audio-source.ts +219 -0
  76. package/src/layer/audio.ts +34 -0
  77. package/src/layer/base.ts +175 -0
  78. package/src/layer/image.ts +8 -0
  79. package/src/layer/index.ts +13 -0
  80. package/src/layer/text.ts +138 -0
  81. package/src/layer/video.ts +15 -0
  82. package/src/layer/visual-source.ts +150 -0
  83. package/src/layer/visual.ts +197 -0
  84. package/src/movie.ts +707 -0
  85. package/src/object.ts +14 -0
  86. package/src/util.ts +466 -0
  87. package/tsconfig.json +8 -0
  88. package/docs/effect.js.html +0 -1215
  89. package/docs/event.js.html +0 -145
  90. package/docs/index.html +0 -81
  91. package/docs/index.js.html +0 -92
  92. package/docs/layer.js.html +0 -888
  93. package/docs/module-effect-GaussianBlurComponent.html +0 -345
  94. package/docs/module-effect.Brightness.html +0 -339
  95. package/docs/module-effect.Channels.html +0 -319
  96. package/docs/module-effect.ChromaKey.html +0 -611
  97. package/docs/module-effect.Contrast.html +0 -339
  98. package/docs/module-effect.EllipticalMask.html +0 -200
  99. package/docs/module-effect.GaussianBlur.html +0 -202
  100. package/docs/module-effect.GaussianBlurHorizontal.html +0 -242
  101. package/docs/module-effect.GaussianBlurVertical.html +0 -242
  102. package/docs/module-effect.Pixelate.html +0 -330
  103. package/docs/module-effect.Shader.html +0 -1227
  104. package/docs/module-effect.Stack.html +0 -406
  105. package/docs/module-effect.Transform.Matrix.html +0 -193
  106. package/docs/module-effect.Transform.html +0 -1174
  107. package/docs/module-effect.html +0 -148
  108. package/docs/module-event.html +0 -473
  109. package/docs/module-index.html +0 -186
  110. package/docs/module-layer-Media.html +0 -1116
  111. package/docs/module-layer-MediaMixin.html +0 -164
  112. package/docs/module-layer.Audio.html +0 -1188
  113. package/docs/module-layer.Base.html +0 -629
  114. package/docs/module-layer.Image.html +0 -1421
  115. package/docs/module-layer.Text.html +0 -1731
  116. package/docs/module-layer.Video.html +0 -1938
  117. package/docs/module-layer.Visual.html +0 -1698
  118. package/docs/module-layer.html +0 -137
  119. package/docs/module-movie.html +0 -3118
  120. package/docs/module-util.Color.html +0 -702
  121. package/docs/module-util.Font.html +0 -395
  122. package/docs/module-util.html +0 -845
  123. package/docs/movie.js.html +0 -689
  124. package/docs/scripts/collapse.js +0 -20
  125. package/docs/scripts/linenumber.js +0 -25
  126. package/docs/scripts/nav.js +0 -12
  127. package/docs/scripts/polyfill.js +0 -4
  128. package/docs/scripts/prettify/Apache-License-2.0.txt +0 -202
  129. package/docs/scripts/prettify/lang-css.js +0 -2
  130. package/docs/scripts/prettify/prettify.js +0 -28
  131. package/docs/scripts/search.js +0 -83
  132. package/docs/styles/jsdoc.css +0 -671
  133. package/docs/styles/prettify.css +0 -79
  134. package/docs/util.js.html +0 -503
  135. package/screenshots/2019-08-17_0.png +0 -0
  136. package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
  137. package/spec/assets/effect/gaussian-blur-vertical.png +0 -0
  138. package/spec/assets/effect/original.png +0 -0
  139. package/spec/assets/effect/pixelate.png +0 -0
  140. package/spec/assets/effect/transform/multiply.png +0 -0
  141. package/spec/assets/effect/transform/rotate.png +0 -0
  142. package/spec/assets/effect/transform/scale-fraction.png +0 -0
  143. package/spec/assets/effect/transform/scale.png +0 -0
  144. package/spec/assets/effect/transform/translate-fraction.png +0 -0
  145. package/spec/assets/effect/transform/translate.png +0 -0
  146. package/spec/assets/layer/audio.wav +0 -0
  147. package/spec/assets/layer/image.jpg +0 -0
  148. package/spec/effect.spec.js +0 -352
  149. package/spec/event.spec.js +0 -25
  150. package/spec/layer.spec.js +0 -150
  151. package/spec/movie.spec.js +0 -162
  152. package/spec/util.spec.js +0 -285
  153. package/src/effect.js +0 -1268
  154. package/src/event.js +0 -78
  155. package/src/index.js +0 -23
  156. package/src/layer.js +0 -897
  157. package/src/movie.js +0 -637
  158. 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: [8.x, 10.x, 12.x]
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
- ## [0.1.0] - 2018-10-06
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
- [Unreleased]: https://github.com/etro-js/etro/compare/v0.7...HEAD
132
- [0.7.0]: https://github.com/etro-js/etro/compare/v0.6...v0.7
133
- [0.6.0]: https://github.com/etro-js/etro/compare/v0.5...v0.6
134
- [0.5.0]: https://github.com/etro-js/etro/compare/v0.4...v0.5
135
- [0.4.0]: https://github.com/etro-js/etro/compare/v0.3...v0.4
136
- [0.3.0]: https://github.com/etro-js/etro/compare/v0.2...v0.3
137
- [0.2.0]: https://github.com/etro-js/etro/compare/v0.1...v0.2
138
- [0.1.0]: https://github.com/etro-js/etro/releases/tag/v0.1
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
@@ -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** in the [Slack workspace]. All
59
- complaints will be reviewed and investigated and will result in a response that
60
- is deemed necessary and appropriate to the circumstances. The project team is
61
- obligated to maintain confidentiality with regard to the reporter of an incident.
62
- Further details of specific enforcement policies may be posted separately.
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 [Slack workspace](https://join.slack.com/t/etrojs/shared_invite/enQtNzgxODc0ODUyMjU2LTA5MGM5YzIyOGU5NjQxY2E0YmIzYzhhZTU4ODdjNzBiY2M3MzgwZTZiYzU5ZmE2NmYyMjc0ZTE0ZWIxMjBmN2Q) for questions and casual discussion
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
- $ git clone https://github.com/username/etro.git`
21
- $ cd etro
22
- $ git remote add upstream https://github.com/etro-js/etro.git
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 3: Code
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
- - To start the development server run
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
- $ npm start
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 each commit atomic in the `master` branch
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, begin each commit message with [an appropriate emoji](https://gitmoji.carloscuesta.me/)
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
- - The first line should be 50 characters or less. Wrap lines after around 72 characters (for Vim add `filetype indent plugin on` to ~/.vimrc, and its enabled by default in Atom).
66
- - *Example:*
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
- $ git fetch upstream
82
- $ git rebase upstream/master
62
+ git fetch upstream
63
+ git rebase upstream/master
83
64
  ```
84
65
 
85
- - Push your changes to the topic branch in your fork of the repository
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 topic-branch to the main repository
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
- *Note: To specify the ES6 module (file) that a declaration exists in, the following syntax will be used: `module.export`.*
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 *Overview* wiki page](https://github.com/etro-js/etro.wiki/Overview.md).
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
- Here are the contents of **src**:
84
+ ### API Structure
116
85
 
117
- | Path | Contents |
118
- | --- | --- |
119
- | [**effect.js**](src/effect.js) | all (visual) effect classes |
120
- | [**event.js**](src/event.js) | the pub/sub mechanics |
121
- | [**index.js**](src/index.js) | the entry module |
122
- | [**layer.js**](src/layer.js) | all layer classes |
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://img.shields.io/npm/v/etro)](https://www.npmjs.com/package/etro)
4
4
  [![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)
5
5
 
6
- > A video editor for developers
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
- ![Screenshot](screenshots/2019-08-17_0.png)
9
-
10
- Etro is a completely in-browser video-editing framework. 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 and audio manipulation to existing tracks. Being very flexible and extendable, you can choose to only use the core components or define your own.
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
- - Export video to blob
15
- - Write your own layers and effects
16
- - Write a function for a property
17
- - Keyframes
18
- - Built-in hardware accelerated visual effects
19
- - More coming soon
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 install etro
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 `etro`:
35
- ```html
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
- Then, to create a movie (a Etro "project")
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
- Then, add layers
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
- movie
47
- // add a solid blue layer starting at 0s and lasting 3s and filling the entire screen
48
- .addLayer(new etro.layer.Visual(0, 3, {background: 'blue'}))
49
- // add a cropped video layer starting at 2.5s
50
- .addLayer(new etro.layer.Video(2.5, video, {mediaX: 10, mediaY: -25}));
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
- movie.play();
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 information.
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
+ }