etro 0.8.5 → 0.9.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.
- package/.github/workflows/nodejs.yml +1 -1
- package/CHANGELOG.md +27 -0
- package/CONTRIBUTING.md +13 -26
- package/README.md +8 -15
- package/dist/effect/base.d.ts +5 -5
- package/dist/effect/visual.d.ts +11 -0
- package/dist/etro-cjs.js +84 -53
- package/dist/etro-iife.js +84 -53
- package/dist/layer/image.d.ts +2 -2
- package/dist/layer/text.d.ts +3 -3
- package/dist/layer/visual-source.d.ts +18 -3
- package/dist/layer/visual.d.ts +5 -5
- package/dist/movie.d.ts +13 -4
- package/dist/object.d.ts +5 -1
- package/dist/util.d.ts +2 -0
- package/eslint.conf.js +2 -0
- package/eslint.test-conf.js +1 -2
- package/karma.conf.js +17 -8
- package/package.json +19 -19
- package/scripts/gen-effect-samples.html +24 -0
- package/scripts/save-effect-samples.js +1 -1
- package/src/effect/base.ts +6 -6
- package/src/effect/stack.ts +2 -2
- package/src/effect/transform.ts +2 -2
- package/src/effect/visual.ts +16 -1
- package/src/layer/audio-source.ts +4 -1
- package/src/layer/base.ts +3 -2
- package/src/layer/image.ts +3 -3
- package/src/layer/text.ts +4 -4
- package/src/layer/visual-source.ts +27 -7
- package/src/layer/visual.ts +7 -7
- package/src/movie.ts +55 -37
- package/src/object.ts +5 -1
- package/src/util.ts +2 -0
- package/tsconfig.json +3 -1
- package/examples/application/readme-screenshot.html +0 -85
- package/examples/application/video-player.html +0 -130
- package/examples/application/webcam.html +0 -28
- package/examples/introduction/audio.html +0 -64
- package/examples/introduction/effects.html +0 -79
- package/examples/introduction/export.html +0 -83
- package/examples/introduction/functions.html +0 -37
- package/examples/introduction/hello-world1.html +0 -37
- package/examples/introduction/hello-world2.html +0 -32
- package/examples/introduction/keyframes.html +0 -79
- package/examples/introduction/media.html +0 -63
- package/examples/introduction/text.html +0 -31
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<title>Media in Etro</title>
|
|
5
|
-
<script src="../../dist/etro-iife.js"></script>
|
|
6
|
-
<style> img, video {display: none;} </style>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<img src="../assets/lake.jpg"/>
|
|
10
|
-
<video src="../assets/desert.mp4"></video>
|
|
11
|
-
<audio src="../assets/strings.wav"></audio>
|
|
12
|
-
<button>Start</button>
|
|
13
|
-
<script>
|
|
14
|
-
const button = document.querySelector('button')
|
|
15
|
-
button.addEventListener('click', () => {
|
|
16
|
-
button.disabled = true
|
|
17
|
-
const canvas = document.createElement('canvas')
|
|
18
|
-
canvas.width = 600
|
|
19
|
-
canvas.height = 400
|
|
20
|
-
document.body.appendChild(canvas)
|
|
21
|
-
|
|
22
|
-
initMovie(canvas)
|
|
23
|
-
})
|
|
24
|
-
|
|
25
|
-
const initMovie = canvas => {
|
|
26
|
-
const movie = new etro.Movie({ canvas })
|
|
27
|
-
const video = document.querySelector('video')
|
|
28
|
-
movie.width = video.videoWidth
|
|
29
|
-
movie.height = video.videoHeight
|
|
30
|
-
movie
|
|
31
|
-
.addLayer(new etro.layer.Image({
|
|
32
|
-
startTime: 0,
|
|
33
|
-
duration: 3,
|
|
34
|
-
source: document.querySelector('img'),
|
|
35
|
-
// crop @ (150, 150) extending (200, 200)
|
|
36
|
-
sourceX: 100,
|
|
37
|
-
sourceY: 100,
|
|
38
|
-
sourceWidth: 400,
|
|
39
|
-
sourceHeight: 400,
|
|
40
|
-
x: 100,
|
|
41
|
-
y: 100,
|
|
42
|
-
width: 400,
|
|
43
|
-
height: 400
|
|
44
|
-
}))
|
|
45
|
-
.addLayer(new etro.layer.Video({
|
|
46
|
-
source: video,
|
|
47
|
-
startTime: 3,
|
|
48
|
-
// trim video to only include 3 seconds starting 2 minutes into the video in the video
|
|
49
|
-
sourceStartTime: 5,
|
|
50
|
-
duration: 3
|
|
51
|
-
}))
|
|
52
|
-
.addLayer(new etro.layer.Audio({
|
|
53
|
-
startTime: 6,
|
|
54
|
-
source: document.querySelector('audio'),
|
|
55
|
-
sourceStartTime: 9, // start audio at 9s
|
|
56
|
-
duration: 3 // last 3s
|
|
57
|
-
// volume: 0.25 // 25% of default volume (same as setting volume attribute on audio element)
|
|
58
|
-
}))
|
|
59
|
-
.play()
|
|
60
|
-
}
|
|
61
|
-
</script>
|
|
62
|
-
</body>
|
|
63
|
-
</html>
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<title>Text in Etro</title>
|
|
5
|
-
<script src="../../dist/etro-iife.js"></script>
|
|
6
|
-
</head>
|
|
7
|
-
<body>
|
|
8
|
-
<script>
|
|
9
|
-
let movie
|
|
10
|
-
window.addEventListener('load', () => {
|
|
11
|
-
const canvas = document.createElement('canvas')
|
|
12
|
-
canvas.width = 600
|
|
13
|
-
canvas.height = 400
|
|
14
|
-
document.body.appendChild(canvas)
|
|
15
|
-
|
|
16
|
-
initMovie(canvas)
|
|
17
|
-
})
|
|
18
|
-
|
|
19
|
-
const initMovie = canvas => {
|
|
20
|
-
movie = new etro.Movie({ canvas })
|
|
21
|
-
movie.addLayer(new etro.layer.Text({
|
|
22
|
-
startTime: 0,
|
|
23
|
-
duration: 4,
|
|
24
|
-
text: 'Hello world',
|
|
25
|
-
font: '24px monospace',
|
|
26
|
-
color: 'blue'
|
|
27
|
-
})).play()
|
|
28
|
-
}
|
|
29
|
-
</script>
|
|
30
|
-
</body>
|
|
31
|
-
</html>
|