@videojs/html 0.1.0-preview.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/LICENSE +20 -0
- package/README.md +26 -0
- package/dist/chunk-Bp6m_JJh.js +13 -0
- package/dist/icons-YlVTDFdV.js +198 -0
- package/dist/icons-YlVTDFdV.js.map +1 -0
- package/dist/icons.d.ts +2 -0
- package/dist/icons.js +3 -0
- package/dist/index-BtSCzZKn.d.ts +62 -0
- package/dist/index-BtSCzZKn.d.ts.map +1 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +10 -0
- package/dist/index.js.map +1 -0
- package/dist/media-skin-BlXPC9wG.js +1458 -0
- package/dist/media-skin-BlXPC9wG.js.map +1 -0
- package/dist/media-skin-CbuyuCb-.d.ts +208 -0
- package/dist/media-skin-CbuyuCb-.d.ts.map +1 -0
- package/dist/skins/default.d.ts +12 -0
- package/dist/skins/default.d.ts.map +1 -0
- package/dist/skins/default.js +424 -0
- package/dist/skins/default.js.map +1 -0
- package/dist/store.d.ts +1 -0
- package/dist/store.js +0 -0
- package/package.json +60 -0
|
@@ -0,0 +1,424 @@
|
|
|
1
|
+
import { p as toConnectedHTMLComponent, t as MediaSkin } from "../media-skin-BlXPC9wG.js";
|
|
2
|
+
import "../icons-YlVTDFdV.js";
|
|
3
|
+
import { previewTimeDisplayStateDefinition } from "@videojs/core/store";
|
|
4
|
+
import { formatDisplayTime } from "@videojs/utils";
|
|
5
|
+
|
|
6
|
+
//#region src/components/media-preview-time-display.ts
|
|
7
|
+
var PreviewTimeDisplayBase = class extends HTMLElement {
|
|
8
|
+
static {
|
|
9
|
+
this.shadowRootOptions = { mode: "open" };
|
|
10
|
+
}
|
|
11
|
+
static {
|
|
12
|
+
this.observedAttributes = ["show-remaining"];
|
|
13
|
+
}
|
|
14
|
+
constructor() {
|
|
15
|
+
super();
|
|
16
|
+
if (!this.shadowRoot) this.attachShadow(this.constructor.shadowRootOptions);
|
|
17
|
+
}
|
|
18
|
+
get previewTime() {
|
|
19
|
+
return this._state?.previewTime ?? 0;
|
|
20
|
+
}
|
|
21
|
+
get showRemaining() {
|
|
22
|
+
return this.hasAttribute("show-remaining");
|
|
23
|
+
}
|
|
24
|
+
attributeChangedCallback(name, _oldValue, _newValue) {
|
|
25
|
+
if (name === "show-remaining" && this._state) this._update({}, this._state);
|
|
26
|
+
}
|
|
27
|
+
_update(_props, state) {
|
|
28
|
+
this._state = state;
|
|
29
|
+
/** @TODO Should this live here or elsewhere? (CJP) */
|
|
30
|
+
const timeLabel = formatDisplayTime(state.previewTime);
|
|
31
|
+
if (this.shadowRoot) this.shadowRoot.textContent = timeLabel;
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
const usePreviewTimeDisplayState = {
|
|
35
|
+
keys: [...previewTimeDisplayStateDefinition.keys],
|
|
36
|
+
transform: (rawState, _mediaStore) => ({ ...previewTimeDisplayStateDefinition.stateTransform(rawState) })
|
|
37
|
+
};
|
|
38
|
+
const getPreviewTimeDisplayProps = (_state, _element) => {
|
|
39
|
+
return {};
|
|
40
|
+
};
|
|
41
|
+
const PreviewTimeDisplay = toConnectedHTMLComponent(PreviewTimeDisplayBase, usePreviewTimeDisplayState, getPreviewTimeDisplayProps, "PreviewTimeDisplay");
|
|
42
|
+
if (!globalThis.customElements.get("preview-time-display")) globalThis.customElements.define("preview-time-display", PreviewTimeDisplay);
|
|
43
|
+
|
|
44
|
+
//#endregion
|
|
45
|
+
//#region src/skins/default/index.ts
|
|
46
|
+
function getTemplateHTML() {
|
|
47
|
+
return `
|
|
48
|
+
${MediaSkin.getTemplateHTML()}
|
|
49
|
+
<style>
|
|
50
|
+
/** @TODO: Improve/Polish CSS Here */
|
|
51
|
+
/* Media Container UI/Styles */
|
|
52
|
+
media-container {
|
|
53
|
+
display: inline-block;
|
|
54
|
+
position: relative;
|
|
55
|
+
/* NOTE: Setting color here for generic inheritance, including SVG fill: currentColor defaults (CJP) */
|
|
56
|
+
color: rgb(238 238 238);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
media-container > ::slotted([slot=media]) {
|
|
60
|
+
display: block;
|
|
61
|
+
width: 100%;
|
|
62
|
+
height: 100%;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* Media Container UI Overlay Styling */
|
|
66
|
+
media-container > .overlay {
|
|
67
|
+
position: absolute;
|
|
68
|
+
top: 0;
|
|
69
|
+
left: 0;
|
|
70
|
+
bottom: 0;
|
|
71
|
+
right: 0;
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-flow: column nowrap;
|
|
74
|
+
align-items: start;
|
|
75
|
+
pointer-events: none;
|
|
76
|
+
background: none;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Time Display Styling */
|
|
80
|
+
media-current-time-display,
|
|
81
|
+
media-duration-display {
|
|
82
|
+
padding: 4px 8px;
|
|
83
|
+
color: rgb(238 238 238);
|
|
84
|
+
font-family: monospace;
|
|
85
|
+
font-size: 14px;
|
|
86
|
+
border-radius: 2px;
|
|
87
|
+
min-width: 3em;
|
|
88
|
+
text-align: center;
|
|
89
|
+
display: inline-block;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* Generic Media Button Styling */
|
|
93
|
+
.button {
|
|
94
|
+
border: none;
|
|
95
|
+
padding: 8px;
|
|
96
|
+
cursor: pointer;
|
|
97
|
+
color: rgb(238 238 238);
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
min-width: 24px;
|
|
102
|
+
min-height: 24px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.button .icon {
|
|
106
|
+
width: 18px;
|
|
107
|
+
height: 18px;
|
|
108
|
+
display: none;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Media Play Button UI/Styles */
|
|
112
|
+
media-play-button:not([data-paused]) .pause-icon,
|
|
113
|
+
media-play-button[data-paused] .play-icon {
|
|
114
|
+
display: block;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Media Fullscreen Button UI/Styles */
|
|
118
|
+
media-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,
|
|
119
|
+
media-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {
|
|
120
|
+
display: block;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* One way to define the "default visible" icon (CJP) */
|
|
124
|
+
media-mute-button:not([data-volume-level]) .volume-low-icon,
|
|
125
|
+
media-mute-button[data-volume-level=high] .volume-high-icon,
|
|
126
|
+
media-mute-button[data-volume-level=low] .volume-low-icon,
|
|
127
|
+
media-mute-button[data-volume-level=medium] .volume-low-icon,
|
|
128
|
+
media-mute-button[data-volume-level=off] .volume-off-icon {
|
|
129
|
+
display: block;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* Media Control Bar UI/Styles */
|
|
133
|
+
.control-bar {
|
|
134
|
+
position: absolute;
|
|
135
|
+
bottom: 0;
|
|
136
|
+
left: 0;
|
|
137
|
+
right: 0;
|
|
138
|
+
background: rgb(20 20 30 / .7);
|
|
139
|
+
display: flex;
|
|
140
|
+
align-items: center;
|
|
141
|
+
justify-content: flex-start;
|
|
142
|
+
width: 100%;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* TimeSlider Component Styles */
|
|
146
|
+
media-time-slider-root {
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
position: relative;
|
|
151
|
+
min-width: 100px;
|
|
152
|
+
width: 100%;
|
|
153
|
+
margin: 0 .5rem;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* Horizontal orientation styles */
|
|
157
|
+
media-time-slider-root[data-orientation="horizontal"] {
|
|
158
|
+
min-width: 100px;
|
|
159
|
+
width: 100%;
|
|
160
|
+
height: 20px;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* Vertical orientation styles */
|
|
164
|
+
media-time-slider-root[data-orientation="vertical"] {
|
|
165
|
+
min-width: 20px;
|
|
166
|
+
width: 20px;
|
|
167
|
+
height: 100px;
|
|
168
|
+
flex-direction: column;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
media-time-slider-track {
|
|
172
|
+
position: relative;
|
|
173
|
+
width: 100%;
|
|
174
|
+
height: .375rem;
|
|
175
|
+
background-color: #e0e0e0;
|
|
176
|
+
border-radius: .25rem;
|
|
177
|
+
overflow: hidden;
|
|
178
|
+
pointer-events: none;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* Horizontal track styles */
|
|
182
|
+
media-time-slider-track[data-orientation="horizontal"] {
|
|
183
|
+
width: 100%;
|
|
184
|
+
height: .375rem;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* Vertical track styles */
|
|
188
|
+
media-time-slider-track[data-orientation="vertical"] {
|
|
189
|
+
width: .375rem;
|
|
190
|
+
height: 100%;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
media-time-slider-thumb {
|
|
194
|
+
width: .75rem;
|
|
195
|
+
height: .75rem;
|
|
196
|
+
background-color: #fff;
|
|
197
|
+
border-radius: 50%;
|
|
198
|
+
pointer-events: none;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
media-time-slider-pointer {
|
|
202
|
+
background-color: rgba(255, 255, 255, .5);
|
|
203
|
+
pointer-events: none;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
media-time-slider-progress {
|
|
207
|
+
background-color: #007bff;
|
|
208
|
+
border-radius: inherit;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
media-popover-popup {
|
|
212
|
+
background: rgb(20 20 30 / .7);
|
|
213
|
+
padding: 14px 0;
|
|
214
|
+
--transition: .15s ease-in-out;
|
|
215
|
+
transition: transform var(--transition), scale var(--transition), opacity var(--transition);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
media-popover-popup[data-starting-style] {
|
|
219
|
+
transition-duration: 0s;
|
|
220
|
+
transform: scale(0.9) translateY(8px);
|
|
221
|
+
opacity: 0;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
media-popover-popup[data-ending-style] {
|
|
225
|
+
transform: scale(0.9) translateY(8px);
|
|
226
|
+
opacity: 0;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/* VolumeSlider Component Styles */
|
|
230
|
+
media-volume-slider-root {
|
|
231
|
+
display: flex;
|
|
232
|
+
align-items: center;
|
|
233
|
+
justify-content: center;
|
|
234
|
+
position: relative;
|
|
235
|
+
min-width: 80px;
|
|
236
|
+
width: 80px;
|
|
237
|
+
margin: 0 .5rem;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
/* Horizontal orientation styles */
|
|
241
|
+
media-volume-slider-root[data-orientation="horizontal"] {
|
|
242
|
+
min-width: 80px;
|
|
243
|
+
width: 80px;
|
|
244
|
+
height: 20px;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
/* Vertical orientation styles */
|
|
248
|
+
media-volume-slider-root[data-orientation="vertical"] {
|
|
249
|
+
min-width: 20px;
|
|
250
|
+
width: 20px;
|
|
251
|
+
height: 80px;
|
|
252
|
+
flex-direction: column;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
media-volume-slider-track {
|
|
256
|
+
position: relative;
|
|
257
|
+
width: 100%;
|
|
258
|
+
height: .375rem;
|
|
259
|
+
background-color: #e0e0e0;
|
|
260
|
+
border-radius: .25rem;
|
|
261
|
+
overflow: hidden;
|
|
262
|
+
pointer-events: none;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
/* Horizontal track styles */
|
|
266
|
+
media-volume-slider-track[data-orientation="horizontal"] {
|
|
267
|
+
width: 100%;
|
|
268
|
+
height: .375rem;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
/* Vertical track styles */
|
|
272
|
+
media-volume-slider-track[data-orientation="vertical"] {
|
|
273
|
+
width: .375rem;
|
|
274
|
+
height: 100%;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
media-volume-slider-thumb {
|
|
278
|
+
width: .75rem;
|
|
279
|
+
height: .75rem;
|
|
280
|
+
background-color: #fff;
|
|
281
|
+
border-radius: 50%;
|
|
282
|
+
pointer-events: none;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
media-volume-slider-progress {
|
|
286
|
+
background-color: #007bff;
|
|
287
|
+
border-radius: inherit;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
/* Tooltip Component Styles */
|
|
291
|
+
media-tooltip-popup {
|
|
292
|
+
background: rgb(20 20 30 / .9);
|
|
293
|
+
color: rgb(238 238 238);
|
|
294
|
+
padding: 6px 8px;
|
|
295
|
+
border-radius: 4px;
|
|
296
|
+
font-size: 13px;
|
|
297
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
298
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
299
|
+
--transition: .15s ease-in-out;
|
|
300
|
+
transition: transform var(--transition), scale var(--transition), opacity var(--transition);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
media-tooltip-popup[data-starting-style] {
|
|
304
|
+
transition-duration: 0s;
|
|
305
|
+
transform: scale(0.9);
|
|
306
|
+
opacity: 0;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
media-tooltip-popup[data-ending-style] {
|
|
310
|
+
transform: scale(0.9);
|
|
311
|
+
opacity: 0;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.tooltip {
|
|
315
|
+
display: none;
|
|
316
|
+
white-space: nowrap;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
media-tooltip-popup[data-paused] .play-tooltip,
|
|
320
|
+
media-tooltip-popup:not([data-paused]) .pause-tooltip {
|
|
321
|
+
display: block;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
media-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip,
|
|
325
|
+
media-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip {
|
|
326
|
+
display: block;
|
|
327
|
+
}
|
|
328
|
+
</style>
|
|
329
|
+
<media-container>
|
|
330
|
+
<slot name="media" slot="media"></slot>
|
|
331
|
+
<div class="overlay"></div>
|
|
332
|
+
|
|
333
|
+
<div class="control-bar">
|
|
334
|
+
<!-- NOTE: We can decide if we further want to provide a further, "themed" media-play-button that comes with baked in default styles and icons. (CJP) -->
|
|
335
|
+
<media-tooltip-root delay="600" close-delay="0">
|
|
336
|
+
<media-tooltip-trigger>
|
|
337
|
+
<media-play-button class="button">
|
|
338
|
+
<media-play-icon class="icon play-icon"></media-play-icon>
|
|
339
|
+
<media-pause-icon class="icon pause-icon"></media-pause-icon>
|
|
340
|
+
</media-play-button>
|
|
341
|
+
</media-tooltip-trigger>
|
|
342
|
+
<media-tooltip-portal>
|
|
343
|
+
<media-tooltip-positioner side="top" side-offset="8" collision-padding="8">
|
|
344
|
+
<media-tooltip-popup>
|
|
345
|
+
<span class="tooltip play-tooltip">Play</span>
|
|
346
|
+
<span class="tooltip pause-tooltip">Pause</span>
|
|
347
|
+
</media-tooltip-popup>
|
|
348
|
+
</media-tooltip-positioner>
|
|
349
|
+
</media-tooltip-portal>
|
|
350
|
+
</media-tooltip-root>
|
|
351
|
+
<!-- Use the show-remaining attribute to show count down/remaining time -->
|
|
352
|
+
<media-current-time-display show-remaining></media-current-time-display>
|
|
353
|
+
|
|
354
|
+
<media-tooltip-root track-cursor-axis="x">
|
|
355
|
+
<media-tooltip-trigger>
|
|
356
|
+
<media-time-slider-root>
|
|
357
|
+
<media-time-slider-track>
|
|
358
|
+
<media-time-slider-progress></media-time-slider-progress>
|
|
359
|
+
<media-time-slider-pointer></media-time-slider-pointer>
|
|
360
|
+
</media-time-slider-track>
|
|
361
|
+
<media-time-slider-thumb></media-time-slider-thumb>
|
|
362
|
+
</media-time-slider-root>
|
|
363
|
+
</media-tooltip-trigger>
|
|
364
|
+
<media-tooltip-portal>
|
|
365
|
+
<media-tooltip-positioner side="top" side-offset="18" collision-padding="12">
|
|
366
|
+
<media-tooltip-popup>
|
|
367
|
+
<preview-time-display></preview-time-display>
|
|
368
|
+
</media-tooltip-popup>
|
|
369
|
+
</media-tooltip-positioner>
|
|
370
|
+
</media-tooltip-portal>
|
|
371
|
+
</media-tooltip-root>
|
|
372
|
+
|
|
373
|
+
<media-duration-display></media-duration-display>
|
|
374
|
+
<media-popover-root open-on-hover delay="200" close-delay="100">
|
|
375
|
+
<media-popover-trigger>
|
|
376
|
+
<media-mute-button class="button">
|
|
377
|
+
<media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
|
|
378
|
+
<media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
|
|
379
|
+
<media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
|
|
380
|
+
</media-mute-button>
|
|
381
|
+
</media-popover-trigger>
|
|
382
|
+
<media-popover-portal>
|
|
383
|
+
<media-popover-positioner side="top">
|
|
384
|
+
<media-popover-popup>
|
|
385
|
+
<media-volume-slider-root orientation="vertical">
|
|
386
|
+
<media-volume-slider-track>
|
|
387
|
+
<media-volume-slider-progress></media-volume-slider-progress>
|
|
388
|
+
</media-volume-slider-track>
|
|
389
|
+
<media-volume-slider-thumb></media-volume-slider-thumb>
|
|
390
|
+
</media-volume-slider-root>
|
|
391
|
+
</media-popover-popup>
|
|
392
|
+
</media-popover-positioner>
|
|
393
|
+
</media-popover-portal>
|
|
394
|
+
</media-popover-root>
|
|
395
|
+
<media-tooltip-root delay="600" close-delay="0">
|
|
396
|
+
<media-tooltip-trigger>
|
|
397
|
+
<media-fullscreen-button class="button">
|
|
398
|
+
<media-fullscreen-enter-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-icon>
|
|
399
|
+
<media-fullscreen-exit-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
|
|
400
|
+
</media-fullscreen-button>
|
|
401
|
+
</media-tooltip-trigger>
|
|
402
|
+
<media-tooltip-portal>
|
|
403
|
+
<media-tooltip-positioner side="top" side-offset="8" collision-padding="8">
|
|
404
|
+
<media-tooltip-popup>
|
|
405
|
+
<span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
|
|
406
|
+
<span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
|
|
407
|
+
</media-tooltip-popup>
|
|
408
|
+
</media-tooltip-positioner>
|
|
409
|
+
</media-tooltip-portal>
|
|
410
|
+
</media-tooltip-root>
|
|
411
|
+
</div>
|
|
412
|
+
</media-container>
|
|
413
|
+
`;
|
|
414
|
+
}
|
|
415
|
+
var MediaSkinDefault = class extends MediaSkin {
|
|
416
|
+
static {
|
|
417
|
+
this.getTemplateHTML = getTemplateHTML;
|
|
418
|
+
}
|
|
419
|
+
};
|
|
420
|
+
customElements.define("media-skin-default", MediaSkinDefault);
|
|
421
|
+
|
|
422
|
+
//#endregion
|
|
423
|
+
export { MediaSkinDefault, getTemplateHTML };
|
|
424
|
+
//# sourceMappingURL=default.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default.js","names":["usePreviewTimeDisplayState: StateHook<{\n previewTime: number | undefined;\n}>","getPreviewTimeDisplayProps: PropsHook<{\n previewTime: number | undefined;\n}>","PreviewTimeDisplay: ConnectedComponentConstructor<PreviewTimeDisplayState>"],"sources":["../../src/components/media-preview-time-display.ts","../../src/skins/default/index.ts"],"sourcesContent":["import type { PreviewTimeDisplayState } from '@videojs/core/store';\nimport type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';\n\nimport { previewTimeDisplayStateDefinition } from '@videojs/core/store';\n\nimport { formatDisplayTime } from '@videojs/utils';\nimport { toConnectedHTMLComponent } from '../utils/component-factory';\n\nexport class PreviewTimeDisplayBase extends HTMLElement {\n static shadowRootOptions = {\n mode: 'open' as ShadowRootMode,\n };\n\n static observedAttributes: string[] = ['show-remaining'];\n\n _state:\n | {\n previewTime: number | undefined;\n }\n | undefined;\n\n constructor() {\n super();\n\n if (!this.shadowRoot) {\n this.attachShadow((this.constructor as typeof PreviewTimeDisplayBase).shadowRootOptions);\n }\n }\n\n get previewTime(): number {\n return this._state?.previewTime ?? 0;\n }\n\n get showRemaining(): boolean {\n return this.hasAttribute('show-remaining');\n }\n\n attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void {\n if (name === 'show-remaining' && this._state) {\n // Re-render with current state when show-remaining attribute changes\n this._update({}, this._state);\n }\n }\n\n _update(_props: any, state: any): void {\n this._state = state;\n\n /** @TODO Should this live here or elsewhere? (CJP) */\n const timeLabel = formatDisplayTime(state.previewTime);\n\n if (this.shadowRoot) {\n this.shadowRoot.textContent = timeLabel;\n }\n }\n}\n\nexport const usePreviewTimeDisplayState: StateHook<{\n previewTime: number | undefined;\n}> = {\n keys: [...previewTimeDisplayStateDefinition.keys],\n transform: (rawState, _mediaStore) => ({\n ...previewTimeDisplayStateDefinition.stateTransform(rawState),\n // Preview time display is read-only, so no request methods needed\n }),\n};\n\nexport const getPreviewTimeDisplayProps: PropsHook<{\n previewTime: number | undefined;\n}> = (_state, _element) => {\n const baseProps: Record<string, any> = {};\n return baseProps;\n};\n\nexport const PreviewTimeDisplay: ConnectedComponentConstructor<PreviewTimeDisplayState> = toConnectedHTMLComponent(\n PreviewTimeDisplayBase,\n usePreviewTimeDisplayState,\n getPreviewTimeDisplayProps,\n 'PreviewTimeDisplay',\n);\n\n// Register the custom element\nif (!globalThis.customElements.get('preview-time-display')) {\n globalThis.customElements.define('preview-time-display', PreviewTimeDisplay);\n}\n\nexport default PreviewTimeDisplay;\n","import { MediaSkin } from '@/media/media-skin';\nimport '@/media/media-container';\nimport '@/media/media-provider';\nimport '@/components/media-play-button';\nimport '@/components/media-mute-button';\nimport '@/components/media-volume-slider';\nimport '@/components/media-time-slider';\nimport '@/components/media-fullscreen-button';\nimport '@/components/media-duration-display';\nimport '@/components/media-current-time-display';\nimport '@/components/media-preview-time-display';\nimport '@/components/media-popover';\nimport '@/components/media-tooltip';\nimport '@/icons';\n\nexport function getTemplateHTML() {\n return /* html */`\n ${MediaSkin.getTemplateHTML()}\n <style>\n /** @TODO: Improve/Polish CSS Here */\n /* Media Container UI/Styles */\n media-container {\n display: inline-block;\n position: relative;\n /* NOTE: Setting color here for generic inheritance, including SVG fill: currentColor defaults (CJP) */\n color: rgb(238 238 238);\n }\n\n media-container > ::slotted([slot=media]) {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n /* Media Container UI Overlay Styling */\n media-container > .overlay {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n display: flex;\n flex-flow: column nowrap;\n align-items: start;\n pointer-events: none;\n background: none;\n }\n\n /* Time Display Styling */\n media-current-time-display,\n media-duration-display {\n padding: 4px 8px;\n color: rgb(238 238 238);\n font-family: monospace;\n font-size: 14px;\n border-radius: 2px;\n min-width: 3em;\n text-align: center;\n display: inline-block;\n }\n\n /* Generic Media Button Styling */\n .button {\n border: none;\n padding: 8px;\n cursor: pointer;\n color: rgb(238 238 238);\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 24px;\n min-height: 24px;\n }\n\n .button .icon {\n width: 18px;\n height: 18px;\n display: none;\n }\n\n /* Media Play Button UI/Styles */\n media-play-button:not([data-paused]) .pause-icon,\n media-play-button[data-paused] .play-icon {\n display: block;\n }\n\n /* Media Fullscreen Button UI/Styles */\n media-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,\n media-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {\n display: block;\n }\n\n /* One way to define the \"default visible\" icon (CJP) */\n media-mute-button:not([data-volume-level]) .volume-low-icon,\n media-mute-button[data-volume-level=high] .volume-high-icon,\n media-mute-button[data-volume-level=low] .volume-low-icon,\n media-mute-button[data-volume-level=medium] .volume-low-icon,\n media-mute-button[data-volume-level=off] .volume-off-icon {\n display: block;\n }\n\n /* Media Control Bar UI/Styles */\n .control-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: rgb(20 20 30 / .7);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n }\n\n /* TimeSlider Component Styles */\n media-time-slider-root {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n min-width: 100px;\n width: 100%;\n margin: 0 .5rem;\n }\n\n /* Horizontal orientation styles */\n media-time-slider-root[data-orientation=\"horizontal\"] {\n min-width: 100px;\n width: 100%;\n height: 20px;\n }\n\n /* Vertical orientation styles */\n media-time-slider-root[data-orientation=\"vertical\"] {\n min-width: 20px;\n width: 20px;\n height: 100px;\n flex-direction: column;\n }\n\n media-time-slider-track {\n position: relative;\n width: 100%;\n height: .375rem;\n background-color: #e0e0e0;\n border-radius: .25rem;\n overflow: hidden;\n pointer-events: none;\n }\n\n /* Horizontal track styles */\n media-time-slider-track[data-orientation=\"horizontal\"] {\n width: 100%;\n height: .375rem;\n }\n\n /* Vertical track styles */\n media-time-slider-track[data-orientation=\"vertical\"] {\n width: .375rem;\n height: 100%;\n }\n\n media-time-slider-thumb {\n width: .75rem;\n height: .75rem;\n background-color: #fff;\n border-radius: 50%;\n pointer-events: none;\n }\n\n media-time-slider-pointer {\n background-color: rgba(255, 255, 255, .5);\n pointer-events: none;\n }\n\n media-time-slider-progress {\n background-color: #007bff;\n border-radius: inherit;\n }\n\n media-popover-popup {\n background: rgb(20 20 30 / .7);\n padding: 14px 0;\n --transition: .15s ease-in-out;\n transition: transform var(--transition), scale var(--transition), opacity var(--transition);\n }\n\n media-popover-popup[data-starting-style] {\n transition-duration: 0s;\n transform: scale(0.9) translateY(8px);\n opacity: 0;\n }\n \n media-popover-popup[data-ending-style] {\n transform: scale(0.9) translateY(8px);\n opacity: 0;\n }\n\n /* VolumeSlider Component Styles */\n media-volume-slider-root {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n min-width: 80px;\n width: 80px;\n margin: 0 .5rem;\n }\n\n /* Horizontal orientation styles */\n media-volume-slider-root[data-orientation=\"horizontal\"] {\n min-width: 80px;\n width: 80px;\n height: 20px;\n }\n\n /* Vertical orientation styles */\n media-volume-slider-root[data-orientation=\"vertical\"] {\n min-width: 20px;\n width: 20px;\n height: 80px;\n flex-direction: column;\n }\n\n media-volume-slider-track {\n position: relative;\n width: 100%;\n height: .375rem;\n background-color: #e0e0e0;\n border-radius: .25rem;\n overflow: hidden;\n pointer-events: none;\n }\n\n /* Horizontal track styles */\n media-volume-slider-track[data-orientation=\"horizontal\"] {\n width: 100%;\n height: .375rem;\n }\n\n /* Vertical track styles */\n media-volume-slider-track[data-orientation=\"vertical\"] {\n width: .375rem;\n height: 100%;\n }\n\n media-volume-slider-thumb {\n width: .75rem;\n height: .75rem;\n background-color: #fff;\n border-radius: 50%;\n pointer-events: none;\n }\n\n media-volume-slider-progress {\n background-color: #007bff;\n border-radius: inherit;\n }\n\n /* Tooltip Component Styles */\n media-tooltip-popup {\n background: rgb(20 20 30 / .9);\n color: rgb(238 238 238);\n padding: 6px 8px;\n border-radius: 4px;\n font-size: 13px;\n font-family: system-ui, -apple-system, sans-serif;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n --transition: .15s ease-in-out;\n transition: transform var(--transition), scale var(--transition), opacity var(--transition);\n }\n\n media-tooltip-popup[data-starting-style] {\n transition-duration: 0s;\n transform: scale(0.9);\n opacity: 0;\n }\n \n media-tooltip-popup[data-ending-style] {\n transform: scale(0.9);\n opacity: 0;\n }\n\n .tooltip {\n display: none;\n white-space: nowrap;\n }\n\n media-tooltip-popup[data-paused] .play-tooltip,\n media-tooltip-popup:not([data-paused]) .pause-tooltip {\n display: block;\n }\n\n media-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip,\n media-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip {\n display: block;\n }\n </style>\n <media-container>\n <slot name=\"media\" slot=\"media\"></slot>\n <div class=\"overlay\"></div>\n\n <div class=\"control-bar\">\n <!-- NOTE: We can decide if we further want to provide a further, \"themed\" media-play-button that comes with baked in default styles and icons. (CJP) -->\n <media-tooltip-root delay=\"600\" close-delay=\"0\">\n <media-tooltip-trigger>\n <media-play-button class=\"button\">\n <media-play-icon class=\"icon play-icon\"></media-play-icon>\n <media-pause-icon class=\"icon pause-icon\"></media-pause-icon>\n </media-play-button>\n </media-tooltip-trigger>\n <media-tooltip-portal>\n <media-tooltip-positioner side=\"top\" side-offset=\"8\" collision-padding=\"8\">\n <media-tooltip-popup>\n <span class=\"tooltip play-tooltip\">Play</span>\n <span class=\"tooltip pause-tooltip\">Pause</span>\n </media-tooltip-popup>\n </media-tooltip-positioner>\n </media-tooltip-portal>\n </media-tooltip-root>\n <!-- Use the show-remaining attribute to show count down/remaining time -->\n <media-current-time-display show-remaining></media-current-time-display>\n \n <media-tooltip-root track-cursor-axis=\"x\">\n <media-tooltip-trigger>\n <media-time-slider-root>\n <media-time-slider-track>\n <media-time-slider-progress></media-time-slider-progress>\n <media-time-slider-pointer></media-time-slider-pointer>\n </media-time-slider-track>\n <media-time-slider-thumb></media-time-slider-thumb>\n </media-time-slider-root>\n </media-tooltip-trigger>\n <media-tooltip-portal>\n <media-tooltip-positioner side=\"top\" side-offset=\"18\" collision-padding=\"12\">\n <media-tooltip-popup>\n <preview-time-display></preview-time-display>\n </media-tooltip-popup>\n </media-tooltip-positioner>\n </media-tooltip-portal>\n </media-tooltip-root>\n\n <media-duration-display></media-duration-display>\n <media-popover-root open-on-hover delay=\"200\" close-delay=\"100\">\n <media-popover-trigger>\n <media-mute-button class=\"button\">\n <media-volume-high-icon class=\"icon volume-high-icon\"></media-volume-high-icon>\n <media-volume-low-icon class=\"icon volume-low-icon\"></media-volume-low-icon>\n <media-volume-off-icon class=\"icon volume-off-icon\"></media-volume-off-icon>\n </media-mute-button>\n </media-popover-trigger>\n <media-popover-portal>\n <media-popover-positioner side=\"top\">\n <media-popover-popup>\n <media-volume-slider-root orientation=\"vertical\">\n <media-volume-slider-track>\n <media-volume-slider-progress></media-volume-slider-progress>\n </media-volume-slider-track>\n <media-volume-slider-thumb></media-volume-slider-thumb>\n </media-volume-slider-root>\n </media-popover-popup>\n </media-popover-positioner>\n </media-popover-portal>\n </media-popover-root>\n <media-tooltip-root delay=\"600\" close-delay=\"0\">\n <media-tooltip-trigger>\n <media-fullscreen-button class=\"button\">\n <media-fullscreen-enter-icon class=\"icon fullscreen-enter-icon\"></media-fullscreen-enter-icon>\n <media-fullscreen-exit-icon class=\"icon fullscreen-exit-icon\"></media-fullscreen-exit-icon>\n </media-fullscreen-button>\n </media-tooltip-trigger>\n <media-tooltip-portal>\n <media-tooltip-positioner side=\"top\" side-offset=\"8\" collision-padding=\"8\">\n <media-tooltip-popup>\n <span class=\"tooltip fullscreen-enter-tooltip\">Enter Fullscreen</span>\n <span class=\"tooltip fullscreen-exit-tooltip\">Exit Fullscreen</span>\n </media-tooltip-popup>\n </media-tooltip-positioner>\n </media-tooltip-portal>\n </media-tooltip-root>\n </div>\n </media-container>\n `;\n}\n\nexport class MediaSkinDefault extends MediaSkin {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ncustomElements.define('media-skin-default', MediaSkinDefault);\n"],"mappings":";;;;;;AAQA,IAAa,yBAAb,cAA4C,YAAY;;2BAC3B,EACzB,MAAM,QACP;;;4BAEqC,CAAC,iBAAiB;;CAQxD,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,WACR,MAAK,aAAc,KAAK,YAA8C,kBAAkB;;CAI5F,IAAI,cAAsB;AACxB,SAAO,KAAK,QAAQ,eAAe;;CAGrC,IAAI,gBAAyB;AAC3B,SAAO,KAAK,aAAa,iBAAiB;;CAG5C,yBAAyB,MAAc,WAA0B,WAAgC;AAC/F,MAAI,SAAS,oBAAoB,KAAK,OAEpC,MAAK,QAAQ,EAAE,EAAE,KAAK,OAAO;;CAIjC,QAAQ,QAAa,OAAkB;AACrC,OAAK,SAAS;;EAGd,MAAM,YAAY,kBAAkB,MAAM,YAAY;AAEtD,MAAI,KAAK,WACP,MAAK,WAAW,cAAc;;;AAKpC,MAAaA,6BAER;CACH,MAAM,CAAC,GAAG,kCAAkC,KAAK;CACjD,YAAY,UAAU,iBAAiB,EACrC,GAAG,kCAAkC,eAAe,SAAS,EAE9D;CACF;AAED,MAAaC,8BAEP,QAAQ,aAAa;AAEzB,QADuC,EAAE;;AAI3C,MAAaC,qBAA6E,yBACxF,wBACA,4BACA,4BACA,qBACD;AAGD,IAAI,CAAC,WAAW,eAAe,IAAI,uBAAuB,CACxD,YAAW,eAAe,OAAO,wBAAwB,mBAAmB;;;;ACnE9E,SAAgB,kBAAkB;AAChC,QAAiB;MACb,UAAU,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgXlC,IAAa,mBAAb,cAAsC,UAAU;;yBACP;;;AAGzC,eAAe,OAAO,sBAAsB,iBAAiB"}
|
package/dist/store.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
package/dist/store.js
ADDED
|
File without changes
|
package/package.json
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@videojs/html",
|
|
3
|
+
"type": "module",
|
|
4
|
+
"version": "0.1.0-preview.2",
|
|
5
|
+
"description": "HTML library for building media players",
|
|
6
|
+
"license": "Apache-2.0",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"media",
|
|
9
|
+
"player",
|
|
10
|
+
"html",
|
|
11
|
+
"ui",
|
|
12
|
+
"components",
|
|
13
|
+
"videojs"
|
|
14
|
+
],
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
18
|
+
"default": "./dist/index.js"
|
|
19
|
+
},
|
|
20
|
+
"./store": {
|
|
21
|
+
"types": "./dist/store.d.ts",
|
|
22
|
+
"default": "./dist/store.js"
|
|
23
|
+
},
|
|
24
|
+
"./icons": {
|
|
25
|
+
"types": "./dist/icons.d.ts",
|
|
26
|
+
"default": "./dist/icons.js"
|
|
27
|
+
},
|
|
28
|
+
"./skins/default": {
|
|
29
|
+
"types": "./dist/skins/default.d.ts",
|
|
30
|
+
"default": "./dist/skins/default.js"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
"main": "dist/index.js",
|
|
34
|
+
"module": "dist/index.js",
|
|
35
|
+
"types": "dist/index.d.ts",
|
|
36
|
+
"files": [
|
|
37
|
+
"dist"
|
|
38
|
+
],
|
|
39
|
+
"dependencies": {
|
|
40
|
+
"@floating-ui/dom": "^1.6.13",
|
|
41
|
+
"@open-wc/context-protocol": "^0.0.9",
|
|
42
|
+
"@videojs/icons": "0.1.0-preview.2",
|
|
43
|
+
"@videojs/core": "0.1.0-preview.2",
|
|
44
|
+
"@videojs/utils": "0.1.0-preview.2"
|
|
45
|
+
},
|
|
46
|
+
"devDependencies": {
|
|
47
|
+
"tsdown": "^0.15.9",
|
|
48
|
+
"typescript": "^5.9.2"
|
|
49
|
+
},
|
|
50
|
+
"publishConfig": {
|
|
51
|
+
"access": "public"
|
|
52
|
+
},
|
|
53
|
+
"scripts": {
|
|
54
|
+
"build": "tsdown",
|
|
55
|
+
"build:watch": "tsdown --watch --silent",
|
|
56
|
+
"dev": "pnpm run build:watch",
|
|
57
|
+
"test": "echo \"No tests yet\"",
|
|
58
|
+
"clean": "rm -rf dist"
|
|
59
|
+
}
|
|
60
|
+
}
|