npm - @videojs/html - Versions diffs - 10.0.0-beta.6 → 10.0.0-beta.8 - Mend

@videojs/html 10.0.0-beta.6 → 10.0.0-beta.8

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 (330) hide show

package/dist/default/define/audio/minimal-skin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"media-minimal-skin media-minimal-skin--audio\">\n <slot name=\"media\"></slot>\n\n <div class=\"media-controls\">\n <media-tooltip-group>\n <div class=\"media-button-group\">\n <media-play-button commandfor=\"play-tooltip\" class=\"media-button 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-tooltip\">\n <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek 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-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--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}\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-tooltip\">\n Seek forward ${SEEK_TIME} seconds\n </media-tooltip>\n </div>\n\n <div class=\"media-time-controls\">\n <media-time-group class=\"media-time\">\n <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n <media-time-separator class=\"media-time__separator\"></media-time-separator>\n <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n </media-time-group>\n\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 </media-time-slider>\n </div>\n\n <div class=\"media-button-group\">\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"media-button media-button--icon media-button--playback-rate\">\n </media-playback-rate-button>\n <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-tooltip\">\n Toggle playback rate\n </media-tooltip>\n\n <media-mute-button commandfor=\"audio-volume-popover\" class=\"media-button 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=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"left\" class=\"media-popover media-popover--volume\">\n <media-volume-slider class=\"media-slider\" orientation=\"horizontal\" 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 </div>\n </media-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class MinimalAudioSkinElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'audio-minimal-skin';\n static styles = createStyles(styles);\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalAudioSkinElement.tagName, MinimalAudioSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [MinimalAudioSkinElement.tagName]: MinimalAudioSkinElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,~~6RAAA~~,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,mYAAA,CAAA,UAAA,~~oGAAA~~,WAAA,QAAA,EAAA,OAAA,mDAAA,CAAA,CAAA,mCAAA,UAAA,8HAAA,UAAA,yFAAA,UAAA,~~oGAAA~~,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,mCAAA,UAAA,4HAAA,UAAA,ynCAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA~~;;;;iBAIM;;;gBACT~~,~~aAAa~~,~~qBAAA~~;;;~~yBACD;;;AAG3B~~,~~eAAe~~,~~OAAC~~,~~wBAA6B~~,~~SAAU~~,~~wBAAqB~~"}
1	+ {"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './minimal-skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"media-minimal-skin media-minimal-skin--audio\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <div class=\"media-controls\">\n <media-tooltip-group>\n <div class=\"media-button-group\">\n <media-play-button commandfor=\"play-tooltip\" class=\"media-button 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-tooltip\">\n <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek 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-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--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}\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-tooltip\">\n Seek forward ${SEEK_TIME} seconds\n </media-tooltip>\n </div>\n\n <div class=\"media-time-controls\">\n <media-time-group class=\"media-time\">\n <media-time type=\"current\" class=\"media-time__value media-time__value--current\"></media-time>\n <media-time-separator class=\"media-time__separator\"></media-time-separator>\n <media-time type=\"duration\" class=\"media-time__value media-time__value--duration\"></media-time>\n </media-time-group>\n\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 </media-time-slider>\n </div>\n\n <div class=\"media-button-group\">\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"media-button media-button--icon media-button--playback-rate\">\n </media-playback-rate-button>\n <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-tooltip\">\n Toggle playback rate\n </media-tooltip>\n\n <media-mute-button commandfor=\"audio-volume-popover\" class=\"media-button 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=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"left\" class=\"media-popover media-popover--volume\">\n <media-volume-slider class=\"media-slider\" orientation=\"horizontal\" 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 </div>\n </media-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class MinimalAudioSkinElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'audio-minimal-skin';\n static styles = createStyles(styles);\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalAudioSkinElement.tagName, MinimalAudioSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [MinimalAudioSkinElement.tagName]: MinimalAudioSkinElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,0SAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,mYAAA,CAAA,UAAA,qGAAA,WAAA,QAAA,EAAA,OAAA,mDAAA,CAAA,CAAA,mCAAA,UAAA,8HAAA,UAAA,yFAAA,UAAA,qGAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,mCAAA,UAAA,4HAAA,UAAA,ynCAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA;;AAGlB,IAAY,0BAAZ,cAA+B,UAAA,gBAAA,CAAA;;iBACb;;;;;;yBAEM;;;AAGxB,eAAa,OAAM,wBAAwB,SAAY,wBAAsB"}

package/dist/default/define/audio/minimal-skin.tailwind.js CHANGED Viewed

@@ -27,7 +27,7 @@ import { cn } from "@videojs/utils/style";
 //#region src/define/audio/minimal-skin.tailwind.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<media-container class="${root}"><slot name="media"></slot><div class="${controls}"><media-tooltip-group class="contents"><div class="${buttonGroup}"><span class="${tooltipState.play.wrapper}"><media-play-button commandfor="play-tooltip" class="${cn(button.base, 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)}"><span class="${tooltipState.play.replay}">Replay</span><span class="${tooltipState.play.play}">Play</span><span class="${tooltipState.play.pause}">Pause</span></media-tooltip></span><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"><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.icon, seek.button)}"><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.controls}"><media-time-group class="${time.group}"><media-time type="current" class="${time.current}"></media-time><media-time-separator class="${time.separator}"></media-time-separator><media-time type="duration" class="${time.duration}"></media-time></media-time-group><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></media-time-slider></div><div class="${buttonGroup}"><media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, 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="audio-volume-popover" class="${cn(button.base, 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="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="${cn(popup.volume)}"><media-volume-slider class="${slider.root}" orientation="horizontal" 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="${slider.thumb.base}"></media-slider-thumb></media-volume-slider></media-popover></div></media-tooltip-group></div></media-container>`;
+	return `<media-container class="${root}"> <slot name="media"></slot><slot></slot><div class="${controls}"> <media-tooltip-group><div class="${buttonGroup}"> <span class="${tooltipState.play.wrapper}"> <media-play-button commandfor="play-tooltip" class="${cn(button.base, 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)}"> <span class="${tooltipState.play.replay}">Replay</span><span class="${tooltipState.play.play}">Play</span><span class="${tooltipState.play.pause}">Pause</span></media-tooltip></span><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"> <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.icon, seek.button)}"> <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.controls}"> <media-time-group class="${time.group}"> <media-time type="current" class="${time.current}"></media-time><media-time-separator class="${time.separator}"></media-time-separator><media-time type="duration" class="${time.duration}"></media-time></media-time-group><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></media-time-slider></div><div class="${buttonGroup}"> <media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, 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="audio-volume-popover" class="${cn(button.base, 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="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="${cn(popup.volume)}"> <media-volume-slider class="${slider.root}" orientation="horizontal" 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="${slider.thumb.base}"></media-slider-thumb></media-volume-slider></media-popover></div></media-tooltip-group></div></media-container>`;
 }
 var MinimalAudioSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
 	static {

package/dist/default/define/audio/minimal-skin.tailwind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { playbackRate } from '@videojs/skins/default/tailwind/audio.tailwind';\nimport {\n button,\n buttonGroup,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n popup,\n root,\n seek,\n slider,\n time,\n tooltipState,\n} from '@videojs/skins/minimal/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"${root}\">\n <slot name=\"media\"></slot>\n\n <div class=\"${controls}\">\n <media-tooltip-group ~~class=\"contents\"~~>\n <div class=\"${buttonGroup}\">\n <span class=\"${tooltipState.play.wrapper}\">\n <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, 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)}\">\n <span class=\"${tooltipState.play.replay}\">Replay</span>\n <span class=\"${tooltipState.play.play}\">Play</span>\n <span class=\"${tooltipState.play.pause}\">Pause</span>\n </media-tooltip>\n </span>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\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.icon, seek.button)}\">\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.controls}\">\n <media-time-group class=\"${time.group}\">\n <media-time type=\"current\" class=\"${time.current}\"></media-time>\n <media-time-separator class=\"${time.separator}\"></media-time-separator>\n <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n </media-time-group>\n\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 </media-time-slider>\n </div>\n\n <div class=\"${buttonGroup}\">\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"${cn(button.base, button.icon, playbackRate.button)}\">\n </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=\"audio-volume-popover\" class=\"${cn(button.base, 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=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"left\" class=\"${cn(popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"horizontal\" 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=\"${slider.thumb.base}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n </div>\n </media-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class MinimalAudioSkinTailwindElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'audio-minimal-skin-tailwind';\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalAudioSkinTailwindElement.tagName, MinimalAudioSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [MinimalAudioSkinTailwindElement.tagName]: MinimalAudioSkinTailwindElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,2BAAA,KAAA,~~0CAAA~~,SAAA,~~sDAAA~~,YAAA,~~iBAAA~~,aAAA,KAAA,QAAA,~~wDAAA~~,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,QAAA,EAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,KAAA,EAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,MAAA,EAAA,CAAA,CAAA,0EAAA,GAAA,MAAA,QAAA,CAAA,~~iBAAA~~,aAAA,KAAA,OAAA,8BAAA,aAAA,KAAA,KAAA,4BAAA,aAAA,KAAA,MAAA,sGAAA,CAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,~~iBAAA~~,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,YAAA,EAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,cAAA,CAAA,IAAA,UAAA,gGAAA,GAAA,MAAA,QAAA,CAAA,mBAAA,UAAA,yFAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,~~iBAAA~~,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,MAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,aAAA,CAAA,IAAA,UAAA,+FAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,UAAA,6CAAA,KAAA,SAAA,~~6BAAA~~,KAAA,MAAA,~~sCAAA~~,KAAA,QAAA,8CAAA,KAAA,UAAA,8DAAA,KAAA,SAAA,8DAAA,OAAA,KAAA~~,+BAAA~~,OAAA,MAAA,~~8BAAA,~~GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,oDAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,OAAA,CAAA,0EAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,YAAA,CAAA,+DAAA,YAAA,~~0EAAA~~,GAAA,OAAA,MAAA,OAAA,MAAA,aAAA,OAAA,CAAA,~~6FAAA~~,GAAA,MAAA,QAAA,CAAA,sGAAA,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,WAAA,EAAA,CAAA,CAAA,+HAAA,GAAA,MAAA,OAAA,CAAA,~~gCAAA~~,OAAA,KAAA~~,+EAAA~~,OAAA,MAAA,~~8BAAA,~~GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,wEAAA,OAAA,MAAA,KAAA~~;;;;iBAIU;;;yBACL;;;AAGvB~~,eAAe,~~OAAM~~,~~gCAA6B~~,~~SAAS~~,~~gCAAoC~~"}
1	+ {"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/minimal-skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render/minimal';\nimport { playbackRate } from '@videojs/skins/default/tailwind/audio.tailwind';\nimport {\n button,\n buttonGroup,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n popup,\n root,\n seek,\n slider,\n time,\n tooltipState,\n} from '@videojs/skins/minimal/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"${root}\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <div class=\"${controls}\">\n <media-tooltip-group>\n <div class=\"${buttonGroup}\">\n <span class=\"${tooltipState.play.wrapper}\">\n <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, 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)}\">\n <span class=\"${tooltipState.play.replay}\">Replay</span>\n <span class=\"${tooltipState.play.play}\">Play</span>\n <span class=\"${tooltipState.play.pause}\">Pause</span>\n </media-tooltip>\n </span>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\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.icon, seek.button)}\">\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.controls}\">\n <media-time-group class=\"${time.group}\">\n <media-time type=\"current\" class=\"${time.current}\"></media-time>\n <media-time-separator class=\"${time.separator}\"></media-time-separator>\n <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n </media-time-group>\n\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 </media-time-slider>\n </div>\n\n <div class=\"${buttonGroup}\">\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"${cn(button.base, button.icon, playbackRate.button)}\">\n </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=\"audio-volume-popover\" class=\"${cn(button.base, 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=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"left\" class=\"${cn(popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"horizontal\" 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=\"${slider.thumb.base}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n </div>\n </media-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class MinimalAudioSkinTailwindElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'audio-minimal-skin-tailwind';\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(MinimalAudioSkinTailwindElement.tagName, MinimalAudioSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [MinimalAudioSkinTailwindElement.tagName]: MinimalAudioSkinTailwindElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,2BAAA,KAAA,wDAAA,SAAA,sCAAA,YAAA,kBAAA,aAAA,KAAA,QAAA,yDAAA,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,QAAA,EAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,KAAA,EAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,MAAA,EAAA,CAAA,CAAA,0EAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,aAAA,KAAA,OAAA,8BAAA,aAAA,KAAA,KAAA,4BAAA,aAAA,KAAA,MAAA,sGAAA,CAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,kBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,YAAA,EAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,cAAA,CAAA,IAAA,UAAA,gGAAA,GAAA,MAAA,QAAA,CAAA,mBAAA,UAAA,yFAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,kBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,MAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,aAAA,CAAA,IAAA,UAAA,+FAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,UAAA,6CAAA,KAAA,SAAA,8BAAA,KAAA,MAAA,uCAAA,KAAA,QAAA,8CAAA,KAAA,UAAA,8DAAA,KAAA,SAAA,8DAAA,OAAA,KAAA,gCAAA,OAAA,MAAA,+BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,oDAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,OAAA,CAAA,0EAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,YAAA,CAAA,+DAAA,YAAA,2EAAA,GAAA,OAAA,MAAA,OAAA,MAAA,aAAA,OAAA,CAAA,8FAAA,GAAA,MAAA,QAAA,CAAA,sGAAA,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,WAAA,EAAA,CAAA,CAAA,+HAAA,GAAA,MAAA,OAAA,CAAA,iCAAA,OAAA,KAAA,gFAAA,OAAA,MAAA,+BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,wEAAA,OAAA,MAAA,KAAA;;AAGlB,IAAY,kCAAZ,cAA+B,UAAA,gBAAA,CAAA;;iBACb;;;;;;AAIlB,eAAe,OAAO,gCAAe,SAAA,gCAAA"}

package/dist/default/define/audio/skin.css CHANGED Viewed

@@ -188,7 +188,7 @@
   border-radius: 1.75rem;
   color: oklch(1 0 0);
   font-size: 0.875rem;
-  transition-property: opacity, transform;
+  transition-property: opacity, scale;
   transition-duration: 500ms;
   transition-delay: 100ms;
   transition-timing-function: linear(
@@ -214,7 +214,7 @@
 .media-default-skin .media-error[data-starting-style] .media-error__dialog,
 .media-default-skin .media-error[data-ending-style] .media-error__dialog {
   opacity: 0;
-  transform: scale(0.5);
+  scale: 0.5;
 }
 .media-default-skin .media-error__content {
@@ -231,6 +231,7 @@
 .media-default-skin .media-error__description {
   opacity: 0.7;
+  overflow-wrap: anywhere;
 }
 .media-default-skin .media-error__actions {
@@ -253,12 +254,12 @@
   gap: 0.075rem;
   padding: 0.175rem;
   border-radius: calc(infinity * 1px);
-  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.25));
+  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
   --media-controls-current-shadow-color-subtle: oklch(
     from var(--media-controls-current-shadow-color) l c h /
     calc(alpha * 0.4)
   );
-  text-shadow: 0 0 1px var(--media-controls-current-shadow-color);
+  text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
   @container media-root (width > 40rem) {
     gap: 0.125rem;
@@ -310,7 +311,7 @@
   color: oklch(0 0 0);
   font-weight: 500;
   text-align: center;
-  transition-property: background-color, color, outline-offset, transform;
+  transition-property: background-color, color, outline-offset, scale;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
   cursor: pointer;
@@ -351,7 +352,7 @@
   }
   &:active {
-    transform: scale(0.9);
+    scale: 0.9;
   }
   & .media-icon {
@@ -462,7 +463,7 @@
 .media-default-skin .media-slider__thumb {
   z-index: 10;
   position: absolute;
-  transform: translate(-50%, -50%);
+  translate: -50% -50%;
   width: 0.625rem;
   height: 0.625rem;
   background-color: currentColor;
@@ -568,13 +569,13 @@
   border: 0;
   color: inherit;
   overflow: visible;
-  transition-property: transform, scale, opacity, filter;
+  transition-property: scale, opacity, filter;
   transition-duration: 150ms;
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.5);
+    scale: 0.5;
     filter: blur(8px);
   }
@@ -642,6 +643,10 @@
 .media-default-skin .media-popover--volume {
   padding: 0.625rem 0.25rem;
   border-radius: calc(infinity * 1px);
+  &:has(media-volume-slider[data-availability="unsupported"]) {
+    display: none;
+  }
 }
 .media-default-skin .media-tooltip {
@@ -673,21 +678,21 @@
   --media-surface-outer-border-color: oklch(0 0 0 / 0.05);
   --media-surface-shadow-color: oklch(0 0 0 / 0.15);
   --media-surface-backdrop-filter: blur(16px) saturate(1.5);
+  --media-controls-text-color: var(--media-color-primary, oklch(0 0 0));
   @media (prefers-color-scheme: dark) {
     --media-border-color: oklch(1 0 0 / 0.1);
     --media-surface-background-color: oklch(0 0 0 / 0.4);
+    --media-controls-text-color: var(--media-color-primary, oklch(1 0 0));
   }
 }
 /* ==========================================================================
-   Controls
-   ========================================================================== */
+  Controls
+  ========================================================================== */
 .media-default-skin--audio .media-controls {
-  @media (prefers-color-scheme: dark) {
-    color: oklch(1 0 0);
-  }
+  color: var(--media-controls-text-color);
 }
 /* ==========================================================================
@@ -702,11 +707,3 @@
   }
 }
-media-tooltip-group {
-  display: contents;
-}
-:host {
-  display: grid;
-}

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

@@ -17,7 +17,7 @@ import { ReactiveElement } from "@videojs/element";
 //#region src/define/audio/skin.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<media-container class="media-default-skin media-default-skin--audio"><slot name="media"></slot><div class="media-surface media-controls"><media-tooltip-group><media-play-button commandfor="play-tooltip" class="media-button 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"><span class="media-tooltip-label media-tooltip-label--replay">Replay</span><span class="media-tooltip-label media-tooltip-label--play">Play</span><span class="media-tooltip-label media-tooltip-label--pause">Pause</span></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek"><span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek 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--icon media-button--seek"><span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek" })} <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><media-time-group class="media-time"><media-time type="current" class="media-time__value"></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></media-time-slider><media-time type="duration" class="media-time__value"></media-time></media-time-group><media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button 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="audio-volume-popover" class="media-button 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="audio-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-tooltip-group></div></media-container>`;
+	return `<media-container class="media-default-skin media-default-skin--audio"><slot name="media"></slot><slot></slot><div class="media-surface media-controls"><media-tooltip-group><media-play-button commandfor="play-tooltip" class="media-button 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"><span class="media-tooltip-label media-tooltip-label--replay">Replay</span><span class="media-tooltip-label media-tooltip-label--play">Play</span><span class="media-tooltip-label media-tooltip-label--pause">Pause</span></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek 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--icon media-button--seek"> <span class="media-icon__container"> ${renderIcon("seek", { class: "media-icon media-icon--seek" })} <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><media-time-group class="media-time"><media-time type="current" class="media-time__value"></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></media-time-slider><media-time type="duration" class="media-time__value"></media-time></media-time-group><media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button 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="audio-volume-popover" class="media-button 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="audio-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-tooltip-group></div></media-container>`;
 }
 var AudioSkinElement = class extends SkinMixin(ReactiveElement) {
 	static {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/audio/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"media-default-skin media-default-skin--audio\">\n <slot name=\"media\"></slot>\n\n <div class=\"media-surface media-controls\">\n <media-tooltip-group>\n <media-play-button commandfor=\"play-tooltip\" class=\"media-button 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\">\n <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek 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--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}\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\n <media-time-group class=\"media-time\">\n <media-time type=\"current\" class=\"media-time__value\"></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 </media-time-slider>\n <media-time type=\"duration\" class=\"media-time__value\"></media-time>\n </media-time-group>\n\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"media-button 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=\"audio-volume-popover\" class=\"media-button 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=\"audio-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 </media-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class AudioSkinElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'audio-skin';\n static styles = createStyles(styles);\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinElement.tagName, AudioSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [AudioSkinElement.tagName]: AudioSkinElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,~~2QAAA~~,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,iZAAA,CAAA,UAAA,~~oGAAA~~,WAAA,QAAA,EAAA,OAAA,mDAAA,CAAA,CAAA,mCAAA,UAAA,4IAAA,UAAA,yFAAA,UAAA,~~oGAAA~~,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,mCAAA,UAAA,0IAAA,UAAA,w7BAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA~~;;;;iBAIM;;;gBACT~~,~~aAAa~~,~~aAAA~~;;;~~yBACN;;;AAGtB~~,eAAc,OAAA,~~iBAAsB~~,SAAQ,~~iBAAqB~~"}
1	+ {"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/audio/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createStyles, SkinMixin } from '../skin-mixin';\nimport styles from './skin.css?inline';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"media-default-skin media-default-skin--audio\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <div class=\"media-surface media-controls\">\n <media-tooltip-group>\n <media-play-button commandfor=\"play-tooltip\" class=\"media-button 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\">\n <span class=\"media-tooltip-label media-tooltip-label--replay\">Replay</span>\n <span class=\"media-tooltip-label media-tooltip-label--play\">Play</span>\n <span class=\"media-tooltip-label media-tooltip-label--pause\">Pause</span>\n </media-tooltip>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek 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--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--seek' })}\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\n <media-time-group class=\"media-time\">\n <media-time type=\"current\" class=\"media-time__value\"></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 </media-time-slider>\n <media-time type=\"duration\" class=\"media-time__value\"></media-time>\n </media-time-group>\n\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"media-button 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=\"audio-volume-popover\" class=\"media-button 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=\"audio-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 </media-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class AudioSkinElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'audio-skin';\n static styles = createStyles(styles);\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinElement.tagName, AudioSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [AudioSkinElement.tagName]: AudioSkinElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,wRAAA,WAAA,WAAA,EAAA,OAAA,kCAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,gCAAA,CAAA,CAAA,iZAAA,CAAA,UAAA,qGAAA,WAAA,QAAA,EAAA,OAAA,mDAAA,CAAA,CAAA,mCAAA,UAAA,4IAAA,UAAA,yFAAA,UAAA,qGAAA,WAAA,QAAA,EAAA,OAAA,+BAAA,CAAA,CAAA,mCAAA,UAAA,0IAAA,UAAA,w7BAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,qCAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,sCAAA,CAAA,CAAA;;AAGlB,IAAY,mBAAZ,cAA+B,UAAA,gBAAA,CAAA;;iBACb;;;;;;yBAEM;;;AAGxB,eAAc,OAAA,iBAAwB,SAAQ,iBAAiB"}

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

@@ -12,21 +12,20 @@ import "../ui/time-slider.js";
 import "../ui/tooltip.js";
 import "../ui/tooltip-group.js";
 import "../ui/volume-slider.js";
+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 { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
-import { root } from "../../skins/dist/default/default/tailwind/components/root.js";
 import { seek } from "../../skins/dist/default/default/tailwind/components/seek.js";
 import { time } from "../../skins/dist/default/default/tailwind/components/time.js";
-import { renderIcon } from "../../icons/dist/render/default/index.js";
-import { controls, popup, slider } from "../../skins/dist/default/default/tailwind/audio.tailwind.js";
+import { controls, popup, root, slider } from "../../skins/dist/default/default/tailwind/audio.tailwind.js";
 import { ReactiveElement } from "@videojs/element";
 import { cn } from "@videojs/utils/style";
 //#region src/define/audio/skin.tailwind.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
-	return `<media-container class="${root}"><slot name="media"></slot><div class="${controls}"><media-tooltip-group class="contents"><span class="${tooltipState.play.wrapper}"><media-play-button commandfor="play-tooltip" class="${cn(button.base, 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)}"><span class="${tooltipState.play.replay}">Replay</span><span class="${tooltipState.play.play}">Play</span><span class="${tooltipState.play.pause}">Pause</span></media-tooltip></span><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"><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.icon, seek.button)}"><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><media-time-group 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></media-time-slider><media-time type="duration" class="${time.duration}"></media-time></media-time-group><media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, 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="audio-volume-popover" class="${cn(button.base, 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="audio-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-tooltip-group></div></media-container>`;
+	return `<media-container class="${root}"> <slot name="media"></slot><slot></slot><div class="${controls}"> <media-tooltip-group><span class="${tooltipState.play.wrapper}"> <media-play-button commandfor="play-tooltip" class="${cn(button.base, 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)}"> <span class="${tooltipState.play.replay}">Replay</span><span class="${tooltipState.play.play}">Play</span><span class="${tooltipState.play.pause}">Pause</span></media-tooltip></span><media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.icon, seek.button)}"> <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.icon, seek.button)}"> <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><media-time-group 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></media-time-slider><media-time type="duration" class="${time.duration}"></media-time></media-time-group><media-playback-rate-button commandfor="playback-rate-tooltip" class="${cn(button.base, 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="audio-volume-popover" class="${cn(button.base, 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="audio-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-tooltip-group></div></media-container>`;
 }
 var AudioSkinTailwindElement = class extends SkinMixin(ReactiveElement) {
 	static {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n button,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n playbackRate,\n popup,\n root,\n seek,\n slider,\n time,\n tooltipState,\n} from '@videojs/skins/default/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"${root}\">\n <slot name=\"media\"></slot>\n\n <div class=\"${controls}\">\n <media-tooltip-group ~~class=\"contents\"~~>\n <span class=\"${tooltipState.play.wrapper}\">\n <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, 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)}\">\n <span class=\"${tooltipState.play.replay}\">Replay</span>\n <span class=\"${tooltipState.play.play}\">Play</span>\n <span class=\"${tooltipState.play.pause}\">Pause</span>\n </media-tooltip>\n </span>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\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.icon, seek.button)}\">\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\n <media-time-group 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 </media-time-slider>\n <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n </media-time-group>\n\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"${cn(button.base, 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=\"audio-volume-popover\" class=\"${cn(button.base, 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=\"audio-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-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class AudioSkinTailwindElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'audio-skin-tailwind';\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinTailwindElement.tagName, AudioSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [AudioSkinTailwindElement.tagName]: AudioSkinTailwindElement;\n }\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAiCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,2BAAA,KAAA,~~0CAAA~~,SAAA,~~uDAAA~~,aAAA,KAAA,QAAA,~~wDAAA~~,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,QAAA,EAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,KAAA,EAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,MAAA,EAAA,CAAA,CAAA,0EAAA,GAAA,MAAA,QAAA,CAAA,~~iBAAA~~,aAAA,KAAA,OAAA,8BAAA,aAAA,KAAA,KAAA,4BAAA,aAAA,KAAA,MAAA,sGAAA,CAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,~~iBAAA~~,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,YAAA,EAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,cAAA,CAAA,IAAA,UAAA,gGAAA,GAAA,MAAA,QAAA,CAAA,mBAAA,UAAA,yFAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,~~iBAAA~~,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,MAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,aAAA,CAAA,IAAA,UAAA,+FAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,UAAA,oDAAA,KAAA,MAAA,~~sCAAA~~,KAAA,QAAA,2CAAA,OAAA,KAAA~~,+BAAA~~,OAAA,MAAA,~~8BAAA,~~GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,oDAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,OAAA,CAAA,0EAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,YAAA,CAAA,gFAAA,KAAA,SAAA,0GAAA,GAAA,OAAA,MAAA,OAAA,MAAA,aAAA,OAAA,CAAA,6FAAA,GAAA,MAAA,QAAA,CAAA,sGAAA,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,WAAA,EAAA,CAAA,CAAA,8HAAA,GAAA,MAAA,SAAA,MAAA,OAAA,CAAA,~~gCAAA~~,OAAA,KAAA,~~6EAAA~~,OAAA,MAAA,~~8BAAA,~~GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,wEAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,WAAA,CAAA~~;;;;iBAIU;;;yBACL;;;AAGvB~~,~~eAAe~~,~~OAAC~~,~~yBAA~~+B,SAAS,~~yBAAyB~~"}
1	+ {"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/audio/skin.tailwind.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n button,\n controls,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n playbackRate,\n popup,\n root,\n seek,\n slider,\n time,\n tooltipState,\n} from '@videojs/skins/default/tailwind/audio.tailwind';\nimport { cn } from '@videojs/utils/style';\nimport { SkinMixin } from '../skin-mixin';\n\n// Side-effect imports: register all custom elements used in the template.\nimport '../media/container';\nimport '../ui/mute-button';\nimport '../ui/play-button';\nimport '../ui/playback-rate-button';\nimport '../ui/popover';\nimport '../ui/seek-button';\nimport '../ui/time';\nimport '../ui/time-slider';\nimport '../ui/tooltip';\nimport '../ui/tooltip-group';\nimport '../ui/volume-slider';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"${root}\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <div class=\"${controls}\">\n <media-tooltip-group>\n <span class=\"${tooltipState.play.wrapper}\">\n <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, 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)}\">\n <span class=\"${tooltipState.play.replay}\">Replay</span>\n <span class=\"${tooltipState.play.play}\">Play</span>\n <span class=\"${tooltipState.play.pause}\">Pause</span>\n </media-tooltip>\n </span>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"${cn(button.base, button.icon, seek.button)}\">\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.icon, seek.button)}\">\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\n <media-time-group 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 </media-time-slider>\n <media-time type=\"duration\" class=\"${time.duration}\"></media-time>\n </media-time-group>\n\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"${cn(button.base, 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=\"audio-volume-popover\" class=\"${cn(button.base, 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=\"audio-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-tooltip-group>\n </div>\n </media-container>\n `;\n}\n\nexport class AudioSkinTailwindElement extends SkinMixin(ReactiveElement) {\n static readonly tagName = 'audio-skin-tailwind';\n static getTemplateHTML = getTemplateHTML;\n}\n\ncustomElements.define(AudioSkinTailwindElement.tagName, AudioSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [AudioSkinTailwindElement.tagName]: AudioSkinTailwindElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,YAAY;AAElB,SAAS,kBAAkB;AACzB,QAAgB,2BAAA,KAAA,wDAAA,SAAA,uCAAA,aAAA,KAAA,QAAA,yDAAA,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,WAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,QAAA,EAAA,CAAA,CAAA,GAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,KAAA,EAAA,CAAA,CAAA,GAAA,WAAA,SAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,MAAA,EAAA,CAAA,CAAA,0EAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,aAAA,KAAA,OAAA,8BAAA,aAAA,KAAA,KAAA,4BAAA,aAAA,KAAA,MAAA,sGAAA,CAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,kBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,GAAA,MAAA,YAAA,EAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,cAAA,CAAA,IAAA,UAAA,gGAAA,GAAA,MAAA,QAAA,CAAA,mBAAA,UAAA,yFAAA,UAAA,WAAA,GAAA,OAAA,MAAA,OAAA,MAAA,KAAA,OAAA,CAAA,kBAAA,cAAA,KAAA,WAAA,QAAA,EAAA,OAAA,MAAA,CAAA,CAAA,gBAAA,GAAA,KAAA,OAAA,KAAA,aAAA,CAAA,IAAA,UAAA,+FAAA,GAAA,MAAA,QAAA,CAAA,kBAAA,UAAA,oDAAA,KAAA,MAAA,uCAAA,KAAA,QAAA,2CAAA,OAAA,KAAA,gCAAA,OAAA,MAAA,+BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,oDAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,OAAA,CAAA,0EAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,YAAA,CAAA,gFAAA,KAAA,SAAA,0GAAA,GAAA,OAAA,MAAA,OAAA,MAAA,aAAA,OAAA,CAAA,6FAAA,GAAA,MAAA,QAAA,CAAA,sGAAA,GAAA,OAAA,MAAA,OAAA,MAAA,UAAA,KAAA,OAAA,CAAA,KAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,cAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,UAAA,EAAA,CAAA,CAAA,GAAA,WAAA,eAAA,EAAA,OAAA,GAAA,MAAA,UAAA,KAAA,WAAA,EAAA,CAAA,CAAA,8HAAA,GAAA,MAAA,SAAA,MAAA,OAAA,CAAA,iCAAA,OAAA,KAAA,8EAAA,OAAA,MAAA,+BAAA,GAAA,OAAA,KAAA,MAAA,OAAA,KAAA,KAAA,CAAA,wEAAA,GAAA,OAAA,MAAA,MAAA,OAAA,MAAA,WAAA,CAAA;;AAGlB,IAAY,2BAAZ,cAA+B,UAAA,gBAAA,CAAA;;iBACb;;;;;;AAIlB,eAAe,OAAO,yBAAqB,SAAS,yBAAA"}

package/dist/default/define/background/skin.css CHANGED Viewed

@@ -11,7 +11,7 @@ background-video-skin {
   object-fit: var(--media-object-fit);
 }
-background-video-skin > [slot="media"] {
+background-video-skin > background-video {
   position: absolute;
   inset: 0;
   width: 100%;

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

@@ -1,10 +1,19 @@
 import { safeDefine } from "../safe-define.js";
+import skin_default from "../../_virtual/inline-css_src/define/background/skin.js";
 import { ReactiveElement } from "@videojs/element";
 import { namedNodeMapToObject } from "@videojs/utils/dom";
 //#region src/define/background/skin.ts
+const STYLES_ID = "__media-background-styles";
+function ensureBackgroundStyles() {
+	if (document.getElementById(STYLES_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLES_ID;
+	style.textContent = skin_default;
+	document.head.appendChild(style);
+}
 function getTemplateHTML(_attrs) {
-	return `<media-container><slot name="media" slot="media"></slot></media-container>`;
+	return `<media-container><slot name="media"></slot><slot></slot></media-container>`;
 }
 var BackgroundVideoSkinElement = class extends ReactiveElement {
 	static {
@@ -18,6 +27,7 @@ var BackgroundVideoSkinElement = class extends ReactiveElement {
 	}
 	constructor() {
 		super();
+		ensureBackgroundStyles();
 		if (!this.shadowRoot) {
 			this.attachShadow(this.constructor.shadowRootOptions);
 			this.shadowRoot.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\n\nfunction getTemplateHTML(_attrs: Record<string, string>) {\n return /html/ `\n <media-container>\n <slot ~~name~~=\"media\" slot=\"media\"></slot>\n </media-container>\n `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n static readonly tagName = 'background-video-skin';\n static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n static getTemplateHTML = getTemplateHTML;\n\n constructor() {\n super();\n\n if (!this.shadowRoot) {\n this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);\n this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));\n }\n }\n}\n\nsafeDefine(BackgroundVideoSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n }\n}\n"],"mappings":"~~;;;;;AAIA~~,SAAS,gBAAgB,QAAgC;AACvD,QAAgB;;AAGlB,IAAY,6BAAZ,~~cAAqB~~,gBAAA;;~~iBAClB~~;;;~~2BACH~~,EAAA,MAAA,QAAA~~;;;;;CAGE~~,~~cAAO~~;~~AACP~~,~~SAAO~~;;~~AAGP~~,QAAA,aAAc,KAAA,YAAA,kBAAA;AACZ,QAAO,WAAA,YAAA,gBAAA,qBAAA,KAAA,WAAA,CAAA;;;;AAKX,~~WAAI~~,~~2BAAA~~"}
1	+ {"version":3,"file":"skin.js","names":[],"sources":["../../../../src/define/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport styles from './skin.css?inline';\n\nconst STYLES_ID = '__media-background-styles';\n\nfunction ensureBackgroundStyles(): void {\n if (document.getElementById(STYLES_ID)) return;\n const style = document.createElement('style');\n style.id = STYLES_ID;\n style.textContent = styles;\n document.head.appendChild(style);\n}\n\nfunction getTemplateHTML(_attrs: Record<string, string>) {\n return /html/ `\n <media-container>\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n </media-container>\n `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n static readonly tagName = 'background-video-skin';\n static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n static getTemplateHTML = getTemplateHTML;\n\n constructor() {\n super();\n\n ensureBackgroundStyles();\n\n if (!this.shadowRoot) {\n this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);\n this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));\n }\n }\n}\n\nsafeDefine(BackgroundVideoSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n }\n}\n"],"mappings":";;;;;;AAKA,MAAM,YAAY;AAElB,SAAS,yBAA+B;AACtC,KAAI,SAAS,eAAe,UAAU,CAAE;CACxC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAc;AACpB,UAAS,KAAK,YAAY,MAAM;;AAGlC,SAAS,gBAAgB,QAAgC;AACvD,QAAgB;;AAGlB,IAAY,6BAAZ,cAA+B,gBAAA;;iBACb;;;2BACG,EAAA,MAAA,QAAA;;;yBAClB;;;AAGH,SAAO;AAEL,0BAA0B;;AAG1B,QAAA,aAAc,KAAA,YAAA,kBAAA;AACZ,QAAO,WAAA,YAAA,gBAAA,qBAAA,KAAA,WAAA,CAAA;;;;AAKX,WAAW,2BAAmB"}

package/dist/default/define/base.css CHANGED Viewed

@@ -3,21 +3,21 @@ video-player {
 }
 /*
-Required to override any default video styles (such as Tailwind's CSS reset)
-and ensure the video element fills the container as expected.
+Required to override any default video and image styles (such as
+Tailwind's CSS reset) and ensure they fill the container as expected.
 */
-video-player video {
+video-player video,
+video-player [slot="poster"] {
   display: block;
   width: 100%;
   height: 100%;
-  object-fit: var(--media-object-fit, contain);
-  object-position: var(--media-object-position, center);
 }
 video-player video::-webkit-media-text-track-container {
-  transition: transform var(--media-caption-track-duration, 0) ease-out;
+  transition: translate var(--media-caption-track-duration, 0) ease-out;
   transition-delay: var(--media-caption-track-delay, 0);
-  transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
+  translate: 0 var(--media-caption-track-y, 0);
+  scale: 0.98;
   z-index: 1;
   font-family: inherit;
 }

package/dist/default/define/media/dash-video.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { safeDefine } from "../safe-define.js";
+import { DashVideo } from "../../media/dash-video/index.js";
+//#region src/define/media/dash-video.ts
+var DashVideoElement = class extends DashVideo {
+	static {
+		this.tagName = "dash-video";
+	}
+};
+safeDefine(DashVideoElement);
+//#endregion
+export { DashVideoElement };
+//# sourceMappingURL=dash-video.js.map

package/dist/default/define/media/dash-video.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dash-video.js","names":[],"sources":["../../../../src/define/media/dash-video.ts"],"sourcesContent":["import { DashVideo } from '../../media/dash-video';\nimport { safeDefine } from '../safe-define';\n\nexport class DashVideoElement extends DashVideo {\n static readonly tagName = 'dash-video';\n}\n\nsafeDefine(DashVideoElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [DashVideoElement.tagName]: DashVideoElement;\n }\n}\n"],"mappings":";;;;AAGA,IAAa,mBAAb,cAAsC,UAAU;;iBACpB;;;AAG5B,WAAW,iBAAiB"}

package/dist/default/define/shared.css CHANGED Viewed

@@ -2,6 +2,12 @@ media-tooltip-group {
   display: contents;
 }
+/* Fixes a weird issue with Safari when setting aspect-ratio */
 :host {
   display: grid;
 }
+/* Hide volume popover when volume control is unsupported (e.g., iOS Safari). */
+.media-popover--volume:has(media-volume-slider[data-availability="unsupported"]) {
+  display: none;
+}

package/dist/default/define/skin-mixin.js CHANGED Viewed

@@ -1,14 +1,17 @@
 import base_default from "../_virtual/inline-css_src/define/base.js";
+import shared_default from "../_virtual/inline-css_src/define/shared.js";
 //#region src/define/skin-mixin.ts
 const STYLES_ID = "__media-styles";
-function ensureStyles() {
+function ensureRootStyles() {
 	if (document.getElementById(STYLES_ID)) return;
 	const style = document.createElement("style");
 	style.id = STYLES_ID;
 	style.textContent = base_default;
 	document.head.appendChild(style);
 }
+const sharedSheet = new CSSStyleSheet();
+sharedSheet.replaceSync(shared_default);
 /**
 * Mixin for skin elements that renders the template from a static
 * `getTemplateHTML` method into a shadow root. Native `<slot>` elements
@@ -24,11 +27,13 @@ function SkinMixin(BaseClass) {
 		}
 		constructor(...args) {
 			super(...args);
-			ensureStyles();
+			ensureRootStyles();
 			if (!this.shadowRoot) {
 				const ctor = this.constructor;
 				this.attachShadow(ctor.shadowRootOptions);
-				if (ctor.styles) this.shadowRoot.adoptedStyleSheets = [ctor.styles];
+				const sheets = [sharedSheet];
+				if (ctor.styles) sheets.push(ctor.styles);
+				this.shadowRoot.adoptedStyleSheets = sheets;
 				if (ctor.getTemplateHTML) this.shadowRoot.innerHTML = ctor.getTemplateHTML();
 			}
 		}

package/dist/default/define/skin-mixin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skin-mixin.js","names":["~~styles~~"],"sources":["../../../src/define/skin-mixin.ts"],"sourcesContent":["import type { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\nimport ~~styles~~ from './base.css?inline';\n\nconst STYLES_ID = '__media-styles';\n\nfunction ~~ensureStyles~~(): void {\n if (document.getElementById(STYLES_ID)) return;\n const style = document.createElement('style');\n style.id = STYLES_ID;\n style.textContent = ~~styles~~;\n document.head.appendChild(style);\n}\n\n/*\n Mixin for skin elements that renders the template from a static\n * `getTemplateHTML` method into a shadow root. Native `<slot>` elements\n * handle light DOM projection automatically.\n \n When `static styles` is set, the stylesheet is adopted into the\n * shadow root via `adoptedStyleSheets`.\n /\nexport function SkinMixin<Base extends Constructor<ReactiveElement>>(\n BaseClass: Base\n): Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet } {\n class SkinElement extends (BaseClass as Constructor<ReactiveElement>) {\n static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n static styles?: CSSStyleSheet;\n\n constructor(...args: any[]) {\n super(...args);\n\n ~~ensureStyles~~();\n\n if (!this.shadowRoot) {\n const ctor = this.constructor as typeof SkinElement & { getTemplateHTML?: () => string };\n this.attachShadow(ctor.shadowRootOptions);\n\n if (ctor.styles) {\n this.shadowRoot!.adoptedStyleSheets = ~~[ctor.styles]~~;\n }\n\n if (ctor.getTemplateHTML) {\n this.shadowRoot!.innerHTML = ctor.getTemplateHTML();\n }\n }\n }\n }\n\n return SkinElement as unknown as Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet };\n}\n\n/* Create a shared `CSSStyleSheet` from a CSS string. */\nexport function createStyles(css: string): CSSStyleSheet {\n const sheet = new CSSStyleSheet();\n sheet.replaceSync(css);\n return sheet;\n}\n"],"mappings":"~~;;;AAIA~~,MAAM,YAAY;AAElB,SAAS,~~eAAqB~~;~~AAC5B~~,KAAI,SAAS,eAAe,UAAU,CAAE;CACxC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAcA;AACpB,UAAS,KAAK,YAAY,MAAM~~;;;;;;;;;;AAWlC~~,SAAgB,UACd,WACsE;CACtE,MAAM,oBAAqB,UAA2C;;4BACzB,EAAE,MAAM,QAAQ;;EAG3D,YAAY,GAAG,MAAa;AAC1B,SAAM,GAAG,KAAK;AAEd,~~iBAAc~~;~~AAEd~~,OAAI,CAAC,KAAK,YAAY;IACpB,MAAM,OAAO,KAAK;AAClB,SAAK,aAAa,KAAK,kBAAkB;~~AAEzC~~,QAAI,KAAK,OACP,~~MAAK~~,~~WAAY~~,~~qBAAqB,CAAC,~~KAAK,OAAO;~~AAGrD~~,QAAI,KAAK,gBACP,MAAK,WAAY,YAAY,KAAK,iBAAiB;;;;AAM3D,QAAO;;;AAIT,SAAgB,aAAa,KAA4B;CACvD,MAAM,QAAQ,IAAI,eAAe;AACjC,OAAM,YAAY,IAAI;AACtB,QAAO"}
1	+ {"version":3,"file":"skin-mixin.js","names":["rootStyles","sharedStyles"],"sources":["../../../src/define/skin-mixin.ts"],"sourcesContent":["import type { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\nimport rootStyles from './base.css?inline';\nimport sharedStyles from './shared.css?inline';\n\nconst STYLES_ID = '__media-styles';\n\nfunction ensureRootStyles(): void {\n if (document.getElementById(STYLES_ID)) return;\n const style = document.createElement('style');\n style.id = STYLES_ID;\n style.textContent = rootStyles;\n document.head.appendChild(style);\n}\n\nconst sharedSheet = new CSSStyleSheet();\nsharedSheet.replaceSync(sharedStyles);\n\n/*\n Mixin for skin elements that renders the template from a static\n * `getTemplateHTML` method into a shadow root. Native `<slot>` elements\n * handle light DOM projection automatically.\n \n When `static styles` is set, the stylesheet is adopted into the\n * shadow root via `adoptedStyleSheets`.\n /\nexport function SkinMixin<Base extends Constructor<ReactiveElement>>(\n BaseClass: Base\n): Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet } {\n class SkinElement extends (BaseClass as Constructor<ReactiveElement>) {\n static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n static styles?: CSSStyleSheet;\n\n constructor(...args: any[]) {\n super(...args);\n\n ensureRootStyles();\n\n if (!this.shadowRoot) {\n const ctor = this.constructor as typeof SkinElement & { getTemplateHTML?: () => string };\n this.attachShadow(ctor.shadowRootOptions);\n\n const sheets: CSSStyleSheet[] = [sharedSheet];\n if (ctor.styles) {\n sheets.push(ctor.styles);\n }\n this.shadowRoot!.adoptedStyleSheets = sheets;\n\n if (ctor.getTemplateHTML) {\n this.shadowRoot!.innerHTML = ctor.getTemplateHTML();\n }\n }\n }\n }\n\n return SkinElement as unknown as Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet };\n}\n\n/* Create a shared `CSSStyleSheet` from a CSS string. */\nexport function createStyles(css: string): CSSStyleSheet {\n const sheet = new CSSStyleSheet();\n sheet.replaceSync(css);\n return sheet;\n}\n"],"mappings":";;;;AAKA,MAAM,YAAY;AAElB,SAAS,mBAAyB;AAChC,KAAI,SAAS,eAAe,UAAU,CAAE;CACxC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAcA;AACpB,UAAS,KAAK,YAAY,MAAM;;AAGlC,MAAM,cAAc,IAAI,eAAe;AACvC,YAAY,YAAYC,eAAa;;;;;;;;;AAUrC,SAAgB,UACd,WACsE;CACtE,MAAM,oBAAqB,UAA2C;;4BACzB,EAAE,MAAM,QAAQ;;EAG3D,YAAY,GAAG,MAAa;AAC1B,SAAM,GAAG,KAAK;AAEd,qBAAkB;AAElB,OAAI,CAAC,KAAK,YAAY;IACpB,MAAM,OAAO,KAAK;AAClB,SAAK,aAAa,KAAK,kBAAkB;IAEzC,MAAM,SAA0B,CAAC,YAAY;AAC7C,QAAI,KAAK,OACP,QAAO,KAAK,KAAK,OAAO;AAE1B,SAAK,WAAY,qBAAqB;AAEtC,QAAI,KAAK,gBACP,MAAK,WAAY,YAAY,KAAK,iBAAiB;;;;AAM3D,QAAO;;;AAIT,SAAgB,aAAa,KAA4B;CACvD,MAAM,QAAQ,IAAI,eAAe;AACjC,OAAM,YAAY,IAAI;AACtB,QAAO"}