@revideo/player 0.10.5-alpha.1129 → 0.10.5-alpha.1137
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 +157 -223
- package/package.json +5 -5
package/dist/main.js
CHANGED
|
@@ -1,223 +1,157 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
), (n = this.abortController) == null || n.abort(), this.abortController = new AbortController();
|
|
159
|
-
let a;
|
|
160
|
-
try {
|
|
161
|
-
const l = import(
|
|
162
|
-
/* webpackIgnore: true */
|
|
163
|
-
/* @vite-ignore */
|
|
164
|
-
t
|
|
165
|
-
), u = new Promise((g) => setTimeout(g, 200));
|
|
166
|
-
await Promise.any([u, l]), this.setState(
|
|
167
|
-
"loading"
|
|
168
|
-
/* Loading */
|
|
169
|
-
), a = (await l).default;
|
|
170
|
-
} catch (l) {
|
|
171
|
-
console.error(l), this.setState(
|
|
172
|
-
"error"
|
|
173
|
-
/* Error */
|
|
174
|
-
);
|
|
175
|
-
return;
|
|
176
|
-
}
|
|
177
|
-
this.defaultSettings = m(a);
|
|
178
|
-
const i = new b(a);
|
|
179
|
-
i.setVariables(this.variables), this.finished = !1, (s = this.player) == null || s.onRender.unsubscribe(this.render), (o = this.player) == null || o.togglePlayback(!1), (c = this.player) == null || c.deactivate(), this.project = a, this.player = i, this.updateSettings(), this.player.onRender.subscribe(this.render), this.player.togglePlayback(this.playing), this.setState(
|
|
180
|
-
"ready"
|
|
181
|
-
/* Ready */
|
|
182
|
-
);
|
|
183
|
-
}
|
|
184
|
-
attributeChangedCallback(t, a, i) {
|
|
185
|
-
var n, s;
|
|
186
|
-
switch (t) {
|
|
187
|
-
case "auto":
|
|
188
|
-
this.setPlaying(this.playing);
|
|
189
|
-
break;
|
|
190
|
-
case "src":
|
|
191
|
-
this.updateSource(i);
|
|
192
|
-
break;
|
|
193
|
-
case "quality":
|
|
194
|
-
case "width":
|
|
195
|
-
case "height":
|
|
196
|
-
this.updateSettings();
|
|
197
|
-
break;
|
|
198
|
-
case "variables":
|
|
199
|
-
(n = this.player) == null || n.setVariables(this.variables), (s = this.player) == null || s.requestSeek(this.player.playback.frame);
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
disconnectedCallback() {
|
|
203
|
-
var t, a;
|
|
204
|
-
this.connected = !1, (t = this.player) == null || t.deactivate(), (a = this.player) == null || a.onRender.unsubscribe(this.render);
|
|
205
|
-
}
|
|
206
|
-
connectedCallback() {
|
|
207
|
-
var t, a;
|
|
208
|
-
this.connected = !0, (t = this.player) == null || t.activate(), (a = this.player) == null || a.onRender.subscribe(this.render);
|
|
209
|
-
}
|
|
210
|
-
updateSettings() {
|
|
211
|
-
const t = {
|
|
212
|
-
...this.defaultSettings,
|
|
213
|
-
size: new v(this.width, this.height),
|
|
214
|
-
resolutionScale: this.quality
|
|
215
|
-
};
|
|
216
|
-
this.stage.configure(t), this.player.configure(t);
|
|
217
|
-
}
|
|
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
|
-
}
|
|
223
|
-
customElements.get(d) || customElements.define(d, w);
|
|
1
|
+
import { Player as e, Stage as t, Vector2 as n, getFullPreviewSettings as r } from "@revideo/core";
|
|
2
|
+
//#endregion
|
|
3
|
+
//#region src/main.ts
|
|
4
|
+
var i = "<style>.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{display:block;position:relative}.controls{background:linear-gradient(#0000 0%,#0000004d 100%);justify-content:space-between;align-items:center;height:10%;display:flex;position:absolute;bottom:0%;left:0;right:0}.timeline-container{z-index:5;width:calc(100% - 32px);height:100%;position:absolute;top:0%}.timeline{appearance:none;cursor:pointer;z-index:10;background:0 0/100% 40px no-repeat;width:100%;margin-left:16px;margin-right:16px;position:absolute;bottom:10px}.timeline::-webkit-slider-runnable-track{background:#fff;background:var(--webkit-track,white);width:100%;height:5px}.timeline:hover::-webkit-slider-runnable-track{background:#fff;background:var(--webkit-track,white);width:100%;height:5px}.timeline::-moz-range-track{background:#fff;background:var(--moz-track,white);width:100%;height:5px}.timeline::-ms-track{background:#fff;background:var(--ms-track,#c9c7c7);width:100%;height:4px}.timeline::-webkit-slider-thumb{appearance:none;cursor:pointer;opacity:0;background:#fff;border-radius:50%;width:16px;height:16px;margin-top:-6px;transition:opacity .2s}.timeline::-moz-range-thumb{appearance:none;cursor:pointer;opacity:0;background:#fff;border-radius:50%;width:16px;height:16px;margin-top:-6px;transition:opacity .2s}.timeline::-ms-thumb{appearance:none;cursor:pointer;opacity:0;background:#fff;border-radius:50%;width:16px;height:16px;margin-top:-6px;transition:opacity .2s}.timeline:hover::-webkit-slider-thumb{opacity:1;background:#fff}.timeline:hover::-moz-range-thumb{opacity:1;background:#fff}.timeline:hover::-ms-thumb{opacity:1;background:#fff}.overlay{opacity:0;z-index:0;justify-content:center;align-items:center;transition:opacity .1s;display:flex;position:absolute;inset:0}.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.state-loading,.overlay.state-error{opacity:1;transition:opacity 1s}.overlay.state-ready.auto{opacity:0}.button{width:16px;height:14px;cursor:inherit;background-color:#0000;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMSAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMS4wMDE0VjExLjM2MTRDMCAxMi4xNTE0IDAuODcgMTIuNjMxNCAxLjU0IDEyLjIwMTRMOS42OCA3LjAyMTRDMTAuMyA2LjYzMTQgMTAuMyA1LjczMTQgOS42OCA1LjMzMTRMMS41NCAwLjE2MTQwNUMwLjg3IC0wLjI2ODU5NiAwIDAuMjExNDA1IDAgMS4wMDE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);background-repeat:no-repeat;background-size:100% 100%;border:none;transition:scale .1s ease-in,opacity .1s;position:absolute;bottom:25px;left:14px}.playing .play-button{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxMiAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMEMxLjQ2OTU3IDAgMC45NjA4NTkgMC4yMTA3MTQgMC41ODU3ODYgMC41ODU3ODZDMC4yMTA3MTQgMC45NjA4NTkgMCAxLjQ2OTU3IDAgMlYxMkMwIDEyLjUzMDQgMC4yMTA3MTQgMTMuMDM5MSAwLjU4NTc4NiAxMy40MTQyQzAuOTYwODU5IDEzLjc4OTMgMS40Njk1NyAxNCAyIDE0QzIuNTMwNDMgMTQgMy4wMzkxNCAxMy43ODkzIDMuNDE0MjEgMTMuNDE0MkMzLjc4OTI5IDEzLjAzOTEgNCAxMi41MzA0IDQgMTJWMkM0IDEuNDY5NTcgMy43ODkyOSAwLjk2MDg1OSAzLjQxNDIxIDAuNTg1Nzg2QzMuMDM5MTQgMC4yMTA3MTQgMi41MzA0MyAwIDIgMFpNMTAgMEM5LjQ2OTU3IDAgOC45NjA4NiAwLjIxMDcxNCA4LjU4NTc5IDAuNTg1Nzg2QzguMjEwNzEgMC45NjA4NTkgOCAxLjQ2OTU3IDggMlYxMkM4IDEyLjUzMDQgOC4yMTA3MSAxMy4wMzkxIDguNTg1NzkgMTMuNDE0MkM4Ljk2MDg2IDEzLjc4OTMgOS40Njk1NyAxNCAxMCAxNEMxMC41MzA0IDE0IDExLjAzOTEgMTMuNzg5MyAxMS40MTQyIDEzLjQxNDJDMTEuNzg5MyAxMy4wMzkxIDEyIDEyLjUzMDQgMTIgMTJWMkMxMiAxLjQ2OTU3IDExLjc4OTMgMC45NjA4NTkgMTEuNDE0MiAwLjU4NTc4NkMxMS4wMzkxIDAuMjEwNzE0IDEwLjUzMDQgMCAxMCAwWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==)}.auto .play-button{display:none}.current-time{color:#fff;font-family:Arial,sans-serif;font-size:14px;line-height:14px;position:absolute;bottom:25px;left:44px}.canvas{opacity:0;width:100%;transition:opacity .1s;display:block}.canvas.state-ready{opacity:1}.message{text-align:center;color:#fff9;background-color:#000000de;border-radius:4px;margin:16px;padding:8px 16px;font-family:JetBrains Mono,sans-serif;font-size:20px}.loader{width:50%;max-width:96px;animation:2s cubic-bezier(.5,0,.5,1) infinite stroke,2s linear infinite rotate;display:none;rotate:-90deg}@keyframes stroke{0%{stroke-dasharray:5.65487 50.8938;stroke-dashoffset:2.82743px}50%{stroke-dasharray:50.8938 5.65487;stroke-dashoffset:-2.82743px}to{stroke-dasharray:5.65487 50.8938;stroke-dashoffset:-53.7212px}}@keyframes rotate{0%{rotate:-110deg}to{rotate:250deg}}</style><div class=\"overlay\" part=\"overlay\">\n <div class=\"controls\">\n <button\n part=\"play-button\"\n title=\"Play / Pause\"\n class=\"button play-button ready\"\n tabindex=\"0\"\n ></button>\n <!-- New button to the right -->\n <span class=\"current-time\" part=\"current-time\">0:00 / 0:00</span>\n <div class=\"timeline-container\">\n <input\n type=\"range\"\n class=\"timeline\"\n value=\"0\"\n min=\"0\"\n max=\"100\"\n step=\"1\"\n />\n </div>\n </div>\n <div part=\"message\" class=\"message error\">\n An error occurred while loading the animation.\n </div>\n <svg\n part=\"loader\"\n class=\"loader loading\"\n viewBox=\"0 0 24 24\"\n stroke=\"#ffffff\"\n stroke-width=\"2\"\n fill=\"transparent\"\n ></svg>\n</div>\n", a = "revideo-player", o = class extends HTMLElement {
|
|
5
|
+
static get observedAttributes() {
|
|
6
|
+
return [
|
|
7
|
+
"src",
|
|
8
|
+
"quality",
|
|
9
|
+
"width",
|
|
10
|
+
"height",
|
|
11
|
+
"auto",
|
|
12
|
+
"variables"
|
|
13
|
+
];
|
|
14
|
+
}
|
|
15
|
+
get auto() {
|
|
16
|
+
return !!this.getAttribute("auto");
|
|
17
|
+
}
|
|
18
|
+
get hover() {
|
|
19
|
+
return this.getAttribute("auto") === "hover";
|
|
20
|
+
}
|
|
21
|
+
get quality() {
|
|
22
|
+
let e = this.getAttribute("quality");
|
|
23
|
+
return e ? parseFloat(e) : this.defaultSettings.resolutionScale;
|
|
24
|
+
}
|
|
25
|
+
get width() {
|
|
26
|
+
let e = this.getAttribute("width");
|
|
27
|
+
return e ? parseFloat(e) : this.defaultSettings.size.width;
|
|
28
|
+
}
|
|
29
|
+
get height() {
|
|
30
|
+
let e = this.getAttribute("height");
|
|
31
|
+
return e ? parseFloat(e) : this.defaultSettings.size.height;
|
|
32
|
+
}
|
|
33
|
+
get variables() {
|
|
34
|
+
try {
|
|
35
|
+
let e = this.getAttribute("variables");
|
|
36
|
+
return e ? JSON.parse(e) : {};
|
|
37
|
+
} catch {
|
|
38
|
+
return this.project.logger.warn("Project variables could not be parsed."), {};
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
root;
|
|
42
|
+
canvas;
|
|
43
|
+
overlay;
|
|
44
|
+
button;
|
|
45
|
+
state = "initial";
|
|
46
|
+
project = null;
|
|
47
|
+
player = null;
|
|
48
|
+
defaultSettings;
|
|
49
|
+
abortController = null;
|
|
50
|
+
mouseMoveId = null;
|
|
51
|
+
finished = !1;
|
|
52
|
+
playing = !1;
|
|
53
|
+
connected = !1;
|
|
54
|
+
stage = new t();
|
|
55
|
+
timeline;
|
|
56
|
+
constructor() {
|
|
57
|
+
super(), this.root = this.attachShadow({ mode: "open" }), this.root.innerHTML = i, 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.timeline = this.root.querySelector(".timeline"), this.timeline.addEventListener("input", this.handleTimelineChange), this.timeline.addEventListener("change", this.handleTimelineChange), this.button.addEventListener("click", this.handleClick), this.button.addEventListener("mousedown", this.handleMouseDown), this.overlay.addEventListener("click", this.handleClick), this.overlay.addEventListener("mousemove", this.handleMouseMove), this.overlay.addEventListener("mouseleave", this.handleMouseLeave), this.overlay.addEventListener("mousedown", this.handleMouseDown), this.setState("initial");
|
|
58
|
+
}
|
|
59
|
+
handleTimelineChange = (e) => {
|
|
60
|
+
let t = e.target, n = parseFloat(t.value);
|
|
61
|
+
this.player?.playback.duration && this.player?.requestSeek(n);
|
|
62
|
+
};
|
|
63
|
+
handleMouseMove = () => {
|
|
64
|
+
this.mouseMoveId && clearTimeout(this.mouseMoveId), this.hover && !this.playing && this.setPlaying(!0), this.mouseMoveId = window.setTimeout(() => {
|
|
65
|
+
this.mouseMoveId = null, this.updateClass();
|
|
66
|
+
}, 2e3), this.updateClass();
|
|
67
|
+
};
|
|
68
|
+
handleMouseLeave = () => {
|
|
69
|
+
this.hover && this.setPlaying(!1), this.mouseMoveId && (clearTimeout(this.mouseMoveId), this.mouseMoveId = null, this.updateClass());
|
|
70
|
+
};
|
|
71
|
+
handleMouseDown = (e) => {
|
|
72
|
+
e.target.closest(".timeline") || e.preventDefault();
|
|
73
|
+
};
|
|
74
|
+
handleClick = (e) => {
|
|
75
|
+
e.target.closest(".timeline") || this.auto || (this.handleMouseMove(), this.setPlaying(!this.playing), this.button.animate([{ scale: "0.9" }, {
|
|
76
|
+
scale: "1",
|
|
77
|
+
easing: "ease-out"
|
|
78
|
+
}], { duration: 200 }));
|
|
79
|
+
};
|
|
80
|
+
setState(e) {
|
|
81
|
+
this.state = e, this.setPlaying(this.playing);
|
|
82
|
+
}
|
|
83
|
+
setPlaying(e) {
|
|
84
|
+
this.state === "ready" && (e || this.auto && !this.hover) ? (this.player?.togglePlayback(!0), this.playing = !0) : (this.player?.togglePlayback(!1), this.playing = !1), this.updateClass();
|
|
85
|
+
}
|
|
86
|
+
updateClass() {
|
|
87
|
+
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);
|
|
88
|
+
}
|
|
89
|
+
async updateSource(t) {
|
|
90
|
+
this.setState("initial"), this.abortController?.abort(), this.abortController = new AbortController();
|
|
91
|
+
let n;
|
|
92
|
+
try {
|
|
93
|
+
let e = import(
|
|
94
|
+
/* webpackIgnore: true */
|
|
95
|
+
/* @vite-ignore */
|
|
96
|
+
t
|
|
97
|
+
), r = new Promise((e) => setTimeout(e, 200));
|
|
98
|
+
await Promise.any([r, e]), this.setState("loading"), n = (await e).default;
|
|
99
|
+
} catch (e) {
|
|
100
|
+
console.error(e), this.setState("error");
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
this.defaultSettings = r(n);
|
|
104
|
+
let i = new e(n);
|
|
105
|
+
i.setVariables(this.variables), this.finished = !1, this.player?.onRender.unsubscribe(this.render), this.player?.togglePlayback(!1), this.player?.deactivate(), this.project = n, this.player = i, this.updateSettings(), this.player.onRender.subscribe(this.render), this.player.togglePlayback(this.playing), this.setState("ready");
|
|
106
|
+
}
|
|
107
|
+
attributeChangedCallback(e, t, n) {
|
|
108
|
+
switch (e) {
|
|
109
|
+
case "auto":
|
|
110
|
+
this.setPlaying(this.playing);
|
|
111
|
+
break;
|
|
112
|
+
case "src":
|
|
113
|
+
this.updateSource(n);
|
|
114
|
+
break;
|
|
115
|
+
case "quality":
|
|
116
|
+
case "width":
|
|
117
|
+
case "height":
|
|
118
|
+
this.updateSettings();
|
|
119
|
+
break;
|
|
120
|
+
case "variables": this.player?.setVariables(this.variables), this.player?.requestSeek(this.player.playback.frame);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
disconnectedCallback() {
|
|
124
|
+
this.connected = !1, this.player?.deactivate(), this.player?.onRender.unsubscribe(this.render);
|
|
125
|
+
}
|
|
126
|
+
connectedCallback() {
|
|
127
|
+
this.connected = !0, this.player?.activate(), this.player?.onRender.subscribe(this.render);
|
|
128
|
+
}
|
|
129
|
+
render = async () => {
|
|
130
|
+
if (this.player) {
|
|
131
|
+
await this.stage.render(this.player.playback.currentScene, this.player.playback.previousScene), this.timeline.setAttribute("min", "0"), this.timeline.setAttribute("step", "1"), this.timeline.setAttribute("max", this.player?.playback.duration.toString());
|
|
132
|
+
let e = this.player.status.time, t = this.player.status.framesToSeconds(this.player.playback.duration);
|
|
133
|
+
if (t) {
|
|
134
|
+
let n = this.player.status.secondsToFrames(e);
|
|
135
|
+
this.timeline.value = n.toString();
|
|
136
|
+
let r = `linear-gradient(to right, rgb(180, 180, 180) 0%, rgb(180, 180, 180) ${100 * n / this.player.status.secondsToFrames(t)}%, white ${100 * n / this.player.status.secondsToFrames(t)}%, white 100%)`;
|
|
137
|
+
this.timeline.style.background = r, this.timeline.style.setProperty("--webkit-track", r), this.timeline.style.setProperty("--moz-track", r), this.timeline.style.setProperty("--ms-track", r);
|
|
138
|
+
let i = this.formatTime(e), a = this.formatTime(t), o = this.root.querySelector(".current-time");
|
|
139
|
+
o && (o.textContent = `${i} / ${a}`);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
updateSettings() {
|
|
144
|
+
let e = {
|
|
145
|
+
...this.defaultSettings,
|
|
146
|
+
size: new n(this.width, this.height),
|
|
147
|
+
resolutionScale: this.quality
|
|
148
|
+
};
|
|
149
|
+
this.stage.configure(e), this.player.configure(e);
|
|
150
|
+
}
|
|
151
|
+
formatTime(e) {
|
|
152
|
+
let t = Math.floor(e / 60), n = Math.floor(e % 60);
|
|
153
|
+
return `${t.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}`;
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
customElements.get(a) || customElements.define(a, o);
|
|
157
|
+
//#endregion
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revideo/player",
|
|
3
|
-
"version": "0.10.5-alpha.
|
|
3
|
+
"version": "0.10.5-alpha.1137+549c48bd",
|
|
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",
|
|
7
7
|
"author": "revideo",
|
|
8
8
|
"homepage": "https://re.video/",
|
|
9
|
-
"bugs": "https://github.com/
|
|
9
|
+
"bugs": "https://github.com/midrender/revideo/issues",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"type": "module",
|
|
12
12
|
"scripts": {
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
},
|
|
16
16
|
"repository": {
|
|
17
17
|
"type": "git",
|
|
18
|
-
"url": "https://github.com/
|
|
18
|
+
"url": "https://github.com/midrender/revideo.git"
|
|
19
19
|
},
|
|
20
20
|
"files": [
|
|
21
21
|
"dist",
|
|
22
22
|
"types"
|
|
23
23
|
],
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@revideo/core": "^0.10.5-alpha.
|
|
25
|
+
"@revideo/core": "^0.10.5-alpha.1137+549c48bd",
|
|
26
26
|
"sass": "^1.58.0",
|
|
27
27
|
"terser": "^5.16.1"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "549c48bd5fcd332642eee2df49e838ead6c8a33f"
|
|
30
30
|
}
|