@mux/mux-player
Version:
An open source Mux player web component that Just Worksâ„¢
1,394 lines (1,309 loc) • 192 kB
JavaScript
var __typeError = (msg) => {
throw TypeError(msg);
};
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
// src/themes/classic/classic.html
var classic_default = `<!-- prettier-ignore -->
<template id="media-theme-classic">
<style>
:host {
--_primary-color: var(--media-primary-color, white);
--_secondary-color: var(--media-secondary-color, rgb(0 0 0 / .75));
--media-icon-color: var(--_primary-color);
--media-range-thumb-background: var(--_primary-color);
--media-range-bar-color: var(--_primary-color);
--media-control-background: var(--_secondary-color);
--media-control-hover-background: var(--_secondary-color);
--media-time-range-buffered-color: rgba(255, 255, 255, 0.4);
--media-range-track-background:
linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
linear-gradient(rgba(20, 20, 30, 0.7), rgba(20, 20, 30, 0.7));
--media-preview-thumbnail-border: 0;
--media-preview-thumbnail-border-radius: 2px 2px 0 0;
--media-preview-time-border-radius: 0 0 2px 2px;
--media-preview-time-text-shadow: none;
--media-menu-border-radius: 2px;
--media-menu-transform-in: translateY(-8px) scale(1);
--media-menu-transform-out: translateY(-6px) scale(.99);
--media-menu-item-hover-background: rgba(255, 255, 255, 0.28);
--media-tooltip-display: none;
color: var(--_primary-color);
display: inline-block;
width: 100%;
height: 100%;
}
media-rendition-menu,
media-audio-track-menu,
media-captions-menu {
position: absolute; /* ensure they don't take up space in DOM on load */
}
media-rendition-menu {
min-width: 140px;
}
:host([audio]) {
--media-preview-time-border-radius: 3px;
--media-preview-time-text-shadow: none;
}
:host([audio]) ::slotted([slot='media']) {
height: 0px;
}
:host([audio]) media-loading-indicator {
display: none;
}
:host([audio]) media-controller {
background: transparent;
}
:host([audio]) media-controller::part(vertical-layer) {
background: transparent;
}
:host([audio]) media-control-bar {
width: 100%;
}
[disabled]:not(media-live-button),
[aria-disabled='true']:not(media-live-button) {
opacity: 60%;
cursor: not-allowed;
}
/* 0.433s is the transition duration for VTT Regions.
* Borrowed here, so the captions don't move too fast. */
media-controller {
--media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
}
media-controller:is([mediapaused],:not([userinactive])) {
/* 42px is the height of the control bar and progress bar
* with an additional 5px as a buffer, to get 47px */
--media-webkit-text-track-transform: translateY(-47px);
--media-webkit-text-track-transition: transform 0.15s ease;
}
/*
* CSS specific to iOS devices.
* See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
*/
@supports (-webkit-touch-callout: none) {
/* Disable subtitle adjusting for iOS Safari */
media-controller[mediaisfullscreen] {
--media-webkit-text-track-transform: unset;
--media-webkit-text-track-transition: unset;
}
}
:host media-time-range {
color: var(--_primary-color);
--media-range-thumb-opacity: 0;
}
:host(:not([audio])) media-time-range {
/* Adding px is required here for calc() */
--media-range-padding: 0px;
background: transparent;
z-index: 10;
height: 10px;
bottom: -3px;
width: 100%;
}
media-control-bar {
--media-control-padding: 4px 3px;
}
[breakpointsm] media-control-bar {
--media-control-padding: 9px 5px;
}
[breakpointmd] media-control-bar {
--media-control-padding: 9px 7px;
}
media-control-bar :is([role='button'], [role='switch'], button) {
line-height: 0;
}
media-control-bar :is(media-text-display, media-time-display):first-child {
--media-control-padding: 9px 5px 9px 10px;
}
.spacer {
flex-grow: 1;
background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
}
/* Add a small space on the right to have the play button and
* fullscreen button aligned in relation to the progress bar. */
media-control-bar:not([slot])::after {
content: '';
width: 2px;
height: 100%;
background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
}
media-control-bar[slot='top-chrome'] {
min-height: 42px;
pointer-events: none;
}
:host([title]) media-control-bar[slot='top-chrome']::before,
:host([videotitle]) media-control-bar[slot='top-chrome']::before {
content: '';
position: absolute;
width: 100%;
padding-bottom: min(160px, 25%);
background: linear-gradient(rgb(0 0 0 / 0.4), transparent);
}
media-control-bar[slot='top-chrome'] > * {
--media-control-background: transparent;
--media-control-hover-background: transparent;
position: relative;
}
media-controller::part(vertical-layer) {
transition: background-color 1s;
}
media-controller:is([mediapaused], :not([userinactive]))::part(vertical-layer) {
background-color: var(--controls-backdrop-color, var(--controls, transparent));
transition: background-color 0.25s;
}
.center-controls {
--media-button-icon-width: 100%;
--media-button-icon-height: auto;
pointer-events: none;
width: 100%;
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
paint-order: stroke;
stroke: rgba(102, 102, 102, 1);
stroke-width: 0.3px;
text-shadow: 0 0 2px rgb(0 0 0 / 0.25), 0 0 6px rgb(0 0 0 / 0.25);
}
.center-controls media-play-button {
--media-control-background: transparent;
--media-control-hover-background: transparent;
padding: 0;
width: max(43px, min(10%, 55px));
}
.center-controls media-seek-backward-button,
.center-controls media-seek-forward-button {
--media-control-background: transparent;
--media-control-hover-background: transparent;
padding: 0;
margin: 0 2%;
width: max(33px, min(8%, 40px));
}
media-control-bar:not([slot]) media-seek-backward-button {
padding-right: 5px;
}
media-control-bar:not([slot]) media-seek-forward-button {
padding-left: 5px;
}
media-loading-indicator {
--media-loading-icon-width: 100%;
--media-button-icon-height: auto;
display: var(--media-control-display, var(--media-loading-indicator-display, flex));
pointer-events: none;
position: absolute;
width: min(15%, 150px);
flex-flow: row;
align-items: center;
justify-content: center;
}
/* Intentionally don't target the div for transition but the children
of the div. Prevents messing with media-chrome's autohide feature. */
media-loading-indicator + div * {
transition: opacity 0.15s;
opacity: 1;
}
media-loading-indicator[medialoading]:not([mediapaused]) ~ div > * {
opacity: 0;
transition-delay: 400ms;
}
media-volume-range {
/* Adding px is required here for calc() */
--media-range-padding-left: 10px;
--media-range-padding-right: 10px;
width: min(100%, 100px);
}
media-time-display {
white-space: nowrap;
}
:is(media-time-display, media-text-display, media-playback-rate-button[role='button']) {
color: inherit;
line-height: 24px;
}
:is(.title-display, media-live-button) {
color: inherit;
font-size: 16px;
text-shadow: 0 0 2px rgb(0 0 0 / 0.6);
}
:host([audio]) .title-display {
flex-grow: 1;
font-size: 21px;
}
</style>
<template partial="TitleDisplay">
<template if="videotitle">
<template if="videotitle != true">
<media-text-display part="top title display" class="title-display">{{videotitle}}</media-text-display>
</template>
</template>
<template if="!videotitle">
<template if="title">
<media-text-display part="top title display" class="title-display">{{title}}</media-text-display>
</template>
</template>
</template>
<template partial="PlayButton">
<media-play-button
part="{{section ?? 'bottom'}} play button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<svg aria-hidden="true" viewBox="0 0 24 24" slot="play">
<path d="m6.73 20.93 14.05-8.54a.46.46 0 0 0 0-.78L6.73 3.07a.48.48 0 0 0-.73.39v17.07a.48.48 0 0 0 .73.4Z" />
</svg>
<svg aria-hidden="true" viewBox="0 0 24 24" slot="pause">
<path
d="M6 19.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v15ZM14.5 4a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3Z"
/>
</svg>
</media-play-button>
</template>
<template partial="SeekBackwardButton">
<media-seek-backward-button
seekoffset="{{backwardseekoffset}}"
part="{{section ?? 'bottom'}} seek-backward button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<svg aria-hidden="true" viewBox="0 0 22 24" slot="backward">
<path d="M11 6V3L5.37 7 11 10.94V8a5.54 5.54 0 0 1 1.9 10.48v2.12A7.5 7.5 0 0 0 11 6Z" />
<text class="value" transform="translate(2.5 21)" style="font-size: 8px; font-family: 'ArialMT', 'Arial'">
{{backwardseekoffset}}
</text>
</svg>
</media-seek-backward-button>
</template>
<template partial="SeekForwardButton">
<media-seek-forward-button
seekoffset="{{forwardseekoffset}}"
part="{{section ?? 'bottom'}} seek-forward button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<svg aria-hidden="true" viewBox="0 0 22 24" slot="forward">
<path d="M11 6V3l5.61 4L11 10.94V8a5.54 5.54 0 0 0-1.9 10.48v2.12A7.5 7.5 0 0 1 11 6Z" />
<text class="value" transform="translate(10 21)" style="font-size: 8px; font-family: 'ArialMT', 'Arial'">
{{forwardseekoffset}}
</text>
</svg>
</media-seek-forward-button>
</template>
<template partial="MuteButton">
<media-mute-button part="bottom mute button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg aria-hidden="true" viewBox="0 0 24 24" slot="high">
<path
d="m11.14 4.86-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.21a.5.5 0 0 0-.86-.35Zm2.74-1.56v1.52A7.52 7.52 0 0 1 19.47 12a7.52 7.52 0 0 1-5.59 7.18v1.52A9 9 0 0 0 21 12a9 9 0 0 0-7.12-8.7Zm3.56 8.7a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
/>
</svg>
<svg aria-hidden="true" viewBox="0 0 24 24" slot="low">
<path
d="m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
/>
</svg>
<svg aria-hidden="true" viewBox="0 0 24 24" slot="medium">
<path
d="m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
/>
</svg>
<svg aria-hidden="true" viewBox="0 0 24 24" slot="off">
<path
d="m3 4.05 4.48 4.47-.33.33a.49.49 0 0 1-.36.15H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.48.48 0 0 0 .36.15.5.5 0 0 0 .5-.5v-5.75l4.67 4.66a7.71 7.71 0 0 1-2.79 1.47v1.52a9.32 9.32 0 0 0 3.87-1.91L20 21l1-1L4.06 3 3 4.05Zm5.36 5.36 2.39 2.39V17L8 14.26a1.74 1.74 0 0 0-1.24-.51H4.25v-3.5h2.54A1.74 1.74 0 0 0 8 9.74l.36-.33ZM19.47 12a7.19 7.19 0 0 1-.89 3.47l1.11 1.1A8.64 8.64 0 0 0 21 12a9 9 0 0 0-7.12-8.7v1.52A7.52 7.52 0 0 1 19.47 12ZM12 8.88V5.21a.5.5 0 0 0-.5-.5.48.48 0 0 0-.36.15L9.56 6.44 12 8.88ZM15.91 12a4.284 4.284 0 0 1-.07.72l1.22 1.22a5.2 5.2 0 0 0 .38-1.94 5.49 5.49 0 0 0-3.56-5.1v1.66A4 4 0 0 1 15.91 12Z"
/>
</svg>
</media-mute-button>
</template>
<template partial="RenditionSelect">
<media-rendition-menu-button part="bottom rendition button">
<svg aria-hidden="true" slot="icon" viewBox="0 0 18 24">
<path
d="M2.25 14.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
</svg>
</media-rendition-menu-button>
<media-rendition-menu
hidden
anchor="auto"
part="bottom rendition menu"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<div slot="header">Quality</div>
</media-rendition-menu>
</template>
<template partial="AudioTrackSelect">
<media-audio-track-menu-button part="bottom audio-track button">
<svg aria-hidden="true" slot="icon" viewBox="0 0 24 24">
<path d="M12 20.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17Zm0 1.5C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Z"/>
<path d="M7.25 9.75a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75Zm3-3a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 .75-.75Zm3 2a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0v-5a.75.75 0 0 1 .75-.75Zm3-1a.75.75 0 0 1 .75.75v7a.75.75 0 0 1-1.5 0v-7a.75.75 0 0 1 .75-.75Z"/>
</svg>
</media-audio-track-menu-button>
<media-audio-track-menu
hidden
anchor="auto"
part="bottom audio-track menu"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
exportparts="menu-item"
>
<div slot="header">Audio</div>
</media-audio-track-menu>
</template>
<template partial="CaptionsSelect">
<media-captions-menu-button part="bottom captions button">
<svg aria-hidden="true" viewBox="0 0 26 24" slot="on">
<path d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.41 10.1a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 4 4 0 0 1-1.28-.83 3.67 3.67 0 0 1-.84-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.53 3.53 0 0 1 .84-1.21 3.89 3.89 0 0 1 1.29-.8 4.76 4.76 0 0 1 1.63-.27 4.06 4.06 0 0 1 1.35.24c.225.091.44.205.64.34a2.7 2.7 0 0 1 .55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.35 2.35 0 0 0-.46.77 2.78 2.78 0 0 0-.16 1c-.009.34.046.68.16 1 .104.283.26.545.46.77.188.21.415.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.88 2.88 0 0 1-1.22 1.01Zm7.52 0a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 3.89 3.89 0 0 1-1.28-.83 3.55 3.55 0 0 1-.85-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.43 3.43 0 0 1 .85-1.25 3.75 3.75 0 0 1 1.28-.8 4.76 4.76 0 0 1 1.63-.27 4 4 0 0 1 1.35.24c.225.091.44.205.64.34.21.144.395.32.55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.352 2.352 0 0 0-.46.77 3.01 3.01 0 0 0-.16 1c-.003.34.05.678.16 1 .108.282.263.542.46.77.188.21.416.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.82 2.82 0 0 1-1.21 1.05Z"/>
</svg>
<svg aria-hidden="true" viewBox="0 0 26 24" slot="off">
<path d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-1.81-.12-4.67-.18-7.53-.18-2.86 0-5.72.06-7.53.18a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18 2.86 0 5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.137-.21-8.283 0-12.42a1.11 1.11 0 0 1 .91-1.11c1.67-.11 4.43-.18 7.43-.18s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.137.21 8.283 0 12.42ZM10.843 14a1.55 1.55 0 0 1-.76.18 1.57 1.57 0 0 1-.71-.18 1.69 1.69 0 0 1-.57-.42 2.099 2.099 0 0 1-.38-.58 2.47 2.47 0 0 1 0-1.64 2 2 0 0 1 .39-.66 1.73 1.73 0 0 1 .58-.42c.23-.103.479-.158.73-.16.241-.004.48.044.7.14.199.088.373.222.51.39l1.08-.89a2.179 2.179 0 0 0-.47-.44 2.81 2.81 0 0 0-.54-.32 2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0 4.08 4.08 0 0 0-1.38.15 3.27 3.27 0 0 0-1.09.67 3.14 3.14 0 0 0-.71 1.06 3.62 3.62 0 0 0-.26 1.39 3.57 3.57 0 0 0 .26 1.38 3 3 0 0 0 .71 1.06c.316.293.687.52 1.09.67.443.16.91.238 1.38.23a3.2 3.2 0 0 0 1.28-.27c.401-.183.747-.47 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18 1.54 1.54 0 0 1-.7-.18 1.69 1.69 0 0 1-.57-.42 2.12 2.12 0 0 1-.43-.58 2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58c.241-.003.48.045.7.14.199.088.373.222.51.39l1.08-.92a2.43 2.43 0 0 0-.47-.44 3.22 3.22 0 0 0-.53-.29 2.999 2.999 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0 4.06 4.06 0 0 0-1.36.15 3.17 3.17 0 0 0-1.09.67 3 3 0 0 0-.72 1.06 3.62 3.62 0 0 0-.25 1.39 3.57 3.57 0 0 0 .25 1.38c.16.402.405.764.72 1.06a3.17 3.17 0 0 0 1.09.67c.44.16.904.237 1.37.23.441 0 .877-.092 1.28-.27a2.45 2.45 0 0 0 1-.83l-1.15-.85a1.49 1.49 0 0 1-.54.49Z"/>
</svg>
</media-captions-menu-button>
<media-captions-menu
hidden
anchor="auto"
part="bottom captions menu"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
exportparts="menu-item"
></media-captions-menu>
</template>
<template partial="AirplayButton">
<media-airplay-button part="bottom airplay button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg aria-hidden="true" viewBox="0 0 26 24" slot="airplay">
<path
d="M13.19 14.22a.25.25 0 0 0-.38 0l-5.46 6.37a.25.25 0 0 0 .19.41h10.92a.25.25 0 0 0 .19-.41l-5.46-6.37Z"
/>
<path
d="M22 3H4a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h2.94L8 16.75H4.25V4.25h17.5v12.5H18L19.06 18H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
/>
</svg>
</media-airplay-button>
</template>
<template partial="CastButton">
<media-cast-button part="bottom cast button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg aria-hidden="true" viewBox="0 0 26 24" slot="enter">
<path d="M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z" />
<path d="M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z" />
<path
d="M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
/>
</svg>
<svg aria-hidden="true" viewBox="0 0 26 24" slot="exit">
<path d="M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z" />
<path d="M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z" />
<path
d="M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
/>
<path d="M20.5 5.5h-15v5.811c3.52.906 6.283 3.67 7.189 7.19H20.5V5.5Z" />
</svg>
</media-cast-button>
</template>
<template partial="PipButton">
<media-pip-button part="bottom pip button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg aria-hidden="true" viewBox="0 0 26 24" slot="enter">
<path
d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
/>
</svg>
<svg aria-hidden="true" viewBox="0 0 26 24" slot="exit">
<path
d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
/>
</svg>
</media-pip-button>
</template>
<template partial="FullscreenButton">
<media-fullscreen-button part="bottom fullscreen button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg aria-hidden="true" viewBox="0 0 24 24" slot="enter">
<path
d="M20.25 14.5a.76.76 0 0 0-.75.75v4.25h-4.25a.75.75 0 1 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5a.76.76 0 0 0-.75-.75Zm0-11.5h-5a.76.76 0 0 0-.75.75.76.76 0 0 0 .75.75h4.25v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75ZM8.75 19.5H4.5v-4.25a.76.76 0 0 0-.75-.75.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75h5a.75.75 0 1 0 0-1.5Zm0-16.5h-5a.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75.76.76 0 0 0 .75-.75V4.5h4.25a.76.76 0 0 0 .75-.75.76.76 0 0 0-.75-.75Z"
/>
</svg>
<svg aria-hidden="true" viewBox="0 0 24 24" slot="exit">
<path
d="M20.25 14.5h-5a.76.76 0 0 0-.75.75v5a.75.75 0 1 0 1.5 0V16h4.25a.75.75 0 1 0 0-1.5Zm-5-5h5a.75.75 0 1 0 0-1.5H16V3.75a.75.75 0 1 0-1.5 0v5a.76.76 0 0 0 .75.75Zm-6.5 5h-5a.75.75 0 1 0 0 1.5H8v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75Zm0-11.5a.76.76 0 0 0-.75.75V8H3.75a.75.75 0 0 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5A.76.76 0 0 0 8.75 3Z"
/>
</svg>
</media-fullscreen-button>
</template>
<template partial="LiveButton">
<media-live-button
part="{{section ?? 'top'}} live button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
></media-live-button>
</template>
<template partial="PlaybackRateButton">
<media-playback-rate-button
rates="{{playbackrates}}"
part="bottom playback-rate button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
></media-playback-rate-button>
</template>
<template partial="VolumeRange">
<media-volume-range
part="bottom volume range"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
></media-volume-range>
</template>
<template partial="TimeDisplay">
<media-time-display
remaining="{{defaultshowremainingtime}}"
showduration="{{!hideduration}}"
part="bottom time display"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
></media-time-display>
</template>
<template partial="TimeRange">
<media-time-range
part="bottom time range"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
></media-time-range>
</template>
<media-controller
part="controller"
defaultstreamtype="{{defaultstreamtype ?? 'on-demand'}}"
breakpoints="sm:300 md:700"
gesturesdisabled="{{disabled}}"
hotkeys="{{hotkeys}}"
nohotkeys="{{nohotkeys}}"
novolumepref="{{novolumepref}}"
audio="{{audio}}"
noautoseektolive="{{noautoseektolive}}"
defaultsubtitles="{{defaultsubtitles}}"
defaultduration="{{defaultduration ?? false}}"
keyboardforwardseekoffset="{{forwardseekoffset}}"
keyboardbackwardseekoffset="{{backwardseekoffset}}"
exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer"
>
<slot name="media" slot="media"></slot>
<slot name="poster" slot="poster"></slot>
<media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
<template if="audio">
<template if="streamtype == 'on-demand'">
<template if="title">
<media-control-bar part="control-bar top">{{>TitleDisplay}}</media-control-bar>
</template>
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
{{>SeekBackwardButton}}
{{>SeekForwardButton}}
{{>TimeDisplay}}
{{>TimeRange}}
{{>MuteButton}}
{{>VolumeRange}}
{{>PlaybackRateButton}}
{{>AudioTrackSelect}}
{{>AirplayButton}}
{{>CastButton}}
</media-control-bar>
</template>
<template if="streamtype == 'live'">
<template if="targetlivewindow > 0">
<template if="title">
<media-control-bar part="control-bar top">{{>TitleDisplay}}</media-control-bar>
</template>
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
{{>LiveButton section="bottom"}}
{{>SeekBackwardButton}}
{{>SeekForwardButton}}
{{>TimeDisplay}}
{{>TimeRange}}
{{>MuteButton}}
{{>VolumeRange}}
{{>PlaybackRateButton}}
{{>AudioTrackSelect}}
{{>AirplayButton}}
{{>CastButton}}
</media-control-bar>
</template>
<template if="!targetlivewindow">
<template if="title">
<media-control-bar part="control-bar top">{{>TitleDisplay}}</media-control-bar>
</template>
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
{{>LiveButton section="bottom"}}
{{>MuteButton}}
{{>VolumeRange}}
<div class="spacer"></div>
{{>AudioTrackSelect}}
{{>AirplayButton}}
{{>CastButton}}
</media-control-bar>
</template>
</template>
</template>
<template if="!audio">
<media-error-dialog slot="dialog" noautohide></media-error-dialog>
<template if="streamtype == 'on-demand'">
<template if="!breakpointsm">
{{>TimeRange}}
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
{{>MuteButton}}
<div class="spacer"></div>
{{>CaptionsSelect}}
{{>FullscreenButton}}
</media-control-bar>
</template>
<template if="breakpointsm">
<template if="!breakpointmd">
<media-control-bar part="control-bar top" slot="top-chrome">
{{>TitleDisplay}}
</media-control-bar>
<div slot="centered-chrome" class="center-controls">
{{>SeekBackwardButton section="center"}}
{{>PlayButton section="center"}}
{{>SeekForwardButton section="center"}}
</div>
{{>TimeRange}}
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
{{>TimeDisplay}}
{{>MuteButton}}
{{>VolumeRange}}
<div class="spacer"></div>
{{>RenditionSelect}}
{{>PlaybackRateButton}}
{{>AudioTrackSelect}}
{{>CaptionsSelect}}
{{>AirplayButton}}
{{>CastButton}}
{{>PipButton}}
{{>FullscreenButton}}
</media-control-bar>
</template>
</template>
<template if="breakpointmd">
<media-control-bar part="control-bar top" slot="top-chrome">
{{>TitleDisplay}}
</media-control-bar>
<div slot="centered-chrome" class="center-controls">
{{>PlayButton section="center"}}
</div>
{{>TimeRange}}
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
{{>SeekBackwardButton}}
{{>SeekForwardButton}}
{{>TimeDisplay}}
{{>MuteButton}}
{{>VolumeRange}}
<div class="spacer"></div>
{{>RenditionSelect}}
{{>PlaybackRateButton}}
{{>AudioTrackSelect}}
{{>CaptionsSelect}}
{{>AirplayButton}}
{{>CastButton}}
{{>PipButton}}
{{>FullscreenButton}}
</media-control-bar>
</template>
</template>
<template if="streamtype == 'live'">
<template if="!targetlivewindow">
<template if="!breakpointsm">
<media-control-bar part="control-bar top" slot="top-chrome">
{{>LiveButton}}
</media-control-bar>
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
{{>MuteButton}}
<div class="spacer"></div>
{{>CaptionsSelect}}
{{>FullscreenButton}}
</media-control-bar>
</template>
<template if="breakpointsm">
<template if="!breakpointmd">
<media-control-bar part="control-bar top" slot="top-chrome">
{{>LiveButton}}
{{>TitleDisplay}}
</media-control-bar>
<div slot="centered-chrome" class="center-controls">
{{>PlayButton section="center"}}
</div>
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
{{>MuteButton}}
{{>VolumeRange}}
<div class="spacer"></div>
{{>RenditionSelect}}
{{>AudioTrackSelect}}
{{>CaptionsSelect}}
{{>AirplayButton}}
{{>CastButton}}
{{>PipButton}}
{{>FullscreenButton}}
</media-control-bar>
</template>
</template>
<template if="breakpointmd">
<media-control-bar part="control-bar top" slot="top-chrome">
{{>LiveButton}}
{{>TitleDisplay}}
</media-control-bar>
<div slot="centered-chrome" class="center-controls">
{{>PlayButton section="center"}}
</div>
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
{{>MuteButton}}
{{>VolumeRange}}
<div class="spacer"></div>
{{>RenditionSelect}}
{{>AudioTrackSelect}}
{{>CaptionsSelect}}
{{>AirplayButton}}
{{>CastButton}}
{{>PipButton}}
{{>FullscreenButton}}
</media-control-bar>
</template>
</template>
<template if="targetlivewindow > 0">
<template if="!breakpointsm">
<media-control-bar part="control-bar top" slot="top-chrome">
{{>LiveButton}}
</media-control-bar>
{{>TimeRange}}
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
{{>MuteButton}}
<div class="spacer"></div>
{{>CaptionsSelect}}
{{>FullscreenButton}}
</media-control-bar>
</template>
<template if="breakpointsm">
<template if="!breakpointmd">
<media-control-bar part="control-bar top" slot="top-chrome">
{{>LiveButton}}
{{>TitleDisplay}}
</media-control-bar>
<div slot="centered-chrome" class="center-controls">
{{>SeekBackwardButton section="center"}}
{{>PlayButton section="center"}}
{{>SeekForwardButton section="center"}}
</div>
{{>TimeRange}}
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
{{>MuteButton}}
{{>VolumeRange}}
<div class="spacer"></div>
{{>RenditionSelect}}
{{>AudioTrackSelect}}
{{>CaptionsSelect}}
{{>AirplayButton}}
{{>CastButton}}
{{>PipButton}}
{{>FullscreenButton}}
</media-control-bar>
</template>
</template>
<template if="breakpointmd">
<media-control-bar part="control-bar top" slot="top-chrome">
{{>LiveButton}}
{{>TitleDisplay}}
</media-control-bar>
<div slot="centered-chrome" class="center-controls">
{{>PlayButton section="center"}}
</div>
{{>TimeRange}}
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
{{>SeekBackwardButton}}
{{>SeekForwardButton}}
{{>MuteButton}}
{{>VolumeRange}}
<div class="spacer"></div>
{{>RenditionSelect}}
{{>AudioTrackSelect}}
{{>CaptionsSelect}}
{{>AirplayButton}}
{{>CastButton}}
{{>PipButton}}
{{>FullscreenButton}}
</media-control-bar>
</template>
</template>
</template>
</template>
<slot></slot>
</media-controller>
</template>
`;
// src/polyfills/index.ts
var EventTarget = class {
addEventListener() {
}
removeEventListener() {
}
dispatchEvent(_event) {
return true;
}
};
if (typeof DocumentFragment === "undefined") {
class DocumentFragment3 extends EventTarget {
}
globalThis.DocumentFragment = DocumentFragment3;
}
var HTMLElement = class extends EventTarget {
};
var HTMLVideoElement = class extends EventTarget {
};
var customElements = {
get(_name) {
return void 0;
},
define(_name, _constructor, _options) {
},
getName(_constructor) {
return null;
},
upgrade(_root) {
},
whenDefined(_name) {
return Promise.resolve(HTMLElement);
}
};
var _detail;
var CustomEvent2 = class {
constructor(_typeArg, eventInitDict = {}) {
__privateAdd(this, _detail);
__privateSet(this, _detail, eventInitDict == null ? void 0 : eventInitDict.detail);
}
get detail() {
return __privateGet(this, _detail);
}
initCustomEvent() {
}
};
_detail = new WeakMap();
function createElement(_tagName, _options) {
return new HTMLElement();
}
var globalThisShim = {
document: {
createElement
},
DocumentFragment,
customElements,
CustomEvent: CustomEvent2,
EventTarget,
HTMLElement,
HTMLVideoElement
};
var isServer = typeof window === "undefined" || typeof globalThis.customElements === "undefined";
var internalGlobalThis = isServer ? globalThisShim : globalThis;
var internalDocument = isServer ? globalThisShim.document : globalThis.document;
// ../../node_modules/media-chrome/dist/constants.js
var MediaUIEvents = {
MEDIA_PLAY_REQUEST: "mediaplayrequest",
MEDIA_PAUSE_REQUEST: "mediapauserequest",
MEDIA_MUTE_REQUEST: "mediamuterequest",
MEDIA_UNMUTE_REQUEST: "mediaunmuterequest",
MEDIA_VOLUME_REQUEST: "mediavolumerequest",
MEDIA_SEEK_REQUEST: "mediaseekrequest",
MEDIA_AIRPLAY_REQUEST: "mediaairplayrequest",
MEDIA_ENTER_FULLSCREEN_REQUEST: "mediaenterfullscreenrequest",
MEDIA_EXIT_FULLSCREEN_REQUEST: "mediaexitfullscreenrequest",
MEDIA_PREVIEW_REQUEST: "mediapreviewrequest",
MEDIA_ENTER_PIP_REQUEST: "mediaenterpiprequest",
MEDIA_EXIT_PIP_REQUEST: "mediaexitpiprequest",
MEDIA_ENTER_CAST_REQUEST: "mediaentercastrequest",
MEDIA_EXIT_CAST_REQUEST: "mediaexitcastrequest",
MEDIA_SHOW_TEXT_TRACKS_REQUEST: "mediashowtexttracksrequest",
MEDIA_HIDE_TEXT_TRACKS_REQUEST: "mediahidetexttracksrequest",
MEDIA_SHOW_SUBTITLES_REQUEST: "mediashowsubtitlesrequest",
MEDIA_DISABLE_SUBTITLES_REQUEST: "mediadisablesubtitlesrequest",
MEDIA_TOGGLE_SUBTITLES_REQUEST: "mediatogglesubtitlesrequest",
MEDIA_PLAYBACK_RATE_REQUEST: "mediaplaybackraterequest",
MEDIA_RENDITION_REQUEST: "mediarenditionrequest",
MEDIA_AUDIO_TRACK_REQUEST: "mediaaudiotrackrequest",
MEDIA_SEEK_TO_LIVE_REQUEST: "mediaseektoliverequest",
REGISTER_MEDIA_STATE_RECEIVER: "registermediastatereceiver",
UNREGISTER_MEDIA_STATE_RECEIVER: "unregistermediastatereceiver"
};
var MediaStateReceiverAttributes = {
MEDIA_CHROME_ATTRIBUTES: "mediachromeattributes",
MEDIA_CONTROLLER: "mediacontroller"
};
var MediaUIProps = {
MEDIA_AIRPLAY_UNAVAILABLE: "mediaAirplayUnavailable",
MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled",
MEDIA_AUDIO_TRACK_LIST: "mediaAudioTrackList",
MEDIA_AUDIO_TRACK_UNAVAILABLE: "mediaAudioTrackUnavailable",
MEDIA_BUFFERED: "mediaBuffered",
MEDIA_CAST_UNAVAILABLE: "mediaCastUnavailable",
MEDIA_CHAPTERS_CUES: "mediaChaptersCues",
MEDIA_CURRENT_TIME: "mediaCurrentTime",
MEDIA_DURATION: "mediaDuration",
MEDIA_ENDED: "mediaEnded",
MEDIA_ERROR: "mediaError",
MEDIA_ERROR_CODE: "mediaErrorCode",
MEDIA_ERROR_MESSAGE: "mediaErrorMessage",
MEDIA_FULLSCREEN_UNAVAILABLE: "mediaFullscreenUnavailable",
MEDIA_HAS_PLAYED: "mediaHasPlayed",
MEDIA_HEIGHT: "mediaHeight",
MEDIA_IS_AIRPLAYING: "mediaIsAirplaying",
MEDIA_IS_CASTING: "mediaIsCasting",
MEDIA_IS_FULLSCREEN: "mediaIsFullscreen",
MEDIA_IS_PIP: "mediaIsPip",
MEDIA_LOADING: "mediaLoading",
MEDIA_MUTED: "mediaMuted",
MEDIA_PAUSED: "mediaPaused",
MEDIA_PIP_UNAVAILABLE: "mediaPipUnavailable",
MEDIA_PLAYBACK_RATE: "mediaPlaybackRate",
MEDIA_PREVIEW_CHAPTER: "mediaPreviewChapter",
MEDIA_PREVIEW_COORDS: "mediaPreviewCoords",
MEDIA_PREVIEW_IMAGE: "mediaPreviewImage",
MEDIA_PREVIEW_TIME: "mediaPreviewTime",
MEDIA_RENDITION_LIST: "mediaRenditionList",
MEDIA_RENDITION_SELECTED: "mediaRenditionSelected",
MEDIA_RENDITION_UNAVAILABLE: "mediaRenditionUnavailable",
MEDIA_SEEKABLE: "mediaSeekable",
MEDIA_STREAM_TYPE: "mediaStreamType",
MEDIA_SUBTITLES_LIST: "mediaSubtitlesList",
MEDIA_SUBTITLES_SHOWING: "mediaSubtitlesShowing",
MEDIA_TARGET_LIVE_WINDOW: "mediaTargetLiveWindow",
MEDIA_TIME_IS_LIVE: "mediaTimeIsLive",
MEDIA_VOLUME: "mediaVolume",
MEDIA_VOLUME_LEVEL: "mediaVolumeLevel",
MEDIA_VOLUME_UNAVAILABLE: "mediaVolumeUnavailable",
MEDIA_LANG: "mediaLang",
MEDIA_WIDTH: "mediaWidth"
};
var MediaUIPropsEntries = Object.entries(
MediaUIProps
);
var MediaUIAttributes = MediaUIPropsEntries.reduce(
(dictObj, [key, propName]) => {
dictObj[key] = propName.toLowerCase();
return dictObj;
},
{}
);
var AdditionalStateChangeEvents = {
USER_INACTIVE_CHANGE: "userinactivechange",
BREAKPOINTS_CHANGE: "breakpointchange",
BREAKPOINTS_COMPUTED: "breakpointscomputed"
};
var MediaStateChangeEvents = MediaUIPropsEntries.reduce(
(dictObj, [key, propName]) => {
dictObj[key] = propName.toLowerCase();
return dictObj;
},
{ ...AdditionalStateChangeEvents }
);
var StateChangeEventToAttributeMap = Object.entries(
MediaStateChangeEvents
).reduce(
(mapObj, [key, eventType]) => {
const attrName = MediaUIAttributes[key];
if (attrName) {
mapObj[eventType] = attrName;
}
return mapObj;
},
{ userinactivechange: "userinactive" }
);
var AttributeToStateChangeEventMap = Object.entries(
MediaUIAttributes
).reduce(
(mapObj, [key, attrName]) => {
const evtType = MediaStateChangeEvents[key];
if (evtType) {
mapObj[attrName] = evtType;
}
return mapObj;
},
{ userinactive: "userinactivechange" }
);
var TextTrackKinds = {
SUBTITLES: "subtitles",
CAPTIONS: "captions",
DESCRIPTIONS: "descriptions",
CHAPTERS: "chapters",
METADATA: "metadata"
};
// ../../node_modules/media-chrome/dist/utils/server-safe-globals.js
var EventTarget2 = class {
addEventListener() {
}
removeEventListener() {
}
dispatchEvent() {
return true;
}
};
var Node = class extends EventTarget2 {
};
var Element = class extends Node {
constructor() {
super(...arguments);
this.role = null;
}
};
var ResizeObserver = class {
observe() {
}
unobserve() {
}
disconnect() {
}
};
var documentShim = {
createElement: function() {
return new globalThisShim2.HTMLElement();
},
createElementNS: function() {
return new globalThisShim2.HTMLElement();
},
addEventListener() {
},
removeEventListener() {
},
dispatchEvent(_event) {
return false;
}
};
var globalThisShim2 = {
ResizeObserver,
document: documentShim,
Node,
Element,
HTMLElement: class HTMLElement2 extends Element {
constructor() {
super(...arguments);
this.innerHTML = "";
}
get content() {
return new globalThisShim2.DocumentFragment();
}
},
DocumentFragment: class DocumentFragment2 extends EventTarget2 {
},
customElements: {
get: function() {
},
define: function() {
},
whenDefined: function() {
}
},
localStorage: {
getItem(_key) {
return null;
},
setItem(_key, _value2) {
},
removeItem(_key) {
}
},
CustomEvent: function CustomEvent3() {
},
getComputedStyle: function() {
},
navigator: {
languages: [],
get userAgent() {
return "";
}
},
matchMedia(media) {
return {
matches: false,
media
};
},
DOMParser: class DOMParser {
parseFromString(string, _contentType) {
return {
body: {
textContent: string
}
};
}
}
};
var isServer2 = typeof window === "undefined" || typeof window.customElements === "undefined";
var isShimmed = Object.keys(globalThisShim2).every((key) => key in globalThis);
var GlobalThis = isServer2 && !isShimmed ? globalThisShim2 : globalThis;
var Document2 = isServer2 && !isShimmed ? documentShim : globalThis.document;
// ../../node_modules/media-chrome/dist/utils/template-parts.js
var __accessCheck2 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet2 = (obj, member, getter) => {
__accessCheck2(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd2 = (obj, member, value) => {
if (member.has(obj))
throw TypeError("Cannot add the same private member more than once");
member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
};
var __privateSet2 = (obj, member, value, setter) => {
__accessCheck2(obj, member, "write to private field");
setter ? setter.call(obj, value) : member.set(obj, value);
return value;
};
var _parts;
var _processor;
var _items;
var _value;
var _element;
var _attributeName;
var _namespaceURI;
var _list;
var list_get;
var _parentNode;
var _nodes;
var ELEMENT = 1;
var STRING = 0;
var PART = 1;
var defaultProcessor = {
processCallback(instance, parts, state) {
if (!state)
return;
for (const [expression, part] of parts) {
if (expression in state) {
const value = state[expression];
if (typeof value === "boolean" && part instanceof AttrPart && typeof part.element[part.attributeName] === "boolean") {
part.booleanValue = value;
} else if (typeof value === "function" && part instanceof AttrPart) {
part.element[part.attributeName] = value;
} else {
part.value = value;
}
}
}
}
};
var TemplateInstance = class extends GlobalThis.DocumentFragment {
constructor(template2, state, processor2 = defaultProcessor) {
var _a3;
super();
__privateAdd2(this, _parts, void 0);
__privateAdd2(this, _processor, void 0);
this.append(template2.content.cloneNode(true));
__privateSet2(this, _parts, parse(this));
__privateSet2(this, _processor, processor2);
(_a3 = processor2.createCallback) == null ? void 0 : _a3.call(processor2, this, __privateGet2(this, _parts), state);
processor2.processCallback(this, __privateGet2(this, _parts), state);
}
update(state) {
__privateGet2(this, _processor).processCallback(this, __privateGet2(this, _parts), state);
}
};
_parts = /* @__PURE__ */ new WeakMap();
_processor = /* @__PURE__ */ new WeakMap();
var parse = (element, parts = []) => {
let type, value;
for (const attr of element.attributes || []) {
if (attr.value.includes("{{")) {
const list = new AttrPartList();
for ([type, value] of tokenize(attr.value)) {
if (!type)
list.append(value);
else {
const part = new AttrPart(element, attr.name, attr.namespaceURI);
list.append(part);
parts.push([value, part]);
}
}
attr.value = list.toString();
}
}
for (const node of element.childNodes) {
if (node.nodeType === ELEMENT && !(node instanceof HTMLTemplateElement)) {
parse(node, parts);
} else {
const data = node.data;
if (node.nodeType === ELEMENT || data.includes("{{")) {
const items = [];
if (data) {
for ([type, value] of tokenize(data))
if (!type)
items.push(new Text(value));
else {
const part = new ChildNodePart(element);
items.push(part);
parts.push([value, part]);
}
} else if (node instanceof HTMLTemplateElement) {
const part = new InnerTemplatePart(element, node);
items.push(part);
parts.push([part.expression, part]);
}
node.replaceWith(
...items.flatMap((part) => part.replacementNodes || [part])
);
}
}
}
return parts;
};
var mem = {};
var tokenize = (text) => {
let value = "", open = 0, tokens = mem[text], i = 0, c;
if (tokens)
return tokens;
else
tokens = [];
for (; c = text[i]; i++) {
if (c === "{" && text[i + 1] === "{" && text[i - 1] !== "\\" && text[i + 2] && ++open == 1) {
if (value)
tokens.push([STRING, value]);
value = "";
i++;
} else if (c === "}" && text[i + 1] === "}" && text[i - 1] !== "\\" && !--open) {
tokens.push([PART, value.trim()]);
value = "";
i++;
} else
value += c || "";
}
if (value)
tokens.push([STRING, (open > 0 ? "{{" : "") + value]);
return mem[text] = tokens;
};
var FRAGMENT = 11;
var Part = class {
get value() {
return "";
}
set value(val) {
}
toString() {
return this.value;
}
};
var attrPartToList = /* @__PURE__ */ new WeakMap();
var AttrPartList = class {
constructor() {
__privateAdd2(this, _items, []);
}
[Symbol.iterator]() {
return __privateGet2(this, _items).values();
}
get length() {
return __privateGet2(this, _items).length;
}
item(index) {
return __privateGet2(this, _items)[index];
}
append(...items) {
for (const item of items) {
if (item instanceof AttrPart) {
attrPartToList.set(item, this);
}
__privateGet2(this, _items).push(item);
}
}
toString() {
return __privateGet2(this, _items).join("");
}
};
_items = /* @__PURE__ */ new WeakMap();
var AttrPart = class extends Part {
constructor(element, attributeName, namespaceURI) {
super();
__privateAdd2(this, _list);
__privateAdd2(this, _value, "");
__privateAdd2(this, _element, void 0);
__privateAdd2(this, _attributeName, void 0);
__privateAdd2(this, _namespaceURI, void 0);
__privateSet2(this, _element, element);
__privateSet2(this, _attributeName, attributeName);
__privateSet2(this, _namespaceURI, namespaceURI);
}
get attributeName() {
return __privateGet2(this, _attributeName);
}
get attributeNamespace() {
return __privateGet2(this, _namespaceURI);
}
get element() {
return __privateGet2(this, _element);
}
get value() {
return __privateGet2(this, _value);
}
set value(newValue) {
if (__privateGet2(this, _value) === newValue)
return;
__privateSet2(this, _value, newValue);
if (!__privateGet2(this, _list, list_get) || __privateGet2(this, _list, list_get).length === 1) {
if (newValue == null) {
__privateGet2(this, _element).removeAttributeNS(
__privateGet2(this, _namespaceURI),
__privateGet2(this, _attributeName)
);
} else {
__privateGet2(this, _element).setAttributeNS(
__privateGet2(this, _namespaceURI),
__privateGet2(this, _attributeName),
newValue
);
}
} else {
__privateGet2(this, _element).setAttributeNS(
__privateGet2(this, _namespaceURI),
__privateGet2(this, _attributeName),
__privateGet2(this, _list, list_get).toString()
);
}
}
get booleanValue() {
return __privateGet2(this, _element).hasAttributeNS(
__privateGet2(this, _namespaceURI),
__privateGet2(this, _attributeName)
);
}
set booleanValue(value) {
if (!__privateGet2(this, _list, list_get) || __privateGet2(this, _list, list_get).length === 1)
this.value = value ? "" : null;
else
throw new DOMException("Value is not fully templatized");
}
};
_value = /* @__PURE__ */ new WeakMap();
_element = /* @__PURE__ */ new WeakMap();
_attributeName = /* @__PURE__ */ new WeakMap();
_namespaceURI = /* @__PURE__ */ new WeakMap();
_list = /* @__PURE__ */ new WeakSet();
list_get = function() {
return attrPartToList.get(this);
};
var ChildNodePart = class extends Part {
constructor(parentNode, nodes) {
super();
__privateAdd2(this, _parentNode, void 0);
__privateAdd2(this, _nodes, void 0);
__privateSet2(this, _parentNode, parentNode);
__privateSet2(this, _nodes, nodes ? [...nodes] : [new Text()]);
}
get replacementNodes() {
return __privateGet2(this, _nodes);
}
get parentNode() {
return __privateGet2(this, _parentNode);
}
get nextSibling() {
return __privateGet2(this, _nodes)[__privateGet2(this, _nodes).length - 1].nextSibling;
}
get previousSibling() {
return __privateGet2(this, _nodes)[0].previousSibling;
}
// FIXME: not sure why do we need string seria