@revideo/player-react 0.4.7-four.1027 → 0.4.7-one.1023
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/controls.d.ts +14 -8
- package/dist/controls.js +57 -11
- package/dist/icons.d.ts +3 -3
- package/dist/icons.js +24 -4
- package/dist/index.d.ts +40 -28
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +132 -78
- package/dist/index.js.map +1 -1
- package/dist/internal.d.ts +1 -1
- package/dist/internal.js +206 -206
- package/dist/player-wrapper.css +4 -1
- package/dist/styles.css +2 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/utils.d.ts +10 -3
- package/dist/utils.js +13 -13
- package/package.json +3 -3
package/dist/internal.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Vector2 } from '@revideo/core';
|
|
1
|
+
import {Player, Stage, Vector2} from '@revideo/core';
|
|
3
2
|
const stylesNew = `
|
|
4
3
|
.overlay {
|
|
5
4
|
position: absolute;
|
|
@@ -25,222 +24,223 @@ const TEMPLATE = `<style>${stylesNew}</style><div class="overlay"></div>`;
|
|
|
25
24
|
const ID = 'revideo-player';
|
|
26
25
|
var State;
|
|
27
26
|
(function (State) {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
State['Initial'] = 'initial';
|
|
28
|
+
State['Loading'] = 'loading';
|
|
29
|
+
State['Ready'] = 'ready';
|
|
30
|
+
State['Error'] = 'error';
|
|
32
31
|
})(State || (State = {}));
|
|
33
32
|
class RevideoPlayer extends HTMLElement {
|
|
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
|
-
return {};
|
|
70
|
-
}
|
|
33
|
+
static get observedAttributes() {
|
|
34
|
+
return [
|
|
35
|
+
'src',
|
|
36
|
+
'playing',
|
|
37
|
+
'variables',
|
|
38
|
+
'looping',
|
|
39
|
+
'fps',
|
|
40
|
+
'quality',
|
|
41
|
+
'width',
|
|
42
|
+
'height',
|
|
43
|
+
];
|
|
44
|
+
}
|
|
45
|
+
get fps() {
|
|
46
|
+
const attr = this.getAttribute('fps');
|
|
47
|
+
return attr ? parseFloat(attr) : this.defaultSettings?.fps ?? 60;
|
|
48
|
+
}
|
|
49
|
+
get quality() {
|
|
50
|
+
const attr = this.getAttribute('quality');
|
|
51
|
+
return attr ? parseFloat(attr) : this.defaultSettings?.resolutionScale ?? 1;
|
|
52
|
+
}
|
|
53
|
+
get width() {
|
|
54
|
+
const attr = this.getAttribute('width');
|
|
55
|
+
return attr ? parseFloat(attr) : this.defaultSettings?.size.width ?? 0;
|
|
56
|
+
}
|
|
57
|
+
get height() {
|
|
58
|
+
const attr = this.getAttribute('height');
|
|
59
|
+
return attr ? parseFloat(attr) : this.defaultSettings?.size.height ?? 0;
|
|
60
|
+
}
|
|
61
|
+
get variables() {
|
|
62
|
+
try {
|
|
63
|
+
const attr = this.getAttribute('variables');
|
|
64
|
+
return attr ? JSON.parse(attr) : {};
|
|
65
|
+
} catch {
|
|
66
|
+
this.project?.logger.warn(`Project variables could not be parsed.`);
|
|
67
|
+
return {};
|
|
71
68
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
69
|
+
}
|
|
70
|
+
root;
|
|
71
|
+
canvas;
|
|
72
|
+
overlay;
|
|
73
|
+
state = State.Initial;
|
|
74
|
+
project = null;
|
|
75
|
+
player = null;
|
|
76
|
+
defaultSettings;
|
|
77
|
+
abortController = null;
|
|
78
|
+
playing = false;
|
|
79
|
+
stage = new Stage();
|
|
80
|
+
time = 0;
|
|
81
|
+
duration = 0; // in frames
|
|
82
|
+
looping = true;
|
|
83
|
+
constructor() {
|
|
84
|
+
super();
|
|
85
|
+
this.root = this.attachShadow({mode: 'open'});
|
|
86
|
+
this.root.innerHTML = TEMPLATE;
|
|
87
|
+
this.overlay = this.root.querySelector('.overlay');
|
|
88
|
+
this.canvas = this.stage.finalBuffer;
|
|
89
|
+
this.canvas.classList.add('canvas');
|
|
90
|
+
this.root.prepend(this.canvas);
|
|
91
|
+
this.setState(State.Initial);
|
|
92
|
+
}
|
|
93
|
+
setState(state) {
|
|
94
|
+
this.state = state;
|
|
95
|
+
this.setPlaying(this.playing);
|
|
96
|
+
}
|
|
97
|
+
setPlaying(value) {
|
|
98
|
+
if (this.state === State.Ready && value) {
|
|
99
|
+
this.player?.togglePlayback(true);
|
|
100
|
+
this.playing = true;
|
|
101
|
+
} else {
|
|
102
|
+
this.player?.togglePlayback(false);
|
|
103
|
+
this.playing = false;
|
|
94
104
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
105
|
+
}
|
|
106
|
+
async updateSource(source) {
|
|
107
|
+
this.setState(State.Initial);
|
|
108
|
+
this.abortController?.abort();
|
|
109
|
+
this.abortController = new AbortController();
|
|
110
|
+
let project;
|
|
111
|
+
try {
|
|
112
|
+
const promise = import(/* webpackIgnore: true */ source + 'project.js');
|
|
113
|
+
const delay = new Promise(resolve => setTimeout(resolve, 200));
|
|
114
|
+
await Promise.any([delay, promise]);
|
|
115
|
+
this.setState(State.Loading);
|
|
116
|
+
project = (await promise).default;
|
|
117
|
+
} catch (e) {
|
|
118
|
+
console.error(e);
|
|
119
|
+
this.setState(State.Error);
|
|
120
|
+
return;
|
|
98
121
|
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
this.playing = false;
|
|
107
|
-
}
|
|
122
|
+
try {
|
|
123
|
+
const link = document.createElement('link');
|
|
124
|
+
link.rel = 'stylesheet';
|
|
125
|
+
link.href = source + 'project.css';
|
|
126
|
+
document.head.appendChild(link);
|
|
127
|
+
} catch (e) {
|
|
128
|
+
console.error(e);
|
|
108
129
|
}
|
|
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
|
-
this.
|
|
136
|
-
|
|
137
|
-
player.
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
this.
|
|
141
|
-
this.player?.
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
130
|
+
this.defaultSettings = project.meta.getFullPreviewSettings();
|
|
131
|
+
const player = new Player(project);
|
|
132
|
+
player.setVariables(this.variables);
|
|
133
|
+
player.setAssetRoot(source);
|
|
134
|
+
player.toggleLoop(this.looping);
|
|
135
|
+
this.player?.onRender.unsubscribe(this.render);
|
|
136
|
+
this.player?.onFrameChanged.unsubscribe(this.handleFrameChanged);
|
|
137
|
+
this.player?.togglePlayback(false);
|
|
138
|
+
this.player?.deactivate();
|
|
139
|
+
this.project = project;
|
|
140
|
+
this.player = player;
|
|
141
|
+
this.updateSettings();
|
|
142
|
+
this.player.onRender.subscribe(this.render);
|
|
143
|
+
this.player.onFrameChanged.subscribe(this.handleFrameChanged);
|
|
144
|
+
this.player.togglePlayback(this.playing);
|
|
145
|
+
this.setState(State.Ready);
|
|
146
|
+
}
|
|
147
|
+
attributeChangedCallback(name, _, newValue) {
|
|
148
|
+
switch (name) {
|
|
149
|
+
case 'src':
|
|
150
|
+
this.updateSource(newValue);
|
|
151
|
+
break;
|
|
152
|
+
case 'playing':
|
|
153
|
+
this.setPlaying(newValue === 'true');
|
|
154
|
+
break;
|
|
155
|
+
case 'variables':
|
|
156
|
+
this.player?.setVariables(this.variables);
|
|
157
|
+
this.player?.requestSeek(this.player.playback.frame);
|
|
158
|
+
this.player?.playback.reload();
|
|
159
|
+
break;
|
|
160
|
+
case 'looping':
|
|
161
|
+
this.looping = newValue === 'true';
|
|
162
|
+
this.player?.toggleLoop(newValue === 'true');
|
|
163
|
+
break;
|
|
164
|
+
case 'fps':
|
|
165
|
+
case 'quality':
|
|
166
|
+
case 'width':
|
|
167
|
+
case 'height':
|
|
146
168
|
this.updateSettings();
|
|
147
|
-
|
|
148
|
-
this.player.onFrameChanged.subscribe(this.handleFrameChanged);
|
|
149
|
-
this.player.togglePlayback(this.playing);
|
|
150
|
-
this.setState(State.Ready);
|
|
169
|
+
break;
|
|
151
170
|
}
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
}
|
|
171
|
+
}
|
|
172
|
+
/**
|
|
173
|
+
* Runs when the element is removed from the DOM.
|
|
174
|
+
*/
|
|
175
|
+
disconnectedCallback() {
|
|
176
|
+
this.player?.deactivate();
|
|
177
|
+
this.player?.onRender.unsubscribe(this.render);
|
|
178
|
+
this.removeEventListener('seekto', this.handleSeekTo);
|
|
179
|
+
}
|
|
180
|
+
/**
|
|
181
|
+
* Runs when the element is added to the DOM.
|
|
182
|
+
*/
|
|
183
|
+
connectedCallback() {
|
|
184
|
+
this.player?.activate();
|
|
185
|
+
this.player?.onRender.subscribe(this.render);
|
|
186
|
+
this.addEventListener('seekto', this.handleSeekTo);
|
|
187
|
+
}
|
|
188
|
+
/**
|
|
189
|
+
* Triggered by the timeline.
|
|
190
|
+
*/
|
|
191
|
+
handleSeekTo = event => {
|
|
192
|
+
if (!this.project) {
|
|
193
|
+
return;
|
|
176
194
|
}
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
195
|
+
const e = event;
|
|
196
|
+
this.time = e.detail;
|
|
197
|
+
this.player?.requestSeek(e.detail * this.player.playback.fps);
|
|
198
|
+
};
|
|
199
|
+
/**
|
|
200
|
+
* Triggered by the player.
|
|
201
|
+
*/
|
|
202
|
+
handleFrameChanged = frame => {
|
|
203
|
+
if (!this.project) {
|
|
204
|
+
return;
|
|
184
205
|
}
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
206
|
+
this.time = frame / this.player.playback.fps;
|
|
207
|
+
};
|
|
208
|
+
/**
|
|
209
|
+
* Called on every frame.
|
|
210
|
+
*/
|
|
211
|
+
render = async () => {
|
|
212
|
+
if (this.player && this.project) {
|
|
213
|
+
await this.stage.render(
|
|
214
|
+
this.player.playback.currentScene,
|
|
215
|
+
this.player.playback.previousScene,
|
|
216
|
+
);
|
|
217
|
+
this.dispatchEvent(new CustomEvent('timeupdate', {detail: this.time}));
|
|
218
|
+
const durationInFrames = this.player.playback.duration;
|
|
219
|
+
if (durationInFrames === this.duration) {
|
|
220
|
+
return;
|
|
221
|
+
}
|
|
222
|
+
this.duration = durationInFrames;
|
|
223
|
+
const durationInSeconds = durationInFrames / this.player.playback.fps;
|
|
224
|
+
this.dispatchEvent(
|
|
225
|
+
new CustomEvent('duration', {detail: durationInSeconds}),
|
|
226
|
+
);
|
|
192
227
|
}
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
if (!this.project) {
|
|
198
|
-
return;
|
|
199
|
-
}
|
|
200
|
-
const e = event;
|
|
201
|
-
this.time = e.detail;
|
|
202
|
-
this.player?.requestSeek(e.detail * this.player.playback.fps);
|
|
203
|
-
};
|
|
204
|
-
/**
|
|
205
|
-
* Triggered by the player.
|
|
206
|
-
*/
|
|
207
|
-
handleFrameChanged = (frame) => {
|
|
208
|
-
if (!this.project) {
|
|
209
|
-
return;
|
|
210
|
-
}
|
|
211
|
-
this.time = frame / this.player.playback.fps;
|
|
212
|
-
};
|
|
213
|
-
/**
|
|
214
|
-
* Called on every frame.
|
|
215
|
-
*/
|
|
216
|
-
render = async () => {
|
|
217
|
-
if (this.player && this.project) {
|
|
218
|
-
await this.stage.render(this.player.playback.currentScene, this.player.playback.previousScene);
|
|
219
|
-
this.dispatchEvent(new CustomEvent('timeupdate', { detail: this.time }));
|
|
220
|
-
const durationInFrames = this.player.playback.duration;
|
|
221
|
-
if (durationInFrames === this.duration) {
|
|
222
|
-
return;
|
|
223
|
-
}
|
|
224
|
-
this.duration = durationInFrames;
|
|
225
|
-
const durationInSeconds = durationInFrames / this.player.playback.fps;
|
|
226
|
-
this.dispatchEvent(new CustomEvent('duration', { detail: durationInSeconds }));
|
|
227
|
-
}
|
|
228
|
-
};
|
|
229
|
-
updateSettings() {
|
|
230
|
-
if (!this.defaultSettings) {
|
|
231
|
-
return;
|
|
232
|
-
}
|
|
233
|
-
const settings = {
|
|
234
|
-
...this.defaultSettings,
|
|
235
|
-
size: new Vector2(this.width, this.height),
|
|
236
|
-
resolutionScale: this.quality,
|
|
237
|
-
fps: this.fps,
|
|
238
|
-
};
|
|
239
|
-
this.stage.configure(settings);
|
|
240
|
-
this.player?.configure(settings);
|
|
228
|
+
};
|
|
229
|
+
updateSettings() {
|
|
230
|
+
if (!this.defaultSettings) {
|
|
231
|
+
return;
|
|
241
232
|
}
|
|
233
|
+
const settings = {
|
|
234
|
+
...this.defaultSettings,
|
|
235
|
+
size: new Vector2(this.width, this.height),
|
|
236
|
+
resolutionScale: this.quality,
|
|
237
|
+
fps: this.fps,
|
|
238
|
+
};
|
|
239
|
+
this.stage.configure(settings);
|
|
240
|
+
this.player?.configure(settings);
|
|
241
|
+
}
|
|
242
242
|
}
|
|
243
243
|
if (!customElements.get(ID)) {
|
|
244
|
-
|
|
244
|
+
customElements.define(ID, RevideoPlayer);
|
|
245
245
|
}
|
|
246
|
-
//# sourceMappingURL=internal.js.map
|
|
246
|
+
//# sourceMappingURL=internal.js.map
|
package/dist/player-wrapper.css
CHANGED
package/dist/styles.css
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
[data-player=true]{
|
|
2
|
+
/*! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e5e5;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#acacac;opacity:1}input::placeholder,textarea::placeholder{color:#acacac;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }}.p-absolute{position:absolute}.p-relative{position:relative}.p-bottom-0{bottom:0}.p-left-0{left:0}.p-top-0{top:0}.p-z-20{z-index:20}.p-flex{display:flex}.p-h-1{height:.25rem}.p-h-1\.5{height:.375rem}.p-h-6{height:1.5rem}.p-h-full{height:100%}.p-w-6{width:1.5rem}.p-w-full{width:100%}.p-flex-1{flex:1 1 0%}.p-cursor-default{cursor:default}.p-cursor-pointer{cursor:pointer}.p-flex-col{flex-direction:column}.p-items-center{align-items:center}.p-space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.p-space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.p-overflow-hidden{overflow:hidden}.p-rounded-full{border-radius:9999px}.p-bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 243 243/var(--tw-bg-opacity))}.p-bg-gray-300{--tw-bg-opacity:1;background-color:rgb(199 199 199/var(--tw-bg-opacity))}.p-bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.p-from-gray-500{--tw-gradient-from:grey var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,50%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.p-to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.p-p-1{padding:.25rem}.p-p-4{padding:1rem}.p-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.p-opacity-0{opacity:0}.p-opacity-100{opacity:1}.p-transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.p-duration-200{transition-duration:.2s}
|