@videojs/html 10.0.0-beta.2 → 10.0.0-beta.22

package/cdn/skin-element-D3iVinGP.js

@@ -0,0 +1,55 @@
+import { M as ReactiveElement } from "./create-player-BKLw7l1a.js";
+import { n as createShadowStyle, r as ensureGlobalStyle, t as applyShadowStyles } from "./shadow-styles-DKXFMmyD.js";
+
+//#region ../utils/dist/dom/template.js
+/** Create an `HTMLTemplateElement` from an HTML string, or `null` when `document` is unavailable (SSR). */
+function createTemplate(html) {
+	const doc = globalThis.document;
+	if (!doc) return null;
+	const template = doc.createElement("template");
+	template.innerHTML = html;
+	return template;
+}
+/** Deep-clone a template's content into a container. */
+function renderTemplate(container, template) {
+	container.appendChild(container.ownerDocument.importNode(template.content, true));
+}
+
+//#endregion
+//#region inline-css:src/define/base.js
+var base_default = "/* -------------------------------------------------------------------------- */\n/* Base                                                                       */\n/* -------------------------------------------------------------------------- */\n\nvideo-player {\n  display: contents;\n}\n\n/*\nRequired to override any default video and image styles (such as\nTailwind's CSS reset) and ensure they fill the container as expected.\n*/\nvideo-player video,\nvideo-player [slot=\"poster\"] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\nvideo-player video::-webkit-media-text-track-container {\n  transition: translate var(--media-caption-track-duration, 0) ease-out;\n  transition-delay: var(--media-caption-track-delay, 0);\n  translate: 0 var(--media-caption-track-y, 0);\n  scale: 0.98;\n  z-index: 1;\n  font-family: inherit;\n}\n";
+
+//#endregion
+//#region inline-css:src/define/shared.js
+var shared_default = "media-tooltip-group {\n  display: contents;\n}\n\n:host {\n  /* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */\n  display: grid;\n  width: 100%;\n}\n\n/* Hide volume popover when volume control is unsupported (e.g., iOS Safari). */\n.media-popover--volume:has(media-volume-slider[data-availability=\"unsupported\"]) {\n  display: none;\n}\n";
+
+//#endregion
+//#region src/define/skin-element.ts
+const STYLES_ID = "__media-styles";
+const sharedSheet = createShadowStyle(shared_default);
+/**
+* Base element for skin definitions. Attaches a shadow root, clones
+* `static template` into it, and applies shared + per-skin styles
+* via `adoptedStyleSheets` (or `<style>` fallback).
+*/
+var SkinElement = class extends ReactiveElement {
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	constructor() {
+		super();
+		ensureGlobalStyle(STYLES_ID, base_default);
+		if (!this.shadowRoot) {
+			const ctor = this.constructor;
+			this.attachShadow(ctor.shadowRootOptions);
+			if (ctor.template) renderTemplate(this.shadowRoot, ctor.template);
+			const sheets = [sharedSheet];
+			if (ctor.styles) sheets.push(ctor.styles);
+			applyShadowStyles(this.shadowRoot, sheets);
+		}
+	}
+};
+
+//#endregion
+export { createTemplate as n, SkinElement as t };
+//# sourceMappingURL=skin-element-D3iVinGP.js.map

package/cdn/skin-element-D3iVinGP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin-element-D3iVinGP.js","names":["sharedStyles","rootStyles"],"sources":["../../utils/dist/dom/template.js","../inline-css:src/define/base.js","../inline-css:src/define/shared.js","../src/define/skin-element.ts"],"sourcesContent":["//#region src/dom/template.ts\n/** Create an `HTMLTemplateElement` from an HTML string, or `null` when `document` is unavailable (SSR). */\nfunction createTemplate(html) {\n\tconst doc = globalThis.document;\n\tif (!doc) return null;\n\tconst template = doc.createElement(\"template\");\n\ttemplate.innerHTML = html;\n\treturn template;\n}\n/** Deep-clone a template's content into a container. */\nfunction renderTemplate(container, template) {\n\tcontainer.appendChild(container.ownerDocument.importNode(template.content, true));\n}\n//#endregion\nexport { createTemplate, renderTemplate };\n\n//# sourceMappingURL=template.js.map","export default \"/* -------------------------------------------------------------------------- */\\n/* Base                                                                       */\\n/* -------------------------------------------------------------------------- */\\n\\nvideo-player {\\n  display: contents;\\n}\\n\\n/*\\nRequired to override any default video and image styles (such as\\nTailwind's CSS reset) and ensure they fill the container as expected.\\n*/\\nvideo-player video,\\nvideo-player [slot=\\\"poster\\\"] {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n}\\n\\nvideo-player video::-webkit-media-text-track-container {\\n  transition: translate var(--media-caption-track-duration, 0) ease-out;\\n  transition-delay: var(--media-caption-track-delay, 0);\\n  translate: 0 var(--media-caption-track-y, 0);\\n  scale: 0.98;\\n  z-index: 1;\\n  font-family: inherit;\\n}\\n\";","export default \"media-tooltip-group {\\n  display: contents;\\n}\\n\\n:host {\\n  /* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */\\n  display: grid;\\n  width: 100%;\\n}\\n\\n/* Hide volume popover when volume control is unsupported (e.g., iOS Safari). */\\n.media-popover--volume:has(media-volume-slider[data-availability=\\\"unsupported\\\"]) {\\n  display: none;\\n}\\n\";","import { ReactiveElement } from '@videojs/element';\nimport {\n  applyShadowStyles,\n  createShadowStyle,\n  ensureGlobalStyle,\n  renderTemplate,\n  type ShadowStyle,\n} from '@videojs/utils/dom';\nimport rootStyles from './base.css?inline';\nimport sharedStyles from './shared.css?inline';\n\nconst STYLES_ID = '__media-styles';\nconst sharedSheet = createShadowStyle(sharedStyles);\n\n/**\n * Base element for skin definitions. Attaches a shadow root, clones\n * `static template` into it, and applies shared + per-skin styles\n * via `adoptedStyleSheets` (or `<style>` fallback).\n */\nexport class SkinElement extends ReactiveElement {\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static styles?: ShadowStyle;\n  static template?: HTMLTemplateElement | null;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, rootStyles);\n\n    if (!this.shadowRoot) {\n      const ctor = this.constructor as typeof SkinElement;\n      this.attachShadow(ctor.shadowRootOptions);\n\n      if (ctor.template) {\n        renderTemplate(this.shadowRoot!, ctor.template);\n      }\n\n      const sheets: ShadowStyle[] = [sharedSheet];\n      if (ctor.styles) {\n        sheets.push(ctor.styles);\n      }\n      applyShadowStyles(this.shadowRoot!, sheets);\n    }\n  }\n}\n"],"mappings":";;;;;AAEA,SAAS,eAAe,MAAM;CAC7B,MAAM,MAAM,WAAW;AACvB,KAAI,CAAC,IAAK,QAAO;CACjB,MAAM,WAAW,IAAI,cAAc,WAAW;AAC9C,UAAS,YAAY;AACrB,QAAO;;;AAGR,SAAS,eAAe,WAAW,UAAU;AAC5C,WAAU,YAAY,UAAU,cAAc,WAAW,SAAS,SAAS,KAAK,CAAC;;;;;ACXlF,mBAAe;;;;ACAf,qBAAe;;;;ACWf,MAAM,YAAY;AAClB,MAAM,cAAc,kBAAkBA,eAAa;;;;;;AAOnD,IAAa,cAAb,cAAiC,gBAAgB;;2BACJ,EAAE,MAAM,QAAQ;;CAI3D,cAAc;AACZ,SAAO;AAEP,oBAAkB,WAAWC,aAAW;AAExC,MAAI,CAAC,KAAK,YAAY;GACpB,MAAM,OAAO,KAAK;AAClB,QAAK,aAAa,KAAK,kBAAkB;AAEzC,OAAI,KAAK,SACP,gBAAe,KAAK,YAAa,KAAK,SAAS;GAGjD,MAAM,SAAwB,CAAC,YAAY;AAC3C,OAAI,KAAK,OACP,QAAO,KAAK,KAAK,OAAO;AAE1B,qBAAkB,KAAK,YAAa,OAAO"}

package/cdn/skin-element-DM82PPxz.js

@@ -0,0 +1,2 @@
+import{M as e}from"./create-player-B-PGzhq2.js";import{n as t,r as n,t as r}from"./shadow-styles-BYZ6q3Q4.js";function i(e){let t=globalThis.document;if(!t)return null;let n=t.createElement(`template`);return n.innerHTML=e,n}function a(e,t){e.appendChild(e.ownerDocument.importNode(t.content,!0))}var o=`video-player{display:contents}video-player video,video-player [slot=poster]{width:100%;height:100%;display:block}video-player video::-webkit-media-text-track-container{transition:translate var(--media-caption-track-duration,0) ease-out;transition-delay:var(--media-caption-track-delay,0);translate:0 var(--media-caption-track-y,0);z-index:1;font-family:inherit;scale:.98}`;const s=t(`media-tooltip-group{display:contents}:host{width:100%;display:grid}.media-popover--volume:has(media-volume-slider[data-availability=unsupported]){display:none}`);var c=class extends e{static{this.shadowRootOptions={mode:`open`}}constructor(){if(super(),n(`__media-styles`,o),!this.shadowRoot){let e=this.constructor;this.attachShadow(e.shadowRootOptions),e.template&&a(this.shadowRoot,e.template);let t=[s];e.styles&&t.push(e.styles),r(this.shadowRoot,t)}}};export{i as n,c as t};
+//# sourceMappingURL=skin-element-DM82PPxz.js.map

package/cdn/skin-element-DM82PPxz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin-element-DM82PPxz.js","names":["sharedStyles","rootStyles"],"sources":["../../utils/dist/dom/template.js","../inline-css:src/define/base.js","../inline-css:src/define/shared.js","../src/define/skin-element.ts"],"sourcesContent":["//#region src/dom/template.ts\n/** Create an `HTMLTemplateElement` from an HTML string, or `null` when `document` is unavailable (SSR). */\nfunction createTemplate(html) {\n\tconst doc = globalThis.document;\n\tif (!doc) return null;\n\tconst template = doc.createElement(\"template\");\n\ttemplate.innerHTML = html;\n\treturn template;\n}\n/** Deep-clone a template's content into a container. */\nfunction renderTemplate(container, template) {\n\tcontainer.appendChild(container.ownerDocument.importNode(template.content, true));\n}\n//#endregion\nexport { createTemplate, renderTemplate };\n\n//# sourceMappingURL=template.js.map","export default \"video-player{display:contents}video-player video,video-player [slot=poster]{width:100%;height:100%;display:block}video-player video::-webkit-media-text-track-container{transition:translate var(--media-caption-track-duration,0) ease-out;transition-delay:var(--media-caption-track-delay,0);translate:0 var(--media-caption-track-y,0);z-index:1;font-family:inherit;scale:.98}\";","export default \"media-tooltip-group{display:contents}:host{width:100%;display:grid}.media-popover--volume:has(media-volume-slider[data-availability=unsupported]){display:none}\";","import { ReactiveElement } from '@videojs/element';\nimport {\n  applyShadowStyles,\n  createShadowStyle,\n  ensureGlobalStyle,\n  renderTemplate,\n  type ShadowStyle,\n} from '@videojs/utils/dom';\nimport rootStyles from './base.css?inline';\nimport sharedStyles from './shared.css?inline';\n\nconst STYLES_ID = '__media-styles';\nconst sharedSheet = createShadowStyle(sharedStyles);\n\n/**\n * Base element for skin definitions. Attaches a shadow root, clones\n * `static template` into it, and applies shared + per-skin styles\n * via `adoptedStyleSheets` (or `<style>` fallback).\n */\nexport class SkinElement extends ReactiveElement {\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static styles?: ShadowStyle;\n  static template?: HTMLTemplateElement | null;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, rootStyles);\n\n    if (!this.shadowRoot) {\n      const ctor = this.constructor as typeof SkinElement;\n      this.attachShadow(ctor.shadowRootOptions);\n\n      if (ctor.template) {\n        renderTemplate(this.shadowRoot!, ctor.template);\n      }\n\n      const sheets: ShadowStyle[] = [sharedSheet];\n      if (ctor.styles) {\n        sheets.push(ctor.styles);\n      }\n      applyShadowStyles(this.shadowRoot!, sheets);\n    }\n  }\n}\n"],"mappings":"8GAEA,SAAS,EAAe,EAAM,CAC7B,IAAM,EAAM,WAAW,SACvB,GAAI,CAAC,EAAK,OAAO,KACjB,IAAM,EAAW,EAAI,cAAc,WAAW,CAE9C,MADA,GAAS,UAAY,EACd,EAGR,SAAS,EAAe,EAAW,EAAU,CAC5C,EAAU,YAAY,EAAU,cAAc,WAAW,EAAS,QAAS,GAAK,CAAC,CCXlF,IAAA,EAAe,sXEWf,MACM,EAAc,EDZL,kKCYoC,CAOnD,IAAa,EAAb,cAAiC,CAAgB,+BACJ,CAAE,KAAM,OAAQ,CAI3D,aAAc,CAKZ,GAJA,OAAO,CAEP,EAAkB,iBAAWC,EAAW,CAEpC,CAAC,KAAK,WAAY,CACpB,IAAM,EAAO,KAAK,YAClB,KAAK,aAAa,EAAK,kBAAkB,CAErC,EAAK,UACP,EAAe,KAAK,WAAa,EAAK,SAAS,CAGjD,IAAM,EAAwB,CAAC,EAAY,CACvC,EAAK,QACP,EAAO,KAAK,EAAK,OAAO,CAE1B,EAAkB,KAAK,WAAa,EAAO"}

package/cdn/ui-BGvi0TNr.js

@@ -0,0 +1,2 @@
+import{a as e,c as t,d as n,f as r,i,l as a,n as o,o as s,r as c,s as l,u}from"./compounds-CCgS3IGo.js";import{O as d}from"./create-player-B-PGzhq2.js";import{o as f}from"./context-CEFisYD0.js";import{n as p,t as m}from"./hotkey-element-DWWkfH3A.js";import{t as h}from"./player-ChdQN3H5.js";f(h),f(d),o(),i(),e(),c(),f(p),f(m),f(r),f(n),f(u),f(a),f(t),f(l),f(s);
+//# sourceMappingURL=ui-BGvi0TNr.js.map

package/cdn/ui-BGvi0TNr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-BGvi0TNr.js","names":[],"sources":["../src/define/audio/ui.ts"],"sourcesContent":["// Registers the audio player, container, and all audio UI custom elements\n// without creating a skin element. Use this entry when building an ejected\n// (light DOM) player layout.\nimport { MediaContainerElement } from '../../media/container-element';\nimport { GestureElement } from '../../ui/gesture/gesture-element';\nimport { HotkeyElement } from '../../ui/hotkey/hotkey-element';\nimport { MuteButtonElement } from '../../ui/mute-button/mute-button-element';\nimport { PlayButtonElement } from '../../ui/play-button/play-button-element';\nimport { PlaybackRateButtonElement } from '../../ui/playback-rate-button/playback-rate-button-element';\nimport { PopoverElement } from '../../ui/popover/popover-element';\nimport { SeekButtonElement } from '../../ui/seek-button/seek-button-element';\nimport { TooltipElement } from '../../ui/tooltip/tooltip-element';\nimport { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';\nimport { safeDefine } from '../safe-define';\nimport { defineErrorDialog, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';\n\n// Value import — player.ts body runs before this module's body.\nimport { AudioPlayerElement } from './player';\n\n// ── Registration (providers / parents first) ────────────────────────────\n\nsafeDefine(AudioPlayerElement);\nsafeDefine(MediaContainerElement);\n\n// Compound groups.\ndefineErrorDialog();\ndefineTimeSlider();\ndefineVolumeSlider();\ndefineTime();\n\n// Standalone elements.\nsafeDefine(GestureElement);\nsafeDefine(HotkeyElement);\nsafeDefine(MuteButtonElement);\nsafeDefine(PlayButtonElement);\nsafeDefine(PlaybackRateButtonElement);\nsafeDefine(PopoverElement);\nsafeDefine(SeekButtonElement);\nsafeDefine(TooltipElement);\nsafeDefine(TooltipGroupElement);\n"],"mappings":"mSAqBA,EAAW,EAAmB,CAC9B,EAAW,EAAsB,CAGjC,GAAmB,CACnB,GAAkB,CAClB,GAAoB,CACpB,GAAY,CAGZ,EAAW,EAAe,CAC1B,EAAW,EAAc,CACzB,EAAW,EAAkB,CAC7B,EAAW,EAAkB,CAC7B,EAAW,EAA0B,CACrC,EAAW,EAAe,CAC1B,EAAW,EAAkB,CAC7B,EAAW,EAAe,CAC1B,EAAW,EAAoB"}

package/cdn/ui-BN57BxYZ.js

@@ -0,0 +1,2 @@
+import{a as e,c as t,d as n,f as r,i,l as a,n as o,o as s,r as c,s as l,t as u,u as d}from"./compounds-CCgS3IGo.js";import{O as f}from"./create-player-B-PGzhq2.js";import{o as p}from"./context-CEFisYD0.js";import{a as m,i as h,n as g,o as _,r as v,s as y,t as b}from"./player-B7jISTmQ.js";import{n as x,t as S}from"./hotkey-element-DWWkfH3A.js";p(b),p(f),u(),o(),i(),e(),c(),p(y),p(_),p(m),p(h),p(x),p(S),p(r),p(v),p(n),p(d),p(a),p(g),p(t),p(l),p(s);
+//# sourceMappingURL=ui-BN57BxYZ.js.map

package/cdn/ui-BN57BxYZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-BN57BxYZ.js","names":[],"sources":["../src/define/video/ui.ts"],"sourcesContent":["// Registers the video player, container, and all video UI custom elements\n// without creating a skin element. Use this entry when building an ejected\n// (light DOM) player layout.\nimport { MediaContainerElement } from '../../media/container-element';\nimport { BufferingIndicatorElement } from '../../ui/buffering-indicator/buffering-indicator-element';\nimport { CaptionsButtonElement } from '../../ui/captions-button/captions-button-element';\nimport { CastButtonElement } from '../../ui/cast-button/cast-button-element';\nimport { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';\nimport { GestureElement } from '../../ui/gesture/gesture-element';\nimport { HotkeyElement } from '../../ui/hotkey/hotkey-element';\nimport { MuteButtonElement } from '../../ui/mute-button/mute-button-element';\nimport { PiPButtonElement } from '../../ui/pip-button/pip-button-element';\nimport { PlayButtonElement } from '../../ui/play-button/play-button-element';\nimport { PlaybackRateButtonElement } from '../../ui/playback-rate-button/playback-rate-button-element';\nimport { PopoverElement } from '../../ui/popover/popover-element';\nimport { PosterElement } from '../../ui/poster/poster-element';\nimport { SeekButtonElement } from '../../ui/seek-button/seek-button-element';\nimport { TooltipElement } from '../../ui/tooltip/tooltip-element';\nimport { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';\nimport { safeDefine } from '../safe-define';\nimport { defineControls, defineErrorDialog, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';\n\n// Value import — player.ts body runs before this module's body.\nimport { VideoPlayerElement } from './player';\n\n// ── Registration (providers / parents first) ────────────────────────────\n\nsafeDefine(VideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\n// Compound groups.\ndefineControls();\ndefineErrorDialog();\ndefineTimeSlider();\ndefineVolumeSlider();\ndefineTime();\n\n// Standalone elements.\nsafeDefine(BufferingIndicatorElement);\nsafeDefine(CaptionsButtonElement);\nsafeDefine(CastButtonElement);\nsafeDefine(FullscreenButtonElement);\nsafeDefine(GestureElement);\nsafeDefine(HotkeyElement);\nsafeDefine(MuteButtonElement);\nsafeDefine(PiPButtonElement);\nsafeDefine(PlayButtonElement);\nsafeDefine(PlaybackRateButtonElement);\nsafeDefine(PopoverElement);\nsafeDefine(PosterElement);\nsafeDefine(SeekButtonElement);\nsafeDefine(TooltipElement);\nsafeDefine(TooltipGroupElement);\n"],"mappings":"yVA2BA,EAAW,EAAmB,CAC9B,EAAW,EAAsB,CAGjC,GAAgB,CAChB,GAAmB,CACnB,GAAkB,CAClB,GAAoB,CACpB,GAAY,CAGZ,EAAW,EAA0B,CACrC,EAAW,EAAsB,CACjC,EAAW,EAAkB,CAC7B,EAAW,EAAwB,CACnC,EAAW,EAAe,CAC1B,EAAW,EAAc,CACzB,EAAW,EAAkB,CAC7B,EAAW,EAAiB,CAC5B,EAAW,EAAkB,CAC7B,EAAW,EAA0B,CACrC,EAAW,EAAe,CAC1B,EAAW,EAAc,CACzB,EAAW,EAAkB,CAC7B,EAAW,EAAe,CAC1B,EAAW,EAAoB"}

package/cdn/ui-CKR6dVbQ.js

@@ -0,0 +1,25 @@
+import { a as defineVolumeSlider, c as SeekButtonElement, d as PlayButtonElement, f as MuteButtonElement, i as defineTimeSlider, l as PopoverElement, n as defineErrorDialog, o as TooltipGroupElement, r as defineTime, s as TooltipElement, u as PlaybackRateButtonElement } from "./compounds-DD3MYkSc.js";
+import { O as MediaContainerElement } from "./create-player-BKLw7l1a.js";
+import { o as safeDefine } from "./context-0rI_P6jf.js";
+import { n as GestureElement, t as HotkeyElement } from "./hotkey-element-BONs_FyJ.js";
+import { t as AudioPlayerElement } from "./player-BVGWmIbQ.js";
+
+//#region src/define/audio/ui.ts
+safeDefine(AudioPlayerElement);
+safeDefine(MediaContainerElement);
+defineErrorDialog();
+defineTimeSlider();
+defineVolumeSlider();
+defineTime();
+safeDefine(GestureElement);
+safeDefine(HotkeyElement);
+safeDefine(MuteButtonElement);
+safeDefine(PlayButtonElement);
+safeDefine(PlaybackRateButtonElement);
+safeDefine(PopoverElement);
+safeDefine(SeekButtonElement);
+safeDefine(TooltipElement);
+safeDefine(TooltipGroupElement);
+
+//#endregion
+//# sourceMappingURL=ui-CKR6dVbQ.js.map

package/cdn/ui-CKR6dVbQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-CKR6dVbQ.js","names":[],"sources":["../src/define/audio/ui.ts"],"sourcesContent":["// Registers the audio player, container, and all audio UI custom elements\n// without creating a skin element. Use this entry when building an ejected\n// (light DOM) player layout.\nimport { MediaContainerElement } from '../../media/container-element';\nimport { GestureElement } from '../../ui/gesture/gesture-element';\nimport { HotkeyElement } from '../../ui/hotkey/hotkey-element';\nimport { MuteButtonElement } from '../../ui/mute-button/mute-button-element';\nimport { PlayButtonElement } from '../../ui/play-button/play-button-element';\nimport { PlaybackRateButtonElement } from '../../ui/playback-rate-button/playback-rate-button-element';\nimport { PopoverElement } from '../../ui/popover/popover-element';\nimport { SeekButtonElement } from '../../ui/seek-button/seek-button-element';\nimport { TooltipElement } from '../../ui/tooltip/tooltip-element';\nimport { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';\nimport { safeDefine } from '../safe-define';\nimport { defineErrorDialog, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';\n\n// Value import — player.ts body runs before this module's body.\nimport { AudioPlayerElement } from './player';\n\n// ── Registration (providers / parents first) ────────────────────────────\n\nsafeDefine(AudioPlayerElement);\nsafeDefine(MediaContainerElement);\n\n// Compound groups.\ndefineErrorDialog();\ndefineTimeSlider();\ndefineVolumeSlider();\ndefineTime();\n\n// Standalone elements.\nsafeDefine(GestureElement);\nsafeDefine(HotkeyElement);\nsafeDefine(MuteButtonElement);\nsafeDefine(PlayButtonElement);\nsafeDefine(PlaybackRateButtonElement);\nsafeDefine(PopoverElement);\nsafeDefine(SeekButtonElement);\nsafeDefine(TooltipElement);\nsafeDefine(TooltipGroupElement);\n"],"mappings":";;;;;;;AAqBA,WAAW,mBAAmB;AAC9B,WAAW,sBAAsB;AAGjC,mBAAmB;AACnB,kBAAkB;AAClB,oBAAoB;AACpB,YAAY;AAGZ,WAAW,eAAe;AAC1B,WAAW,cAAc;AACzB,WAAW,kBAAkB;AAC7B,WAAW,kBAAkB;AAC7B,WAAW,0BAA0B;AACrC,WAAW,eAAe;AAC1B,WAAW,kBAAkB;AAC7B,WAAW,eAAe;AAC1B,WAAW,oBAAoB"}

package/cdn/ui-CZ4yl3t3.js

@@ -0,0 +1,32 @@
+import { a as defineVolumeSlider, c as SeekButtonElement, d as PlayButtonElement, f as MuteButtonElement, i as defineTimeSlider, l as PopoverElement, n as defineErrorDialog, o as TooltipGroupElement, r as defineTime, s as TooltipElement, t as defineControls, u as PlaybackRateButtonElement } from "./compounds-DD3MYkSc.js";
+import { O as MediaContainerElement } from "./create-player-BKLw7l1a.js";
+import { o as safeDefine } from "./context-0rI_P6jf.js";
+import { a as CastButtonElement, i as FullscreenButtonElement, n as PosterElement, o as CaptionsButtonElement, r as PiPButtonElement, s as BufferingIndicatorElement, t as VideoPlayerElement } from "./player-DX5Ka0vt.js";
+import { n as GestureElement, t as HotkeyElement } from "./hotkey-element-BONs_FyJ.js";
+
+//#region src/define/video/ui.ts
+safeDefine(VideoPlayerElement);
+safeDefine(MediaContainerElement);
+defineControls();
+defineErrorDialog();
+defineTimeSlider();
+defineVolumeSlider();
+defineTime();
+safeDefine(BufferingIndicatorElement);
+safeDefine(CaptionsButtonElement);
+safeDefine(CastButtonElement);
+safeDefine(FullscreenButtonElement);
+safeDefine(GestureElement);
+safeDefine(HotkeyElement);
+safeDefine(MuteButtonElement);
+safeDefine(PiPButtonElement);
+safeDefine(PlayButtonElement);
+safeDefine(PlaybackRateButtonElement);
+safeDefine(PopoverElement);
+safeDefine(PosterElement);
+safeDefine(SeekButtonElement);
+safeDefine(TooltipElement);
+safeDefine(TooltipGroupElement);
+
+//#endregion
+//# sourceMappingURL=ui-CZ4yl3t3.js.map

package/cdn/ui-CZ4yl3t3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-CZ4yl3t3.js","names":[],"sources":["../src/define/video/ui.ts"],"sourcesContent":["// Registers the video player, container, and all video UI custom elements\n// without creating a skin element. Use this entry when building an ejected\n// (light DOM) player layout.\nimport { MediaContainerElement } from '../../media/container-element';\nimport { BufferingIndicatorElement } from '../../ui/buffering-indicator/buffering-indicator-element';\nimport { CaptionsButtonElement } from '../../ui/captions-button/captions-button-element';\nimport { CastButtonElement } from '../../ui/cast-button/cast-button-element';\nimport { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';\nimport { GestureElement } from '../../ui/gesture/gesture-element';\nimport { HotkeyElement } from '../../ui/hotkey/hotkey-element';\nimport { MuteButtonElement } from '../../ui/mute-button/mute-button-element';\nimport { PiPButtonElement } from '../../ui/pip-button/pip-button-element';\nimport { PlayButtonElement } from '../../ui/play-button/play-button-element';\nimport { PlaybackRateButtonElement } from '../../ui/playback-rate-button/playback-rate-button-element';\nimport { PopoverElement } from '../../ui/popover/popover-element';\nimport { PosterElement } from '../../ui/poster/poster-element';\nimport { SeekButtonElement } from '../../ui/seek-button/seek-button-element';\nimport { TooltipElement } from '../../ui/tooltip/tooltip-element';\nimport { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';\nimport { safeDefine } from '../safe-define';\nimport { defineControls, defineErrorDialog, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';\n\n// Value import — player.ts body runs before this module's body.\nimport { VideoPlayerElement } from './player';\n\n// ── Registration (providers / parents first) ────────────────────────────\n\nsafeDefine(VideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\n// Compound groups.\ndefineControls();\ndefineErrorDialog();\ndefineTimeSlider();\ndefineVolumeSlider();\ndefineTime();\n\n// Standalone elements.\nsafeDefine(BufferingIndicatorElement);\nsafeDefine(CaptionsButtonElement);\nsafeDefine(CastButtonElement);\nsafeDefine(FullscreenButtonElement);\nsafeDefine(GestureElement);\nsafeDefine(HotkeyElement);\nsafeDefine(MuteButtonElement);\nsafeDefine(PiPButtonElement);\nsafeDefine(PlayButtonElement);\nsafeDefine(PlaybackRateButtonElement);\nsafeDefine(PopoverElement);\nsafeDefine(PosterElement);\nsafeDefine(SeekButtonElement);\nsafeDefine(TooltipElement);\nsafeDefine(TooltipGroupElement);\n"],"mappings":";;;;;;;AA2BA,WAAW,mBAAmB;AAC9B,WAAW,sBAAsB;AAGjC,gBAAgB;AAChB,mBAAmB;AACnB,kBAAkB;AAClB,oBAAoB;AACpB,YAAY;AAGZ,WAAW,0BAA0B;AACrC,WAAW,sBAAsB;AACjC,WAAW,kBAAkB;AAC7B,WAAW,wBAAwB;AACnC,WAAW,eAAe;AAC1B,WAAW,cAAc;AACzB,WAAW,kBAAkB;AAC7B,WAAW,iBAAiB;AAC5B,WAAW,kBAAkB;AAC7B,WAAW,0BAA0B;AACrC,WAAW,eAAe;AAC1B,WAAW,cAAc;AACzB,WAAW,kBAAkB;AAC7B,WAAW,eAAe;AAC1B,WAAW,oBAAoB"}

package/cdn/video-host-BtD61mpF.js

@@ -0,0 +1,440 @@
+import { n as namedNodeMapToObject, r as serializeAttributes } from "./media-attach-mixin-CYoNe7Sh.js";
+import { n as kebabCase, t as pick } from "./pick-D-wCJ3iA.js";
+
+//#region ../utils/dist/object/omit.js
+/**
+* Creates a new object without the specified keys.
+*
+* @example
+* const obj = { a: 1, b: 2, c: 3 };
+* omit(obj, ['b']); // { a: 1, c: 3 }
+*/
+function omit(obj, keys) {
+	const result = {};
+	for (const key in obj) if (!keys.includes(key)) result[key] = obj[key];
+	return result;
+}
+
+//#endregion
+//#region ../core/dist/dev/dom/media/custom-media-element/index.js
+/** CSS custom property names for video elements. */
+const VideoCSSVars = {
+	borderRadius: "--media-video-border-radius",
+	objectFit: "--media-object-fit",
+	objectPosition: "--media-object-position",
+	captionTrackDuration: "--media-caption-track-duration",
+	captionTrackDelay: "--media-caption-track-delay",
+	captionTrackY: "--media-caption-track-y"
+};
+/** Helper function to generate the HTML template for video elements. */
+function getVideoTemplateHTML(attrs) {
+	return `
+    <style>
+      :host {
+        display: contents;
+      }
+
+      video {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: var(${VideoCSSVars.borderRadius});
+        object-fit: var(${VideoCSSVars.objectFit}, contain);
+        object-position: var(${VideoCSSVars.objectPosition}, center);
+      }
+
+      video::-webkit-media-text-track-container {
+        transition: translate var(${VideoCSSVars.captionTrackDuration}, 0) ease-out;
+        transition-delay: var(${VideoCSSVars.captionTrackDelay}, 0);
+        translate: 0 var(${VideoCSSVars.captionTrackY}, 0);
+        scale: 0.98;
+        z-index: 1;
+        font-family: inherit;
+      }
+    </style>
+    <slot name="media">
+      <video${serializeAttributes(attrs)}></video>
+    </slot>
+    <slot></slot>
+  `;
+}
+/** Helper function to generate the HTML template for other elements. */
+function getCommonTemplateHTML(tag) {
+	return (attrs) => {
+		return `
+      <style>
+        :host {
+          display: inline-flex;
+          line-height: 0;
+          flex-direction: column;
+          justify-content: end;
+        }
+
+        ${tag} {
+          width: 100%;
+        }
+      </style>
+      <slot name="media">
+        <${tag}${serializeAttributes(attrs)}></${tag}>
+      </slot>
+      <slot></slot>
+    `;
+	};
+}
+const excludedProperties = [
+	"attach",
+	"detach",
+	"destroy"
+];
+function CustomMediaElement(tag, MediaHost) {
+	const mediaHostAttrToProp = /* @__PURE__ */ new Map();
+	let isDefined = false;
+	class CustomMedia extends (globalThis.HTMLElement ?? class {}) {
+		static getTemplateHTML = tag.endsWith("video") ? getVideoTemplateHTML : getCommonTemplateHTML(tag);
+		static shadowRootOptions = { mode: "open" };
+		static properties = {
+			autoPictureInPicture: { type: Boolean },
+			autoplay: { type: Boolean },
+			controls: { type: Boolean },
+			controlsList: { type: String },
+			crossOrigin: { type: String },
+			defaultMuted: {
+				type: Boolean,
+				attribute: "muted"
+			},
+			disablePictureInPicture: { type: Boolean },
+			disableRemotePlayback: { type: Boolean },
+			loading: { type: String },
+			loop: { type: Boolean },
+			playsInline: { type: Boolean },
+			poster: { type: String },
+			preload: { type: String },
+			src: { type: String }
+		};
+		static get observedAttributes() {
+			CustomMedia.#define(this);
+			return [...getAttrsFromProps(this.properties)];
+		}
+		static #define(ctor) {
+			if (isDefined) return;
+			isDefined = true;
+			for (let proto = MediaHost.prototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) for (const prop of Object.getOwnPropertyNames(proto)) {
+				if (prop in CustomMedia.prototype || excludedProperties.includes(prop)) continue;
+				const descriptor = Object.getOwnPropertyDescriptor(proto, prop);
+				if (!descriptor) continue;
+				const config = {
+					enumerable: true,
+					configurable: true
+				};
+				if (typeof descriptor.value === "function") config.value = function(...args) {
+					return this.#mediaHost[prop](...args);
+				};
+				else if (descriptor.get) {
+					config.get = function() {
+						return this.#mediaHost[prop];
+					};
+					if (descriptor.set) {
+						const attr = kebabCase(prop);
+						if (ctor.observedAttributes.includes(attr)) {
+							mediaHostAttrToProp.set(attr, prop);
+							config.set = function(val) {
+								if (val === true || val === false || val == null) this.toggleAttribute(attr, Boolean(val));
+								else this.setAttribute(attr, String(val));
+							};
+						} else config.set = function(val) {
+							this.#mediaHost[prop] = val;
+						};
+					}
+				}
+				Object.defineProperty(CustomMedia.prototype, prop, config);
+			}
+			const properties = ctor.properties;
+			for (const [prop, { type, attribute }] of Object.entries(properties)) {
+				if (prop in CustomMedia.prototype) continue;
+				const attr = attribute ?? prop.toLowerCase();
+				Object.defineProperty(CustomMedia.prototype, prop, {
+					get: function() {
+						return type === Boolean ? this.hasAttribute(attr) : this.getAttribute(attr);
+					},
+					set: function(val) {
+						if (type === Boolean) this.toggleAttribute(attr, Boolean(val));
+						else this.setAttribute(attr, val);
+					},
+					enumerable: true,
+					configurable: true
+				});
+			}
+		}
+		#mediaHost;
+		#bridgedEventTypes = /* @__PURE__ */ new Set();
+		#childMap = /* @__PURE__ */ new Map();
+		#childObserver;
+		constructor() {
+			super();
+			if (!this.shadowRoot) {
+				const ctor = this.constructor;
+				this.attachShadow(ctor.shadowRootOptions);
+				const allowedKeys = getAttrsFromProps(ctor.properties);
+				const disallowedKeys = [...mediaHostAttrToProp.keys()];
+				const attrs = omit(pick(namedNodeMapToObject(this.attributes), allowedKeys), disallowedKeys);
+				if (tag && !attrs.part) attrs.part = tag;
+				this.shadowRoot.innerHTML = ctor.getTemplateHTML(attrs);
+			}
+			this.#mediaHost = new MediaHost();
+			this.#attachToTarget();
+			this.#childObserver = new MutationObserver(this.#syncMediaChildAttribute.bind(this));
+			this.shadowRoot.addEventListener("slotchange", () => {
+				this.#attachToTarget();
+				this.#syncMediaChildren();
+			});
+			this.#syncMediaChildren();
+		}
+		#attachToTarget() {
+			const target = this.target;
+			if (target === this.#mediaHost.target) return;
+			if (this.#mediaHost.target) this.#mediaHost.detach();
+			this.#mediaHost.attach(target);
+		}
+		get target() {
+			return this.querySelector(":scope > [slot=media]") ?? this.querySelector(tag) ?? this.shadowRoot?.querySelector(tag) ?? null;
+		}
+		disconnectedCallback() {
+			if (!this.hasAttribute("keep-alive")) this.#mediaHost.destroy();
+		}
+		addEventListener(type, listener, options) {
+			super.addEventListener(type, listener, options);
+			if (!this.#bridgedEventTypes.has(type)) {
+				this.#bridgedEventTypes.add(type);
+				this.#mediaHost.addEventListener(type, this.#bridgeEvent);
+			}
+		}
+		removeEventListener(type, listener, options) {
+			super.removeEventListener(type, listener, options);
+		}
+		#bridgeEvent = (event) => {
+			if (!event.composed) this.dispatchEvent(new event.constructor(event.type, event));
+		};
+		attributeChangedCallback(attrName, oldValue, newValue) {
+			const prop = mediaHostAttrToProp.get(attrName);
+			if (prop) {
+				if (oldValue !== newValue) {
+					const valueType = typeof this.#mediaHost[prop];
+					this.#mediaHost[prop] = valueType === "boolean" ? newValue !== null : valueType === "number" ? Number(newValue) : newValue ?? "";
+				}
+				return;
+			}
+			if (!CustomMedia.observedAttributes.includes(attrName) && this.constructor.observedAttributes.includes(attrName)) return;
+			if (newValue === null) this.target?.removeAttribute(attrName);
+			else if (this.target?.getAttribute(attrName) !== newValue) this.target?.setAttribute(attrName, newValue);
+		}
+		#syncMediaChildren() {
+			const defaultSlot = this.shadowRoot?.querySelector("slot:not([name])");
+			const mediaChildren = new Set(defaultSlot?.assignedElements({ flatten: true }).filter((el) => el.localName === "track" || el.localName === "source"));
+			for (const [el, clone] of this.#childMap) if (!mediaChildren.has(el)) {
+				clone.remove();
+				this.#childMap.delete(el);
+			}
+			for (const el of mediaChildren) {
+				let clone = this.#childMap.get(el);
+				if (!clone) {
+					clone = el.cloneNode();
+					this.#childMap.set(el, clone);
+					this.#childObserver?.observe(el, { attributes: true });
+				}
+				this.target?.append(clone);
+				this.#enableDefaultTrack(clone);
+			}
+		}
+		#syncMediaChildAttribute(mutations) {
+			for (const mutation of mutations) if (mutation.type === "attributes") {
+				const { target, attributeName } = mutation;
+				const clone = this.#childMap.get(target);
+				if (clone && attributeName) {
+					clone.setAttribute(attributeName, target.getAttribute(attributeName) ?? "");
+					this.#enableDefaultTrack(clone);
+				}
+			}
+		}
+		#enableDefaultTrack(trackEl) {
+			if (trackEl && trackEl.localName === "track" && trackEl.default && (trackEl.kind === "chapters" || trackEl.kind === "metadata") && trackEl.track.mode === "disabled") trackEl.track.mode = "hidden";
+		}
+	}
+	return CustomMedia;
+}
+function getAttrsFromProps(props) {
+	return Object.keys(props).map((prop) => props[prop]?.attribute ?? prop.toLowerCase());
+}
+
+//#endregion
+//#region ../core/dist/dev/dom/media/media-host.js
+const EMPTY_TIME_RANGES = Object.freeze({
+	length: 0,
+	start() {
+		return 0;
+	},
+	end() {
+		return 0;
+	}
+});
+var HTMLMediaElementHost = class extends EventTarget {
+	#target = null;
+	#types = /* @__PURE__ */ new Set();
+	get target() {
+		return this.#target;
+	}
+	attach(target) {
+		if (!target || this.#target === target) return;
+		this.#target = target;
+		for (const type of this.#types) target.addEventListener(type, this.#forwardEvent);
+	}
+	detach() {
+		if (!this.#target) return;
+		for (const type of this.#types) this.#target.removeEventListener(type, this.#forwardEvent);
+		this.#target = null;
+	}
+	querySelectorAll(selectors) {
+		return this.target?.querySelectorAll(selectors) ?? [];
+	}
+	querySelector(selectors) {
+		return this.target?.querySelector(selectors) ?? null;
+	}
+	addEventListener(type, listener, options) {
+		if (!this.#types.has(type)) {
+			this.#types.add(type);
+			this.target?.addEventListener(type, this.#forwardEvent);
+		}
+		super.addEventListener(type, listener, options);
+	}
+	removeEventListener(type, listener, options) {
+		super.removeEventListener(type, listener, options);
+	}
+	#forwardEvent = (event) => {
+		this.dispatchEvent(new event.constructor(event.type, event));
+	};
+	get title() {
+		return this.target?.title ?? "";
+	}
+	set title(value) {
+		if (this.target) this.target.title = value;
+	}
+	get paused() {
+		return this.target?.paused ?? true;
+	}
+	get ended() {
+		return this.target?.ended ?? false;
+	}
+	get loop() {
+		return this.target?.loop ?? false;
+	}
+	set loop(value) {
+		if (this.target) this.target.loop = value;
+	}
+	play() {
+		return this.target?.play() ?? Promise.reject();
+	}
+	pause() {
+		this.target?.pause();
+	}
+	get currentTime() {
+		return this.target?.currentTime ?? 0;
+	}
+	set currentTime(value) {
+		if (this.target) this.target.currentTime = value;
+	}
+	get duration() {
+		return this.target?.duration ?? NaN;
+	}
+	get seeking() {
+		return this.target?.seeking ?? false;
+	}
+	get src() {
+		return this.target?.src ?? "";
+	}
+	set src(value) {
+		if (this.target) this.target.src = value;
+	}
+	get currentSrc() {
+		return this.target?.currentSrc ?? "";
+	}
+	get readyState() {
+		return this.target?.readyState ?? 0;
+	}
+	load() {
+		this.target?.load();
+	}
+	get volume() {
+		return this.target?.volume ?? 1;
+	}
+	set volume(value) {
+		if (this.target) this.target.volume = value;
+	}
+	get muted() {
+		return this.target?.muted ?? false;
+	}
+	set muted(value) {
+		if (this.target) this.target.muted = value;
+	}
+	get playbackRate() {
+		return this.target?.playbackRate ?? 1;
+	}
+	set playbackRate(value) {
+		if (this.target) this.target.playbackRate = value;
+	}
+	get buffered() {
+		return this.target?.buffered ?? EMPTY_TIME_RANGES;
+	}
+	get seekable() {
+		return this.target?.seekable ?? EMPTY_TIME_RANGES;
+	}
+	get error() {
+		return this.target?.error ?? null;
+	}
+	get textTracks() {
+		return this.target?.textTracks ?? [];
+	}
+	get remote() {
+		return this.target?.remote;
+	}
+	get disableRemotePlayback() {
+		return this.target?.disableRemotePlayback ?? false;
+	}
+	set disableRemotePlayback(value) {
+		if (this.target) this.target.disableRemotePlayback = value;
+	}
+};
+
+//#endregion
+//#region ../core/dist/dev/dom/media/video-host.js
+var HTMLVideoElementHost = class extends HTMLMediaElementHost {
+	get poster() {
+		return this.target?.poster ?? "";
+	}
+	set poster(value) {
+		if (this.target) this.target.poster = value;
+	}
+	get webkitDisplayingFullscreen() {
+		return this.target?.webkitDisplayingFullscreen ?? false;
+	}
+	get webkitPresentationMode() {
+		return this.target?.webkitPresentationMode ?? "inline";
+	}
+	requestPictureInPicture() {
+		return this.target?.requestPictureInPicture() ?? Promise.reject();
+	}
+	requestFullscreen() {
+		return this.target?.requestFullscreen() ?? Promise.reject();
+	}
+	webkitEnterFullscreen() {
+		return this.target?.webkitEnterFullscreen?.();
+	}
+	webkitExitFullscreen() {
+		return this.target?.webkitExitFullscreen?.();
+	}
+	webkitSetPresentationMode(mode) {
+		return this.target?.webkitSetPresentationMode?.(mode);
+	}
+};
+
+//#endregion
+export { CustomMediaElement as n, HTMLVideoElementHost as t };
+//# sourceMappingURL=video-host-BtD61mpF.js.map