@revideo/player 0.1.10 → 0.2.1-alpha.891
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/dist/main.js +147 -84
- package/package.json +3 -3
package/dist/main.js
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
var g = Object.defineProperty;
|
|
2
|
-
var p = (o, s, t) =>
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
var p = (o, s, t) =>
|
|
3
|
+
s in o
|
|
4
|
+
? g(o, s, {enumerable: !0, configurable: !0, writable: !0, value: t})
|
|
5
|
+
: (o[s] = t);
|
|
6
|
+
var e = (o, s, t) => (p(o, typeof s != 'symbol' ? s + '' : s, t), t);
|
|
7
|
+
import {Player as b, Vector2 as m, Stage as v} from '@revideo/core';
|
|
5
8
|
const f = `.initial{display:none}.state-initial .initial{display:block}.loading{display:none}.state-loading .loading{display:block}.ready{display:none}.state-ready .ready{display:block}.error{display:none}.state-error .error{display:block}:host{position:relative;display:block}.overlay{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;opacity:0;background-color:#0000008a;transition:opacity .1s}.overlay.state-ready:not(.auto){cursor:pointer}.overlay.playing:not(.hover):hover{cursor:none}.overlay.hover,.overlay.state-ready:focus-within,.overlay.state-ready:not(.playing){opacity:1}.overlay.hover .button,.overlay.state-ready:focus-within .button,.overlay.state-ready:not(.playing) .button{scale:1;transition:scale .1s ease-out}.overlay.state-loading,.overlay.state-error{opacity:1;transition:opacity 1s}.overlay.state-ready.auto{opacity:0}.button{width:50%;max-width:96px;aspect-ratio:1;scale:.5;transition:scale .1s ease-in,opacity .1s;background-color:transparent;border:none;background-size:100% 100%;background-repeat:no-repeat;opacity:.54;cursor:inherit;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE0LjV2LTlsNiA0LjUtNiA0LjV6Ii8+PC9zdmc+)}.playing .button{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0cHgiIGZpbGw9IiNmZmZmZmYiPjxnPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48Zy8+PHBhdGggZD0iTTEyLDJDNi40OCwyLDIsNi40OCwyLDEyczQuNDgsMTAsMTAsMTBzMTAtNC40OCwxMC0xMFMxNy41MiwyLDEyLDJ6IE0xMSwxNkg5VjhoMlYxNnogTTE1LDE2aC0yVjhoMlYxNnoiLz48L2c+PC9zdmc+)}.button:focus,.overlay:hover .button{opacity:.87}.auto .button{display:none}.canvas{width:100%;display:block;opacity:0;transition:opacity .1s}.canvas.state-ready{opacity:1}.message{font-family:JetBrains Mono,sans-serif;text-align:center;font-size:20px;padding:8px 16px;margin:16px;border-radius:4px;color:#fff9;background-color:#000000de}.loader{width:50%;max-width:96px;display:none;rotate:-90deg;animation:stroke 2s cubic-bezier(.5,0,.5,1) infinite,rotate 2s linear infinite}@keyframes stroke{0%{stroke-dasharray:5.6548667765px 50.8938009883px;stroke-dashoffset:2.8274333882px}50%{stroke-dasharray:50.8938009883px 5.6548667765px;stroke-dashoffset:-2.8274333882px}to{stroke-dasharray:5.6548667765px 50.8938009883px;stroke-dashoffset:-53.7212343766px}}@keyframes rotate{0%{rotate:-110deg}to{rotate:250deg}}
|
|
6
|
-
`,
|
|
9
|
+
`,
|
|
10
|
+
I = `<div class="overlay" part="overlay">
|
|
7
11
|
<button
|
|
8
12
|
part="play-button"
|
|
9
13
|
title="Play / Pause"
|
|
@@ -24,159 +28,218 @@ const f = `.initial{display:none}.state-initial .initial{display:block}.loading{
|
|
|
24
28
|
<circle cx="12" cy="12" r="9" />
|
|
25
29
|
</svg>
|
|
26
30
|
</div>
|
|
27
|
-
`,
|
|
31
|
+
`,
|
|
32
|
+
M = `<style>${f}</style>${I}`,
|
|
33
|
+
c = 'revideo-player';
|
|
28
34
|
class w extends HTMLElement {
|
|
29
35
|
constructor() {
|
|
30
36
|
super();
|
|
31
|
-
e(this,
|
|
32
|
-
e(this,
|
|
33
|
-
e(this,
|
|
34
|
-
e(this,
|
|
35
|
-
e(this,
|
|
36
|
-
e(this,
|
|
37
|
-
e(this,
|
|
38
|
-
e(this,
|
|
39
|
-
e(this,
|
|
40
|
-
e(this,
|
|
41
|
-
e(this,
|
|
42
|
-
e(this,
|
|
43
|
-
e(this,
|
|
44
|
-
e(this,
|
|
45
|
-
e(this,
|
|
46
|
-
this.mouseMoveId && clearTimeout(this.mouseMoveId),
|
|
47
|
-
this.
|
|
48
|
-
|
|
37
|
+
e(this, 'root');
|
|
38
|
+
e(this, 'canvas');
|
|
39
|
+
e(this, 'overlay');
|
|
40
|
+
e(this, 'button');
|
|
41
|
+
e(this, 'state', 'initial');
|
|
42
|
+
e(this, 'project', null);
|
|
43
|
+
e(this, 'player', null);
|
|
44
|
+
e(this, 'defaultSettings');
|
|
45
|
+
e(this, 'abortController', null);
|
|
46
|
+
e(this, 'mouseMoveId', null);
|
|
47
|
+
e(this, 'finished', !1);
|
|
48
|
+
e(this, 'playing', !1);
|
|
49
|
+
e(this, 'connected', !1);
|
|
50
|
+
e(this, 'stage', new v());
|
|
51
|
+
e(this, 'handleMouseMove', () => {
|
|
52
|
+
this.mouseMoveId && clearTimeout(this.mouseMoveId),
|
|
53
|
+
this.hover && !this.playing && this.setPlaying(!0),
|
|
54
|
+
(this.mouseMoveId = window.setTimeout(() => {
|
|
55
|
+
(this.mouseMoveId = null), this.updateClass();
|
|
56
|
+
}, 2e3)),
|
|
57
|
+
this.updateClass();
|
|
49
58
|
});
|
|
50
|
-
e(this,
|
|
51
|
-
this.hover && this.setPlaying(!1),
|
|
59
|
+
e(this, 'handleMouseLeave', () => {
|
|
60
|
+
this.hover && this.setPlaying(!1),
|
|
61
|
+
this.mouseMoveId &&
|
|
62
|
+
(clearTimeout(this.mouseMoveId),
|
|
63
|
+
(this.mouseMoveId = null),
|
|
64
|
+
this.updateClass());
|
|
52
65
|
});
|
|
53
|
-
e(this,
|
|
66
|
+
e(this, 'handleMouseDown', t => {
|
|
54
67
|
t.preventDefault();
|
|
55
68
|
});
|
|
56
|
-
e(this,
|
|
57
|
-
this.auto ||
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
69
|
+
e(this, 'handleClick', () => {
|
|
70
|
+
this.auto ||
|
|
71
|
+
(this.handleMouseMove(),
|
|
72
|
+
this.setPlaying(!this.playing),
|
|
73
|
+
this.button.animate(
|
|
74
|
+
[
|
|
75
|
+
{scale: '0.9'},
|
|
76
|
+
{
|
|
77
|
+
scale: '1',
|
|
78
|
+
easing: 'ease-out',
|
|
79
|
+
},
|
|
80
|
+
],
|
|
81
|
+
{duration: 200},
|
|
82
|
+
));
|
|
67
83
|
});
|
|
68
|
-
e(this,
|
|
69
|
-
this.player &&
|
|
70
|
-
this.
|
|
71
|
-
|
|
72
|
-
|
|
84
|
+
e(this, 'render', async () => {
|
|
85
|
+
this.player &&
|
|
86
|
+
(await this.stage.render(
|
|
87
|
+
this.player.playback.currentScene,
|
|
88
|
+
this.player.playback.previousScene,
|
|
89
|
+
));
|
|
73
90
|
});
|
|
74
|
-
this.root = this.attachShadow({
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
91
|
+
(this.root = this.attachShadow({mode: 'open'})),
|
|
92
|
+
(this.root.innerHTML = M),
|
|
93
|
+
(this.overlay = this.root.querySelector('.overlay')),
|
|
94
|
+
(this.button = this.root.querySelector('.button')),
|
|
95
|
+
(this.canvas = this.stage.finalBuffer),
|
|
96
|
+
this.canvas.classList.add('canvas'),
|
|
97
|
+
this.root.prepend(this.canvas),
|
|
98
|
+
this.overlay.addEventListener('click', this.handleClick),
|
|
99
|
+
this.overlay.addEventListener('mousemove', this.handleMouseMove),
|
|
100
|
+
this.overlay.addEventListener('mouseleave', this.handleMouseLeave),
|
|
101
|
+
this.button.addEventListener('mousedown', this.handleMouseDown),
|
|
102
|
+
this.setState(
|
|
103
|
+
'initial',
|
|
104
|
+
/* Initial */
|
|
105
|
+
);
|
|
78
106
|
}
|
|
79
107
|
static get observedAttributes() {
|
|
80
|
-
return [
|
|
108
|
+
return ['src', 'quality', 'width', 'height', 'auto', 'variables'];
|
|
81
109
|
}
|
|
82
110
|
get auto() {
|
|
83
|
-
return !!this.getAttribute(
|
|
111
|
+
return !!this.getAttribute('auto');
|
|
84
112
|
}
|
|
85
113
|
get hover() {
|
|
86
|
-
return this.getAttribute(
|
|
114
|
+
return this.getAttribute('auto') === 'hover';
|
|
87
115
|
}
|
|
88
116
|
get quality() {
|
|
89
|
-
const t = this.getAttribute(
|
|
117
|
+
const t = this.getAttribute('quality');
|
|
90
118
|
return t ? parseFloat(t) : this.defaultSettings.resolutionScale;
|
|
91
119
|
}
|
|
92
120
|
get width() {
|
|
93
|
-
const t = this.getAttribute(
|
|
121
|
+
const t = this.getAttribute('width');
|
|
94
122
|
return t ? parseFloat(t) : this.defaultSettings.size.width;
|
|
95
123
|
}
|
|
96
124
|
get height() {
|
|
97
|
-
const t = this.getAttribute(
|
|
125
|
+
const t = this.getAttribute('height');
|
|
98
126
|
return t ? parseFloat(t) : this.defaultSettings.size.height;
|
|
99
127
|
}
|
|
100
128
|
get variables() {
|
|
101
129
|
try {
|
|
102
|
-
const t = this.getAttribute(
|
|
130
|
+
const t = this.getAttribute('variables');
|
|
103
131
|
return t ? JSON.parse(t) : {};
|
|
104
132
|
} catch {
|
|
105
|
-
return
|
|
133
|
+
return (
|
|
134
|
+
this.project.logger.warn('Project variables could not be parsed.'), {}
|
|
135
|
+
);
|
|
106
136
|
}
|
|
107
137
|
}
|
|
108
138
|
setState(t) {
|
|
109
|
-
this.state = t, this.setPlaying(this.playing);
|
|
139
|
+
(this.state = t), this.setPlaying(this.playing);
|
|
110
140
|
}
|
|
111
141
|
setPlaying(t) {
|
|
112
142
|
var a, i;
|
|
113
|
-
this.state ===
|
|
143
|
+
this.state === 'ready' && (t || (this.auto && !this.hover))
|
|
144
|
+
? ((a = this.player) == null || a.togglePlayback(!0), (this.playing = !0))
|
|
145
|
+
: ((i = this.player) == null || i.togglePlayback(!1),
|
|
146
|
+
(this.playing = !1)),
|
|
147
|
+
this.updateClass();
|
|
114
148
|
}
|
|
115
149
|
updateClass() {
|
|
116
|
-
this.overlay.className = `overlay state-${this.state}
|
|
150
|
+
(this.overlay.className = `overlay state-${this.state}`),
|
|
151
|
+
(this.canvas.className = `canvas state-${this.state}`),
|
|
152
|
+
this.overlay.classList.toggle('playing', this.playing),
|
|
153
|
+
this.overlay.classList.toggle('auto', this.auto),
|
|
154
|
+
this.overlay.classList.toggle('hover', this.mouseMoveId !== null),
|
|
155
|
+
this.player,
|
|
156
|
+
this.connected &&
|
|
157
|
+
(this.mouseMoveId !== null || !this.playing
|
|
158
|
+
? (this.dataset.overlay = '')
|
|
159
|
+
: delete this.dataset.overlay);
|
|
117
160
|
}
|
|
118
161
|
async updateSource(t) {
|
|
119
162
|
var r, l, h, d;
|
|
120
163
|
this.setState(
|
|
121
|
-
|
|
164
|
+
'initial',
|
|
122
165
|
/* Initial */
|
|
123
|
-
),
|
|
166
|
+
),
|
|
167
|
+
(r = this.abortController) == null || r.abort(),
|
|
168
|
+
(this.abortController = new AbortController());
|
|
124
169
|
let a;
|
|
125
170
|
try {
|
|
126
171
|
const n = import(
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
172
|
+
/* webpackIgnore: true */
|
|
173
|
+
/* @vite-ignore */
|
|
174
|
+
t
|
|
175
|
+
),
|
|
176
|
+
y = new Promise(u => setTimeout(u, 200));
|
|
177
|
+
await Promise.any([y, n]),
|
|
178
|
+
this.setState(
|
|
179
|
+
'loading',
|
|
180
|
+
/* Loading */
|
|
181
|
+
),
|
|
182
|
+
(a = (await n).default);
|
|
135
183
|
} catch (n) {
|
|
136
|
-
console.error(n),
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
184
|
+
console.error(n),
|
|
185
|
+
this.setState(
|
|
186
|
+
'error',
|
|
187
|
+
/* Error */
|
|
188
|
+
);
|
|
140
189
|
return;
|
|
141
190
|
}
|
|
142
191
|
this.defaultSettings = a.meta.getFullRenderingSettings();
|
|
143
192
|
const i = new b(a);
|
|
144
|
-
i.setVariables(this.variables),
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
193
|
+
i.setVariables(this.variables),
|
|
194
|
+
(this.finished = !1),
|
|
195
|
+
(l = this.player) == null || l.onRender.unsubscribe(this.render),
|
|
196
|
+
(h = this.player) == null || h.togglePlayback(!1),
|
|
197
|
+
(d = this.player) == null || d.deactivate(),
|
|
198
|
+
(this.project = a),
|
|
199
|
+
(this.player = i),
|
|
200
|
+
this.updateSettings(),
|
|
201
|
+
this.player.onRender.subscribe(this.render),
|
|
202
|
+
this.player.togglePlayback(this.playing),
|
|
203
|
+
this.setState(
|
|
204
|
+
'ready',
|
|
205
|
+
/* Ready */
|
|
206
|
+
);
|
|
148
207
|
}
|
|
149
208
|
attributeChangedCallback(t, a, i) {
|
|
150
209
|
var r;
|
|
151
210
|
switch (t) {
|
|
152
|
-
case
|
|
211
|
+
case 'auto':
|
|
153
212
|
this.setPlaying(this.playing);
|
|
154
213
|
break;
|
|
155
|
-
case
|
|
214
|
+
case 'src':
|
|
156
215
|
this.updateSource(i);
|
|
157
216
|
break;
|
|
158
|
-
case
|
|
159
|
-
case
|
|
160
|
-
case
|
|
217
|
+
case 'quality':
|
|
218
|
+
case 'width':
|
|
219
|
+
case 'height':
|
|
161
220
|
this.updateSettings();
|
|
162
221
|
break;
|
|
163
|
-
case
|
|
222
|
+
case 'variables':
|
|
164
223
|
(r = this.player) == null || r.setVariables(this.variables);
|
|
165
224
|
}
|
|
166
225
|
}
|
|
167
226
|
disconnectedCallback() {
|
|
168
227
|
var t, a;
|
|
169
|
-
this.connected = !1
|
|
228
|
+
(this.connected = !1),
|
|
229
|
+
(t = this.player) == null || t.deactivate(),
|
|
230
|
+
(a = this.player) == null || a.onRender.unsubscribe(this.render);
|
|
170
231
|
}
|
|
171
232
|
connectedCallback() {
|
|
172
233
|
var t, a;
|
|
173
|
-
this.connected = !0
|
|
234
|
+
(this.connected = !0),
|
|
235
|
+
(t = this.player) == null || t.activate(),
|
|
236
|
+
(a = this.player) == null || a.onRender.subscribe(this.render);
|
|
174
237
|
}
|
|
175
238
|
updateSettings() {
|
|
176
239
|
const t = {
|
|
177
240
|
...this.defaultSettings,
|
|
178
241
|
size: new m(this.width, this.height),
|
|
179
|
-
resolutionScale: this.quality
|
|
242
|
+
resolutionScale: this.quality,
|
|
180
243
|
};
|
|
181
244
|
this.stage.configure(t), this.player.configure(t);
|
|
182
245
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revideo/player",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.2.1-alpha.891+b6a0386",
|
|
4
4
|
"description": "A custom element for displaying animations made with revideo",
|
|
5
5
|
"main": "dist/main.js",
|
|
6
6
|
"types": "types/main.d.ts",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"types"
|
|
23
23
|
],
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@revideo/core": "^0.
|
|
25
|
+
"@revideo/core": "^0.2.0",
|
|
26
26
|
"sass": "^1.58.0",
|
|
27
27
|
"terser": "^5.16.1"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "b6a03863cd5ee2f9bde38d1b199e8b7a03ab7bdc"
|
|
30
30
|
}
|