@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.
Files changed (124) hide show
  1. package/README.md +1 -1
  2. package/dist/button-D1DWjsQu.js +57 -0
  3. package/dist/button-D1DWjsQu.js.map +1 -0
  4. package/dist/component-factory-DeAN6cjC.js +47 -0
  5. package/dist/component-factory-DeAN6cjC.js.map +1 -0
  6. package/dist/current-time-display-C3qndGf5.js +47 -0
  7. package/dist/current-time-display-C3qndGf5.js.map +1 -0
  8. package/dist/custom-element-3bDlB2XO.js +10 -0
  9. package/dist/custom-element-3bDlB2XO.js.map +1 -0
  10. package/dist/define/index.d.ts +12 -0
  11. package/dist/define/index.js +27 -0
  12. package/dist/define/media-container.d.ts +1 -0
  13. package/dist/define/media-container.js +3 -0
  14. package/dist/define/media-current-time-display.d.ts +1 -0
  15. package/dist/define/media-current-time-display.js +4 -0
  16. package/dist/define/media-duration-display.d.ts +1 -0
  17. package/dist/define/media-duration-display.js +4 -0
  18. package/dist/define/media-fullscreen-button.d.ts +1 -0
  19. package/dist/define/media-fullscreen-button.js +5 -0
  20. package/dist/define/media-mute-button.d.ts +1 -0
  21. package/dist/define/media-mute-button.js +5 -0
  22. package/dist/define/media-play-button.d.ts +1 -0
  23. package/dist/define/media-play-button.js +5 -0
  24. package/dist/define/media-popover.d.ts +1 -0
  25. package/dist/define/media-popover.js +3 -0
  26. package/dist/define/media-preview-time-display.d.ts +1 -0
  27. package/dist/define/media-preview-time-display.js +4 -0
  28. package/dist/define/media-provider.d.ts +1 -0
  29. package/dist/define/media-provider.js +3 -0
  30. package/dist/define/media-time-slider.d.ts +1 -0
  31. package/dist/define/media-time-slider.js +4 -0
  32. package/dist/define/media-tooltip.d.ts +1 -0
  33. package/dist/define/media-tooltip.js +3 -0
  34. package/dist/define/media-volume-slider.d.ts +1 -0
  35. package/dist/define/media-volume-slider.js +4 -0
  36. package/dist/duration-display-JOPp3bdU.js +49 -0
  37. package/dist/duration-display-JOPp3bdU.js.map +1 -0
  38. package/dist/fullscreen-button-CGO2UJjs.js +48 -0
  39. package/dist/fullscreen-button-CGO2UJjs.js.map +1 -0
  40. package/dist/{icons-eJws_3Te.js → icons-CuxuONCk.js} +20 -57
  41. package/dist/icons-CuxuONCk.js.map +1 -0
  42. package/dist/icons.d.ts +1 -2
  43. package/dist/icons.js +2 -3
  44. package/dist/index-LKrIp3Oo.d.ts +1 -0
  45. package/dist/index.d.ts +145 -4
  46. package/dist/index.d.ts.map +1 -1
  47. package/dist/index.js +16 -9
  48. package/dist/media-container-BGEXSi9g.js +8 -0
  49. package/dist/media-container-BGEXSi9g.js.map +1 -0
  50. package/dist/media-container-C0MUzkJ_.js +83 -0
  51. package/dist/media-container-C0MUzkJ_.js.map +1 -0
  52. package/dist/media-container-DPnFjmtK.d.ts +1 -0
  53. package/dist/media-current-time-display-B-4Cp845.js +8 -0
  54. package/dist/media-current-time-display-B-4Cp845.js.map +1 -0
  55. package/dist/media-current-time-display-Cd0rPAuj.d.ts +1 -0
  56. package/dist/media-duration-display-BLMr7VHo.js +8 -0
  57. package/dist/media-duration-display-BLMr7VHo.js.map +1 -0
  58. package/dist/media-duration-display-qvm6YX-q.d.ts +1 -0
  59. package/dist/media-fullscreen-button-BgUK3lgu.d.ts +1 -0
  60. package/dist/media-fullscreen-button-Dcflbt54.js +8 -0
  61. package/dist/media-fullscreen-button-Dcflbt54.js.map +1 -0
  62. package/dist/media-mute-button-BOVhZ3aP.js +8 -0
  63. package/dist/media-mute-button-BOVhZ3aP.js.map +1 -0
  64. package/dist/media-mute-button-NVJF2EEW.d.ts +1 -0
  65. package/dist/media-play-button-CLj-hkwn.js +8 -0
  66. package/dist/media-play-button-CLj-hkwn.js.map +1 -0
  67. package/dist/media-play-button-oq8yDlxe.d.ts +1 -0
  68. package/dist/media-popover-BtJmPv0E.d.ts +1 -0
  69. package/dist/media-popover-DVCIlSBX.js +8 -0
  70. package/dist/media-popover-DVCIlSBX.js.map +1 -0
  71. package/dist/media-preview-time-display-4YX5Rics.d.ts +1 -0
  72. package/dist/media-preview-time-display-DAiMgLPX.js +8 -0
  73. package/dist/media-preview-time-display-DAiMgLPX.js.map +1 -0
  74. package/dist/media-provider-CyoL0bCx.js +17 -0
  75. package/dist/media-provider-CyoL0bCx.js.map +1 -0
  76. package/dist/media-provider-D7P2TLXG.d.ts +1 -0
  77. package/dist/media-provider-D_GL2_DN.js +8 -0
  78. package/dist/media-provider-D_GL2_DN.js.map +1 -0
  79. package/dist/media-skin-Di3vSHvS.d.ts +11 -0
  80. package/dist/media-skin-Di3vSHvS.d.ts.map +1 -0
  81. package/dist/media-skin-mHWwUPg3.js +36 -0
  82. package/dist/media-skin-mHWwUPg3.js.map +1 -0
  83. package/dist/media-time-slider-Bp2qnwsW.js +12 -0
  84. package/dist/media-time-slider-Bp2qnwsW.js.map +1 -0
  85. package/dist/media-time-slider-DvMnfYXZ.d.ts +1 -0
  86. package/dist/media-tooltip-BqV17mdM.d.ts +1 -0
  87. package/dist/media-tooltip-C4jOtQ8a.js +8 -0
  88. package/dist/media-tooltip-C4jOtQ8a.js.map +1 -0
  89. package/dist/media-volume-slider-CKSxmdQv.js +11 -0
  90. package/dist/media-volume-slider-CKSxmdQv.js.map +1 -0
  91. package/dist/media-volume-slider-DP47VLVi.d.ts +1 -0
  92. package/dist/mute-button-vW2sLqqY.js +50 -0
  93. package/dist/mute-button-vW2sLqqY.js.map +1 -0
  94. package/dist/play-button-aVb0g10G.js +44 -0
  95. package/dist/play-button-aVb0g10G.js.map +1 -0
  96. package/dist/popover-ty9dFDNE.js +189 -0
  97. package/dist/popover-ty9dFDNE.js.map +1 -0
  98. package/dist/{media-preview-time-display-C7jpAct6.js → preview-time-display-Dax0FQ2X.js} +6 -6
  99. package/dist/preview-time-display-Dax0FQ2X.js.map +1 -0
  100. package/dist/skins/frosted.d.ts +16 -5
  101. package/dist/skins/frosted.d.ts.map +1 -1
  102. package/dist/skins/frosted.js +90 -63
  103. package/dist/skins/frosted.js.map +1 -1
  104. package/dist/skins/minimal.d.ts +16 -5
  105. package/dist/skins/minimal.d.ts.map +1 -1
  106. package/dist/skins/minimal.js +90 -63
  107. package/dist/skins/minimal.js.map +1 -1
  108. package/dist/time-slider-CA1GMs6A.js +201 -0
  109. package/dist/time-slider-CA1GMs6A.js.map +1 -0
  110. package/dist/tooltip-CJpujx2f.js +219 -0
  111. package/dist/tooltip-CJpujx2f.js.map +1 -0
  112. package/dist/volume-slider-guD8gqpi.js +206 -0
  113. package/dist/volume-slider-guD8gqpi.js.map +1 -0
  114. package/package.json +8 -4
  115. package/dist/chunk-Bp6m_JJh.js +0 -13
  116. package/dist/icons-eJws_3Te.js.map +0 -1
  117. package/dist/index-AcYRyuAY.d.ts +0 -76
  118. package/dist/index-AcYRyuAY.d.ts.map +0 -1
  119. package/dist/index.js.map +0 -1
  120. package/dist/media-preview-time-display-C7jpAct6.js.map +0 -1
  121. package/dist/media-skin-D44BfH6y.d.ts +0 -182
  122. package/dist/media-skin-D44BfH6y.d.ts.map +0 -1
  123. package/dist/media-skin-DR8zj-LV.js +0 -1324
  124. package/dist/media-skin-DR8zj-LV.js.map +0 -1
@@ -1,4 +1,4 @@
1
- import { t as __export } from "./chunk-Bp6m_JJh.js";
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 MediaFullscreenEnterAltIcon = class extends MediaChromeIcon {
46
+ var MediaFullscreenEnterAltIconElement = class extends MediaChromeIcon {
51
47
  static {
52
48
  this.getTemplateHTML = getTemplateHTML$8;
53
49
  }
54
50
  };
55
- customElements.define("media-fullscreen-enter-alt-icon", MediaFullscreenEnterAltIcon);
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 MediaFullscreenEnterIcon = class extends MediaChromeIcon {
66
+ var MediaFullscreenEnterIconElement = class extends MediaChromeIcon {
75
67
  static {
76
68
  this.getTemplateHTML = getTemplateHTML$7;
77
69
  }
78
70
  };
79
- customElements.define("media-fullscreen-enter-icon", MediaFullscreenEnterIcon);
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 MediaFullscreenExitAltIcon = class extends MediaChromeIcon {
86
+ var MediaFullscreenExitAltIconElement = class extends MediaChromeIcon {
99
87
  static {
100
88
  this.getTemplateHTML = getTemplateHTML$6;
101
89
  }
102
90
  };
103
- customElements.define("media-fullscreen-exit-alt-icon", MediaFullscreenExitAltIcon);
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 MediaFullscreenExitIcon = class extends MediaChromeIcon {
106
+ var MediaFullscreenExitIconElement = class extends MediaChromeIcon {
123
107
  static {
124
108
  this.getTemplateHTML = getTemplateHTML$5;
125
109
  }
126
110
  };
127
- customElements.define("media-fullscreen-exit-icon", MediaFullscreenExitIcon);
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 MediaPauseIcon = class extends MediaChromeIcon {
121
+ var MediaPauseIconElement = class extends MediaChromeIcon {
142
122
  static {
143
123
  this.getTemplateHTML = getTemplateHTML$4;
144
124
  }
145
125
  };
146
- customElements.define("media-pause-icon", MediaPauseIcon);
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 MediaPlayIcon = class extends MediaChromeIcon {
141
+ var MediaPlayIconElement = class extends MediaChromeIcon {
166
142
  static {
167
143
  this.getTemplateHTML = getTemplateHTML$3;
168
144
  }
169
145
  };
170
- customElements.define("media-play-icon", MediaPlayIcon);
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 MediaVolumeHighIcon = class extends MediaChromeIcon {
161
+ var MediaVolumeHighIconElement = class extends MediaChromeIcon {
190
162
  static {
191
163
  this.getTemplateHTML = getTemplateHTML$2;
192
164
  }
193
165
  };
194
- customElements.define("media-volume-high-icon", MediaVolumeHighIcon);
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 MediaVolumeLowIcon = class extends MediaChromeIcon {
181
+ var MediaVolumeLowIconElement = class extends MediaChromeIcon {
214
182
  static {
215
183
  this.getTemplateHTML = getTemplateHTML$1;
216
184
  }
217
185
  };
218
- customElements.define("media-volume-low-icon", MediaVolumeLowIcon);
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 MediaVolumeOffIcon = class extends MediaChromeIcon {
201
+ var MediaVolumeOffIconElement = class extends MediaChromeIcon {
238
202
  static {
239
203
  this.getTemplateHTML = getTemplateHTML;
240
204
  }
241
205
  };
242
- customElements.define("media-volume-off-icon", MediaVolumeOffIcon);
206
+ defineCustomElement("media-volume-off-icon", MediaVolumeOffIconElement);
243
207
 
244
208
  //#endregion
245
- export { media_pause_icon_exports as a, media_fullscreen_enter_icon_exports as c, media_play_icon_exports as i, media_fullscreen_enter_alt_icon_exports as l, media_volume_low_icon_exports as n, media_fullscreen_exit_icon_exports as o, media_volume_high_icon_exports as r, media_fullscreen_exit_alt_icon_exports as s, media_volume_off_icon_exports as t };
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 { a as media_pause_icon_d_exports, c as media_fullscreen_enter_icon_d_exports, i as media_play_icon_d_exports, l as media_fullscreen_enter_alt_icon_d_exports, n as media_volume_low_icon_d_exports, o as media_fullscreen_exit_icon_d_exports, r as media_volume_high_icon_d_exports, s as media_fullscreen_exit_alt_icon_d_exports, t as media_volume_off_icon_d_exports } from "./index-AcYRyuAY.js";
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 { a as media_pause_icon_exports, c as media_fullscreen_enter_icon_exports, i as media_play_icon_exports, l as media_fullscreen_enter_alt_icon_exports, n as media_volume_low_icon_exports, o as media_fullscreen_exit_icon_exports, r as media_volume_high_icon_exports, s as media_fullscreen_exit_alt_icon_exports, t as media_volume_off_icon_exports } from "./icons-eJws_3Te.js";
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 { a as Tooltip, c as PlayButton, d as DurationDisplay, f as CurrentTimeDisplay, i as VolumeSlider, l as MuteButton, n as MediaProvider, o as TimeSlider, r as MediaContainer, s as Popover, t as MediaSkin, u as FullscreenButton } from "./media-skin-D44BfH6y.js";
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/index.d.ts
7
+ //#region src/utils/component-factory.d.ts
4
8
 
5
- declare function defineVjsPlayer(): void;
9
+ interface ConnectedComponentConstructor<State> {
10
+ new (state: State): HTMLElement;
11
+ }
6
12
  //#endregion
7
- export { CurrentTimeDisplay, DurationDisplay, FullscreenButton, MediaContainer, MediaProvider, MediaSkin, MuteButton, PlayButton, Popover, TimeSlider, Tooltip, VolumeSlider, defineVjsPlayer };
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
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;;;iBAagB,eAAA,CAAA"}
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 { a as Tooltip, c as PlayButton, d as DurationDisplay, f as CurrentTimeDisplay, i as VolumeSlider, l as MuteButton, n as MediaProvider, o as TimeSlider, r as MediaContainer, s as Popover, t as MediaSkin, u as FullscreenButton } from "./media-skin-DR8zj-LV.js";
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
- //#region src/index.ts
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 { };