etro 0.6.0 → 0.8.1

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 (157) hide show
  1. package/.github/workflows/nodejs.yml +4 -2
  2. package/CHANGELOG.md +85 -4
  3. package/CODE_OF_CONDUCT.md +5 -5
  4. package/CONTRIBUTING.md +33 -79
  5. package/README.md +93 -26
  6. package/dist/effect/base.d.ts +51 -0
  7. package/dist/effect/brightness.d.ts +16 -0
  8. package/dist/effect/channels.d.ts +23 -0
  9. package/dist/effect/chroma-key.d.ts +23 -0
  10. package/dist/effect/contrast.d.ts +15 -0
  11. package/dist/effect/elliptical-mask.d.ts +31 -0
  12. package/dist/effect/gaussian-blur.d.ts +60 -0
  13. package/dist/effect/grayscale.d.ts +7 -0
  14. package/dist/effect/index.d.ts +15 -0
  15. package/dist/effect/pixelate.d.ts +18 -0
  16. package/dist/effect/shader.d.ts +99 -0
  17. package/dist/effect/stack.d.ts +23 -0
  18. package/dist/effect/transform.d.ts +73 -0
  19. package/dist/etro-cjs.js +9387 -0
  20. package/dist/etro-iife.js +9390 -0
  21. package/dist/etro.d.ts +7 -0
  22. package/dist/event.d.ts +35 -0
  23. package/dist/index.d.ts +6 -0
  24. package/dist/layer/audio-source.d.ts +24 -0
  25. package/dist/layer/audio.d.ts +14 -0
  26. package/dist/layer/base.d.ts +82 -0
  27. package/dist/layer/image.d.ts +6 -0
  28. package/dist/layer/index.d.ts +11 -0
  29. package/dist/layer/text.d.ts +60 -0
  30. package/dist/layer/video.d.ts +11 -0
  31. package/dist/layer/visual-source.d.ts +32 -0
  32. package/dist/layer/visual.d.ts +58 -0
  33. package/dist/movie.d.ts +192 -0
  34. package/dist/object.d.ts +12 -0
  35. package/dist/util.d.ts +125 -0
  36. package/eslint.conf.js +2 -9
  37. package/eslint.example-conf.js +9 -0
  38. package/eslint.test-conf.js +1 -0
  39. package/eslint.typescript-conf.js +5 -0
  40. package/examples/application/readme-screenshot.html +16 -17
  41. package/examples/application/video-player.html +10 -11
  42. package/examples/application/webcam.html +6 -6
  43. package/examples/introduction/audio.html +30 -18
  44. package/examples/introduction/effects.html +37 -14
  45. package/examples/introduction/export.html +40 -27
  46. package/examples/introduction/functions.html +6 -4
  47. package/examples/introduction/hello-world1.html +9 -5
  48. package/examples/introduction/hello-world2.html +5 -5
  49. package/examples/introduction/keyframes.html +35 -23
  50. package/examples/introduction/media.html +26 -18
  51. package/examples/introduction/text.html +9 -5
  52. package/karma.conf.js +6 -4
  53. package/package.json +34 -13
  54. package/rollup.config.js +19 -3
  55. package/scripts/gen-effect-samples.html +27 -26
  56. package/scripts/save-effect-samples.js +14 -15
  57. package/src/effect/base.ts +115 -0
  58. package/src/effect/brightness.ts +43 -0
  59. package/src/effect/channels.ts +50 -0
  60. package/src/effect/chroma-key.ts +82 -0
  61. package/src/effect/contrast.ts +42 -0
  62. package/src/effect/elliptical-mask.ts +75 -0
  63. package/src/effect/gaussian-blur.ts +232 -0
  64. package/src/effect/grayscale.ts +34 -0
  65. package/src/effect/index.ts +22 -0
  66. package/src/effect/pixelate.ts +58 -0
  67. package/src/effect/shader.ts +557 -0
  68. package/src/effect/stack.ts +77 -0
  69. package/src/effect/transform.ts +193 -0
  70. package/src/etro.ts +26 -0
  71. package/src/event.ts +112 -0
  72. package/src/index.ts +8 -0
  73. package/src/layer/audio-source.ts +219 -0
  74. package/src/layer/audio.ts +34 -0
  75. package/src/layer/base.ts +175 -0
  76. package/src/layer/image.ts +8 -0
  77. package/src/layer/index.ts +13 -0
  78. package/src/layer/text.ts +138 -0
  79. package/src/layer/video.ts +15 -0
  80. package/src/layer/visual-source.ts +150 -0
  81. package/src/layer/visual.ts +197 -0
  82. package/src/movie.ts +701 -0
  83. package/src/object.ts +14 -0
  84. package/src/util.ts +466 -0
  85. package/tsconfig.json +8 -0
  86. package/dist/etro.js +0 -3397
  87. package/docs/effect.js.html +0 -1215
  88. package/docs/event.js.html +0 -145
  89. package/docs/index.html +0 -81
  90. package/docs/index.js.html +0 -92
  91. package/docs/layer.js.html +0 -888
  92. package/docs/module-effect-GaussianBlurComponent.html +0 -345
  93. package/docs/module-effect.Brightness.html +0 -339
  94. package/docs/module-effect.Channels.html +0 -319
  95. package/docs/module-effect.ChromaKey.html +0 -611
  96. package/docs/module-effect.Contrast.html +0 -339
  97. package/docs/module-effect.EllipticalMask.html +0 -200
  98. package/docs/module-effect.GaussianBlur.html +0 -202
  99. package/docs/module-effect.GaussianBlurHorizontal.html +0 -242
  100. package/docs/module-effect.GaussianBlurVertical.html +0 -242
  101. package/docs/module-effect.Pixelate.html +0 -330
  102. package/docs/module-effect.Shader.html +0 -1227
  103. package/docs/module-effect.Stack.html +0 -406
  104. package/docs/module-effect.Transform.Matrix.html +0 -193
  105. package/docs/module-effect.Transform.html +0 -1174
  106. package/docs/module-effect.html +0 -148
  107. package/docs/module-event.html +0 -473
  108. package/docs/module-index.html +0 -186
  109. package/docs/module-layer-Media.html +0 -1116
  110. package/docs/module-layer-MediaMixin.html +0 -164
  111. package/docs/module-layer.Audio.html +0 -1188
  112. package/docs/module-layer.Base.html +0 -629
  113. package/docs/module-layer.Image.html +0 -1421
  114. package/docs/module-layer.Text.html +0 -1731
  115. package/docs/module-layer.Video.html +0 -1938
  116. package/docs/module-layer.Visual.html +0 -1698
  117. package/docs/module-layer.html +0 -137
  118. package/docs/module-movie.html +0 -3118
  119. package/docs/module-util.Color.html +0 -702
  120. package/docs/module-util.Font.html +0 -395
  121. package/docs/module-util.html +0 -845
  122. package/docs/movie.js.html +0 -689
  123. package/docs/scripts/collapse.js +0 -20
  124. package/docs/scripts/linenumber.js +0 -25
  125. package/docs/scripts/nav.js +0 -12
  126. package/docs/scripts/polyfill.js +0 -4
  127. package/docs/scripts/prettify/Apache-License-2.0.txt +0 -202
  128. package/docs/scripts/prettify/lang-css.js +0 -2
  129. package/docs/scripts/prettify/prettify.js +0 -28
  130. package/docs/scripts/search.js +0 -83
  131. package/docs/styles/jsdoc.css +0 -671
  132. package/docs/styles/prettify.css +0 -79
  133. package/docs/util.js.html +0 -503
  134. package/screenshots/2019-08-17_0.png +0 -0
  135. package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
  136. package/spec/assets/effect/gaussian-blur-vertical.png +0 -0
  137. package/spec/assets/effect/original.png +0 -0
  138. package/spec/assets/effect/pixelate.png +0 -0
  139. package/spec/assets/effect/transform/multiply.png +0 -0
  140. package/spec/assets/effect/transform/rotate.png +0 -0
  141. package/spec/assets/effect/transform/scale-fraction.png +0 -0
  142. package/spec/assets/effect/transform/scale.png +0 -0
  143. package/spec/assets/effect/transform/translate-fraction.png +0 -0
  144. package/spec/assets/effect/transform/translate.png +0 -0
  145. package/spec/assets/layer/audio.wav +0 -0
  146. package/spec/assets/layer/image.jpg +0 -0
  147. package/spec/effect.spec.js +0 -352
  148. package/spec/event.spec.js +0 -25
  149. package/spec/layer.spec.js +0 -128
  150. package/spec/movie.spec.js +0 -154
  151. package/spec/util.spec.js +0 -285
  152. package/src/effect.js +0 -1265
  153. package/src/event.js +0 -78
  154. package/src/index.js +0 -23
  155. package/src/layer.js +0 -875
  156. package/src/movie.js +0 -636
  157. package/src/util.js +0 -487
package/spec/util.spec.js DELETED
@@ -1,285 +0,0 @@
1
- describe('Util', function () {
2
- describe('applyOptions', function () {
3
- it('should not apply any options with no provided or default options', function () {
4
- const etroobj = {
5
- getDefaultOptions () {
6
- return {}
7
- }
8
- }
9
- const snapshot = { ...etroobj } // store state before applying options
10
- etro.applyOptions({}, etroobj)
11
- expect(etroobj).toEqual(snapshot) // should be the same as it was
12
- })
13
-
14
- it('should apply default options', function () {
15
- const etroobj = {
16
- getDefaultOptions () {
17
- return defaultOpt
18
- }
19
- }
20
- const snapshot = { ...etroobj } // store state before applying options
21
- const defaultOpt = { foo: 1 }
22
- etro.applyOptions({}, etroobj)
23
- expect(etroobj).toEqual({ ...defaultOpt, ...snapshot }) // defaultOpt should be applied to etroobj
24
- })
25
-
26
- it('should not override provided options with default values', function () {
27
- const etroobj = {
28
- getDefaultOptions () {
29
- return { foo: 1 }
30
- }
31
- }
32
- const providedOpt = { foo: 2 }
33
- etro.applyOptions(providedOpt, etroobj)
34
- expect(etroobj.foo).toBe(providedOpt.foo)
35
- })
36
-
37
- it('should not override existing object state', function () {
38
- const etroobj = {
39
- foo: 0,
40
- getDefaultOptions () {
41
- return { foo: 1 }
42
- }
43
- }
44
- const originalFoo = etroobj.foo
45
- etro.applyOptions({ foo: 2 }, etroobj)
46
- expect(etroobj.foo).toBe(originalFoo)
47
- })
48
-
49
- it('should not allow arbitrary options', function () {
50
- const etroobj = {
51
- getDefaultOptions () {
52
- return {}
53
- }
54
- }
55
- expect(() => etro.applyOptions({ foo: null }, etroobj).toThrow(new Error("Invalid option: 'foo'")))
56
- })
57
- })
58
-
59
- describe('val', function () {
60
- it('should work on simple values', function () {
61
- // _movie is unique, so it won't depend on existing cache
62
- const elem = { prop: 'value', movie: {}, propertyFilters: {} }
63
- expect(etro.val(elem, 'prop', 0)).toBe(elem.prop)
64
- })
65
-
66
- it('should interpolate keyframes', function () {
67
- const elem = {
68
- prop: { 0: 0, 4: 1 },
69
- movie: {}, // _movie is unique, so it won't depend on existing cache
70
- propertyFilters: {}
71
- }
72
- for (let i = 0; i <= 4; i += Math.random()) {
73
- expect(etro.val(elem, 'prop', i)).toBe(i / 4)
74
- etro.clearCachedValues(elem.movie)
75
- }
76
- })
77
-
78
- it('should work with noninterpolated keyframes', function () {
79
- const elem = {
80
- prop: { 0: 'start', 4: 'end' },
81
- movie: {}, // _movie is unique, so it won't depend on existing cache
82
- propertyFilters: {}
83
- }
84
- expect(etro.val(elem, 'prop', 0)).toBe(elem.prop[0])
85
- etro.clearCachedValues(elem.movie)
86
- expect(etro.val(elem, 'prop', 3)).toBe(elem.prop[0])
87
- etro.clearCachedValues(elem.movie)
88
- expect(etro.val(elem, 'prop', 4)).toBe(elem.prop[4])
89
- etro.clearCachedValues(elem.movie)
90
- })
91
-
92
- it('should call property filters', function () {
93
- const elem = {
94
- prop: 'value',
95
- movie: {},
96
- propertyFilters: {
97
- prop: () => 'new value'
98
- }
99
- }
100
- expect(etro.val(elem, 'prop', 0)).toBe('new value')
101
- })
102
- })
103
-
104
- describe('linearInterp', function () {
105
- it('should interpolate numbers', function () {
106
- expect(etro.linearInterp(5, 10, 0.5, undefined)).toBe(7.5)
107
- })
108
-
109
- it('should choose the first string', function () {
110
- expect(etro.linearInterp('hello', 'world', 0.5)).toBe('hello')
111
- })
112
-
113
- it('should interpolate objects recursively', function () {
114
- expect(etro.linearInterp(
115
- {
116
- foo: {
117
- bar: 0
118
- }
119
- },
120
- {
121
- foo: {
122
- bar: 100
123
- }
124
- },
125
- 0.5,
126
- undefined
127
- )).toEqual(
128
- {
129
- foo: {
130
- bar: 50
131
- }
132
- }
133
- )
134
- })
135
- })
136
-
137
- describe('cosineInterp', function () {
138
- it('should interpolate numbers', function () {
139
- const x1 = 5
140
- const x2 = 10
141
- const t = 0.5
142
- const cos = Math.cos(t * Math.PI / 2)
143
- expect(etro.cosineInterp(x1, x2, t, undefined))
144
- .toBe(cos * x1 + (1 - cos) * x2)
145
- })
146
-
147
- it('should choose the first string', function () {
148
- expect(etro.linearInterp('hello', 'world', 0.5)).toBe('hello')
149
- })
150
-
151
- it('should interpolate objects recursively', function () {
152
- expect(etro.cosineInterp(
153
- {
154
- foo: {
155
- bar: 0
156
- }
157
- },
158
- {
159
- foo: {
160
- bar: 100
161
- }
162
- },
163
- 0.5,
164
- undefined
165
- )).toEqual(
166
- {
167
- foo: {
168
- bar: (1 - Math.cos(0.5 * Math.PI / 2)) * 100
169
- }
170
- }
171
- )
172
- })
173
- })
174
-
175
- describe('Color ->', function () {
176
- it('toString() should convert to RGBA', function () {
177
- expect(new etro.Color(255, 0, 255, 0.5).toString())
178
- .toBe('rgba(255, 0, 255, 0.5)')
179
- })
180
- })
181
-
182
- describe('parseColor', function () {
183
- it('should parse RGB colors', function () {
184
- expect(etro.parseColor('rgb(255,0,0)'))
185
- .toEqual(new etro.Color(255, 0, 0))
186
- })
187
-
188
- it('should parse RGBA colors', function () {
189
- expect(etro.parseColor('rgba(0,255,0,1)'))
190
- .toEqual(new etro.Color(0, 255, 0, 1))
191
- })
192
-
193
- it('should parse hex colors', function () {
194
- expect(etro.parseColor('#00f'))
195
- .toEqual(new etro.Color(0, 0, 255))
196
- })
197
-
198
- it('should parse named colors', function () {
199
- expect(etro.parseColor('blue'))
200
- .toEqual(new etro.Color(0, 0, 255))
201
- })
202
- })
203
-
204
- describe('Font ->', function () {
205
- it('toString() should convert to CSS font', function () {
206
- expect(new etro.Font(16, 'px', 'monospace').toString())
207
- .toBe('16px monospace')
208
- })
209
- })
210
-
211
- describe('parseFont', function () {
212
- it('should parse CSS fonts', function () {
213
- expect(etro.parseFont('16em monospace'))
214
- .toEqual(new etro.Font(16, 'em', 'monospace'))
215
- })
216
-
217
- it('should work with multiple word fonts', function () {
218
- expect(etro.parseFont('16px "Times New Roman"'))
219
- .toEqual(new etro.Font(16, 'px', '"Times New Roman"'))
220
- })
221
- })
222
-
223
- describe('watchPublic', function () {
224
- it('should watch public properties', function () {
225
- const element = etro.watchPublic({
226
- // mock etro element
227
- publicExcludes: [],
228
- type: 'test'
229
- })
230
- element.foo = 0 // intiialize (must be after watchPublic)
231
- const history = []
232
- etro.event.subscribe(element, 'test.change.modify', event => history.push(event))
233
-
234
- element.foo = 1
235
- expect(history).toEqual([
236
- {
237
- target: element,
238
- type: 'test.change.modify',
239
- property: 'foo',
240
- newValue: 1
241
- }
242
- ])
243
- })
244
-
245
- it("should watch recursive modifications that don't change the schema", function () {
246
- const element = etro.watchPublic({
247
- publicExcludes: [],
248
- type: 'test'
249
- })
250
- element.foo = { bar: 0 } // intiialize (must be after watchPublic)
251
- const history = []
252
- etro.event.subscribe(element, 'test.change.modify', event => history.push(event))
253
-
254
- element.foo.bar = 1
255
- expect(history).toEqual([
256
- {
257
- target: element,
258
- type: 'test.change.modify',
259
- property: 'foo.bar',
260
- newValue: 1
261
- }
262
- ])
263
- })
264
-
265
- it('should watch recursive modifications that change the schema', function () {
266
- const element = etro.watchPublic({
267
- publicExcludes: [],
268
- type: 'test'
269
- })
270
- element.foo = {} // intiialize (must be after watchPublic)
271
- const history = []
272
- etro.event.subscribe(element, 'test.change.modify', event => history.push(event))
273
-
274
- element.foo.bar = 1
275
- expect(history).toEqual([
276
- {
277
- target: element,
278
- type: 'test.change.modify',
279
- property: 'foo.bar',
280
- newValue: 1
281
- }
282
- ])
283
- })
284
- })
285
- })