npm - @videojs/html - Versions diffs - 10.0.0-beta.22 → 10.0.0-beta.24 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1296) hide show

package/dist/default/define/video/skin.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { createShadowStyle, createTemplate } from "@videojs/utils/dom";
 //#region src/define/video/skin.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<media-container class="media-default-skin media-default-skin--video"><slot name="media"></slot><slot></slot><media-poster><slot name="poster"></slot></media-poster><media-buffering-indicator class="media-buffering-indicator"><div class="media-surface"> ${renderIcon("spinner", { class: "media-icon" })} </div></media-buffering-indicator><media-error-dialog class="media-error"><div class="media-error__dialog media-surface"><div class="media-error__content"><media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="media-error__description"></media-alert-dialog-description></div><div class="media-error__actions"><media-alert-dialog-close class="media-button media-button--primary">OK</media-alert-dialog-close></div></div></media-error-dialog><media-controls class="media-surface media-controls"><media-tooltip-group><div class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--flipped" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip"> Seek forward ${SEEK_TIME} seconds </media-tooltip></div><div class="media-time-controls"><media-time type="current" class="media-time"></media-time><media-time-slider class="media-slider"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill><media-slider-buffer class="media-slider__buffer"></media-slider-buffer></media-slider-track><media-slider-thumb class="media-slider__thumb"></media-slider-thumb><div class="media-surface media-preview media-slider__preview"><media-slider-thumbnail class="media-preview__thumbnail"></media-slider-thumbnail><media-slider-value type="pointer" class="media-time media-preview__time"></media-slider-value> ${renderIcon("spinner", { class: "media-preview__spinner media-icon" })} </div></media-time-slider><media-time type="duration" class="media-time"></media-time></div><div class="media-button-group"><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><media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip"> Toggle playback rate </media-tooltip><media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute"> ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} </media-mute-button><media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume"><media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track><media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb></media-volume-slider></media-popover><media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions"> ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })} ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip><media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast"> ${renderIcon("cast-enter", { class: "media-icon media-icon--cast-enter" })} ${renderIcon("cast-exit", { class: "media-icon media-icon--cast-exit" })} </media-cast-button><media-tooltip id="cast-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip><media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip"> ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })} ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip><media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen"> ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })} ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip></div></media-tooltip-group></media-controls><div class="media-overlay"></div><media-hotkey keys="Space" action="togglePaused"></media-hotkey><media-hotkey keys="k" action="togglePaused"></media-hotkey><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="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><media-hotkey keys="j" action="seekStep" value="-10"></media-hotkey><media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey><media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey><media-hotkey keys="0-9" action="seekToPercent"></media-hotkey><media-hotkey keys="Home" action="seekToPercent" value="0"></media-hotkey><media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey><media-hotkey keys=">" action="speedUp"></media-hotkey><media-hotkey keys="<" action="speedDown"></media-hotkey><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>`;
+	return `<media-container class="media-default-skin media-default-skin--video"><slot name="media"></slot><slot></slot><media-poster><slot name="poster"></slot></media-poster><media-buffering-indicator class="media-buffering-indicator"><div class="media-surface"> ${renderIcon("spinner", { class: "media-icon" })} </div></media-buffering-indicator><media-error-dialog class="media-error"><div class="media-error__dialog media-surface"><div class="media-error__content"><media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="media-error__description"></media-alert-dialog-description></div><div class="media-error__actions"><media-alert-dialog-close class="media-button media-button--primary">OK</media-alert-dialog-close></div></div></media-error-dialog><media-controls class="media-surface media-controls"><media-tooltip-group><div class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play"> ${renderIcon("restart", { class: "media-icon media-icon--restart" })} ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--flipped" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon" })} <span class="media-icon__label">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip></div><div class="media-time-controls"><media-time type="current" class="media-time"></media-time><media-time-slider class="media-slider"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill><media-slider-buffer class="media-slider__buffer"></media-slider-buffer></media-slider-track><media-slider-thumb class="media-slider__thumb"></media-slider-thumb><div class="media-surface media-preview media-slider__preview"><media-slider-thumbnail class="media-preview__thumbnail"></media-slider-thumbnail><media-slider-value type="pointer" class="media-time media-preview__time"></media-slider-value> ${renderIcon("spinner", { class: "media-preview__spinner media-icon" })} </div></media-time-slider><media-time type="duration" class="media-time"></media-time></div><div class="media-button-group"><media-playback-rate-menu-trigger commandfor="playback-rate-menu" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-menu-trigger><media-playback-rate-menu id="playback-rate-menu" side="top" align="center" class="media-surface media-popover media-menu media-menu--playback-rate"><media-playback-rate-options class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><span data-part="label"></span><media-menu-item-indicator force-mount class="media-menu__indicator"> ${renderIcon("check", { class: "media-icon" })} </media-menu-item-indicator></media-menu-radio-item></template></media-playback-rate-options></media-playback-rate-menu><media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute"> ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} </media-mute-button><media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume"><media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill></media-slider-track><media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb></media-volume-slider></media-popover><media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions"> ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })} ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip><media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast"> ${renderIcon("cast-enter", { class: "media-icon media-icon--cast-enter" })} ${renderIcon("cast-exit", { class: "media-icon media-icon--cast-exit" })} </media-cast-button><media-tooltip id="cast-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip><media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip"> ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })} ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip><media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen"> ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })} ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip></div></media-tooltip-group></media-controls><div class="media-overlay"></div><media-hotkey keys="Space" action="togglePaused"></media-hotkey><media-hotkey keys="k" action="togglePaused"></media-hotkey><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="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><media-hotkey keys="j" action="seekStep" value="-10"></media-hotkey><media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey><media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey><media-hotkey keys="0-9" action="seekToPercent"></media-hotkey><media-hotkey keys="Home" action="seekToPercent" value="0"></media-hotkey><media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey><media-hotkey keys=">" action="speedUp"></media-hotkey><media-hotkey keys="<" action="speedDown"></media-hotkey><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-status-announcer></media-status-announcer><div class="media-input-feedback"><media-volume-indicator hidden class="media-surface media-input-feedback-island media-input-feedback-island--volume"><media-volume-indicator-fill class="media-input-feedback-island__content"> ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })} ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })} ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })} <media-volume-indicator-value class="media-input-feedback-island__value"></media-volume-indicator-value></media-volume-indicator-fill></media-volume-indicator><media-status-indicator hidden actions="toggleSubtitles toggleFullscreen togglePictureInPicture" class="media-surface media-input-feedback-island media-input-feedback-island--status" ><div class="media-input-feedback-island__content"> ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })} ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })} ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })} ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })} ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })} ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })} <media-status-indicator-value class="media-input-feedback-island__value"></media-status-indicator-value></div></media-status-indicator><media-seek-indicator hidden class="media-input-feedback-bubble"> ${renderIcon("chevron", { class: "media-icon media-icon--seek" })} <media-seek-indicator-value class="media-time"></media-seek-indicator-value></media-seek-indicator><media-status-indicator hidden actions="togglePaused" class="media-input-feedback-bubble"> ${renderIcon("play", { class: "media-icon media-icon--play" })} ${renderIcon("pause", { class: "media-icon media-icon--pause" })} </media-status-indicator></div></media-container>`;
 }
 var VideoSkinElement = class extends SkinElement {
 	static {

package/dist/default/define/video/skin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.js","names":[],"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-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n </media-cast-button>\n <media-tooltip id=\"cast-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,iQAAA,WAAA,WAAA,EAAA,OAAA,cAAA,CAAA,CAAA,wvBAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,sLAAA,CAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,mCAAA,UAAA,4IAAA,UAAA,yFAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,cAAA,CAAA,CAAA,mCAAA,UAAA,0IAAA,UAAA,0qBAAA,WAAA,WAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,yjBAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,qqBAAA,WAAA,gBAAA,EAAA,OAAA,uCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,6PAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,aAAA,EAAA,OAAA,oCAAA,CAAA,CAAA,kPAAA,WAAA,aAAA,EAAA,OAAA,oCAAA,CAAA,CAAA,GAAA,WAAA,YAAA,EAAA,OAAA,mCAAA,CAAA,CAAA,qQAAA,WAAA,oBAAA,EAAA,OAAA,2CAAA,CAAA,CAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,0CAAA,CAAA,CAAA;;AAGlB,IAAY,mBAAZ,cAA+B,YAAA;;iBACb;;;;;;kBAEC,eAAA,iBAAA,CAAA"}
1	+ {"version":3,"file":"skin.js","names":[],"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\"></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\"></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-menu-trigger commandfor=\"playback-rate-menu\" class=\"media-button media-button--subtle media-button--icon media-button--playback-rate\"></media-playback-rate-menu-trigger>\n <media-playback-rate-menu id=\"playback-rate-menu\" side=\"top\" align=\"center\" class=\"media-surface media-popover media-menu media-menu--playback-rate\">\n <media-playback-rate-options class=\"media-menu__group\">\n <template>\n <media-menu-radio-item class=\"media-menu__item\">\n <span data-part=\"label\"></span>\n <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n ${renderIcon('check', { class: 'media-icon' })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-playback-rate-options>\n </media-playback-rate-menu>\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-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n </media-cast-button>\n <media-tooltip id=\"cast-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\n <!-- Input Feedback -->\n <media-status-announcer></media-status-announcer>\n <div class=\"media-input-feedback\">\n <media-volume-indicator hidden class=\"media-surface media-input-feedback-island media-input-feedback-island--volume\">\n <media-volume-indicator-fill class=\"media-input-feedback-island__content\">\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n <media-volume-indicator-value class=\"media-input-feedback-island__value\"></media-volume-indicator-value>\n </media-volume-indicator-fill>\n </media-volume-indicator>\n <media-status-indicator\n hidden\n actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n class=\"media-surface media-input-feedback-island media-input-feedback-island--status\"\n >\n <div class=\"media-input-feedback-island__content\">\n ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n <media-status-indicator-value class=\"media-input-feedback-island__value\"></media-status-indicator-value>\n </div>\n </media-status-indicator>\n <media-seek-indicator hidden class=\"media-input-feedback-bubble\">\n ${renderIcon('chevron', { class: 'media-icon media-icon--seek' })}\n <media-seek-indicator-value class=\"media-time\"></media-seek-indicator-value>\n </media-seek-indicator>\n <media-status-indicator hidden actions=\"togglePaused\" class=\"media-input-feedback-bubble\">\n ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n </media-status-indicator>\n </div>\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,iQAAA,WAAA,WAAA,EAAA,OAAA,cAAA,CAAA,CAAA,wvBAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,sLAAA,CAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,mCAAA,UAAA,2MAAA,UAAA,0HAAA,WAAA,QAAA,EAAA,OAAA,cAAA,CAAA,CAAA,mCAAA,UAAA,2xBAAA,WAAA,WAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,wqBAAA,WAAA,SAAA,EAAA,OAAA,cAAA,CAAA,CAAA,iQAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,qqBAAA,WAAA,gBAAA,EAAA,OAAA,uCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,6PAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,aAAA,EAAA,OAAA,oCAAA,CAAA,CAAA,kPAAA,WAAA,aAAA,EAAA,OAAA,oCAAA,CAAA,CAAA,GAAA,WAAA,YAAA,EAAA,OAAA,mCAAA,CAAA,CAAA,qQAAA,WAAA,oBAAA,EAAA,OAAA,2CAAA,CAAA,CAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,0CAAA,CAAA,CAAA,kiEAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,6YAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA,GAAA,WAAA,gBAAA,EAAA,OAAA,uCAAA,CAAA,CAAA,GAAA,WAAA,oBAAA,EAAA,OAAA,2CAAA,CAAA,CAAA,GAAA,WAAA,mBAAA,EAAA,OAAA,0CAAA,CAAA,CAAA,GAAA,WAAA,aAAA,EAAA,OAAA,oCAAA,CAAA,CAAA,GAAA,WAAA,YAAA,EAAA,OAAA,mCAAA,CAAA,CAAA,4MAAA,WAAA,WAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,iMAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA;;AAGlB,IAAY,mBAAZ,cAA+B,YAAA;;iBACb;;;;;;kBAEC,eAAA,iBAAA,CAAA"}

package/dist/default/define/video/skin.tailwind.js CHANGED Viewed

@@ -4,18 +4,19 @@ import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.j
 import { renderIcon } from "../../icons/dist/render/default/index.js";
 import { button } from "../../skins/dist/default/default/tailwind/components/button.js";
 import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/default/tailwind/components/icon.js";
+import { menu } from "../../skins/dist/default/default/tailwind/components/menu.js";
 import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
 import { seek } from "../../skins/dist/default/default/tailwind/components/seek.js";
 import { overlay } from "../../skins/dist/default/default/tailwind/components/overlay.js";
 import { poster } from "../../skins/dist/default/default/tailwind/components/poster.js";
-import { bufferingIndicator, buttonGroupEnd, buttonGroupStart, controls, error, popup, preview, root, slider, time } from "../../skins/dist/default/default/tailwind/video.tailwind.js";
+import { bufferingIndicator, buttonGroupEnd, buttonGroupStart, controls, error, inputFeedback, popup, preview, root, slider, time } from "../../skins/dist/default/default/tailwind/video.tailwind.js";
 import "./ui.js";
 import { createTemplate } from "@videojs/utils/dom";
 import { cn } from "@videojs/utils/style";
 //#region src/define/video/skin.tailwind.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<media-container class="${root(true)}"> <slot name="media"></slot><slot></slot><media-poster class="${poster(true)}"> <slot name="poster"></slot></media-poster><media-buffering-indicator class="${bufferingIndicator.root}"> <div class="${bufferingIndicator.container}"> ${renderIcon("spinner")} </div></media-buffering-indicator><media-error-dialog class="${error.root}"> <div class="${error.dialog}"> <div class="${error.content}"> <media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="${error.description}"></media-alert-dialog-description></div><div class="${error.actions}"> <media-alert-dialog-close class="${cn(button.base, button.primary)}">OK</media-alert-dialog-close></div></div></media-error-dialog><media-controls data-controls="" class="${controls}"> <media-tooltip-group><div class="${buttonGroupStart}"> <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}"> ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })} ${renderIcon("play", { class: cn(icon, iconState.play.play) })} ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}"> <span class="${iconContainer}"> ${renderIcon("seek", { class: cn(icon, iconFlipped) })} <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek backward ${SEEK_TIME} seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}"> <span class="${iconContainer}"> ${renderIcon("seek", { class: icon })} <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"> Seek forward ${SEEK_TIME} seconds </media-tooltip></div><div class="${time.group}"> <media-time type="current" class="${time.current}"></media-time><media-time-slider class="${slider.root}"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill><media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb><div class="${preview.root}"> <media-slider-thumbnail class="${preview.thumbnail}"></media-slider-thumbnail><media-slider-value type="pointer" class="${preview.time}"></media-slider-value> ${renderIcon("spinner", { class: cn(icon, preview.spinner) })} </div></media-time-slider><media-time type="duration" class="${time.duration}"></media-time></div><div class="${buttonGroupEnd}"> <media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="${cn(popup.tooltip)}"> Toggle playback rate </media-tooltip><media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}"> <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb></media-volume-slider></media-popover><media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}"> ${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })} ${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip><media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}"> ${renderIcon("cast-enter", { class: cn(icon, iconState.cast.enter) })} ${renderIcon("cast-exit", { class: cn(icon, iconState.cast.exit) })} </media-cast-button><media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip><media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}"> ${renderIcon("pip-enter", { class: cn(icon, iconState.pip.off) })} ${renderIcon("pip-exit", { class: cn(icon, iconState.pip.on) })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip><media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}"> ${renderIcon("fullscreen-enter", { class: cn(icon, iconState.fullscreen.enter) })} ${renderIcon("fullscreen-exit", { class: cn(icon, iconState.fullscreen.exit) })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip></div></media-tooltip-group></media-controls><div class="${overlay}"></div></media-container>`;
+	return `<media-container class="${root(true)}"> <slot name="media"></slot><slot></slot><media-poster class="${poster(true)}"> <slot name="poster"></slot></media-poster><media-buffering-indicator class="${bufferingIndicator.root}"> <div class="${bufferingIndicator.container}"> ${renderIcon("spinner")} </div></media-buffering-indicator><media-error-dialog class="${error.root}"> <div class="${error.dialog}"> <div class="${error.content}"> <media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="${error.description}"></media-alert-dialog-description></div><div class="${error.actions}"> <media-alert-dialog-close class="${cn(button.base, button.primary)}">OK</media-alert-dialog-close></div></div></media-error-dialog><media-controls data-controls="" class="${controls}"> <media-tooltip-group><div class="${buttonGroupStart}"> <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}"> ${renderIcon("restart", { class: cn(icon, iconState.play.restart) })} ${renderIcon("play", { class: cn(icon, iconState.play.play) })} ${renderIcon("pause", { class: cn(icon, iconState.play.pause) })} </media-play-button><media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}"> <span class="${iconContainer}"> ${renderIcon("seek", { class: cn(icon, iconFlipped) })} <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}"> <span class="${iconContainer}"> ${renderIcon("seek", { class: icon })} <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip></div><div class="${time.group}"> <media-time type="current" class="${time.current}"></media-time><media-time-slider class="${slider.root}"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill><media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb><div class="${preview.root}"> <media-slider-thumbnail class="${preview.thumbnail}"></media-slider-thumbnail><media-slider-value type="pointer" class="${preview.time}"></media-slider-value> ${renderIcon("spinner", { class: cn(icon, preview.spinner) })} </div></media-time-slider><media-time type="duration" class="${time.duration}"></media-time></div><div class="${buttonGroupEnd}"> <media-playback-rate-menu-trigger commandfor="playback-rate-menu" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-menu-trigger><media-playback-rate-menu id="playback-rate-menu" side="top" align="center" class="${cn(popup.popover, menu.root)}"> <media-playback-rate-options class="${menu.group}"> <template><media-menu-radio-item class="${menu.item}"> <span data-part="label"></span><media-menu-item-indicator force-mount class="${menu.indicator}"> ${renderIcon("check", { class: icon })} </media-menu-item-indicator></media-menu-radio-item></template></media-playback-rate-options></media-playback-rate-menu><media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}"> ${renderIcon("volume-off", { class: cn(icon, iconState.mute.volumeOff) })} ${renderIcon("volume-low", { class: cn(icon, iconState.mute.volumeLow) })} ${renderIcon("volume-high", { class: cn(icon, iconState.mute.volumeHigh) })} </media-mute-button><media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}"> <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge"> <media-slider-track class="${slider.track}"> <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill></media-slider-track><media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb></media-volume-slider></media-popover><media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}"> ${renderIcon("captions-off", { class: cn(icon, iconState.captions.off) })} ${renderIcon("captions-on", { class: cn(icon, iconState.captions.on) })} </media-captions-button><media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip><media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}"> ${renderIcon("cast-enter", { class: cn(icon, iconState.cast.enter) })} ${renderIcon("cast-exit", { class: cn(icon, iconState.cast.exit) })} </media-cast-button><media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip><media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}"> ${renderIcon("pip-enter", { class: cn(icon, iconState.pip.off) })} ${renderIcon("pip-exit", { class: cn(icon, iconState.pip.on) })} </media-pip-button><media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip><media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}"> ${renderIcon("fullscreen-enter", { class: cn(icon, iconState.fullscreen.enter) })} ${renderIcon("fullscreen-exit", { class: cn(icon, iconState.fullscreen.exit) })} </media-fullscreen-button><media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip></div></media-tooltip-group></media-controls><div class="${overlay}"></div><media-hotkey keys="Space" action="togglePaused"></media-hotkey><media-hotkey keys="k" action="togglePaused"></media-hotkey><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="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><media-hotkey keys="j" action="seekStep" value="-10"></media-hotkey><media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey><media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey><media-hotkey keys="0-9" action="seekToPercent"></media-hotkey><media-hotkey keys="Home" action="seekToPercent" value="0"></media-hotkey><media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey><media-hotkey keys=">" action="speedUp"></media-hotkey><media-hotkey keys="<" action="speedDown"></media-hotkey><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-status-announcer></media-status-announcer><div class="${inputFeedback.root}"> <media-volume-indicator hidden class="${cn(inputFeedback.island.base, inputFeedback.island.volume, inputFeedback.island.shownVolume)}" > <media-volume-indicator-fill class="${inputFeedback.island.content}"> ${renderIcon("volume-high", { class: cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeHigh) })} ${renderIcon("volume-low", { class: cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeLow) })} ${renderIcon("volume-off", { class: cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeOff) })} <media-volume-indicator-value class="${inputFeedback.island.value}"></media-volume-indicator-value></media-volume-indicator-fill></media-volume-indicator><media-status-indicator hidden actions="toggleSubtitles toggleFullscreen togglePictureInPicture" class="${cn(inputFeedback.island.base, inputFeedback.island.shownStatus)}"> <div class="${inputFeedback.island.content}"> ${renderIcon("captions-on", { class: cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOn) })} ${renderIcon("captions-off", { class: cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOff) })} ${renderIcon("fullscreen-enter", { class: cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenEnter) })} ${renderIcon("fullscreen-exit", { class: cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenExit) })} ${renderIcon("pip-enter", { class: cn(inputFeedback.island.icon, inputFeedback.island.shownPipEnter) })} ${renderIcon("pip-exit", { class: cn(inputFeedback.island.icon, inputFeedback.island.shownPipExit) })} <media-status-indicator-value class="${inputFeedback.island.value}"></media-status-indicator-value></div></media-status-indicator><media-seek-indicator hidden class="${inputFeedback.bubble.base}"> ${renderIcon("chevron", { class: cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownSeek) })} <media-seek-indicator-value class="${inputFeedback.bubble.time}"></media-seek-indicator-value></media-seek-indicator><media-status-indicator hidden actions="togglePaused" class="${inputFeedback.bubble.base}"> ${renderIcon("play", { class: cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPlay) })} ${renderIcon("pause", { class: cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPause) })} </media-status-indicator></div></media-container>`;
 }
 var VideoSkinTailwindElement = class extends SkinElement {
 	static {

package/dist/default/define/video/skin.tailwind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render';\nimport {\n bufferingIndicator,\n button,\n buttonGroupEnd,\n buttonGroupStart,\n controls,\n error,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n overlay,\n playbackRate,\n popup,\n poster,\n preview,\n root,\n seek,\n slider,\n time,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { createTemplate } from '@videojs/utils/dom';\nimport { cn } from '@videojs/utils/style';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\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=\"${root(true)}\">\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 class=\"${poster(true)}\">\n <slot name=\"poster\"></slot>\n </media-poster>\n\n <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n <div class=\"${bufferingIndicator.container}\">\n ${renderIcon('spinner')}\n </div>\n </media-buffering-indicator>\n\n <media-error-dialog class=\"${error.root}\">\n <div class=\"${error.dialog}\">\n <div class=\"${error.content}\">\n <media-alert-dialog-title class=\"${error.title}\">Something went wrong.</media-alert-dialog-title>\n <media-alert-dialog-description class=\"${error.description}\"></media-alert-dialog-description>\n </div>\n <div class=\"${error.actions}\">\n <media-alert-dialog-close class=\"${cn(button.base, button.primary)}\">OK</media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls data-controls=\"\" class=\"${controls}\">\n <media-tooltip-group>\n <div class=\"${buttonGroupStart}\">\n <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.play.button)}\">\n ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.subtle, button.icon)}\">\n <span class=\"${iconContainer}\">\n ${renderIcon('seek', { class: cn(icon, iconFlipped) })}\n <span class=\"${cn(seek.label, seek.labelBackward)}\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n Seek backward ${SEEK_TIME} seconds\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"${cn(button.base, button.subtle, button.icon)}\">\n <span class=\"${iconContainer}\">\n ${renderIcon('seek', { class: icon })}\n <span class=\"${cn(seek.label, seek.labelForward)}\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n Seek forward ${SEEK_TIME} seconds\n </media-tooltip>\n </div>\n\n <div class=\"${time.group}\">\n <media-time type=\"current\" class=\"${time.current}\"></media-time>\n <media-time-slider class=\"${slider.root}\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n </media-slider-track>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n\n <div class=\"${preview.root}\">\n <media-slider-thumbnail class=\"${preview.thumbnail}\"></media-slider-thumbnail>\n <media-slider-value type=\"pointer\" class=\"${preview.time}\"></media-slider-value>\n ${renderIcon('spinner', { class: cn(icon, preview.spinner) })}\n </div>\n </media-time-slider>\n <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n </div>\n\n <div class=\"${buttonGroupEnd}\">\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, playbackRate.button)}\"></media-playback-rate-button>\n <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n Toggle playback rate\n </media-tooltip>\n\n <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n </media-mute-button>\n\n <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.captions.button)}\">\n ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n </media-captions-button>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n <media-cast-button commandfor=\"cast-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.cast.button)}\">\n ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}\n ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}\n </media-cast-button>\n <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"${overlay}\"></div>\n </media-container>\n `;\n}\n\nexport class VideoSkinTailwindElement extends SkinElement {\n static readonly tagName = 'video-skin-tailwind';\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(VideoSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render';\nimport {\n bufferingIndicator,\n button,\n buttonGroupEnd,\n buttonGroupStart,\n controls,\n error,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n inputFeedback,\n menu,\n overlay,\n playbackRate,\n popup,\n poster,\n preview,\n root,\n seek,\n slider,\n time,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { createTemplate } from '@videojs/utils/dom';\nimport { cn } from '@videojs/utils/style';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\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=\"${root(true)}\">\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 class=\"${poster(true)}\">\n <slot name=\"poster\"></slot>\n </media-poster>\n\n <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n <div class=\"${bufferingIndicator.container}\">\n ${renderIcon('spinner')}\n </div>\n </media-buffering-indicator>\n\n <media-error-dialog class=\"${error.root}\">\n <div class=\"${error.dialog}\">\n <div class=\"${error.content}\">\n <media-alert-dialog-title class=\"${error.title}\">Something went wrong.</media-alert-dialog-title>\n <media-alert-dialog-description class=\"${error.description}\"></media-alert-dialog-description>\n </div>\n <div class=\"${error.actions}\">\n <media-alert-dialog-close class=\"${cn(button.base, button.primary)}\">OK</media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls data-controls=\"\" class=\"${controls}\">\n <media-tooltip-group>\n <div class=\"${buttonGroupStart}\">\n <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.play.button)}\">\n ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.subtle, button.icon)}\">\n <span class=\"${iconContainer}\">\n ${renderIcon('seek', { class: cn(icon, iconFlipped) })}\n <span class=\"${cn(seek.label, seek.labelBackward)}\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-backward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n\n <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"${cn(button.base, button.subtle, button.icon)}\">\n <span class=\"${iconContainer}\">\n ${renderIcon('seek', { class: icon })}\n <span class=\"${cn(seek.label, seek.labelForward)}\">${SEEK_TIME}</span>\n </span>\n </media-seek-button>\n <media-tooltip id=\"seek-forward-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n </div>\n\n <div class=\"${time.group}\">\n <media-time type=\"current\" class=\"${time.current}\"></media-time>\n <media-time-slider class=\"${slider.root}\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n </media-slider-track>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n\n <div class=\"${preview.root}\">\n <media-slider-thumbnail class=\"${preview.thumbnail}\"></media-slider-thumbnail>\n <media-slider-value type=\"pointer\" class=\"${preview.time}\"></media-slider-value>\n ${renderIcon('spinner', { class: cn(icon, preview.spinner) })}\n </div>\n </media-time-slider>\n <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n </div>\n\n <div class=\"${buttonGroupEnd}\">\n <media-playback-rate-menu-trigger commandfor=\"playback-rate-menu\" class=\"${cn(button.base, button.subtle, button.icon, playbackRate.button)}\"></media-playback-rate-menu-trigger>\n <media-playback-rate-menu id=\"playback-rate-menu\" side=\"top\" align=\"center\" class=\"${cn(popup.popover, menu.root)}\">\n <media-playback-rate-options class=\"${menu.group}\">\n <template>\n <media-menu-radio-item class=\"${menu.item}\">\n <span data-part=\"label\"></span>\n <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n ${renderIcon('check', { class: icon })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-playback-rate-options>\n </media-playback-rate-menu>\n\n <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n </media-mute-button>\n\n <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.captions.button)}\">\n ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n </media-captions-button>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n <media-cast-button commandfor=\"cast-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.cast.button)}\">\n ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}\n ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}\n </media-cast-button>\n <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\"></media-tooltip>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"${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\n <!-- Input Feedback -->\n <media-status-announcer></media-status-announcer>\n <div class=\"${inputFeedback.root}\">\n <media-volume-indicator\n hidden\n class=\"${cn(inputFeedback.island.base, inputFeedback.island.volume, inputFeedback.island.shownVolume)}\"\n >\n <media-volume-indicator-fill class=\"${inputFeedback.island.content}\">\n ${renderIcon('volume-high', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeHigh) })}\n ${renderIcon('volume-low', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeLow) })}\n ${renderIcon('volume-off', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeOff) })}\n <media-volume-indicator-value class=\"${inputFeedback.island.value}\"></media-volume-indicator-value>\n </media-volume-indicator-fill>\n </media-volume-indicator>\n\n <media-status-indicator hidden actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\" class=\"${cn(inputFeedback.island.base, inputFeedback.island.shownStatus)}\">\n <div class=\"${inputFeedback.island.content}\">\n ${renderIcon('captions-on', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOn) })}\n ${renderIcon('captions-off', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOff) })}\n ${renderIcon('fullscreen-enter', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenEnter) })}\n ${renderIcon('fullscreen-exit', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenExit) })}\n ${renderIcon('pip-enter', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownPipEnter) })}\n ${renderIcon('pip-exit', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownPipExit) })}\n <media-status-indicator-value class=\"${inputFeedback.island.value}\"></media-status-indicator-value>\n </div>\n </media-status-indicator>\n\n <media-seek-indicator hidden class=\"${inputFeedback.bubble.base}\">\n ${renderIcon('chevron', { class: cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownSeek) })}\n <media-seek-indicator-value class=\"${inputFeedback.bubble.time}\"></media-seek-indicator-value>\n </media-seek-indicator>\n\n <media-status-indicator hidden actions=\"togglePaused\" class=\"${inputFeedback.bubble.base}\">\n ${renderIcon('play', { class: cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPlay) })}\n ${renderIcon('pause', { class: cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPause) })}\n </media-status-indicator>\n </div>\n </media-container>\n `;\n}\n\nexport class VideoSkinTailwindElement extends SkinElement {\n static readonly tagName = 'video-skin-tailwind';\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(VideoSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n }\n}\n"],"mappings":"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"}

package/dist/default/define/video/ui.js CHANGED Viewed

@@ -5,36 +5,46 @@ import { CastButtonElement } from "../../ui/cast-button/cast-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 { LiveButtonElement } from "../../ui/live-button/live-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 { PlaybackRateMenuElement } from "../../ui/playback-rate-menu/playback-rate-menu-element.js";
+import { PlaybackRateMenuTriggerElement } from "../../ui/playback-rate-menu/playback-rate-menu-trigger-element.js";
+import { PlaybackRateOptionsElement } from "../../ui/playback-rate-menu/playback-rate-options-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 { defineControls, defineErrorDialog, defineInputIndicators, defineMenu, defineTime, defineTimeSlider, defineVolumeSlider } from "../ui/compounds.js";
 import { VideoPlayerElement } from "./player.js";
 //#region src/define/video/ui.ts
 safeDefine(VideoPlayerElement);
 safeDefine(MediaContainerElement);
 defineControls();
 defineErrorDialog();
+defineInputIndicators();
 defineTimeSlider();
 defineVolumeSlider();
 defineTime();
+defineMenu();
 safeDefine(BufferingIndicatorElement);
 safeDefine(CaptionsButtonElement);
 safeDefine(CastButtonElement);
 safeDefine(FullscreenButtonElement);
 safeDefine(GestureElement);
 safeDefine(HotkeyElement);
+safeDefine(LiveButtonElement);
 safeDefine(MuteButtonElement);
 safeDefine(PiPButtonElement);
 safeDefine(PlayButtonElement);
 safeDefine(PlaybackRateButtonElement);
+safeDefine(PlaybackRateOptionsElement);
+safeDefine(PlaybackRateMenuTriggerElement);
+safeDefine(PlaybackRateMenuElement);
 safeDefine(PopoverElement);
 safeDefine(PosterElement);
 safeDefine(SeekButtonElement);

package/dist/default/define/video/ui.js.map CHANGED Viewed

	@@ -1 +1 @@
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 { CastButtonElement } from '../../ui/cast-button/cast-button-element';\nimport { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';\nimport { GestureElement } from '../../ui/gesture/gesture-element';\nimport { HotkeyElement } from '../../ui/hotkey/hotkey-element';\nimport { MuteButtonElement } from '../../ui/mute-button/mute-button-element';\nimport { PiPButtonElement } from '../../ui/pip-button/pip-button-element';\nimport { PlayButtonElement } from '../../ui/play-button/play-button-element';\nimport { PlaybackRateButtonElement } from '../../ui/playback-rate-button/playback-rate-button-element';\nimport { PopoverElement } from '../../ui/popover/popover-element';\nimport { PosterElement } from '../../ui/poster/poster-element';\nimport { SeekButtonElement } from '../../ui/seek-button/seek-button-element';\nimport { TooltipElement } from '../../ui/tooltip/tooltip-element';\nimport { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';\nimport { safeDefine } from '../safe-define';\nimport { defineControls, defineErrorDialog, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';\n\n// Value import — player.ts body runs before this module's body.\nimport { VideoPlayerElement } from './player';\n\n// ── Registration (providers / parents first) ────────────────────────────\n\nsafeDefine(VideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\n// Compound groups.\ndefineControls();\ndefineErrorDialog();\ndefineTimeSlider();\ndefineVolumeSlider();\ndefineTime();\n\n// Standalone elements.\nsafeDefine(BufferingIndicatorElement);\nsafeDefine(CaptionsButtonElement);\nsafeDefine(CastButtonElement);\nsafeDefine(FullscreenButtonElement);\nsafeDefine(GestureElement);\nsafeDefine(HotkeyElement);\nsafeDefine(MuteButtonElement);\nsafeDefine(PiPButtonElement);\nsafeDefine(PlayButtonElement);\nsafeDefine(PlaybackRateButtonElement);\nsafeDefine(PopoverElement);\nsafeDefine(PosterElement);\nsafeDefine(SeekButtonElement);\nsafeDefine(TooltipElement);\nsafeDefine(TooltipGroupElement);\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;AA2BA~~,WAAW,mBAAmB;AAC9B,WAAW,sBAAsB;AAGjC,gBAAgB;AAChB,mBAAmB;AACnB,kBAAkB;AAClB,oBAAoB;AACpB,YAAY;AAGZ,WAAW,0BAA0B;AACrC,WAAW,sBAAsB;AACjC,WAAW,kBAAkB;AAC7B,WAAW,wBAAwB;AACnC,WAAW,eAAe;AAC1B,WAAW,cAAc;AACzB,WAAW,kBAAkB;AAC7B,WAAW,iBAAiB;AAC5B,WAAW,kBAAkB;AAC7B,WAAW,0BAA0B;AACrC,WAAW,eAAe;AAC1B,WAAW,cAAc;AACzB,WAAW,kBAAkB;AAC7B,WAAW,eAAe;AAC1B,WAAW,oBAAoB"}
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 { CastButtonElement } from '../../ui/cast-button/cast-button-element';\nimport { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';\nimport { GestureElement } from '../../ui/gesture/gesture-element';\nimport { HotkeyElement } from '../../ui/hotkey/hotkey-element';\nimport { LiveButtonElement } from '../../ui/live-button/live-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 { PlaybackRateMenuElement } from '../../ui/playback-rate-menu/playback-rate-menu-element';\nimport { PlaybackRateMenuTriggerElement } from '../../ui/playback-rate-menu/playback-rate-menu-trigger-element';\nimport { PlaybackRateOptionsElement } from '../../ui/playback-rate-menu/playback-rate-options-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 {\n defineControls,\n defineErrorDialog,\n defineInputIndicators,\n defineMenu,\n defineTime,\n defineTimeSlider,\n defineVolumeSlider,\n} 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();\ndefineInputIndicators();\ndefineTimeSlider();\ndefineVolumeSlider();\ndefineTime();\ndefineMenu();\n\n// Standalone elements.\nsafeDefine(BufferingIndicatorElement);\nsafeDefine(CaptionsButtonElement);\nsafeDefine(CastButtonElement);\nsafeDefine(FullscreenButtonElement);\nsafeDefine(GestureElement);\nsafeDefine(HotkeyElement);\nsafeDefine(LiveButtonElement);\nsafeDefine(MuteButtonElement);\nsafeDefine(PiPButtonElement);\nsafeDefine(PlayButtonElement);\nsafeDefine(PlaybackRateButtonElement);\nsafeDefine(PlaybackRateOptionsElement);\nsafeDefine(PlaybackRateMenuTriggerElement);\nsafeDefine(PlaybackRateMenuElement);\nsafeDefine(PopoverElement);\nsafeDefine(PosterElement);\nsafeDefine(SeekButtonElement);\nsafeDefine(TooltipElement);\nsafeDefine(TooltipGroupElement);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuCA,WAAW,mBAAmB;AAC9B,WAAW,sBAAsB;AAGjC,gBAAgB;AAChB,mBAAmB;AACnB,uBAAuB;AACvB,kBAAkB;AAClB,oBAAoB;AACpB,YAAY;AACZ,YAAY;AAGZ,WAAW,0BAA0B;AACrC,WAAW,sBAAsB;AACjC,WAAW,kBAAkB;AAC7B,WAAW,wBAAwB;AACnC,WAAW,eAAe;AAC1B,WAAW,cAAc;AACzB,WAAW,kBAAkB;AAC7B,WAAW,kBAAkB;AAC7B,WAAW,iBAAiB;AAC5B,WAAW,kBAAkB;AAC7B,WAAW,0BAA0B;AACrC,WAAW,2BAA2B;AACtC,WAAW,+BAA+B;AAC1C,WAAW,wBAAwB;AACnC,WAAW,eAAe;AAC1B,WAAW,cAAc;AACzB,WAAW,kBAAkB;AAC7B,WAAW,eAAe;AAC1B,WAAW,oBAAoB"}

package/dist/default/icons/default/index.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { captionsOffIcon } from "../dist/html/default/captions-off.js";
+import { captionsOnIcon } from "../dist/html/default/captions-on.js";
+import { castEnterIcon } from "../dist/html/default/cast-enter.js";
+import { castExitIcon } from "../dist/html/default/cast-exit.js";
+import { checkIcon } from "../dist/html/default/check.js";
+import { chevronIcon } from "../dist/html/default/chevron.js";
+import { fullscreenEnterIcon } from "../dist/html/default/fullscreen-enter.js";
+import { fullscreenExitIcon } from "../dist/html/default/fullscreen-exit.js";
+import { pauseIcon } from "../dist/html/default/pause.js";
+import { pipEnterIcon } from "../dist/html/default/pip-enter.js";
+import { pipExitIcon } from "../dist/html/default/pip-exit.js";
+import { playIcon } from "../dist/html/default/play.js";
+import { restartIcon } from "../dist/html/default/restart.js";
+import { seekIcon } from "../dist/html/default/seek.js";
+import { spinnerIcon } from "../dist/html/default/spinner.js";
+import { volumeHighIcon } from "../dist/html/default/volume-high.js";
+import { volumeLowIcon } from "../dist/html/default/volume-low.js";
+import { volumeOffIcon } from "../dist/html/default/volume-off.js";
+export { captionsOffIcon, captionsOnIcon, castEnterIcon, castExitIcon, checkIcon, chevronIcon, fullscreenEnterIcon, fullscreenExitIcon, pauseIcon, pipEnterIcon, pipExitIcon, playIcon, restartIcon, seekIcon, spinnerIcon, volumeHighIcon, volumeLowIcon, volumeOffIcon };

package/dist/default/icons/dist/element/base.js ADDED Viewed

@@ -0,0 +1,66 @@
+//#region ../icons/dist/element/base.js
+var MediaIconElement = class MediaIconElement extends HTMLElement {
+	static #families = /* @__PURE__ */ new Map();
+	static #loaders = /* @__PURE__ */ new Map();
+	static #loading = /* @__PURE__ */ new Map();
+	static #instances = /* @__PURE__ */ new Set();
+	static register(family, icons) {
+		const map = MediaIconElement.#families.get(family) ?? /* @__PURE__ */ new Map();
+		for (const [name, svg] of Object.entries(icons)) map.set(name, svg);
+		MediaIconElement.#families.set(family, map);
+		MediaIconElement.#renderFamily(family);
+	}
+	static registerLoader(family, load) {
+		MediaIconElement.#loaders.set(family, load);
+	}
+	static load(family) {
+		if (MediaIconElement.#families.has(family)) return Promise.resolve();
+		const pending = MediaIconElement.#loading.get(family);
+		if (pending) return pending;
+		const loader = MediaIconElement.#loaders.get(family);
+		if (!loader) return Promise.resolve();
+		const loading = Promise.resolve().then(() => loader()).then((icons) => {
+			if (icons) MediaIconElement.register(family, icons);
+		}).finally(() => MediaIconElement.#loading.delete(family));
+		MediaIconElement.#loading.set(family, loading);
+		return loading;
+	}
+	static #renderFamily(family) {
+		for (const icon of MediaIconElement.#instances) if (icon.#family === family) icon.#render();
+	}
+	static get observedAttributes() {
+		return ["name", "family"];
+	}
+	attributeChangedCallback() {
+		this.#render();
+	}
+	connectedCallback() {
+		MediaIconElement.#instances.add(this);
+		this.#render();
+	}
+	disconnectedCallback() {
+		MediaIconElement.#instances.delete(this);
+	}
+	get #family() {
+		return this.getAttribute("family") || "default";
+	}
+	#render() {
+		const name = this.getAttribute("name");
+		if (!name) return;
+		const family = this.#family;
+		const svg = MediaIconElement.#families.get(family)?.get(name);
+		if (!svg) {
+			if (MediaIconElement.#families.has(family)) return;
+			MediaIconElement.load(family).then(() => {
+				if (!this.isConnected || this.getAttribute("name") !== name || this.#family !== family || !MediaIconElement.#families.has(family)) return;
+				this.#render();
+			}, () => {});
+			return;
+		}
+		this.innerHTML = svg;
+	}
+};
+//#endregion
+export { MediaIconElement };
+//# sourceMappingURL=base.js.map

package/dist/default/icons/dist/element/base.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"base.js","names":["#families","#loaders","#loading","#instances","#renderFamily","#family","#render"],"sources":["../../../../../../icons/dist/element/base.js"],"sourcesContent":["export class MediaIconElement extends HTMLElement {\n static #families = new Map();\n static #loaders = new Map();\n static #loading = new Map();\n static #instances = new Set();\n\n static register(family, icons) {\n const map = MediaIconElement.#families.get(family) ?? new Map();\n for (const [name, svg] of Object.entries(icons)) {\n map.set(name, svg);\n }\n MediaIconElement.#families.set(family, map);\n MediaIconElement.#renderFamily(family);\n }\n\n static registerLoader(family, load) {\n MediaIconElement.#loaders.set(family, load);\n }\n\n static load(family) {\n if (MediaIconElement.#families.has(family)) return Promise.resolve();\n\n const pending = MediaIconElement.#loading.get(family);\n if (pending) return pending;\n\n const loader = MediaIconElement.#loaders.get(family);\n if (!loader) return Promise.resolve();\n\n const loading = Promise.resolve()\n .then(() => loader())\n .then((icons) => {\n if (icons) MediaIconElement.register(family, icons);\n })\n .finally(() => MediaIconElement.#loading.delete(family));\n\n MediaIconElement.#loading.set(family, loading);\n return loading;\n }\n\n static #renderFamily(family) {\n for (const icon of MediaIconElement.#instances) {\n if (icon.#family === family) icon.#render();\n }\n }\n\n static get observedAttributes() {\n return ['name', 'family'];\n }\n\n attributeChangedCallback() {\n this.#render();\n }\n\n connectedCallback() {\n MediaIconElement.#instances.add(this);\n this.#render();\n }\n\n disconnectedCallback() {\n MediaIconElement.#instances.delete(this);\n }\n\n get #family() {\n return this.getAttribute('family') || 'default';\n }\n\n #render() {\n const name = this.getAttribute('name');\n if (!name) return;\n\n const family = this.#family;\n const icons = MediaIconElement.#families.get(family);\n const svg = icons?.get(name);\n if (!svg) {\n if (MediaIconElement.#families.has(family)) return;\n\n MediaIconElement.load(family).then(() => {\n if (\n !this.isConnected ||\n this.getAttribute('name') !== name ||\n this.#family !== family ||\n !MediaIconElement.#families.has(family)\n ) {\n return;\n }\n this.#render();\n }, () => {});\n return;\n }\n\n this.innerHTML = svg;\n }\n}\n"],"mappings":";AAAA,IAAa,mBAAb,MAAa,yBAAyB,YAAY;CAChD,QAAA,2BAAmB,IAAI,KAAK;CAC5B,QAAA,0BAAkB,IAAI,KAAK;CAC3B,QAAA,0BAAkB,IAAI,KAAK;CAC3B,QAAA,4BAAoB,IAAI,KAAK;CAE7B,OAAO,SAAS,QAAQ,OAAO;EAC7B,MAAM,MAAM,kBAAA,SAA2B,IAAI,OAAO,oBAAI,IAAI,KAAK;AAC/D,OAAK,MAAM,CAAC,MAAM,QAAQ,OAAO,QAAQ,MAAM,CAC7C,KAAI,IAAI,MAAM,IAAI;AAEpB,oBAAA,SAA2B,IAAI,QAAQ,IAAI;AAC3C,oBAAA,aAA+B,OAAO;;CAGxC,OAAO,eAAe,QAAQ,MAAM;AAClC,oBAAA,QAA0B,IAAI,QAAQ,KAAK;;CAG7C,OAAO,KAAK,QAAQ;AAClB,MAAI,kBAAA,SAA2B,IAAI,OAAO,CAAE,QAAO,QAAQ,SAAS;EAEpE,MAAM,UAAU,kBAAA,QAA0B,IAAI,OAAO;AACrD,MAAI,QAAS,QAAO;EAEpB,MAAM,SAAS,kBAAA,QAA0B,IAAI,OAAO;AACpD,MAAI,CAAC,OAAQ,QAAO,QAAQ,SAAS;EAErC,MAAM,UAAU,QAAQ,SAAS,CAC9B,WAAW,QAAQ,CAAC,CACpB,MAAM,UAAU;AACf,OAAI,MAAO,kBAAiB,SAAS,QAAQ,MAAM;IACnD,CACD,cAAc,kBAAA,QAA0B,OAAO,OAAO,CAAC;AAE1D,oBAAA,QAA0B,IAAI,QAAQ,QAAQ;AAC9C,SAAO;;CAGT,QAAA,aAAqB,QAAQ;AAC3B,OAAK,MAAM,QAAQ,kBAAA,UACjB,KAAI,MAAA,WAAiB,OAAQ,OAAA,QAAc;;CAI/C,WAAW,qBAAqB;AAC9B,SAAO,CAAC,QAAQ,SAAS;;CAG3B,2BAA2B;AACzB,QAAA,QAAc;;CAGhB,oBAAoB;AAClB,oBAAA,UAA4B,IAAI,KAAK;AACrC,QAAA,QAAc;;CAGhB,uBAAuB;AACrB,oBAAA,UAA4B,OAAO,KAAK;;CAG1C,KAAA,SAAc;AACZ,SAAO,KAAK,aAAa,SAAS,IAAI;;CAGxC,UAAU;EACR,MAAM,OAAO,KAAK,aAAa,OAAO;AACtC,MAAI,CAAC,KAAM;EAEX,MAAM,SAAS,MAAA;EAEf,MAAM,MADQ,kBAAA,SAA2B,IAAI,OAAO,EACjC,IAAI,KAAK;AAC5B,MAAI,CAAC,KAAK;AACR,OAAI,kBAAA,SAA2B,IAAI,OAAO,CAAE;AAE5C,oBAAiB,KAAK,OAAO,CAAC,WAAW;AACvC,QACE,CAAC,KAAK,eACN,KAAK,aAAa,OAAO,KAAK,QAC9B,MAAA,WAAiB,UACjB,CAAC,kBAAA,SAA2B,IAAI,OAAO,CAEvC;AAEF,UAAA,QAAc;YACP,GAAG;AACZ;;AAGF,OAAK,YAAY"}

package/dist/default/icons/dist/element/default/icons.js ADDED Viewed

@@ -0,0 +1,25 @@
+//#region ../icons/dist/element/default/icons.js
+const icons = {
+	"captions-off": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" aria-hidden="true" viewBox="0 0 18 18"><rect width="16" height="12" x="1" y="3" stroke="currentColor" stroke-width="2" rx="3"/><rect width="3" height="2" x="3" y="8" fill="currentColor" rx="1"/><rect width="2" height="2" x="13" y="8" fill="currentColor" rx="1"/><rect width="4" height="2" x="11" y="11" fill="currentColor" rx="1"/><rect width="5" height="2" x="7" y="8" fill="currentColor" rx="1"/><rect width="7" height="2" x="3" y="11" fill="currentColor" rx="1"/></svg>`,
+	"captions-on": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" aria-hidden="true" viewBox="0 0 18 18"><path d="M15 2a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zM4 11a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2zm8 0a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zM4 8a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zm4 0a1 1 0 0 0 0 2h3a1 1 0 1 0 0-2zm6 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/></svg>`,
+	"cast-enter": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" aria-hidden="true" viewBox="0 0 18 18"><path fill="currentColor" d="M14.5 2A3.5 3.5 0 0 1 18 5.5v7l-.005.18a3.5 3.5 0 0 1-3.315 3.315L14.5 16h-7c0-.693-.096-1.363-.271-2H14.5a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 14.5 4h-11A1.5 1.5 0 0 0 2 5.5v3.271A7.5 7.5 0 0 0 0 8.5v-3A3.5 3.5 0 0 1 3.5 2z"/><mask id="a" width="8" height="8" x="0" y="8" maskUnits="userSpaceOnUse" style="mask-type:alpha"><rect width="8" height="8" y="8" fill="#fff" rx=".5"/></mask><g mask="url(#a)"><circle cy="16" r="3.25" stroke="currentColor" stroke-width="1.5"/><circle cy="16" r="5.75" stroke="currentColor" stroke-width="1.5"/><circle cy="16" r="1.5" fill="currentColor"/></g></svg>`,
+	"cast-exit": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" aria-hidden="true" viewBox="0 0 18 18"><rect width="11" height="7" x="3.5" y="5.5" fill="currentColor" rx="1"/><rect width="16" height="12" x="1" y="3" stroke="currentColor" stroke-width="2" rx="2.5"/><circle cy="16" r="7.5" fill="#fff"/><mask id="a" width="8" height="8" x="0" y="8" maskUnits="userSpaceOnUse" style="mask-type:alpha"><rect width="8" height="8" y="8" fill="#fff" rx=".5"/></mask><g mask="url(#a)"><circle cy="16" r="3.25" stroke="currentColor" stroke-width="1.5"/><circle cy="16" r="5.75" stroke="currentColor" stroke-width="1.5"/><circle cy="16" r="1.5" fill="currentColor"/></g></svg>`,
+	"check": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" aria-hidden="true" viewBox="0 0 18 18"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 10.455 6.5 13 14 5"/></svg>`,
+	"chevron": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" aria-hidden="true" viewBox="0 0 18 18"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m11.964 9.014-4.95-4.95m0 9.9 4.95-4.95"/></svg>`,
+	"fullscreen-enter": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" aria-hidden="true" viewBox="0 0 18 18"><path d="M9.57 3.617A1 1 0 0 0 8.646 3H4c-.552 0-1 .449-1 1v4.646a.996.996 0 0 0 1.001 1 1 1 0 0 0 .706-.293l4.647-4.647a1 1 0 0 0 .216-1.089m4.812 4.812a1 1 0 0 0-1.089.217l-4.647 4.647a.998.998 0 0 0 .708 1.706H14c.552 0 1-.449 1-1V9.353a1 1 0 0 0-.618-.924"/></svg>`,
+	"fullscreen-exit": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" aria-hidden="true" viewBox="0 0 18 18"><path d="M7.883 1.93a.99.99 0 0 0-1.09.217L2.146 6.793A.998.998 0 0 0 2.853 8.5H7.5c.551 0 1-.449 1-1V2.854a1 1 0 0 0-.617-.924m7.263 7.57H10.5c-.551 0-1 .449-1 1v4.646a.996.996 0 0 0 1.001 1.001 1 1 0 0 0 .706-.293l4.646-4.646a.998.998 0 0 0-.707-1.707z"/></svg>`,
+	"pause": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" aria-hidden="true" viewBox="0 0 18 18"><rect width="5" height="14" x="2" y="2" rx="1.75"/><rect width="5" height="14" x="11" y="2" rx="1.75"/></svg>`,
+	"pip-enter": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" aria-hidden="true" viewBox="0 0 18 18"><path d="M13 2a4 4 0 0 1 4 4v2.036A3.5 3.5 0 0 0 16.5 8H15V6.273C15 5.018 13.96 4 12.679 4H4.32C3.04 4 2 5.018 2 6.273v5.454C2 12.982 3.04 14 4.321 14H6v1.5q0 .255.036.5H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"/><rect width="10" height="7" x="8" y="10" rx="2"/><path d="M7.129 5.547a.6.6 0 0 0-.656.13L3.677 8.473A.6.6 0 0 0 4.102 9.5h2.796c.332 0 .602-.27.602-.602V6.103a.6.6 0 0 0-.371-.556"/></svg>`,
+	"pip-exit": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" aria-hidden="true" viewBox="0 0 18 18"><path d="M13 2a4 4 0 0 1 4 4v2.036A3.5 3.5 0 0 0 16.5 8H15V6.273C15 5.018 13.96 4 12.679 4H4.32C3.04 4 2 5.018 2 6.273v5.454C2 12.982 3.04 14 4.321 14H6v1.5q0 .255.036.5H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"/><rect width="10" height="7" x="8" y="10" rx="2"/><path d="M4.871 10.454a.6.6 0 0 0 .656-.131l2.796-2.796A.6.6 0 0 0 7.898 6.5H5.102a.603.603 0 0 0-.602.602v2.795a.6.6 0 0 0 .371.556"/></svg>`,
+	"play": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" aria-hidden="true" viewBox="0 0 18 18"><path d="m14.051 10.723-7.985 4.964a1.98 1.98 0 0 1-2.758-.638A2.06 2.06 0 0 1 3 13.964V4.036C3 2.91 3.895 2 5 2c.377 0 .747.109 1.066.313l7.985 4.964a2.057 2.057 0 0 1 .627 2.808c-.16.257-.373.475-.627.637"/></svg>`,
+	"restart": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" aria-hidden="true" viewBox="0 0 18 18"><path d="M9 1a7.98 7.98 0 0 0-6.132 2.867l-1.441-1.44A.25.25 0 0 0 1 2.604V6.75c0 .138.112.25.25.25h4.146a.25.25 0 0 0 .177-.427L4.29 5.29A5.99 5.99 0 0 1 9 3a6 6 0 1 1-6 6H1a8 8 0 1 0 8-8"/><path d="m11.61 9.639-3.331 2.07a.826.826 0 0 1-1.15-.266.86.86 0 0 1-.129-.452V6.849C7 6.38 7.374 6 7.834 6c.158 0 .312.045.445.13l3.331 2.071a.858.858 0 0 1 0 1.438"/></svg>`,
+	"seek": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" aria-hidden="true" viewBox="0 0 18 18"><path d="M9 1a7.98 7.98 0 0 1 6.132 2.867l1.441-1.44a.25.25 0 0 1 .427.177V6.75a.25.25 0 0 1-.25.25h-4.146a.25.25 0 0 1-.177-.427L13.71 5.29A5.99 5.99 0 0 0 9 3a6 6 0 0 0-4.242 10.242l-1.415 1.415A8 8 0 0 1 9 1"/></svg>`,
+	"spinner": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" aria-hidden="true" viewBox="0 0 18 18"><style>@keyframes media-spinner-fade{0%{opacity:1}to{opacity:0}}.media-spinner__segment{animation:var(--media-spinner-animation, media-spinner-fade 1s linear infinite);animation-delay:var(--media-spinner-delay)}</style><path d="M9 1.5v3" class="media-spinner__segment" opacity=".5" style="--media-spinner-delay:0s"/><path d="m14.5 3.5-2 2" class="media-spinner__segment" opacity=".45" style="--media-spinner-delay:0.125s"/><path d="M16.5 9h-3" class="media-spinner__segment" opacity=".4" style="--media-spinner-delay:0.25s"/><path d="m14.5 14.5-2-2" class="media-spinner__segment" opacity=".35" style="--media-spinner-delay:0.375s"/><path d="M9 16.5v-3" class="media-spinner__segment" opacity=".3" style="--media-spinner-delay:0.5s"/><path d="m3.5 14.5 2-2" class="media-spinner__segment" opacity=".25" style="--media-spinner-delay:0.625s"/><path d="M1.5 9h3" class="media-spinner__segment" opacity=".15" style="--media-spinner-delay:0.75s"/><path d="m3.5 3.5 2 2" class="media-spinner__segment" opacity=".1" style="--media-spinner-delay:0.875s"/></svg>`,
+	"volume-high": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" aria-hidden="true" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4C15.4 5.9 16 7.4 16 9s-.6 3.1-1.8 4.3c-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7"/><path d="M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752m10.568.59a.91.91 0 0 1 0-1.316.91.91 0 0 1 1.316 0c1.203 1.203 1.47 2.216 1.522 3.208q.012.255.011.51c0 1.16-.358 2.733-1.533 3.803a.7.7 0 0 1-.298.156c-.382.106-.873-.011-1.018-.156a.91.91 0 0 1 0-1.316c.57-.57.995-1.551.995-2.487 0-.944-.26-1.667-.995-2.402"/></svg>`,
+	"volume-low": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" aria-hidden="true" viewBox="0 0 18 18"><path d="M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752m10.568.59a.91.91 0 0 1 0-1.316.91.91 0 0 1 1.316 0c1.203 1.203 1.47 2.216 1.522 3.208q.012.255.011.51c0 1.16-.358 2.733-1.533 3.803a.7.7 0 0 1-.298.156c-.382.106-.873-.011-1.018-.156a.91.91 0 0 1 0-1.316c.57-.57.995-1.551.995-2.487 0-.944-.26-1.667-.995-2.402"/></svg>`,
+	"volume-off": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" aria-hidden="true" viewBox="0 0 18 18"><path d="M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752M14.5 7.586l-1.768-1.768a1 1 0 1 0-1.414 1.414L13.085 9l-1.767 1.768a1 1 0 0 0 1.414 1.414l1.768-1.768 1.768 1.768a1 1 0 0 0 1.414-1.414L15.914 9l1.768-1.768a1 1 0 0 0-1.414-1.414z"/></svg>`
+};
+//#endregion
+export { icons };
+//# sourceMappingURL=icons.js.map

package/dist/default/icons/dist/element/default/icons.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"icons.js","names":[],"sources":["../../../../../../../icons/dist/element/default/icons.js"],"sourcesContent":["export const icons = {\n \"captions-off\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><rect width=\"16\" height=\"12\" x=\"1\" y=\"3\" stroke=\"currentColor\" stroke-width=\"2\" rx=\"3\"/><rect width=\"3\" height=\"2\" x=\"3\" y=\"8\" fill=\"currentColor\" rx=\"1\"/><rect width=\"2\" height=\"2\" x=\"13\" y=\"8\" fill=\"currentColor\" rx=\"1\"/><rect width=\"4\" height=\"2\" x=\"11\" y=\"11\" fill=\"currentColor\" rx=\"1\"/><rect width=\"5\" height=\"2\" x=\"7\" y=\"8\" fill=\"currentColor\" rx=\"1\"/><rect width=\"7\" height=\"2\" x=\"3\" y=\"11\" fill=\"currentColor\" rx=\"1\"/></svg>`,\n \"captions-on\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path d=\"M15 2a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zM4 11a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2zm8 0a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zM4 8a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zm4 0a1 1 0 0 0 0 2h3a1 1 0 1 0 0-2zm6 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2\"/></svg>`,\n \"cast-enter\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path fill=\"currentColor\" d=\"M14.5 2A3.5 3.5 0 0 1 18 5.5v7l-.005.18a3.5 3.5 0 0 1-3.315 3.315L14.5 16h-7c0-.693-.096-1.363-.271-2H14.5a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 14.5 4h-11A1.5 1.5 0 0 0 2 5.5v3.271A7.5 7.5 0 0 0 0 8.5v-3A3.5 3.5 0 0 1 3.5 2z\"/><mask id=\"a\" width=\"8\" height=\"8\" x=\"0\" y=\"8\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><rect width=\"8\" height=\"8\" y=\"8\" fill=\"#fff\" rx=\".5\"/></mask><g mask=\"url(#a)\"><circle cy=\"16\" r=\"3.25\" stroke=\"currentColor\" stroke-width=\"1.5\"/><circle cy=\"16\" r=\"5.75\" stroke=\"currentColor\" stroke-width=\"1.5\"/><circle cy=\"16\" r=\"1.5\" fill=\"currentColor\"/></g></svg>`,\n \"cast-exit\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><rect width=\"11\" height=\"7\" x=\"3.5\" y=\"5.5\" fill=\"currentColor\" rx=\"1\"/><rect width=\"16\" height=\"12\" x=\"1\" y=\"3\" stroke=\"currentColor\" stroke-width=\"2\" rx=\"2.5\"/><circle cy=\"16\" r=\"7.5\" fill=\"#fff\"/><mask id=\"a\" width=\"8\" height=\"8\" x=\"0\" y=\"8\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><rect width=\"8\" height=\"8\" y=\"8\" fill=\"#fff\" rx=\".5\"/></mask><g mask=\"url(#a)\"><circle cy=\"16\" r=\"3.25\" stroke=\"currentColor\" stroke-width=\"1.5\"/><circle cy=\"16\" r=\"5.75\" stroke=\"currentColor\" stroke-width=\"1.5\"/><circle cy=\"16\" r=\"1.5\" fill=\"currentColor\"/></g></svg>`,\n \"check\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 10.455 6.5 13 14 5\"/></svg>`,\n \"chevron\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"2\" d=\"m11.964 9.014-4.95-4.95m0 9.9 4.95-4.95\"/></svg>`,\n \"fullscreen-enter\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path d=\"M9.57 3.617A1 1 0 0 0 8.646 3H4c-.552 0-1 .449-1 1v4.646a.996.996 0 0 0 1.001 1 1 1 0 0 0 .706-.293l4.647-4.647a1 1 0 0 0 .216-1.089m4.812 4.812a1 1 0 0 0-1.089.217l-4.647 4.647a.998.998 0 0 0 .708 1.706H14c.552 0 1-.449 1-1V9.353a1 1 0 0 0-.618-.924\"/></svg>`,\n \"fullscreen-exit\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path d=\"M7.883 1.93a.99.99 0 0 0-1.09.217L2.146 6.793A.998.998 0 0 0 2.853 8.5H7.5c.551 0 1-.449 1-1V2.854a1 1 0 0 0-.617-.924m7.263 7.57H10.5c-.551 0-1 .449-1 1v4.646a.996.996 0 0 0 1.001 1.001 1 1 0 0 0 .706-.293l4.646-4.646a.998.998 0 0 0-.707-1.707z\"/></svg>`,\n \"pause\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><rect width=\"5\" height=\"14\" x=\"2\" y=\"2\" rx=\"1.75\"/><rect width=\"5\" height=\"14\" x=\"11\" y=\"2\" rx=\"1.75\"/></svg>`,\n \"pip-enter\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path d=\"M13 2a4 4 0 0 1 4 4v2.036A3.5 3.5 0 0 0 16.5 8H15V6.273C15 5.018 13.96 4 12.679 4H4.32C3.04 4 2 5.018 2 6.273v5.454C2 12.982 3.04 14 4.321 14H6v1.5q0 .255.036.5H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z\"/><rect width=\"10\" height=\"7\" x=\"8\" y=\"10\" rx=\"2\"/><path d=\"M7.129 5.547a.6.6 0 0 0-.656.13L3.677 8.473A.6.6 0 0 0 4.102 9.5h2.796c.332 0 .602-.27.602-.602V6.103a.6.6 0 0 0-.371-.556\"/></svg>`,\n \"pip-exit\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path d=\"M13 2a4 4 0 0 1 4 4v2.036A3.5 3.5 0 0 0 16.5 8H15V6.273C15 5.018 13.96 4 12.679 4H4.32C3.04 4 2 5.018 2 6.273v5.454C2 12.982 3.04 14 4.321 14H6v1.5q0 .255.036.5H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z\"/><rect width=\"10\" height=\"7\" x=\"8\" y=\"10\" rx=\"2\"/><path d=\"M4.871 10.454a.6.6 0 0 0 .656-.131l2.796-2.796A.6.6 0 0 0 7.898 6.5H5.102a.603.603 0 0 0-.602.602v2.795a.6.6 0 0 0 .371.556\"/></svg>`,\n \"play\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path d=\"m14.051 10.723-7.985 4.964a1.98 1.98 0 0 1-2.758-.638A2.06 2.06 0 0 1 3 13.964V4.036C3 2.91 3.895 2 5 2c.377 0 .747.109 1.066.313l7.985 4.964a2.057 2.057 0 0 1 .627 2.808c-.16.257-.373.475-.627.637\"/></svg>`,\n \"restart\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path d=\"M9 1a7.98 7.98 0 0 0-6.132 2.867l-1.441-1.44A.25.25 0 0 0 1 2.604V6.75c0 .138.112.25.25.25h4.146a.25.25 0 0 0 .177-.427L4.29 5.29A5.99 5.99 0 0 1 9 3a6 6 0 1 1-6 6H1a8 8 0 1 0 8-8\"/><path d=\"m11.61 9.639-3.331 2.07a.826.826 0 0 1-1.15-.266.86.86 0 0 1-.129-.452V6.849C7 6.38 7.374 6 7.834 6c.158 0 .312.045.445.13l3.331 2.071a.858.858 0 0 1 0 1.438\"/></svg>`,\n \"seek\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path d=\"M9 1a7.98 7.98 0 0 1 6.132 2.867l1.441-1.44a.25.25 0 0 1 .427.177V6.75a.25.25 0 0 1-.25.25h-4.146a.25.25 0 0 1-.177-.427L13.71 5.29A5.99 5.99 0 0 0 9 3a6 6 0 0 0-4.242 10.242l-1.415 1.415A8 8 0 0 1 9 1\"/></svg>`,\n \"spinner\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"2\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><style>@keyframes media-spinner-fade{0%{opacity:1}to{opacity:0}}.media-spinner__segment{animation:var(--media-spinner-animation, media-spinner-fade 1s linear infinite);animation-delay:var(--media-spinner-delay)}</style><path d=\"M9 1.5v3\" class=\"media-spinner__segment\" opacity=\".5\" style=\"--media-spinner-delay:0s\"/><path d=\"m14.5 3.5-2 2\" class=\"media-spinner__segment\" opacity=\".45\" style=\"--media-spinner-delay:0.125s\"/><path d=\"M16.5 9h-3\" class=\"media-spinner__segment\" opacity=\".4\" style=\"--media-spinner-delay:0.25s\"/><path d=\"m14.5 14.5-2-2\" class=\"media-spinner__segment\" opacity=\".35\" style=\"--media-spinner-delay:0.375s\"/><path d=\"M9 16.5v-3\" class=\"media-spinner__segment\" opacity=\".3\" style=\"--media-spinner-delay:0.5s\"/><path d=\"m3.5 14.5 2-2\" class=\"media-spinner__segment\" opacity=\".25\" style=\"--media-spinner-delay:0.625s\"/><path d=\"M1.5 9h3\" class=\"media-spinner__segment\" opacity=\".15\" style=\"--media-spinner-delay:0.75s\"/><path d=\"m3.5 3.5 2 2\" class=\"media-spinner__segment\" opacity=\".1\" style=\"--media-spinner-delay:0.875s\"/></svg>`,\n \"volume-high\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path d=\"M15.6 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4C15.4 5.9 16 7.4 16 9s-.6 3.1-1.8 4.3c-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7\"/><path d=\"M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752m10.568.59a.91.91 0 0 1 0-1.316.91.91 0 0 1 1.316 0c1.203 1.203 1.47 2.216 1.522 3.208q.012.255.011.51c0 1.16-.358 2.733-1.533 3.803a.7.7 0 0 1-.298.156c-.382.106-.873-.011-1.018-.156a.91.91 0 0 1 0-1.316c.57-.57.995-1.551.995-2.487 0-.944-.26-1.667-.995-2.402\"/></svg>`,\n \"volume-low\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path d=\"M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752m10.568.59a.91.91 0 0 1 0-1.316.91.91 0 0 1 1.316 0c1.203 1.203 1.47 2.216 1.522 3.208q.012.255.011.51c0 1.16-.358 2.733-1.533 3.803a.7.7 0 0 1-.298.156c-.382.106-.873-.011-1.018-.156a.91.91 0 0 1 0-1.316c.57-.57.995-1.551.995-2.487 0-.944-.26-1.667-.995-2.402\"/></svg>`,\n \"volume-off\": `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path d=\"M.714 6.008h3.072l4.071-3.857c.5-.376 1.143 0 1.143.601V15.28c0 .602-.643.903-1.143.602l-4.071-3.858H.714c-.428 0-.714-.3-.714-.752V6.76c0-.451.286-.752.714-.752M14.5 7.586l-1.768-1.768a1 1 0 1 0-1.414 1.414L13.085 9l-1.767 1.768a1 1 0 0 0 1.414 1.414l1.768-1.768 1.768 1.768a1 1 0 0 0 1.414-1.414L15.914 9l1.768-1.768a1 1 0 0 0-1.414-1.414z\"/></svg>`,\n};\n"],"mappings":";AAAA,MAAa,QAAQ;CACnB,gBAAgB;CAChB,eAAe;CACf,cAAc;CACd,aAAa;CACb,SAAS;CACT,WAAW;CACX,oBAAoB;CACpB,mBAAmB;CACnB,SAAS;CACT,aAAa;CACb,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,QAAQ;CACR,WAAW;CACX,eAAe;CACf,cAAc;CACd,cAAc;CACf"}

package/dist/default/icons/dist/element/default/index.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { MediaIconElement } from "../base.js";
+import { icons } from "./icons.js";
+//#region ../icons/dist/element/default/index.js
+if (typeof customElements !== "undefined" && typeof HTMLElement !== "undefined") {
+	(customElements.get("media-icon") || MediaIconElement).register?.("default", icons);
+	if (!customElements.get("media-icon")) customElements.define("media-icon", MediaIconElement);
+}
+//#endregion
+//# sourceMappingURL=index.js.map

package/dist/default/icons/dist/element/default/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../../../icons/dist/element/default/index.js"],"sourcesContent":["import { MediaIconElement } from '../base.js';\nimport { icons } from './icons.js';\n\nif (typeof customElements !== 'undefined' && typeof HTMLElement !== 'undefined') {\n const mediaIconElement = customElements.get('media-icon') || MediaIconElement;\n\n mediaIconElement.register?.('default', icons);\n\n if (!customElements.get('media-icon')) {\n customElements.define('media-icon', MediaIconElement);\n }\n}\n"],"mappings":";;;AAGA,IAAI,OAAO,mBAAmB,eAAe,OAAO,gBAAgB,aAAa;AAG/E,EAFyB,eAAe,IAAI,aAAa,IAAI,kBAE5C,WAAW,WAAW,MAAM;AAE7C,KAAI,CAAC,eAAe,IAAI,aAAa,CACnC,gBAAe,OAAO,cAAc,iBAAiB"}

package/dist/default/icons/dist/element/index.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { MediaIconElement } from "./base.js";
+//#region ../icons/dist/element/index.js
+if (typeof customElements !== "undefined" && typeof HTMLElement !== "undefined") {
+	const mediaIconElement = customElements.get("media-icon") || MediaIconElement;
+	mediaIconElement.registerLoader?.("default", () => import("./default/icons.js").then((module) => module.icons));
+	mediaIconElement.registerLoader?.("minimal", () => import("./minimal/icons.js").then((module) => module.icons));
+	if (!customElements.get("media-icon")) customElements.define("media-icon", MediaIconElement);
+}
+//#endregion
+//# sourceMappingURL=index.js.map

package/dist/default/icons/dist/element/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../../icons/dist/element/index.js"],"sourcesContent":["import { MediaIconElement } from './base.js';\n\nif (typeof customElements !== 'undefined' && typeof HTMLElement !== 'undefined') {\n const mediaIconElement = customElements.get('media-icon') || MediaIconElement;\n\n mediaIconElement.registerLoader?.('default', () => import('./default/icons.js').then((module) => module.icons));\n mediaIconElement.registerLoader?.('minimal', () => import('./minimal/icons.js').then((module) => module.icons));\n\n if (!customElements.get('media-icon')) {\n customElements.define('media-icon', MediaIconElement);\n }\n}\n"],"mappings":";;AAEA,IAAI,OAAO,mBAAmB,eAAe,OAAO,gBAAgB,aAAa;CAC/E,MAAM,mBAAmB,eAAe,IAAI,aAAa,IAAI;AAE7D,kBAAiB,iBAAiB,iBAAiB,OAAO,sBAAsB,MAAM,WAAW,OAAO,MAAM,CAAC;AAC/G,kBAAiB,iBAAiB,iBAAiB,OAAO,sBAAsB,MAAM,WAAW,OAAO,MAAM,CAAC;AAE/G,KAAI,CAAC,eAAe,IAAI,aAAa,CACnC,gBAAe,OAAO,cAAc,iBAAiB"}