@revideo/player 0.5.10 → 0.5.11-alpha.1101
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 +10 -10
- package/package.json +3 -3
package/dist/main.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var p = Object.defineProperty;
|
|
2
2
|
var y = (h, r, t) => r in h ? p(h, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[r] = t;
|
|
3
3
|
var e = (h, r, t) => (y(h, typeof r != "symbol" ? r + "" : r, t), t);
|
|
4
|
-
import { Stage as M,
|
|
5
|
-
const
|
|
6
|
-
`,
|
|
4
|
+
import { Stage as M, getFullPreviewSettings as m, Player as b, Vector2 as v } from "@revideo/core";
|
|
5
|
+
const k = `.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}.controls{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;bottom:0%;height:10%;background:linear-gradient(0deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 100%)}.timeline-container{height:100%;width:calc(100% - 32px);top:0%;position:absolute;z-index:5}.timeline{position:absolute;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-left:16px;margin-right:16px;width:100%;background:transparent;cursor:pointer;background-size:100% 40px;background-repeat:no-repeat;bottom:10px;z-index:10}.timeline::-webkit-slider-runnable-track{width:100%;height:5px;background:white;background:var(--webkit-track, white)}.timeline:hover::-webkit-slider-runnable-track{width:100%;height:5px;background:white;background:var(--webkit-track, white)}.timeline::-moz-range-track{width:100%;height:5px;background:white;background:var(--moz-track, white)}.timeline::-ms-track{width:100%;height:4px;background:white;background:var(--ms-track, rgb(201, 199, 199))}.timeline::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s ease;margin-top:-6px}.timeline::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s ease;margin-top:-6px}.timeline::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s ease;margin-top:-6px}.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{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .1s;z-index: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;position:absolute;bottom:25px;left:14px;height:14px;transition:scale .1s ease-in,opacity .1s;background-color:transparent;border:none;background-size:100% 100%;background-repeat:no-repeat;cursor:inherit;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMSAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMS4wMDE0VjExLjM2MTRDMCAxMi4xNTE0IDAuODcgMTIuNjMxNCAxLjU0IDEyLjIwMTRMOS42OCA3LjAyMTRDMTAuMyA2LjYzMTQgMTAuMyA1LjczMTQgOS42OCA1LjMzMTRMMS41NCAwLjE2MTQwNUMwLjg3IC0wLjI2ODU5NiAwIDAuMjExNDA1IDAgMS4wMDE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==)}.playing .play-button{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxMiAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMEMxLjQ2OTU3IDAgMC45NjA4NTkgMC4yMTA3MTQgMC41ODU3ODYgMC41ODU3ODZDMC4yMTA3MTQgMC45NjA4NTkgMCAxLjQ2OTU3IDAgMlYxMkMwIDEyLjUzMDQgMC4yMTA3MTQgMTMuMDM5MSAwLjU4NTc4NiAxMy40MTQyQzAuOTYwODU5IDEzLjc4OTMgMS40Njk1NyAxNCAyIDE0QzIuNTMwNDMgMTQgMy4wMzkxNCAxMy43ODkzIDMuNDE0MjEgMTMuNDE0MkMzLjc4OTI5IDEzLjAzOTEgNCAxMi41MzA0IDQgMTJWMkM0IDEuNDY5NTcgMy43ODkyOSAwLjk2MDg1OSAzLjQxNDIxIDAuNTg1Nzg2QzMuMDM5MTQgMC4yMTA3MTQgMi41MzA0MyAwIDIgMFpNMTAgMEM5LjQ2OTU3IDAgOC45NjA4NiAwLjIxMDcxNCA4LjU4NTc5IDAuNTg1Nzg2QzguMjEwNzEgMC45NjA4NTkgOCAxLjQ2OTU3IDggMlYxMkM4IDEyLjUzMDQgOC4yMTA3MSAxMy4wMzkxIDguNTg1NzkgMTMuNDE0MkM4Ljk2MDg2IDEzLjc4OTMgOS40Njk1NyAxNCAxMCAxNEMxMC41MzA0IDE0IDExLjAzOTEgMTMuNzg5MyAxMS40MTQyIDEzLjQxNDJDMTEuNzg5MyAxMy4wMzkxIDEyIDEyLjUzMDQgMTIgMTJWMkMxMiAxLjQ2OTU3IDExLjc4OTMgMC45NjA4NTkgMTEuNDE0MiAwLjU4NTc4NkMxMS4wMzkxIDAuMjEwNzE0IDEwLjUzMDQgMCAxMCAwWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==)}.auto .play-button{display:none}.current-time{position:absolute;left:44px;bottom:25px;color:#fff;font-family:Arial,sans-serif;font-size:14px;line-height:14px}.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
|
+
`, f = `<div class="overlay" part="overlay">
|
|
7
7
|
<div class="controls">
|
|
8
8
|
<button
|
|
9
9
|
part="play-button"
|
|
@@ -36,8 +36,8 @@ const v = `.initial{display:none}.state-initial .initial{display:block}.loading{
|
|
|
36
36
|
fill="transparent"
|
|
37
37
|
></svg>
|
|
38
38
|
</div>
|
|
39
|
-
`,
|
|
40
|
-
class
|
|
39
|
+
`, x = `<style>${k}</style>${f}`, d = "revideo-player";
|
|
40
|
+
class w extends HTMLElement {
|
|
41
41
|
constructor() {
|
|
42
42
|
super();
|
|
43
43
|
e(this, "root");
|
|
@@ -106,7 +106,7 @@ class x extends HTMLElement {
|
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
});
|
|
109
|
-
this.root = this.attachShadow({ mode: "open" }), this.root.innerHTML =
|
|
109
|
+
this.root = this.attachShadow({ mode: "open" }), this.root.innerHTML = x, 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(
|
|
110
110
|
"initial"
|
|
111
111
|
/* Initial */
|
|
112
112
|
);
|
|
@@ -174,8 +174,8 @@ class x extends HTMLElement {
|
|
|
174
174
|
);
|
|
175
175
|
return;
|
|
176
176
|
}
|
|
177
|
-
this.defaultSettings = a
|
|
178
|
-
const i = new
|
|
177
|
+
this.defaultSettings = m(a);
|
|
178
|
+
const i = new b(a);
|
|
179
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
180
|
"ready"
|
|
181
181
|
/* Ready */
|
|
@@ -210,7 +210,7 @@ class x extends HTMLElement {
|
|
|
210
210
|
updateSettings() {
|
|
211
211
|
const t = {
|
|
212
212
|
...this.defaultSettings,
|
|
213
|
-
size: new
|
|
213
|
+
size: new v(this.width, this.height),
|
|
214
214
|
resolutionScale: this.quality
|
|
215
215
|
};
|
|
216
216
|
this.stage.configure(t), this.player.configure(t);
|
|
@@ -220,4 +220,4 @@ class x extends HTMLElement {
|
|
|
220
220
|
return `${n}:${s}`;
|
|
221
221
|
}
|
|
222
222
|
}
|
|
223
|
-
customElements.get(d) || customElements.define(d,
|
|
223
|
+
customElements.get(d) || customElements.define(d, w);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revideo/player",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.11-alpha.1101+8fb1cafb",
|
|
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.5.
|
|
25
|
+
"@revideo/core": "^0.5.11-alpha.1101+8fb1cafb",
|
|
26
26
|
"sass": "^1.58.0",
|
|
27
27
|
"terser": "^5.16.1"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "8fb1cafbd57314a83ad8a7adaf425f0804a039ff"
|
|
30
30
|
}
|