etro 0.6.0

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 (103) hide show
  1. package/.env +2 -0
  2. package/.github/workflows/nodejs.yml +27 -0
  3. package/CHANGELOG.md +109 -0
  4. package/CODE_OF_CONDUCT.md +77 -0
  5. package/CONTRIBUTING.md +155 -0
  6. package/LICENSE +674 -0
  7. package/README.md +57 -0
  8. package/dist/etro.js +3397 -0
  9. package/docs/effect.js.html +1215 -0
  10. package/docs/event.js.html +145 -0
  11. package/docs/index.html +81 -0
  12. package/docs/index.js.html +92 -0
  13. package/docs/layer.js.html +888 -0
  14. package/docs/module-effect-GaussianBlurComponent.html +345 -0
  15. package/docs/module-effect.Brightness.html +339 -0
  16. package/docs/module-effect.Channels.html +319 -0
  17. package/docs/module-effect.ChromaKey.html +611 -0
  18. package/docs/module-effect.Contrast.html +339 -0
  19. package/docs/module-effect.EllipticalMask.html +200 -0
  20. package/docs/module-effect.GaussianBlur.html +202 -0
  21. package/docs/module-effect.GaussianBlurHorizontal.html +242 -0
  22. package/docs/module-effect.GaussianBlurVertical.html +242 -0
  23. package/docs/module-effect.Pixelate.html +330 -0
  24. package/docs/module-effect.Shader.html +1227 -0
  25. package/docs/module-effect.Stack.html +406 -0
  26. package/docs/module-effect.Transform.Matrix.html +193 -0
  27. package/docs/module-effect.Transform.html +1174 -0
  28. package/docs/module-effect.html +148 -0
  29. package/docs/module-event.html +473 -0
  30. package/docs/module-index.html +186 -0
  31. package/docs/module-layer-Media.html +1116 -0
  32. package/docs/module-layer-MediaMixin.html +164 -0
  33. package/docs/module-layer.Audio.html +1188 -0
  34. package/docs/module-layer.Base.html +629 -0
  35. package/docs/module-layer.Image.html +1421 -0
  36. package/docs/module-layer.Text.html +1731 -0
  37. package/docs/module-layer.Video.html +1938 -0
  38. package/docs/module-layer.Visual.html +1698 -0
  39. package/docs/module-layer.html +137 -0
  40. package/docs/module-movie.html +3118 -0
  41. package/docs/module-util.Color.html +702 -0
  42. package/docs/module-util.Font.html +395 -0
  43. package/docs/module-util.html +845 -0
  44. package/docs/movie.js.html +689 -0
  45. package/docs/scripts/collapse.js +20 -0
  46. package/docs/scripts/linenumber.js +25 -0
  47. package/docs/scripts/nav.js +12 -0
  48. package/docs/scripts/polyfill.js +4 -0
  49. package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
  50. package/docs/scripts/prettify/lang-css.js +2 -0
  51. package/docs/scripts/prettify/prettify.js +28 -0
  52. package/docs/scripts/search.js +83 -0
  53. package/docs/styles/jsdoc.css +671 -0
  54. package/docs/styles/prettify.css +79 -0
  55. package/docs/util.js.html +503 -0
  56. package/eslint.conf.js +28 -0
  57. package/eslint.test-conf.js +4 -0
  58. package/examples/application/readme-screenshot.html +86 -0
  59. package/examples/application/video-player.html +131 -0
  60. package/examples/application/webcam.html +28 -0
  61. package/examples/introduction/audio.html +52 -0
  62. package/examples/introduction/effects.html +56 -0
  63. package/examples/introduction/export.html +70 -0
  64. package/examples/introduction/functions.html +35 -0
  65. package/examples/introduction/hello-world1.html +33 -0
  66. package/examples/introduction/hello-world2.html +32 -0
  67. package/examples/introduction/keyframes.html +67 -0
  68. package/examples/introduction/media.html +55 -0
  69. package/examples/introduction/text.html +27 -0
  70. package/jsdoc.conf.json +3 -0
  71. package/karma.conf.js +60 -0
  72. package/package.json +63 -0
  73. package/private-todo.txt +70 -0
  74. package/rename-file.sh +18 -0
  75. package/rename-versions.sh +14 -0
  76. package/rename.sh +22 -0
  77. package/rollup.config.js +31 -0
  78. package/screenshots/2019-08-17_0.png +0 -0
  79. package/scripts/gen-effect-samples.html +99 -0
  80. package/scripts/save-effect-samples.js +43 -0
  81. package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
  82. package/spec/assets/effect/gaussian-blur-vertical.png +0 -0
  83. package/spec/assets/effect/original.png +0 -0
  84. package/spec/assets/effect/pixelate.png +0 -0
  85. package/spec/assets/effect/transform/multiply.png +0 -0
  86. package/spec/assets/effect/transform/rotate.png +0 -0
  87. package/spec/assets/effect/transform/scale-fraction.png +0 -0
  88. package/spec/assets/effect/transform/scale.png +0 -0
  89. package/spec/assets/effect/transform/translate-fraction.png +0 -0
  90. package/spec/assets/effect/transform/translate.png +0 -0
  91. package/spec/assets/layer/audio.wav +0 -0
  92. package/spec/assets/layer/image.jpg +0 -0
  93. package/spec/effect.spec.js +352 -0
  94. package/spec/event.spec.js +25 -0
  95. package/spec/layer.spec.js +128 -0
  96. package/spec/movie.spec.js +154 -0
  97. package/spec/util.spec.js +285 -0
  98. package/src/effect.js +1265 -0
  99. package/src/event.js +78 -0
  100. package/src/index.js +23 -0
  101. package/src/layer.js +875 -0
  102. package/src/movie.js +636 -0
  103. package/src/util.js +487 -0
package/.env ADDED
@@ -0,0 +1,2 @@
1
+ GITHUB_TOKEN=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
2
+ NPM_AUTH_TOKEN=9f33f7fb-82a2-4e87-a4ba-3860f13a3b68
@@ -0,0 +1,27 @@
1
+ name: Node CI
2
+
3
+ on: [push]
4
+
5
+ jobs:
6
+ build:
7
+
8
+ runs-on: ubuntu-latest
9
+
10
+ strategy:
11
+ matrix:
12
+ node-version: [8.x, 10.x, 12.x]
13
+
14
+ steps:
15
+ - uses: actions/checkout@v1
16
+ - name: Use Node.js ${{ matrix.node-version }}
17
+ uses: actions/setup-node@v1
18
+ with:
19
+ node-version: ${{ matrix.node-version }}
20
+ - name: npm install, lint, build, and test
21
+ run: |
22
+ npm ci
23
+ npm run lint
24
+ npm run build
25
+ npm test
26
+ env:
27
+ CI: true
package/CHANGELOG.md ADDED
@@ -0,0 +1,109 @@
1
+ # Changelog
2
+
3
+ ## [0.6.0] - 2019-12-26
4
+ ### Added
5
+ - Add [API documentation](https://etrojs.dev/).
6
+ - Support enabling and disabling layers and effects.
7
+ - Implement more movie events (*movie.play*, *movie.record*, *movie.pause*, *movie.change.duration*).
8
+ - Implement [property filters](https://github.com/etro-js/etro/wiki/Property-Filters).
9
+ - Implement property caching.
10
+ - Media layer supports media whose duration changes.
11
+ - Add unimplemented `etro.Font` properties.
12
+ - Add example that uses a live stream (the webcam).
13
+
14
+ ### Changed
15
+ - Add layer `start` and `stop` methods.
16
+ - Add layer and effect `attach` and `detach` methods.
17
+ - Make some properties public (`_getDefaultOptions`, `_publicExcludes`, `layer.Base#_render`, `event._publish`, `layer.Base#_render`, `event._publish`, `layer.Visual#_doRender`).
18
+ - Change `etro.val(property, element, time)` → `etro.val(element, path, time)`.
19
+ - Make event properties specific to event type
20
+ - *layer.attach|detach*: `source` → `effectTarget`
21
+ - *effect.attach|detach*: `source` → `effectTarget`
22
+ - *movie.change.layer.add|remove*: `source` → `layer`
23
+ - *movie.change.effect.add|remove*: `source` → `effect`
24
+
25
+ ### Fixed
26
+ - Media current time is no longer reset every time it's played.
27
+ - Fix Gaussian blur effect throwing error.
28
+ - Custom textures work for shader effects.
29
+ - Fix undefined behavior with shader effects that output transparency.
30
+ - Use `sourceTextureOptions` in shader effects.
31
+ - Recursive property changes now emit events with `etro.watchPublic`.
32
+ - Public properties set to keyframes are treated as keyframes.
33
+ - Update event names in examples.
34
+
35
+ ## [0.5.0] - 2019-10-09
36
+ ### Added
37
+ - Movies and layers auto-refresh.
38
+
39
+ ### Changed
40
+ - Rewrite event system.
41
+ - Events propogate up.
42
+ - Event names are organized into groups.
43
+
44
+ ### Fixed
45
+ - Update IIFE global export from `mv` to `etro`.
46
+ - Fix recording audio.
47
+ - Fix recording movies without audio in Chrome.
48
+ - Fix effects for movies.
49
+
50
+ ## [0.4.0] - 2019-08-18
51
+ ### Added
52
+ - WebGL fragment shader effects, with which you can re-render a layer or movie with a GLSL fragment shader.
53
+ - New `initialRefresh` movie option that can prevent rendering on init.
54
+
55
+ ### Changed
56
+ - Most visual effects now use GLSL.
57
+ - New `element` argument passed to function properties to see which Etro object the property belongs to.
58
+
59
+ ## [0.3.0] - 2018-12-11
60
+ ### Added
61
+ - Function properties.
62
+ - Dynamic properties that call a function every time they're queried.
63
+
64
+ ### Changed
65
+ - Null or undefined layer dimensions default to the width or height of the movie.
66
+ - Movie "end" event is now called "ended".
67
+
68
+ ### Fixed
69
+ - Bug with layer options
70
+
71
+ ### Removed
72
+ - Volume, speed and muted properties. These will most likely be added as separate audio effects in the future.
73
+
74
+ ## [0.2.0] - 2018-10-14
75
+ ### Added
76
+ - Keyframes
77
+ - Works with any value type in pretty much every built-in component property.
78
+ - Number and objects, including colors and fonts, can interpolate.
79
+ - Custom interpolation option.
80
+ - Elliptical mask effect.
81
+ - Many small improvements.
82
+
83
+ ## [0.1.0] - 2018-10-06
84
+ ### Added
85
+ - Movies
86
+ - Timeline
87
+ - Playing
88
+ - Exporting
89
+ - Layers
90
+ - Base layers
91
+ - Text layers
92
+ - Image layers
93
+ - Audio layers
94
+ - Video layers
95
+ - Effects
96
+ - Transparency
97
+ - Brightness
98
+ - Contrast
99
+ - Channels
100
+ - Gaussian blur
101
+ - Transform
102
+
103
+ [0.6.0]: https://github.com/etro-js/etro/compare/v0.6...HEAD
104
+ [0.5.0]: https://github.com/etro-js/etro/compare/v0.5...v0.6
105
+ [0.4.0]: https://github.com/etro-js/etro/compare/v0.4...v0.5
106
+ [0.3.0]: https://github.com/etro-js/etro/compare/v0.3...v0.4
107
+ [0.3.0]: https://github.com/etro-js/etro/compare/v0.2...v0.3
108
+ [0.2.0]: https://github.com/etro-js/etro/compare/v0.1...v0.2
109
+ [0.1.0]: https://github.com/etro-js/etro/releases/tag/v0.1
@@ -0,0 +1,77 @@
1
+ # Contributor Covenant Code of Conduct
2
+
3
+ ## Our Pledge
4
+
5
+ In the interest of fostering an open and welcoming environment, we as
6
+ contributors and maintainers pledge to making participation in our project and
7
+ our community a harassment-free experience for everyone, regardless of age, body
8
+ size, disability, ethnicity, sex characteristics, gender identity and expression,
9
+ level of experience, education, socio-economic status, nationality, personal
10
+ appearance, race, religion, or sexual identity and orientation.
11
+
12
+ ## Our Standards
13
+
14
+ Examples of behavior that contributes to creating a positive environment
15
+ include:
16
+
17
+ * Using welcoming and inclusive language
18
+ * Being respectful of differing viewpoints and experiences
19
+ * Gracefully accepting constructive criticism
20
+ * Focusing on what is best for the community
21
+ * Showing empathy towards other community members
22
+
23
+ Examples of unacceptable behavior by participants include:
24
+
25
+ * The use of sexualized language or imagery and unwelcome sexual attention or
26
+ advances
27
+ * Trolling, insulting/derogatory comments, and personal or political attacks
28
+ * Public or private harassment
29
+ * Publishing others' private information, such as a physical or electronic
30
+ address, without explicit permission
31
+ * Other conduct which could reasonably be considered inappropriate in a
32
+ professional setting
33
+
34
+ ## Our Responsibilities
35
+
36
+ Project maintainers are responsible for clarifying the standards of acceptable
37
+ behavior and are expected to take appropriate and fair corrective action in
38
+ response to any instances of unacceptable behavior.
39
+
40
+ Project maintainers have the right and responsibility to remove, edit, or
41
+ reject comments, commits, code, wiki edits, issues, and other contributions
42
+ that are not aligned to this Code of Conduct, or to ban temporarily or
43
+ permanently any contributor for other behaviors that they deem inappropriate,
44
+ threatening, offensive, or harmful.
45
+
46
+ ## Scope
47
+
48
+ This Code of Conduct applies both within project spaces and in public spaces
49
+ when an individual is representing the project or its community. Examples of
50
+ representing a project or community include using an official project e-mail
51
+ address, posting via an official social media account, or acting as an appointed
52
+ representative at an online or offline event. Representation of a project may be
53
+ further defined and clarified by project maintainers.
54
+
55
+ ## Enforcement
56
+
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.
63
+
64
+ Project maintainers who do not follow or enforce the Code of Conduct in good
65
+ faith may face temporary or permanent repercussions as determined by other
66
+ members of the project's leadership.
67
+
68
+ ## Attribution
69
+
70
+ This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71
+ available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72
+
73
+ [homepage]: https://www.contributor-covenant.org
74
+ [slack workspace]: https://join.slack.com/t/etrojs/shared_invite/enQtNzgxODc0ODUyMjU2LTA5MGM5YzIyOGU5NjQxY2E0YmIzYzhhZTU4ODdjNzBiY2M3MzgwZTZiYzU5ZmE2NmYyMjc0ZTE0ZWIxMjBmN2Q
75
+
76
+ For answers to common questions about this code of conduct, see
77
+ https://www.contributor-covenant.org/faq
@@ -0,0 +1,155 @@
1
+ # Contributing
2
+
3
+ ## Introduction
4
+
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
+
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
8
+
9
+ ## Setting up your local environment
10
+
11
+ #### Step 0: Dependencies
12
+
13
+ - You will need `git`, `node` and `npm`
14
+
15
+ #### Step 1: Fork
16
+
17
+ - Create your own fork of Etro. Then run
18
+
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
33
+ ```
34
+
35
+ ## Making your changes
36
+
37
+ #### Step 3: Code
38
+
39
+ - If you are writing code, please follow the style guide [StandardJS](https://standardjs.com/rules.html)
40
+
41
+ - To start the development server run
42
+
43
+ ```
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
55
+ ```
56
+
57
+ to lint the code, generate the [dist](dist) files and run unit tests on them.
58
+
59
+ - Commit your changes
60
+ - Please avoid squashing all your commits into one; we try to keep each commit atomic in the `master` branch
61
+ - 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.
64
+ - 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:*
67
+
68
+ ```
69
+ :emoji: One-liner
70
+
71
+ Optional description
72
+ ```
73
+
74
+ ## Submitting your changes
75
+
76
+ #### Step 3: Push
77
+
78
+ - First, rebase (don't merge) to integrate your work with the main repository
79
+
80
+ ```
81
+ $ git fetch upstream
82
+ $ git rebase upstream/master
83
+ ```
84
+
85
+ - Push your changes to the topic branch in your fork of the repository
86
+
87
+ ```
88
+ $ git push origin topic-branch
89
+ ```
90
+
91
+ #### Step 4: Pull request
92
+
93
+ - Open a pull request from your topic-branch to the main repository
94
+ - In the PR title, include **fixes ###** for bugs and **resolves ###** for feature requests
95
+ - If you changed any core functionality, make sure you explain your motives for those changes
96
+
97
+ #### Step 5: Feedback
98
+
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
+ ```
106
+
107
+ ## Code overview
108
+
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
112
+
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).
114
+
115
+ Here are the contents of **src**:
116
+
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
134
+
135
+ ### Concepts
136
+
137
+ #### Pub/sub system
138
+
139
+ 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,
140
+
141
+ ```js
142
+ event.publish(movie, 'movie.type.of.event', { additionalData: 'foo' })
143
+ ```
144
+
145
+ That will notify all listeners of `movie` for event types `'movie'`, `'movie.type'`, `'movie.type.of'` and `'movie.type.of.event'`. To listen for an event, use `event.subscribe(target, type, listener)`, like
146
+
147
+ ```js
148
+ event.subscribe(movie, 'movie.type', event => {
149
+ console.log(event.target, event.type, event.additionalData) // should print the movie, 'movie.type.of.event', 'foo'
150
+ }
151
+ ```
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.