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

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

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

Files changed (1296) hide show

package/cdn/audio.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{t as e}from"./default-Djy9PEXm.js";import"./compounds-CCgS3IGo.js";import{n as t}from"./shadow-styles-BYZ6q3Q4.js";import{n,t as r}from"./skin-element-DM82PPxz.js";import{o as i}from"./context-CEFisYD0.js";import"./player-ChdQN3H5.js";import"./ui-BGvi0TNr.js";var a=`video-player{display:contents}video-player video,video-player [slot=poster]{width:100%;height:100%;display:block}video-player video::-webkit-media-text-track-container{transition:translate var(--media-caption-track-duration,0) ease-out;transition-delay:var(--media-caption-track-delay,0);translate:0 var(--media-caption-track-y,0);z-index:1;font-family:inherit;scale:.98}media-tooltip-group{display:contents}:host{width:100%;display:grid}.media-popover--volume:has(media-volume-slider[data-availability=unsupported]){display:none}.media-default-skin *,.media-default-skin :before,.media-default-skin :after{box-sizing:border-box}.media-default-skin img,.media-default-skin video,.media-default-skin svg{max-width:100%;display:block}.media-default-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-default-skin{interpolate-size:allow-keywords}}.media-default-skin{isolation:isolate;border-radius:var(--media-border-radius,2rem);outline-offset:2px;outline:2px solid #0000;width:100%;height:100%;display:block;position:relative;container:media-root/inline-size;&:focus-visible{outline-color:currentColor}letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;line-height:1.5;&>*{font-size:.75rem}@container media-root (width>48rem){&>*{font-size:.875rem}}}.media-default-skin .media-surface{background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);box-shadow:0 0 0 1px var(--media-surface-outer-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color);&:after{content:"";z-index:10;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--media-surface-inner-border-color);pointer-events:none;position:absolute;inset:0}}.media-default-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}& .media-surface{border-radius:100%;padding:.25rem}}.media-default-skin .media-error{outline:none}.media-default-skin .media-error:not([data-open]){display:none}.media-default-skin .media-error__title{font-weight:600;line-height:1.25}.media-default-skin .media-error__description{opacity:.7;overflow-wrap:anywhere}.media-default-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-default-skin .media-error[data-open]~.media-controls *{visibility:hidden}.media-default-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 1px 0 var(--media-controls-current-shadow-color);border-radius:1.5rem;align-items:center;column-gap:.075rem;padding:.375rem;display:flex;container:media-controls/inline-size}.media-default-skin .media-time-controls{flex:1;align-items:center;gap:.75rem;padding-inline:.5rem;display:flex;container:media-time-controls/inline-size}.media-default-skin .media-time{font-variant-numeric:tabular-nums}.media-default-skin .media-button{outline-offset:-2px;will-change:scale;cursor:pointer;user-select:none;text-align:center;touch-action:manipulation;border:none;border-radius:3.40282e38px;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;transition-property:background-color,outline-offset,scale;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:currentColor}&:active{scale:.98}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-default-skin .media-button--primary{color:oklch(0% 0 0);text-shadow:none;background:oklch(100% 0 0);font-weight:500}.media-default-skin .media-button--subtle{color:inherit;text-shadow:inherit;background:0 0;&:hover,&:focus-visible,&[aria-expanded=true]{background-color:oklch(from currentColor l c h / .1);text-decoration:none}}.media-default-skin .media-button--icon{aspect-ratio:1;width:2.25rem;padding:0;display:grid;&:active{scale:.9}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-default-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:10px;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}}.media-default-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) "×";font-variant-numeric:tabular-nums;width:4ch}}.media-default-skin .media-button-group{align-items:center;gap:.075rem;display:flex;@container media-root (width>42rem){gap:.125rem}}.media-default-skin .media-icon__container{position:relative}.media-default-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-default-skin .media-icon--flipped{scale:-1 1}.media-default-skin .media-slider{cursor:pointer;border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:2rem}&[data-orientation=vertical]{width:2rem;height:5rem}}.media-default-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.25rem}&[data-orientation=vertical]{width:.25rem;height:100%}}.media-default-skin .media-slider__thumb{z-index:10;width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;user-select:none;outline-offset:-4px;background-color:currentColor;border-radius:3.40282e38px;outline:4px solid #0000;transition-property:opacity,height,width,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;translate:-50% -50%;&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:hover,&:focus{outline-color:oklch(from currentColor l c h / .25);outline-offset:0}&:after{content:"";border-radius:inherit;transition-property:opacity,scale;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;inset:-4px;box-shadow:0 0 0 2px oklch(100% 0 0)}&:not(:focus-visible):after{opacity:0;scale:.5}}.media-default-skin .media-slider:active .media-slider__thumb,.media-default-skin .media-slider__thumb--persistent{width:.75rem;height:.75rem}.media-default-skin .media-slider:hover .media-slider__thumb,.media-default-skin .media-slider__thumb:focus-visible,.media-default-skin .media-slider__thumb--persistent{opacity:1}.media-default-skin .media-slider__buffer,.media-default-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-default-skin .media-slider__buffer[data-orientation=horizontal],.media-default-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-default-skin .media-slider__buffer[data-orientation=vertical],.media-default-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-default-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-default-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=horizontal]{left:var(--media-slider-pointer)}.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=vertical]{top:calc(100% - var(--media-slider-pointer))}.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=horizontal]{width:var(--media-slider-pointer)}.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=vertical]{height:var(--media-slider-pointer)}.media-default-skin .media-popover,.media-default-skin .media-tooltip{color:inherit;transition-property:scale,opacity,filter;transition-duration:var(--media-popup-transition-duration);transition-timing-function:var(--media-popup-transition-timing-function);border:0;margin:0;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);scale:.5}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}&:before{content:"";pointer-events:inherit;position:absolute}&[data-side=top]:before,&[data-side=bottom]:before{width:100%;inset-inline:0}&[data-side=top]:before{top:100%}&[data-side=bottom]:before{bottom:100%}&[data-side=left]:before,&[data-side=right]:before{height:100%;inset-block:0}&[data-side=left]:before{left:100%}&[data-side=right]:before{right:100%}}.media-default-skin .media-popover{&[data-side=top]:before,&[data-side=bottom]:before{height:var(--media-popover-side-offset)}&[data-side=left]:before,&[data-side=right]:before{width:var(--media-popover-side-offset)}}.media-default-skin .media-popover--volume{border-radius:3.40282e38px;padding:.75rem 0;&:has(media-volume-slider[data-availability=unsupported]){display:none}}.media-default-skin .media-tooltip{white-space:nowrap;border-radius:3.40282e38px;padding:.25rem .625rem;font-size:.75rem;&[data-side=top]:before,&[data-side=bottom]:before{height:var(--media-tooltip-side-offset)}&[data-side=left]:before,&[data-side=right]:before{width:var(--media-tooltip-side-offset)}}.media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high{opacity:1;display:block}.media-default-skin--audio{--media-surface-background-color:oklch(100% 0 0/.5);--media-surface-inner-border-color:oklch(100% 0 0/.1);--media-surface-outer-border-color:oklch(0% 0 0/.05);--media-surface-shadow-color:oklch(0% 0 0/.15);--media-surface-backdrop-filter:blur(16px) saturate(1.5);--media-text-color:var(--media-color-primary,oklch(0% 0 0));--media-error-dialog-transition-duration:.25s;--media-error-dialog-transition-delay:.1s;--media-popup-transition-duration:.1s;--media-popup-transition-timing-function:ease-out;--media-tooltip-side-offset:.75rem;--media-popover-side-offset:.75rem;@media (prefers-reduced-motion:reduce){--media-error-dialog-transition-duration:50ms;--media-error-dialog-transition-delay:0s;--media-popup-transition-duration:0s}@media (prefers-color-scheme:dark){--media-surface-background-color:oklch(0% 0 0/.4);--media-text-color:var(--media-color-primary,oklch(100% 0 0))}@media (prefers-reduced-transparency:reduce) or (prefers-contrast:more){--media-surface-background-color:oklch(100% 0 0);--media-surface-outer-border-color:oklch(0% 0 0/.05)}@media (prefers-color-scheme:dark) and ((prefers-reduced-transparency:reduce) or (prefers-contrast:more)){--media-surface-background-color:oklch(0% 0 0);--media-surface-inner-border-color:oklch(100% 0 0/.2);--media-surface-outer-border-color:transparent}}.media-default-skin--audio .media-error__dialog{z-index:20;transition-property:opacity,filter;transition-duration:var(--media-error-dialog-transition-duration);transition-delay:var(--media-error-dialog-transition-delay);background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);color:var(--media-text-color);border-radius:3.40282e38px;align-items:center;gap:.75rem;padding-inline:1.25rem .125rem;transition-timing-function:ease-out;display:flex;position:absolute;inset:0}.media-default-skin .media-error[data-starting-style] .media-error__dialog,.media-default-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;filter:blur(4px)}.media-default-skin .media-error[data-ending-style] .media-error__dialog{transition-delay:0s}.media-default-skin--audio .media-error__content{flex:1;align-items:center;gap:.5rem;display:flex}.media-default-skin--audio .media-controls{color:var(--media-text-color)}.media-default-skin--audio .media-slider__track{background-color:oklch(0% 0 0/.1);@media (prefers-color-scheme:dark){background-color:oklch(100% 0 0/.2);box-shadow:0 0 0 1px oklch(0% 0 0/.05)}}`;function o(){return`<media-container class="media-default-skin media-default-skin--audio"><slot name="media"></slot><slot></slot><media-error-dialog class="media-error"><div class="media-error__dialog"><div class="media-error__content"><media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="media-error__description"></media-alert-dialog-description></div><div class="media-error__actions"><media-alert-dialog-close class="media-button media-button--subtle">OK</media-alert-dialog-close></div></div></media-error-dialog><div class="media-surface media-controls"><media-tooltip-group><div class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play"> ${e(`restart`,{class:`media-icon media-icon--restart`})} ${e(`play`,{class:`media-icon media-icon--play`})} ${e(`pause`,{class:`media-icon media-icon--pause`})} </media-play-button><media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="-10" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${e(`seek`,{class:`media-icon media-icon--seek media-icon--flipped`})} <span class="media-icon__label">10</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip"> Seek backward 10 seconds </media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="10" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${e(`seek`,{class:`media-icon media-icon--seek`})} <span class="media-icon__label">10</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip"> Seek forward 10 seconds </media-tooltip></div><div class="media-time-controls"><media-time type="current" class="media-time"></media-time><media-time-slider class="media-slider"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill><media-slider-buffer class="media-slider__buffer"></media-slider-buffer></media-slider-track><media-slider-thumb class="media-slider__thumb"></media-slider-thumb></media-time-slider><media-time type="duration" class="media-time"></media-time></div><div class="media-button-group"><media-playback-rate-button commandfor="playback-rate-tooltip" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button><media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip"> Toggle playback rate </media-tooltip><media-mute-button commandfor="audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute"> ${e(`volume-off`,{class:`media-icon media-icon--volume-off`})} ${e(`volume-low`,{class:`media-icon media-icon--volume-low`})} ${e(`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></div></media-tooltip-group></div><media-hotkey keys="Space" action="togglePaused"></media-hotkey><media-hotkey keys="k" action="togglePaused"></media-hotkey><media-hotkey keys="m" action="toggleMuted"></media-hotkey><media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey><media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey><media-hotkey keys="l" action="seekStep" value="10"></media-hotkey><media-hotkey keys="j" action="seekStep" value="-10"></media-hotkey><media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey><media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey><media-hotkey keys="0-9" action="seekToPercent"></media-hotkey><media-hotkey keys="Home" action="seekToPercent" value="0"></media-hotkey><media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey><media-hotkey keys=">" action="speedUp"></media-hotkey><media-hotkey keys="<" action="speedDown"></media-hotkey></media-container>`}i(class extends r{static{this.tagName=`audio-skin`}static{this.styles=t(a)}static{this.template=n(o())}});
+import{t as e}from"./default-Ci15Ic2n.js";import{n as t}from"./shadow-styles-BYZ6q3Q4.js";import{n,t as r}from"./skin-element-D0TDGWJH.js";import{f as i}from"./predicate-Dxl3IuYh.js";import"./ui-ByhUcpaY.js";var a=`video-player,live-video-player{display:contents}video-player video,video-player [slot=poster],live-video-player video,live-video-player [slot=poster]{width:100%;height:100%;display:block}video-player video::-webkit-media-text-track-container,live-video-player video::-webkit-media-text-track-container{z-index:1;scale:.98;translate:0 var(--media-caption-track-y,0);transition:translate var(--media-caption-track-duration,0) ease-out;transition-delay:var(--media-caption-track-delay,0);font-family:inherit}media-tooltip-group{display:contents}:host{width:100%;display:grid}.media-popover--volume:has(media-volume-slider[data-availability=unsupported]){display:none}.media-default-skin *,.media-default-skin :before,.media-default-skin :after{box-sizing:border-box}.media-default-skin img,.media-default-skin video,.media-default-skin svg{max-width:100%;display:block}.media-default-skin button{font:inherit}.media-default-skin [hidden][hidden]{display:none}@media (prefers-reduced-motion:no-preference){.media-default-skin{interpolate-size:allow-keywords}}.media-default-skin{--media-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));--media-current-shadow-color-subtle:oklch(from var(--media-current-shadow-color) l c h / calc(alpha * .4));--media-icon-size:18px;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;letter-spacing:normal;outline-offset:-4px;border-radius:var(--media-border-radius,2rem);isolation:isolate;outline:2px solid #0000;width:100%;height:100%;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;transition-property:outline-offset,outline-color;transition-duration:.1s;transition-timing-function:ease-out;display:block;position:relative;container:media-root/inline-size;&:focus-visible{outline-offset:2px;outline-color:currentColor}}.media-default-skin .media-surface{background-color:var(--media-surface-background-color);box-shadow:0 0 0 1px var(--media-surface-outer-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color);backdrop-filter:var(--media-surface-backdrop-filter);&:after{z-index:10;pointer-events:none;content:"";border-radius:inherit;box-shadow:inset 0 0 0 1px var(--media-surface-inner-border-color);position:absolute;inset:0}}.media-default-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&:not([data-visible]){--media-spinner-animation:none}&[data-visible]{display:flex}& .media-surface{border-radius:100%;padding:.25rem}}.media-default-skin .media-error{outline:none}.media-default-skin .media-error:not([data-open]){display:none}.media-default-skin .media-error__title{font-weight:600;line-height:1.25}.media-default-skin .media-error__description{overflow-wrap:anywhere;opacity:.7}.media-default-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-default-skin .media-error[data-open]~.media-controls *{visibility:hidden}.media-default-skin .media-controls{text-shadow:0 1px 0 var(--media-current-shadow-color);border-radius:1.5rem;align-items:center;column-gap:.075rem;padding:.375rem;display:flex;container:media-controls/inline-size}.media-default-skin .media-time-controls{flex:1;align-items:center;gap:.75rem;padding-inline:.5rem;display:flex;container:media-time-controls/inline-size}.media-default-skin .media-time{font-variant-numeric:tabular-nums}.media-default-skin .media-button{text-align:center;touch-action:manipulation;cursor:pointer;user-select:none;outline-offset:-2px;will-change:scale;border:none;border-radius:3.40282e38px;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;min-height:0;padding:.5rem 1rem;transition-property:background-color,outline-offset,scale;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:currentColor}&:active{scale:.98}&[disabled]{cursor:not-allowed;opacity:.5;filter:grayscale()}&[data-availability=unavailable],&[data-availability=unsupported]{display:none}}.media-default-skin .media-button--primary{color:oklch(0% 0 0);text-shadow:none;background:oklch(100% 0 0);font-weight:500}.media-default-skin .media-button--subtle{color:inherit;text-shadow:inherit;background:0 0;&:hover,&:focus-visible,&[aria-expanded=true]{background-color:oklch(from currentColor l c h / .1);text-decoration:none}}.media-default-skin .media-button--icon{aspect-ratio:1;width:2.25rem;padding:0;display:grid;&:active{scale:.9}& .media-icon{transition-behavior:allow-discrete;filter:drop-shadow(0 1px 0 var(--media-current-shadow-color));grid-area:1/1;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out}}.media-default-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:10px;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}}.media-default-skin .media-button--playback-rate{font-variant-numeric:tabular-nums;padding:0;&:after{content:attr(data-rate) "×";width:4ch}&[data-inline-rate-label]:after{content:none}}.media-default-skin .media-button--live{aspect-ratio:auto;text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:.4rem;width:auto;padding:.5rem .75rem;font-size:.75rem;font-weight:600;line-height:1;display:inline-flex;&:before{content:"";background-color:oklch(from currentColor l c h / .4);border-radius:50%;flex-shrink:0;width:.5rem;height:.5rem;transition:background-color .15s ease-out;display:inline-block}&[data-live-edge]:before{background-color:oklch(65% .22 27)}}.media-default-skin .media-button-group{align-items:center;gap:.075rem;display:flex;@container media-root (width>42rem){gap:.125rem}}.media-default-skin .media-icon__container{position:relative}.media-default-skin .media-icon{width:var(--media-icon-size);height:var(--media-icon-size);flex-shrink:0}.media-default-skin .media-icon--flipped{scale:-1 1}.media-default-skin .media-popover.media-menu{box-sizing:border-box;min-width:min(6rem, var(--media-popover-available-width,6rem));max-width:var(--media-popover-available-width,none);max-height:var(--media-popover-available-height,none);overscroll-behavior:none;border-radius:1.25rem;padding:.375rem;overflow:auto;&:before{display:none}}.media-default-skin .media-popover.media-menu .media-menu__group{flex-direction:column;gap:.125rem;display:flex;position:relative;&:before{position-anchor:--media-menu-item-highlight-anchor;inset:anchor(inside);pointer-events:none;content:"";background-color:oklch(from currentColor l c h / .1);border-radius:3.40282e38px;transition:inset .1s ease-in-out;position:absolute}@supports not (top:anchor(top)){&:before{display:none}}}.media-default-skin .media-popover.media-menu .media-menu__item{font-variant-numeric:tabular-nums;min-height:2rem;color:inherit;cursor:pointer;outline-offset:-2px;border-radius:3.40282e38px;outline:2px solid #0000;justify-content:space-between;align-items:center;gap:.5rem;padding:0 .75rem;display:flex;&:hover,&[data-highlighted]{anchor-name:--media-menu-item-highlight-anchor}@supports not (top:anchor(top)){&:hover,&[data-highlighted]{background-color:oklch(from currentColor l c h / .1)}}&:focus-visible{outline-offset:2px;outline-color:currentColor}&[aria-checked=true] .media-menu__indicator{opacity:1}&[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.5}}.media-default-skin .media-popover.media-menu .media-menu__indicator{opacity:0;flex-shrink:0;margin-right:-.25rem}.media-default-skin .media-popover.media-menu .media-menu__indicator .media-icon{filter:drop-shadow(0 1px 0 var(--media-current-shadow-color))}.media-default-skin .media-slider{cursor:pointer;border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:2rem}&[data-orientation=vertical]{width:2rem;height:5rem}}.media-default-skin .media-slider__track{user-select:none;border-radius:inherit;isolation:isolate;position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.25rem}&[data-orientation=vertical]{width:.25rem;height:100%}}.media-default-skin .media-slider__thumb{z-index:10;user-select:none;outline-offset:-4px;width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--media-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;background-color:currentColor;border-radius:3.40282e38px;outline:4px solid #0000;transition-property:opacity,height,width,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;translate:-50% -50%;&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{top:calc(100% - var(--media-slider-fill));left:50%}&:hover,&:focus{outline-color:oklch(from currentColor l c h / .25);outline-offset:0}&:after{content:"";border-radius:inherit;transition-property:opacity,scale;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;inset:-4px;box-shadow:0 0 0 2px oklch(100% 0 0)}&:not(:focus-visible):after{opacity:0;scale:.5}}.media-default-skin .media-slider:active .media-slider__thumb,.media-default-skin .media-slider__thumb--persistent{width:.75rem;height:.75rem}.media-default-skin .media-slider:hover .media-slider__thumb,.media-default-skin .media-slider__thumb:focus-visible,.media-default-skin .media-slider__thumb--persistent{opacity:1}.media-default-skin .media-slider__buffer,.media-default-skin .media-slider__fill{pointer-events:none;border-radius:inherit;position:absolute}.media-default-skin .media-slider__buffer[data-orientation=horizontal],.media-default-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-default-skin .media-slider__buffer[data-orientation=vertical],.media-default-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-default-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-default-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=horizontal]{left:var(--media-slider-pointer)}.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=vertical]{top:calc(100% - var(--media-slider-pointer))}.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=horizontal]{width:var(--media-slider-pointer)}.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=vertical]{height:var(--media-slider-pointer)}.media-default-skin .media-popover,.media-default-skin .media-tooltip{color:inherit;filter:blur();transition-timing-function:var(--media-popup-transition-timing-function);transition-duration:var(--media-popup-transition-duration);border:0;margin:0;transition-property:scale,opacity,filter;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);scale:.85}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}&:before{pointer-events:inherit;content:"";position:absolute}&[data-side=top]:before,&[data-side=bottom]:before{width:100%;inset-inline:0}&[data-side=top]:before{top:100%}&[data-side=bottom]:before{bottom:100%}&[data-side=left]:before,&[data-side=right]:before{height:100%;inset-block:0}&[data-side=left]:before{left:100%}&[data-side=right]:before{right:100%}}.media-default-skin .media-popover{&[data-side=top]:before,&[data-side=bottom]:before{height:var(--media-popover-side-offset)}&[data-side=left]:before,&[data-side=right]:before{width:var(--media-popover-side-offset)}}.media-default-skin .media-popover--volume{border-radius:3.40282e38px;padding:.75rem 0;&:has(media-volume-slider[data-availability=unsupported]){display:none}}.media-default-skin .media-tooltip{white-space:nowrap;border-radius:3.40282e38px;padding:.25rem .625rem;font-size:.75rem;&[data-side=top]:before,&[data-side=bottom]:before{height:var(--media-tooltip-side-offset)}&[data-side=left]:before,&[data-side=right]:before{width:var(--media-tooltip-side-offset)}}.media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high{opacity:1;display:block}.media-default-skin--audio{--media-surface-background-color:oklch(100% 0 0/.5);--media-surface-inner-border-color:oklch(100% 0 0/.1);--media-surface-outer-border-color:oklch(0% 0 0/.05);--media-surface-shadow-color:oklch(0% 0 0/.15);--media-surface-backdrop-filter:blur(16px) saturate(1.5);--media-text-color:var(--media-color-primary,oklch(0% 0 0));--media-error-dialog-transition-duration:.25s;--media-error-dialog-transition-delay:.1s;--media-popup-transition-duration:.1s;--media-popup-transition-timing-function:ease-out;--media-tooltip-side-offset:.75rem;--media-tooltip-boundary-offset:.75rem;--media-popover-side-offset:.75rem;--media-popover-boundary-offset:.75rem;@media (prefers-reduced-motion:reduce){--media-error-dialog-transition-duration:50ms;--media-error-dialog-transition-delay:0s;--media-popup-transition-duration:0s}@media (prefers-color-scheme:dark){--media-surface-background-color:oklch(0% 0 0/.4);--media-text-color:var(--media-color-primary,oklch(100% 0 0))}@media (prefers-reduced-transparency:reduce) or (prefers-contrast:more){--media-surface-background-color:oklch(100% 0 0);--media-surface-outer-border-color:oklch(0% 0 0/.05)}@media (prefers-color-scheme:dark) and ((prefers-reduced-transparency:reduce) or (prefers-contrast:more)){--media-surface-background-color:oklch(0% 0 0);--media-surface-inner-border-color:oklch(100% 0 0/.2);--media-surface-outer-border-color:transparent}}.media-default-skin--audio .media-error__dialog{z-index:20;color:var(--media-text-color);background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);transition-delay:var(--media-error-dialog-transition-delay);transition-timing-function:ease-out;transition-duration:var(--media-error-dialog-transition-duration);border-radius:3.40282e38px;align-items:center;gap:.75rem;padding-inline:1.25rem .125rem;transition-property:opacity,filter;display:flex;position:absolute;inset:0}.media-default-skin .media-error[data-starting-style] .media-error__dialog,.media-default-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;filter:blur(4px)}.media-default-skin .media-error[data-ending-style] .media-error__dialog{transition-delay:0s}.media-default-skin--audio .media-error__content{flex:1;align-items:center;gap:.5rem;display:flex}.media-default-skin--audio .media-controls{color:var(--media-text-color)}.media-default-skin--audio .media-slider__track{background-color:oklch(0% 0 0/.1);@media (prefers-color-scheme:dark){background-color:oklch(100% 0 0/.2);box-shadow:0 0 0 1px oklch(0% 0 0/.05)}}`;function o(){return`<media-container class="media-default-skin media-default-skin--audio"><slot name="media"></slot><slot></slot><media-error-dialog class="media-error"><div class="media-error__dialog"><div class="media-error__content"><media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title><media-alert-dialog-description class="media-error__description"></media-alert-dialog-description></div><div class="media-error__actions"><media-alert-dialog-close class="media-button media-button--subtle">OK</media-alert-dialog-close></div></div></media-error-dialog><div class="media-surface media-controls"><media-tooltip-group><div class="media-button-group"><media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play"> ${e(`restart`,{class:`media-icon media-icon--restart`})} ${e(`play`,{class:`media-icon media-icon--play`})} ${e(`pause`,{class:`media-icon media-icon--pause`})} </media-play-button><media-tooltip id="play-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip"></media-tooltip><media-seek-button commandfor="seek-backward-tooltip" seconds="-10" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${e(`seek`,{class:`media-icon media-icon--seek media-icon--flipped`})} <span class="media-icon__label">10</span></span></media-seek-button><media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip"></media-tooltip><media-seek-button commandfor="seek-forward-tooltip" seconds="10" class="media-button media-button--subtle media-button--icon media-button--seek"> <span class="media-icon__container"> ${e(`seek`,{class:`media-icon media-icon--seek`})} <span class="media-icon__label">10</span></span></media-seek-button><media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="media-surface media-tooltip"></media-tooltip></div><div class="media-time-controls"><media-time type="current" class="media-time"></media-time><media-time-slider class="media-slider"><media-slider-track class="media-slider__track"><media-slider-fill class="media-slider__fill"></media-slider-fill><media-slider-buffer class="media-slider__buffer"></media-slider-buffer></media-slider-track><media-slider-thumb class="media-slider__thumb"></media-slider-thumb></media-time-slider><media-time type="duration" class="media-time"></media-time></div><div class="media-button-group"><media-playback-rate-menu-trigger commandfor="playback-rate-menu" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-menu-trigger><media-playback-rate-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="media-surface media-popover media-menu media-menu--playback-rate"><media-playback-rate-options class="media-menu__group"><template><media-menu-radio-item class="media-menu__item"><span data-part="label"></span><media-menu-item-indicator force-mount class="media-menu__indicator"> ${e(`check`,{class:`media-icon`})} </media-menu-item-indicator></media-menu-radio-item></template></media-playback-rate-options></media-playback-rate-menu><media-mute-button commandfor="audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute"> ${e(`volume-off`,{class:`media-icon media-icon--volume-off`})} ${e(`volume-low`,{class:`media-icon media-icon--volume-low`})} ${e(`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" boundary="viewport" 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></div></media-tooltip-group></div><media-hotkey keys="Space" action="togglePaused"></media-hotkey><media-hotkey keys="k" action="togglePaused"></media-hotkey><media-hotkey keys="m" action="toggleMuted"></media-hotkey><media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey><media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey><media-hotkey keys="l" action="seekStep" value="10"></media-hotkey><media-hotkey keys="j" action="seekStep" value="-10"></media-hotkey><media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey><media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey><media-hotkey keys="0-9" action="seekToPercent"></media-hotkey><media-hotkey keys="Home" action="seekToPercent" value="0"></media-hotkey><media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey><media-hotkey keys=">" action="speedUp"></media-hotkey><media-hotkey keys="<" action="speedDown"></media-hotkey></media-container>`}i(class extends r{static{this.tagName=`audio-skin`}static{this.styles=t(a)}static{this.template=n(o())}});
 //# sourceMappingURL=audio.js.map

package/cdn/audio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"audio.js","names":[],"sources":["../inline-css:src/define/audio/skin.js","../src/define/audio/skin.ts"],"sourcesContent":["export default \"video-player{display:contents}video-player video,video-player [slot=poster]{width:100%;height:100%;display:block}video-player video::-webkit-media-text-track-container{transition:translate var(--media-caption-track-duration,0) ease-out;transition-delay:var(--media-caption-track-delay,0);translate:0 var(--media-caption-track-y,0);z-index:1;font-family:inherit;scale:.98}media-tooltip-group{display:contents}:host{width:100%;display:grid}.media-popover--volume:has(media-volume-slider[data-availability=unsupported]){display:none}.media-default-skin ,.media-default-skin :before,.media-default-skin :after{box-sizing:border-box}.media-default-skin img,.media-default-skin video,.media-default-skin svg{max-width:100%;display:block}.media-default-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-default-skin{interpolate-size:allow-keywords}}.media-default-skin{isolation:isolate;border-radius:var(--media-border-radius,2rem);outline-offset:2px;outline:2px solid #0000;width:100%;height:100%;display:block;position:relative;container:media-root/inline-size;&:focus-visible{outline-color:currentColor}letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;line-height:1.5;&>{font-size:.75rem}@container media-root (width>48rem){&>{font-size:.875rem}}}.media-default-skin .media-surface{background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);box-shadow:0 0 0 1px var(--media-surface-outer-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color);&:after{content:\\\"\\\";z-index:10;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--media-surface-inner-border-color);pointer-events:none;position:absolute;inset:0}}.media-default-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}& .media-surface{border-radius:100%;padding:.25rem}}.media-default-skin .media-error{outline:none}.media-default-skin .media-error:not([data-open]){display:none}.media-default-skin .media-error__title{font-weight:600;line-height:1.25}.media-default-skin .media-error__description{opacity:.7;overflow-wrap:anywhere}.media-default-skin .media-error__actions{gap:.5rem;display:flex;&>{flex:1}}.media-default-skin .media-error[data-open]~.media-controls {visibility:hidden}.media-default-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) .5), .15));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 1px 0 var(--media-controls-current-shadow-color);border-radius:1.5rem;align-items:center;column-gap:.075rem;padding:.375rem;display:flex;container:media-controls/inline-size}.media-default-skin .media-time-controls{flex:1;align-items:center;gap:.75rem;padding-inline:.5rem;display:flex;container:media-time-controls/inline-size}.media-default-skin .media-time{font-variant-numeric:tabular-nums}.media-default-skin .media-button{outline-offset:-2px;will-change:scale;cursor:pointer;user-select:none;text-align:center;touch-action:manipulation;border:none;border-radius:3.40282e38px;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;transition-property:background-color,outline-offset,scale;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:currentColor}&:active{scale:.98}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-default-skin .media-button--primary{color:oklch(0% 0 0);text-shadow:none;background:oklch(100% 0 0);font-weight:500}.media-default-skin .media-button--subtle{color:inherit;text-shadow:inherit;background:0 0;&:hover,&:focus-visible,&[aria-expanded=true]{background-color:oklch(from currentColor l c h / .1);text-decoration:none}}.media-default-skin .media-button--icon{aspect-ratio:1;width:2.25rem;padding:0;display:grid;&:active{scale:.9}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-default-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:10px;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}}.media-default-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) \\\"×\\\";font-variant-numeric:tabular-nums;width:4ch}}.media-default-skin .media-button-group{align-items:center;gap:.075rem;display:flex;@container media-root (width>42rem){gap:.125rem}}.media-default-skin .media-icon__container{position:relative}.media-default-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-default-skin .media-icon--flipped{scale:-1 1}.media-default-skin .media-slider{cursor:pointer;border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:2rem}&[data-orientation=vertical]{width:2rem;height:5rem}}.media-default-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.25rem}&[data-orientation=vertical]{width:.25rem;height:100%}}.media-default-skin .media-slider__thumb{z-index:10;width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;user-select:none;outline-offset:-4px;background-color:currentColor;border-radius:3.40282e38px;outline:4px solid #0000;transition-property:opacity,height,width,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;translate:-50% -50%;&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:hover,&:focus{outline-color:oklch(from currentColor l c h / .25);outline-offset:0}&:after{content:\\\"\\\";border-radius:inherit;transition-property:opacity,scale;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;inset:-4px;box-shadow:0 0 0 2px oklch(100% 0 0)}&:not(:focus-visible):after{opacity:0;scale:.5}}.media-default-skin .media-slider:active .media-slider__thumb,.media-default-skin .media-slider__thumb--persistent{width:.75rem;height:.75rem}.media-default-skin .media-slider:hover .media-slider__thumb,.media-default-skin .media-slider__thumb:focus-visible,.media-default-skin .media-slider__thumb--persistent{opacity:1}.media-default-skin .media-slider__buffer,.media-default-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-default-skin .media-slider__buffer[data-orientation=horizontal],.media-default-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-default-skin .media-slider__buffer[data-orientation=vertical],.media-default-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-default-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-default-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=horizontal]{left:var(--media-slider-pointer)}.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=vertical]{top:calc(100% - var(--media-slider-pointer))}.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=horizontal]{width:var(--media-slider-pointer)}.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=vertical]{height:var(--media-slider-pointer)}.media-default-skin .media-popover,.media-default-skin .media-tooltip{color:inherit;transition-property:scale,opacity,filter;transition-duration:var(--media-popup-transition-duration);transition-timing-function:var(--media-popup-transition-timing-function);border:0;margin:0;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);scale:.5}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}&:before{content:\\\"\\\";pointer-events:inherit;position:absolute}&[data-side=top]:before,&[data-side=bottom]:before{width:100%;inset-inline:0}&[data-side=top]:before{top:100%}&[data-side=bottom]:before{bottom:100%}&[data-side=left]:before,&[data-side=right]:before{height:100%;inset-block:0}&[data-side=left]:before{left:100%}&[data-side=right]:before{right:100%}}.media-default-skin .media-popover{&[data-side=top]:before,&[data-side=bottom]:before{height:var(--media-popover-side-offset)}&[data-side=left]:before,&[data-side=right]:before{width:var(--media-popover-side-offset)}}.media-default-skin .media-popover--volume{border-radius:3.40282e38px;padding:.75rem 0;&:has(media-volume-slider[data-availability=unsupported]){display:none}}.media-default-skin .media-tooltip{white-space:nowrap;border-radius:3.40282e38px;padding:.25rem .625rem;font-size:.75rem;&[data-side=top]:before,&[data-side=bottom]:before{height:var(--media-tooltip-side-offset)}&[data-side=left]:before,&[data-side=right]:before{width:var(--media-tooltip-side-offset)}}.media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high{opacity:1;display:block}.media-default-skin--audio{--media-surface-background-color:oklch(100% 0 0/.5);--media-surface-inner-border-color:oklch(100% 0 0/.1);--media-surface-outer-border-color:oklch(0% 0 0/.05);--media-surface-shadow-color:oklch(0% 0 0/.15);--media-surface-backdrop-filter:blur(16px) saturate(1.5);--media-text-color:var(--media-color-primary,oklch(0% 0 0));--media-error-dialog-transition-duration:.25s;--media-error-dialog-transition-delay:.1s;--media-popup-transition-duration:.1s;--media-popup-transition-timing-function:ease-out;--media-tooltip-side-offset:.75rem;--media-popover-side-offset:.75rem;@media (prefers-reduced-motion:reduce){--media-error-dialog-transition-duration:50ms;--media-error-dialog-transition-delay:0s;--media-popup-transition-duration:0s}@media (prefers-color-scheme:dark){--media-surface-background-color:oklch(0% 0 0/.4);--media-text-color:var(--media-color-primary,oklch(100% 0 0))}@media (prefers-reduced-transparency:reduce) or (prefers-contrast:more){--media-surface-background-color:oklch(100% 0 0);--media-surface-outer-border-color:oklch(0% 0 0/.05)}@media (prefers-color-scheme:dark) and ((prefers-reduced-transparency:reduce) or (prefers-contrast:more)){--media-surface-background-color:oklch(0% 0 0);--media-surface-inner-border-color:oklch(100% 0 0/.2);--media-surface-outer-border-color:transparent}}.media-default-skin--audio .media-error__dialog{z-index:20;transition-property:opacity,filter;transition-duration:var(--media-error-dialog-transition-duration);transition-delay:var(--media-error-dialog-transition-delay);background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);color:var(--media-text-color);border-radius:3.40282e38px;align-items:center;gap:.75rem;padding-inline:1.25rem .125rem;transition-timing-function:ease-out;display:flex;position:absolute;inset:0}.media-default-skin .media-error[data-starting-style] .media-error__dialog,.media-default-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;filter:blur(4px)}.media-default-skin .media-error[data-ending-style] .media-error__dialog{transition-delay:0s}.media-default-skin--audio .media-error__content{flex:1;align-items:center;gap:.5rem;display:flex}.media-default-skin--audio .media-controls{color:var(--media-text-color)}.media-default-skin--audio .media-slider__track{background-color:oklch(0% 0 0/.1);@media (prefers-color-scheme:dark){background-color:oklch(100% 0 0/.2);box-shadow:0 0 0 1px oklch(0% 0 0/.05)}}\";","import { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './skin.css?inline';\n\n// Register the player, container, and all UI custom elements.\nimport './ui';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"media-default-skin media-default-skin--audio\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-error-dialog class=\"media-error\">\n <div class=\"media-error__dialog\">\n <div class=\"media-error__content\">\n <media-alert-dialog-title class=\"media-error__title\">Something went wrong.</media-alert-dialog-title>\n <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n </div>\n <div class=\"media-error__actions\">\n <media-alert-dialog-close class=\"media-button media-button--subtle\">OK</media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <div class=\"media-surface media-controls\">\n <media-tooltip-group>\n <div class=\"media-button-group\">\n <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\"></media-tooltip>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--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--subtle 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 </div>\n\n <div class=\"media-time-controls\">\n <media-time type=\"current\" class=\"media-time\"></media-time>\n <media-time-slider class=\"media-slider\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n </media-time-slider>\n <media-time type=\"duration\" class=\"media-time\"></media-time>\n </div>\n\n <div class=\"media-button-group\">\n <media-playback-rate-button commandfor=\"playback-rate-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--playback-rate\"></media-playback-rate-button>\n <media-tooltip id=\"playback-rate-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n Toggle playback rate\n </media-tooltip>\n\n <media-mute-button commandfor=\"audio-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n </media-mute-button>\n\n <media-popover id=\"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 </div>\n </media-tooltip-group>\n </div>\n\n <!-- Hotkeys -->\n <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n <media-hotkey keys=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></media-hotkey>\n <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n <media-hotkey keys=\"<\" action=\"speedDown\"></media-hotkey>\n </media-container>\n `;\n}\n\nexport class AudioSkinElement extends SkinElement {\n static readonly tagName = 'audio-skin';\n static styles = createShadowStyle(styles);\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(AudioSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [AudioSkinElement.tagName]: AudioSkinElement;\n }\n}\n"],"mappings":"2QAAA,IAAA,EAAe,imaCWf,SAAS,GAAkB,CACzB,MAAgB,yyBAAA,EAAA,UAAA,CAAA,MAAA,iCAAA,CAAA,CAAA,GAAA,EAAA,OAAA,CAAA,MAAA,8BAAA,CAAA,CAAA,GAAA,EAAA,QAAA,CAAA,MAAA,+BAAA,CAAA,CAAA,iTAAA,EAAA,OAAA,CAAA,MAAA,kDAAA,CAAA,CAAA,kYAAA,EAAA,OAAA,CAAA,MAAA,8BAAA,CAAA,CAAA,spCAAA,EAAA,aAAA,CAAA,MAAA,oCAAA,CAAA,CAAA,GAAA,EAAA,aAAA,CAAA,MAAA,oCAAA,CAAA,CAAA,GAAA,EAAA,cAAA,CAAA,MAAA,qCAAA,CAAA,CAAA,ogDASlB,EANA,cAA+B,CAAA,qBACb,0DAEC,EAAc,GAAY,CAAA,GAGpB"}
1	+ {"version":3,"file":"audio.js","names":[],"sources":["../inline-css:src/define/audio/skin.js","../src/define/audio/skin.ts"],"sourcesContent":["export default \"video-player,live-video-player{display:contents}video-player video,video-player [slot=poster],live-video-player video,live-video-player [slot=poster]{width:100%;height:100%;display:block}video-player video::-webkit-media-text-track-container,live-video-player video::-webkit-media-text-track-container{z-index:1;scale:.98;translate:0 var(--media-caption-track-y,0);transition:translate var(--media-caption-track-duration,0) ease-out;transition-delay:var(--media-caption-track-delay,0);font-family:inherit}media-tooltip-group{display:contents}:host{width:100%;display:grid}.media-popover--volume:has(media-volume-slider[data-availability=unsupported]){display:none}.media-default-skin ,.media-default-skin :before,.media-default-skin :after{box-sizing:border-box}.media-default-skin img,.media-default-skin video,.media-default-skin svg{max-width:100%;display:block}.media-default-skin button{font:inherit}.media-default-skin [hidden][hidden]{display:none}@media (prefers-reduced-motion:no-preference){.media-default-skin{interpolate-size:allow-keywords}}.media-default-skin{--media-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) .5), .15));--media-current-shadow-color-subtle:oklch(from var(--media-current-shadow-color) l c h / calc(alpha * .4));--media-icon-size:18px;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;letter-spacing:normal;outline-offset:-4px;border-radius:var(--media-border-radius,2rem);isolation:isolate;outline:2px solid #0000;width:100%;height:100%;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;transition-property:outline-offset,outline-color;transition-duration:.1s;transition-timing-function:ease-out;display:block;position:relative;container:media-root/inline-size;&:focus-visible{outline-offset:2px;outline-color:currentColor}}.media-default-skin .media-surface{background-color:var(--media-surface-background-color);box-shadow:0 0 0 1px var(--media-surface-outer-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color);backdrop-filter:var(--media-surface-backdrop-filter);&:after{z-index:10;pointer-events:none;content:\\\"\\\";border-radius:inherit;box-shadow:inset 0 0 0 1px var(--media-surface-inner-border-color);position:absolute;inset:0}}.media-default-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&:not([data-visible]){--media-spinner-animation:none}&[data-visible]{display:flex}& .media-surface{border-radius:100%;padding:.25rem}}.media-default-skin .media-error{outline:none}.media-default-skin .media-error:not([data-open]){display:none}.media-default-skin .media-error__title{font-weight:600;line-height:1.25}.media-default-skin .media-error__description{overflow-wrap:anywhere;opacity:.7}.media-default-skin .media-error__actions{gap:.5rem;display:flex;&>{flex:1}}.media-default-skin .media-error[data-open]~.media-controls {visibility:hidden}.media-default-skin .media-controls{text-shadow:0 1px 0 var(--media-current-shadow-color);border-radius:1.5rem;align-items:center;column-gap:.075rem;padding:.375rem;display:flex;container:media-controls/inline-size}.media-default-skin .media-time-controls{flex:1;align-items:center;gap:.75rem;padding-inline:.5rem;display:flex;container:media-time-controls/inline-size}.media-default-skin .media-time{font-variant-numeric:tabular-nums}.media-default-skin .media-button{text-align:center;touch-action:manipulation;cursor:pointer;user-select:none;outline-offset:-2px;will-change:scale;border:none;border-radius:3.40282e38px;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;min-height:0;padding:.5rem 1rem;transition-property:background-color,outline-offset,scale;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:currentColor}&:active{scale:.98}&[disabled]{cursor:not-allowed;opacity:.5;filter:grayscale()}&[data-availability=unavailable],&[data-availability=unsupported]{display:none}}.media-default-skin .media-button--primary{color:oklch(0% 0 0);text-shadow:none;background:oklch(100% 0 0);font-weight:500}.media-default-skin .media-button--subtle{color:inherit;text-shadow:inherit;background:0 0;&:hover,&:focus-visible,&[aria-expanded=true]{background-color:oklch(from currentColor l c h / .1);text-decoration:none}}.media-default-skin .media-button--icon{aspect-ratio:1;width:2.25rem;padding:0;display:grid;&:active{scale:.9}& .media-icon{transition-behavior:allow-discrete;filter:drop-shadow(0 1px 0 var(--media-current-shadow-color));grid-area:1/1;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out}}.media-default-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:10px;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}}.media-default-skin .media-button--playback-rate{font-variant-numeric:tabular-nums;padding:0;&:after{content:attr(data-rate) \\\"×\\\";width:4ch}&[data-inline-rate-label]:after{content:none}}.media-default-skin .media-button--live{aspect-ratio:auto;text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:.4rem;width:auto;padding:.5rem .75rem;font-size:.75rem;font-weight:600;line-height:1;display:inline-flex;&:before{content:\\\"\\\";background-color:oklch(from currentColor l c h / .4);border-radius:50%;flex-shrink:0;width:.5rem;height:.5rem;transition:background-color .15s ease-out;display:inline-block}&[data-live-edge]:before{background-color:oklch(65% .22 27)}}.media-default-skin .media-button-group{align-items:center;gap:.075rem;display:flex;@container media-root (width>42rem){gap:.125rem}}.media-default-skin .media-icon__container{position:relative}.media-default-skin .media-icon{width:var(--media-icon-size);height:var(--media-icon-size);flex-shrink:0}.media-default-skin .media-icon--flipped{scale:-1 1}.media-default-skin .media-popover.media-menu{box-sizing:border-box;min-width:min(6rem, var(--media-popover-available-width,6rem));max-width:var(--media-popover-available-width,none);max-height:var(--media-popover-available-height,none);overscroll-behavior:none;border-radius:1.25rem;padding:.375rem;overflow:auto;&:before{display:none}}.media-default-skin .media-popover.media-menu .media-menu__group{flex-direction:column;gap:.125rem;display:flex;position:relative;&:before{position-anchor:--media-menu-item-highlight-anchor;inset:anchor(inside);pointer-events:none;content:\\\"\\\";background-color:oklch(from currentColor l c h / .1);border-radius:3.40282e38px;transition:inset .1s ease-in-out;position:absolute}@supports not (top:anchor(top)){&:before{display:none}}}.media-default-skin .media-popover.media-menu .media-menu__item{font-variant-numeric:tabular-nums;min-height:2rem;color:inherit;cursor:pointer;outline-offset:-2px;border-radius:3.40282e38px;outline:2px solid #0000;justify-content:space-between;align-items:center;gap:.5rem;padding:0 .75rem;display:flex;&:hover,&[data-highlighted]{anchor-name:--media-menu-item-highlight-anchor}@supports not (top:anchor(top)){&:hover,&[data-highlighted]{background-color:oklch(from currentColor l c h / .1)}}&:focus-visible{outline-offset:2px;outline-color:currentColor}&[aria-checked=true] .media-menu__indicator{opacity:1}&[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.5}}.media-default-skin .media-popover.media-menu .media-menu__indicator{opacity:0;flex-shrink:0;margin-right:-.25rem}.media-default-skin .media-popover.media-menu .media-menu__indicator .media-icon{filter:drop-shadow(0 1px 0 var(--media-current-shadow-color))}.media-default-skin .media-slider{cursor:pointer;border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:2rem}&[data-orientation=vertical]{width:2rem;height:5rem}}.media-default-skin .media-slider__track{user-select:none;border-radius:inherit;isolation:isolate;position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.25rem}&[data-orientation=vertical]{width:.25rem;height:100%}}.media-default-skin .media-slider__thumb{z-index:10;user-select:none;outline-offset:-4px;width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--media-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;background-color:currentColor;border-radius:3.40282e38px;outline:4px solid #0000;transition-property:opacity,height,width,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;translate:-50% -50%;&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{top:calc(100% - var(--media-slider-fill));left:50%}&:hover,&:focus{outline-color:oklch(from currentColor l c h / .25);outline-offset:0}&:after{content:\\\"\\\";border-radius:inherit;transition-property:opacity,scale;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;inset:-4px;box-shadow:0 0 0 2px oklch(100% 0 0)}&:not(:focus-visible):after{opacity:0;scale:.5}}.media-default-skin .media-slider:active .media-slider__thumb,.media-default-skin .media-slider__thumb--persistent{width:.75rem;height:.75rem}.media-default-skin .media-slider:hover .media-slider__thumb,.media-default-skin .media-slider__thumb:focus-visible,.media-default-skin .media-slider__thumb--persistent{opacity:1}.media-default-skin .media-slider__buffer,.media-default-skin .media-slider__fill{pointer-events:none;border-radius:inherit;position:absolute}.media-default-skin .media-slider__buffer[data-orientation=horizontal],.media-default-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-default-skin .media-slider__buffer[data-orientation=vertical],.media-default-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-default-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-default-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=horizontal]{left:var(--media-slider-pointer)}.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=vertical]{top:calc(100% - var(--media-slider-pointer))}.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=horizontal]{width:var(--media-slider-pointer)}.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=vertical]{height:var(--media-slider-pointer)}.media-default-skin .media-popover,.media-default-skin .media-tooltip{color:inherit;filter:blur();transition-timing-function:var(--media-popup-transition-timing-function);transition-duration:var(--media-popup-transition-duration);border:0;margin:0;transition-property:scale,opacity,filter;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);scale:.85}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}&:before{pointer-events:inherit;content:\\\"\\\";position:absolute}&[data-side=top]:before,&[data-side=bottom]:before{width:100%;inset-inline:0}&[data-side=top]:before{top:100%}&[data-side=bottom]:before{bottom:100%}&[data-side=left]:before,&[data-side=right]:before{height:100%;inset-block:0}&[data-side=left]:before{left:100%}&[data-side=right]:before{right:100%}}.media-default-skin .media-popover{&[data-side=top]:before,&[data-side=bottom]:before{height:var(--media-popover-side-offset)}&[data-side=left]:before,&[data-side=right]:before{width:var(--media-popover-side-offset)}}.media-default-skin .media-popover--volume{border-radius:3.40282e38px;padding:.75rem 0;&:has(media-volume-slider[data-availability=unsupported]){display:none}}.media-default-skin .media-tooltip{white-space:nowrap;border-radius:3.40282e38px;padding:.25rem .625rem;font-size:.75rem;&[data-side=top]:before,&[data-side=bottom]:before{height:var(--media-tooltip-side-offset)}&[data-side=left]:before,&[data-side=right]:before{width:var(--media-tooltip-side-offset)}}.media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high{opacity:1;display:block}.media-default-skin--audio{--media-surface-background-color:oklch(100% 0 0/.5);--media-surface-inner-border-color:oklch(100% 0 0/.1);--media-surface-outer-border-color:oklch(0% 0 0/.05);--media-surface-shadow-color:oklch(0% 0 0/.15);--media-surface-backdrop-filter:blur(16px) saturate(1.5);--media-text-color:var(--media-color-primary,oklch(0% 0 0));--media-error-dialog-transition-duration:.25s;--media-error-dialog-transition-delay:.1s;--media-popup-transition-duration:.1s;--media-popup-transition-timing-function:ease-out;--media-tooltip-side-offset:.75rem;--media-tooltip-boundary-offset:.75rem;--media-popover-side-offset:.75rem;--media-popover-boundary-offset:.75rem;@media (prefers-reduced-motion:reduce){--media-error-dialog-transition-duration:50ms;--media-error-dialog-transition-delay:0s;--media-popup-transition-duration:0s}@media (prefers-color-scheme:dark){--media-surface-background-color:oklch(0% 0 0/.4);--media-text-color:var(--media-color-primary,oklch(100% 0 0))}@media (prefers-reduced-transparency:reduce) or (prefers-contrast:more){--media-surface-background-color:oklch(100% 0 0);--media-surface-outer-border-color:oklch(0% 0 0/.05)}@media (prefers-color-scheme:dark) and ((prefers-reduced-transparency:reduce) or (prefers-contrast:more)){--media-surface-background-color:oklch(0% 0 0);--media-surface-inner-border-color:oklch(100% 0 0/.2);--media-surface-outer-border-color:transparent}}.media-default-skin--audio .media-error__dialog{z-index:20;color:var(--media-text-color);background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);transition-delay:var(--media-error-dialog-transition-delay);transition-timing-function:ease-out;transition-duration:var(--media-error-dialog-transition-duration);border-radius:3.40282e38px;align-items:center;gap:.75rem;padding-inline:1.25rem .125rem;transition-property:opacity,filter;display:flex;position:absolute;inset:0}.media-default-skin .media-error[data-starting-style] .media-error__dialog,.media-default-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;filter:blur(4px)}.media-default-skin .media-error[data-ending-style] .media-error__dialog{transition-delay:0s}.media-default-skin--audio .media-error__content{flex:1;align-items:center;gap:.5rem;display:flex}.media-default-skin--audio .media-controls{color:var(--media-text-color)}.media-default-skin--audio .media-slider__track{background-color:oklch(0% 0 0/.1);@media (prefers-color-scheme:dark){background-color:oklch(100% 0 0/.2);box-shadow:0 0 0 1px oklch(0% 0 0/.05)}}\";","import { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './skin.css?inline';\n\n// Register the player, container, and all UI custom elements.\nimport './ui';\n\nconst SEEK_TIME = 10;\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"media-default-skin media-default-skin--audio\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-error-dialog class=\"media-error\">\n <div class=\"media-error__dialog\">\n <div class=\"media-error__content\">\n <media-alert-dialog-title class=\"media-error__title\">Something went wrong.</media-alert-dialog-title>\n <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n </div>\n <div class=\"media-error__actions\">\n <media-alert-dialog-close class=\"media-button media-button--subtle\">OK</media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <div class=\"media-surface media-controls\">\n <media-tooltip-group>\n <div class=\"media-button-group\">\n <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" boundary=\"viewport\" class=\"media-surface media-tooltip\"></media-tooltip>\n\n <media-seek-button commandfor=\"seek-backward-tooltip\" seconds=\"${-SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon media-icon--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\" boundary=\"viewport\" class=\"media-surface media-tooltip\"></media-tooltip>\n\n <media-seek-button commandfor=\"seek-forward-tooltip\" seconds=\"${SEEK_TIME}\" class=\"media-button media-button--subtle media-button--icon media-button--seek\">\n <span class=\"media-icon__container\">\n ${renderIcon('seek', { class: 'media-icon 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\" boundary=\"viewport\" class=\"media-surface media-tooltip\"></media-tooltip>\n </div>\n\n <div class=\"media-time-controls\">\n <media-time type=\"current\" class=\"media-time\"></media-time>\n <media-time-slider class=\"media-slider\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n </media-time-slider>\n <media-time type=\"duration\" class=\"media-time\"></media-time>\n </div>\n\n <div class=\"media-button-group\">\n <media-playback-rate-menu-trigger commandfor=\"playback-rate-menu\" class=\"media-button media-button--subtle media-button--icon media-button--playback-rate\"></media-playback-rate-menu-trigger>\n <media-playback-rate-menu id=\"playback-rate-menu\" side=\"top\" align=\"center\" boundary=\"viewport\" class=\"media-surface media-popover media-menu media-menu--playback-rate\">\n <media-playback-rate-options class=\"media-menu__group\">\n <template>\n <media-menu-radio-item class=\"media-menu__item\">\n <span data-part=\"label\"></span>\n <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n ${renderIcon('check', { class: 'media-icon' })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-playback-rate-options>\n </media-playback-rate-menu>\n\n <media-mute-button commandfor=\"audio-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n </media-mute-button>\n\n <media-popover id=\"audio-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" boundary=\"viewport\" 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 </div>\n </media-tooltip-group>\n </div>\n\n <!-- Hotkeys -->\n <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n <media-hotkey keys=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></media-hotkey>\n <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n <media-hotkey keys=\"<\" action=\"speedDown\"></media-hotkey>\n </media-container>\n `;\n}\n\nexport class AudioSkinElement extends SkinElement {\n static readonly tagName = 'audio-skin';\n static styles = createShadowStyle(styles);\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(AudioSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [AudioSkinElement.tagName]: AudioSkinElement;\n }\n}\n"],"mappings":"gNAAA,IAAA,EAAe,6rfCWf,SAAS,GAAkB,CACzB,MAAgB,yyBAAA,EAAA,UAAA,CAAA,MAAA,iCAAA,CAAA,CAAA,GAAA,EAAA,OAAA,CAAA,MAAA,8BAAA,CAAA,CAAA,GAAA,EAAA,QAAA,CAAA,MAAA,+BAAA,CAAA,CAAA,qUAAA,EAAA,OAAA,CAAA,MAAA,kDAAA,CAAA,CAAA,4XAAA,EAAA,OAAA,CAAA,MAAA,8BAAA,CAAA,CAAA,oxCAAA,EAAA,QAAA,CAAA,MAAA,aAAA,CAAA,CAAA,iQAAA,EAAA,aAAA,CAAA,MAAA,oCAAA,CAAA,CAAA,GAAA,EAAA,aAAA,CAAA,MAAA,oCAAA,CAAA,CAAA,GAAA,EAAA,cAAA,CAAA,MAAA,qCAAA,CAAA,CAAA,whDASlB,EANA,cAA+B,CAAA,qBACb,0DAEC,EAAc,GAAY,CAAA,GAGpB"}

package/cdn/background.dev.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { n as namedNodeMapToObject, t as MediaAttachMixin } from "./media-attach-mixin-CYoNe7Sh.js";
-import { M as ReactiveElement, O as MediaContainerElement, a as backgroundFeatures, k as MediaElement, t as createPlayer } from "./create-player-BKLw7l1a.js";
+import { n as namedNodeMapToObject, t as MediaAttachMixin } from "./media-attach-mixin-C1KQy-y8.js";
+import { A as MediaContainerElement, P as ReactiveElement, a as backgroundFeatures, j as MediaElement, t as createPlayer } from "./create-player-_WED6HtK.js";
 import { r as ensureGlobalStyle } from "./shadow-styles-DKXFMmyD.js";
-import { o as safeDefine } from "./context-0rI_P6jf.js";
+import { f as safeDefine } from "./predicate-Dqd8wbW6.js";
 //#region src/define/background/player.ts
 const { ProviderMixin } = createPlayer({ features: backgroundFeatures });
@@ -15,7 +15,7 @@ safeDefine(MediaContainerElement);
 //#endregion
 //#region inline-css:src/define/background/skin.js
-var skin_default = "background-video-player {\n  display: contents;\n}\n\nbackground-video-skin {\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  --media-object-fit: cover;\n  object-fit: var(--media-object-fit);\n}\n\nbackground-video-skin > background-video {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: inherit;\n}\n\nbackground-video-skin > img,\nbackground-video-skin > picture {\n  width: 100%;\n  height: 100%;\n  object-fit: inherit;\n}\n";
+var skin_default = "background-video-player {\n  display: contents;\n}\n\nbackground-video-skin {\n  --media-object-fit: cover;\n  position: relative;\n  display: block;\n  width: 100%;\n  min-width: 300px;\n  height: 100%;\n  min-height: 150px;\n  object-fit: var(--media-object-fit);\n}\n\nbackground-video-skin > background-video {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: inherit;\n}\n\nbackground-video-skin > img,\nbackground-video-skin > picture {\n  width: 100%;\n  height: 100%;\n  object-fit: inherit;\n}\n";
 //#endregion
 //#region src/define/background/skin.ts

package/cdn/background.dev.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"background.dev.js","names":["getTemplateHTML","styles"],"sources":["../src/define/background/player.ts","../inline-css:src/define/background/skin.js","../src/define/background/skin.ts","../src/media/background-video/index.ts","../src/define/media/background-video.ts"],"sourcesContent":["import { backgroundFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n features: backgroundFeatures,\n});\n\nexport class BackgroundVideoPlayerElement extends ProviderMixin(MediaElement) {\n static readonly tagName = 'background-video-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(BackgroundVideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [BackgroundVideoPlayerElement.tagName]: BackgroundVideoPlayerElement;\n }\n}\n","export default \"background-video-player {\\n display: contents;\\n}\\n\\nbackground-video-skin {\\n ~~display~~: ~~block~~;\\n position: relative;\\n width: 100%;\\n height: 100%;\\n ~~--media~~-~~object-fit~~: ~~cover~~;\\n object-fit: var(--media-object-fit);\\n}\\n\\nbackground-video-skin > background-video {\\n position: absolute;\\n inset: 0;\\n width: 100%;\\n height: 100%;\\n object-fit: inherit;\\n}\\n\\nbackground-video-skin > img,\\nbackground-video-skin > picture {\\n width: 100%;\\n height: 100%;\\n object-fit: inherit;\\n}\\n\";","import { ReactiveElement } from '@videojs/element';\nimport { ensureGlobalStyle, 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 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 ensureGlobalStyle(STYLES_ID, styles);\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","import type { Media } from '@videojs/core/dom';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nfunction getTemplateHTML(attrs: Record<string, string>) {\n return /html/ `\n <style>\n :host {\n position: relative;\n }\n\n video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: var(--media-object-fit, inherit);\n object-position: var(--media-object-position, 50% 50%);\n }\n </style>\n <slot></slot>\n <video ${serializeAttributes(attrs)}></video>\n `;\n}\n\n// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends MediaAttachMixin(HTMLElement) {\n static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n static getTemplateHTML = getTemplateHTML;\n static get observedAttributes() {\n return ['src'];\n }\n\n constructor() {\n super();\n\n if (!this.shadowRoot) {\n this.attachShadow((this.constructor as typeof BackgroundVideo).shadowRootOptions);\n\n const attrs = {\n ...namedNodeMapToObject(this.attributes),\n ...(!this.hasAttribute('nomuted') && { muted: '' }),\n ...(!this.hasAttribute('noloop') && { loop: '' }),\n ...(!this.hasAttribute('noautoplay') && { autoplay: '' }),\n playsinline: '',\n disableremoteplayback: '',\n disablepictureinpicture: '',\n };\n\n this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n }\n\n // Neither Chrome or Firefox support setting the muted attribute\n // after using document.createElement.\n // Get around this by setting the muted property manually.\n this.target!.muted = !this.hasAttribute('nomuted');\n }\n\n // Register the inner <video> (not `this`) with the provider.\n getMediaTarget(): Media \| null {\n return this.target;\n }\n\n attributeChangedCallback(attrName: string, oldValue: string \| null, newValue: string \| null): void {\n if (attrName === 'src' && oldValue !== newValue) {\n this.target!.src = newValue ?? '';\n }\n }\n\n get target(): HTMLVideoElement \| null {\n return (\n this.querySelector(':scope > [slot=media]') ??\n this.querySelector('video') ??\n this.shadowRoot?.querySelector('video') ??\n null\n );\n }\n}\n\nconst VideoAttributes = [\n 'autoplay',\n 'controls',\n 'controlslist',\n 'crossorigin',\n 'disablepictureinpicture',\n 'disableremoteplayback',\n 'loop',\n 'muted',\n 'playsinline',\n 'preload',\n] as const;\n\nfunction serializeAttributes(attrs: Record<string, string>): string {\n let html = '';\n for (const key in attrs) {\n // Skip forwarding non native video attributes.\n if (!VideoAttributes.includes(key as any)) continue;\n\n const value = attrs[key];\n if (value === '') html += ` ${key}`;\n else html += ` ${key}=\"${value}\"`;\n }\n return html;\n}\n","import { BackgroundVideo } from '../../media/background-video';\nimport { safeDefine } from '../safe-define';\n\nexport class BackgroundVideoElement extends BackgroundVideo {\n static readonly tagName = 'background-video';\n}\n\nsafeDefine(BackgroundVideoElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [BackgroundVideoElement.tagName]: BackgroundVideoElement;\n }\n}\n"],"mappings":";;;;;;AAMA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,oBACX,CAAC;AAEF,IAAa,+BAAb,cAAkD,cAAc,aAAa,CAAC;;iBAClD;;;AAI5B,WAAW,6BAA6B;AACxC,WAAW,sBAAsB;;;;AChBjC,mBAAe;;;;ACKf,MAAM,YAAY;AAElB,SAASA,kBAAgB,QAAgC;AACvD,QAAgB;;;;;;;;AASlB,IAAa,6BAAb,cAAgD,gBAAgB;;iBACpC;;;2BACC,EAAE,MAAM,QAA0B;;;yBACpCA;;CAEzB,cAAc;AACZ,SAAO;AAEP,oBAAkB,WAAWC,aAAO;AAEpC,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAkD,kBAAkB;AAC5F,QAAK,WAAY,YAAYD,kBAAgB,qBAAqB,KAAK,WAAW,CAAC;;;;AAKzF,WAAW,2BAA2B;;;;AC9BtC,SAAS,gBAAgB,OAA+B;AACtD,QAAgB;;;;;;;;;;;;;;;;aAgBL,oBAAoB,MAAM,CAAC;;;AAKxC,IAAa,kBAAb,cAAqC,iBAAiB,YAAY,CAAC;;2BACtC,EAAE,MAAM,QAA0B;;;yBACpC;;CACzB,WAAW,qBAAqB;AAC9B,SAAO,CAAC,MAAM;;CAGhB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;GAEjF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,WAAW;IACxC,GAAI,CAAC,KAAK,aAAa,UAAU,IAAI,EAAE,OAAO,IAAI;IAClD,GAAI,CAAC,KAAK,aAAa,SAAS,IAAI,EAAE,MAAM,IAAI;IAChD,GAAI,CAAC,KAAK,aAAa,aAAa,IAAI,EAAE,UAAU,IAAI;IACxD,aAAa;IACb,uBAAuB;IACvB,yBAAyB;IAC1B;AAED,QAAK,WAAY,YAAY,gBAAgB,MAAM;;AAMrD,OAAK,OAAQ,QAAQ,CAAC,KAAK,aAAa,UAAU;;CAIpD,iBAA+B;AAC7B,SAAO,KAAK;;CAGd,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,OAAQ,MAAM,YAAY;;CAInC,IAAI,SAAkC;AACpC,SACE,KAAK,cAAc,wBAAwB,IAC3C,KAAK,cAAc,QAAQ,IAC3B,KAAK,YAAY,cAAc,QAAQ,IACvC;;;AAKN,MAAM,kBAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,oBAAoB,OAAuC;CAClE,IAAI,OAAO;AACX,MAAK,MAAM,OAAO,OAAO;AAEvB,MAAI,CAAC,gBAAgB,SAAS,IAAW,CAAE;EAE3C,MAAM,QAAQ,MAAM;AACpB,MAAI,UAAU,GAAI,SAAQ,IAAI;MACzB,SAAQ,IAAI,IAAI,IAAI,MAAM;;AAEjC,QAAO;;;;;ACnGT,IAAa,yBAAb,cAA4C,gBAAgB;;iBAChC;;;AAG5B,WAAW,uBAAuB"}
1	+ {"version":3,"file":"background.dev.js","names":["getTemplateHTML","styles"],"sources":["../src/define/background/player.ts","../inline-css:src/define/background/skin.js","../src/define/background/skin.ts","../src/media/background-video/index.ts","../src/define/media/background-video.ts"],"sourcesContent":["import { backgroundFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n features: backgroundFeatures,\n});\n\nexport class BackgroundVideoPlayerElement extends ProviderMixin(MediaElement) {\n static readonly tagName = 'background-video-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(BackgroundVideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [BackgroundVideoPlayerElement.tagName]: BackgroundVideoPlayerElement;\n }\n}\n","export default \"background-video-player {\\n display: contents;\\n}\\n\\nbackground-video-skin {\\n --media-object-fit: cover;\\n position: relative;\\n display: block;\\n width: 100%;\\n min-width: 300px;\\n height: 100%;\\n min-height: 150px;\\n object-fit: var(--media-object-fit);\\n}\\n\\nbackground-video-skin > background-video {\\n position: absolute;\\n inset: 0;\\n width: 100%;\\n height: 100%;\\n object-fit: inherit;\\n}\\n\\nbackground-video-skin > img,\\nbackground-video-skin > picture {\\n width: 100%;\\n height: 100%;\\n object-fit: inherit;\\n}\\n\";","import { ReactiveElement } from '@videojs/element';\nimport { ensureGlobalStyle, 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 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 ensureGlobalStyle(STYLES_ID, styles);\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","import type { Media } from '@videojs/core/dom';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nfunction getTemplateHTML(attrs: Record<string, string>) {\n return /html/ `\n <style>\n :host {\n position: relative;\n }\n\n video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: var(--media-object-fit, inherit);\n object-position: var(--media-object-position, 50% 50%);\n }\n </style>\n <slot></slot>\n <video ${serializeAttributes(attrs)}></video>\n `;\n}\n\n// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends MediaAttachMixin(HTMLElement) {\n static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n static getTemplateHTML = getTemplateHTML;\n static get observedAttributes() {\n return ['src'];\n }\n\n constructor() {\n super();\n\n if (!this.shadowRoot) {\n this.attachShadow((this.constructor as typeof BackgroundVideo).shadowRootOptions);\n\n const attrs = {\n ...namedNodeMapToObject(this.attributes),\n ...(!this.hasAttribute('nomuted') && { muted: '' }),\n ...(!this.hasAttribute('noloop') && { loop: '' }),\n ...(!this.hasAttribute('noautoplay') && { autoplay: '' }),\n playsinline: '',\n disableremoteplayback: '',\n disablepictureinpicture: '',\n };\n\n this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n }\n\n // Neither Chrome or Firefox support setting the muted attribute\n // after using document.createElement.\n // Get around this by setting the muted property manually.\n this.target!.muted = !this.hasAttribute('nomuted');\n }\n\n // Register the inner <video> (not `this`) with the provider.\n getMediaTarget(): Media \| null {\n return this.target;\n }\n\n attributeChangedCallback(attrName: string, oldValue: string \| null, newValue: string \| null): void {\n if (attrName === 'src' && oldValue !== newValue) {\n this.target!.src = newValue ?? '';\n }\n }\n\n get target(): HTMLVideoElement \| null {\n return (\n this.querySelector(':scope > [slot=media]') ??\n this.querySelector('video') ??\n this.shadowRoot?.querySelector('video') ??\n null\n );\n }\n}\n\nconst VideoAttributes = [\n 'autoplay',\n 'controls',\n 'controlslist',\n 'crossorigin',\n 'disablepictureinpicture',\n 'disableremoteplayback',\n 'loop',\n 'muted',\n 'playsinline',\n 'preload',\n] as const;\n\nfunction serializeAttributes(attrs: Record<string, string>): string {\n let html = '';\n for (const key in attrs) {\n // Skip forwarding non native video attributes.\n if (!VideoAttributes.includes(key as any)) continue;\n\n const value = attrs[key];\n if (value === '') html += ` ${key}`;\n else html += ` ${key}=\"${value}\"`;\n }\n return html;\n}\n","import { BackgroundVideo } from '../../media/background-video';\nimport { safeDefine } from '../safe-define';\n\nexport class BackgroundVideoElement extends BackgroundVideo {\n static readonly tagName = 'background-video';\n}\n\nsafeDefine(BackgroundVideoElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [BackgroundVideoElement.tagName]: BackgroundVideoElement;\n }\n}\n"],"mappings":";;;;;;AAMA,MAAM,EAAE,kBAAkB,aAAa,EACrC,UAAU,oBACX,CAAC;AAEF,IAAa,+BAAb,cAAkD,cAAc,aAAa,CAAC;;iBAClD;;;AAI5B,WAAW,6BAA6B;AACxC,WAAW,sBAAsB;;;;AChBjC,mBAAe;;;;ACKf,MAAM,YAAY;AAElB,SAASA,kBAAgB,QAAgC;AACvD,QAAgB;;;;;;;;AASlB,IAAa,6BAAb,cAAgD,gBAAgB;;iBACpC;;;2BACC,EAAE,MAAM,QAA0B;;;yBACpCA;;CAEzB,cAAc;AACZ,SAAO;AAEP,oBAAkB,WAAWC,aAAO;AAEpC,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAkD,kBAAkB;AAC5F,QAAK,WAAY,YAAYD,kBAAgB,qBAAqB,KAAK,WAAW,CAAC;;;;AAKzF,WAAW,2BAA2B;;;;AC9BtC,SAAS,gBAAgB,OAA+B;AACtD,QAAgB;;;;;;;;;;;;;;;;aAgBL,oBAAoB,MAAM,CAAC;;;AAKxC,IAAa,kBAAb,cAAqC,iBAAiB,YAAY,CAAC;;2BACtC,EAAE,MAAM,QAA0B;;;yBACpC;;CACzB,WAAW,qBAAqB;AAC9B,SAAO,CAAC,MAAM;;CAGhB,cAAc;AACZ,SAAO;AAEP,MAAI,CAAC,KAAK,YAAY;AACpB,QAAK,aAAc,KAAK,YAAuC,kBAAkB;GAEjF,MAAM,QAAQ;IACZ,GAAG,qBAAqB,KAAK,WAAW;IACxC,GAAI,CAAC,KAAK,aAAa,UAAU,IAAI,EAAE,OAAO,IAAI;IAClD,GAAI,CAAC,KAAK,aAAa,SAAS,IAAI,EAAE,MAAM,IAAI;IAChD,GAAI,CAAC,KAAK,aAAa,aAAa,IAAI,EAAE,UAAU,IAAI;IACxD,aAAa;IACb,uBAAuB;IACvB,yBAAyB;IAC1B;AAED,QAAK,WAAY,YAAY,gBAAgB,MAAM;;AAMrD,OAAK,OAAQ,QAAQ,CAAC,KAAK,aAAa,UAAU;;CAIpD,iBAA+B;AAC7B,SAAO,KAAK;;CAGd,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,OAAQ,MAAM,YAAY;;CAInC,IAAI,SAAkC;AACpC,SACE,KAAK,cAAc,wBAAwB,IAC3C,KAAK,cAAc,QAAQ,IAC3B,KAAK,YAAY,cAAc,QAAQ,IACvC;;;AAKN,MAAM,kBAAkB;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,oBAAoB,OAAuC;CAClE,IAAI,OAAO;AACX,MAAK,MAAM,OAAO,OAAO;AAEvB,MAAI,CAAC,gBAAgB,SAAS,IAAW,CAAE;EAE3C,MAAM,QAAQ,MAAM;AACpB,MAAI,UAAU,GAAI,SAAQ,IAAI;MACzB,SAAQ,IAAI,IAAI,IAAI,MAAM;;AAEjC,QAAO;;;;;ACnGT,IAAa,yBAAb,cAA4C,gBAAgB;;iBAChC;;;AAG5B,WAAW,uBAAuB"}

package/cdn/background.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{n as e,t}from"./media-attach-mixin-C2wz0Qbd.js";import{M as n,O as r,a as i,k as a,t as o}from"./create-player-B-PGzhq2.js";import{r as s}from"./shadow-styles-BYZ6q3Q4.js";import{o as c}from"./context-CEFisYD0.js";const{ProviderMixin:l}=o({features:i});c(class extends l(a){static{this.tagName=`background-video-player`}}),c(r);var u=`background-video-player{display:contents}background-video-skin{--media-object-fit:cover;object-fit:var(--media-object-fit);width:100%;height:100%;display:block;position:relative}background-video-skin>background-video{object-fit:inherit;width:100%;height:100%;position:absolute;inset:0}background-video-skin>img,background-video-skin>picture{object-fit:inherit;width:100%;height:100%}`;function d(e){return`<media-container><slot name="media"></slot><slot></slot></media-container>`}c(class extends n{static{this.tagName=`background-video-skin`}static{this.shadowRootOptions={mode:`open`}}static{this.getTemplateHTML=d}constructor(){super(),s(`__media-background-styles`,u),this.shadowRoot||(this.attachShadow(this.constructor.shadowRootOptions),this.shadowRoot.innerHTML=d(e(this.attributes)))}});function f(e){return`<style> :host { position: relative; } video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--media-object-fit, inherit); object-position: var(--media-object-position, 50% 50%); } </style><slot></slot><video ${h(e)}></video>`}var p=class extends t(HTMLElement){static{this.shadowRootOptions={mode:`open`}}static{this.getTemplateHTML=f}static get observedAttributes(){return[`src`]}constructor(){if(super(),!this.shadowRoot){this.attachShadow(this.constructor.shadowRootOptions);let t={...e(this.attributes),...!this.hasAttribute(`nomuted`)&&{muted:``},...!this.hasAttribute(`noloop`)&&{loop:``},...!this.hasAttribute(`noautoplay`)&&{autoplay:``},playsinline:``,disableremoteplayback:``,disablepictureinpicture:``};this.shadowRoot.innerHTML=f(t)}this.target.muted=!this.hasAttribute(`nomuted`)}getMediaTarget(){return this.target}attributeChangedCallback(e,t,n){e===`src`&&t!==n&&(this.target.src=n??``)}get target(){return this.querySelector(`:scope > [slot=media]`)??this.querySelector(`video`)??this.shadowRoot?.querySelector(`video`)??null}};const m=[`autoplay`,`controls`,`controlslist`,`crossorigin`,`disablepictureinpicture`,`disableremoteplayback`,`loop`,`muted`,`playsinline`,`preload`];function h(e){let t=``;for(let n in e){if(!m.includes(n))continue;let r=e[n];r===``?t+=` ${n}`:t+=` ${n}="${r}"`}return t}c(class extends p{static{this.tagName=`background-video`}});
+import{n as e,t}from"./media-attach-mixin-0gzahJxP.js";import{A as n,P as r,a as i,j as a,t as o}from"./create-player-B2W5yr5I.js";import{r as s}from"./shadow-styles-BYZ6q3Q4.js";import{f as c}from"./predicate-Dxl3IuYh.js";const{ProviderMixin:l}=o({features:i});c(class extends l(a){static{this.tagName=`background-video-player`}}),c(n);var u=`background-video-player{display:contents}background-video-skin{--media-object-fit:cover;object-fit:var(--media-object-fit);width:100%;min-width:300px;height:100%;min-height:150px;display:block;position:relative}background-video-skin>background-video{object-fit:inherit;width:100%;height:100%;position:absolute;inset:0}background-video-skin>img,background-video-skin>picture{object-fit:inherit;width:100%;height:100%}`;function d(e){return`<media-container><slot name="media"></slot><slot></slot></media-container>`}c(class extends r{static{this.tagName=`background-video-skin`}static{this.shadowRootOptions={mode:`open`}}static{this.getTemplateHTML=d}constructor(){super(),s(`__media-background-styles`,u),this.shadowRoot||(this.attachShadow(this.constructor.shadowRootOptions),this.shadowRoot.innerHTML=d(e(this.attributes)))}});function f(e){return`<style> :host { position: relative; } video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--media-object-fit, inherit); object-position: var(--media-object-position, 50% 50%); } </style><slot></slot><video ${h(e)}></video>`}var p=class extends t(HTMLElement){static{this.shadowRootOptions={mode:`open`}}static{this.getTemplateHTML=f}static get observedAttributes(){return[`src`]}constructor(){if(super(),!this.shadowRoot){this.attachShadow(this.constructor.shadowRootOptions);let t={...e(this.attributes),...!this.hasAttribute(`nomuted`)&&{muted:``},...!this.hasAttribute(`noloop`)&&{loop:``},...!this.hasAttribute(`noautoplay`)&&{autoplay:``},playsinline:``,disableremoteplayback:``,disablepictureinpicture:``};this.shadowRoot.innerHTML=f(t)}this.target.muted=!this.hasAttribute(`nomuted`)}getMediaTarget(){return this.target}attributeChangedCallback(e,t,n){e===`src`&&t!==n&&(this.target.src=n??``)}get target(){return this.querySelector(`:scope > [slot=media]`)??this.querySelector(`video`)??this.shadowRoot?.querySelector(`video`)??null}};const m=[`autoplay`,`controls`,`controlslist`,`crossorigin`,`disablepictureinpicture`,`disableremoteplayback`,`loop`,`muted`,`playsinline`,`preload`];function h(e){let t=``;for(let n in e){if(!m.includes(n))continue;let r=e[n];r===``?t+=` ${n}`:t+=` ${n}="${r}"`}return t}c(class extends p{static{this.tagName=`background-video`}});
 //# sourceMappingURL=background.js.map

package/cdn/background.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"background.js","names":[],"sources":["../src/define/background/player.ts","../inline-css:src/define/background/skin.js","../src/define/background/skin.ts","../src/media/background-video/index.ts","../src/define/media/background-video.ts"],"sourcesContent":["import { backgroundFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n features: backgroundFeatures,\n});\n\nexport class BackgroundVideoPlayerElement extends ProviderMixin(MediaElement) {\n static readonly tagName = 'background-video-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(BackgroundVideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [BackgroundVideoPlayerElement.tagName]: BackgroundVideoPlayerElement;\n }\n}\n","export default \"background-video-player{display:contents}background-video-skin{--media-object-fit:cover;object-fit:var(--media-object-fit);width:100%;height:100%;display:block;position:relative}background-video-skin>background-video{object-fit:inherit;width:100%;height:100%;position:absolute;inset:0}background-video-skin>img,background-video-skin>picture{object-fit:inherit;width:100%;height:100%}\";","import { ReactiveElement } from '@videojs/element';\nimport { ensureGlobalStyle, 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 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 ensureGlobalStyle(STYLES_ID, styles);\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","import type { Media } from '@videojs/core/dom';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nfunction getTemplateHTML(attrs: Record<string, string>) {\n return /html/ `\n <style>\n :host {\n position: relative;\n }\n\n video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: var(--media-object-fit, inherit);\n object-position: var(--media-object-position, 50% 50%);\n }\n </style>\n <slot></slot>\n <video ${serializeAttributes(attrs)}></video>\n `;\n}\n\n// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends MediaAttachMixin(HTMLElement) {\n static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n static getTemplateHTML = getTemplateHTML;\n static get observedAttributes() {\n return ['src'];\n }\n\n constructor() {\n super();\n\n if (!this.shadowRoot) {\n this.attachShadow((this.constructor as typeof BackgroundVideo).shadowRootOptions);\n\n const attrs = {\n ...namedNodeMapToObject(this.attributes),\n ...(!this.hasAttribute('nomuted') && { muted: '' }),\n ...(!this.hasAttribute('noloop') && { loop: '' }),\n ...(!this.hasAttribute('noautoplay') && { autoplay: '' }),\n playsinline: '',\n disableremoteplayback: '',\n disablepictureinpicture: '',\n };\n\n this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n }\n\n // Neither Chrome or Firefox support setting the muted attribute\n // after using document.createElement.\n // Get around this by setting the muted property manually.\n this.target!.muted = !this.hasAttribute('nomuted');\n }\n\n // Register the inner <video> (not `this`) with the provider.\n getMediaTarget(): Media \| null {\n return this.target;\n }\n\n attributeChangedCallback(attrName: string, oldValue: string \| null, newValue: string \| null): void {\n if (attrName === 'src' && oldValue !== newValue) {\n this.target!.src = newValue ?? '';\n }\n }\n\n get target(): HTMLVideoElement \| null {\n return (\n this.querySelector(':scope > [slot=media]') ??\n this.querySelector('video') ??\n this.shadowRoot?.querySelector('video') ??\n null\n );\n }\n}\n\nconst VideoAttributes = [\n 'autoplay',\n 'controls',\n 'controlslist',\n 'crossorigin',\n 'disablepictureinpicture',\n 'disableremoteplayback',\n 'loop',\n 'muted',\n 'playsinline',\n 'preload',\n] as const;\n\nfunction serializeAttributes(attrs: Record<string, string>): string {\n let html = '';\n for (const key in attrs) {\n // Skip forwarding non native video attributes.\n if (!VideoAttributes.includes(key as any)) continue;\n\n const value = attrs[key];\n if (value === '') html += ` ${key}`;\n else html += ` ${key}=\"${value}\"`;\n }\n return html;\n}\n","import { BackgroundVideo } from '../../media/background-video';\nimport { safeDefine } from '../safe-define';\n\nexport class BackgroundVideoElement extends BackgroundVideo {\n static readonly tagName = 'background-video';\n}\n\nsafeDefine(BackgroundVideoElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [BackgroundVideoElement.tagName]: BackgroundVideoElement;\n }\n}\n"],"mappings":"~~6NAMA~~,KAAM,CAAE,iBAAkB,EAAa,CACrC,SAAU,EACX,CAAC,CAOF,EALA,cAAkD,EAAc,EAAa,AAAC,qBAClD,4BAIY,CACxC,EAAW,EAAsB,CChBjC,IAAA,EAAe,~~kYCOf~~,SAAS,EAAgB,EAAgC,CACvD,MAAgB,6EAoBlB,EAjBA,cAA+B,CAAA,qBACb,sDACG,CAAA,KAAA,OAAA,6BAClB,gBAGH,OAAO,CAEL,EAAO,4BAAsB,EAAO,mBAGpC,KAAA,aAAc,KAAA,YAAA,kBAAA,CACZ,KAAO,WAAA,UAAA,EAAA,EAAA,KAAA,WAAA,CAAA,IAKmB,CCxB9B,SAAS,EAAgB,EAA+B,CACtD,MAAgB,8OAAA,EAAA,EAAA,CAAA,WAIlB,IAAM,EAAN,cAAM,EAAA,YAAA,AAAA,yEAEM,EACV,WAAM,oBAAkB,CACtB,MAAI,CAAA,MAAQ,CAGd,aAAa,CAGX,GAFA,OAAI,CAEF,CAAA,KAAK,WAAA,CACN,KAAM,aAAK,KAAA,YAAA,kBAAA,CAEb,IAAA,EAAA,CACH,GAAA,EAAA,KAAA,WAAA,8CAEQ,GAAC,CAAA,KAAO,aAAA,SAAwB,EAAC,CAAK,KAAM,GAAC,CAC9C,GAAK,CAAC,KAAA,aAAgB,aAAQ,EAAA,CAAA,SAAiB,GAAA,CAC9C,YAAC,GACD,sBAAmB,GACnB,wBAAyB,GAC7B,gFAYF,gBAA8B,CAC5B,OAAO,KAAE,OAGX,yBAAM,EAA2B,EAAA,EAAA,CAC5B,IAAA,OAAA,IAAA,IAAA,KAAA,OAAA,IAAA,GAAA,IAKL,IAAI,QAAkC,CACpC,OACE,KAAK,cAAc,wBAAmB,EACxC,KAAK,cAAgB,QAAM,EAC7B,KAAA,YAAA,cAAA,QAAA,EAAA,gBAOA,WACA,WACA,eACA,cACA,kDAEA,OACA,QACA,cACA,UACD,CAED,SAAK,EAAA,EAAA,CACH,IAAA,EAAA,GACF,IAAA,IAAA,KAAA,EAAA,CAEA,GAAM,CAAA,EAAkB,SAAA,EAAA,CAAA,SAErB,IAAA,EAAS,EAAA,GACT,IAAa,GAAA,GAAA,IAAA,IACb,GAAY,IAAA,EAAA,IAAA,EAAA,GAEb,OAAC,EC9EH,EAJA,cAA4C,CAAgB,qBAChC,qBAGM"}
1	+ {"version":3,"file":"background.js","names":[],"sources":["../src/define/background/player.ts","../inline-css:src/define/background/skin.js","../src/define/background/skin.ts","../src/media/background-video/index.ts","../src/define/media/background-video.ts"],"sourcesContent":["import { backgroundFeatures } from '@videojs/core/dom';\nimport { MediaContainerElement } from '../../media/container-element';\nimport { createPlayer } from '../../player/create-player';\nimport { MediaElement } from '../../ui/media-element';\nimport { safeDefine } from '../safe-define';\n\nconst { ProviderMixin } = createPlayer({\n features: backgroundFeatures,\n});\n\nexport class BackgroundVideoPlayerElement extends ProviderMixin(MediaElement) {\n static readonly tagName = 'background-video-player';\n}\n\n// Provider must be defined before consumer for context handshake during upgrade.\nsafeDefine(BackgroundVideoPlayerElement);\nsafeDefine(MediaContainerElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [BackgroundVideoPlayerElement.tagName]: BackgroundVideoPlayerElement;\n }\n}\n","export default \"background-video-player{display:contents}background-video-skin{--media-object-fit:cover;object-fit:var(--media-object-fit);width:100%;min-width:300px;height:100%;min-height:150px;display:block;position:relative}background-video-skin>background-video{object-fit:inherit;width:100%;height:100%;position:absolute;inset:0}background-video-skin>img,background-video-skin>picture{object-fit:inherit;width:100%;height:100%}\";","import { ReactiveElement } from '@videojs/element';\nimport { ensureGlobalStyle, 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 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 ensureGlobalStyle(STYLES_ID, styles);\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","import type { Media } from '@videojs/core/dom';\nimport { namedNodeMapToObject } from '@videojs/utils/dom';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nfunction getTemplateHTML(attrs: Record<string, string>) {\n return /html/ `\n <style>\n :host {\n position: relative;\n }\n\n video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: var(--media-object-fit, inherit);\n object-position: var(--media-object-position, 50% 50%);\n }\n </style>\n <slot></slot>\n <video ${serializeAttributes(attrs)}></video>\n `;\n}\n\n// Don't extend CustomMediaMixin to save some bytes, background videos don't need the full Media API.\nexport class BackgroundVideo extends MediaAttachMixin(HTMLElement) {\n static shadowRootOptions = { mode: 'open' as ShadowRootMode };\n static getTemplateHTML = getTemplateHTML;\n static get observedAttributes() {\n return ['src'];\n }\n\n constructor() {\n super();\n\n if (!this.shadowRoot) {\n this.attachShadow((this.constructor as typeof BackgroundVideo).shadowRootOptions);\n\n const attrs = {\n ...namedNodeMapToObject(this.attributes),\n ...(!this.hasAttribute('nomuted') && { muted: '' }),\n ...(!this.hasAttribute('noloop') && { loop: '' }),\n ...(!this.hasAttribute('noautoplay') && { autoplay: '' }),\n playsinline: '',\n disableremoteplayback: '',\n disablepictureinpicture: '',\n };\n\n this.shadowRoot!.innerHTML = getTemplateHTML(attrs);\n }\n\n // Neither Chrome or Firefox support setting the muted attribute\n // after using document.createElement.\n // Get around this by setting the muted property manually.\n this.target!.muted = !this.hasAttribute('nomuted');\n }\n\n // Register the inner <video> (not `this`) with the provider.\n getMediaTarget(): Media \| null {\n return this.target;\n }\n\n attributeChangedCallback(attrName: string, oldValue: string \| null, newValue: string \| null): void {\n if (attrName === 'src' && oldValue !== newValue) {\n this.target!.src = newValue ?? '';\n }\n }\n\n get target(): HTMLVideoElement \| null {\n return (\n this.querySelector(':scope > [slot=media]') ??\n this.querySelector('video') ??\n this.shadowRoot?.querySelector('video') ??\n null\n );\n }\n}\n\nconst VideoAttributes = [\n 'autoplay',\n 'controls',\n 'controlslist',\n 'crossorigin',\n 'disablepictureinpicture',\n 'disableremoteplayback',\n 'loop',\n 'muted',\n 'playsinline',\n 'preload',\n] as const;\n\nfunction serializeAttributes(attrs: Record<string, string>): string {\n let html = '';\n for (const key in attrs) {\n // Skip forwarding non native video attributes.\n if (!VideoAttributes.includes(key as any)) continue;\n\n const value = attrs[key];\n if (value === '') html += ` ${key}`;\n else html += ` ${key}=\"${value}\"`;\n }\n return html;\n}\n","import { BackgroundVideo } from '../../media/background-video';\nimport { safeDefine } from '../safe-define';\n\nexport class BackgroundVideoElement extends BackgroundVideo {\n static readonly tagName = 'background-video';\n}\n\nsafeDefine(BackgroundVideoElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [BackgroundVideoElement.tagName]: BackgroundVideoElement;\n }\n}\n"],"mappings":"+NAMA,KAAM,CAAE,iBAAkB,EAAa,CACrC,SAAU,EACX,CAAC,CAOF,EALA,cAAkD,EAAc,EAAa,AAAC,qBAClD,4BAIY,CACxC,EAAW,EAAsB,CChBjC,IAAA,EAAe,maCOf,SAAS,EAAgB,EAAgC,CACvD,MAAgB,6EAoBlB,EAjBA,cAA+B,CAAA,qBACb,sDACG,CAAA,KAAA,OAAA,6BAClB,gBAGH,OAAO,CAEL,EAAO,4BAAsB,EAAO,mBAGpC,KAAA,aAAc,KAAA,YAAA,kBAAA,CACZ,KAAO,WAAA,UAAA,EAAA,EAAA,KAAA,WAAA,CAAA,IAKmB,CCxB9B,SAAS,EAAgB,EAA+B,CACtD,MAAgB,8OAAA,EAAA,EAAA,CAAA,WAIlB,IAAM,EAAN,cAAM,EAAA,YAAA,AAAA,yEAEM,EACV,WAAM,oBAAkB,CACtB,MAAI,CAAA,MAAQ,CAGd,aAAa,CAGX,GAFA,OAAI,CAEF,CAAA,KAAK,WAAA,CACN,KAAM,aAAK,KAAA,YAAA,kBAAA,CAEb,IAAA,EAAA,CACH,GAAA,EAAA,KAAA,WAAA,8CAEQ,GAAC,CAAA,KAAO,aAAA,SAAwB,EAAC,CAAK,KAAM,GAAC,CAC9C,GAAK,CAAC,KAAA,aAAgB,aAAQ,EAAA,CAAA,SAAiB,GAAA,CAC9C,YAAC,GACD,sBAAmB,GACnB,wBAAyB,GAC7B,gFAYF,gBAA8B,CAC5B,OAAO,KAAE,OAGX,yBAAM,EAA2B,EAAA,EAAA,CAC5B,IAAA,OAAA,IAAA,IAAA,KAAA,OAAA,IAAA,GAAA,IAKL,IAAI,QAAkC,CACpC,OACE,KAAK,cAAc,wBAAmB,EACxC,KAAK,cAAgB,QAAM,EAC7B,KAAA,YAAA,cAAA,QAAA,EAAA,gBAOA,WACA,WACA,eACA,cACA,kDAEA,OACA,QACA,cACA,UACD,CAED,SAAK,EAAA,EAAA,CACH,IAAA,EAAA,GACF,IAAA,IAAA,KAAA,EAAA,CAEA,GAAM,CAAA,EAAkB,SAAA,EAAA,CAAA,SAErB,IAAA,EAAS,EAAA,GACT,IAAa,GAAA,GAAA,IAAA,IACb,GAAY,IAAA,EAAA,IAAA,EAAA,GAEb,OAAC,EC9EH,EAJA,cAA4C,CAAgB,qBAChC,qBAGM"}

package/cdn/base-CaXY3kMA.js ADDED Viewed

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

package/cdn/base-CaXY3kMA.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"base-CaXY3kMA.js","names":["#families","#loaders","#loading","#instances","#renderFamily","#family","#render"],"sources":["../../icons/dist/element/base.js"],"sourcesContent":["export class MediaIconElement extends HTMLElement {\n static #families = new Map();\n static #loaders = new Map();\n static #loading = new Map();\n static #instances = new Set();\n\n static register(family, icons) {\n const map = MediaIconElement.#families.get(family) ?? new Map();\n for (const [name, svg] of Object.entries(icons)) {\n map.set(name, svg);\n }\n MediaIconElement.#families.set(family, map);\n MediaIconElement.#renderFamily(family);\n }\n\n static registerLoader(family, load) {\n MediaIconElement.#loaders.set(family, load);\n }\n\n static load(family) {\n if (MediaIconElement.#families.has(family)) return Promise.resolve();\n\n const pending = MediaIconElement.#loading.get(family);\n if (pending) return pending;\n\n const loader = MediaIconElement.#loaders.get(family);\n if (!loader) return Promise.resolve();\n\n const loading = Promise.resolve()\n .then(() => loader())\n .then((icons) => {\n if (icons) MediaIconElement.register(family, icons);\n })\n .finally(() => MediaIconElement.#loading.delete(family));\n\n MediaIconElement.#loading.set(family, loading);\n return loading;\n }\n\n static #renderFamily(family) {\n for (const icon of MediaIconElement.#instances) {\n if (icon.#family === family) icon.#render();\n }\n }\n\n static get observedAttributes() {\n return ['name', 'family'];\n }\n\n attributeChangedCallback() {\n this.#render();\n }\n\n connectedCallback() {\n MediaIconElement.#instances.add(this);\n this.#render();\n }\n\n disconnectedCallback() {\n MediaIconElement.#instances.delete(this);\n }\n\n get #family() {\n return this.getAttribute('family') || 'default';\n }\n\n #render() {\n const name = this.getAttribute('name');\n if (!name) return;\n\n const family = this.#family;\n const icons = MediaIconElement.#families.get(family);\n const svg = icons?.get(name);\n if (!svg) {\n if (MediaIconElement.#families.has(family)) return;\n\n MediaIconElement.load(family).then(() => {\n if (\n !this.isConnected ||\n this.getAttribute('name') !== name ||\n this.#family !== family ||\n !MediaIconElement.#families.has(family)\n ) {\n return;\n }\n this.#render();\n }, () => {});\n return;\n }\n\n this.innerHTML = svg;\n }\n}\n"],"mappings":";AAAA,IAAa,mBAAb,MAAa,yBAAyB,YAAY;CAChD,QAAOA,2BAAY,IAAI,KAAK;CAC5B,QAAOC,0BAAW,IAAI,KAAK;CAC3B,QAAOC,0BAAW,IAAI,KAAK;CAC3B,QAAOC,4BAAa,IAAI,KAAK;CAE7B,OAAO,SAAS,QAAQ,OAAO;EAC7B,MAAM,MAAM,kBAAiBH,SAAU,IAAI,OAAO,oBAAI,IAAI,KAAK;AAC/D,OAAK,MAAM,CAAC,MAAM,QAAQ,OAAO,QAAQ,MAAM,CAC7C,KAAI,IAAI,MAAM,IAAI;AAEpB,oBAAiBA,SAAU,IAAI,QAAQ,IAAI;AAC3C,oBAAiBI,aAAc,OAAO;;CAGxC,OAAO,eAAe,QAAQ,MAAM;AAClC,oBAAiBH,QAAS,IAAI,QAAQ,KAAK;;CAG7C,OAAO,KAAK,QAAQ;AAClB,MAAI,kBAAiBD,SAAU,IAAI,OAAO,CAAE,QAAO,QAAQ,SAAS;EAEpE,MAAM,UAAU,kBAAiBE,QAAS,IAAI,OAAO;AACrD,MAAI,QAAS,QAAO;EAEpB,MAAM,SAAS,kBAAiBD,QAAS,IAAI,OAAO;AACpD,MAAI,CAAC,OAAQ,QAAO,QAAQ,SAAS;EAErC,MAAM,UAAU,QAAQ,SAAS,CAC9B,WAAW,QAAQ,CAAC,CACpB,MAAM,UAAU;AACf,OAAI,MAAO,kBAAiB,SAAS,QAAQ,MAAM;IACnD,CACD,cAAc,kBAAiBC,QAAS,OAAO,OAAO,CAAC;AAE1D,oBAAiBA,QAAS,IAAI,QAAQ,QAAQ;AAC9C,SAAO;;CAGT,QAAOE,aAAc,QAAQ;AAC3B,OAAK,MAAM,QAAQ,kBAAiBD,UAClC,KAAI,MAAKE,WAAY,OAAQ,OAAKC,QAAS;;CAI/C,WAAW,qBAAqB;AAC9B,SAAO,CAAC,QAAQ,SAAS;;CAG3B,2BAA2B;AACzB,QAAKA,QAAS;;CAGhB,oBAAoB;AAClB,oBAAiBH,UAAW,IAAI,KAAK;AACrC,QAAKG,QAAS;;CAGhB,uBAAuB;AACrB,oBAAiBH,UAAW,OAAO,KAAK;;CAG1C,KAAIE,SAAU;AACZ,SAAO,KAAK,aAAa,SAAS,IAAI;;CAGxC,UAAU;EACR,MAAM,OAAO,KAAK,aAAa,OAAO;AACtC,MAAI,CAAC,KAAM;EAEX,MAAM,SAAS,MAAKA;EAEpB,MAAM,MADQ,kBAAiBL,SAAU,IAAI,OAAO,EACjC,IAAI,KAAK;AAC5B,MAAI,CAAC,KAAK;AACR,OAAI,kBAAiBA,SAAU,IAAI,OAAO,CAAE;AAE5C,oBAAiB,KAAK,OAAO,CAAC,WAAW;AACvC,QACE,CAAC,KAAK,eACN,KAAK,aAAa,OAAO,KAAK,QAC9B,MAAKK,WAAY,UACjB,CAAC,kBAAiBL,SAAU,IAAI,OAAO,CAEvC;AAEF,UAAKM,QAAS;YACP,GAAG;AACZ;;AAGF,OAAK,YAAY"}

package/cdn/base-JIGv_MlJ.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ var e=class e extends HTMLElement{static#e=new Map;static#t=new Map;static#n=new Map;static#r=new Set;static register(t,n){let r=e.#e.get(t)??new Map;for(let[e,t]of Object.entries(n))r.set(e,t);e.#e.set(t,r),e.#i(t)}static registerLoader(t,n){e.#t.set(t,n)}static load(t){if(e.#e.has(t))return Promise.resolve();let n=e.#n.get(t);if(n)return n;let r=e.#t.get(t);if(!r)return Promise.resolve();let i=Promise.resolve().then(()=>r()).then(n=>{n&&e.register(t,n)}).finally(()=>e.#n.delete(t));return e.#n.set(t,i),i}static#i(t){for(let n of e.#r)n.#a===t&&n.#o()}static get observedAttributes(){return[`name`,`family`]}attributeChangedCallback(){this.#o()}connectedCallback(){e.#r.add(this),this.#o()}disconnectedCallback(){e.#r.delete(this)}get#a(){return this.getAttribute(`family`)\|\|`default`}#o(){let t=this.getAttribute(`name`);if(!t)return;let n=this.#a,r=e.#e.get(n)?.get(t);if(!r){if(e.#e.has(n))return;e.load(n).then(()=>{!this.isConnected\|\|this.getAttribute(`name`)!==t\|\|this.#a!==n\|\|!e.#e.has(n)\|\|this.#o()},()=>{});return}this.innerHTML=r}};export{e as t};
2	+ //# sourceMappingURL=base-JIGv_MlJ.js.map

package/cdn/base-JIGv_MlJ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"base-JIGv_MlJ.js","names":["#families","#loaders","#loading","#instances","#renderFamily","#family","#render"],"sources":["../../icons/dist/element/base.js"],"sourcesContent":["export class MediaIconElement extends HTMLElement {\n static #families = new Map();\n static #loaders = new Map();\n static #loading = new Map();\n static #instances = new Set();\n\n static register(family, icons) {\n const map = MediaIconElement.#families.get(family) ?? new Map();\n for (const [name, svg] of Object.entries(icons)) {\n map.set(name, svg);\n }\n MediaIconElement.#families.set(family, map);\n MediaIconElement.#renderFamily(family);\n }\n\n static registerLoader(family, load) {\n MediaIconElement.#loaders.set(family, load);\n }\n\n static load(family) {\n if (MediaIconElement.#families.has(family)) return Promise.resolve();\n\n const pending = MediaIconElement.#loading.get(family);\n if (pending) return pending;\n\n const loader = MediaIconElement.#loaders.get(family);\n if (!loader) return Promise.resolve();\n\n const loading = Promise.resolve()\n .then(() => loader())\n .then((icons) => {\n if (icons) MediaIconElement.register(family, icons);\n })\n .finally(() => MediaIconElement.#loading.delete(family));\n\n MediaIconElement.#loading.set(family, loading);\n return loading;\n }\n\n static #renderFamily(family) {\n for (const icon of MediaIconElement.#instances) {\n if (icon.#family === family) icon.#render();\n }\n }\n\n static get observedAttributes() {\n return ['name', 'family'];\n }\n\n attributeChangedCallback() {\n this.#render();\n }\n\n connectedCallback() {\n MediaIconElement.#instances.add(this);\n this.#render();\n }\n\n disconnectedCallback() {\n MediaIconElement.#instances.delete(this);\n }\n\n get #family() {\n return this.getAttribute('family') || 'default';\n }\n\n #render() {\n const name = this.getAttribute('name');\n if (!name) return;\n\n const family = this.#family;\n const icons = MediaIconElement.#families.get(family);\n const svg = icons?.get(name);\n if (!svg) {\n if (MediaIconElement.#families.has(family)) return;\n\n MediaIconElement.load(family).then(() => {\n if (\n !this.isConnected ||\n this.getAttribute('name') !== name ||\n this.#family !== family ||\n !MediaIconElement.#families.has(family)\n ) {\n return;\n }\n this.#render();\n }, () => {});\n return;\n }\n\n this.innerHTML = svg;\n }\n}\n"],"mappings":"AAAA,IAAa,EAAb,MAAa,UAAyB,WAAY,CAChD,OAAA,EAAmB,IAAI,IACvB,OAAA,EAAkB,IAAI,IACtB,OAAA,EAAkB,IAAI,IACtB,OAAA,EAAoB,IAAI,IAExB,OAAO,SAAS,EAAQ,EAAO,CAC7B,IAAM,EAAM,GAAA,EAA2B,IAAI,EAAO,EAAI,IAAI,IAC1D,IAAK,GAAM,CAAC,EAAM,KAAQ,OAAO,QAAQ,EAAM,CAC7C,EAAI,IAAI,EAAM,EAAI,CAEpB,GAAA,EAA2B,IAAI,EAAQ,EAAI,CAC3C,GAAA,EAA+B,EAAO,CAGxC,OAAO,eAAe,EAAQ,EAAM,CAClC,GAAA,EAA0B,IAAI,EAAQ,EAAK,CAG7C,OAAO,KAAK,EAAQ,CAClB,GAAI,GAAA,EAA2B,IAAI,EAAO,CAAE,OAAO,QAAQ,SAAS,CAEpE,IAAM,EAAU,GAAA,EAA0B,IAAI,EAAO,CACrD,GAAI,EAAS,OAAO,EAEpB,IAAM,EAAS,GAAA,EAA0B,IAAI,EAAO,CACpD,GAAI,CAAC,EAAQ,OAAO,QAAQ,SAAS,CAErC,IAAM,EAAU,QAAQ,SAAS,CAC9B,SAAW,GAAQ,CAAC,CACpB,KAAM,GAAU,CACX,GAAO,EAAiB,SAAS,EAAQ,EAAM,EACnD,CACD,YAAc,GAAA,EAA0B,OAAO,EAAO,CAAC,CAG1D,OADA,GAAA,EAA0B,IAAI,EAAQ,EAAQ,CACvC,EAGT,OAAA,EAAqB,EAAQ,CAC3B,IAAK,IAAM,KAAQ,GAAA,EACb,GAAA,IAAiB,GAAQ,GAAA,GAAc,CAI/C,WAAW,oBAAqB,CAC9B,MAAO,CAAC,OAAQ,SAAS,CAG3B,0BAA2B,CACzB,MAAA,GAAc,CAGhB,mBAAoB,CAClB,GAAA,EAA4B,IAAI,KAAK,CACrC,MAAA,GAAc,CAGhB,sBAAuB,CACrB,GAAA,EAA4B,OAAO,KAAK,CAG1C,IAAA,GAAc,CACZ,OAAO,KAAK,aAAa,SAAS,EAAI,UAGxC,IAAU,CACR,IAAM,EAAO,KAAK,aAAa,OAAO,CACtC,GAAI,CAAC,EAAM,OAEX,IAAM,EAAS,MAAA,EAET,EADQ,GAAA,EAA2B,IAAI,EAAO,EACjC,IAAI,EAAK,CAC5B,GAAI,CAAC,EAAK,CACR,GAAI,GAAA,EAA2B,IAAI,EAAO,CAAE,OAE5C,EAAiB,KAAK,EAAO,CAAC,SAAW,CAErC,CAAC,KAAK,aACN,KAAK,aAAa,OAAO,GAAK,GAC9B,MAAA,IAAiB,GACjB,CAAC,GAAA,EAA2B,IAAI,EAAO,EAIzC,MAAA,GAAc,MACP,GAAG,CACZ,OAGF,KAAK,UAAY"}