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

package/dist/dev/index.d.ts

@@ -1,12 +1,15 @@
-import { PLAYER_CONTEXT_KEY, PlayerContext, PlayerContextValue, playerContext } from "./player/context.js";
 import { MediaElement, MediaElementConstructor } from "./ui/media-element.js";
+import { MediaContainerElement } from "./media/container-element.js";
+import { CONTAINER_CONTEXT_KEY, ContainerContext, ContainerContextConsumer, ContainerContextValue, MEDIA_CONTEXT_KEY, MediaContext, MediaContextValue, PLAYER_CONTEXT_KEY, PlayerContext, PlayerContextValue, containerContext, mediaContext, playerContext } from "./player/context.js";
 import { PlayerConsumer, PlayerConsumerConstructor, PlayerProvider, PlayerProviderConstructor } from "./store/types.js";
-import { ContainerMixin, createContainerMixin } from "./store/container-mixin.js";
-import { ProviderMixin, createProviderMixin } from "./store/provider-mixin.js";
+import { ContainerMixin, ContainerMixinConfig, createContainerMixin } from "./store/container-mixin.js";
+import { ProviderMixin, ProviderMixinConfig, createProviderMixin } from "./store/provider-mixin.js";
 import { PlayerController, PlayerControllerHost } from "./player/player-controller.js";
 import { CreatePlayerConfig, CreatePlayerResult, createPlayer } from "./player/create-player.js";
+import { MediaAttachMixin, createMediaAttachMixin } from "./store/media-attach-mixin.js";
 import { AlertDialogCloseElement } from "./ui/alert-dialog/alert-dialog-close-element.js";
 import { AlertDialogContextValue, alertDialogContext } from "./ui/alert-dialog/context.js";
+import { ContextPartElement, PartContextValue } from "./ui/context-part-element.js";
 import { AlertDialogDescriptionElement } from "./ui/alert-dialog/alert-dialog-description-element.js";
 import { AlertDialogElement } from "./ui/alert-dialog/alert-dialog-element.js";
 import { AlertDialogTitleElement } from "./ui/alert-dialog/alert-dialog-title-element.js";
@@ -15,7 +18,11 @@ import { MediaButtonElement } from "./ui/media-button-element.js";
 import { CaptionsButtonElement } from "./ui/captions-button/captions-button-element.js";
 import { ControlsElement } from "./ui/controls/controls-element.js";
 import { ControlsGroupElement } from "./ui/controls/controls-group-element.js";
+import { ErrorDialogElement } from "./ui/error-dialog/error-dialog-element.js";
 import { FullscreenButtonElement } from "./ui/fullscreen-button/fullscreen-button-element.js";
+import { GestureElement } from "./ui/gesture/gesture-element.js";
+import { AriaKeyShortcutsController } from "./ui/hotkey/aria-key-shortcuts-controller.js";
+import { HotkeyElement } from "./ui/hotkey/hotkey-element.js";
 import { MediaUIElement } from "./ui/media-ui-element.js";
 import { MuteButtonElement } from "./ui/mute-button/mute-button-element.js";
 import { PiPButtonElement } from "./ui/pip-button/pip-button-element.js";
@@ -29,6 +36,7 @@ import { SliderBufferElement } from "./ui/slider/slider-buffer-element.js";
 import { SliderElement } from "./ui/slider/slider-element.js";
 import { SliderEventMap, SliderValueEventDetail } from "./ui/slider/slider-events.js";
 import { SliderFillElement } from "./ui/slider/slider-fill-element.js";
+import { SliderPreviewElement } from "./ui/slider/slider-preview-element.js";
 import { SliderThumbElement } from "./ui/slider/slider-thumb-element.js";
 import { ThumbnailElement } from "./ui/thumbnail/thumbnail-element.js";
 import { SliderThumbnailElement } from "./ui/slider/slider-thumbnail-element.js";
@@ -42,7 +50,6 @@ import { tooltipGroupContext } from "./ui/tooltip/context.js";
 import { TooltipElement } from "./ui/tooltip/tooltip-element.js";
 import { TooltipGroupElement } from "./ui/tooltip/tooltip-group-element.js";
 import { VolumeSliderElement } from "./ui/volume-slider/volume-slider-element.js";
-import { MediaContainerElement } from "./media/container-element.js";
 import { Comparator, Selector, createSelector, shallowEqual } from "@videojs/store";
 export * from "@videojs/core/dom";
-export { AlertDialogCloseElement, type AlertDialogContextValue, AlertDialogDescriptionElement, AlertDialogElement, AlertDialogTitleElement, BufferingIndicatorElement, CaptionsButtonElement, type Comparator, ContainerMixin, ControlsElement, ControlsGroupElement, CreatePlayerConfig, CreatePlayerResult, FullscreenButtonElement, MediaButtonElement, MediaContainerElement, MediaElement, MediaElementConstructor, MediaUIElement, MuteButtonElement, PLAYER_CONTEXT_KEY, PiPButtonElement, PlayButtonElement, PlaybackRateButtonElement, PlayerConsumer, PlayerConsumerConstructor, PlayerContext, PlayerContextValue, PlayerController, PlayerControllerHost, PlayerProvider, PlayerProviderConstructor, PopoverElement, PosterElement, ProviderMixin, SeekButtonElement, type Selector, SliderBufferElement, type SliderContextValue, SliderElement, type SliderEventMap, SliderFillElement, SliderThumbElement, SliderThumbnailElement, SliderTrackElement, SliderValueElement, type SliderValueEventDetail, ThumbnailElement, TimeElement, TimeGroupElement, TimeSeparatorElement, TimeSliderElement, TooltipElement, TooltipGroupElement, VolumeSliderElement, alertDialogContext, createContainerMixin, createPlayer, createProviderMixin, createSelector, playerContext, shallowEqual, sliderContext, tooltipGroupContext };
+export { AlertDialogCloseElement, type AlertDialogContextValue, AlertDialogDescriptionElement, AlertDialogElement, AlertDialogTitleElement, AriaKeyShortcutsController, BufferingIndicatorElement, CONTAINER_CONTEXT_KEY, CaptionsButtonElement, type Comparator, ContainerContext, ContainerContextConsumer, ContainerContextValue, ContainerMixin, ContainerMixinConfig, ContextPartElement, ControlsElement, ControlsGroupElement, CreatePlayerConfig, CreatePlayerResult, ErrorDialogElement, FullscreenButtonElement, GestureElement, HotkeyElement, MEDIA_CONTEXT_KEY, MediaAttachMixin, MediaButtonElement, MediaContainerElement, MediaContext, MediaContextValue, MediaElement, MediaElementConstructor, MediaUIElement, MuteButtonElement, PLAYER_CONTEXT_KEY, type PartContextValue, PiPButtonElement, PlayButtonElement, PlaybackRateButtonElement, PlayerConsumer, PlayerConsumerConstructor, PlayerContext, PlayerContextValue, PlayerController, PlayerControllerHost, PlayerProvider, PlayerProviderConstructor, PopoverElement, PosterElement, ProviderMixin, ProviderMixinConfig, SeekButtonElement, type Selector, SliderBufferElement, type SliderContextValue, SliderElement, type SliderEventMap, SliderFillElement, SliderPreviewElement, SliderThumbElement, SliderThumbnailElement, SliderTrackElement, SliderValueElement, type SliderValueEventDetail, ThumbnailElement, TimeElement, TimeGroupElement, TimeSeparatorElement, TimeSliderElement, TooltipElement, TooltipGroupElement, VolumeSliderElement, alertDialogContext, containerContext, createContainerMixin, createMediaAttachMixin, createPlayer, createProviderMixin, createSelector, mediaContext, playerContext, shallowEqual, sliderContext, tooltipGroupContext };

package/dist/dev/index.js

@@ -1,21 +1,27 @@
-import { PLAYER_CONTEXT_KEY, playerContext } from "./player/context.js";
+import { CONTAINER_CONTEXT_KEY, MEDIA_CONTEXT_KEY, PLAYER_CONTEXT_KEY, containerContext, mediaContext, playerContext } from "./player/context.js";
 import { createContainerMixin } from "./store/container-mixin.js";
 import { MediaElement } from "./ui/media-element.js";
 import { MediaContainerElement } from "./media/container-element.js";
 import { createProviderMixin } from "./store/provider-mixin.js";
 import { PlayerController } from "./player/player-controller.js";
 import { createPlayer } from "./player/create-player.js";
+import { MediaAttachMixin, createMediaAttachMixin } from "./store/media-attach-mixin.js";
 import { alertDialogContext } from "./ui/alert-dialog/context.js";
 import { AlertDialogCloseElement } from "./ui/alert-dialog/alert-dialog-close-element.js";
+import { ContextPartElement } from "./ui/context-part-element.js";
 import { AlertDialogDescriptionElement } from "./ui/alert-dialog/alert-dialog-description-element.js";
 import { AlertDialogElement } from "./ui/alert-dialog/alert-dialog-element.js";
 import { AlertDialogTitleElement } from "./ui/alert-dialog/alert-dialog-title-element.js";
 import { BufferingIndicatorElement } from "./ui/buffering-indicator/buffering-indicator-element.js";
+import { AriaKeyShortcutsController } from "./ui/hotkey/aria-key-shortcuts-controller.js";
 import { MediaButtonElement } from "./ui/media-button-element.js";
 import { CaptionsButtonElement } from "./ui/captions-button/captions-button-element.js";
 import { ControlsElement } from "./ui/controls/controls-element.js";
 import { ControlsGroupElement } from "./ui/controls/controls-group-element.js";
+import { ErrorDialogElement } from "./ui/error-dialog/error-dialog-element.js";
 import { FullscreenButtonElement } from "./ui/fullscreen-button/fullscreen-button-element.js";
+import { GestureElement } from "./ui/gesture/gesture-element.js";
+import { HotkeyElement } from "./ui/hotkey/hotkey-element.js";
 import { MediaUIElement } from "./ui/media-ui-element.js";
 import { MuteButtonElement } from "./ui/mute-button/mute-button-element.js";
 import { PiPButtonElement } from "./ui/pip-button/pip-button-element.js";
@@ -28,6 +34,7 @@ import { sliderContext } from "./ui/slider/context.js";
 import { SliderBufferElement } from "./ui/slider/slider-buffer-element.js";
 import { SliderElement } from "./ui/slider/slider-element.js";
 import { SliderFillElement } from "./ui/slider/slider-fill-element.js";
+import { SliderPreviewElement } from "./ui/slider/slider-preview-element.js";
 import { SliderThumbElement } from "./ui/slider/slider-thumb-element.js";
 import { ThumbnailElement } from "./ui/thumbnail/thumbnail-element.js";
 import { SliderThumbnailElement } from "./ui/slider/slider-thumbnail-element.js";
@@ -42,7 +49,5 @@ import { TooltipElement } from "./ui/tooltip/tooltip-element.js";
 import { TooltipGroupElement } from "./ui/tooltip/tooltip-group-element.js";
 import { VolumeSliderElement } from "./ui/volume-slider/volume-slider-element.js";
 import { createSelector, shallowEqual } from "@videojs/store";
-
-export * from "@videojs/core/dom"
-
-export { AlertDialogCloseElement, AlertDialogDescriptionElement, AlertDialogElement, AlertDialogTitleElement, BufferingIndicatorElement, CaptionsButtonElement, ControlsElement, ControlsGroupElement, FullscreenButtonElement, MediaButtonElement, MediaContainerElement, MediaElement, MediaUIElement, MuteButtonElement, PLAYER_CONTEXT_KEY, PiPButtonElement, PlayButtonElement, PlaybackRateButtonElement, PlayerController, PopoverElement, PosterElement, SeekButtonElement, SliderBufferElement, SliderElement, SliderFillElement, SliderThumbElement, SliderThumbnailElement, SliderTrackElement, SliderValueElement, ThumbnailElement, TimeElement, TimeGroupElement, TimeSeparatorElement, TimeSliderElement, TooltipElement, TooltipGroupElement, VolumeSliderElement, alertDialogContext, createContainerMixin, createPlayer, createProviderMixin, createSelector, playerContext, shallowEqual, sliderContext, tooltipGroupContext };
+export * from "@videojs/core/dom";
+export { AlertDialogCloseElement, AlertDialogDescriptionElement, AlertDialogElement, AlertDialogTitleElement, AriaKeyShortcutsController, BufferingIndicatorElement, CONTAINER_CONTEXT_KEY, CaptionsButtonElement, ContextPartElement, ControlsElement, ControlsGroupElement, ErrorDialogElement, FullscreenButtonElement, GestureElement, HotkeyElement, MEDIA_CONTEXT_KEY, MediaAttachMixin, MediaButtonElement, MediaContainerElement, MediaElement, MediaUIElement, MuteButtonElement, PLAYER_CONTEXT_KEY, PiPButtonElement, PlayButtonElement, PlaybackRateButtonElement, PlayerController, PopoverElement, PosterElement, SeekButtonElement, SliderBufferElement, SliderElement, SliderFillElement, SliderPreviewElement, SliderThumbElement, SliderThumbnailElement, SliderTrackElement, SliderValueElement, ThumbnailElement, TimeElement, TimeGroupElement, TimeSeparatorElement, TimeSliderElement, TooltipElement, TooltipGroupElement, VolumeSliderElement, alertDialogContext, containerContext, createContainerMixin, createMediaAttachMixin, createPlayer, createProviderMixin, createSelector, mediaContext, playerContext, shallowEqual, sliderContext, tooltipGroupContext };

package/dist/dev/media/background-video/index.d.ts

@@ -1,12 +1,19 @@
+import { Media } from "@videojs/core/dom";
+
 //#region src/media/background-video/index.d.ts
 declare function getTemplateHTML(attrs: Record<string, string>): string;
-declare class BackgroundVideo extends HTMLElement {
+declare const BackgroundVideo_base: {
+  new (): HTMLElement;
+  prototype: HTMLElement;
+};
+declare class BackgroundVideo extends BackgroundVideo_base {
   static shadowRootOptions: {
     mode: ShadowRootMode;
   };
   static getTemplateHTML: typeof getTemplateHTML;
   static get observedAttributes(): string[];
   constructor();
+  getMediaTarget(): Media | null;
   attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void;
   get target(): HTMLVideoElement | null;
 }

package/dist/dev/media/background-video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/background-video/index.ts"],"mappings":";iBAES,eAAA,CAAgB,KAAA,EAAO,MAAA;AAAA,cAsBnB,eAAA,SAAwB,WAAA;EAAA,OAC5B,iBAAA;UAAsC,cAAA;EAAA;EAAA,OACtC,eAAA,SAAe,eAAA;EAAA,WACX,kBAAA,CAAA;;EA6BX,wBAAA,CAAyB,QAAA,UAAkB,QAAA,iBAAyB,QAAA;EAAA,IAMhE,MAAA,CAAA,GAAU,gBAAA;AAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/background-video/index.ts"],"mappings":";;;iBAIS,eAAA,CAAgB,KAAA,EAAO,MAAA;AAAA,cAAsB,oBAAA;EAAA;;;cAsBzC,eAAA,SAAwB,oBAAA;EAAA,OAC5B,iBAAA;UAAsC,cAAA;EAAA;EAAA,OACtC,eAAA,SAAe,eAAA;EAAA,WACX,kBAAA,CAAA;;EA8BX,cAAA,CAAA,GAAkB,KAAA;EAIlB,wBAAA,CAAyB,QAAA,UAAkB,QAAA,iBAAyB,QAAA;EAAA,IAMhE,MAAA,CAAA,GAAU,gBAAA;AAAA"}

package/dist/dev/media/background-video/index.js

@@ -1,5 +1,5 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
 import { namedNodeMapToObject } from "@videojs/utils/dom";
-
 //#region src/media/background-video/index.ts
 function getTemplateHTML(attrs) {
 	return `
@@ -21,7 +21,7 @@ function getTemplateHTML(attrs) {
     <video ${serializeAttributes(attrs)}></video>
   `;
 }
-var BackgroundVideo = class extends HTMLElement {
+var BackgroundVideo = class extends MediaAttachMixin(HTMLElement) {
 	static {
 		this.shadowRootOptions = { mode: "open" };
 	}
@@ -48,6 +48,9 @@ var BackgroundVideo = class extends HTMLElement {
 		}
 		this.target.muted = !this.hasAttribute("nomuted");
 	}
+	getMediaTarget() {
+		return this.target;
+	}
 	attributeChangedCallback(attrName, oldValue, newValue) {
 		if (attrName === "src" && oldValue !== newValue) this.target.src = newValue ?? "";
 	}
@@ -77,7 +80,7 @@ function serializeAttributes(attrs) {
 	}
 	return html;
 }
-
 //#endregion
 export { BackgroundVideo };
+
 //# sourceMappingURL=index.js.map

package/dist/dev/media/background-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.ts"],"sourcesContent":["import { namedNodeMapToObject } from '@videojs/utils/dom';\n\nfunction getTemplateHTML(attrs: Record<string, string>) {\n  return /*html*/ `\n    <style>\n      :host {\n        position: relative;\n      }\n\n      video {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--media-object-fit, inherit);\n        object-position: var(--media-object-position, 50% 50%);\n      }\n    </style>\n    <slot></slot>\n    <video ${serializeAttributes(attrs)}></video>\n  `;\n}\n\n// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends HTMLElement {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n  static get observedAttributes() {\n    return ['src'];\n  }\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideo).shadowRootOptions);\n\n      const attrs = {\n        ...namedNodeMapToObject(this.attributes),\n        ...(!this.hasAttribute('nomuted') && { muted: '' }),\n        ...(!this.hasAttribute('noloop') && { loop: '' }),\n        ...(!this.hasAttribute('noautoplay') && { autoplay: '' }),\n        playsinline: '',\n        disableremoteplayback: '',\n        disablepictureinpicture: '',\n      };\n\n      this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n    }\n\n    // Neither Chrome or Firefox support setting the muted attribute\n    // after using document.createElement.\n    // Get around this by setting the muted property manually.\n    this.target!.muted = !this.hasAttribute('nomuted');\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.target!.src = newValue ?? '';\n    }\n  }\n\n  get target(): HTMLVideoElement | null {\n    return (\n      this.querySelector(':scope > [slot=media]') ??\n      this.querySelector('video') ??\n      this.shadowRoot?.querySelector('video') ??\n      null\n    );\n  }\n}\n\nconst VideoAttributes = [\n  'autoplay',\n  'controls',\n  'controlslist',\n  'crossorigin',\n  'disablepictureinpicture',\n  'disableremoteplayback',\n  'loop',\n  'muted',\n  'playsinline',\n  'preload',\n] as const;\n\nfunction serializeAttributes(attrs: Record<string, string>): string {\n  let html = '';\n  for (const key in attrs) {\n    // Skip forwarding non native video attributes.\n    if (!VideoAttributes.includes(key as any)) continue;\n\n    const value = attrs[key];\n    if (value === '') html += ` ${key}`;\n    else html += ` ${key}=\"${value}\"`;\n  }\n  return html;\n}\n"],"mappings":";;;AAEA,SAAS,gBAAgB,OAA+B;AACtD,QAAgB;;;;;;;;;;;;;;;;aAgBL,oBAAoB,MAAM,CAAC;;;AAKxC,IAAa,kBAAb,cAAqC,YAAY;;2BACpB,EAAE,MAAM,QAA0B;;;yBACpC;;CACzB,WAAW,qBAAqB;AAC9B,SAAO,CAAC,MAAM;;CAGhB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;GAEjF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,WAAW;IACxC,GAAI,CAAC,KAAK,aAAa,UAAU,IAAI,EAAE,OAAO,IAAI;IAClD,GAAI,CAAC,KAAK,aAAa,SAAS,IAAI,EAAE,MAAM,IAAI;IAChD,GAAI,CAAC,KAAK,aAAa,aAAa,IAAI,EAAE,UAAU,IAAI;IACxD,aAAa;IACb,uBAAuB;IACvB,yBAAyB;IAC1B;AAED,QAAK,WAAY,YAAY,gBAAgB,MAAM;;AAMrD,OAAK,OAAQ,QAAQ,CAAC,KAAK,aAAa,UAAU;;CAGpD,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,OAAQ,MAAM,YAAY;;CAInC,IAAI,SAAkC;AACpC,SACE,KAAK,cAAc,wBAAwB,IAC3C,KAAK,cAAc,QAAQ,IAC3B,KAAK,YAAY,cAAc,QAAQ,IACvC;;;AAKN,MAAM,kBAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,oBAAoB,OAAuC;CAClE,IAAI,OAAO;AACX,MAAK,MAAM,OAAO,OAAO;AAEvB,MAAI,CAAC,gBAAgB,SAAS,IAAW,CAAE;EAE3C,MAAM,QAAQ,MAAM;AACpB,MAAI,UAAU,GAAI,SAAQ,IAAI;MACzB,SAAQ,IAAI,IAAI,IAAI,MAAM;;AAEjC,QAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.ts"],"sourcesContent":["import type { Media } from '@videojs/core/dom';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nfunction getTemplateHTML(attrs: Record<string, string>) {\n  return /*html*/ `\n    <style>\n      :host {\n        position: relative;\n      }\n\n      video {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--media-object-fit, inherit);\n        object-position: var(--media-object-position, 50% 50%);\n      }\n    </style>\n    <slot></slot>\n    <video ${serializeAttributes(attrs)}></video>\n  `;\n}\n\n// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends MediaAttachMixin(HTMLElement) {\n  static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n  static getTemplateHTML = getTemplateHTML;\n  static get observedAttributes() {\n    return ['src'];\n  }\n\n  constructor() {\n    super();\n\n    if (!this.shadowRoot) {\n      this.attachShadow((this.constructor as typeof BackgroundVideo).shadowRootOptions);\n\n      const attrs = {\n        ...namedNodeMapToObject(this.attributes),\n        ...(!this.hasAttribute('nomuted') && { muted: '' }),\n        ...(!this.hasAttribute('noloop') && { loop: '' }),\n        ...(!this.hasAttribute('noautoplay') && { autoplay: '' }),\n        playsinline: '',\n        disableremoteplayback: '',\n        disablepictureinpicture: '',\n      };\n\n      this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n    }\n\n    // Neither Chrome or Firefox support setting the muted attribute\n    // after using document.createElement.\n    // Get around this by setting the muted property manually.\n    this.target!.muted = !this.hasAttribute('nomuted');\n  }\n\n  // Register the inner <video> (not `this`) with the provider.\n  getMediaTarget(): Media | null {\n    return this.target;\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.target!.src = newValue ?? '';\n    }\n  }\n\n  get target(): HTMLVideoElement | null {\n    return (\n      this.querySelector(':scope > [slot=media]') ??\n      this.querySelector('video') ??\n      this.shadowRoot?.querySelector('video') ??\n      null\n    );\n  }\n}\n\nconst VideoAttributes = [\n  'autoplay',\n  'controls',\n  'controlslist',\n  'crossorigin',\n  'disablepictureinpicture',\n  'disableremoteplayback',\n  'loop',\n  'muted',\n  'playsinline',\n  'preload',\n] as const;\n\nfunction serializeAttributes(attrs: Record<string, string>): string {\n  let html = '';\n  for (const key in attrs) {\n    // Skip forwarding non native video attributes.\n    if (!VideoAttributes.includes(key as any)) continue;\n\n    const value = attrs[key];\n    if (value === '') html += ` ${key}`;\n    else html += ` ${key}=\"${value}\"`;\n  }\n  return html;\n}\n"],"mappings":";;;AAIA,SAAS,gBAAgB,OAA+B;AACtD,QAAgB;;;;;;;;;;;;;;;;aAgBL,oBAAoB,MAAM,CAAC;;;AAKxC,IAAa,kBAAb,cAAqC,iBAAiB,YAAY,CAAC;;2BACtC,EAAE,MAAM,QAA0B;;;yBACpC;;CACzB,WAAW,qBAAqB;AAC9B,SAAO,CAAC,MAAM;;CAGhB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;GAEjF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,WAAW;IACxC,GAAI,CAAC,KAAK,aAAa,UAAU,IAAI,EAAE,OAAO,IAAI;IAClD,GAAI,CAAC,KAAK,aAAa,SAAS,IAAI,EAAE,MAAM,IAAI;IAChD,GAAI,CAAC,KAAK,aAAa,aAAa,IAAI,EAAE,UAAU,IAAI;IACxD,aAAa;IACb,uBAAuB;IACvB,yBAAyB;IAC1B;AAED,QAAK,WAAY,YAAY,gBAAgB,MAAM;;AAMrD,OAAK,OAAQ,QAAQ,CAAC,KAAK,aAAa,UAAU;;CAIpD,iBAA+B;AAC7B,SAAO,KAAK;;CAGd,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,OAAQ,MAAM,YAAY;;CAInC,IAAI,SAAkC;AACpC,SACE,KAAK,cAAc,wBAAwB,IAC3C,KAAK,cAAc,QAAQ,IAC3B,KAAK,YAAY,cAAc,QAAQ,IACvC;;;AAKN,MAAM,kBAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,oBAAoB,OAAuC;CAClE,IAAI,OAAO;AACX,MAAK,MAAM,OAAO,OAAO;AAEvB,MAAI,CAAC,gBAAgB,SAAS,IAAW,CAAE;EAE3C,MAAM,QAAQ,MAAM;AACpB,MAAI,UAAU,GAAI,SAAQ,IAAI;MACzB,SAAQ,IAAI,IAAI,IAAI,MAAM;;AAEjC,QAAO"}

package/dist/dev/media/container-element.d.ts

@@ -5,7 +5,10 @@ import * as _videojs_core_dom0 from "@videojs/core/dom";
 //#region src/media/container-element.d.ts
 declare const MediaContainerElement_base: typeof MediaElement & PlayerConsumerConstructor<_videojs_core_dom0.AnyPlayerStore>;
 declare class MediaContainerElement extends MediaContainerElement_base {
+  #private;
   static readonly tagName = "media-container";
+  connectedCallback(): void;
+  disconnectedCallback(): void;
 }
 //#endregion
 export { MediaContainerElement };

package/dist/dev/media/container-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container-element.d.ts","names":[],"sources":["../../../src/media/container-element.ts"],"mappings":";;;;;cAEmD,0BAAA;cAItC,qBAAA,SAA8B,0BAAA;EAAA,gBACzB,OAAA;AAAA"}
+{"version":3,"file":"container-element.d.ts","names":[],"sources":["../../../src/media/container-element.ts"],"mappings":";;;;;cAImD,0BAAA;cAItC,qBAAA,SAA8B,0BAAA;EAAA;kBACzB,OAAA;EAIP,iBAAA,CAAA;EAYA,oBAAA,CAAA;AAAA"}

package/dist/dev/media/container-element.js

@@ -1,15 +1,33 @@
-import { playerContext } from "../player/context.js";
+import { containerContext, playerContext } from "../player/context.js";
 import { createContainerMixin } from "../store/container-mixin.js";
 import { MediaElement } from "../ui/media-element.js";
-
+import { listen } from "@videojs/utils/dom";
 //#region src/media/container-element.ts
-const ContainerMixin = createContainerMixin(playerContext);
+const ContainerMixin = createContainerMixin({
+	playerContext,
+	containerContext
+});
 var MediaContainerElement = class extends ContainerMixin(MediaElement) {
 	static {
 		this.tagName = "media-container";
 	}
+	#disconnect = null;
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+		this.#disconnect = new AbortController();
+		listen(this, "pointerup", this.#onPointerUp, { signal: this.#disconnect.signal });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	#onPointerUp = () => {
+		if (!this.contains(document.activeElement) || document.activeElement === document.body) this.focus({ preventScroll: true });
+	};
 };
-
 //#endregion
 export { MediaContainerElement };
+
 //# sourceMappingURL=container-element.js.map

package/dist/dev/media/container-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"container-element.js","names":[],"sources":["../../../src/media/container-element.ts"],"sourcesContent":["import { playerContext } from '../player/context';\nimport { createContainerMixin } from '../store/container-mixin';\nimport { MediaElement } from '../ui/media-element';\n\nconst ContainerMixin = createContainerMixin(playerContext);\n\nexport class MediaContainerElement extends ContainerMixin(MediaElement) {\n  static readonly tagName = 'media-container';\n}\n"],"mappings":";;;;;AAIA,MAAM,iBAAiB,qBAAqB,cAAc;AAE1D,IAAa,wBAAb,cAA2C,eAAe,aAAa,CAAC;;iBAC5C"}
+{"version":3,"file":"container-element.js","names":["#disconnect","#onPointerUp"],"sources":["../../../src/media/container-element.ts"],"sourcesContent":["import { listen } from '@videojs/utils/dom';\n\nimport { containerContext, playerContext } from '../player/context';\nimport { createContainerMixin } from '../store/container-mixin';\nimport { MediaElement } from '../ui/media-element';\n\nconst ContainerMixin = createContainerMixin({ playerContext, containerContext });\n\nexport class MediaContainerElement extends ContainerMixin(MediaElement) {\n  static readonly tagName = 'media-container';\n\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Make focusable so keyboard events reach hotkey listeners.\n    if (!this.hasAttribute('tabindex')) {\n      this.setAttribute('tabindex', '0');\n    }\n\n    this.#disconnect = new AbortController();\n    listen(this, 'pointerup', this.#onPointerUp, { signal: this.#disconnect.signal });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  #onPointerUp = (): void => {\n    // If nothing inside the container has focus, grab it so keyboard\n    // events reach the hotkey coordinator's listener.\n    if (!this.contains(document.activeElement) || document.activeElement === document.body) {\n      this.focus({ preventScroll: true });\n    }\n  };\n}\n"],"mappings":";;;;;AAMA,MAAM,iBAAiB,qBAAqB;CAAE;CAAe;CAAkB,CAAC;AAEhF,IAAa,wBAAb,cAA2C,eAAe,aAAa,CAAC;;iBAC5C;;CAE1B,cAAsC;CAEtC,oBAAmC;AACjC,QAAM,mBAAmB;AAGzB,MAAI,CAAC,KAAK,aAAa,WAAW,CAChC,MAAK,aAAa,YAAY,IAAI;AAGpC,QAAA,aAAmB,IAAI,iBAAiB;AACxC,SAAO,MAAM,aAAa,MAAA,aAAmB,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CAAC;;CAGnF,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;;CAGrB,qBAA2B;AAGzB,MAAI,CAAC,KAAK,SAAS,SAAS,cAAc,IAAI,SAAS,kBAAkB,SAAS,KAChF,MAAK,MAAM,EAAE,eAAe,MAAM,CAAC"}

package/dist/dev/media/dash-video/index.d.ts

@@ -0,0 +1,17 @@
+import { DashMedia } from "@videojs/core/dom/media/dash";
+import * as _videojs_utils_types0 from "@videojs/utils/types";
+
+//#region src/media/dash-video/index.d.ts
+declare const DashVideo_base: _videojs_utils_types0.Constructor<HTMLElement & DashMedia> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class DashVideo extends DashVideo_base {}
+//#endregion
+export { DashVideo };
+//# sourceMappingURL=index.d.ts.map

package/dist/dev/media/dash-video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/dash-video/index.ts"],"mappings":";;;;cACyD,cAAA;;;;;;;;;cAG5C,SAAA,SAAkB,cAAA"}

package/dist/dev/media/dash-video/index.js

@@ -0,0 +1,9 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/core/dom/media/custom-media-element";
+import { DashMedia } from "@videojs/core/dom/media/dash";
+//#region src/media/dash-video/index.ts
+var DashVideo = class extends MediaAttachMixin(CustomMediaElement("video", DashMedia)) {};
+//#endregion
+export { DashVideo };
+
+//# sourceMappingURL=index.js.map

package/dist/dev/media/dash-video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/dash-video/index.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element';\nimport { DashMedia } from '@videojs/core/dom/media/dash';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class DashVideo extends MediaAttachMixin(CustomMediaElement('video', DashMedia)) {}\n"],"mappings":";;;;AAIA,IAAa,YAAb,cAA+B,iBAAiB,mBAAmB,SAAS,UAAU,CAAC,CAAC"}

package/dist/dev/media/hls-video/index.d.ts

@@ -1,11 +1,18 @@
-import { HlsCustomMedia } from "@videojs/core/dom/media/hls";
+import { HlsMedia } from "@videojs/core/dom/media/hls";
+import * as _videojs_utils_types0 from "@videojs/utils/types";
 
 //#region src/media/hls-video/index.d.ts
-declare class HlsVideo extends HlsCustomMedia {
-  static getTemplateHTML(attrs: Record<string, string>): string;
-  constructor();
-  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void;
-  disconnectedCallback(): void;
+declare const HlsVideo_base: _videojs_utils_types0.Constructor<HTMLElement & HlsMedia> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class HlsVideo extends HlsVideo_base {
+  static get observedAttributes(): string[];
 }
 //#endregion
 export { HlsVideo };

package/dist/dev/media/hls-video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/hls-video/index.ts"],"mappings":";;;cAEa,QAAA,SAAiB,cAAA;EAAA,OACrB,eAAA,CAAgB,KAAA,EAAO,MAAA;;EAe9B,wBAAA,CAAyB,QAAA,UAAkB,QAAA,iBAAyB,QAAA;EAUpE,oBAAA,CAAA;AAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/hls-video/index.ts"],"mappings":";;;;cACuD,aAAA;;;;;;;;;cAG1C,QAAA,SAAiB,aAAA;EAAA,WACjB,kBAAA,CAAA;AAAA"}

package/dist/dev/media/hls-video/index.js

@@ -1,25 +1,18 @@
-import { HlsCustomMedia } from "@videojs/core/dom/media/hls";
-
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/core/dom/media/custom-media-element";
+import { HlsMedia } from "@videojs/core/dom/media/hls";
 //#region src/media/hls-video/index.ts
-var HlsVideo = class extends HlsCustomMedia {
-	static getTemplateHTML(attrs) {
-		const { src, ...rest } = attrs;
-		return super.getTemplateHTML(rest);
-	}
-	constructor() {
-		super();
-		this.attach(this.target);
-	}
-	attributeChangedCallback(attrName, oldValue, newValue) {
-		if (attrName !== "src") super.attributeChangedCallback(attrName, oldValue, newValue);
-		if (attrName === "src" && oldValue !== newValue) this.src = newValue ?? "";
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback?.();
-		if (!this.hasAttribute("keep-alive")) this.destroy();
+var HlsVideo = class extends MediaAttachMixin(CustomMediaElement("video", HlsMedia)) {
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"type",
+			"prefer-playback",
+			"debug"
+		];
 	}
 };
-
 //#endregion
 export { HlsVideo };
+
 //# sourceMappingURL=index.js.map

package/dist/dev/media/hls-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hls-video/index.ts"],"sourcesContent":["import { HlsCustomMedia } from '@videojs/core/dom/media/hls';\n\nexport class HlsVideo extends HlsCustomMedia {\n  static getTemplateHTML(attrs: Record<string, string>): string {\n    const { src, ...rest } = attrs;\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return super.getTemplateHTML(rest);\n  }\n\n  constructor() {\n    super();\n    // TODO: If we like to support native media elements that\n    // are appended after the custom element is created, we need to\n    // attach the native element to the Media API after the native element\n    // is appended to the DOM. This is currently not supported.\n    this.attach(this.target);\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName !== 'src') {\n      super.attributeChangedCallback(attrName, oldValue, newValue);\n    }\n\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.src = newValue ?? '';\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n\n    if (!this.hasAttribute('keep-alive')) {\n      this.destroy();\n    }\n  }\n}\n"],"mappings":";;;AAEA,IAAa,WAAb,cAA8B,eAAe;CAC3C,OAAO,gBAAgB,OAAuC;EAC5D,MAAM,EAAE,KAAK,GAAG,SAAS;AAEzB,SAAO,MAAM,gBAAgB,KAAK;;CAGpC,cAAc;AACZ,SAAO;AAKP,OAAK,OAAO,KAAK,OAAO;;CAG1B,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,MACf,OAAM,yBAAyB,UAAU,UAAU,SAAS;AAG9D,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,MAAM,YAAY;;CAI3B,uBAA6B;AAC3B,QAAM,wBAAwB;AAE9B,MAAI,CAAC,KAAK,aAAa,aAAa,CAClC,MAAK,SAAS"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hls-video/index.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element';\nimport { HlsMedia } from '@videojs/core/dom/media/hls';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class HlsVideo extends MediaAttachMixin(CustomMediaElement('video', HlsMedia)) {\n  static get observedAttributes() {\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return [...super.observedAttributes, 'type', 'prefer-playback', 'debug'];\n  }\n}\n"],"mappings":";;;;AAIA,IAAa,WAAb,cAA8B,iBAAiB,mBAAmB,SAAS,SAAS,CAAC,CAAC;CACpF,WAAW,qBAAqB;AAE9B,SAAO;GAAC,GAAG,MAAM;GAAoB;GAAQ;GAAmB;GAAQ"}

package/dist/dev/media/mux-audio/index.d.ts

@@ -0,0 +1,19 @@
+import { MuxAudioMedia } from "@videojs/core/dom/media/mux";
+import * as _videojs_utils_types0 from "@videojs/utils/types";
+
+//#region src/media/mux-audio/index.d.ts
+declare const MuxAudio_base: _videojs_utils_types0.Constructor<HTMLElement & MuxAudioMedia> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class MuxAudio extends MuxAudio_base {
+  static get observedAttributes(): string[];
+}
+//#endregion
+export { MuxAudio };
+//# sourceMappingURL=index.d.ts.map

package/dist/dev/media/mux-audio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/mux-audio/index.ts"],"mappings":";;;;cAC4D,aAAA;;;;;;;;;cAG/C,QAAA,SAAiB,aAAA;EAAA,WACjB,kBAAA,CAAA;AAAA"}

package/dist/dev/media/mux-audio/index.js

@@ -0,0 +1,18 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/core/dom/media/custom-media-element";
+import { MuxAudioMedia } from "@videojs/core/dom/media/mux";
+//#region src/media/mux-audio/index.ts
+var MuxAudio = class extends MediaAttachMixin(CustomMediaElement("audio", MuxAudioMedia)) {
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"type",
+			"prefer-playback",
+			"debug"
+		];
+	}
+};
+//#endregion
+export { MuxAudio };
+
+//# sourceMappingURL=index.js.map

package/dist/dev/media/mux-audio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/mux-audio/index.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element';\nimport { MuxAudioMedia } from '@videojs/core/dom/media/mux';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class MuxAudio extends MediaAttachMixin(CustomMediaElement('audio', MuxAudioMedia)) {\n  static get observedAttributes() {\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return [...super.observedAttributes, 'type', 'prefer-playback', 'debug'];\n  }\n}\n"],"mappings":";;;;AAIA,IAAa,WAAb,cAA8B,iBAAiB,mBAAmB,SAAS,cAAc,CAAC,CAAC;CACzF,WAAW,qBAAqB;AAE9B,SAAO;GAAC,GAAG,MAAM;GAAoB;GAAQ;GAAmB;GAAQ"}

package/dist/dev/media/mux-video/index.d.ts

@@ -0,0 +1,19 @@
+import { MuxVideoMedia } from "@videojs/core/dom/media/mux";
+import * as _videojs_utils_types0 from "@videojs/utils/types";
+
+//#region src/media/mux-video/index.d.ts
+declare const MuxVideo_base: _videojs_utils_types0.Constructor<HTMLElement & MuxVideoMedia> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class MuxVideo extends MuxVideo_base {
+  static get observedAttributes(): string[];
+}
+//#endregion
+export { MuxVideo };
+//# sourceMappingURL=index.d.ts.map

package/dist/dev/media/mux-video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/mux-video/index.ts"],"mappings":";;;;cAC4D,aAAA;;;;;;;;;cAG/C,QAAA,SAAiB,aAAA;EAAA,WACjB,kBAAA,CAAA;AAAA"}

package/dist/dev/media/mux-video/index.js

@@ -0,0 +1,18 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/core/dom/media/custom-media-element";
+import { MuxVideoMedia } from "@videojs/core/dom/media/mux";
+//#region src/media/mux-video/index.ts
+var MuxVideo = class extends MediaAttachMixin(CustomMediaElement("video", MuxVideoMedia)) {
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"type",
+			"prefer-playback",
+			"debug"
+		];
+	}
+};
+//#endregion
+export { MuxVideo };
+
+//# sourceMappingURL=index.js.map

package/dist/dev/media/mux-video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/mux-video/index.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element';\nimport { MuxVideoMedia } from '@videojs/core/dom/media/mux';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class MuxVideo extends MediaAttachMixin(CustomMediaElement('video', MuxVideoMedia)) {\n  static get observedAttributes() {\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return [...super.observedAttributes, 'type', 'prefer-playback', 'debug'];\n  }\n}\n"],"mappings":";;;;AAIA,IAAa,WAAb,cAA8B,iBAAiB,mBAAmB,SAAS,cAAc,CAAC,CAAC;CACzF,WAAW,qBAAqB;AAE9B,SAAO;GAAC,GAAG,MAAM;GAAoB;GAAQ;GAAmB;GAAQ"}

package/dist/dev/media/native-hls-video/index.d.ts

@@ -0,0 +1,17 @@
+import { NativeHlsMedia } from "@videojs/core/dom/media/native-hls";
+import * as _videojs_utils_types0 from "@videojs/utils/types";
+
+//#region src/media/native-hls-video/index.d.ts
+declare const NativeHlsVideo_base: _videojs_utils_types0.Constructor<HTMLElement & NativeHlsMedia> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class NativeHlsVideo extends NativeHlsVideo_base {}
+//#endregion
+export { NativeHlsVideo };
+//# sourceMappingURL=index.d.ts.map

package/dist/dev/media/native-hls-video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/native-hls-video/index.ts"],"mappings":";;;;cACoE,mBAAA;;;;;;;;;cAGvD,cAAA,SAAuB,mBAAA"}

package/dist/dev/media/native-hls-video/index.js

@@ -0,0 +1,9 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/core/dom/media/custom-media-element";
+import { NativeHlsMedia } from "@videojs/core/dom/media/native-hls";
+//#region src/media/native-hls-video/index.ts
+var NativeHlsVideo = class extends MediaAttachMixin(CustomMediaElement("video", NativeHlsMedia)) {};
+//#endregion
+export { NativeHlsVideo };
+
+//# sourceMappingURL=index.js.map

package/dist/dev/media/native-hls-video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/native-hls-video/index.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element';\nimport { NativeHlsMedia } from '@videojs/core/dom/media/native-hls';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class NativeHlsVideo extends MediaAttachMixin(CustomMediaElement('video', NativeHlsMedia)) {}\n"],"mappings":";;;;AAIA,IAAa,iBAAb,cAAoC,iBAAiB,mBAAmB,SAAS,eAAe,CAAC,CAAC"}

package/dist/dev/media/simple-hls-video/index.d.ts

@@ -1,11 +1,17 @@
-import { SimpleHlsCustomMedia } from "@videojs/core/dom/media/simple-hls";
+import { SimpleHlsMedia } from "@videojs/core/dom/media/simple-hls";
+import * as _videojs_utils_types0 from "@videojs/utils/types";
 
 //#region src/media/simple-hls-video/index.d.ts
-declare class SimpleHlsVideo extends SimpleHlsCustomMedia {
-  static getTemplateHTML(attrs: Record<string, string>): string;
-  constructor();
-  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void;
-}
+declare const SimpleHlsVideo_base: _videojs_utils_types0.Constructor<HTMLElement & SimpleHlsMedia> & {
+  properties: Record<string, {
+    type: any;
+    attribute?: string;
+  }>;
+  getTemplateHTML: (attrs: Record<string, string>) => string;
+  shadowRootOptions: ShadowRootInit;
+  readonly observedAttributes: string[];
+};
+declare class SimpleHlsVideo extends SimpleHlsVideo_base {}
 //#endregion
 export { SimpleHlsVideo };
 //# sourceMappingURL=index.d.ts.map

package/dist/dev/media/simple-hls-video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/simple-hls-video/index.ts"],"mappings":";;;cAEa,cAAA,SAAuB,oBAAA;EAAA,OAC3B,eAAA,CAAgB,KAAA,EAAO,MAAA;;EAW9B,wBAAA,CAAyB,QAAA,UAAkB,QAAA,iBAAyB,QAAA;AAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/simple-hls-video/index.ts"],"mappings":";;;;cACoE,mBAAA;;;;;;;;;cAGvD,cAAA,SAAuB,mBAAA"}

package/dist/dev/media/simple-hls-video/index.js

@@ -1,21 +1,9 @@
-import { SimpleHlsCustomMedia } from "@videojs/core/dom/media/simple-hls";
-
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/core/dom/media/custom-media-element";
+import { SimpleHlsMedia } from "@videojs/core/dom/media/simple-hls";
 //#region src/media/simple-hls-video/index.ts
-var SimpleHlsVideo = class extends SimpleHlsCustomMedia {
-	static getTemplateHTML(attrs) {
-		const { src, ...rest } = attrs;
-		return super.getTemplateHTML(rest);
-	}
-	constructor() {
-		super();
-		this.attach(this.target);
-	}
-	attributeChangedCallback(attrName, oldValue, newValue) {
-		if (attrName !== "src") super.attributeChangedCallback(attrName, oldValue, newValue);
-		if (attrName === "src" && oldValue !== newValue) this.src = newValue ?? "";
-	}
-};
-
+var SimpleHlsVideo = class extends MediaAttachMixin(CustomMediaElement("video", SimpleHlsMedia)) {};
 //#endregion
 export { SimpleHlsVideo };
+
 //# sourceMappingURL=index.js.map

package/dist/dev/media/simple-hls-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-video/index.ts"],"sourcesContent":["import { SimpleHlsCustomMedia } from '@videojs/core/dom/media/simple-hls';\n\nexport class SimpleHlsVideo extends SimpleHlsCustomMedia {\n  static getTemplateHTML(attrs: Record<string, string>): string {\n    const { src, ...rest } = attrs;\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return super.getTemplateHTML(rest);\n  }\n\n  constructor() {\n    super();\n    this.attach(this.target);\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName !== 'src') {\n      super.attributeChangedCallback(attrName, oldValue, newValue);\n    }\n\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.src = newValue ?? '';\n    }\n  }\n}\n"],"mappings":";;;AAEA,IAAa,iBAAb,cAAoC,qBAAqB;CACvD,OAAO,gBAAgB,OAAuC;EAC5D,MAAM,EAAE,KAAK,GAAG,SAAS;AAEzB,SAAO,MAAM,gBAAgB,KAAK;;CAGpC,cAAc;AACZ,SAAO;AACP,OAAK,OAAO,KAAK,OAAO;;CAG1B,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,MACf,OAAM,yBAAyB,UAAU,UAAU,SAAS;AAG9D,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,MAAM,YAAY"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-video/index.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element';\nimport { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class SimpleHlsVideo extends MediaAttachMixin(CustomMediaElement('video', SimpleHlsMedia)) {}\n"],"mappings":";;;;AAIA,IAAa,iBAAb,cAAoC,iBAAiB,mBAAmB,SAAS,eAAe,CAAC,CAAC"}

package/dist/dev/player/context.d.ts

@@ -1,5 +1,6 @@
-import { AnyPlayerStore, PlayerStore } from "@videojs/core/dom";
-import { Context } from "@videojs/element/context";
+import { AnyPlayerStore, Media, MediaContainer, PlayerStore } from "@videojs/core/dom";
+import { Context, ContextConsumer } from "@videojs/element/context";
+import { ReactiveControllerHost } from "@videojs/element";
 
 //#region src/player/context.d.ts
 declare const PLAYER_CONTEXT_KEY: unique symbol;
@@ -11,6 +12,21 @@ type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<typeof
  * @public
  */
 declare const playerContext: Context<typeof PLAYER_CONTEXT_KEY, AnyPlayerStore>;
+declare const MEDIA_CONTEXT_KEY: unique symbol;
+interface MediaContextValue {
+  media: Media | null;
+  setMedia: (media: Media | null) => void;
+}
+type MediaContext = Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;
+declare const mediaContext: Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;
+declare const CONTAINER_CONTEXT_KEY: unique symbol;
+interface ContainerContextValue {
+  container: MediaContainer | null;
+  setContainer: (container: MediaContainer | null) => void;
+}
+type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;
+type ContainerContextConsumer = ContextConsumer<ContainerContext, ReactiveControllerHost & HTMLElement>;
+declare const containerContext: Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;
 //#endregion
-export { PLAYER_CONTEXT_KEY, PlayerContext, PlayerContextValue, playerContext };
+export { CONTAINER_CONTEXT_KEY, ContainerContext, ContainerContextConsumer, ContainerContextValue, MEDIA_CONTEXT_KEY, MediaContext, MediaContextValue, PLAYER_CONTEXT_KEY, PlayerContext, PlayerContextValue, containerContext, mediaContext, playerContext };
 //# sourceMappingURL=context.d.ts.map