@videojs/html 10.0.0-beta.16 → 10.0.0-beta.17

package/dist/dev/define/ui/volume-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-slider.js","names":[],"sources":["../../../../src/define/ui/volume-slider.ts"],"sourcesContent":["import { SliderFillElement } from '../../ui/slider/slider-fill-element';\nimport { SliderPreviewElement } from '../../ui/slider/slider-preview-element';\nimport { SliderThumbElement } from '../../ui/slider/slider-thumb-element';\nimport { SliderTrackElement } from '../../ui/slider/slider-track-element';\nimport { SliderValueElement } from '../../ui/slider/slider-value-element';\nimport { VolumeSliderElement } from '../../ui/volume-slider/volume-slider-element';\nimport { safeDefine } from '../safe-define';\n\n// Parent slider first — sub-elements consume its context.\nsafeDefine(VolumeSliderElement);\nsafeDefine(SliderFillElement);\nsafeDefine(SliderPreviewElement);\nsafeDefine(SliderThumbElement);\nsafeDefine(SliderTrackElement);\nsafeDefine(SliderValueElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeSliderElement.tagName]: VolumeSliderElement;\n  }\n}\n"],"mappings":";;;;;;;;AASA,WAAW,oBAAoB;AAC/B,WAAW,kBAAkB;AAC7B,WAAW,qBAAqB;AAChC,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB"}
+{"version":3,"file":"volume-slider.js","names":[],"sources":["../../../../src/define/ui/volume-slider.ts"],"sourcesContent":["import { SliderFillElement } from '../../ui/slider/slider-fill-element';\nimport { SliderPreviewElement } from '../../ui/slider/slider-preview-element';\nimport { SliderThumbElement } from '../../ui/slider/slider-thumb-element';\nimport { SliderTrackElement } from '../../ui/slider/slider-track-element';\nimport { SliderValueElement } from '../../ui/slider/slider-value-element';\nimport { VolumeSliderElement } from '../../ui/volume-slider/volume-slider-element';\nimport { defineVolumeSlider } from './compounds';\n\ndefineVolumeSlider();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeSliderElement.tagName]: VolumeSliderElement;\n    [SliderFillElement.tagName]: SliderFillElement;\n    [SliderPreviewElement.tagName]: SliderPreviewElement;\n    [SliderThumbElement.tagName]: SliderThumbElement;\n    [SliderTrackElement.tagName]: SliderTrackElement;\n    [SliderValueElement.tagName]: SliderValueElement;\n  }\n}\n"],"mappings":";;AAQA,oBAAoB"}

package/dist/dev/define/video/minimal-ui.js

@@ -1,18 +1,39 @@
-import "./player.js";
-import "../ui/buffering-indicator.js";
-import "../ui/captions-button.js";
-import "../ui/controls.js";
-import "../ui/error-dialog.js";
-import "../ui/fullscreen-button.js";
-import "../ui/mute-button.js";
-import "../ui/pip-button.js";
-import "../ui/play-button.js";
-import "../ui/playback-rate-button.js";
-import "../ui/popover.js";
-import "../ui/poster.js";
-import "../ui/seek-button.js";
-import "../ui/time.js";
-import "../ui/time-slider.js";
-import "../ui/tooltip.js";
-import "../ui/tooltip-group.js";
-import "../ui/volume-slider.js";
+import { MediaContainerElement } from "../../media/container-element.js";
+import { BufferingIndicatorElement } from "../../ui/buffering-indicator/buffering-indicator-element.js";
+import { CaptionsButtonElement } from "../../ui/captions-button/captions-button-element.js";
+import { FullscreenButtonElement } from "../../ui/fullscreen-button/fullscreen-button-element.js";
+import { MuteButtonElement } from "../../ui/mute-button/mute-button-element.js";
+import { PiPButtonElement } from "../../ui/pip-button/pip-button-element.js";
+import { PlayButtonElement } from "../../ui/play-button/play-button-element.js";
+import { PlaybackRateButtonElement } from "../../ui/playback-rate-button/playback-rate-button-element.js";
+import { PopoverElement } from "../../ui/popover/popover-element.js";
+import { PosterElement } from "../../ui/poster/poster-element.js";
+import { SeekButtonElement } from "../../ui/seek-button/seek-button-element.js";
+import { TooltipElement } from "../../ui/tooltip/tooltip-element.js";
+import { TooltipGroupElement } from "../../ui/tooltip/tooltip-group-element.js";
+import { safeDefine } from "../safe-define.js";
+import { defineControls, defineErrorDialog, defineTime, defineTimeSlider, defineVolumeSlider } from "../ui/compounds.js";
+import { VideoPlayerElement } from "./player.js";
+//#region src/define/video/minimal-ui.ts
+safeDefine(VideoPlayerElement);
+safeDefine(MediaContainerElement);
+defineControls();
+defineErrorDialog();
+defineTimeSlider();
+defineVolumeSlider();
+defineTime();
+safeDefine(BufferingIndicatorElement);
+safeDefine(CaptionsButtonElement);
+safeDefine(FullscreenButtonElement);
+safeDefine(MuteButtonElement);
+safeDefine(PiPButtonElement);
+safeDefine(PlayButtonElement);
+safeDefine(PlaybackRateButtonElement);
+safeDefine(PopoverElement);
+safeDefine(PosterElement);
+safeDefine(SeekButtonElement);
+safeDefine(TooltipElement);
+safeDefine(TooltipGroupElement);
+//#endregion
+
+//# sourceMappingURL=minimal-ui.js.map

package/dist/dev/define/video/minimal-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"minimal-ui.js","names":[],"sources":["../../../../src/define/video/minimal-ui.ts"],"sourcesContent":["// Registers the video player, container, and all video UI custom elements\n// used by the minimal skin without creating a skin element. Use this entry\n// when building an ejected (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 { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-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(FullscreenButtonElement);\nsafeDefine(MuteButtonElement);\nsafeDefine(PiPButtonElement);\nsafeDefine(PlayButtonElement);\nsafeDefine(PlaybackRateButtonElement);\nsafeDefine(PopoverElement);\nsafeDefine(PosterElement);\nsafeDefine(SeekButtonElement);\nsafeDefine(TooltipElement);\nsafeDefine(TooltipGroupElement);\n"],"mappings":";;;;;;;;;;;;;;;;;AAwBA,WAAW,mBAAmB;AAC9B,WAAW,sBAAsB;AAGjC,gBAAgB;AAChB,mBAAmB;AACnB,kBAAkB;AAClB,oBAAoB;AACpB,YAAY;AAGZ,WAAW,0BAA0B;AACrC,WAAW,sBAAsB;AACjC,WAAW,wBAAwB;AACnC,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/dist/dev/define/video/skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/video/skin.ts"],"mappings":";;;;cA2Ja,gBAAA,SAAyB,WAAA;EAAA,gBACpB,OAAA;EAAA,OACT,MAAA,EAFqB,mBAAA,CAEf,WAAA;EAAA,OACN,QAAA,EAAQ,mBAAA;AAAA;AAAA,QAKT,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,gBAAA,CAAiB,OAAA,GAAU,gBAAA;EAAA;AAAA"}
+{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/video/skin.ts"],"mappings":";;;;cAkKa,gBAAA,SAAyB,WAAA;EAAA,gBACpB,OAAA;EAAA,OACT,MAAA,EAFqB,mBAAA,CAEf,WAAA;EAAA,OACN,QAAA,EAAQ,mBAAA;AAAA;AAAA,QAKT,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,gBAAA,CAAiB,OAAA,GAAU,gBAAA;EAAA;AAAA"}

package/dist/dev/define/video/skin.js

@@ -134,7 +134,7 @@ function getTemplateHTML() {
       <media-hotkey keys="m" action="toggleMuted"></media-hotkey>
       <media-hotkey keys="f" action="toggleFullscreen"></media-hotkey>
       <media-hotkey keys="c" action="toggleSubtitles"></media-hotkey>
-      <media-hotkey keys="i" action="togglePiP"></media-hotkey>
+      <media-hotkey keys="i" action="togglePictureInPicture"></media-hotkey>
       <media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey>
       <media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey>
       <media-hotkey keys="l" action="seekStep" value="10"></media-hotkey>
@@ -146,6 +146,13 @@ function getTemplateHTML() {
       <media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey>
       <media-hotkey keys=">" action="speedUp"></media-hotkey>
       <media-hotkey keys="<" action="speedDown"></media-hotkey>
+
+      <!-- Gestures -->
+      <media-gesture type="tap" action="togglePaused" pointer="mouse" region="center"></media-gesture>
+      <media-gesture type="tap" action="toggleControls" pointer="touch"></media-gesture>
+      <media-gesture type="doubletap" action="seekStep" value="-10" region="left"></media-gesture>
+      <media-gesture type="doubletap" action="toggleFullscreen" region="center"></media-gesture>
+      <media-gesture type="doubletap" action="seekStep" value="10" region="right"></media-gesture>
     </media-container>
   `;
 }

package/dist/dev/define/video/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/define/video/skin.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './skin.css?inline';\n\n// Register the player, container, and all UI custom elements.\nimport './ui';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-default-skin media-default-skin--video\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster>\n        <slot name=\"poster\"></slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        <div class=\"media-surface\">\n          ${renderIcon('spinner', { class: 'media-icon' })}\n        </div>\n      </media-buffering-indicator>\n\n      <media-error-dialog class=\"media-error\">\n        <div class=\"media-error__dialog media-surface\">\n          <div class=\"media-error__content\">\n            <media-alert-dialog-title class=\"media-error__title\">Something went wrong.</media-alert-dialog-title>\n            <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n          </div>\n          <div class=\"media-error__actions\">\n            <media-alert-dialog-close class=\"media-button media-button--primary\">OK</media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <media-controls class=\"media-surface media-controls\">\n        <media-tooltip-group>\n          <div class=\"media-button-group\">\n            <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n              ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n              ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n              ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n            </media-play-button>\n            <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\"></media-tooltip>\n\n            <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n              <span class=\"media-icon__container\">\n                ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}\n                <span class=\"media-icon__label\">${SEEK_TIME}</span>\n              </span>\n            </media-seek-button>\n            <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n              Seek backward ${SEEK_TIME} seconds\n            </media-tooltip>\n\n            <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n              <span class=\"media-icon__container\">\n                ${renderIcon('seek', { class: 'media-icon' })}\n                <span class=\"media-icon__label\">${SEEK_TIME}</span>\n              </span>\n            </media-seek-button>\n            <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n              Seek forward ${SEEK_TIME} seconds\n            </media-tooltip>\n          </div>\n\n          <div class=\"media-time-controls\">\n            <media-time type=\"current\" class=\"media-time\"></media-time>\n            <media-time-slider class=\"media-slider\">\n              <media-slider-track class=\"media-slider__track\">\n                <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n              </media-slider-track>\n              <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n\n              <div class=\"media-surface media-preview media-slider__preview\">\n                <media-slider-thumbnail class=\"media-preview__thumbnail\"></media-slider-thumbnail>\n                <media-slider-value type=\"pointer\" class=\"media-time media-preview__time\"></media-slider-value>\n                ${renderIcon('spinner', { class: 'media-preview__spinner media-icon' })}\n              </div>\n            </media-time-slider>\n            <media-time type=\"duration\" class=\"media-time\"></media-time>\n          </div>\n\n          <div class=\"media-button-group\">\n            <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"media-button media-button--subtle media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n            <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n              Toggle playback rate\n            </media-tooltip>\n\n            <media-mute-button commandfor=\"video-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n              ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n              ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n              ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n            </media-mute-button>\n\n            <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n              <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n                <media-slider-track class=\"media-slider__track\">\n                  <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                </media-slider-track>\n                <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n              </media-volume-slider>\n            </media-popover>\n\n            <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n              ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n              ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n            </media-captions-button>\n            <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\"></media-tooltip>\n\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n              ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n              ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\"></media-tooltip>\n\n            <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n              ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n              ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n            </media-fullscreen-button>\n            <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\"></media-tooltip>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n\n      <!-- Hotkeys -->\n      <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n      <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n      <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n      <media-hotkey keys=\"i\" action=\"togglePiP\"></media-hotkey>\n      <media-hotkey keys=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n      <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n      <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n      <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></media-hotkey>\n      <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n      <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n      <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n      <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n      <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n      <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n      <media-hotkey keys=\"<\" action=\"speedDown\"></media-hotkey>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinElement extends SkinElement {\n  static readonly tagName = 'video-skin';\n  static styles = createShadowStyle(styles);\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(VideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinElement.tagName]: VideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;AASA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;;;;;;;;YAYN,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;gBAoB3C,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;gBACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;gBAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;6EAIF,CAAC,UAAU;;kBAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;kDAChC,UAAU;;;;8BAI9B,UAAU;;;4EAGoC,UAAU;;kBAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;kDACZ,UAAU;;;;6BAI/B,UAAU;;;;;;;;;;;;;;;;kBAgBrB,WAAW,WAAW,EAAE,OAAO,qCAAqC,CAAC,CAAC;;;;;;;;;;;;;gBAaxE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;gBAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;gBAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;gBAK3E,WAAW,aAAa,EAAE,OAAO,oCAAoC,CAAC,CAAC;gBACvE,WAAW,YAAY,EAAE,OAAO,mCAAmC,CAAC,CAAC;;;;;gBAKrE,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;gBACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BnG,IAAa,mBAAb,cAAsC,YAAY;;iBACtB;;;gBACV,kBAAkBA,aAAO;;;kBACvB,eAAe,iBAAiB,CAAC;;;AAGrD,WAAW,iBAAiB"}
+{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/define/video/skin.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './skin.css?inline';\n\n// Register the player, container, and all UI custom elements.\nimport './ui';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-default-skin media-default-skin--video\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster>\n        <slot name=\"poster\"></slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        <div class=\"media-surface\">\n          ${renderIcon('spinner', { class: 'media-icon' })}\n        </div>\n      </media-buffering-indicator>\n\n      <media-error-dialog class=\"media-error\">\n        <div class=\"media-error__dialog media-surface\">\n          <div class=\"media-error__content\">\n            <media-alert-dialog-title class=\"media-error__title\">Something went wrong.</media-alert-dialog-title>\n            <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n          </div>\n          <div class=\"media-error__actions\">\n            <media-alert-dialog-close class=\"media-button media-button--primary\">OK</media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <media-controls class=\"media-surface media-controls\">\n        <media-tooltip-group>\n          <div class=\"media-button-group\">\n            <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n              ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n              ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n              ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n            </media-play-button>\n            <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\"></media-tooltip>\n\n            <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n              <span class=\"media-icon__container\">\n                ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })}\n                <span class=\"media-icon__label\">${SEEK_TIME}</span>\n              </span>\n            </media-seek-button>\n            <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n              Seek backward ${SEEK_TIME} seconds\n            </media-tooltip>\n\n            <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n              <span class=\"media-icon__container\">\n                ${renderIcon('seek', { class: 'media-icon' })}\n                <span class=\"media-icon__label\">${SEEK_TIME}</span>\n              </span>\n            </media-seek-button>\n            <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n              Seek forward ${SEEK_TIME} seconds\n            </media-tooltip>\n          </div>\n\n          <div class=\"media-time-controls\">\n            <media-time type=\"current\" class=\"media-time\"></media-time>\n            <media-time-slider class=\"media-slider\">\n              <media-slider-track class=\"media-slider__track\">\n                <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n              </media-slider-track>\n              <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n\n              <div class=\"media-surface media-preview media-slider__preview\">\n                <media-slider-thumbnail class=\"media-preview__thumbnail\"></media-slider-thumbnail>\n                <media-slider-value type=\"pointer\" class=\"media-time media-preview__time\"></media-slider-value>\n                ${renderIcon('spinner', { class: 'media-preview__spinner media-icon' })}\n              </div>\n            </media-time-slider>\n            <media-time type=\"duration\" class=\"media-time\"></media-time>\n          </div>\n\n          <div class=\"media-button-group\">\n            <media-playback-rate-button commandfor=\"playback-rate-tooltip\"  class=\"media-button media-button--subtle media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n            <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n              Toggle playback rate\n            </media-tooltip>\n\n            <media-mute-button commandfor=\"video-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n              ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n              ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n              ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n            </media-mute-button>\n\n            <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n              <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n                <media-slider-track class=\"media-slider__track\">\n                  <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                </media-slider-track>\n                <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n              </media-volume-slider>\n            </media-popover>\n\n            <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n              ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n              ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n            </media-captions-button>\n            <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\"></media-tooltip>\n\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n              ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n              ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\"></media-tooltip>\n\n            <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n              ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n              ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n            </media-fullscreen-button>\n            <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\"></media-tooltip>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n\n      <!-- Hotkeys -->\n      <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n      <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n      <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n      <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n      <media-hotkey keys=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n      <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n      <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n      <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></media-hotkey>\n      <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n      <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n      <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n      <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n      <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n      <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n      <media-hotkey keys=\"<\" action=\"speedDown\"></media-hotkey>\n\n      <!-- Gestures -->\n      <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n      <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"-10\" region=\"left\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"10\" region=\"right\"></media-gesture>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinElement extends SkinElement {\n  static readonly tagName = 'video-skin';\n  static styles = createShadowStyle(styles);\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(VideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinElement.tagName]: VideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;AASA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB;;;;;;;;;;;;YAYN,WAAW,WAAW,EAAE,OAAO,cAAc,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;gBAoB3C,WAAW,WAAW,EAAE,OAAO,kCAAkC,CAAC,CAAC;gBACnE,WAAW,QAAQ,EAAE,OAAO,+BAA+B,CAAC,CAAC;gBAC7D,WAAW,SAAS,EAAE,OAAO,gCAAgC,CAAC,CAAC;;;;6EAIF,CAAC,UAAU;;kBAEtE,WAAW,QAAQ,EAAE,OAAO,kCAAkC,CAAC,CAAC;kDAChC,UAAU;;;;8BAI9B,UAAU;;;4EAGoC,UAAU;;kBAEpE,WAAW,QAAQ,EAAE,OAAO,cAAc,CAAC,CAAC;kDACZ,UAAU;;;;6BAI/B,UAAU;;;;;;;;;;;;;;;;kBAgBrB,WAAW,WAAW,EAAE,OAAO,qCAAqC,CAAC,CAAC;;;;;;;;;;;;;gBAaxE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,cAAc,EAAE,OAAO,qCAAqC,CAAC,CAAC;gBACzE,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;;;;;;;;;gBAa3E,WAAW,gBAAgB,EAAE,OAAO,uCAAuC,CAAC,CAAC;gBAC7E,WAAW,eAAe,EAAE,OAAO,sCAAsC,CAAC,CAAC;;;;;gBAK3E,WAAW,aAAa,EAAE,OAAO,oCAAoC,CAAC,CAAC;gBACvE,WAAW,YAAY,EAAE,OAAO,mCAAmC,CAAC,CAAC;;;;;gBAKrE,WAAW,oBAAoB,EAAE,OAAO,2CAA2C,CAAC,CAAC;gBACrF,WAAW,mBAAmB,EAAE,OAAO,0CAA0C,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCnG,IAAa,mBAAb,cAAsC,YAAY;;iBACtB;;;gBACV,kBAAkBA,aAAO;;;kBACvB,eAAe,iBAAiB,CAAC;;;AAGrD,WAAW,iBAAiB"}

package/dist/dev/define/video/ui.js

@@ -1,19 +1,43 @@
-import "./player.js";
-import "../ui/buffering-indicator.js";
-import "../ui/captions-button.js";
-import "../ui/controls.js";
-import "../ui/error-dialog.js";
-import "../ui/fullscreen-button.js";
-import "../ui/mute-button.js";
-import "../ui/pip-button.js";
-import "../ui/play-button.js";
-import "../ui/playback-rate-button.js";
-import "../ui/popover.js";
-import "../ui/poster.js";
-import "../ui/seek-button.js";
-import "../ui/time.js";
-import "../ui/time-slider.js";
-import "../ui/tooltip.js";
-import "../ui/tooltip-group.js";
-import "../ui/volume-slider.js";
-import "../ui/hotkey.js";
+import { MediaContainerElement } from "../../media/container-element.js";
+import { BufferingIndicatorElement } from "../../ui/buffering-indicator/buffering-indicator-element.js";
+import { CaptionsButtonElement } from "../../ui/captions-button/captions-button-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 { MuteButtonElement } from "../../ui/mute-button/mute-button-element.js";
+import { PiPButtonElement } from "../../ui/pip-button/pip-button-element.js";
+import { PlayButtonElement } from "../../ui/play-button/play-button-element.js";
+import { PlaybackRateButtonElement } from "../../ui/playback-rate-button/playback-rate-button-element.js";
+import { PopoverElement } from "../../ui/popover/popover-element.js";
+import { PosterElement } from "../../ui/poster/poster-element.js";
+import { SeekButtonElement } from "../../ui/seek-button/seek-button-element.js";
+import { TooltipElement } from "../../ui/tooltip/tooltip-element.js";
+import { TooltipGroupElement } from "../../ui/tooltip/tooltip-group-element.js";
+import { safeDefine } from "../safe-define.js";
+import { defineControls, defineErrorDialog, defineTime, defineTimeSlider, defineVolumeSlider } from "../ui/compounds.js";
+import { VideoPlayerElement } from "./player.js";
+//#region src/define/video/ui.ts
+safeDefine(VideoPlayerElement);
+safeDefine(MediaContainerElement);
+defineControls();
+defineErrorDialog();
+defineTimeSlider();
+defineVolumeSlider();
+defineTime();
+safeDefine(BufferingIndicatorElement);
+safeDefine(CaptionsButtonElement);
+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.js.map

package/dist/dev/define/video/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.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 { 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(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":";;;;;;;;;;;;;;;;;;;AA0BA,WAAW,mBAAmB;AAC9B,WAAW,sBAAsB;AAGjC,gBAAgB;AAChB,mBAAmB;AACnB,kBAAkB;AAClB,oBAAoB;AACpB,YAAY;AAGZ,WAAW,0BAA0B;AACrC,WAAW,sBAAsB;AACjC,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/dist/dev/index.d.ts

@@ -20,6 +20,7 @@ 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";
@@ -52,4 +53,4 @@ import { VolumeSliderElement } from "./ui/volume-slider/volume-slider-element.js
 import { DelegateMixin } from "@videojs/core";
 import { Comparator, Selector, createSelector, shallowEqual } from "@videojs/store";
 export * from "@videojs/core/dom";
-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, DelegateMixin, ErrorDialogElement, FullscreenButtonElement, 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 };
+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, DelegateMixin, 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

@@ -20,6 +20,7 @@ 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";
@@ -50,4 +51,4 @@ import { VolumeSliderElement } from "./ui/volume-slider/volume-slider-element.js
 import { DelegateMixin } from "@videojs/core";
 import { createSelector, shallowEqual } from "@videojs/store";
 export * from "@videojs/core/dom";
-export { AlertDialogCloseElement, AlertDialogDescriptionElement, AlertDialogElement, AlertDialogTitleElement, AriaKeyShortcutsController, BufferingIndicatorElement, CONTAINER_CONTEXT_KEY, CaptionsButtonElement, ContextPartElement, ControlsElement, ControlsGroupElement, DelegateMixin, ErrorDialogElement, FullscreenButtonElement, 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 };
+export { AlertDialogCloseElement, AlertDialogDescriptionElement, AlertDialogElement, AlertDialogTitleElement, AriaKeyShortcutsController, BufferingIndicatorElement, CONTAINER_CONTEXT_KEY, CaptionsButtonElement, ContextPartElement, ControlsElement, ControlsGroupElement, DelegateMixin, 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/ui/gesture/gesture-element.d.ts

@@ -0,0 +1,22 @@
+import { MediaElement } from "../media-element.js";
+import { GestureActionName, GesturePointerType, GestureRegion } from "@videojs/core/dom";
+import { PropertyDeclarationMap, PropertyValues } from "@videojs/element";
+
+//#region src/ui/gesture/gesture-element.d.ts
+declare class GestureElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-gesture";
+  static properties: PropertyDeclarationMap;
+  type: 'tap' | 'doubletap' | (string & {});
+  action: GestureActionName | (string & {});
+  value: number | undefined;
+  pointer: GesturePointerType | undefined;
+  region: GestureRegion | undefined;
+  disabled: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { GestureElement };
+//# sourceMappingURL=gesture-element.d.ts.map

package/dist/dev/ui/gesture/gesture-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gesture-element.d.ts","names":[],"sources":["../../../../src/ui/gesture/gesture-element.ts"],"mappings":";;;;;cAea,cAAA,SAAuB,YAAA;EAAA;kBAClB,OAAA;EAAA,OAEA,UAAA,EAAY,sBAAA;EAS5B,IAAA;EACA,MAAA,EAAQ,iBAAA;EACR,KAAA;EACA,OAAA,EAAS,kBAAA;EACT,MAAA,EAAQ,aAAA;EACR,QAAA;EAUS,iBAAA,CAAA;EAMA,oBAAA,CAAA;EAAA,UAKU,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}

package/dist/dev/ui/gesture/gesture-element.js

@@ -0,0 +1,84 @@
+import { containerContext, playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { createDoubleTapGesture, createTapGesture, resolveGestureAction } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/gesture/gesture-element.ts
+var GestureElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "";
+		this.action = "";
+		this.value = void 0;
+		this.pointer = void 0;
+		this.region = void 0;
+		this.disabled = false;
+	}
+	static {
+		this.tagName = "media-gesture";
+	}
+	static {
+		this.properties = {
+			type: { type: String },
+			action: { type: String },
+			value: { type: Number },
+			pointer: { type: String },
+			region: { type: String },
+			disabled: { type: Boolean }
+		};
+	}
+	#player = new PlayerController(this, playerContext);
+	#container = new ContextConsumer(this, {
+		context: containerContext,
+		callback: () => this.requestUpdate(),
+		subscribe: true
+	});
+	#cleanup = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.style.display = "none";
+		this.#register();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#unregister();
+	}
+	update(changed) {
+		super.update(changed);
+		if (this.isConnected) {
+			this.#unregister();
+			this.#register();
+		}
+	}
+	#register() {
+		const store = this.#player.value;
+		const container = this.#container.value?.container;
+		if (!this.type || !this.action || !store || !container) return;
+		const resolver = resolveGestureAction(this.action);
+		if (!resolver) return;
+		const { value } = this;
+		const onActivate = (event) => {
+			resolver({
+				store,
+				value,
+				event
+			});
+		};
+		const options = {
+			pointer: this.pointer,
+			region: this.region,
+			disabled: this.disabled,
+			action: this.action
+		};
+		if (this.type === "doubletap") this.#cleanup = createDoubleTapGesture(container, onActivate, options);
+		else this.#cleanup = createTapGesture(container, onActivate, options);
+	}
+	#unregister() {
+		this.#cleanup?.();
+		this.#cleanup = null;
+	}
+};
+//#endregion
+export { GestureElement };
+
+//# sourceMappingURL=gesture-element.js.map

package/dist/dev/ui/gesture/gesture-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gesture-element.js","names":["#player","#container","#register","#unregister","#cleanup"],"sources":["../../../../src/ui/gesture/gesture-element.ts"],"sourcesContent":["import {\n  createDoubleTapGesture,\n  createTapGesture,\n  type GestureActionName,\n  type GesturePointerType,\n  type GestureRegion,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class GestureElement extends MediaElement {\n  static readonly tagName = 'media-gesture';\n\n  static override properties: PropertyDeclarationMap = {\n    type: { type: String },\n    action: { type: String },\n    value: { type: Number },\n    pointer: { type: String },\n    region: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  type: 'tap' | 'doubletap' | (string & {}) = '';\n  action: GestureActionName | (string & {}) = '';\n  value: number | undefined = undefined;\n  pointer: GesturePointerType | undefined = undefined;\n  region: GestureRegion | undefined = undefined;\n  disabled = false;\n\n  readonly #player = new PlayerController(this, playerContext);\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.requestUpdate(),\n    subscribe: true,\n  });\n  #cleanup: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.style.display = 'none';\n    this.#register();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#unregister();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Re-register when attributes change.\n    if (this.isConnected) {\n      this.#unregister();\n      this.#register();\n    }\n  }\n\n  #register(): void {\n    const store = this.#player.value;\n    const container = this.#container.value?.container;\n    if (!this.type || !this.action || !store || !container) return;\n\n    const resolver = resolveGestureAction(this.action);\n    if (!resolver) return;\n\n    const { value } = this;\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value, event });\n    };\n\n    const options = {\n      pointer: this.pointer,\n      region: this.region,\n      disabled: this.disabled,\n      action: this.action,\n    };\n\n    if (this.type === 'doubletap') {\n      this.#cleanup = createDoubleTapGesture(container, onActivate, options);\n    } else {\n      this.#cleanup = createTapGesture(container, onActivate, options);\n    }\n  }\n\n  #unregister(): void {\n    this.#cleanup?.();\n    this.#cleanup = null;\n  }\n}\n"],"mappings":";;;;;;AAeA,IAAa,iBAAb,cAAoC,aAAa;;;cAYH;gBACA;eAChB,KAAA;iBACc,KAAA;gBACN,KAAA;kBACzB;;;iBAhBe;;;oBAE2B;GACnD,MAAM,EAAE,MAAM,QAAQ;GACtB,QAAQ,EAAE,MAAM,QAAQ;GACxB,OAAO,EAAE,MAAM,QAAQ;GACvB,SAAS,EAAE,MAAM,QAAQ;GACzB,QAAQ,EAAE,MAAM,QAAQ;GACxB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CASD,UAAmB,IAAI,iBAAiB,MAAM,cAAc;CAC5D,aAAsB,IAAI,gBAAgB,MAAM;EAC9C,SAAS;EACT,gBAAgB,KAAK,eAAe;EACpC,WAAW;EACZ,CAAC;CACF,WAAgC;CAEhC,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,OAAK,MAAM,UAAU;AACrB,QAAA,UAAgB;;CAGlB,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB;;CAGpB,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;AAGrB,MAAI,KAAK,aAAa;AACpB,SAAA,YAAkB;AAClB,SAAA,UAAgB;;;CAIpB,YAAkB;EAChB,MAAM,QAAQ,MAAA,OAAa;EAC3B,MAAM,YAAY,MAAA,UAAgB,OAAO;AACzC,MAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,UAAW;EAExD,MAAM,WAAW,qBAAqB,KAAK,OAAO;AAClD,MAAI,CAAC,SAAU;EAEf,MAAM,EAAE,UAAU;EAElB,MAAM,cAAc,UAAwB;AAC1C,YAAS;IAAE;IAAO;IAAO;IAAO,CAAC;;EAGnC,MAAM,UAAU;GACd,SAAS,KAAK;GACd,QAAQ,KAAK;GACb,UAAU,KAAK;GACf,QAAQ,KAAK;GACd;AAED,MAAI,KAAK,SAAS,YAChB,OAAA,UAAgB,uBAAuB,WAAW,YAAY,QAAQ;MAEtE,OAAA,UAAgB,iBAAiB,WAAW,YAAY,QAAQ;;CAIpE,cAAoB;AAClB,QAAA,WAAiB;AACjB,QAAA,UAAgB"}

package/dist/dev/ui/pip-button/pip-button-element.d.ts

@@ -12,7 +12,7 @@ declare class PiPButtonElement extends MediaButtonElement<PiPButtonCore> {
     readonly availability: "data-availability";
   };
   protected readonly mediaState: PlayerController<_videojs_core_dom0.AnyPlayerStore, MediaPictureInPictureState | undefined>;
-  protected readonly hotkeyAction = "togglePiP";
+  protected readonly hotkeyAction = "togglePictureInPicture";
   protected activate(state: MediaPictureInPictureState): void;
 }
 //#endregion

package/dist/dev/ui/pip-button/pip-button-element.js

@@ -10,7 +10,7 @@ var PiPButtonElement = class extends MediaButtonElement {
 		this.core = new PiPButtonCore();
 		this.stateAttrMap = PiPButtonDataAttrs;
 		this.mediaState = new PlayerController(this, playerContext, selectPiP);
-		this.hotkeyAction = "togglePiP";
+		this.hotkeyAction = "togglePictureInPicture";
 	}
 	static {
 		this.tagName = "media-pip-button";

package/dist/dev/ui/pip-button/pip-button-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"pip-button-element.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button-element.ts"],"sourcesContent":["import { type MediaPictureInPictureState, PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PiPButtonElement extends MediaButtonElement<PiPButtonCore> {\n  static readonly tagName = 'media-pip-button';\n\n  protected readonly core = new PiPButtonCore();\n  protected readonly stateAttrMap = PiPButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPiP);\n  protected override readonly hotkeyAction = 'togglePiP';\n\n  protected activate(state: MediaPictureInPictureState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAa,mBAAb,cAAsC,mBAAkC;;;cAG5C,IAAI,eAAe;sBACX;oBACF,IAAI,iBAAiB,MAAM,eAAe,UAAU;sBACzC;;;iBALjB;;CAO1B,SAAmB,OAAyC;AAC1D,OAAK,KAAK,OAAO,MAAM"}
+{"version":3,"file":"pip-button-element.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button-element.ts"],"sourcesContent":["import { type MediaPictureInPictureState, PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PiPButtonElement extends MediaButtonElement<PiPButtonCore> {\n  static readonly tagName = 'media-pip-button';\n\n  protected readonly core = new PiPButtonCore();\n  protected readonly stateAttrMap = PiPButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPiP);\n  protected override readonly hotkeyAction = 'togglePictureInPicture';\n\n  protected activate(state: MediaPictureInPictureState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAa,mBAAb,cAAsC,mBAAkC;;;cAG5C,IAAI,eAAe;sBACX;oBACF,IAAI,iBAAiB,MAAM,eAAe,UAAU;sBACzC;;;iBALjB;;CAO1B,SAAmB,OAAyC;AAC1D,OAAK,KAAK,OAAO,MAAM"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/html",
   "type": "module",
-  "version": "10.0.0-beta.16",
+  "version": "10.0.0-beta.17",
   "description": "HTML library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -92,11 +92,11 @@
     }
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-beta.16",
-    "@videojs/element": "10.0.0-beta.16",
-    "@videojs/store": "10.0.0-beta.16",
-    "@videojs/spf": "10.0.0-beta.16",
-    "@videojs/utils": "10.0.0-beta.16"
+    "@videojs/core": "10.0.0-beta.17",
+    "@videojs/store": "10.0.0-beta.17",
+    "@videojs/spf": "10.0.0-beta.17",
+    "@videojs/utils": "10.0.0-beta.17",
+    "@videojs/element": "10.0.0-beta.17"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -104,8 +104,8 @@
     "tsdown": "^0.21.4",
     "typescript": "^6.0.2",
     "vitest": "^4.1.0",
-    "@videojs/icons": "10.0.0-beta.16",
-    "@videojs/skins": "10.0.0-beta.16"
+    "@videojs/icons": "10.0.0-beta.17",
+    "@videojs/skins": "10.0.0-beta.17"
   },
   "publishConfig": {
     "access": "public"

package/cdn/create-player-B_oNyyb5.js

@@ -1,7 +0,0 @@
-import{t as e}from"./listen-D7fcau5d.js";import{a as t,n,r,t as i}from"./context-C-IpVHEt.js";import{t as a}from"./abort-KaHR4JO1.js";import{t as o}from"./shallow-equal-uPuCQhnd.js";function s(e){let t=e.composedPath();return t.length>0?t[0]:e.target}function c(e,t,n){return new Promise((r,i)=>{let a=()=>{i(n?.signal?.reason??`Aborted`)};if(n?.signal?.aborted){a();return}n?.signal?.addEventListener(`abort`,a,{once:!0}),e.addEventListener(t,e=>{n?.signal?.removeEventListener(`abort`,a),r(e)},{...n,once:!0})})}function l(e,t){for(let n of e.querySelectorAll?.(`track`)??[])if(n.track===t)return n;return null}function u(e,t){return e?.textTracks?Array.from(e.textTracks).filter(t).sort(d):[]}function d(e,t){return e.kind>t.kind?1:e.kind<t.kind?-1:0}function f(e){let t=[];for(let n=0;n<e.length;n++)t.push([e.start(n),e.end(n)]);return t}function p(e){class t extends e{#e=!1;#t=new Set;get destroyed(){return this.#e}destroy(){this.#e||(this.#e=!0,this.destroyCallback())}destroyCallback(){for(let e of this.#t)e.hostDestroyed?.()}addController(e){super.addController(e),this.#t.add(e)}removeController(e){super.removeController(e),this.#t.delete(e)}connectedCallback(){this.#e||super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),!this.#e&&!this.hasAttribute(`keep-alive`)&&requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.isConnected||this.destroy()})})}performUpdate(){this.#e||super.performUpdate()}}return t}const m=new WeakMap,h=new Map;var g=class extends HTMLElement{static{this.properties={}}static get observedAttributes(){return[..._(this).attrToProp.keys()]}#e=new Set;#t=new Map;#n;#r;constructor(){super(),this.isUpdatePending=!1,this.hasUpdated=!1,this.#r=new Promise(e=>this.enableUpdating=e);let{props:e}=_(this.constructor);for(let t of e.keys())Object.hasOwn(this,t)&&((this.#n??=new Map).set(t,this[t]),delete this[t]);this.requestUpdate()}enableUpdating(e){}addController(e){this.#e.add(e),this.isConnected&&e.hostConnected?.()}removeController(e){this.#e.delete(e)}connectedCallback(){this.enableUpdating(!0);for(let e of this.#e)e.hostConnected?.()}disconnectedCallback(){for(let e of this.#e)e.hostDisconnected?.()}attributeChangedCallback(e,t,n){if(t===n)return;let{props:r,attrToProp:i}=_(this.constructor),a=i.get(e);if(!a)return;let o=r.get(a);if(!o)return;let s=n;o.type===Boolean?s=n!==null:o.type===Number&&(s=n===null?null:Number(n)),this[a]=s}requestUpdate(e,t){e!==void 0&&this.#t.set(e,t),!this.isUpdatePending&&(this.#r=this.#i())}async#i(){this.isUpdatePending=!0;try{await this.#r}catch(e){Promise.reject(e)}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated&&this.#n){for(let[e,t]of this.#n)this[e]=t;this.#n=void 0}let e=this.#t;this.willUpdate(e);for(let e of this.#e)e.hostUpdate?.();this.update(e),this.#t=new Map,this.isUpdatePending=!1;for(let e of this.#e)e.hostUpdated?.();this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}willUpdate(e){}update(e){}firstUpdated(e){}updated(e){}get updateComplete(){return this.#r}};function _(e){let t=m.get(e);if(t)return t;let n=new Map,r=new Map;for(let[t,i]of Object.entries(e.properties))if(n.set(t,i),r.set(i.attribute??t,t),!Object.getOwnPropertyDescriptor(e.prototype,t)?.get){let n=h.get(t);n||(n=Symbol(t),h.set(t,n)),Object.defineProperty(e.prototype,t,{get(){return this[n]},set(e){let r=this[n];this[n]=e,Object.is(r,e)||this.requestUpdate(t,r)},configurable:!0,enumerable:!0})}let i={props:n,attrToProp:r};return m.set(e,i),i}function ee(e){return typeof e==`number`}function v(e){return typeof e==`function`}function y(e){return e===null}function b(e){return e===void 0}function te(e){return typeof e==`object`&&!!e}var x=class{#e=new AbortController;#t=new Map;get base(){return this.#e.signal}clear(){for(let e of this.#t.values())e.abort();this.#t.clear()}reset(){this.clear(),this.#e.abort(),this.#e=new AbortController}supersede(e){this.#t.get(e)?.abort();let t=new AbortController;return this.#t.set(e,t),a([this.#e.signal,t.signal])}};function ne(...e){return{state:t=>{let n=e.map(e=>e.state(t));return Object.assign({},...n)},attach:t=>{for(let n of e)try{n.attach?.(t)}catch(e){t.reportError(e)}}}}var S=class extends Error{code;cause;constructor(e,t){super(t?.message??e),this.name=`StoreError`,this.code=e,this.cause=t?.cause}};function C(){throw new S(`NO_TARGET`)}function w(){throw new S(`DESTROYED`)}function re(){return e=>e}function T(...e){}let E=!1;function ie(){E||(E=!0,queueMicrotask(ae))}const D=new Set;function ae(){E=!1;for(let e of D)e.flush();D.clear()}const oe=Object.prototype.hasOwnProperty;var se=class{#e;#t=new Set;#n=!1;constructor(e){this.#e=Object.freeze({...e})}get current(){return this.#e}patch(e){let t={...this.#e},n=!1;for(let r in e){if(!oe.call(e,r))continue;let i=e[r];Object.is(this.#e[r],i)||(t[r]=i,n=!0)}n&&(this.#e=Object.freeze(t),this.#r())}subscribe(e,t){let n=t?.signal;if(n?.aborted)return T;if(this.#t.add(e),!n)return()=>this.#t.delete(e);let r=()=>this.#t.delete(e);return n.addEventListener(`abort`,r,{once:!0}),()=>{n.removeEventListener(`abort`,r),this.#t.delete(e)}}flush(){if(this.#n){this.#n=!1;for(let e of this.#t)e()}}#r(){this.#n=!0,D.add(this),ie()}};function O(e){return new se(e)}const k=Symbol(`@videojs/store`);function ce(){return(e,t={})=>{let n=null,r=!1,i=new AbortController,a=new x,o;function s(){r&&w(),n||C()}let c=e.state({target:()=>(s(),n),signals:a,get:()=>o.current,set:e=>o.patch(e)});o=O(c);let l={[k]:!0,get $state(){return o},get target(){return n},get destroyed(){return r},get state(){return o.current},attach:u,destroy:f,subscribe:p};for(let e of Object.keys(c))Object.defineProperty(l,e,{get:()=>o.current[e],enumerable:!0});try{t.onSetup?.({store:l,signal:i.signal})}catch(e){m(e)}return l;function u(i){r&&w(),a.reset(),n=i;let s={target:i,signal:a.base,get:()=>o.current,set:e=>o.patch(e),reportError:m,store:{get state(){return o.current},subscribe:p}};try{e.attach?.(s)}catch(e){m(e)}try{t.onAttach?.({store:l,target:i,signal:a.base})}catch(e){m(e)}return d}function d(){y(n)||(a.reset(),n=null,o.patch(c))}function f(){r||(r=!0,d(),i.abort())}function p(e,t){return o.subscribe(e,t)}function m(e){t.onError?t.onError({store:l,error:e}):console.error(`[vjs-store]`,e)}}}function le(e){return te(e)&&k in e}const A=re(),j=A({name:`buffer`,state:()=>({buffered:[],seekable:[]}),attach({target:t,signal:n,set:r}){let{media:i}=t,a=()=>r({buffered:f(i.buffered),seekable:f(i.seekable)});a(),e(i,`progress`,a,{signal:n}),e(i,`emptied`,a,{signal:n})}}),M=A({name:`controls`,state:({get:e,set:t})=>({userActive:!0,controlsVisible:!0,toggleControls(){let n=!e().userActive;return t({userActive:n,controlsVisible:n}),n}}),attach({target:t,signal:n,get:r,set:i}){let{media:a,container:o}=t;if(y(o))return;function s(e){return e||a.paused}let c;function l(){clearTimeout(c),c=void 0}function u(){l(),c=setTimeout(f,2e3)}function d(){r().userActive||i({userActive:!0,controlsVisible:!0}),u()}function f(){l(),i({userActive:!1,controlsVisible:s(!1)})}i({toggleControls(){return r().controlsVisible?f():d(),r().controlsVisible}});let p=0;function m(){p=Date.now()}function h(e){if(e.pointerType===`touch`&&Date.now()-p<250){let t=[a,o].includes(e.target);r().controlsVisible&&t?f():d()}else d()}function g(){let{userActive:e}=r();i({controlsVisible:s(e)}),!a.paused&&e&&u()}e(o,`pointermove`,d,{signal:n}),e(o,`pointerdown`,m,{signal:n}),e(o,`pointerup`,h,{signal:n}),e(o,`keyup`,d,{signal:n}),e(o,`focusin`,d,{signal:n}),e(o,`mouseleave`,f,{signal:n}),e(a,`play`,g,{signal:n}),e(a,`pause`,g,{signal:n}),e(a,`ended`,g,{signal:n}),n.addEventListener(`abort`,l,{once:!0}),u()}}),N=A({name:`error`,state:({set:e})=>({error:null,dismissError(){e({error:null})}}),attach({target:t,signal:n,set:r}){let{media:i}=t;e(i,`error`,()=>r({error:i.error}),{signal:n}),e(i,`emptied`,()=>r({error:null}),{signal:n})}});function ue(){let e=document;return e.fullscreenEnabled||e.webkitFullscreenEnabled?!0:v(document.createElement(`video`).webkitEnterFullscreen)}function de(){let e=document;return e.fullscreenElement??e.webkitFullscreenElement??null}function P(e,t){let n=t;if(n.webkitDisplayingFullscreen&&n.webkitPresentationMode===`fullscreen`)return!0;let r=e??t;if(de()===r)return!0;try{return r.matches(`:fullscreen`)}catch{return!1}}async function fe(e,t){let n=document,r=t;if(e&&(n.fullscreenEnabled||n.webkitFullscreenEnabled)){let t=e;if(v(t.requestFullscreen))return t.requestFullscreen();if(v(t.webkitRequestFullscreen))return t.webkitRequestFullscreen()}if(v(r.webkitEnterFullscreen)){r.webkitEnterFullscreen();return}if(v(t.requestFullscreen))return t.requestFullscreen();throw new DOMException(`Fullscreen not supported`,`NotSupportedError`)}async function F(e){let t=document;if(e){let t=e;if(v(t.webkitExitFullscreen)&&t.webkitDisplayingFullscreen){t.webkitExitFullscreen();return}}if(v(t.exitFullscreen))return t.exitFullscreen();if(v(t.webkitExitFullscreen))return t.webkitExitFullscreen()}function I(e){let t=e.target;return t instanceof HTMLMediaElement?t:e}function pe(){if(document.pictureInPictureEnabled){let e=/.*Version\/.*Safari\/.*/.test(navigator.userAgent),t=typeof matchMedia==`function`&&matchMedia(`(display-mode: standalone)`).matches;return!e||!t}return v(document.createElement(`video`).webkitSetPresentationMode)}function L(e){let t=I(e);return document.pictureInPictureElement===t?!0:t.webkitPresentationMode===`picture-in-picture`}async function me(e){let t=I(e);if(v(t.webkitSetPresentationMode)){t.webkitSetPresentationMode(`picture-in-picture`);return}if(v(t.requestPictureInPicture)){await t.requestPictureInPicture();return}throw new DOMException(`Picture-in-Picture not supported`,`NotSupportedError`)}async function R(e){if(e){let t=I(e);if(v(t.webkitSetPresentationMode)&&t.webkitPresentationMode===`picture-in-picture`){t.webkitSetPresentationMode(`inline`);return}}if(v(document.exitPictureInPicture))return document.exitPictureInPicture()}const z=A({name:`fullscreen`,state:({target:e})=>({fullscreen:!1,fullscreenAvailability:`unavailable`,async requestFullscreen(){let{media:t,container:n}=e();return L(t)&&await R(t),fe(n,t)},async exitFullscreen(){let{media:t}=e();return F(t)}}),attach({target:t,signal:n,set:r}){let{media:i,container:a}=t;r({fullscreenAvailability:ue()?`available`:`unsupported`});let o=()=>r({fullscreen:P(a,i)});o(),e(document,`fullscreenchange`,o,{signal:n}),e(document,`webkitfullscreenchange`,o,{signal:n}),`webkitPresentationMode`in i&&e(i,`webkitpresentationmodechanged`,o,{signal:n})}}),B=A({name:`pip`,state:({target:e})=>({pip:!1,pipAvailability:`unavailable`,async requestPictureInPicture(){let{media:t,container:n}=e();return P(n,t)&&await F(),me(t)},async exitPictureInPicture(){let{media:t}=e();return R(t)}}),attach({target:t,signal:n,set:r}){let{media:i}=t;r({pipAvailability:pe()?`available`:`unsupported`});let a=()=>r({pip:L(i)});a(),e(i,`enterpictureinpicture`,a,{signal:n}),e(i,`leavepictureinpicture`,a,{signal:n}),`webkitPresentationMode`in i&&e(i,`webkitpresentationmodechanged`,a,{signal:n})}}),V=A({name:`playback`,state:({target:e})=>({paused:!0,ended:!1,started:!1,waiting:!1,play(){return e().media.play()},pause(){e().media.pause()}}),attach({target:t,signal:n,set:r}){let{media:i}=t,a=()=>r({paused:i.paused,ended:i.ended,started:!i.paused||i.currentTime>0,waiting:i.readyState<HTMLMediaElement.HAVE_FUTURE_DATA&&!i.paused});a(),e(i,`emptied`,a,{signal:n}),e(i,`play`,a,{signal:n}),e(i,`pause`,a,{signal:n}),e(i,`ended`,a,{signal:n}),e(i,`playing`,a,{signal:n}),e(i,`waiting`,a,{signal:n}),e(i,`seeked`,a,{signal:n})}}),he=[.2,.5,.7,1,1.2,1.5,1.7,2],H=A({name:`playbackRate`,state:({target:e})=>({playbackRates:he,playbackRate:1,setPlaybackRate(t){e().media.playbackRate=t}}),attach({target:t,signal:n,set:r}){let{media:i}=t,a=()=>r({playbackRate:i.playbackRate});a(),e(i,`ratechange`,a,{signal:n})}}),U=A({name:`source`,state:({target:e,signals:t})=>({source:null,canPlay:!1,loadSource(n){t.clear();let{media:r}=e();return r.src=n,r.load(),n}}),attach({target:t,signal:n,set:r}){let{media:i}=t,a=()=>r({source:i.currentSrc||i.src||null,canPlay:i.readyState>=HTMLMediaElement.HAVE_ENOUGH_DATA});a(),e(i,`canplay`,a,{signal:n}),e(i,`canplaythrough`,a,{signal:n}),e(i,`loadstart`,a,{signal:n}),e(i,`emptied`,a,{signal:n})}}),W=A({name:`textTrack`,state:({target:e})=>({chaptersCues:[],thumbnailCues:[],thumbnailTrackSrc:null,textTrackList:[],subtitlesShowing:!1,toggleSubtitles(t){let n=u(e().media,e=>e.kind===`subtitles`||e.kind===`captions`);if(!n.length)return!1;let r=n.some(e=>e.mode===`showing`),i=t??!r;for(let e of n)e.mode=i?`showing`:`disabled`;return i}}),attach({target:t,signal:n,set:r}){let{media:i}=t,a=null;function o(){a?.abort(),a=new AbortController;let t=null,n=null,s=[],c=!1;for(let e=0;e<i.textTracks.length;e++){let r=i.textTracks[e];!t&&r.kind===`chapters`&&(t=r),!n&&r.kind===`metadata`&&r.label===`thumbnails`&&(n=r),s.push({kind:r.kind,label:r.label,language:r.language,mode:r.mode}),(r.kind===`captions`||r.kind===`subtitles`)&&r.mode===`showing`&&(c=!0)}let u=t?.cues?Array.from(t.cues):[],d=n?.cues?Array.from(n.cues):[],f=null;n&&(f=l(i,n)?.src??null);let p=i.querySelectorAll?.(`track`)??[],m=i.shadowRoot?.querySelectorAll?.(`track`)??[];for(let t of[...p,...m])t.track?.cues?.length||e(t,`load`,o,{signal:a.signal});r({chaptersCues:u,thumbnailCues:d,thumbnailTrackSrc:f,textTrackList:s,subtitlesShowing:c})}o(),e(i.textTracks,`addtrack`,o,{signal:n}),e(i.textTracks,`removetrack`,o,{signal:n}),e(i.textTracks,`change`,o,{signal:n}),e(i,`loadstart`,o,{signal:n}),n.addEventListener(`abort`,()=>a?.abort(),{once:!0})}});function ge(e){return e.readyState>=HTMLMediaElement.HAVE_METADATA}const _e={seek:Symbol.for(`@videojs/seek`)},G=A({name:`time`,state:({target:e,signals:t,set:n})=>({currentTime:0,duration:0,seeking:!1,async seek(r){let{media:i}=e(),a=t.supersede(_e.seek);if(!ge(i)&&!await c(i,`loadedmetadata`,{signal:a}).catch(()=>!1))return i.currentTime;let o=Math.max(0,Math.min(r,i.duration||1/0));return n({currentTime:o,seeking:!0}),i.currentTime=o,await c(i,`seeked`,{signal:a}).catch(T),i.currentTime}}),attach({target:t,signal:n,set:r,get:i}){let{media:a}=t,o=()=>r({currentTime:a.currentTime,duration:Number.isFinite(a.duration)?a.duration:0,seeking:a.seeking});o(),e(a,`timeupdate`,()=>{i().seeking||o()},{signal:n}),e(a,`durationchange`,o,{signal:n}),e(a,`seeking`,o,{signal:n}),e(a,`seeked`,o,{signal:n}),e(a,`loadedmetadata`,o,{signal:n}),e(a,`emptied`,o,{signal:n})}}),K=A({name:`volume`,state:({target:e})=>({volume:1,muted:!1,volumeAvailability:`unavailable`,setVolume(t){let{media:n}=e(),r=Math.max(0,Math.min(1,t));return r>0&&n.muted&&(n.muted=!1),n.volume=r,n.volume},toggleMuted(){let{media:t}=e();return t.muted||t.volume===0?(t.muted=!1,t.volume===0&&(t.volume=.25)):t.muted=!0,t.muted}}),attach({target:t,signal:n,set:r}){let{media:i}=t;r({volumeAvailability:ve()});let a=()=>r({volume:i.volume,muted:i.muted});a(),e(i,`volumechange`,a,{signal:n})}});function ve(){let e=document.createElement(`video`);try{return e.volume=.5,e.volume===.5?`available`:`unsupported`}catch{return`unsupported`}}const ye=[V,H,K,G,U,j,z,B,M,W,N],be=[V,H,K,G,U,j,N],xe=[];
-/**
-* @license
-* Copyright 2021 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/var q=class{constructor(e,t,n,r){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(e,t)=>{this.unsubscribe&&(this.unsubscribe!==t&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=e,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(e,t)),this.unsubscribe=t},this.host=e,t.context!==void 0){let e=t;this.context=e.context,this.callback=e.callback,this.subscribe=e.subscribe??!1}else this.context=t,this.callback=n,this.subscribe=r??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&=(this.unsubscribe(),void 0)}dispatchRequest(){this.host.dispatchEvent(new t(this.context,this.host,this.t,this.subscribe))}},Se=class{get value(){return this.o}set value(e){this.setValue(e)}setValue(e,t=!1){let n=t||!Object.is(e,this.o);this.o=e,n&&this.updateObservers()}constructor(e){this.subscriptions=new Map,this.updateObservers=()=>{for(let[e,{disposer:t}]of this.subscriptions)e(this.o,t)},e!==void 0&&(this.value=e)}addCallback(e,t,n){if(!n)return void e(this.value);this.subscriptions.has(e)||this.subscriptions.set(e,{disposer:()=>{this.subscriptions.delete(e)},consumerHost:t});let{disposer:r}=this.subscriptions.get(e);e(this.value,r)}clearCallbacks(){this.subscriptions.clear()}},Ce=class extends Event{constructor(e,t){super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t}},J=class extends Se{constructor(e,n,r){super(n.context===void 0?r:n.initialValue),this.onContextRequest=e=>{if(e.context!==this.context)return;let t=e.contextTarget??e.composedPath()[0];t!==this.host&&(e.stopPropagation(),this.addCallback(e.callback,t,e.subscribe))},this.onProviderRequest=e=>{if(e.context!==this.context||(e.contextTarget??e.composedPath()[0])===this.host)return;let n=new Set;for(let[e,{consumerHost:r}]of this.subscriptions)n.has(e)||(n.add(e),r.dispatchEvent(new t(this.context,r,e,!0)));e.stopPropagation()},this.host=e,n.context===void 0?this.context=n:this.context=n.context,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener(`context-request`,this.onContextRequest),this.host.addEventListener(`context-provider`,this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new Ce(this.context,this.host))}};function Y(e){return t=>{class n extends t{#e=null;#t=null;constructor(...t){super(...t),new q(this,{context:e.playerContext,callback:e=>{this.#e=e??null},subscribe:!0}),new q(this,{context:e.containerContext,callback:e=>{this.#t=e?.setContainer??null,this.isConnected&&this.#t?.(this)},subscribe:!0})}get store(){return this.#e}connectedCallback(){super.connectedCallback(),this.#t?.(this)}disconnectedCallback(){super.disconnectedCallback(),this.#t?.(null)}}return n}}var X=class extends p(g){};const we=Y({playerContext:r,containerContext:i});var Te=class extends we(X){static{this.tagName=`media-container`}#e=null;connectedCallback(){super.connectedCallback(),this.hasAttribute(`tabindex`)||this.setAttribute(`tabindex`,`0`),this.#e=new AbortController,e(this,`pointerup`,this.#t,{signal:this.#e.signal})}disconnectedCallback(){super.disconnectedCallback(),this.#e?.abort(),this.#e=null}#t=()=>{(!this.contains(document.activeElement)||document.activeElement===document.body)&&this.focus({preventScroll:!0})}};function Z(e){return t=>{class n extends t{#e=e.factory();#t=null;#n=null;#r=null;#i=!1;#a=e=>{this.#n!==e&&(this.#n=e,this.#c.setValue({media:e,setMedia:this.#a}),this.#u())};#o=e=>{this.#r!==e&&(this.#r=e,this.#l.setValue({container:e,setContainer:this.#o}),this.#u())};#s=new J(this,{context:e.playerContext,initialValue:this.store});#c=new J(this,{context:e.mediaContext,initialValue:{media:this.#n,setMedia:this.#a}});#l=new J(this,{context:e.containerContext,initialValue:{container:this.#r,setContainer:this.#o}});get store(){return y(this.#e)&&(this.#e=e.factory()),this.#e}connectedCallback(){super.connectedCallback(),this.#s.setValue(this.store),this.#c.setValue({media:this.#n,setMedia:this.#a}),this.#l.setValue({container:this.#r,setContainer:this.#o}),this.#u(),this.#f()}disconnectedCallback(){super.disconnectedCallback(),this.#d()}destroyCallback(){this.#d(),this.#e?.destroy(),this.#e=null,super.destroyCallback()}#u(){let e=this.#e;if(!e)return;if(!this.#n){this.#d();return}let t={media:this.#n,container:this.#r},n=e.target?.media!==t.media,r=e.target?.container!==t.container;(n||r)&&(this.#d(),this.#t=e.attach(t))}#d(){this.#t?.(),this.#t=null}#f(){this.#n||this.#i||(this.#i=!0,queueMicrotask(()=>{if(this.#i=!1,this.#n)return;let e=this.querySelector(`video, audio`);e&&this.#a(e)}))}}return n}}var Q=class{#e;#t;#n;#r;#i=T;constructor(e,t,n){this.#e=e,this.#n=t,this.#t=n,e.addController(this)}get value(){return this.#t?(this.#r??=this.#t(this.#n.current),this.#r):this.#n.current}track(e){this.#n=e,this.#a()}hostConnected(){this.#a()}hostDisconnected(){this.#i(),this.#i=T,this.#r=void 0}#a(){if(this.#i(),!this.#t){this.#i=this.#n.subscribe(()=>this.#e.requestUpdate());return}let e=this.#t;this.#r=e(this.#n.current),this.#i=this.#n.subscribe(()=>{let t=e(this.#n.current);o(this.#r,t)||(this.#r=t,this.#e.requestUpdate())})}},Ee=class{#e;#t;#n;constructor(e,t,n){this.#e=n??T,le(t)?(this.#n=t,this.#t=null):(this.#n=null,this.#t=new q(e,{context:t,callback:e=>this.#e(e),subscribe:!1})),e.addController(this)}get value(){return this.#t?this.#t.value??null:this.#n}hostConnected(){this.#n&&this.#e(this.#n)}},De=class{#e;#t;#n;#r=null;constructor(e,t,n){this.#e=e,this.#t=n,this.#n=new Ee(e,t,e=>this.#i(e)),e.addController(this)}get value(){let e=this.#n.value;if(y(e))throw Error(`Store not available`);return b(this.#t)?e:this.#r.value}hostConnected(){}#i(e){b(this.#t)||(this.#r?this.#r.track(e.$state):this.#r=new Q(this.#e,e.$state,this.#t))}},$=class{#e;#t;#n;#r=null;constructor(e,t,n){this.#e=e,this.#t=n,this.#n=new q(e,{context:t,callback:e=>this.#i(e),subscribe:!0}),e.addController(this)}get value(){let e=this.#n.value;if(e)return this.#t?this.#r?.value:e}get displayName(){return this.#t?.displayName}hostConnected(){let e=this.#n.value;e&&this.#i(e)}hostDisconnected(){this.#r=null}#i(e){!this.#r&&this.#t&&(this.#r=new De(this.#e,e,this.#t))}};function Oe(e){let t=ne(...e.features);function a(){return ce()(t)}return{context:r,create:a,PlayerController:$,ProviderMixin:Z({playerContext:r,mediaContext:n,containerContext:i,factory:a}),ContainerMixin:Y({playerContext:r,containerContext:i})}}export{g as A,T as C,y as D,v as E,ee as O,O as S,x as T,B as _,X as a,M as b,be as c,K as d,G as f,V as g,H as h,Te as i,s as j,b as k,xe as l,U as m,$ as n,J as o,W as p,Q as r,q as s,Oe as t,ye as u,z as v,C as w,j as x,N as y};
-//# sourceMappingURL=create-player-B_oNyyb5.js.map