@revideo/player 0.2.1 → 0.2.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.
- package/dist/main.js +40 -79
- package/package.json +3 -3
package/dist/main.js
CHANGED
|
@@ -1,29 +1,15 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var e = (
|
|
4
|
-
import { Stage as
|
|
5
|
-
const
|
|
6
|
-
`,
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
></button>
|
|
14
|
-
<!-- New button to the right -->
|
|
15
|
-
<span class="current-time" part="current-time">0:00 / 0:00</span>
|
|
16
|
-
<div class="timeline-container">
|
|
17
|
-
<input
|
|
18
|
-
type="range"
|
|
19
|
-
class="timeline"
|
|
20
|
-
value="0"
|
|
21
|
-
min="0"
|
|
22
|
-
max="100"
|
|
23
|
-
step="1"
|
|
24
|
-
/>
|
|
25
|
-
</div>
|
|
26
|
-
</div>
|
|
1
|
+
var g = Object.defineProperty;
|
|
2
|
+
var p = (o, s, t) => s in o ? g(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
|
|
3
|
+
var e = (o, s, t) => (p(o, typeof s != "symbol" ? s + "" : s, t), t);
|
|
4
|
+
import { Stage as v, Player as b, Vector2 as m } from "@revideo/core";
|
|
5
|
+
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
|
+
`, I = `<div class="overlay" part="overlay">
|
|
7
|
+
<button
|
|
8
|
+
part="play-button"
|
|
9
|
+
title="Play / Pause"
|
|
10
|
+
class="button ready"
|
|
11
|
+
tabindex="0"
|
|
12
|
+
></button>
|
|
27
13
|
<div part="message" class="message error">
|
|
28
14
|
An error occurred while loading the animation.
|
|
29
15
|
</div>
|
|
@@ -34,10 +20,12 @@ const v = `.initial{display:none}.state-initial .initial{display:block}.loading{
|
|
|
34
20
|
stroke="#ffffff"
|
|
35
21
|
stroke-width="2"
|
|
36
22
|
fill="transparent"
|
|
37
|
-
|
|
23
|
+
>
|
|
24
|
+
<circle cx="12" cy="12" r="9" />
|
|
25
|
+
</svg>
|
|
38
26
|
</div>
|
|
39
|
-
`,
|
|
40
|
-
class
|
|
27
|
+
`, M = `<style>${f}</style>${I}`, c = "revideo-player";
|
|
28
|
+
class w extends HTMLElement {
|
|
41
29
|
constructor() {
|
|
42
30
|
super();
|
|
43
31
|
e(this, "root");
|
|
@@ -53,13 +41,7 @@ class x extends HTMLElement {
|
|
|
53
41
|
e(this, "finished", !1);
|
|
54
42
|
e(this, "playing", !1);
|
|
55
43
|
e(this, "connected", !1);
|
|
56
|
-
e(this, "stage", new
|
|
57
|
-
e(this, "timeline");
|
|
58
|
-
e(this, "handleTimelineChange", (t) => {
|
|
59
|
-
var s, o;
|
|
60
|
-
const a = t.target, i = parseFloat(a.value);
|
|
61
|
-
((s = this.player) == null ? void 0 : s.playback.duration) && ((o = this.player) == null || o.requestSeek(i));
|
|
62
|
-
});
|
|
44
|
+
e(this, "stage", new v());
|
|
63
45
|
e(this, "handleMouseMove", () => {
|
|
64
46
|
this.mouseMoveId && clearTimeout(this.mouseMoveId), this.hover && !this.playing && this.setPlaying(!0), this.mouseMoveId = window.setTimeout(() => {
|
|
65
47
|
this.mouseMoveId = null, this.updateClass();
|
|
@@ -69,10 +51,10 @@ class x extends HTMLElement {
|
|
|
69
51
|
this.hover && this.setPlaying(!1), this.mouseMoveId && (clearTimeout(this.mouseMoveId), this.mouseMoveId = null, this.updateClass());
|
|
70
52
|
});
|
|
71
53
|
e(this, "handleMouseDown", (t) => {
|
|
72
|
-
t.
|
|
54
|
+
t.preventDefault();
|
|
73
55
|
});
|
|
74
|
-
e(this, "handleClick", (
|
|
75
|
-
|
|
56
|
+
e(this, "handleClick", () => {
|
|
57
|
+
this.auto || (this.handleMouseMove(), this.setPlaying(!this.playing), this.button.animate(
|
|
76
58
|
[
|
|
77
59
|
{ scale: "0.9" },
|
|
78
60
|
{
|
|
@@ -84,29 +66,12 @@ class x extends HTMLElement {
|
|
|
84
66
|
));
|
|
85
67
|
});
|
|
86
68
|
e(this, "render", async () => {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
this.player.playback.previousScene
|
|
92
|
-
), this.timeline.setAttribute("min", "0"), this.timeline.setAttribute("step", "1"), this.timeline.setAttribute(
|
|
93
|
-
"max",
|
|
94
|
-
(t = this.player) == null ? void 0 : t.playback.duration.toString()
|
|
95
|
-
);
|
|
96
|
-
const a = this.player.status.time, i = this.player.status.framesToSeconds(
|
|
97
|
-
this.player.playback.duration
|
|
98
|
-
);
|
|
99
|
-
if (i) {
|
|
100
|
-
const n = this.player.status.secondsToFrames(a);
|
|
101
|
-
this.timeline.value = n.toString();
|
|
102
|
-
const s = `linear-gradient(to right, rgb(180, 180, 180) 0%, rgb(180, 180, 180) ${100 * n / this.player.status.secondsToFrames(i)}%, white ${100 * n / this.player.status.secondsToFrames(i)}%, white 100%)`;
|
|
103
|
-
this.timeline.style.background = s, this.timeline.style.setProperty("--webkit-track", s), this.timeline.style.setProperty("--moz-track", s), this.timeline.style.setProperty("--ms-track", s);
|
|
104
|
-
const o = this.formatTime(a), c = this.formatTime(i), l = this.root.querySelector(".current-time");
|
|
105
|
-
l && (l.textContent = `${o} / ${c}`);
|
|
106
|
-
}
|
|
107
|
-
}
|
|
69
|
+
this.player && await this.stage.render(
|
|
70
|
+
this.player.playback.currentScene,
|
|
71
|
+
this.player.playback.previousScene
|
|
72
|
+
);
|
|
108
73
|
});
|
|
109
|
-
this.root = this.attachShadow({ mode: "open" }), this.root.innerHTML =
|
|
74
|
+
this.root = this.attachShadow({ mode: "open" }), this.root.innerHTML = M, this.overlay = this.root.querySelector(".overlay"), this.button = this.root.querySelector(".button"), this.canvas = this.stage.finalBuffer, this.canvas.classList.add("canvas"), this.root.prepend(this.canvas), this.overlay.addEventListener("click", this.handleClick), this.overlay.addEventListener("mousemove", this.handleMouseMove), this.overlay.addEventListener("mouseleave", this.handleMouseLeave), this.button.addEventListener("mousedown", this.handleMouseDown), this.setState(
|
|
110
75
|
"initial"
|
|
111
76
|
/* Initial */
|
|
112
77
|
);
|
|
@@ -151,38 +116,38 @@ class x extends HTMLElement {
|
|
|
151
116
|
this.overlay.className = `overlay state-${this.state}`, this.canvas.className = `canvas state-${this.state}`, this.overlay.classList.toggle("playing", this.playing), this.overlay.classList.toggle("auto", this.auto), this.overlay.classList.toggle("hover", this.mouseMoveId !== null), this.connected && (this.mouseMoveId !== null || !this.playing ? this.dataset.overlay = "" : delete this.dataset.overlay);
|
|
152
117
|
}
|
|
153
118
|
async updateSource(t) {
|
|
154
|
-
var
|
|
119
|
+
var r, l, h, d;
|
|
155
120
|
this.setState(
|
|
156
121
|
"initial"
|
|
157
122
|
/* Initial */
|
|
158
|
-
), (
|
|
123
|
+
), (r = this.abortController) == null || r.abort(), this.abortController = new AbortController();
|
|
159
124
|
let a;
|
|
160
125
|
try {
|
|
161
|
-
const
|
|
126
|
+
const n = import(
|
|
162
127
|
/* webpackIgnore: true */
|
|
163
128
|
/* @vite-ignore */
|
|
164
129
|
t
|
|
165
|
-
),
|
|
166
|
-
await Promise.any([
|
|
130
|
+
), y = new Promise((u) => setTimeout(u, 200));
|
|
131
|
+
await Promise.any([y, n]), this.setState(
|
|
167
132
|
"loading"
|
|
168
133
|
/* Loading */
|
|
169
|
-
), a = (await
|
|
170
|
-
} catch (
|
|
171
|
-
console.error(
|
|
134
|
+
), a = (await n).default;
|
|
135
|
+
} catch (n) {
|
|
136
|
+
console.error(n), this.setState(
|
|
172
137
|
"error"
|
|
173
138
|
/* Error */
|
|
174
139
|
);
|
|
175
140
|
return;
|
|
176
141
|
}
|
|
177
142
|
this.defaultSettings = a.meta.getFullRenderingSettings();
|
|
178
|
-
const i = new
|
|
179
|
-
i.setVariables(this.variables), this.finished = !1, (
|
|
143
|
+
const i = new b(a);
|
|
144
|
+
i.setVariables(this.variables), this.finished = !1, (l = this.player) == null || l.onRender.unsubscribe(this.render), (h = this.player) == null || h.togglePlayback(!1), (d = this.player) == null || d.deactivate(), this.project = a, this.player = i, this.updateSettings(), this.player.onRender.subscribe(this.render), this.player.togglePlayback(this.playing), this.setState(
|
|
180
145
|
"ready"
|
|
181
146
|
/* Ready */
|
|
182
147
|
);
|
|
183
148
|
}
|
|
184
149
|
attributeChangedCallback(t, a, i) {
|
|
185
|
-
var
|
|
150
|
+
var r;
|
|
186
151
|
switch (t) {
|
|
187
152
|
case "auto":
|
|
188
153
|
this.setPlaying(this.playing);
|
|
@@ -196,7 +161,7 @@ class x extends HTMLElement {
|
|
|
196
161
|
this.updateSettings();
|
|
197
162
|
break;
|
|
198
163
|
case "variables":
|
|
199
|
-
(
|
|
164
|
+
(r = this.player) == null || r.setVariables(this.variables);
|
|
200
165
|
}
|
|
201
166
|
}
|
|
202
167
|
disconnectedCallback() {
|
|
@@ -210,14 +175,10 @@ class x extends HTMLElement {
|
|
|
210
175
|
updateSettings() {
|
|
211
176
|
const t = {
|
|
212
177
|
...this.defaultSettings,
|
|
213
|
-
size: new
|
|
178
|
+
size: new m(this.width, this.height),
|
|
214
179
|
resolutionScale: this.quality
|
|
215
180
|
};
|
|
216
181
|
this.stage.configure(t), this.player.configure(t);
|
|
217
182
|
}
|
|
218
|
-
formatTime(t) {
|
|
219
|
-
const a = Math.floor(t / 60), i = Math.floor(t % 60), n = a.toString().padStart(2, "0"), s = i.toString().padStart(2, "0");
|
|
220
|
-
return `${n}:${s}`;
|
|
221
|
-
}
|
|
222
183
|
}
|
|
223
|
-
customElements.get(
|
|
184
|
+
customElements.get(c) || customElements.define(c, w);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revideo/player",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
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.2.
|
|
25
|
+
"@revideo/core": "^0.2.2",
|
|
26
26
|
"sass": "^1.58.0",
|
|
27
27
|
"terser": "^5.16.1"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "aed6717a2c1364b37c99315a099bab56d8017e99"
|
|
30
30
|
}
|