@videojs/html 0.1.0-preview.3 → 0.1.0-preview.5
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/README.md +1 -1
- package/dist/button-D1DWjsQu.js +57 -0
- package/dist/button-D1DWjsQu.js.map +1 -0
- package/dist/component-factory-DeAN6cjC.js +47 -0
- package/dist/component-factory-DeAN6cjC.js.map +1 -0
- package/dist/current-time-display-C3qndGf5.js +47 -0
- package/dist/current-time-display-C3qndGf5.js.map +1 -0
- package/dist/custom-element-3bDlB2XO.js +10 -0
- package/dist/custom-element-3bDlB2XO.js.map +1 -0
- package/dist/define/index.d.ts +12 -0
- package/dist/define/index.js +27 -0
- package/dist/define/media-container.d.ts +1 -0
- package/dist/define/media-container.js +3 -0
- package/dist/define/media-current-time-display.d.ts +1 -0
- package/dist/define/media-current-time-display.js +4 -0
- package/dist/define/media-duration-display.d.ts +1 -0
- package/dist/define/media-duration-display.js +4 -0
- package/dist/define/media-fullscreen-button.d.ts +1 -0
- package/dist/define/media-fullscreen-button.js +5 -0
- package/dist/define/media-mute-button.d.ts +1 -0
- package/dist/define/media-mute-button.js +5 -0
- package/dist/define/media-play-button.d.ts +1 -0
- package/dist/define/media-play-button.js +5 -0
- package/dist/define/media-popover.d.ts +1 -0
- package/dist/define/media-popover.js +3 -0
- package/dist/define/media-preview-time-display.d.ts +1 -0
- package/dist/define/media-preview-time-display.js +4 -0
- package/dist/define/media-provider.d.ts +1 -0
- package/dist/define/media-provider.js +3 -0
- package/dist/define/media-time-slider.d.ts +1 -0
- package/dist/define/media-time-slider.js +4 -0
- package/dist/define/media-tooltip.d.ts +1 -0
- package/dist/define/media-tooltip.js +3 -0
- package/dist/define/media-volume-slider.d.ts +1 -0
- package/dist/define/media-volume-slider.js +4 -0
- package/dist/duration-display-JOPp3bdU.js +49 -0
- package/dist/duration-display-JOPp3bdU.js.map +1 -0
- package/dist/fullscreen-button-CGO2UJjs.js +48 -0
- package/dist/fullscreen-button-CGO2UJjs.js.map +1 -0
- package/dist/{icons-eJws_3Te.js → icons-CuxuONCk.js} +20 -57
- package/dist/icons-CuxuONCk.js.map +1 -0
- package/dist/icons.d.ts +1 -2
- package/dist/icons.js +2 -3
- package/dist/index-LKrIp3Oo.d.ts +1 -0
- package/dist/index.d.ts +145 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +16 -9
- package/dist/media-container-BGEXSi9g.js +8 -0
- package/dist/media-container-BGEXSi9g.js.map +1 -0
- package/dist/media-container-C0MUzkJ_.js +83 -0
- package/dist/media-container-C0MUzkJ_.js.map +1 -0
- package/dist/media-container-DPnFjmtK.d.ts +1 -0
- package/dist/media-current-time-display-B-4Cp845.js +8 -0
- package/dist/media-current-time-display-B-4Cp845.js.map +1 -0
- package/dist/media-current-time-display-Cd0rPAuj.d.ts +1 -0
- package/dist/media-duration-display-BLMr7VHo.js +8 -0
- package/dist/media-duration-display-BLMr7VHo.js.map +1 -0
- package/dist/media-duration-display-qvm6YX-q.d.ts +1 -0
- package/dist/media-fullscreen-button-BgUK3lgu.d.ts +1 -0
- package/dist/media-fullscreen-button-Dcflbt54.js +8 -0
- package/dist/media-fullscreen-button-Dcflbt54.js.map +1 -0
- package/dist/media-mute-button-BOVhZ3aP.js +8 -0
- package/dist/media-mute-button-BOVhZ3aP.js.map +1 -0
- package/dist/media-mute-button-NVJF2EEW.d.ts +1 -0
- package/dist/media-play-button-CLj-hkwn.js +8 -0
- package/dist/media-play-button-CLj-hkwn.js.map +1 -0
- package/dist/media-play-button-oq8yDlxe.d.ts +1 -0
- package/dist/media-popover-BtJmPv0E.d.ts +1 -0
- package/dist/media-popover-DVCIlSBX.js +8 -0
- package/dist/media-popover-DVCIlSBX.js.map +1 -0
- package/dist/media-preview-time-display-4YX5Rics.d.ts +1 -0
- package/dist/media-preview-time-display-DAiMgLPX.js +8 -0
- package/dist/media-preview-time-display-DAiMgLPX.js.map +1 -0
- package/dist/media-provider-CyoL0bCx.js +17 -0
- package/dist/media-provider-CyoL0bCx.js.map +1 -0
- package/dist/media-provider-D7P2TLXG.d.ts +1 -0
- package/dist/media-provider-D_GL2_DN.js +8 -0
- package/dist/media-provider-D_GL2_DN.js.map +1 -0
- package/dist/media-skin-Di3vSHvS.d.ts +11 -0
- package/dist/media-skin-Di3vSHvS.d.ts.map +1 -0
- package/dist/media-skin-mHWwUPg3.js +36 -0
- package/dist/media-skin-mHWwUPg3.js.map +1 -0
- package/dist/media-time-slider-Bp2qnwsW.js +12 -0
- package/dist/media-time-slider-Bp2qnwsW.js.map +1 -0
- package/dist/media-time-slider-DvMnfYXZ.d.ts +1 -0
- package/dist/media-tooltip-BqV17mdM.d.ts +1 -0
- package/dist/media-tooltip-C4jOtQ8a.js +8 -0
- package/dist/media-tooltip-C4jOtQ8a.js.map +1 -0
- package/dist/media-volume-slider-CKSxmdQv.js +11 -0
- package/dist/media-volume-slider-CKSxmdQv.js.map +1 -0
- package/dist/media-volume-slider-DP47VLVi.d.ts +1 -0
- package/dist/mute-button-vW2sLqqY.js +50 -0
- package/dist/mute-button-vW2sLqqY.js.map +1 -0
- package/dist/play-button-aVb0g10G.js +44 -0
- package/dist/play-button-aVb0g10G.js.map +1 -0
- package/dist/popover-ty9dFDNE.js +189 -0
- package/dist/popover-ty9dFDNE.js.map +1 -0
- package/dist/{media-preview-time-display-C7jpAct6.js → preview-time-display-Dax0FQ2X.js} +6 -6
- package/dist/preview-time-display-Dax0FQ2X.js.map +1 -0
- package/dist/skins/frosted.d.ts +16 -5
- package/dist/skins/frosted.d.ts.map +1 -1
- package/dist/skins/frosted.js +90 -63
- package/dist/skins/frosted.js.map +1 -1
- package/dist/skins/minimal.d.ts +16 -5
- package/dist/skins/minimal.d.ts.map +1 -1
- package/dist/skins/minimal.js +90 -63
- package/dist/skins/minimal.js.map +1 -1
- package/dist/time-slider-CA1GMs6A.js +201 -0
- package/dist/time-slider-CA1GMs6A.js.map +1 -0
- package/dist/tooltip-CJpujx2f.js +219 -0
- package/dist/tooltip-CJpujx2f.js.map +1 -0
- package/dist/volume-slider-guD8gqpi.js +206 -0
- package/dist/volume-slider-guD8gqpi.js.map +1 -0
- package/package.json +8 -4
- package/dist/chunk-Bp6m_JJh.js +0 -13
- package/dist/icons-eJws_3Te.js.map +0 -1
- package/dist/index-AcYRyuAY.d.ts +0 -76
- package/dist/index-AcYRyuAY.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/media-preview-time-display-C7jpAct6.js.map +0 -1
- package/dist/media-skin-D44BfH6y.d.ts +0 -182
- package/dist/media-skin-D44BfH6y.d.ts.map +0 -1
- package/dist/media-skin-DR8zj-LV.js +0 -1324
- package/dist/media-skin-DR8zj-LV.js.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as
|
|
1
|
+
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
2
2
|
import { SVG_ICONS } from "@videojs/icons";
|
|
3
3
|
|
|
4
4
|
//#region src/icons/media-chrome-icon.ts
|
|
@@ -32,10 +32,6 @@ var MediaChromeIcon = class extends HTMLElement {
|
|
|
32
32
|
|
|
33
33
|
//#endregion
|
|
34
34
|
//#region src/icons/media-fullscreen-enter-alt-icon.ts
|
|
35
|
-
var media_fullscreen_enter_alt_icon_exports = /* @__PURE__ */ __export({
|
|
36
|
-
MediaFullscreenEnterAltIcon: () => MediaFullscreenEnterAltIcon,
|
|
37
|
-
getTemplateHTML: () => getTemplateHTML$8
|
|
38
|
-
});
|
|
39
35
|
function getTemplateHTML$8() {
|
|
40
36
|
return `
|
|
41
37
|
${MediaChromeIcon.getTemplateHTML()}
|
|
@@ -47,19 +43,15 @@ function getTemplateHTML$8() {
|
|
|
47
43
|
${SVG_ICONS.fullscreenEnterAlt}
|
|
48
44
|
`;
|
|
49
45
|
}
|
|
50
|
-
var
|
|
46
|
+
var MediaFullscreenEnterAltIconElement = class extends MediaChromeIcon {
|
|
51
47
|
static {
|
|
52
48
|
this.getTemplateHTML = getTemplateHTML$8;
|
|
53
49
|
}
|
|
54
50
|
};
|
|
55
|
-
|
|
51
|
+
defineCustomElement("media-fullscreen-enter-alt-icon", MediaFullscreenEnterAltIconElement);
|
|
56
52
|
|
|
57
53
|
//#endregion
|
|
58
54
|
//#region src/icons/media-fullscreen-enter-icon.ts
|
|
59
|
-
var media_fullscreen_enter_icon_exports = /* @__PURE__ */ __export({
|
|
60
|
-
MediaFullscreenEnterIcon: () => MediaFullscreenEnterIcon,
|
|
61
|
-
getTemplateHTML: () => getTemplateHTML$7
|
|
62
|
-
});
|
|
63
55
|
function getTemplateHTML$7() {
|
|
64
56
|
return `
|
|
65
57
|
${MediaChromeIcon.getTemplateHTML()}
|
|
@@ -71,19 +63,15 @@ function getTemplateHTML$7() {
|
|
|
71
63
|
${SVG_ICONS.fullscreenEnter}
|
|
72
64
|
`;
|
|
73
65
|
}
|
|
74
|
-
var
|
|
66
|
+
var MediaFullscreenEnterIconElement = class extends MediaChromeIcon {
|
|
75
67
|
static {
|
|
76
68
|
this.getTemplateHTML = getTemplateHTML$7;
|
|
77
69
|
}
|
|
78
70
|
};
|
|
79
|
-
|
|
71
|
+
defineCustomElement("media-fullscreen-enter-icon", MediaFullscreenEnterIconElement);
|
|
80
72
|
|
|
81
73
|
//#endregion
|
|
82
74
|
//#region src/icons/media-fullscreen-exit-alt-icon.ts
|
|
83
|
-
var media_fullscreen_exit_alt_icon_exports = /* @__PURE__ */ __export({
|
|
84
|
-
MediaFullscreenExitAltIcon: () => MediaFullscreenExitAltIcon,
|
|
85
|
-
getTemplateHTML: () => getTemplateHTML$6
|
|
86
|
-
});
|
|
87
75
|
function getTemplateHTML$6() {
|
|
88
76
|
return `
|
|
89
77
|
${MediaChromeIcon.getTemplateHTML()}
|
|
@@ -95,19 +83,15 @@ function getTemplateHTML$6() {
|
|
|
95
83
|
${SVG_ICONS.fullscreenExitAlt}
|
|
96
84
|
`;
|
|
97
85
|
}
|
|
98
|
-
var
|
|
86
|
+
var MediaFullscreenExitAltIconElement = class extends MediaChromeIcon {
|
|
99
87
|
static {
|
|
100
88
|
this.getTemplateHTML = getTemplateHTML$6;
|
|
101
89
|
}
|
|
102
90
|
};
|
|
103
|
-
|
|
91
|
+
defineCustomElement("media-fullscreen-exit-alt-icon", MediaFullscreenExitAltIconElement);
|
|
104
92
|
|
|
105
93
|
//#endregion
|
|
106
94
|
//#region src/icons/media-fullscreen-exit-icon.ts
|
|
107
|
-
var media_fullscreen_exit_icon_exports = /* @__PURE__ */ __export({
|
|
108
|
-
MediaFullscreenExitIcon: () => MediaFullscreenExitIcon,
|
|
109
|
-
getTemplateHTML: () => getTemplateHTML$5
|
|
110
|
-
});
|
|
111
95
|
function getTemplateHTML$5() {
|
|
112
96
|
return `
|
|
113
97
|
${MediaChromeIcon.getTemplateHTML()}
|
|
@@ -119,38 +103,30 @@ function getTemplateHTML$5() {
|
|
|
119
103
|
${SVG_ICONS.fullscreenExit}
|
|
120
104
|
`;
|
|
121
105
|
}
|
|
122
|
-
var
|
|
106
|
+
var MediaFullscreenExitIconElement = class extends MediaChromeIcon {
|
|
123
107
|
static {
|
|
124
108
|
this.getTemplateHTML = getTemplateHTML$5;
|
|
125
109
|
}
|
|
126
110
|
};
|
|
127
|
-
|
|
111
|
+
defineCustomElement("media-fullscreen-exit-icon", MediaFullscreenExitIconElement);
|
|
128
112
|
|
|
129
113
|
//#endregion
|
|
130
114
|
//#region src/icons/media-pause-icon.ts
|
|
131
|
-
var media_pause_icon_exports = /* @__PURE__ */ __export({
|
|
132
|
-
MediaPauseIcon: () => MediaPauseIcon,
|
|
133
|
-
getTemplateHTML: () => getTemplateHTML$4
|
|
134
|
-
});
|
|
135
115
|
function getTemplateHTML$4() {
|
|
136
116
|
return `
|
|
137
117
|
${MediaChromeIcon.getTemplateHTML()}
|
|
138
118
|
${SVG_ICONS.pause}
|
|
139
119
|
`;
|
|
140
120
|
}
|
|
141
|
-
var
|
|
121
|
+
var MediaPauseIconElement = class extends MediaChromeIcon {
|
|
142
122
|
static {
|
|
143
123
|
this.getTemplateHTML = getTemplateHTML$4;
|
|
144
124
|
}
|
|
145
125
|
};
|
|
146
|
-
|
|
126
|
+
defineCustomElement("media-pause-icon", MediaPauseIconElement);
|
|
147
127
|
|
|
148
128
|
//#endregion
|
|
149
129
|
//#region src/icons/media-play-icon.ts
|
|
150
|
-
var media_play_icon_exports = /* @__PURE__ */ __export({
|
|
151
|
-
MediaPlayIcon: () => MediaPlayIcon,
|
|
152
|
-
getTemplateHTML: () => getTemplateHTML$3
|
|
153
|
-
});
|
|
154
130
|
function getTemplateHTML$3() {
|
|
155
131
|
return `
|
|
156
132
|
${MediaChromeIcon.getTemplateHTML()}
|
|
@@ -162,19 +138,15 @@ function getTemplateHTML$3() {
|
|
|
162
138
|
${SVG_ICONS.play}
|
|
163
139
|
`;
|
|
164
140
|
}
|
|
165
|
-
var
|
|
141
|
+
var MediaPlayIconElement = class extends MediaChromeIcon {
|
|
166
142
|
static {
|
|
167
143
|
this.getTemplateHTML = getTemplateHTML$3;
|
|
168
144
|
}
|
|
169
145
|
};
|
|
170
|
-
|
|
146
|
+
defineCustomElement("media-play-icon", MediaPlayIconElement);
|
|
171
147
|
|
|
172
148
|
//#endregion
|
|
173
149
|
//#region src/icons/media-volume-high-icon.ts
|
|
174
|
-
var media_volume_high_icon_exports = /* @__PURE__ */ __export({
|
|
175
|
-
MediaVolumeHighIcon: () => MediaVolumeHighIcon,
|
|
176
|
-
getTemplateHTML: () => getTemplateHTML$2
|
|
177
|
-
});
|
|
178
150
|
function getTemplateHTML$2() {
|
|
179
151
|
return `
|
|
180
152
|
${MediaChromeIcon.getTemplateHTML()}
|
|
@@ -186,19 +158,15 @@ function getTemplateHTML$2() {
|
|
|
186
158
|
${SVG_ICONS.volumeHigh}
|
|
187
159
|
`;
|
|
188
160
|
}
|
|
189
|
-
var
|
|
161
|
+
var MediaVolumeHighIconElement = class extends MediaChromeIcon {
|
|
190
162
|
static {
|
|
191
163
|
this.getTemplateHTML = getTemplateHTML$2;
|
|
192
164
|
}
|
|
193
165
|
};
|
|
194
|
-
|
|
166
|
+
defineCustomElement("media-volume-high-icon", MediaVolumeHighIconElement);
|
|
195
167
|
|
|
196
168
|
//#endregion
|
|
197
169
|
//#region src/icons/media-volume-low-icon.ts
|
|
198
|
-
var media_volume_low_icon_exports = /* @__PURE__ */ __export({
|
|
199
|
-
MediaVolumeLowIcon: () => MediaVolumeLowIcon,
|
|
200
|
-
getTemplateHTML: () => getTemplateHTML$1
|
|
201
|
-
});
|
|
202
170
|
function getTemplateHTML$1() {
|
|
203
171
|
return `
|
|
204
172
|
${MediaChromeIcon.getTemplateHTML()}
|
|
@@ -210,19 +178,15 @@ function getTemplateHTML$1() {
|
|
|
210
178
|
${SVG_ICONS.volumeLow}
|
|
211
179
|
`;
|
|
212
180
|
}
|
|
213
|
-
var
|
|
181
|
+
var MediaVolumeLowIconElement = class extends MediaChromeIcon {
|
|
214
182
|
static {
|
|
215
183
|
this.getTemplateHTML = getTemplateHTML$1;
|
|
216
184
|
}
|
|
217
185
|
};
|
|
218
|
-
|
|
186
|
+
defineCustomElement("media-volume-low-icon", MediaVolumeLowIconElement);
|
|
219
187
|
|
|
220
188
|
//#endregion
|
|
221
189
|
//#region src/icons/media-volume-off-icon.ts
|
|
222
|
-
var media_volume_off_icon_exports = /* @__PURE__ */ __export({
|
|
223
|
-
MediaVolumeOffIcon: () => MediaVolumeOffIcon,
|
|
224
|
-
getTemplateHTML: () => getTemplateHTML
|
|
225
|
-
});
|
|
226
190
|
function getTemplateHTML() {
|
|
227
191
|
return `
|
|
228
192
|
${MediaChromeIcon.getTemplateHTML()}
|
|
@@ -234,13 +198,12 @@ function getTemplateHTML() {
|
|
|
234
198
|
${SVG_ICONS.volumeOff}
|
|
235
199
|
`;
|
|
236
200
|
}
|
|
237
|
-
var
|
|
201
|
+
var MediaVolumeOffIconElement = class extends MediaChromeIcon {
|
|
238
202
|
static {
|
|
239
203
|
this.getTemplateHTML = getTemplateHTML;
|
|
240
204
|
}
|
|
241
205
|
};
|
|
242
|
-
|
|
206
|
+
defineCustomElement("media-volume-off-icon", MediaVolumeOffIconElement);
|
|
243
207
|
|
|
244
208
|
//#endregion
|
|
245
|
-
|
|
246
|
-
//# sourceMappingURL=icons-eJws_3Te.js.map
|
|
209
|
+
//# sourceMappingURL=icons-CuxuONCk.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icons-CuxuONCk.js","names":["getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML","getTemplateHTML"],"sources":["../src/icons/media-chrome-icon.ts","../src/icons/media-fullscreen-enter-alt-icon.ts","../src/icons/media-fullscreen-enter-icon.ts","../src/icons/media-fullscreen-exit-alt-icon.ts","../src/icons/media-fullscreen-exit-icon.ts","../src/icons/media-pause-icon.ts","../src/icons/media-play-icon.ts","../src/icons/media-volume-high-icon.ts","../src/icons/media-volume-low-icon.ts","../src/icons/media-volume-off-icon.ts"],"sourcesContent":["export function getTemplateHTML() {\n return /* html */ `\n <style>\n :host {\n display: inline-block;\n }\n svg {\n fill: currentColor;\n }\n </style>\n `;\n}\n\nexport class MediaChromeIcon extends HTMLElement {\n static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n static getTemplateHTML: () => string = getTemplateHTML;\n\n constructor() {\n super();\n\n if (!this.shadowRoot) {\n this.attachShadow((this.constructor as typeof MediaChromeIcon).shadowRootOptions);\n this.shadowRoot!.innerHTML = (this.constructor as typeof MediaChromeIcon).getTemplateHTML();\n }\n }\n}\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n return /* html */ `\n ${MediaChromeIcon.getTemplateHTML()}\n <style>\n :host {\n display: var(--media-fullscreen-enter-icon-display, inline-flex);\n }\n </style>\n ${SVG_ICONS.fullscreenEnterAlt}\n `;\n}\n\nexport class MediaFullscreenEnterAltIconElement extends MediaChromeIcon {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-fullscreen-enter-alt-icon', MediaFullscreenEnterAltIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n return /* html */ `\n ${MediaChromeIcon.getTemplateHTML()}\n <style>\n :host {\n display: var(--media-fullscreen-enter-icon-display, inline-flex);\n }\n </style>\n ${SVG_ICONS.fullscreenEnter}\n `;\n}\n\nexport class MediaFullscreenEnterIconElement extends MediaChromeIcon {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-fullscreen-enter-icon', MediaFullscreenEnterIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n return /* html */ `\n ${MediaChromeIcon.getTemplateHTML()}\n <style>\n :host {\n display: var(--media-fullscreen-exit-icon-display, inline-flex);\n }\n </style>\n ${SVG_ICONS.fullscreenExitAlt}\n `;\n}\n\nexport class MediaFullscreenExitAltIconElement extends MediaChromeIcon {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-fullscreen-exit-alt-icon', MediaFullscreenExitAltIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n return /* html */ `\n ${MediaChromeIcon.getTemplateHTML()}\n <style>\n :host {\n display: var(--media-fullscreen-exit-icon-display, inline-flex);\n }\n </style>\n ${SVG_ICONS.fullscreenExit}\n `;\n}\n\nexport class MediaFullscreenExitIconElement extends MediaChromeIcon {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-fullscreen-exit-icon', MediaFullscreenExitIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n return /* html */ `\n ${MediaChromeIcon.getTemplateHTML()}\n ${SVG_ICONS.pause}\n `;\n}\n\nexport class MediaPauseIconElement extends MediaChromeIcon {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-pause-icon', MediaPauseIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n return /* html */ `\n ${MediaChromeIcon.getTemplateHTML()}\n <style>\n :host {\n display: var(--media-play-icon-display, inline-flex);\n }\n </style>\n ${SVG_ICONS.play}\n `;\n}\n\nexport class MediaPlayIconElement extends MediaChromeIcon {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-play-icon', MediaPlayIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n return /* html */ `\n ${MediaChromeIcon.getTemplateHTML()}\n <style>\n :host {\n display: var(--media-play-icon-display, inline-flex);\n }\n </style>\n ${SVG_ICONS.volumeHigh}\n `;\n}\n\nexport class MediaVolumeHighIconElement extends MediaChromeIcon {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-volume-high-icon', MediaVolumeHighIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n return /* html */ `\n ${MediaChromeIcon.getTemplateHTML()}\n <style>\n :host {\n display: var(--media-play-icon-display, inline-flex);\n }\n </style>\n ${SVG_ICONS.volumeLow}\n `;\n}\n\nexport class MediaVolumeLowIconElement extends MediaChromeIcon {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-volume-low-icon', MediaVolumeLowIconElement);\n","import { SVG_ICONS } from '@videojs/icons';\n\nimport { defineCustomElement } from '@/utils/custom-element';\nimport { MediaChromeIcon } from './media-chrome-icon';\n\nexport function getTemplateHTML() {\n return /* html */ `\n ${MediaChromeIcon.getTemplateHTML()}\n <style>\n :host {\n display: var(--media-play-icon-display, inline-flex);\n }\n </style>\n ${SVG_ICONS.volumeOff}\n `;\n}\n\nexport class MediaVolumeOffIconElement extends MediaChromeIcon {\n static getTemplateHTML: () => string = getTemplateHTML;\n}\n\ndefineCustomElement('media-volume-off-icon', MediaVolumeOffIconElement);\n"],"mappings":";;;;AAAA,SAAgBA,oBAAkB;AAChC,QAAkB;;;;;;;;;;;AAYpB,IAAa,kBAAb,cAAqC,YAAY;;2BACpB,EAAE,MAAM,QAA0B;;;yBACtBA;;CAEvC,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;AACjF,QAAK,WAAY,YAAa,KAAK,YAAuC,iBAAiB;;;;;;;ACjBjG,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,mBAAmB;;;AAInC,IAAa,qCAAb,cAAwD,gBAAgB;;yBAC/BA;;;AAGzC,oBAAoB,mCAAmC,mCAAmC;;;;AChB1F,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,gBAAgB;;;AAIhC,IAAa,kCAAb,cAAqD,gBAAgB;;yBAC5BA;;;AAGzC,oBAAoB,+BAA+B,gCAAgC;;;;AChBnF,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,kBAAkB;;;AAIlC,IAAa,oCAAb,cAAuD,gBAAgB;;yBAC9BA;;;AAGzC,oBAAoB,kCAAkC,kCAAkC;;;;AChBxF,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,eAAe;;;AAI/B,IAAa,iCAAb,cAAoD,gBAAgB;;yBAC3BA;;;AAGzC,oBAAoB,8BAA8B,+BAA+B;;;;AChBjF,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;MAClC,UAAU,MAAM;;;AAItB,IAAa,wBAAb,cAA2C,gBAAgB;;yBAClBA;;;AAGzC,oBAAoB,oBAAoB,sBAAsB;;;;ACX9D,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,KAAK;;;AAIrB,IAAa,uBAAb,cAA0C,gBAAgB;;yBACjBA;;;AAGzC,oBAAoB,mBAAmB,qBAAqB;;;;AChB5D,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,WAAW;;;AAI3B,IAAa,6BAAb,cAAgD,gBAAgB;;yBACvBA;;;AAGzC,oBAAoB,0BAA0B,2BAA2B;;;;AChBzE,SAAgBC,oBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,UAAU;;;AAI1B,IAAa,4BAAb,cAA+C,gBAAgB;;yBACtBA;;;AAGzC,oBAAoB,yBAAyB,0BAA0B;;;;AChBvE,SAAgB,kBAAkB;AAChC,QAAkB;MACd,gBAAgB,iBAAiB,CAAC;;;;;;MAMlC,UAAU,UAAU;;;AAI1B,IAAa,4BAAb,cAA+C,gBAAgB;;yBACtB;;;AAGzC,oBAAoB,yBAAyB,0BAA0B"}
|
package/dist/icons.d.ts
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export { media_fullscreen_enter_alt_icon_d_exports as MediaFullscreenEnterAltIcon, media_fullscreen_enter_icon_d_exports as MediaFullscreenEnterIcon, media_fullscreen_exit_alt_icon_d_exports as MediaFullscreenExitAltIcon, media_fullscreen_exit_icon_d_exports as MediaFullscreenExitIcon, media_pause_icon_d_exports as MediaPauseIcon, media_play_icon_d_exports as MediaPlayIcon, media_volume_high_icon_d_exports as MediaVolumeHighIcon, media_volume_low_icon_d_exports as MediaVolumeLowIcon, media_volume_off_icon_d_exports as MediaVolumeOffIcon };
|
|
1
|
+
import "./index-LKrIp3Oo.js";
|
package/dist/icons.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
export { media_fullscreen_enter_alt_icon_exports as MediaFullscreenEnterAltIcon, media_fullscreen_enter_icon_exports as MediaFullscreenEnterIcon, media_fullscreen_exit_alt_icon_exports as MediaFullscreenExitAltIcon, media_fullscreen_exit_icon_exports as MediaFullscreenExitIcon, media_pause_icon_exports as MediaPauseIcon, media_play_icon_exports as MediaPlayIcon, media_volume_high_icon_exports as MediaVolumeHighIcon, media_volume_low_icon_exports as MediaVolumeLowIcon, media_volume_off_icon_exports as MediaVolumeOffIcon };
|
|
1
|
+
import "./custom-element-3bDlB2XO.js";
|
|
2
|
+
import "./icons-CuxuONCk.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,149 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { t as MediaSkinElement } from "./media-skin-Di3vSHvS.js";
|
|
2
|
+
import { CurrentTimeDisplayState, DurationDisplayState, FullscreenButtonState, MediaStore, MuteButtonState, PlayButtonState, PreviewTimeDisplayState } from "@videojs/core/store";
|
|
3
|
+
import { Constructor, CustomElement } from "@open-wc/context-protocol";
|
|
4
|
+
import { Placement } from "@floating-ui/dom";
|
|
5
|
+
import { TimeSlider, VolumeSlider } from "@videojs/core";
|
|
2
6
|
|
|
3
|
-
//#region src/
|
|
7
|
+
//#region src/utils/component-factory.d.ts
|
|
4
8
|
|
|
5
|
-
|
|
9
|
+
interface ConnectedComponentConstructor<State> {
|
|
10
|
+
new (state: State): HTMLElement;
|
|
11
|
+
}
|
|
6
12
|
//#endregion
|
|
7
|
-
|
|
13
|
+
//#region src/elements/current-time-display.d.ts
|
|
14
|
+
|
|
15
|
+
declare const CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplayState>;
|
|
16
|
+
//#endregion
|
|
17
|
+
//#region src/elements/duration-display.d.ts
|
|
18
|
+
|
|
19
|
+
declare const DurationDisplayElement: ConnectedComponentConstructor<DurationDisplayState>;
|
|
20
|
+
//#endregion
|
|
21
|
+
//#region src/elements/fullscreen-button.d.ts
|
|
22
|
+
|
|
23
|
+
declare const FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonState>;
|
|
24
|
+
//#endregion
|
|
25
|
+
//#region src/elements/mute-button.d.ts
|
|
26
|
+
declare const MuteButtonElement: ConnectedComponentConstructor<MuteButtonState>;
|
|
27
|
+
//#endregion
|
|
28
|
+
//#region src/elements/play-button.d.ts
|
|
29
|
+
declare const PlayButtonElement: ConnectedComponentConstructor<PlayButtonState>;
|
|
30
|
+
//#endregion
|
|
31
|
+
//#region src/elements/popover.d.ts
|
|
32
|
+
declare class PopoverElement extends HTMLElement {
|
|
33
|
+
#private;
|
|
34
|
+
connectedCallback(): void;
|
|
35
|
+
disconnectedCallback(): void;
|
|
36
|
+
handleEvent(event: Event): void;
|
|
37
|
+
static get observedAttributes(): string[];
|
|
38
|
+
get openOnHover(): boolean;
|
|
39
|
+
get delay(): number;
|
|
40
|
+
get closeDelay(): number;
|
|
41
|
+
get side(): Placement;
|
|
42
|
+
get sideOffset(): number;
|
|
43
|
+
}
|
|
44
|
+
//#endregion
|
|
45
|
+
//#region src/elements/preview-time-display.d.ts
|
|
46
|
+
declare const PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState>;
|
|
47
|
+
//#endregion
|
|
48
|
+
//#region src/elements/time-slider.d.ts
|
|
49
|
+
|
|
50
|
+
declare const TimeSliderRootElement: ConnectedComponentConstructor<{
|
|
51
|
+
currentTime: number;
|
|
52
|
+
duration: number;
|
|
53
|
+
requestSeek: (time: number) => void;
|
|
54
|
+
core: TimeSlider | null;
|
|
55
|
+
}>;
|
|
56
|
+
declare const TimeSliderTrackElement: ConnectedComponentConstructor<any>;
|
|
57
|
+
declare const TimeSliderProgressElement: ConnectedComponentConstructor<any>;
|
|
58
|
+
declare const TimeSliderPointerElement: ConnectedComponentConstructor<any>;
|
|
59
|
+
declare const TimeSliderThumbElement: ConnectedComponentConstructor<any>;
|
|
60
|
+
declare const TimeSliderElement: {
|
|
61
|
+
Root: typeof TimeSliderRootElement;
|
|
62
|
+
Track: typeof TimeSliderTrackElement;
|
|
63
|
+
Progress: typeof TimeSliderProgressElement;
|
|
64
|
+
Pointer: typeof TimeSliderPointerElement;
|
|
65
|
+
Thumb: typeof TimeSliderThumbElement;
|
|
66
|
+
};
|
|
67
|
+
//#endregion
|
|
68
|
+
//#region src/elements/tooltip.d.ts
|
|
69
|
+
declare class TooltipElement extends HTMLElement {
|
|
70
|
+
#private;
|
|
71
|
+
connectedCallback(): void;
|
|
72
|
+
disconnectedCallback(): void;
|
|
73
|
+
handleEvent(event: Event): void;
|
|
74
|
+
static get observedAttributes(): string[];
|
|
75
|
+
get delay(): number;
|
|
76
|
+
get closeDelay(): number;
|
|
77
|
+
get trackCursorAxis(): "x" | "y" | "both" | undefined;
|
|
78
|
+
get side(): Placement;
|
|
79
|
+
get sideOffset(): number;
|
|
80
|
+
get collisionPadding(): number;
|
|
81
|
+
}
|
|
82
|
+
//#endregion
|
|
83
|
+
//#region src/elements/volume-slider.d.ts
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Connected VolumeSlider Root component using hook-style architecture
|
|
87
|
+
*/
|
|
88
|
+
declare const VolumeSliderRootElement: ConnectedComponentConstructor<{
|
|
89
|
+
volume: number;
|
|
90
|
+
muted: boolean;
|
|
91
|
+
volumeLevel: string;
|
|
92
|
+
requestVolumeChange: (volume: number) => void;
|
|
93
|
+
core: VolumeSlider | null;
|
|
94
|
+
}>;
|
|
95
|
+
/**
|
|
96
|
+
* Connected VolumeSlider Track component
|
|
97
|
+
*/
|
|
98
|
+
declare const VolumeSliderTrackElement: ConnectedComponentConstructor<any>;
|
|
99
|
+
/**
|
|
100
|
+
* Connected VolumeSlider Progress component
|
|
101
|
+
*/
|
|
102
|
+
declare const VolumeSliderProgressElement: ConnectedComponentConstructor<any>;
|
|
103
|
+
/**
|
|
104
|
+
* Connected VolumeSlider Thumb component
|
|
105
|
+
*/
|
|
106
|
+
declare const VolumeSliderThumbElement: ConnectedComponentConstructor<any>;
|
|
107
|
+
/**
|
|
108
|
+
* Compound VolumeSlider component object
|
|
109
|
+
*/
|
|
110
|
+
declare const VolumeSliderElement: {
|
|
111
|
+
Root: typeof VolumeSliderRootElement;
|
|
112
|
+
Track: typeof VolumeSliderTrackElement;
|
|
113
|
+
Progress: typeof VolumeSliderProgressElement;
|
|
114
|
+
Thumb: typeof VolumeSliderThumbElement;
|
|
115
|
+
};
|
|
116
|
+
//#endregion
|
|
117
|
+
//#region src/media/media-container.d.ts
|
|
118
|
+
declare const CustomElementConsumer: Constructor<CustomElement & HTMLElement>;
|
|
119
|
+
declare class MediaContainerElement extends CustomElementConsumer {
|
|
120
|
+
static shadowRootOptions: {
|
|
121
|
+
mode: ShadowRootMode;
|
|
122
|
+
};
|
|
123
|
+
static getTemplateHTML: () => string;
|
|
124
|
+
_mediaStore: any;
|
|
125
|
+
_mediaSlot: HTMLSlotElement;
|
|
126
|
+
_paused: boolean;
|
|
127
|
+
contexts: {
|
|
128
|
+
mediaStore: (mediaStore: any) => void;
|
|
129
|
+
};
|
|
130
|
+
constructor();
|
|
131
|
+
connectedCallback(): void;
|
|
132
|
+
disconnectedCallback(): void;
|
|
133
|
+
_registerContainerStateOwner: () => void;
|
|
134
|
+
_unregisterContainerStateOwner: () => void;
|
|
135
|
+
_handleMediaSlotChange: () => void;
|
|
136
|
+
_handleClick: (event: Event) => void;
|
|
137
|
+
_subscribeToPlayState: () => void;
|
|
138
|
+
}
|
|
139
|
+
//#endregion
|
|
140
|
+
//#region src/media/media-provider.d.ts
|
|
141
|
+
declare const ProviderHTMLElement: Constructor<CustomElement & HTMLElement>;
|
|
142
|
+
declare class MediaProviderElement extends ProviderHTMLElement {
|
|
143
|
+
contexts: {
|
|
144
|
+
mediaStore: () => MediaStore;
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
//#endregion
|
|
148
|
+
export { CurrentTimeDisplayElement, DurationDisplayElement, FullscreenButtonElement, MediaContainerElement, MediaProviderElement, MediaSkinElement, MuteButtonElement, PlayButtonElement, PopoverElement, PreviewTimeDisplayElement, TimeSliderElement, TooltipElement, VolumeSliderElement };
|
|
8
149
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":["useCurrentTimeDisplayState: StateHook<{\n currentTime: number | undefined;\n duration: number | undefined;\n}>","getCurrentTimeDisplayProps: PropsHook<{\n currentTime: number | undefined;\n duration: number | undefined;\n}>","CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplayState>","useDurationDisplayState: StateHook<{\n duration: number | undefined;\n}>","getDurationDisplayProps: PropsHook<{\n duration: number | undefined;\n}>","DurationDisplayElement: ConnectedComponentConstructor<DurationDisplayState>","getFullscreenButtonState: StateHook<{ fullscreen: boolean }>","getFullscreenButtonProps: PropsHook<{ fullscreen: boolean }>","FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButtonState>","getMuteButtonState: StateHook<{\n muted: boolean;\n volumeLevel: string;\n}>","getMuteButtonProps: PropsHook<{\n muted: boolean;\n volumeLevel: string;\n}>","MuteButtonElement: ConnectedComponentConstructor<MuteButtonState>","getPlayButtonState: StateHook<{ paused: boolean }>","getPlayButtonProps: PropsHook<{ paused: boolean }>","PlayButtonElement: ConnectedComponentConstructor<PlayButtonState>","usePreviewTimeDisplayState: StateHook<{\n previewTime: number | undefined;\n}>","getPreviewTimeDisplayProps: PropsHook<{\n previewTime: number | undefined;\n}>","PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplayState>","getTimeSliderRootProps: PropsHook<{\n currentTime: number;\n duration: number;\n requestSeek: (time: number) => void;\n core: CoreTimeSlider | null;\n}>","useTimeSliderRootState: StateHook<{\n currentTime: number;\n duration: number;\n requestSeek: (time: number) => void;\n core: CoreTimeSlider | null;\n}>","getTimeSliderTrackProps: PropsHook<Record<string, never>>","getTimeSliderProgressProps: PropsHook<Record<string, never>>","getTimeSliderPointerProps: PropsHook<Record<string, never>>","getTimeSliderThumbProps: PropsHook<Record<string, never>>","TimeSliderRootElement: ConnectedComponentConstructor<{\n currentTime: number;\n duration: number;\n requestSeek: (time: number) => void;\n core: CoreTimeSlider | null;\n}>","TimeSliderTrackElement: ConnectedComponentConstructor<any>","TimeSliderProgressElement: ConnectedComponentConstructor<any>","TimeSliderPointerElement: ConnectedComponentConstructor<any>","TimeSliderThumbElement: ConnectedComponentConstructor<any>","getVolumeSliderRootProps: PropsHook<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}>","useVolumeSliderRootState: StateHook<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}>","getVolumeSliderTrackProps: PropsHook<Record<string, never>>","getVolumeSliderProgressProps: PropsHook<Record<string, never>>","getVolumeSliderThumbProps: PropsHook<Record<string, never>>","VolumeSliderRootElement: ConnectedComponentConstructor<{\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider | null;\n}>","VolumeSliderTrackElement: ConnectedComponentConstructor<any>","VolumeSliderProgressElement: ConnectedComponentConstructor<any>","VolumeSliderThumbElement: ConnectedComponentConstructor<any>","CustomElementConsumer: Constructor<CustomElement & HTMLElement>","ProviderHTMLElement: Constructor<CustomElement & HTMLElement>"],"sources":["../src/utils/component-factory.ts","../src/elements/current-time-display.ts","../src/elements/duration-display.ts","../src/elements/fullscreen-button.ts","../src/elements/mute-button.ts","../src/elements/play-button.ts","../src/elements/popover.ts","../src/elements/preview-time-display.ts","../src/elements/time-slider.ts","../src/elements/tooltip.ts","../src/elements/volume-slider.ts","../src/media/media-container.ts","../src/media/media-provider.ts"],"sourcesContent":[],"mappings":";;;;;;;;UAaiB;cACH,QAAQ;;;;;cCqETE,2BAA2B,8BAA8B;;;;cCNzDG,wBAAwB,8BAA8B;;;;AEQtDM,cDXAH,uBCWiD,EDXxB,6BCWN,CDXoC,qBCWpC,CAAA;;;AAAnBG,cAAAA,iBAAiD,EAA9B,6BAAA,CAA8B,eAA9B,CAAA;;;ADXnBH,cEVAM,iBFUuD,EEVpC,6BFUM,CEVwB,eFUxB,CAAA;;;cG1DzB,cAAA,SAAuB,WAAA;;;;qBAmCf;;ENtCrB,IAAiB,WAAA,CAAA,CAAA,EAAA,OAAA;;;cM4EH;ELNd,IAAaZ,UAAAA,CAAAA,CAAAA,EAAAA,MAAAA;;;;cMVAe,2BAA2B,8BAA8B;;;;cCsKzDO,uBAAuB;;ECzOpC,QAAa,EAAA,MAAA;EAqCQ,WAAA,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAiCP,IAAA,EDuKN,UCvKM,GAAA,IAAA;CAtEsB,CAAA;AAAA,cDgPvBC,sBChPuB,EDgPC,6BChPD,CAAA,GAAA,CAAA;cDuPvBC,2BAA2B;cAO3BC,0BAA0B;cAO1BC,wBAAwB;AE/BxBM,cFsCA,iBEtCAA,EAAAA;EAWb,IAAaC,EAAAA,OFqCE,qBErCwB;EAUvC,KAAaC,EAAAA,OF4BG,sBE5B0B;EAU1C,QAAaC,EAAAA,OFmBM,yBEnBoB;EAUvC,OAAa,EAAA,OFUK,wBEVL;EASE,KAAA,EAAA,OFEC,sBEFD;CACC;;;cDzRH,cAAA,SAAuB,WAAA;;;;qBAqCf;;ET9BrB,IAAiB,KAAA,CAAA,CAAA,EAAA,MAAA;;;cS+DH;EROd,IAAanC,UAAAA,CAAAA,CAAAA,EAAAA,MAAAA;;;;;;;;;AUpEgB,cD6NhBgC,uBC7NgB,ED6NS,6BC7NT,CAAA;EAE7B,MAAa,EAAA,MAAA;EACkC,KAAA,EAAA,OAAA;EAIjC,WAAA,EAAA,MAAA;EAmDW,mBAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAxDkB,IAAA,EDgOnC,YChOmC,GAAA,IAAA;CAAA,CAAA;;;;ACXrCK,cFiPOJ,wBEjP0C,EFiPhB,6BEjPgB,CAAA,GAAA,CAAA;;;;AAA5B,cF2PdC,2BE3Pc,EF2Pe,6BE3Pf,CAAA,GAAA,CAAA;AAE3B;;;cFmQaC,0BAA0B;;;;cAU1B;eASE;gBACC;mBACG;gBACH;;;;cClRVC,uBAAuB,YAAY,gBAAgB;cAE5C,qBAAA,SAA8B,qBAAA;;UACI;;EXL/C,OAAiB,eAAA,EAAA,GAAA,GAAA,MAAA;;cWSH;;EV6Dd,QAAapC,EAAAA;;;;ECNb,iBAAaG,CAAAA,CAAAA,EAAAA,IAAAA;;;;ECHb,sBAAaG,EAAAA,GAAAA,GAAuD,IAAA;wBQD3C;;;;;cCnEnB+B,qBAAqB,YAAY,gBAAgB;cAE1C,oBAAA,SAA6B,mBAAA;;sBAEtB;;AZGpB"}
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,17 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "./component-factory-DeAN6cjC.js";
|
|
2
|
+
import { t as CurrentTimeDisplayElement } from "./current-time-display-C3qndGf5.js";
|
|
3
|
+
import { t as DurationDisplayElement } from "./duration-display-JOPp3bdU.js";
|
|
4
|
+
import "./button-D1DWjsQu.js";
|
|
5
|
+
import { t as FullscreenButtonElement } from "./fullscreen-button-CGO2UJjs.js";
|
|
6
|
+
import { t as MuteButtonElement } from "./mute-button-vW2sLqqY.js";
|
|
7
|
+
import { t as PlayButtonElement } from "./play-button-aVb0g10G.js";
|
|
8
|
+
import { t as PopoverElement } from "./popover-ty9dFDNE.js";
|
|
9
|
+
import { t as PreviewTimeDisplayElement } from "./preview-time-display-Dax0FQ2X.js";
|
|
10
|
+
import { t as TimeSliderElement } from "./time-slider-CA1GMs6A.js";
|
|
11
|
+
import { t as TooltipElement } from "./tooltip-CJpujx2f.js";
|
|
12
|
+
import { t as VolumeSliderElement } from "./volume-slider-guD8gqpi.js";
|
|
13
|
+
import { t as MediaContainerElement } from "./media-container-C0MUzkJ_.js";
|
|
14
|
+
import { t as MediaProviderElement } from "./media-provider-CyoL0bCx.js";
|
|
15
|
+
import { t as MediaSkinElement } from "./media-skin-mHWwUPg3.js";
|
|
2
16
|
|
|
3
|
-
|
|
4
|
-
function defineVjsPlayer() {
|
|
5
|
-
/** @TODO - Reimplement me (at least as a POC) (CJP) */
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
//#endregion
|
|
9
|
-
export { CurrentTimeDisplay, DurationDisplay, FullscreenButton, MediaContainer, MediaProvider, MediaSkin, MuteButton, PlayButton, Popover, TimeSlider, Tooltip, VolumeSlider, defineVjsPlayer };
|
|
10
|
-
//# sourceMappingURL=index.js.map
|
|
17
|
+
export { CurrentTimeDisplayElement, DurationDisplayElement, FullscreenButtonElement, MediaContainerElement, MediaProviderElement, MediaSkinElement, MuteButtonElement, PlayButtonElement, PopoverElement, PreviewTimeDisplayElement, TimeSliderElement, TooltipElement, VolumeSliderElement };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { t as MediaContainerElement } from "./media-container-C0MUzkJ_.js";
|
|
2
|
+
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
3
|
+
|
|
4
|
+
//#region src/define/media-container.ts
|
|
5
|
+
defineCustomElement("media-container", MediaContainerElement);
|
|
6
|
+
|
|
7
|
+
//#endregion
|
|
8
|
+
//# sourceMappingURL=media-container-BGEXSi9g.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-container-BGEXSi9g.js","names":[],"sources":["../src/define/media-container.ts"],"sourcesContent":["import { MediaContainerElement } from '@/media/media-container';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-container', MediaContainerElement);\n"],"mappings":";;;;AAGA,oBAAoB,mBAAmB,sBAAsB"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { ConsumerMixin } from "@open-wc/context-protocol";
|
|
2
|
+
|
|
3
|
+
//#region src/media/media-container.ts
|
|
4
|
+
function getTemplateHTML() {
|
|
5
|
+
return `
|
|
6
|
+
<slot name="media"></slot>
|
|
7
|
+
<slot></slot>
|
|
8
|
+
<div id="@default_portal_id" style={ position: absolute; zIndex: 10; }>
|
|
9
|
+
<slot name="portal"></slot>
|
|
10
|
+
</div>
|
|
11
|
+
`;
|
|
12
|
+
}
|
|
13
|
+
const CustomElementConsumer = ConsumerMixin(HTMLElement);
|
|
14
|
+
var MediaContainerElement = class extends CustomElementConsumer {
|
|
15
|
+
static {
|
|
16
|
+
this.shadowRootOptions = { mode: "open" };
|
|
17
|
+
}
|
|
18
|
+
static {
|
|
19
|
+
this.getTemplateHTML = getTemplateHTML;
|
|
20
|
+
}
|
|
21
|
+
constructor() {
|
|
22
|
+
super();
|
|
23
|
+
this._paused = true;
|
|
24
|
+
this.contexts = { mediaStore: (mediaStore) => {
|
|
25
|
+
this._mediaStore = mediaStore;
|
|
26
|
+
this._handleMediaSlotChange();
|
|
27
|
+
this._registerContainerStateOwner();
|
|
28
|
+
this._subscribeToPlayState();
|
|
29
|
+
} };
|
|
30
|
+
this._registerContainerStateOwner = () => {
|
|
31
|
+
if (!this._mediaStore) return;
|
|
32
|
+
this._mediaStore.dispatch({
|
|
33
|
+
type: "containerstateownerchangerequest",
|
|
34
|
+
detail: this
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
this._unregisterContainerStateOwner = () => {
|
|
38
|
+
if (!this._mediaStore) return;
|
|
39
|
+
this._mediaStore.dispatch({
|
|
40
|
+
type: "containerstateownerchangerequest",
|
|
41
|
+
detail: null
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
this._handleMediaSlotChange = () => {
|
|
45
|
+
const media = this._mediaSlot.assignedElements({ flatten: true })[0];
|
|
46
|
+
this._mediaStore.dispatch({
|
|
47
|
+
type: "mediastateownerchangerequest",
|
|
48
|
+
detail: media
|
|
49
|
+
});
|
|
50
|
+
};
|
|
51
|
+
this._handleClick = (event) => {
|
|
52
|
+
if (!this._mediaStore) return;
|
|
53
|
+
if (!["video", "audio"].includes(event.target.localName || "")) return;
|
|
54
|
+
if (this._paused) this._mediaStore.dispatch({ type: "playrequest" });
|
|
55
|
+
else this._mediaStore.dispatch({ type: "pauserequest" });
|
|
56
|
+
};
|
|
57
|
+
this._subscribeToPlayState = () => {
|
|
58
|
+
if (!this._mediaStore) return;
|
|
59
|
+
this._mediaStore.subscribe((state) => {
|
|
60
|
+
this._paused = state.paused ?? true;
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
if (!this.shadowRoot) {
|
|
64
|
+
this.attachShadow(this.constructor.shadowRootOptions);
|
|
65
|
+
this.shadowRoot.innerHTML = this.constructor.getTemplateHTML();
|
|
66
|
+
}
|
|
67
|
+
this._mediaSlot = this.shadowRoot.querySelector("slot[name=media]");
|
|
68
|
+
this._mediaSlot.addEventListener("slotchange", this._handleMediaSlotChange);
|
|
69
|
+
this.addEventListener("click", this._handleClick);
|
|
70
|
+
}
|
|
71
|
+
connectedCallback() {
|
|
72
|
+
super.connectedCallback?.();
|
|
73
|
+
this._registerContainerStateOwner();
|
|
74
|
+
}
|
|
75
|
+
disconnectedCallback() {
|
|
76
|
+
super.disconnectedCallback?.();
|
|
77
|
+
this._unregisterContainerStateOwner();
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
//#endregion
|
|
82
|
+
export { MediaContainerElement as t };
|
|
83
|
+
//# sourceMappingURL=media-container-C0MUzkJ_.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-container-C0MUzkJ_.js","names":["CustomElementConsumer: Constructor<CustomElement & HTMLElement>"],"sources":["../src/media/media-container.ts"],"sourcesContent":["import type { Constructor, CustomElement } from '@open-wc/context-protocol';\n\nimport { ConsumerMixin } from '@open-wc/context-protocol';\n\n/* @TODO We need to make sure portal logic is non-brittle longer term (CJP) */\nexport function getTemplateHTML() {\n return /* html */ `\n <slot name=\"media\"></slot>\n <slot></slot>\n <div id=\"@default_portal_id\" style={ position: absolute; zIndex: 10; }>\n <slot name=\"portal\"></slot>\n </div>\n `;\n}\n\nconst CustomElementConsumer: Constructor<CustomElement & HTMLElement> = ConsumerMixin(HTMLElement);\n\nexport class MediaContainerElement extends CustomElementConsumer {\n static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n static getTemplateHTML: () => string = getTemplateHTML;\n\n _mediaStore: any;\n _mediaSlot: HTMLSlotElement;\n _paused: boolean = true;\n contexts = {\n mediaStore: (mediaStore: any): void => {\n this._mediaStore = mediaStore;\n this._handleMediaSlotChange();\n this._registerContainerStateOwner();\n this._subscribeToPlayState();\n },\n };\n\n constructor() {\n super();\n\n if (!this.shadowRoot) {\n this.attachShadow((this.constructor as typeof MediaContainerElement).shadowRootOptions);\n this.shadowRoot!.innerHTML = (this.constructor as typeof MediaContainerElement).getTemplateHTML();\n }\n\n this._mediaSlot = this.shadowRoot!.querySelector('slot[name=media]') as HTMLSlotElement;\n this._mediaSlot.addEventListener('slotchange', this._handleMediaSlotChange);\n\n // Add click handler for play/pause functionality\n this.addEventListener('click', this._handleClick);\n }\n\n connectedCallback(): void {\n super.connectedCallback?.();\n this._registerContainerStateOwner();\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n this._unregisterContainerStateOwner();\n }\n\n _registerContainerStateOwner = (): void => {\n if (!this._mediaStore) return;\n this._mediaStore.dispatch({ type: 'containerstateownerchangerequest', detail: this });\n };\n\n _unregisterContainerStateOwner = (): void => {\n if (!this._mediaStore) return;\n this._mediaStore.dispatch({ type: 'containerstateownerchangerequest', detail: null });\n };\n\n _handleMediaSlotChange = (): void => {\n const media = this._mediaSlot.assignedElements({ flatten: true })[0];\n this._mediaStore.dispatch({ type: 'mediastateownerchangerequest', detail: media });\n };\n\n _handleClick = (event: Event): void => {\n if (!this._mediaStore) return;\n\n if (!['video', 'audio'].includes((event.target as HTMLElement).localName || '')) return;\n\n if (this._paused) {\n this._mediaStore.dispatch({ type: 'playrequest' });\n } else {\n this._mediaStore.dispatch({ type: 'pauserequest' });\n }\n };\n\n _subscribeToPlayState = (): void => {\n if (!this._mediaStore) return;\n\n // Subscribe to paused state changes\n this._mediaStore.subscribe((state: any) => {\n this._paused = state.paused ?? true;\n });\n };\n}\n"],"mappings":";;;AAKA,SAAgB,kBAAkB;AAChC,QAAkB;;;;;;;;AASpB,MAAMA,wBAAkE,cAAc,YAAY;AAElG,IAAa,wBAAb,cAA2C,sBAAsB;;2BACpC,EAAE,MAAM,QAA0B;;;yBACtB;;CAcvC,cAAc;AACZ,SAAO;iBAXU;kBACR,EACT,aAAa,eAA0B;AACrC,QAAK,cAAc;AACnB,QAAK,wBAAwB;AAC7B,QAAK,8BAA8B;AACnC,QAAK,uBAAuB;KAE/B;4CA2B0C;AACzC,OAAI,CAAC,KAAK,YAAa;AACvB,QAAK,YAAY,SAAS;IAAE,MAAM;IAAoC,QAAQ;IAAM,CAAC;;8CAG1C;AAC3C,OAAI,CAAC,KAAK,YAAa;AACvB,QAAK,YAAY,SAAS;IAAE,MAAM;IAAoC,QAAQ;IAAM,CAAC;;sCAGlD;GACnC,MAAM,QAAQ,KAAK,WAAW,iBAAiB,EAAE,SAAS,MAAM,CAAC,CAAC;AAClE,QAAK,YAAY,SAAS;IAAE,MAAM;IAAgC,QAAQ;IAAO,CAAC;;uBAGpE,UAAuB;AACrC,OAAI,CAAC,KAAK,YAAa;AAEvB,OAAI,CAAC,CAAC,SAAS,QAAQ,CAAC,SAAU,MAAM,OAAuB,aAAa,GAAG,CAAE;AAEjF,OAAI,KAAK,QACP,MAAK,YAAY,SAAS,EAAE,MAAM,eAAe,CAAC;OAElD,MAAK,YAAY,SAAS,EAAE,MAAM,gBAAgB,CAAC;;qCAInB;AAClC,OAAI,CAAC,KAAK,YAAa;AAGvB,QAAK,YAAY,WAAW,UAAe;AACzC,SAAK,UAAU,MAAM,UAAU;KAC/B;;AAvDF,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAA6C,kBAAkB;AACvF,QAAK,WAAY,YAAa,KAAK,YAA6C,iBAAiB;;AAGnG,OAAK,aAAa,KAAK,WAAY,cAAc,mBAAmB;AACpE,OAAK,WAAW,iBAAiB,cAAc,KAAK,uBAAuB;AAG3E,OAAK,iBAAiB,SAAS,KAAK,aAAa;;CAGnD,oBAA0B;AACxB,QAAM,qBAAqB;AAC3B,OAAK,8BAA8B;;CAGrC,uBAA6B;AAC3B,QAAM,wBAAwB;AAC9B,OAAK,gCAAgC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { t as CurrentTimeDisplayElement } from "./current-time-display-C3qndGf5.js";
|
|
2
|
+
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
3
|
+
|
|
4
|
+
//#region src/define/media-current-time-display.ts
|
|
5
|
+
defineCustomElement("media-current-time-display", CurrentTimeDisplayElement);
|
|
6
|
+
|
|
7
|
+
//#endregion
|
|
8
|
+
//# sourceMappingURL=media-current-time-display-B-4Cp845.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-current-time-display-B-4Cp845.js","names":[],"sources":["../src/define/media-current-time-display.ts"],"sourcesContent":["import { CurrentTimeDisplayElement } from '@/elements/current-time-display';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-current-time-display', CurrentTimeDisplayElement);\n"],"mappings":";;;;AAGA,oBAAoB,8BAA8B,0BAA0B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { t as DurationDisplayElement } from "./duration-display-JOPp3bdU.js";
|
|
2
|
+
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
3
|
+
|
|
4
|
+
//#region src/define/media-duration-display.ts
|
|
5
|
+
defineCustomElement("media-duration-display", DurationDisplayElement);
|
|
6
|
+
|
|
7
|
+
//#endregion
|
|
8
|
+
//# sourceMappingURL=media-duration-display-BLMr7VHo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-duration-display-BLMr7VHo.js","names":[],"sources":["../src/define/media-duration-display.ts"],"sourcesContent":["import { DurationDisplayElement } from '@/elements/duration-display';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-duration-display', DurationDisplayElement);\n"],"mappings":";;;;AAGA,oBAAoB,0BAA0B,uBAAuB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { t as FullscreenButtonElement } from "./fullscreen-button-CGO2UJjs.js";
|
|
2
|
+
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
3
|
+
|
|
4
|
+
//#region src/define/media-fullscreen-button.ts
|
|
5
|
+
defineCustomElement("media-fullscreen-button", FullscreenButtonElement);
|
|
6
|
+
|
|
7
|
+
//#endregion
|
|
8
|
+
//# sourceMappingURL=media-fullscreen-button-Dcflbt54.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-fullscreen-button-Dcflbt54.js","names":[],"sources":["../src/define/media-fullscreen-button.ts"],"sourcesContent":["import { FullscreenButtonElement } from '@/elements/fullscreen-button';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-fullscreen-button', FullscreenButtonElement);\n"],"mappings":";;;;AAGA,oBAAoB,2BAA2B,wBAAwB"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { t as MuteButtonElement } from "./mute-button-vW2sLqqY.js";
|
|
2
|
+
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
3
|
+
|
|
4
|
+
//#region src/define/media-mute-button.ts
|
|
5
|
+
defineCustomElement("media-mute-button", MuteButtonElement);
|
|
6
|
+
|
|
7
|
+
//#endregion
|
|
8
|
+
//# sourceMappingURL=media-mute-button-BOVhZ3aP.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-mute-button-BOVhZ3aP.js","names":[],"sources":["../src/define/media-mute-button.ts"],"sourcesContent":["import { MuteButtonElement } from '@/elements/mute-button';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-mute-button', MuteButtonElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,kBAAkB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { t as PlayButtonElement } from "./play-button-aVb0g10G.js";
|
|
2
|
+
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
3
|
+
|
|
4
|
+
//#region src/define/media-play-button.ts
|
|
5
|
+
defineCustomElement("media-play-button", PlayButtonElement);
|
|
6
|
+
|
|
7
|
+
//#endregion
|
|
8
|
+
//# sourceMappingURL=media-play-button-CLj-hkwn.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-play-button-CLj-hkwn.js","names":[],"sources":["../src/define/media-play-button.ts"],"sourcesContent":["import { PlayButtonElement } from '@/elements/play-button';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-play-button', PlayButtonElement);\n"],"mappings":";;;;AAGA,oBAAoB,qBAAqB,kBAAkB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|