@revideo/player 0.2.0 → 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.
Files changed (2) hide show
  1. package/dist/main.js +147 -84
  2. package/package.json +2 -2
package/dist/main.js CHANGED
@@ -1,9 +1,13 @@
1
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";
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
- `, I = `<div class="overlay" part="overlay">
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
- `, M = `<style>${f}</style>${I}`, c = "revideo-player";
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, "root");
32
- e(this, "canvas");
33
- e(this, "overlay");
34
- e(this, "button");
35
- e(this, "state", "initial");
36
- e(this, "project", null);
37
- e(this, "player", null);
38
- e(this, "defaultSettings");
39
- e(this, "abortController", null);
40
- e(this, "mouseMoveId", null);
41
- e(this, "finished", !1);
42
- e(this, "playing", !1);
43
- e(this, "connected", !1);
44
- e(this, "stage", new v());
45
- e(this, "handleMouseMove", () => {
46
- this.mouseMoveId && clearTimeout(this.mouseMoveId), this.hover && !this.playing && this.setPlaying(!0), this.mouseMoveId = window.setTimeout(() => {
47
- this.mouseMoveId = null, this.updateClass();
48
- }, 2e3), this.updateClass();
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, "handleMouseLeave", () => {
51
- this.hover && this.setPlaying(!1), this.mouseMoveId && (clearTimeout(this.mouseMoveId), this.mouseMoveId = null, this.updateClass());
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, "handleMouseDown", (t) => {
66
+ e(this, 'handleMouseDown', t => {
54
67
  t.preventDefault();
55
68
  });
56
- e(this, "handleClick", () => {
57
- this.auto || (this.handleMouseMove(), this.setPlaying(!this.playing), this.button.animate(
58
- [
59
- { scale: "0.9" },
60
- {
61
- scale: "1",
62
- easing: "ease-out"
63
- }
64
- ],
65
- { duration: 200 }
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, "render", async () => {
69
- this.player && await this.stage.render(
70
- this.player.playback.currentScene,
71
- this.player.playback.previousScene
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({ 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(
75
- "initial"
76
- /* Initial */
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 ["src", "quality", "width", "height", "auto", "variables"];
108
+ return ['src', 'quality', 'width', 'height', 'auto', 'variables'];
81
109
  }
82
110
  get auto() {
83
- return !!this.getAttribute("auto");
111
+ return !!this.getAttribute('auto');
84
112
  }
85
113
  get hover() {
86
- return this.getAttribute("auto") === "hover";
114
+ return this.getAttribute('auto') === 'hover';
87
115
  }
88
116
  get quality() {
89
- const t = this.getAttribute("quality");
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("width");
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("height");
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("variables");
130
+ const t = this.getAttribute('variables');
103
131
  return t ? JSON.parse(t) : {};
104
132
  } catch {
105
- return this.project.logger.warn("Project variables could not be parsed."), {};
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 === "ready" && (t || this.auto && !this.hover) ? ((a = this.player) == null || a.togglePlayback(!0), this.playing = !0) : ((i = this.player) == null || i.togglePlayback(!1), this.playing = !1), this.updateClass();
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}`, 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);
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
- "initial"
164
+ 'initial',
122
165
  /* Initial */
123
- ), (r = this.abortController) == null || r.abort(), this.abortController = new AbortController();
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
- /* webpackIgnore: true */
128
- /* @vite-ignore */
129
- t
130
- ), y = new Promise((u) => setTimeout(u, 200));
131
- await Promise.any([y, n]), this.setState(
132
- "loading"
133
- /* Loading */
134
- ), a = (await n).default;
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), this.setState(
137
- "error"
138
- /* Error */
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), 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(
145
- "ready"
146
- /* Ready */
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 "auto":
211
+ case 'auto':
153
212
  this.setPlaying(this.playing);
154
213
  break;
155
- case "src":
214
+ case 'src':
156
215
  this.updateSource(i);
157
216
  break;
158
- case "quality":
159
- case "width":
160
- case "height":
217
+ case 'quality':
218
+ case 'width':
219
+ case 'height':
161
220
  this.updateSettings();
162
221
  break;
163
- case "variables":
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, (t = this.player) == null || t.deactivate(), (a = this.player) == null || a.onRender.unsubscribe(this.render);
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, (t = this.player) == null || t.activate(), (a = this.player) == null || a.onRender.subscribe(this.render);
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.2.0",
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",
@@ -26,5 +26,5 @@
26
26
  "sass": "^1.58.0",
27
27
  "terser": "^5.16.1"
28
28
  },
29
- "gitHead": "d45195eb1b38e0de57617ece58affd418a95f2aa"
29
+ "gitHead": "b6a03863cd5ee2f9bde38d1b199e8b7a03ab7bdc"
30
30
  }