@mux/mux-player
Version:
An open source Mux player web component that Just Worksâ„¢
5,313 lines • 178 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/news/news.html
var news_default = `<template id="media-theme-news">
<style>
media-controller {
font-size: 13px;
font-family: Roboto, Arial, sans-serif;
--media-font-family: Roboto, helvetica neue, segoe ui, arial, sans-serif;
-webkit-font-smoothing: antialiased;
--media-secondary-color: transparent;
--media-menu-background: rgba(28, 28, 28, 0.9);
--media-control-hover-background: var(--media-secondary-color);
--media-range-track-height: 3px;
--media-range-thumb-height: 13px;
--media-range-thumb-width: 13px;
--media-range-thumb-border-radius: 13px;
--media-preview-thumbnail-border: 2px solid #fff;
--media-preview-thumbnail-border-radius: 2px;
--media-tooltip-display: none;
}
/* The biggest size controller is tied to going fullscreen
instead of a player width */
media-controller[mediaisfullscreen] {
font-size: 17px;
--media-range-thumb-height: 20px;
--media-range-thumb-width: 20px;
--media-range-thumb-border-radius: 10px;
--media-range-track-height: 4px;
}
.nw-button {
position: relative;
display: inline-block;
width: 36px;
padding: 0 2px;
height: 100%;
opacity: 0.9;
transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);
}
[breakpointmd] .nw-button {
width: 48px;
}
[mediaisfullscreen] .nw-button {
width: 54px;
}
.nw-button svg {
height: 100%;
width: 100%;
fill: var(--media-primary-color, #fff);
fill-rule: evenodd;
}
.svg-shadow {
stroke: #000;
stroke-opacity: 0.15;
stroke-width: 2px;
fill: none;
}
</style>
<media-controller
breakpoints="md:480"
defaultsubtitles="{{defaultsubtitles}}"
defaultduration="{{defaultduration}}"
gesturesdisabled="{{disabled}}"
hotkeys="{{hotkeys}}"
nohotkeys="{{nohotkeys}}"
mediaadbreak="{{mediaadbreak}}"
part="controller"
>
<slot name="media" slot="media"></slot>
<slot name="poster" slot="poster"></slot>
<media-error-dialog slot="dialog"></media-error-dialog>
<!-- Gradient -->
<style>
.nw-gradient-bottom {
padding-top: 37px;
position: absolute;
width: 100%;
height: 170px;
bottom: 0;
z-index: 2;
pointer-events: none;
background-position: bottom;
background-repeat: repeat-x;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACqCAYAAABsziWkAAAAAXNSR0IArs4c6QAAAQVJREFUOE9lyNdHBQAAhfHb3nvvuu2997jNe29TJJEkkkgSSSSJJJJEEkkiifRH5jsP56Xz8PM5gcC/xfDEmjhKxEOCSaREEiSbFEqkQppJpzJMJiWyINvkUCIX8kw+JQqg0BRRxaaEEqVQZsopUQGVpooS1VBjglStqaNEPTSYRko0QbNpoUQrtJl2qsN0UqILuk0PJXqhz/RTYgAGzRA1bEYoMQpjZpwSExAyk5SYgmkzQ82aOUqEIWKilJiHBbNIiSVYhhVYhTVYhw3YhC3Yhh3YhT3YhwM4hCM4hhM4hTM4hwu4hCu4hhu4hTu4hwd4hCd4hhd4hTd4hw/4hC/4hh/4/QM2/id28uIEJAAAAABJRU5ErkJggg==');
}
</style>
<div class="nw-gradient-bottom"></div>
<!-- Rendition Menu -->
<style>
media-rendition-menu,
media-captions-menu {
position: absolute;
border-radius: 0.3rem;
right: 12px;
bottom: 61px;
z-index: 70;
will-change: width, height;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1);
user-select: none;
--media-settings-menu-min-width: 220px;
--media-menu-item-checked-background: #f72210;
--media-menu-item-checked-indicator-display: none;
font-weight: 500;
}
[mediaisfullscreen] media-rendition-menu {
--media-settings-menu-min-width: 320px;
right: 24px;
bottom: 70px;
}
media-chrome-menu-item {
height: 40px;
font-size: 13px;
font-weight: 500;
padding-top: 0;
padding-bottom: 0;
}
[mediaisfullscreen] media-settings-menu-item {
font-size: 20px;
height: 50px;
}
media-settings-menu-item[submenusize='0'] {
display: none;
}
/* Also hide if only 'Auto' is added. */
.quality-settings[submenusize='1'] {
display: none;
}
</style>
<media-rendition-menu anchor="auto" hidden> </media-rendition-menu>
<media-captions-menu hidden anchor="auto"></media-captions-menu>
<!-- Time Range / Progress Bar -->
<style>
media-play-button[slot='centered-chrome'] {
display: grid;
grid-template-columns: 1.5rem auto;
align-items: center;
gap: 1.2rem;
background: #000;
border-radius: 2rem;
opacity: 1;
padding: 1rem;
font-size: 1.3rem;
font-weight: 400;
text-transform: uppercase;
margin: 0;
}
media-play-button[slot='centered-chrome'] {
display: none;
}
media-play-button[slot='centered-chrome'][mediapaused] {
display: block;
line-height: 1;
color: white;
}
media-play-button[slot='centered-chrome'][mediapaused]:hover {
color: #f72210;
}
media-play-button[slot='centered-chrome'] p {
margin: 0;
align-items: center;
display: flex;
gap: 0.25rem;
}
media-play-button[slot='centered-chrome'] svg {
width: 1.8rem;
height: auto;
}
media-play-button[slot='centered-chrome'] media-duration-display {
display: none;
font-size: 1.3rem;
}
media-controller[mediacurrenttime='0'] media-duration-display {
display: block;
color: inherit;
padding: 0 0.3rem;
}
media-controller:not([mediacurrenttime='0']) media-duration-display {
display: none;
}
media-controller[mediacurrenttime='0'] media-play-button[slot='centered-chrome'] span {
display: none;
}
</style>
<media-play-button slot="centered-chrome">
<p slot="play">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18ZM10 0C8.68678 0 7.38642 0.258658 6.17317 0.761205C4.95991 1.26375 3.85752 2.00035 2.92893 2.92893C1.05357 4.8043 0 7.34784 0 10C0 12.6522 1.05357 15.1957 2.92893 17.0711C3.85752 17.9997 4.95991 18.7362 6.17317 19.2388C7.38642 19.7413 8.68678 20 10 20C12.6522 20 15.1957 18.9464 17.0711 17.0711C18.9464 15.1957 20 12.6522 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7362 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0ZM8 14.5L14 10L8 5.5V14.5Z"
fill="currentColor"
/>
</svg>
<span>Continue</span>
<media-duration-display></media-duration-display>
</p>
</media-play-button>
<!-- Time Range / Progress Bar -->
<style>
media-time-range {
position: absolute;
bottom: 36px;
width: 100%;
height: 5px;
z-index: 2;
--media-range-track-background: rgba(255, 255, 255, 0.2);
--media-range-track-pointer-background: rgba(255, 255, 255, 0.5);
--media-time-range-buffered-color: rgba(255, 255, 255, 0.4);
--media-range-bar-color: var(--media-accent-color, #f72210);
--media-range-thumb-border-radius: 13px;
--media-range-thumb-background: var(--media-accent-color, #f72210);
--media-range-thumb-transition: transform 0.1s linear;
--media-range-thumb-transform: scale(0) translate(0%, 0%);
}
media-time-range:hover {
--media-range-track-height: 5px;
--media-range-thumb-transform: scale(1) translate(0%, 0%);
}
[breakpointmd] media-time-range {
bottom: 47px;
}
[mediaisfullscreen] media-time-range {
bottom: 52.5px;
height: 8px;
}
[mediaisfullscreen] media-time-range:hover {
--media-range-track-height: 8px;
}
media-preview-thumbnail {
margin-bottom: 5px;
}
media-preview-chapter-display {
padding-block: 0;
}
media-preview-time-display {
padding-top: 0;
background: #d8d8d8;
color: black;
padding: 0.25rem 0.5rem;
text-shadow: none;
display: block !important;
opacity: 1;
margin-bottom: 1rem;
}
</style>
<media-time-range>
<media-preview-thumbnail slot="preview"></media-preview-thumbnail>
<media-preview-chapter-display slot="preview"></media-preview-chapter-display>
<media-preview-time-display slot="preview"></media-preview-time-display>
</media-time-range>
<!-- Control Bar -->
<style>
media-control-bar {
position: absolute;
height: 36px;
line-height: 36px;
bottom: 0;
left: 12px;
right: 12px;
z-index: 3;
}
[breakpointmd] media-control-bar {
height: 48px;
line-height: 48px;
}
[mediaisfullscreen] media-control-bar {
height: 54px;
line-height: 54px;
}
</style>
<media-control-bar>
<!-- Play/Pause -->
<style>
media-play-button {
--media-button-icon-width: 30px;
padding: 6px 10px;
}
media-play-button :is(#play-p1, #play-p2, #pause-p1, #pause-p2) {
transition: clip-path 0.25s ease-in;
}
/* Slow down the play icon part hiding slightly
to achieve the morphing look a little better */
media-play-button:not([mediapaused]) #play-p2,
media-play-button:not([mediapaused]) #play-p2 {
transition: clip-path 0.35s ease-in;
}
/* Show icon */
media-play-button :is(#pause-p1, #pause-p2),
media-play-button[mediapaused] :is(#play-p1, #play-p2) {
clip-path: inset(0);
}
/* Hide icon wth clip path mask */
media-play-button #play-p1 {
clip-path: inset(0 100% 0 0);
}
media-play-button #play-p2 {
clip-path: inset(0 20% 0 100%);
}
media-play-button[mediapaused] #pause-p1 {
clip-path: inset(50% 0 50% 0);
}
media-play-button[mediapaused] #pause-p2 {
clip-path: inset(50% 0 50% 0);
}
</style>
<media-play-button mediapaused class="nw-button">
<svg slot="icon" viewBox="0 0 36 36">
<use class="svg-shadow" xlink:href="#icon-play"></use>
<g id="icon-play">
<path id="play-p1" d="M18.5 14L12 10V26L18.5 22V14Z" />
<path id="play-p2" d="M18 13.6953L25 18L18 22.3086V13.6953Z" />
<path id="pause-p1" d="M16 10H12V26H16V10Z" />
<path id="pause-p2" d="M21 10H25V26H21V10Z" />
</g>
</svg>
</media-play-button>
<template if="mediaadbreak == null">
<media-seek-backward-button seekoffset="10">
<svg slot="icon" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.908 21.7465C16.616 21.2426 16.2047 20.8212 15.7116 20.5206C15.2185 20.22 14.6594 20.0499 14.0851 20.0257C13.5109 20.0499 12.9518 20.22 12.4587 20.5206C11.9656 20.8212 11.5543 21.2426 11.2623 21.7465C10.5893 22.8804 10.2336 24.18 10.2336 25.5047C10.2336 26.8295 10.5893 28.129 11.2623 29.2629C11.5543 29.7668 11.9656 30.1882 12.4587 30.4888C12.9518 30.7894 13.5109 30.9595 14.0851 30.9838C14.6594 30.9595 15.2185 30.7894 15.7116 30.4888C16.2047 30.1882 16.616 29.7668 16.908 29.2629C17.581 28.129 17.9367 26.8295 17.9367 25.5047C17.9367 24.18 17.581 22.8804 16.908 21.7465ZM14.0851 29.409C12.8412 29.409 11.7886 27.6233 11.7886 25.4966C11.7886 23.3699 12.8412 21.5841 14.0851 21.5841C15.3291 21.5841 16.3817 23.3699 16.3817 25.4966C16.3817 27.6233 15.3451 29.409 14.0851 29.409ZM7.16351 30.9838V22.7043L6.39798 23.4836L5.31349 22.3796L7.38679 20.2692C7.49386 20.1598 7.63043 20.0853 7.77917 20.0551C7.92792 20.0248 8.08213 20.0403 8.22225 20.0994C8.36236 20.1585 8.48206 20.2587 8.56615 20.3872C8.65024 20.5157 8.69493 20.6667 8.69456 20.8211V31L7.16351 30.9838ZM33 9.8468V30.1883C32.9972 30.3941 32.9157 30.5907 32.7727 30.7362C32.6298 30.8817 32.4366 30.9647 32.2345 30.9675H22.2348V27.8343H29.9219V12.1845H11.4696V15.3177C11.4696 16.1782 10.8954 16.4866 10.1937 16.0158L3.52726 11.4865C3.30225 11.371 3.13094 11.17 3.05035 10.927C2.96977 10.6839 2.98641 10.4184 3.09666 10.1877C3.18836 9.99697 3.33987 9.84275 3.52726 9.7494L10.1937 5.22005C10.8954 4.74926 11.4696 5.05771 11.4696 5.91812V9.05133H32.2185C32.4248 9.05443 32.6218 9.13923 32.7677 9.28775C32.9136 9.43626 32.997 9.6368 33 9.8468Z"
fill="currentColor"
/>
</svg>
</media-seek-backward-button>
</template>
<!-- Time Display -->
<style>
media-time-display {
padding-top: 6px;
padding-bottom: 6px;
font-size: 13px;
}
[mediaisfullscreen] media-time-display {
font-size: 20px;
}
</style>
<template if="mediaadbreak == null">
<media-time-display showduration></media-time-display>
</template>
<template if="mediaadbreak != null">
Advertisement
<media-time-display remaining></media-time-display>
</template>
<!-- Control Spacer -->
<style>
.control-spacer {
flex-grow: 1;
}
</style>
<span class="control-spacer"></span>
<!-- Volume/Mute -->
<style>
media-mute-button :is(#icon-muted, #icon-volume) {
transition: clip-path 0.3s ease-out;
}
media-mute-button #icon-muted {
clip-path: inset(0 0 100% 0);
}
media-mute-button[mediavolumelevel='off'] #icon-muted {
clip-path: inset(0);
}
media-mute-button #icon-volume {
clip-path: inset(0);
}
media-mute-button[mediavolumelevel='off'] #icon-volume {
clip-path: inset(100% 0 0 0);
}
media-mute-button #volume-high,
media-mute-button[mediavolumelevel='off'] #volume-high {
opacity: 1;
transition: opacity 0.3s;
}
media-mute-button[mediavolumelevel='low'] #volume-high,
media-mute-button[mediavolumelevel='medium'] #volume-high {
opacity: 0.2;
}
media-volume-range {
height: 36px;
--media-range-track-background: rgba(255, 255, 255, 0.2);
}
media-mute-button + media-volume-range {
width: 0;
overflow: hidden;
transition: width 0.2s ease-in;
}
/* Expand volume control in all relevant states */
media-mute-button:hover + media-volume-range,
media-mute-button:focus + media-volume-range,
media-mute-button:focus-within + media-volume-range,
media-volume-range:hover,
media-volume-range:focus,
media-volume-range:focus-within {
width: 70px;
}
</style>
<media-mute-button class="nw-button">
<svg slot="icon" viewBox="0 0 36 36">
<g id="icon-volume">
<path id="speaker" d="M13 15H9V21H13L18 26V10L13 15Z" />
<path
id="volume-low"
d="M20 22.0323C21.4818 21.2959 22.5 19.7669 22.5 18C22.5 16.2332 21.4818 14.7041 20 13.9678V22.0323Z"
/>
<path
id="volume-high"
d="M20 9.22302V11.2899C22.8915 12.1505 25 14.829 25 18C25 21.171 22.8915 23.8495 20 24.7101V26.777C24.008 25.8675 27 22.2832 27 18C27 13.7168 24.008 10.1325 20 9.22302Z"
/>
</g>
<g id="icon-muted">
<path
d="M10.2207 8.80817L8.80762 10.2213L13.2929 14.7065L13 14.9995H9V20.9995H13L18 25.9995V19.4136L22.1922 23.6058C21.5401 24.0942 20.8 24.4715 20 24.7096V26.7764C21.3453 26.4712 22.5761 25.8646 23.6177 25.0314L25.7782 27.1918L27.1924 25.7776L27.1913 25.7766L27.1902 25.7776L10.2207 8.80817Z"
/>
<path
d="M25.8817 22.3478C26.5944 21.0589 27 19.5766 27 17.9995C27 13.7163 24.008 10.132 20 9.22247V11.2894C22.8915 12.1499 25 14.8284 25 17.9995C25 19.0177 24.7826 19.9851 24.3917 20.8578L25.8817 22.3478Z"
/>
<path
d="M22.4139 18.88C22.4704 18.5952 22.5 18.3008 22.5 17.9995C22.5 16.2326 21.4818 14.7036 20 13.9672V16.4661L22.4139 18.88Z"
/>
<path d="M18 14.4661V9.99945L15.7667 12.2328L18 14.4661Z" />
</g>
</svg>
</media-mute-button>
<media-volume-range></media-volume-range>
<!-- Settings Menu Button -->
<template if="mediaadbreak == null">
<style>
media-settings-menu-button svg {
transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
transform: rotateZ(0deg);
}
media-settings-menu-button[aria-expanded='true'] svg {
transform: rotateZ(30deg);
}
</style>
<media-rendition-menu-button class="nw-button">
<svg slot="icon" viewBox="0 0 36 36">
<use class="svg-shadow" xlink:href="#settings-icon"></use>
<path
id="settings-icon"
d="M11.8153 12.0477L14.2235 12.9602C14.6231 12.6567 15.0599 12.3996 15.5258 12.1971L15.9379 9.66561C16.5985 9.50273 17.2891 9.41632 18 9.41632C18.7109 9.41632 19.4016 9.50275 20.0622 9.66566L20.4676 12.1555C20.9584 12.3591 21.418 12.6227 21.8372 12.9372L24.1846 12.0477C25.1391 13.0392 25.8574 14.2597 26.249 15.6186L24.3196 17.1948C24.3531 17.4585 24.3704 17.7272 24.3704 18C24.3704 18.2727 24.3531 18.5415 24.3196 18.8051L26.249 20.3814C25.8574 21.7403 25.1391 22.9607 24.1846 23.9522L21.8372 23.0628C21.4179 23.3772 20.9584 23.6408 20.4676 23.8445L20.0622 26.3343C19.4016 26.4972 18.7109 26.5836 18 26.5836C17.2891 26.5836 16.5985 26.4972 15.9379 26.3344L15.5258 23.8029C15.0599 23.6003 14.6231 23.3433 14.2236 23.0398L11.8154 23.9523C10.8609 22.9608 10.1426 21.7404 9.75098 20.3815L11.7633 18.7375C11.7352 18.4955 11.7208 18.2495 11.7208 18C11.7208 17.7505 11.7352 17.5044 11.7633 17.2625L9.75098 15.6185C10.1426 14.2596 10.8609 13.0392 11.8153 12.0477ZM18 20.75C19.5188 20.75 20.75 19.5188 20.75 18C20.75 16.4812 19.5188 15.25 18 15.25C16.4812 15.25 15.25 16.4812 15.25 18C15.25 19.5188 16.4812 20.75 18 20.75Z"
/>
</svg>
</media-rendition-menu-button>
<media-captions-menu-button></media-captions-menu-button>
</template>
<!-- Fullscreen Button -->
<style>
/* Having trouble getting @property to work in the shadow dom
to clean this up. Like https://codepen.io/luwes/pen/oNRyZyx */
media-fullscreen-button path {
translate: 0% 0%;
}
media-fullscreen-button:hover path {
animation: 0.35s up-left-bounce cubic-bezier(0.34, 1.56, 0.64, 1);
}
media-fullscreen-button:hover .urbounce {
animation-name: up-right-bounce;
}
media-fullscreen-button:hover .dlbounce {
animation-name: down-left-bounce;
}
media-fullscreen-button:hover .drbounce {
animation-name: down-right-bounce;
}
@keyframes up-left-bounce {
0% {
translate: 0 0;
}
50% {
translate: -4% -4%;
}
}
@keyframes up-right-bounce {
0% {
translate: 0 0;
}
50% {
translate: 4% -4%;
}
}
@keyframes down-left-bounce {
0% {
translate: 0 0;
}
50% {
translate: -4% 4%;
}
}
@keyframes down-right-bounce {
0% {
translate: 0 0;
}
50% {
translate: 4% 4%;
}
}
</style>
<media-fullscreen-button class="nw-button">
<svg slot="enter" viewBox="0 0 36 36">
<use class="svg-shadow" xlink:href="#fs-enter-paths"></use>
<g id="fs-enter-paths">
<path class="ulbounce" d="M11 15H9V9H15V11H11V15Z" />
<path class="urbounce" d="M21 11L21 9L27 9L27 15L25 15L25 11L21 11Z" />
<path class="dlbounce" d="M15 25L15 27L9 27L9 21L11 21L11 25L15 25Z" />
<path class="drbounce" d="M25 21L27 21L27 27L21 27L21 25L25 25L25 21Z" />
</g>
</svg>
<svg slot="exit" viewBox="0 0 36 36">
<use class="svg-shadow" xlink:href="#fs-exit-paths"></use>
<g id="fs-exit-paths">
<path class="drbounce" d="M14 9L16 9L16 16L9 16L9 14L14 14L14 9Z" />
<path class="dlbounce" d="M27 14L27 16L20 16L20 9L22 9L22 14L27 14Z" />
<path class="urbounce" d="M9 22L9 20L16 20L16 27L14 27L14 22L9 22Z" />
<path class="ulbounce" d="M22 27H20V20H27V22H22V27Z" />
</g>
</svg>
</media-fullscreen-button>
</media-control-bar>
</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_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 serialization here? Just because parent class has type DOMString?
get value() {
return __privateGet2(this, _nodes).map((node) => node.textContent).join("");
}
set value(newValue) {
this.replace(newValue);
}
replace(...nodes) {
const normalisedNodes = nodes.flat().flatMap(
(node) => node == null ? [new Text()] : node.forEach ? [...node] : node.nodeType === FRAGMENT ? [...node.childNodes] : node.nodeType ? [node] : [new Text(node)]
);
if (!normalisedNodes.length)
normalisedNodes.push(new Text());
__privateSet2(this, _nodes, swapdom(
__privateGet2(this, _nodes)[0].parentNode,
__privateGet2(this, _nodes),
normalisedNodes,
this.nextSibling
));
}
};
_parentNode = /* @__PURE__ */ new WeakMap();
_nodes = /* @__PURE__ */ new WeakMap();
var InnerTemplatePart = class extends ChildNodePart {
constructor(parentNode, template2) {
const directive = template2.getAttribute("directive") || template2.getAttribute("type");
let expression = template2.getAttribute("expression") || template2.getAttribute(directive) || "";
if (expression.startsWith("{{"))
expression = expression.trim().slice(2, -2).trim();
super(parentNode);
this.expression = expression;
this.template = template2;
this.directive = directive;
}
};
function swapdom(parent, a, b, end = null) {
let i = 0, cur, next, bi, n = b.length, m = a.length;
while (i < n && i < m && a[i] == b[i])
i++;
while (i < n && i < m && b[n - 1] == a[m - 1])
end = b[--m, --n];
if (i == m)
while (i < n)
parent.insertBefore(b[i++], end);
if (i == n)
while (i < m)
parent.removeChild(a[i++]);
else {
cur = a[i];
while (i < n) {
bi = b[i++], next = cur ? cur.nextSibling : end;
if (cur == bi)
cur = next;
else if (i < n && b[i] == next)
parent.replaceChild(bi, cur), cur = next;
else
parent.insertBefore(bi, cur);
}
while (cur != end)
next = cur.nextSibling, parent.removeChild(cur), cur = next;
}
return b;
}
// ../../node_modules/media-chrome/dist/utils/utils.js
function parseRenditionList(renditions) {
return renditions == null ? void 0 : renditions.split(/\s+/).map(parseRendition);
}
function parseRendition(rendition) {
if (rendition) {
const [id, width, height] = rendition.split(":");
return { id, width: +width, height: +height };
}
}
function parseAudioTrackList(audioTracks) {
return audioTracks == null ? void 0 : audioTracks.split(/\s+/).map(parseAudioTrack);
}
function parseAudioTrack(audioTrack) {
if (audioTrack) {
const [id, kind, language, label] = audioTrack.split(":");
return {
id,
kind,
language,
label
};
}
}
function camelCase(name) {
return name.replace(/[-_]([a-z])/g, ($0, $1) => $1.toUpperCase());
}
function isNumericString(str) {
if (typeof str != "string")
return false;
return !isNaN(str) && !isNaN(parseFloat(str));
}
// ../../node_modules/media-chrome/dist/utils/template-processor.js
var pipeModifiers = {
string: (value) => String(value)
};
var PartialTemplate = class {
constructor(template2) {
this.template = template2;
this.state = void 0;
}
};
var templates = /* @__PURE__ */ new WeakMap();
var templateInstances = /* @__PURE__ */ new WeakMap();
var Directives = {
partial: (part, state) => {
state[part.expression] = new PartialTemplate(part.template);
},
if: (part, state) => {
var _a3;
if (evaluateExpression(part.expression, state)) {
if (templates.get(part) !== part.template) {
templates.set(part, part.template);
const tpl = new TemplateInstance(part.template, state, processor);
part.replace(tpl);
templateInstances.set(part, tpl);
} else {
(_a3 = templateInstances.get(part)) == null ? void 0 : _a3.update(state);
}
} else {
part.replace("");
templates.delete(part);
templateInstances.delete(part);
}
}
};
var DirectiveNames = Object.keys(Directives);
var processor = {
processCallback(instance, parts, state) {
var _a3, _b2;
if (!state)
return;
for (const [expression, part] of parts) {
if (part instanceof InnerTemplatePart) {
if (!part.directive) {
const directive = DirectiveNames.find(
(n) => part.template.hasAttribute(n)
);
if (directive) {
part.directive = directive;
part.expression = part.template.getAttribute(directive);
}
}
(_a3 = Directives[part.directive]) == null ? void 0 : _a3.call(Directives, part, state);
continue;
}
let value = evaluateExpression(expression, state);
if (value instanceof PartialTemplate) {
if (templates.get(part) !== value.template) {
templates.set(part, value.template);
value = new TemplateInstance(value.template, value.state, processor);
part.value = value;
templateInstances.set(part, value);
} else {
(_b2 = templateInstances.get(part)) == null ? void 0 : _b2.update(value.state);
}
continue;
}
if (value) {
if (part instanceof AttrPart) {
if (part.attributeName.startsWith("aria-")) {
value = String(value);
}
}
if (part instanceof AttrPart) {
if (typeof value === "boolean") {
part.booleanValue = value;
} else if (typeof value === "function") {
part.element[part.attributeName] = value;
} else {
part.value = value;
}
} else {
part.value = value;
templates.delete(part);
templateInstances.delete(part);
}
} else {
if (part instanceof AttrPart) {
part.value = void 0;
} else {
part.value = void 0;
templates.delete(part);
templateInstances.delete(part);
}
}
}
}
};
var operators = {
"!": (a) => !a,
"!!": (a) => !!a,
"==": (a, b) => a == b,
"!=": (a, b) => a != b,
">": (a, b) => a > b,
">=": (a, b) => a >= b,
"<": (a, b) => a < b,
"<=": (a, b) => a <= b,
"??": (a, b) => a != null ? a : b,
"|": (a, b) => {
var _a3;
return (_a3 = pipeModifiers[b]) == null ? void 0 : _a3.call(pipeModifiers, a);
}
};
function tokenizeExpression(expr) {
return tokenize2(expr, {
boolean: /true|false/,
number: /-?\d+\.?\d*/,
string: /(["'])((?:\\.|[^\\])*?)\1/,
operator: /[!=><][=!]?|\?\?|\|/,
ws: /\s+/,
param: /[$a-z_][$\w]*/i
}).filter(({ type }) => type !== "ws");
}
function evaluateExpression(expr, state = {}) {
var _a3, _b2, _c, _d, _e, _f, _g;
const tokens = tokenizeExpression(expr);
if (tokens.length === 0 || tokens.some(({ type }) => !type)) {
return invalidExpression(expr);
}
if (((_a3 = tokens[0]) == null ? void 0 : _a3.token) === ">") {
const partial = state[(_b2 = tokens[1]) == null ? void 0 : _b2.token];
if (!partial) {
return invalidExpression(expr);
}
const partialState = { ...state };
partial.state = partialState;
const args = tokens.slice(2);
for (let i = 0; i < args.length; i += 3) {
const name = (_c = args[i]) == null ? void 0 : _c.token;
const operator = (_d = args[i + 1]) == null ? void 0 : _d.token;
const value = (_e = args[i + 2]) == null ? void 0 : _e.token;
if (name && operator === "=") {
partialState[name] = getParamValue(value, state);
}
}
return partial;
}
if (tokens.length === 1) {
if (!isValidParam(tokens[0])) {
return invalidExpression(expr);
}
return getParamValue(tokens[0].token, state);
}
if (tokens.length === 2) {
const operator = (_f = tokens[0]) == null ? void 0 : _f.token;
const run = operators[operator];
if (!run || !isValidParam(tokens[1])) {
return invalidExpression(expr);
}
const a = getParamValue(tokens[1].token, state);
return run(a);
}
if (tokens.length === 3) {
const operator = (_g = tokens[1]) == null ? void 0 : _g.token;
const run = operators[operator];
if (!run || !isValidParam(tokens[0]) || !isValidParam(tokens[2])) {
return invalidExpression(expr);
}
const a = getParamValue(tokens[0].token, state);
if (operator === "|") {
return run(a, tokens[2].token);
}
const b = getParamValue(tokens[2].token, state);
return run(a, b);
}
}
function invalidExpression(expr) {
console.warn(`Warning: invalid expression \`${expr}\``);
return false;
}
function isValidParam({ type }) {
return ["number", "boolean", "string", "param"].includes(type);
}
function getParamValue(raw, state) {
const firstChar = raw[0];
const lastChar = raw.slice(-1);
if (raw === "true" || raw === "false") {
return raw === "true";
}
if (firstChar === lastChar && [`'`, `"`].includes(firstChar)) {
return raw.slice(1, -1);
}
if (isNumericString(raw)) {
return parseFloat(raw);
}
return state[raw];
}
function tokenize2(str, parsers) {
let len, match, token;
const tokens = [];
while (str) {
token = null;
len = str.length;
for (const key in parsers) {
match = parsers[key].exec(str);
if (match && match.index < len) {
token = {
token: match[0],
type: key,
matches: match.slice(1)
};
len = match.index;
}
}
if (len) {
tokens.push({
token: str.substr(0, len),
type: void 0
});
}
if (token) {
tokens.push(token);
}
str = str.substr(len + (token ? token.token.length : 0));
}
return tokens;
}
// ../../node_modules/media-chrome/dist/media-theme-element.js
var __accessCheck3 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet3 = (obj, member, getter) => {
__accessCheck3(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd3 = (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 __privateSet3 = (obj, member, value, setter) => {
__accessCheck3(obj, member, "write to private field");
setter ? setter.call(obj, value) : member.set(obj, value);
return value;
};
var __privateMethod = (obj, member, method) => {
__accessCheck3(obj, member, "access private method");
return method;
};
var _template;
var _prevTemplate;
var _prevTemplateId;
var _upgradeProperty;
var upgradeProperty_fn;
var _updateTemplate;
var updateTemplate_fn;
var observedMediaAttributes = {
mediatargetlivewindow: "targetlivewindow",
mediastreamtype: "streamtype"
};
var prependTemplate = Document2.createElement("template");
prependTemplate.innerHTML = /*html*/
`
<style>
:host {
display: inline-block;
line-height: 0;
}
media-controller {
width: 100%;
height: 100%;
}
media-captions-button:not([mediasubtitleslist]),
media-captions-menu:not([mediasubtitleslist]),
media-captions-menu-button:not([mediasubtitleslist]),
media-audio-track-menu[mediaaudiotrackunavailable],
media-audio-track-menu-button[mediaaudiotrackunavailable],
media-rendition-menu[mediarenditionunavailable],
media-rendition-menu-button[mediarenditionunavailable],
media-volume-range[mediavolumeunavailable],
media-airplay-button[mediaairplayunavailable],
media-fullscreen-button[mediafullscreenunavailable],
media-cast-button[mediacastunavailable],
media-pip-button[mediapipunavailable] {
display: none;
}
</style>
`;
var MediaThemeElement = class extends GlobalThis.HTMLElement {
constructor() {
super();
__privateAdd3(this, _upgradeProperty);
__privateAdd3(this, _updateTemplate);
__privateAdd3(this, _template, void 0);
__privateAdd3(this, _prevTemplate, void 0);
__privateAdd3(this, _prevTemplateId, void 0);
if (this.shadowRoot) {
this.renderRoot = this.shadowRoot;
} else {
this.renderRoot = this.attachShadow({ mode: "open" });
this.createRenderer();
}
const observer2 = new MutationObserver((mutationList) => {
var _a3;
if (this.mediaController && !((_a3 = this.mediaController) == null ? void 0 : _a3.breakpointsComputed))
return;
if (mutationList.some((mutation) => {
const target = mutation.target;
if (target === this)
return true;
if (target.localName !== "media-controller")
return false;
if (observedMediaAttributes[mutation.attributeName])
return true;
if (mutation.attributeName.startsWith("breakpoint"))
return true;
return false;
})) {
this.render();
}
});
observer2.observe(this, { attributes: true });
observer2.observe(this.renderRoot, {
attributes: true,
subtree: true
});
this.addEventListener(
MediaStateChangeEvents.BREAKPOINTS_COMPUTED,
this.render
);
__privateMethod(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
}
/** @type {HTMLElement & { breakpointsComputed?: boolean }} */
get mediaController() {
return this.renderRoot.querySelector("media-controller");
}
get template() {
var _a3;
return (_a3 = __privateGet3(this, _template)) != null ? _a3 : this.constructor.template;
}
set template(element) {
__privateSet3(this, _prevTemplateId, null);
__privateSet3(this, _template, element);
this.createRenderer();
}
get props() {
var _a3, _b2, _c;
const observedAttributes = [
...Array.from((_b2 = (_a3 = this.mediaController) == null ? void 0 : _a3.attributes) != null ? _b2 : []).filter(
({ name }) => {
return observedMediaAttributes[name] || name.startsWith("breakpoint");
}
),
...Array.from(this.attributes)
];
const props = {};
for (const attr of observedAttributes) {
const name = (_c = observedMediaAttributes[attr.name]) != null ? _c : camelCase(attr.name);
let { value } = attr;
if (value != null) {
if (isNumericString(value)) {
value = parseFloat(value);
}
props[name] = value === "" ? true : value;
} else {
props[name] = false;
}
}
return props;
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName === "template" && oldValue != newValue) {
__privateMethod(this, _updateTemplate, updateTemplate_fn).call(this);
}
}
connectedCallback() {
__privateMethod(this, _updateTemplate, updateTemplate_fn).call(this);
}
createRenderer() {
if (this.template && this.template !== __privateGet3(this, _prevTemplate)) {
__privateSet3(this, _prevTemplate, this.template);
this.renderer = new TemplateInstance(
this.template,
this.props,
// @ts-ignore
this.constructor.processor
);
this.renderRoot.textContent = "";
this.renderRoot.append(
prependTemplate.content.cloneNode(true),
this.renderer
);
}
}
render() {
var _a3;
(_a3 = this.renderer) == null ? void 0 : _a3.update(this.props);
}
};
_template = /* @__PURE__ */ new WeakMap();
_prevTemplate = /* @__PURE__ */ new WeakMap();
_prevTemplateId = /* @__PURE__ */ new WeakMap();
_upgradeProperty = /* @__PURE__ */ new WeakSet();
upgradeProperty_fn = function(prop) {
if (Object.prototype.hasOwnProperty.call(this, prop)) {
const value = this[prop];
delete this[prop];
this[prop] = value;
}
};
_updateTemplate = /* @__PURE__ */ new WeakSet();
updateTemplate_fn = function() {
var _a3;
const templateId = this.getAttribute("template");
if (!templateId || templateId === __privateGet3(this, _prevTemplateId))
return;
const rootNode = this.getRootNode();
const template2 = (_a3 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a3.call(rootNode, templateId);
if (template2) {
__privateSet3(this, _prevTemplateId, templateId);
__privateSet3(this, _template, template2);
this.createRenderer();
return;
}
if (isValidUrl(templateId)) {
__privateSet3(this, _prevTemplateId, templateId);
request(templateId).then((data) => {
const template22 = Document2.createElement("template");
template22.innerHTML = data;
__privateSet3(this, _template, template22);
this.createRenderer();
}).catch(console.error);
}
};
MediaThemeElement.observedAttributes = ["template"];
MediaThemeElement.processor = processor;
function isValidUrl(url) {
if (!/^(\/|\.\/|https?:\/\/)/.test(url))
return false;
const base = /^https?:\/\//.test(url) ? void 0 : location.origin;
try {
new URL(url, base);
} catch (e) {
return false;
}
return true;
}
async function request(resource) {
const response = await fetch(resource);
if (response.status !== 200) {
throw new Error(
`Failed to load resource: the server responded with a status of ${response.status}`
);
}
return response.text();
}
if (!GlobalThis.customElements.get("media-theme")) {
GlobalThis.customElements.define("media-theme", MediaThemeElement);
}
// ../../node_modules/media-chrome/dist/utils/anchor-utils.js
function computePosition({
anchor,
floating,
placement
}) {
const rects = getElementRects({ anchor, floating });
const { x, y } = computeCoordsFromPlacement(rects, placement);
return { x, y };
}
function getElementRects({
anchor,
floating
}) {
return {
anchor: getRectRelativeToOffsetParent(anchor, floating.offsetParent),
floating: {
x: 0,
y: 0,
width: floating.offsetWidth,
height: floating.offsetHeight
}
};
}
function getRectRelativeToOffsetParent(element, offsetParent) {
var _a3;
const rect = element.getBoundingClientRect();
const offsetRect = (_a3 = offsetParent == null ? void 0 : offsetParent.getBoundingClientRect()) != null ? _a3 : { x: 0, y: 0 };
return {
x: rect.x - offsetRect.x,
y: rect.y - offsetRect.y,
width: rect.width,
height: rect.height
};
}
function computeCoordsFromPlacement({ anchor, floating }, placement) {
const alignmentAxis = getSideAxis(placement) === "x" ? "y" : "x";
const alignLength = alignmentAxis === "y" ? "height" : "width";
const side = getSide(placement);
const commonX = anchor.x + anchor.width / 2 - floating.width / 2;
const commonY = anchor.y + anchor.height / 2 - floating.height / 2;
const commonAlign = anchor[alignLength] / 2 - floating[alignLength] / 2;
let coords;
switch (side) {
case "top":
coords = { x: commonX, y: anchor.y - floating.height };
break;
case "bottom":
coords = { x: commonX, y: anchor.y + anchor.height };
break;
case "right":
coords = { x: anchor.x + anchor.width, y: commonY };
break;
case "left":
coords = { x: anchor.x - floating.width, y: commonY };
break;
default:
coords = { x: anchor.x, y: anchor.y };
}
switch (placement.split("-")[1]) {
case "start":
coords[alignmentAxis] -= commonAlign;
break;
case "end":
coords[alignmentAxis] += commonAlign;
break;
}
return coords;
}
function getSide(placement) {
return placement.split("-")[0];
}
function getSideAxis(placement) {
return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
}
// ../../node_modules/media-chrome/dist/utils/resize-observer.js
var callbacksMap = /* @__PURE__ */ new WeakMap();
var getCallbacks = (element) => {
let callbacks = callbacksMap.get(element);
if (!callbacks)
callbacksMap.set(element, callbacks = /* @__PURE__ */ new Set());
return callbacks;
};
var observer = new GlobalThis.ResizeObserver(
(entries) => {
for (const entry of entries) {
for (const callback of getCallbacks(entry.target)) {
callback(entry);
}
}
}
);
function observeResize(element, callback) {
getCallbacks(element).add(callback);
observer.observe(element);
}
function unobserveResize(element, callback) {
const callbacks = getCallbacks(element);
callbacks.delete(callback);
if (!callbacks.size) {
observer.unobserve(element);
}
}
// ../../node_modules/media-chrome/dist/utils/events.js
var InvokeEvent = class extends Event {
/**
* @param init - The event options.
*/
constructor({ action = "auto", relatedTarget, ...options }) {
super("invoke", options);
this.action = action;
this.relatedTarget = relatedTarget;
}
};
var ToggleEvent = class extends Event {
/**
* @param init - The event options.
*/
constructor({ newState, oldState, ...options }) {
super("toggle", options);
this.newState = newState;
this.oldState = oldState;
}
};
// ../../node_modules/media-chrome/dist/utils/element-utils.js
function namedNodeMapToObject(namedNodeMap) {
const obj = {};
for (const attr of namedNodeMap) {
obj[attr.name] = attr.value;
}
return obj;
}
function getMediaController(host) {
var _a3;
return (_a3 = getAttributeMediaController(host)) != null ? _a3 : closestComposedNode(host, "media-controller");
}
function getAttributeMediaController(host) {
var _a3;
const { MEDIA_CONTROLLER } = MediaStateReceiverAttributes;
const mediaControllerId = host.getAttribute(MEDIA_CONTROLLER);
if (mediaControllerId) {
return (_a3 = getDocumentOrShadowRoot(host)) == null ? void 0 : _a3.getElementById(
mediaControllerId
);
}
}
var containsComposedNode = (rootNode, childNode) => {
if (!rootNode || !childNode)
return false;
if (rootNode == null ? void 0 : rootNode.contains(childNode))
return true;
return containsComposedNode(
rootNode,
childNode.getRootNode().host
);
};
var closestComposedNode = (childNode, selector) => {
if (!childNode)
return null;
const closest = childNode.closest(selector);
if (closest)
return closest;
return closestComposedNode(
childNode.getRootNode().host,
selector
);
};
function getActiveElement(root = document) {
var _a3;
const activeEl = root == null ? void 0 : root.activeElement;
if (!activeEl)
return null;
return (_a3 = getActiveElement(activeEl.shadowRoot)) != null ? _a3 : activeEl;
}
function getDocumentOrShadowRoot(node) {
var _a3;
const rootNode = (_a3 = node == null ? void 0 : node.getRootNode) == null ? void 0 : _a3.call(node);
if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
return rootNode;
}
return null;
}
function isElementVisible(element, { depth = 3, checkOpacity = true, checkVisibilityCSS = true } = {}) {
if (element.checkVisibility) {
return element.checkVisibility({
checkOpacity,
checkVisibilityCSS
});
}
let el = element;
while (el && depth > 0) {
const style = getComputedStyle(el);
if (checkOpacity && style.opacity === "0" || checkVisibilityCSS && style.visibility === "hidden" || style.display === "none") {
return false;
}
el = el.parentElement;
depth--;
}
return true;
}
function getOrInsertCSSRule(styleParent, selectorText) {
const cssRule = getCSSRule(styleParent, (st) => st === selectorText);
if (cssRule)
return cssRule;
return insertCSSRule(styleParent, selectorText);
}
function getCSSRule(styleParent, predicate) {
var _a3, _b2;
let style;
for (style of (_a3 = styleParent.querySelectorAll("style:not([media])")) != null ? _a3 : []) {
let cssRules;
try {
cssRules = (_b2 = style.sheet) == null ? void 0 : _b2.cssRules;
} catch {
continue;
}
for (const rule of cssRules != null ? cssRules : []) {
if (predicate(rule.selectorText))
return rule;
}
}
}
function insertCSSRule(styleParent, selectorText) {
var _a3, _b2;
const styles = (_a3 = styleParent.querySelectorAll("style:not([media])")) != null ? _a3 : [];
const style = styles == null ? void 0 : styles[styles.length - 1];
if (!(style == null ? void 0 : style.sheet)) {
console.warn(
"Media Chrome: No style sheet found on style tag of",
styleParent
);
return {
// @ts-ignore
style: {
setProperty: () => {
},
removeProperty: () => "",
getPropertyValue: () => ""
}
};
}
style == null ? void 0 : style.sheet.insertRule(`${selectorText}{}`, style.sheet.cssRules.length);
return (
/** @type {CSSStyleRule} */
(_b2 = style.sheet.cssRules) == null ? void 0 : _b2[style.sheet.cssRules.length - 1]
);
}
function getNumericAttr(el, attrName, defaultValue = Number.NaN) {
const attrVal = el.getAttribute(attrName);
return attrVal != null ? +attrVal : defaultValue;
}
function setNumericAttr(el, attrName, value) {
const nextNumericValue = +value;
if (value == null || Number.isNaN(nextNumericValue)) {
if (el.hasAttribute(attrName)) {
el.removeAttribute(attrName);
}
return;
}
if (getNumericAttr(el, attrName, void 0) === nextNumericValue)
return;
el.setAttribute(attrName, `${nextNumericValue}`);
}
function getBooleanAttr(el, attrName) {
return el.hasAttribute(attrName);
}
function setBooleanAttr(el, attrName, value) {
if (value == null) {
if (el.hasAttribute(attrName)) {
el.removeAttribute(attrName);
}
return;
}
if (getBooleanAttr(el, attrName) == value)
return;
el.toggleAttribute(attrName, value);
}
function getStringAttr(el, attrName, defaultValue = null) {
var _a3;
return (_a3 = el.getAttribute(attrName)) != null ? _a3 : defaultValue;
}
function setStringAttr(el, attrName, value) {
if (value == null) {
if (el.hasAttribute(attrName)) {
el.removeAttribute(attrName);
}
return;
}
const nextValue = `${value}`;
if (getStringAttr(el, attrName, void 0) === nextValue)
return;
el.setAttribute(attrName, nextValue);
}
// ../../node_modules/media-chrome/dist/menu/media-chrome-menu.js
var __accessCheck4 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet4 = (obj, member, getter) => {
__accessCheck4(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd4 = (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 __privateSet4 = (obj, member, value, setter) => {
__accessCheck4(obj, member, "write to private field");
setter ? setter.call(obj, value) : member.set(obj, value);
return value;
};
var __privateMethod2 = (obj, member, method) => {
__accessCheck4(obj, member, "access private method");
return method;
};
var _mediaController;
var _previouslyFocused;
var _invokerElement;
var _previousItems;
var _mutationObserver;
var _isPopover;
var _cssRule;
var _handleSlotChange;
var handleSlotChange_fn;
var _handleMenuItems;
var _updateLayoutStyle;
var updateLayoutStyle_fn;
var _handleInvoke;
var handleInvoke_fn;
var _handleOpen;
var handleOpen_fn;
var _handleClosed;
var handleClosed_fn;
var _handleBoundsResize;
var _handleMenuResize;
var _positionMenu;
var positionMenu_fn;
var _resizeMenu;
var resizeMenu_fn;
var _handleClick;
var handleClick_fn;
var _backButtonElement;
var backButtonElement_get;
var _handleToggle;
var handleToggle_fn;
var _checkSubmenuHasExpanded;
var checkSubmenuHasExpanded_fn;
var _handleFocusOut;
var handleFocusOut_fn;
var _handleKeyDown;
var handleKeyDown_fn;
var _getItem;
var getItem_fn;
var _getTabItem;
var getTabItem_fn;
var _setTabItem;
var setTabItem_fn;
var _selectItem;
var selectItem_fn;
function createMenuItem({
type,
text,
value,
checked
}) {
const item = Document2.createElement(
"media-chrome-menu-item"
);
item.type = type != null ? type : "";
item.part.add("menu-item");
if (type)
item.part.add(type);
item.value = value;
item.checked = checked;
const label = Document2.createElement("span");
label.textContent = text;
item.append(label);
return item;
}
function createIndicator(el, name) {
let customIndicator = el.querySelector(`:scope > [slot="${name}"]`);
if ((customIndicator == null ? void 0 : customIndicator.nodeName) == "SLOT")
customIndicator = customIndicator.assignedElements({ flatten: true })[0];
if (customIndicator) {
customIndicator = customIndicator.cloneNode(true);
return customIndicator;
}
const fallbackIndicator = el.shadowRoot.querySelector(
`[name="${name}"] > svg`
);
if (fallbackIndicator) {
return fallbackIndicator.cloneNode(true);
}
return "";
}
function getTemplateHTML(_attrs) {
return (
/*html*/
`
<style>
:host {
font: var(--media-font,
var(--media-font-weight, normal)
var(--media-font-size, 14px) /
var(--media-text-content-height, var(--media-control-height, 24px))
var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif));
color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
--_menu-bg: rgb(20 20 30 / .8);
background: var(--media-menu-background, var(--media-control-background, var(--media-secondary-color, var(--_menu-bg))));
border-radius: var(--media-menu-border-radius);
border: var(--media-menu-border, none);
display: var(--media-menu-display, inline-flex);
transition: var(--media-menu-transition-in,
visibility 0s,
opacity .2s ease-out,
transform .15s ease-out,
left .2s ease-in-out,
min-width .2s ease-in-out,
min-height .2s ease-in-out
) !important;
${/* ^^Prevent transition override by media-container */
""}
visibility: var(--media-menu-visibility, visible);
opacity: var(--media-menu-opacity, 1);
max-height: var(--media-menu-max-height, var(--_menu-max-height, 300px));
transform: var(--media-menu-transform-in, translateY(0) scale(1));
flex-direction: column;
${/* Prevent overflowing a flex container */
""}
min-height: 0;
position: relative;
bottom: var(--_menu-bottom);
box-sizing: border-box;
}
@-moz-document url-prefix() {
:host{
--_menu-bg: rgb(20 20 30);
}
}
:host([hidden]) {
transition: var(--media-menu-transition-out,
visibility .15s ease-in,
opacity .15s ease-in,
transform .15s ease-in
) !important;
visibility: var(--media-menu-hidden-visibility, hidden);
opacity: var(--media-menu-hidden-opacity, 0);
max-height: var(--media-menu-hidden-max-height,
var(--media-menu-max-height, var(--_menu-max-height, 300px)));
transform: var(--media-menu-transform-out, translateY(2px) scale(.99));
pointer-events: none;
}
:host([slot="submenu"]) {
background: none;
width: 100%;
min-height: 100%;
position: absolute;
bottom: 0;
right: -100%;
}
#container {
display: flex;
flex-direction: column;
min-height: 0;
transition: transform .2s ease-out;
transform: translate(0, 0);
}
#container.has-expanded {
transition: transform .2s ease-in;
transform: translate(-100%, 0);
}
button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
outline: inherit;
display: inline-flex;
align-items: center;
}
slot[name="header"][hidden] {
display: none;
}
slot[name="header"] > *,
slot[name="header"]::slotted(*) {
padding: .4em .7em;
border-bottom: 1px solid rgb(255 255 255 / .25);
cursor: var(--media-cursor, default);
}
slot[name="header"] > button[part~="back"],
slot[name="header"]::slotted(button[part~="back"]) {
cursor: var(--media-cursor, pointer);
}
svg[part~="back"] {
height: var(--media-menu-icon-height, var(--media-control-height, 24px));
fill: var(--media-icon-color, var(--media-primary-color, rgb(238 238 238)));
display: block;
margin-right: .5ch;
}
slot:not([name]) {
gap: var(--media-menu-gap);
flex-direction: var(--media-menu-flex-direction, column);
overflow: var(--media-menu-overflow, hidden auto);
display: flex;
min-height: 0;
}
:host([role="menu"]) slot:not([name]) {
padding-block: .4em;
}
slot:not([name])::slotted([role="menu"]) {
background: none;
}
media-chrome-menu-item > span {
margin-right: .5ch;
max-width: var(--media-menu-item-max-width);
text-overflow: ellipsis;
overflow: hidden;
}
</style>
<style id="layout-row" media="width:0">
slot[name="header"] > *,
slot[name="header"]::slotted(*) {
padding: .4em .5em;
}
slot:not([name]) {
gap: var(--media-menu-gap, .25em);
flex-direction: var(--media-menu-flex-direction, row);
padding-inline: .5em;
}
media-chrome-menu-item {
padding: .3em .5em;
}
media-chrome-menu-item[aria-checked="true"] {
background: var(--media-menu-item-checked-background, rgb(255 255 255 / .2));
}
${/* In row layout hide the checked indicator completely. */
""}
media-chrome-menu-item::part(checked-indicator) {
display: var(--media-menu-item-checked-indicator-display, none);
}
</style>
<div id="container">
<slot name="header" hidden>
<button part="back button" aria-label="Back to previous menu">
<slot name="back-icon">
<svg aria-hidden="true" viewBox="0 0 20 24" part="back indicator">
<path d="m11.88 17.585.742-.669-4.2-4.665 4.2-4.666-.743-.669-4.803 5.335 4.803 5.334Z"/>
</svg>
</slot>
<slot name="title"></slot>
</button>
</slot>
<slot></slot>
</div>
<slot name="checked-indicator" hidden></slot>
`
);
}
var Attributes = {
STYLE: "style",
HIDDEN: "hidden",
DISABLED: "disabled",
ANCHOR: "anchor"
};
var MediaChromeMenu = class extends GlobalThis.HTMLElement {
constructor() {
super();
__privateAdd4(this, _handleSlotChange);
__privateAdd4(this, _updateLayoutStyle);
__privateAdd4(this, _handleInvoke);
__privateAdd4(this, _handleOpen);
__privateAdd4(this, _handleClosed);
__privateAdd4(this, _positionMenu);
__privateAdd4(this, _resizeMenu);
__privateAdd4(this, _handleClick);
__privateAdd4(this, _backButtonElement);
__privateAdd4(this, _handleToggle);
__privateAdd4(this, _checkSubmenuHasExpanded);
__privateAdd4(this, _handleFocusOut);
__privateAdd4(this, _handleKeyDown);
__privateAdd4(this, _getItem);
__privateAdd4(this, _getTabItem);
__privateAdd4(this, _setTabItem);
__privateAdd4(this, _selectItem);
__privateAdd4(this, _mediaController, null);
__privateAdd4(this, _previouslyFocused, null);
__privateAdd4(this, _invokerElement, null);
__privateAdd4(this, _previousItems, /* @__PURE__ */ new Set());
__privateAdd4(this, _mutationObserver, void 0);
__privateAdd4(this, _isPopover, false);
__privateAdd4(this, _cssRule, null);
__privateAdd4(this, _handleMenuItems, () => {
const previousItems = __privateGet4(this, _previousItems);
const currentItems = new Set(this.items);
for (const item of previousItems) {
if (!currentItems.has(item)) {
this.dispatchEvent(new CustomEvent("removemenuitem", { detail: item }));
}
}
for (const item of currentItems) {
if (!previousItems.has(item)) {
this.dispatchEvent(new CustomEvent("addmenuitem", { detail: item }));
}
}
__privateSet4(this, _previousItems, currentItems);
});
__privateAdd4(this, _handleBoundsResize, () => {
__privateMethod2(this, _positionMenu, positionMenu_fn).call(this);
__privateMethod2(this, _resizeMenu, resizeMenu_fn).call(this, false);
});
__privateAdd4(this, _handleMenuResize, () => {
__privateMethod2(this, _positionMenu, positionMenu_fn).call(this);
});
if (!this.shadowRoot) {
this.attachShadow(this.constructor.shadowRootOptions);
const attrs = namedNodeMapToObject(this.attributes);
this.shadowRoot.innerHTML = this.constructor.getTemplateHTML(attrs);
}
this.container = this.shadowRoot.querySelector("#container");
this.defaultSlot = this.shadowRoot.querySelector(
"slot:not([name])"
);
this.shadowRoot.addEventListener("slotchange", this);
__privateSet4(this, _mutationObserver, new MutationObserver(__privateGet4(this, _handleMenuItems)));
__privateGet4(this, _mutationObserver).observe(this.defaultSlot, { childList: true });
}
static get observedAttributes() {
return [
Attributes.DISABLED,
Attributes.HIDDEN,
Attributes.STYLE,
Attributes.ANCHOR,
MediaStateReceiverAttributes.MEDIA_CONTROLLER
];
}
static formatMenuItemText(text, _data) {
return text;
}
enable() {
this.addEventListener("click", this);
this.addEventListener("focusout", this);
this.addEventListener("keydown", this);
this.addEventListener("invoke", this);
this.addEventListener("toggle", this);
}
disable() {
this.removeEventListener("click", this);
this.removeEventListener("focusout", this);
this.removeEventListener("keyup", this);
this.removeEventListener("invoke", this);
this.removeEventListener("toggle", this);
}
handleEvent(event) {
switch (event.type) {
case "slotchange":
__privateMethod2(this, _handleSlotChange, handleSlotChange_fn).call(this, event);
break;
case "invoke":
__privateMethod2(this, _handleInvoke, handleInvoke_fn).call(this, event);
break;
case "click":
__privateMethod2(this, _handleClick, handleClick_fn).call(this, event);
break;
case "toggle":
__privateMethod2(this, _handleToggle, handleToggle_fn).call(this, event);
break;
case "focusout":
__privateMethod2(this, _handleFocusOut, handleFocusOut_fn).call(this, event);
break;
case "keydown":
__privateMethod2(this, _handleKeyDown, handleKeyDown_fn).call(this, event);
break;
}
}
connectedCallback() {
var _a3, _b2;
__privateSet4(this, _cssRule, insertCSSRule(this.shadowRoot, ":host"));
__privateMethod2(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
if (!this.hasAttribute("disabled")) {
this.enable();
}
if (!this.role) {
this.role = "menu";
}
__privateSet4(this, _mediaController, getAttributeMediaController(this));
(_b2 = (_a3 = __privateGet4(this, _mediaController)) == null ? void 0 : _a3.associateElement) == null ? void 0 : _b2.call(_a3, this);
if (!this.hidden) {
observeResize(getBoundsElement(this), __privateGet4(this, _handleBoundsResize));
observeResize(this, __privateGet4(this, _handleMenuResize));
}
}
disconnectedCallback() {
var _a3, _b2;
unobserveResize(getBoundsElement(this), __privateGet4(this, _handleBoundsResize));
unobserveResize(this, __privateGet4(this, _handleMenuResize));
this.disable();
(_b2 = (_a3 = __privateGet4(this, _mediaController)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
__privateSet4(this, _mediaController, null);
}
attributeChangedCallback(attrName, oldValue, newValue) {
var _a3, _b2, _c, _d;
if (attrName === Attributes.HIDDEN && newValue !== oldValue) {
if (!__privateGet4(this, _isPopover))
__privateSet4(this, _isPopover, true);
if (this.hidden) {
__privateMethod2(this, _handleClosed, handleClosed_fn).call(this);
} else {
__privateMethod2(this, _handleOpen, handleOpen_fn).call(this);
}
this.dispatchEvent(
new ToggleEvent({
oldState: this.hidden ? "open" : "closed",
newState: this.hidden ? "closed" : "open",
bubbles: true
})
);
} else if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
if (oldValue) {
(_b2 = (_a3 = __privateGet4(this, _mediaController)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
__privateSet4(this, _mediaController, null);
}
if (newValue && this.isConnected) {
__privateSet4(this, _mediaController, getAttributeMediaController(this));
(_d = (_c = __privateGet4(this, _mediaController)) == null ? void 0 : _c.associateElement) == null ? void 0 : _d.call(_c, this);
}
} else if (attrName === Attributes.DISABLED && newValue !== oldValue) {
if (newValue == null) {
this.enable();
} else {
this.disable();
}
} else if (attrName === Attributes.STYLE && newValue !== oldValue) {
__privateMethod2(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
}
}
formatMenuItemText(text, data) {
return this.constructor.formatMenuItemText(
text,
data
);
}
get anchor() {
return this.getAttribute("anchor");
}
set anchor(value) {
this.setAttribute("anchor", `${value}`);
}
/**
* Returns the anchor element when it is a floating menu.
*/
get anchorElement() {
var _a3;
if (this.anchor) {
return (_a3 = getDocumentOrShadowRoot(this)) == null ? void 0 : _a3.querySelector(
`#${this.anchor}`
);
}
return null;
}
/**
* Returns the menu items.
*/
get items() {
return this.defaultSlot.assignedElements({ flatten: true }).filter(isMenuItem);
}
get radioGroupItems() {
return this.items.filter((item) => item.role === "menuitemradio");
}
get checkedItems() {
return this.items.filter((item) => item.checked);
}
get value() {
var _a3, _b2;
return (_b2 = (_a3 = this.checkedItems[0]) == null ? void 0 : _a3.value) != null ? _b2 : "";
}
set value(newValue) {
const item = this.items.find((item2) => item2.value === newValue);
if (!item)
return;
__privateMethod2(this, _selectItem, selectItem_fn).call(this, item);
}
focus() {
__privateSet4(this, _previouslyFocused, getActiveElement());
if (this.items.length) {
__privateMethod2(this, _setTabItem, setTabItem_fn).call(this, this.items[0]);
this.items[0].focus();
return;
}
const focusable = this.querySelector(
'[autofocus], [tabindex]:not([tabindex="-1"]), [role="menu"]'
);
focusable == null ? void 0 : focusable.focus();
}
handleSelect(event) {
var _a3;
const item = __privateMethod2(this, _getItem, getItem_fn).call(this, event);
if (!item)
return;
__privateMethod2(this, _selectItem, selectItem_fn).call(this, item, item.type === "checkbox");
if (__privateGet4(this, _invokerElement) && !this.hidden) {
(_a3 = __privateGet4(this, _previouslyFocused)) == null ? void 0 : _a3.focus();
this.hidden = true;
}
}
get keysUsed() {
return [
"Enter",
"Escape",
"Tab",
" ",
"ArrowDown",
"ArrowUp",
"Home",
"End"
];
}
handleMove(event) {
var _a3, _b2;
const { key } = event;
const items = this.items;
const currentItem = (_b2 = (_a3 = __privateMethod2(this, _getItem, getItem_fn).call(this, event)) != null ? _a3 : __privateMethod2(this, _getTabItem, getTabItem_fn).call(this)) != null ? _b2 : items[0];
const currentIndex = items.indexOf(currentItem);
let index = Math.max(0, currentIndex);
if (key === "ArrowDown") {
index++;
} else if (key === "ArrowUp") {
index--;
} else if (event.key === "Home") {
index = 0;
} else if (event.key === "End") {
index = items.length - 1;
}
if (index < 0) {
index = items.length - 1;
}
if (index > items.length - 1) {
index = 0;
}
__privateMethod2(this, _setTabItem, setTabItem_fn).call(this, items[index]);
items[index].focus();
}
};
_mediaController = /* @__PURE__ */ new WeakMap();
_previouslyFocused = /* @__PURE__ */ new WeakMap();
_invokerElement = /* @__PURE__ */ new WeakMap();
_previousItems = /* @__PURE__ */ new WeakMap();
_mutationObserver = /* @__PURE__ */ new WeakMap();
_isPopover = /* @__PURE__ */ new WeakMap();
_cssRule = /* @__PURE__ */ new WeakMap();
_handleSlotChange = /* @__PURE__ */ new WeakSet();
handleSlotChange_fn = function(event) {
const slot = event.target;
for (const node of slot.assignedNodes({ flatten: true })) {
if (node.nodeType === 3 && node.textContent.trim() === "") {
node.remove();
}
}
if (["header", "title"].includes(slot.name)) {
const header = this.shadowRoot.querySelector(
'slot[name="header"]'
);
header.hidden = slot.assignedNodes().length === 0;
}
if (!slot.name) {
__privateGet4(this, _handleMenuItems).call(this);
}
};
_handleMenuItems = /* @__PURE__ */ new WeakMap();
_updateLayoutStyle = /* @__PURE__ */ new WeakSet();
updateLayoutStyle_fn = function() {
var _a3;
const layoutRowStyle = this.shadowRoot.querySelector("#layout-row");
const menuLayout = (_a3 = getComputedStyle(this).getPropertyValue("--media-menu-layout")) == null ? void 0 : _a3.trim();
layoutRowStyle.setAttribute("media", menuLayout === "row" ? "" : "width:0");
};
_handleInvoke = /* @__PURE__ */ new WeakSet();
handleInvoke_fn = function(event) {
__privateSet4(this, _invokerElement, event.relatedTarget);
if (!containsComposedNode(this, event.relatedTarget)) {
this.hidden = !this.hidden;
}
};
_handleOpen = /* @__PURE__ */ new WeakSet();
handleOpen_fn = function() {
var _a3;
(_a3 = __privateGet4(this, _invokerElement)) == null ? void 0 : _a3.setAttribute("aria-expanded", "true");
this.addEventListener("transitionend", () => this.focus(), { once: true });
observeResize(getBoundsElement(this), __privateGet4(this, _handleBoundsResize));
observeResize(this, __privateGet4(this, _handleMenuResize));
};
_handleClosed = /* @__PURE__ */ new WeakSet();
handleClosed_fn = function() {
var _a3;
(_a3 = __privateGet4(this, _invokerElement)) == null ? void 0 : _a3.setAttribute("aria-expanded", "false");
unobserveResize(getBoundsElement(this), __privateGet4(this, _handleBoundsResize));
unobserveResize(this, __privateGet4(this, _handleMenuResize));
};
_handleBoundsResize = /* @__PURE__ */ new WeakMap();
_handleMenuResize = /* @__PURE__ */ new WeakMap();
_positionMenu = /* @__PURE__ */ new WeakSet();
positionMenu_fn = function(menuWidth) {
if (this.hasAttribute("mediacontroller") && !this.anchor)
return;
if (this.hidden || !this.anchorElement)
return;
const { x, y } = computePosition({
anchor: this.anchorElement,
floating: this,
placement: "top-start"
});
menuWidth != null ? menuWidth : menuWidth = this.offsetWidth;
const bounds = getBoundsElement(this);
const boundsRect = bounds.getBoundingClientRect();
const right = boundsRect.width - x - menuWidth;
const bottom = boundsRect.height - y - this.offsetHeight;
const { style } = __privateGet4(this, _cssRule);
style.setProperty("position", "absolute");
style.setProperty("right", `${Math.max(0, right)}px`);
style.setProperty("--_menu-bottom", `${bottom}px`);
const computedStyle = getComputedStyle(this);
const isBottomCalc = style.getPropertyValue("--_menu-bottom") === computedStyle.bottom;
const realBottom = isBottomCalc ? bottom : parseFloat(computedStyle.bottom);
const maxHeight = boundsRect.height - realBottom - parseFloat(computedStyle.marginBottom);
this.style.setProperty("--_menu-max-height", `${maxHeight}px`);
};
_resizeMenu = /* @__PURE__ */ new WeakSet();
resizeMenu_fn = function(animate) {
const expandedMenuItem = this.querySelector(
'[role="menuitem"][aria-haspopup][aria-expanded="true"]'
);
const expandedSubmenu = expandedMenuItem == null ? void 0 : expandedMenuItem.querySelector(
'[role="menu"]'
);
const { style } = __privateGet4(this, _cssRule);
if (!animate) {
style.setProperty("--media-menu-transition-in", "none");
}
if (expandedSubmenu) {
const height = expandedSubmenu.offsetHeight;
const width = Math.max(
expandedSubmenu.offsetWidth,
expandedMenuItem.offsetWidth
);
this.style.setProperty("min-width", `${width}px`);
this.style.setProperty("min-height", `${height}px`);
__privateMethod2(this, _positionMenu, positionMenu_fn).call(this, width);
} else {
this.style.removeProperty("min-width");
this.style.removeProperty("min-height");
__privateMethod2(this, _positionMenu, positionMenu_fn).call(this);
}
style.removeProperty("--media-menu-transition-in");
};
_handleClick = /* @__PURE__ */ new WeakSet();
handleClick_fn = function(event) {
var _a3;
event.stopPropagation();
if (event.composedPath().includes(__privateGet4(this, _backButtonElement, backButtonElement_get))) {
(_a3 = __privateGet4(this, _previouslyFocused)) == null ? void 0 : _a3.focus();
this.hidden = true;
return;
}
const item = __privateMethod2(this, _getItem, getItem_fn).call(this, event);
if (!item || item.hasAttribute("disabled"))
return;
__privateMethod2(this, _setTabItem, setTabItem_fn).call(this, item);
this.handleSelect(event);
};
_backButtonElement = /* @__PURE__ */ new WeakSet();
backButtonElement_get = function() {
var _a3;
const headerSlot = this.shadowRoot.querySelector(
'slot[name="header"]'
);
return (_a3 = headerSlot.assignedElements({ flatten: true })) == null ? void 0 : _a3.find((el) => el.matches('button[part~="back"]'));
};
_handleToggle = /* @__PURE__ */ new WeakSet();
handleToggle_fn = function(event) {
if (event.target === this)
return;
__privateMethod2(this, _checkSubmenuHasExpanded, checkSubmenuHasExpanded_fn).call(this);
const menuItemsWithSubmenu = Array.from(
this.querySelectorAll('[role="menuitem"][aria-haspopup]')
);
for (const item of menuItemsWithSubmenu) {
if (item.invokeTargetElement == event.target)
continue;
if (event.newState == "open" && item.getAttribute("aria-expanded") == "true" && !item.invokeTargetElement.hidden) {
item.invokeTargetElement.dispatchEvent(
new InvokeEvent({ relatedTarget: item })
);
}
}
for (const item of menuItemsWithSubmenu) {
item.setAttribute("aria-expanded", `${!item.submenuElement.hidden}`);
}
__privateMethod2(this, _resizeMenu, resizeMenu_fn).call(this, true);
};
_checkSubmenuHasExpanded = /* @__PURE__ */ new WeakSet();
checkSubmenuHasExpanded_fn = function() {
const selector = '[role="menuitem"] > [role="menu"]:not([hidden])';
const expandedMenuItem = this.querySelector(selector);
this.container.classList.toggle("has-expanded", !!expandedMenuItem);
};
_handleFocusOut = /* @__PURE__ */ new WeakSet();
handleFocusOut_fn = function(event) {
var _a3;
if (!containsComposedNode(this, event.relatedTarget)) {
if (__privateGet4(this, _isPopover)) {
(_a3 = __privateGet4(this, _previouslyFocused)) == null ? void 0 : _a3.focus();
}
if (__privateGet4(this, _invokerElement) && __privateGet4(this, _invokerElement) !== event.relatedTarget && !this.hidden) {
this.hidden = true;
}
}
};
_handleKeyDown = /* @__PURE__ */ new WeakSet();
handleKeyDown_fn = function(event) {
var _a3, _b2, _c, _d, _e;
const { key, ctrlKey, altKey, metaKey } = event;
if (ctrlKey || altKey || metaKey) {
return;
}
if (!this.keysUsed.includes(key)) {
return;
}
event.preventDefault();
event.stopPropagation();
if (key === "Tab") {
if (__privateGet4(this, _isPopover)) {
this.hidden = true;
return;
}
if (event.shiftKey) {
(_b2 = (_a3 = this.previousElementSibling) == null ? void 0 : _a3.focus) == null ? void 0 : _b2.call(_a3);
} else {
(_d = (_c = this.nextElementSibling) == null ? void 0 : _c.focus) == null ? void 0 : _d.call(_c);
}
this.blur();
} else if (key === "Escape") {
(_e = __privateGet4(this, _previouslyFocused)) == null ? void 0 : _e.focus();
if (__privateGet4(this, _isPopover)) {
this.hidden = true;
}
} else if (key === "Enter" || key === " ") {
this.handleSelect(event);
} else {
this.handleMove(event);
}
};
_getItem = /* @__PURE__ */ new WeakSet();
getItem_fn = function(event) {
return event.composedPath().find((el) => {
return ["menuitemradio", "menuitemcheckbox"].includes(
el.role
);
});
};
_getTabItem = /* @__PURE__ */ new WeakSet();
getTabItem_fn = function() {
return this.items.find((item) => item.tabIndex === 0);
};
_setTabItem = /* @__PURE__ */ new WeakSet();
setTabItem_fn = function(tabItem) {
for (const item of this.items) {
item.tabIndex = item === tabItem ? 0 : -1;
}
};
_selectItem = /* @__PURE__ */ new WeakSet();
selectItem_fn = function(item, toggle) {
const oldCheckedItems = [...this.checkedItems];
if (item.type === "radio") {
this.radioGroupItems.forEach((el) => el.checked = false);
}
if (toggle) {
item.checked = !item.checked;
} else {
item.checked = true;
}
if (this.checkedItems.some((opt, i) => opt != oldCheckedItems[i])) {
this.dispatchEvent(
new Event("change", { bubbles: true, composed: true })
);
}
};
MediaChromeMenu.shadowRootOptions = { mode: "open" };
MediaChromeMenu.getTemplateHTML = getTemplateHTML;
function isMenuItem(element) {
return ["menuitem", "menuitemradio", "menuitemcheckbox"].includes(
element == null ? void 0 : element.role
);
}
function getBoundsElement(host) {
var _a3;
return (_a3 = host.getAttribute("bounds") ? closestComposedNode(host, `#${host.getAttribute("bounds")}`) : getMediaController(host) || host.parentElement) != null ? _a3 : host;
}
if (!GlobalThis.customElements.get("media-chrome-menu")) {
GlobalThis.customElements.define("media-chrome-menu", MediaChromeMenu);
}
// ../../node_modules/media-chrome/dist/menu/media-chrome-menu-item.js
var __accessCheck5 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet5 = (obj, member, getter) => {
__accessCheck5(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd5 = (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 __privateSet5 = (obj, member, value, setter) => {
__accessCheck5(obj, member, "write to private field");
setter ? setter.call(obj, value) : member.set(obj, value);
return value;
};
var __privateMethod3 = (obj, member, method) => {
__accessCheck5(obj, member, "access private method");
return method;
};
var _dirty;
var _ownerElement;
var _handleSlotChange2;
var handleSlotChange_fn2;
var _submenuConnected;
var submenuConnected_fn;
var _submenuDisconnected;
var submenuDisconnected_fn;
var _handleMenuItem;
var _handleKeyUp;
var handleKeyUp_fn;
var _handleKeyDown2;
var handleKeyDown_fn2;
var _reset;
var reset_fn;
function getTemplateHTML2(_attrs) {
return (
/*html*/
`
<style>
:host {
transition: var(--media-menu-item-transition,
background .15s linear,
opacity .2s ease-in-out
);
outline: var(--media-menu-item-outline, 0);
outline-offset: var(--media-menu-item-outline-offset, -1px);
cursor: var(--media-cursor, pointer);
display: flex;
align-items: center;
align-self: stretch;
justify-self: stretch;
white-space: nowrap;
white-space-collapse: collapse;
text-wrap: nowrap;
padding: .4em .8em .4em 1em;
}
:host(:focus-visible) {
box-shadow: var(--media-menu-item-focus-shadow, inset 0 0 0 2px rgb(27 127 204 / .9));
outline: var(--media-menu-item-hover-outline, 0);
outline-offset: var(--media-menu-item-hover-outline-offset, var(--media-menu-item-outline-offset, -1px));
}
:host(:hover) {
cursor: var(--media-cursor, pointer);
background: var(--media-menu-item-hover-background, rgb(92 92 102 / .5));
outline: var(--media-menu-item-hover-outline);
outline-offset: var(--media-menu-item-hover-outline-offset, var(--media-menu-item-outline-offset, -1px));
}
:host([aria-checked="true"]) {
background: var(--media-menu-item-checked-background);
}
:host([hidden]) {
display: none;
}
:host([disabled]) {
pointer-events: none;
color: rgba(255, 255, 255, .3);
}
slot:not([name]) {
width: 100%;
}
slot:not([name="submenu"]) {
display: inline-flex;
align-items: center;
transition: inherit;
opacity: var(--media-menu-item-opacity, 1);
}
slot[name="description"] {
justify-content: end;
}
slot[name="description"] > span {
display: inline-block;
margin-inline: 1em .2em;
max-width: var(--media-menu-item-description-max-width, 100px);
text-overflow: ellipsis;
overflow: hidden;
font-size: .8em;
font-weight: 400;
text-align: right;
position: relative;
top: .04em;
}
slot[name="checked-indicator"] {
display: none;
}
:host(:is([role="menuitemradio"],[role="menuitemcheckbox"])) slot[name="checked-indicator"] {
display: var(--media-menu-item-checked-indicator-display, inline-block);
}
${/* For all slotted icons in prefix and suffix. */
""}
svg, img, ::slotted(svg), ::slotted(img) {
height: var(--media-menu-item-icon-height, var(--media-control-height, 24px));
fill: var(--media-icon-color, var(--media-primary-color, rgb(238 238 238)));
display: block;
}
${/* Only for indicator icons like checked-indicator or captions-indicator. */
""}
[part~="indicator"],
::slotted([part~="indicator"]) {
fill: var(--media-menu-item-indicator-fill,
var(--media-icon-color, var(--media-primary-color, rgb(238 238 238))));
height: var(--media-menu-item-indicator-height, 1.25em);
margin-right: .5ch;
}
[part~="checked-indicator"] {
visibility: hidden;
}
:host([aria-checked="true"]) [part~="checked-indicator"] {
visibility: visible;
}
</style>
<slot name="checked-indicator">
<svg aria-hidden="true" viewBox="0 1 24 24" part="checked-indicator indicator">
<path d="m10 15.17 9.193-9.191 1.414 1.414-10.606 10.606-6.364-6.364 1.414-1.414 4.95 4.95Z"/>
</svg>
</slot>
<slot name="prefix"></slot>
<slot></slot>
<slot name="description"></slot>
<slot name="suffix">
${this.getSuffixSlotInnerHTML(_attrs)}
</slot>
<slot name="submenu"></slot>
`
);
}
function getSuffixSlotInnerHTML(_attrs) {
return "";
}
var Attributes2 = {
TYPE: "type",
VALUE: "value",
CHECKED: "checked",
DISABLED: "disabled"
};
var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
constructor() {
super();
__privateAdd5(this, _handleSlotChange2);
__privateAdd5(this, _submenuConnected);
__privateAdd5(this, _submenuDisconnected);
__privateAdd5(this, _handleKeyUp);
__privateAdd5(this, _handleKeyDown2);
__privateAdd5(this, _reset);
__privateAdd5(this, _dirty, false);
__privateAdd5(this, _ownerElement, void 0);
__privateAdd5(this, _handleMenuItem, () => {
var _a3, _b2;
this.setAttribute("submenusize", `${this.submenuElement.items.length}`);
const descriptionSlot = this.shadowRoot.querySelector(
'slot[name="description"]'
);
const checkedItem = (_a3 = this.submenuElement.checkedItems) == null ? void 0 : _a3[0];
const description = (_b2 = checkedItem == null ? void 0 : checkedItem.dataset.description) != null ? _b2 : checkedItem == null ? void 0 : checkedItem.text;
const span = Document2.createElement("span");
span.textContent = description != null ? description : "";
descriptionSlot.replaceChildren(span);
});
if (!this.shadowRoot) {
this.attachShadow(this.constructor.shadowRootOptions);
const attrs = namedNodeMapToObject(this.attributes);
this.shadowRoot.innerHTML = this.constructor.getTemplateHTML(attrs);
}
this.shadowRoot.addEventListener("slotchange", this);
}
static get observedAttributes() {
return [
Attributes2.TYPE,
Attributes2.DISABLED,
Attributes2.CHECKED,
Attributes2.VALUE
];
}
enable() {
if (!this.hasAttribute("tabindex")) {
this.setAttribute("tabindex", "-1");
}
if (isCheckable(this) && !this.hasAttribute("aria-checked")) {
this.setAttribute("aria-checked", "false");
}
this.addEventListener("click", this);
this.addEventListener("keydown", this);
}
disable() {
this.removeAttribute("tabindex");
this.removeEventListener("click", this);
this.removeEventListener("keydown", this);
this.removeEventListener("keyup", this);
}
handleEvent(event) {
switch (event.type) {
case "slotchange":
__privateMethod3(this, _handleSlotChange2, handleSlotChange_fn2).call(this, event);
break;
case "click":
this.handleClick(event);
break;
case "keydown":
__privateMethod3(this, _handleKeyDown2, handleKeyDown_fn2).call(this, event);
break;
case "keyup":
__privateMethod3(this, _handleKeyUp, handleKeyUp_fn).call(this, event);
break;
}
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName === Attributes2.CHECKED && isCheckable(this) && !__privateGet5(this, _dirty)) {
this.setAttribute("aria-checked", newValue != null ? "true" : "false");
} else if (attrName === Attributes2.TYPE && newValue !== oldValue) {
this.role = "menuitem" + newValue;
} else if (attrName === Attributes2.DISABLED && newValue !== oldValue) {
if (newValue == null) {
this.enable();
} else {
this.disable();
}
}
}
connectedCallback() {
if (!this.hasAttribute(Attributes2.DISABLED)) {
this.enable();
}
this.role = "menuitem" + this.type;
__privateSet5(this, _ownerElement, closestMenuItemsContainer(this, this.parentNode));
__privateMethod3(this, _reset, reset_fn).call(this);
}
disconnectedCallback() {
this.disable();
__privateMethod3(this, _reset, reset_fn).call(this);
__privateSet5(this, _ownerElement, null);
}
get invokeTarget() {
return this.getAttribute("invoketarget");
}
set invokeTarget(value) {
this.setAttribute("invoketarget", `${value}`);
}
/**
* Returns the element with the id specified by the `invoketarget` attribute
* or the slotted submenu element.
*/
get invokeTargetElement() {
var _a3;
if (this.invokeTarget) {
return (_a3 = getDocumentOrShadowRoot(this)) == null ? void 0 : _a3.querySelector(
`#${this.invokeTarget}`
);
}
return this.submenuElement;
}
/**
* Returns the slotted submenu element.
*/
get submenuElement() {
const submenuSlot = this.shadowRoot.querySelector(
'slot[name="submenu"]'
);
return submenuSlot.assignedElements({
flatten: true
})[0];
}
get type() {
var _a3;
return (_a3 = this.getAttribute(Attributes2.TYPE)) != null ? _a3 : "";
}
set type(val) {
this.setAttribute(Attributes2.TYPE, `${val}`);
}
get value() {
var _a3;
return (_a3 = this.getAttribute(Attributes2.VALUE)) != null ? _a3 : this.text;
}
set value(val) {
this.setAttribute(Attributes2.VALUE, val);
}
get text() {
var _a3;
return ((_a3 = this.textContent) != null ? _a3 : "").trim();
}
get checked() {
if (!isCheckable(this))
return void 0;
return this.getAttribute("aria-checked") === "true";
}
set checked(value) {
if (!isCheckable(this))
return;
__privateSet5(this, _dirty, true);
this.setAttribute("aria-checked", value ? "true" : "false");
if (value) {
this.part.add("checked");
} else {
this.part.remove("checked");
}
}
handleClick(event) {
if (isCheckable(this))
return;
if (this.invokeTargetElement && containsComposedNode(this, event.target)) {
this.invokeTargetElement.dispatchEvent(
new InvokeEvent({ relatedTarget: this })
);
}
}
get keysUsed() {
return ["Enter", " "];
}
};
_dirty = /* @__PURE__ */ new WeakMap();
_ownerElement = /* @__PURE__ */ new WeakMap();
_handleSlotChange2 = /* @__PURE__ */ new WeakSet();
handleSlotChange_fn2 = function(event) {
const slot = event.target;
const isDefaultSlot = !(slot == null ? void 0 : slot.name);
if (isDefaultSlot) {
for (const node of slot.assignedNodes({ flatten: true })) {
if (node instanceof Text && node.textContent.trim() === "") {
node.remove();
}
}
}
if (slot.name === "submenu") {
if (this.submenuElement) {
__privateMethod3(this, _submenuConnected, submenuConnected_fn).call(this);
} else {
__privateMethod3(this, _submenuDisconnected, submenuDisconnected_fn).call(this);
}
}
};
_submenuConnected = /* @__PURE__ */ new WeakSet();
submenuConnected_fn = async function() {
this.setAttribute("aria-haspopup", "menu");
this.setAttribute("aria-expanded", `${!this.submenuElement.hidden}`);
this.submenuElement.addEventListener("change", __privateGet5(this, _handleMenuItem));
this.submenuElement.addEventListener("addmenuitem", __privateGet5(this, _handleMenuItem));
this.submenuElement.addEventListener(
"removemenuitem",
__privateGet5(this, _handleMenuItem)
);
__privateGet5(this, _handleMenuItem).call(this);
};
_submenuDisconnected = /* @__PURE__ */ new WeakSet();
submenuDisconnected_fn = function() {
this.removeAttribute("aria-haspopup");
this.removeAttribute("aria-expanded");
this.submenuElement.removeEventListener("change", __privateGet5(this, _handleMenuItem));
this.submenuElement.removeEventListener(
"addmenuitem",
__privateGet5(this, _handleMenuItem)
);
this.submenuElement.removeEventListener(
"removemenuitem",
__privateGet5(this, _handleMenuItem)
);
__privateGet5(this, _handleMenuItem).call(this);
};
_handleMenuItem = /* @__PURE__ */ new WeakMap();
_handleKeyUp = /* @__PURE__ */ new WeakSet();
handleKeyUp_fn = function(event) {
const { key } = event;
if (!this.keysUsed.includes(key)) {
this.removeEventListener("keyup", __privateMethod3(this, _handleKeyUp, handleKeyUp_fn));
return;
}
this.handleClick(event);
};
_handleKeyDown2 = /* @__PURE__ */ new WeakSet();
handleKeyDown_fn2 = function(event) {
const { metaKey, altKey, key } = event;
if (metaKey || altKey || !this.keysUsed.includes(key)) {
this.removeEventListener("keyup", __privateMethod3(this, _handleKeyUp, handleKeyUp_fn));
return;
}
this.addEventListener("keyup", __privateMethod3(this, _handleKeyUp, handleKeyUp_fn), { once: true });
};
_reset = /* @__PURE__ */ new WeakSet();
reset_fn = function() {
var _a3;
const items = (_a3 = __privateGet5(this, _ownerElement)) == null ? void 0 : _a3.radioGroupItems;
if (!items)
return;
let checkedItem = items.filter((item) => item.getAttribute("aria-checked") === "true").pop();
if (!checkedItem)
checkedItem = items[0];
for (const item of items) {
item.setAttribute("aria-checked", "false");
}
checkedItem == null ? void 0 : checkedItem.setAttribute("aria-checked", "true");
};
MediaChromeMenuItem.shadowRootOptions = { mode: "open" };
MediaChromeMenuItem.getTemplateHTML = getTemplateHTML2;
MediaChromeMenuItem.getSuffixSlotInnerHTML = getSuffixSlotInnerHTML;
function isCheckable(item) {
return item.type === "radio" || item.type === "checkbox";
}
function closestMenuItemsContainer(childNode, parentNode) {
if (!childNode)
return null;
const { host } = childNode.getRootNode();
if (!parentNode && host)
return closestMenuItemsContainer(childNode, host);
if (parentNode == null ? void 0 : parentNode.items)
return parentNode;
return closestMenuItemsContainer(parentNode, parentNode == null ? void 0 : parentNode.parentNode);
}
if (!GlobalThis.customElements.get("media-chrome-menu-item")) {
GlobalThis.customElements.define(
"media-chrome-menu-item",
MediaChromeMenuItem
);
}
// ../../node_modules/media-chrome/dist/menu/media-settings-menu.js
function getTemplateHTML3(_attrs) {
return (
/*html*/
`
${MediaChromeMenu.getTemplateHTML(_attrs)}
<style>
:host {
--_menu-bg: rgb(20 20 30 / .8);
background: var(--media-settings-menu-background,
var(--media-menu-background,
var(--media-control-background,
var(--media-secondary-color, var(--_menu-bg)))));
min-width: var(--media-settings-menu-min-width, 170px);
border-radius: 2px 2px 0 0;
overflow: hidden;
}
@-moz-document url-prefix() {
:host{
--_menu-bg: rgb(20 20 30);
}
}
:host([role="menu"]) {
${/* Bottom fix setting menu items for animation when the height expands. */
""}
justify-content: end;
}
slot:not([name]) {
justify-content: var(--media-settings-menu-justify-content);
flex-direction: var(--media-settings-menu-flex-direction, column);
overflow: visible;
}
#container.has-expanded {
--media-settings-menu-item-opacity: 0;
}
</style>
`
);
}
var MediaSettingsMenu = class extends MediaChromeMenu {
/**
* Returns the anchor element when it is a floating menu.
*/
get anchorElement() {
if (this.anchor !== "auto")
return super.anchorElement;
return getMediaController(this).querySelector(
"media-settings-menu-button"
);
}
};
MediaSettingsMenu.getTemplateHTML = getTemplateHTML3;
if (!GlobalThis.customElements.get("media-settings-menu")) {
GlobalThis.customElements.define("media-settings-menu", MediaSettingsMenu);
}
// ../../node_modules/media-chrome/dist/menu/media-settings-menu-item.js
function getTemplateHTML4(_attrs) {
return (
/*html*/
`
${MediaChromeMenuItem.getTemplateHTML.call(this, _attrs)}
<style>
slot:not([name="submenu"]) {
opacity: var(--media-settings-menu-item-opacity, var(--media-menu-item-opacity));
}
:host([aria-expanded="true"]:hover) {
background: transparent;
}
</style>
`
);
}
function getSuffixSlotInnerHTML2(_attrs) {
return (
/*html*/
`
<svg aria-hidden="true" viewBox="0 0 20 24">
<path d="m8.12 17.585-.742-.669 4.2-4.665-4.2-4.666.743-.669 4.803 5.335-4.803 5.334Z"/>
</svg>
`
);
}
var MediaSettingsMenuItem = class extends MediaChromeMenuItem {
};
MediaSettingsMenuItem.shadowRootOptions = { mode: "open" };
MediaSettingsMenuItem.getTemplateHTML = getTemplateHTML4;
MediaSettingsMenuItem.getSuffixSlotInnerHTML = getSuffixSlotInnerHTML2;
if (!GlobalThis.customElements.get("media-settings-menu-item")) {
GlobalThis.customElements.define(
"media-settings-menu-item",
MediaSettingsMenuItem
);
}
// ../../node_modules/media-chrome/dist/media-tooltip.js
var Attributes3 = {
PLACEMENT: "placement",
BOUNDS: "bounds"
};
function getTemplateHTML5(_attrs) {
return (
/*html*/
`
<style>
:host {
--_tooltip-background-color: var(--media-tooltip-background-color, var(--media-secondary-color, rgba(20, 20, 30, .7)));
--_tooltip-background: var(--media-tooltip-background, var(--_tooltip-background-color));
--_tooltip-arrow-half-width: calc(var(--media-tooltip-arrow-width, 12px) / 2);
--_tooltip-arrow-height: var(--media-tooltip-arrow-height, 5px);
--_tooltip-arrow-background: var(--media-tooltip-arrow-color, var(--_tooltip-background-color));
position: relative;
pointer-events: none;
display: var(--media-tooltip-display, inline-flex);
justify-content: center;
align-items: center;
box-sizing: border-box;
z-index: var(--media-tooltip-z-index, 1);
background: var(--_tooltip-background);
color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
font: var(--media-font,
var(--media-font-weight, 400)
var(--media-font-size, 13px) /
var(--media-text-content-height, var(--media-control-height, 18px))
var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif));
padding: var(--media-tooltip-padding, .35em .7em);
border: var(--media-tooltip-border, none);
border-radius: var(--media-tooltip-border-radius, 5px);
filter: var(--media-tooltip-filter, drop-shadow(0 0 4px rgba(0, 0, 0, .2)));
white-space: var(--media-tooltip-white-space, nowrap);
}
:host([hidden]) {
display: none;
}
img, svg {
display: inline-block;
}
#arrow {
position: absolute;
width: 0px;
height: 0px;
border-style: solid;
display: var(--media-tooltip-arrow-display, block);
}
:host(:not([placement])),
:host([placement="top"]) {
position: absolute;
bottom: calc(100% + var(--media-tooltip-distance, 12px));
left: 50%;
transform: translate(calc(-50% - var(--media-tooltip-offset-x, 0px)), 0);
}
:host(:not([placement])) #arrow,
:host([placement="top"]) #arrow {
top: 100%;
left: 50%;
border-width: var(--_tooltip-arrow-height) var(--_tooltip-arrow-half-width) 0 var(--_tooltip-arrow-half-width);
border-color: var(--_tooltip-arrow-background) transparent transparent transparent;
transform: translate(calc(-50% + var(--media-tooltip-offset-x, 0px)), 0);
}
:host([placement="right"]) {
position: absolute;
left: calc(100% + var(--media-tooltip-distance, 12px));
top: 50%;
transform: translate(0, -50%);
}
:host([placement="right"]) #arrow {
top: 50%;
right: 100%;
border-width: var(--_tooltip-arrow-half-width) var(--_tooltip-arrow-height) var(--_tooltip-arrow-half-width) 0;
border-color: transparent var(--_tooltip-arrow-background) transparent transparent;
transform: translate(0, -50%);
}
:host([placement="bottom"]) {
position: absolute;
top: calc(100% + var(--media-tooltip-distance, 12px));
left: 50%;
transform: translate(calc(-50% - var(--media-tooltip-offset-x, 0px)), 0);
}
:host([placement="bottom"]) #arrow {
bottom: 100%;
left: 50%;
border-width: 0 var(--_tooltip-arrow-half-width) var(--_tooltip-arrow-height) var(--_tooltip-arrow-half-width);
border-color: transparent transparent var(--_tooltip-arrow-background) transparent;
transform: translate(calc(-50% + var(--media-tooltip-offset-x, 0px)), 0);
}
:host([placement="left"]) {
position: absolute;
right: calc(100% + var(--media-tooltip-distance, 12px));
top: 50%;
transform: translate(0, -50%);
}
:host([placement="left"]) #arrow {
top: 50%;
left: 100%;
border-width: var(--_tooltip-arrow-half-width) 0 var(--_tooltip-arrow-half-width) var(--_tooltip-arrow-height);
border-color: transparent transparent transparent var(--_tooltip-arrow-background);
transform: translate(0, -50%);
}
:host([placement="none"]) #arrow {
display: none;
}
</style>
<slot></slot>
<div id="arrow"></div>
`
);
}
var MediaTooltip = class extends GlobalThis.HTMLElement {
constructor() {
super();
this.updateXOffset = () => {
var _a3;
if (!isElementVisible(this, { checkOpacity: false, checkVisibilityCSS: false }))
return;
const placement = this.placement;
if (placement === "left" || placement === "right") {
this.style.removeProperty("--media-tooltip-offset-x");
return;
}
const tooltipStyle = getComputedStyle(this);
const containingEl = (_a3 = closestComposedNode(this, "#" + this.bounds)) != null ? _a3 : getMediaController(this);
if (!containingEl)
return;
const { x: containerX, width: containerWidth } = containingEl.getBoundingClientRect();
const { x: tooltipX, width: tooltipWidth } = this.getBoundingClientRect();
const tooltipRight = tooltipX + tooltipWidth;
const containerRight = containerX + containerWidth;
const offsetXVal = tooltipStyle.getPropertyValue(
"--media-tooltip-offset-x"
);
const currOffsetX = offsetXVal ? parseFloat(offsetXVal.replace("px", "")) : 0;
const marginVal = tooltipStyle.getPropertyValue(
"--media-tooltip-container-margin"
);
const currMargin = marginVal ? parseFloat(marginVal.replace("px", "")) : 0;
const leftDiff = tooltipX - containerX + currOffsetX - currMargin;
const rightDiff = tooltipRight - containerRight + currOffsetX + currMargin;
if (leftDiff < 0) {
this.style.setProperty("--media-tooltip-offset-x", `${leftDiff}px`);
return;
}
if (rightDiff > 0) {
this.style.setProperty("--media-tooltip-offset-x", `${rightDiff}px`);
return;
}
this.style.removeProperty("--media-tooltip-offset-x");
};
if (!this.shadowRoot) {
this.attachShadow(this.constructor.shadowRootOptions);
const attrs = namedNodeMapToObject(this.attributes);
this.shadowRoot.innerHTML = this.constructor.getTemplateHTML(attrs);
}
this.arrowEl = this.shadowRoot.querySelector("#arrow");
if (Object.prototype.hasOwnProperty.call(this, "placement")) {
const placement = this.placement;
delete this.placement;
this.placement = placement;
}
}
static get observedAttributes() {
return [Attributes3.PLACEMENT, Attributes3.BOUNDS];
}
/**
* Get or set tooltip placement
*/
get placement() {
return getStringAttr(this, Attributes3.PLACEMENT);
}
set placement(value) {
setStringAttr(this, Attributes3.PLACEMENT, value);
}
/**
* Get or set tooltip container ID selector that will constrain the tooltips
* horizontal position.
*/
get bounds() {
return getStringAttr(this, Attributes3.BOUNDS);
}
set bounds(value) {
setStringAttr(this, Attributes3.BOUNDS, value);
}
};
MediaTooltip.shadowRootOptions = { mode: "open" };
MediaTooltip.getTemplateHTML = getTemplateHTML5;
if (!GlobalThis.customElements.get("media-tooltip")) {
GlobalThis.customElements.define("media-tooltip", MediaTooltip);
}
var media_tooltip_default = MediaTooltip;
// ../../node_modules/media-chrome/dist/media-chrome-button.js
var __accessCheck6 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet6 = (obj, member, getter) => {
__accessCheck6(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd6 = (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 __privateSet6 = (obj, member, value, setter) => {
__accessCheck6(obj, member, "write to private field");
setter ? setter.call(obj, value) : member.set(obj, value);
return value;
};
var __privateMethod4 = (obj, member, method) => {
__accessCheck6(obj, member, "access private method");
return method;
};
var _mediaController2;
var _clickListener;
var _positionTooltip;
var _keyupListener;
var _keydownListener;
var _setupTooltip;
var setupTooltip_fn;
var Attributes4 = {
TOOLTIP_PLACEMENT: "tooltipplacement",
DISABLED: "disabled",
NO_TOOLTIP: "notooltip"
};
function getTemplateHTML6(_attrs, _props = {}) {
return (
/*html*/
`
<style>
:host {
position: relative;
font: var(--media-font,
var(--media-font-weight, bold)
var(--media-font-size, 14px) /
var(--media-text-content-height, var(--media-control-height, 24px))
var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif));
color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
background: var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7)));
padding: var(--media-button-padding, var(--media-control-padding, 10px));
justify-content: var(--media-button-justify-content, center);
display: inline-flex;
align-items: center;
vertical-align: middle;
box-sizing: border-box;
transition: background .15s linear;
pointer-events: auto;
cursor: var(--media-cursor, pointer);
-webkit-tap-highlight-color: transparent;
}
${/*
Only show outline when keyboard focusing.
https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
*/
""}
:host(:focus-visible) {
box-shadow: inset 0 0 0 2px rgb(27 127 204 / .9);
outline: 0;
}
${/*
* hide default focus ring, particularly when using mouse
*/
""}
:host(:where(:focus)) {
box-shadow: none;
outline: 0;
}
:host(:hover) {
background: var(--media-control-hover-background, rgba(50 50 70 / .7));
}
svg, img, ::slotted(svg), ::slotted(img) {
width: var(--media-button-icon-width);
height: var(--media-button-icon-height, var(--media-control-height, 24px));
transform: var(--media-button-icon-transform);
transition: var(--media-button-icon-transition);
fill: var(--media-icon-color, var(--media-primary-color, rgb(238 238 238)));
vertical-align: middle;
max-width: 100%;
max-height: 100%;
min-width: 100%;
}
media-tooltip {
${/** Make sure unpositioned tooltip doesn't cause page overflow (scroll). */
""}
max-width: 0;
overflow-x: clip;
opacity: 0;
transition: opacity .3s, max-width 0s 9s;
}
:host(:hover) media-tooltip,
:host(:focus-visible) media-tooltip {
max-width: 100vw;
opacity: 1;
transition: opacity .3s;
}
:host([notooltip]) slot[name="tooltip"] {
display: none;
}
</style>
${this.getSlotTemplateHTML(_attrs, _props)}
<slot name="tooltip">
<media-tooltip part="tooltip" aria-hidden="true">
<template shadowrootmode="${media_tooltip_default.shadowRootOptions.mode}">
${media_tooltip_default.getTemplateHTML({})}
</template>
<slot name="tooltip-content">
${this.getTooltipContentHTML(_attrs)}
</slot>
</media-tooltip>
</slot>
`
);
}
function getSlotTemplateHTML(_attrs, _props) {
return (
/*html*/
`
<slot></slot>
`
);
}
function getTooltipContentHTML() {
return "";
}
var MediaChromeButton = class extends GlobalThis.HTMLElement {
constructor() {
super();
__privateAdd6(this, _setupTooltip);
__privateAdd6(this, _mediaController2, void 0);
this.preventClick = false;
this.tooltipEl = null;
__privateAdd6(this, _clickListener, (e) => {
if (!this.preventClick) {
this.handleClick(e);
}
setTimeout(__privateGet6(this, _positionTooltip), 0);
});
__privateAdd6(this, _positionTooltip, () => {
var _a3, _b2;
(_b2 = (_a3 = this.tooltipEl) == null ? void 0 : _a3.updateXOffset) == null ? void 0 : _b2.call(_a3);
});
__privateAdd6(this, _keyupListener, (e) => {
const { key } = e;
if (!this.keysUsed.includes(key)) {
this.removeEventListener("keyup", __privateGet6(this, _keyupListener));
return;
}
if (!this.preventClick) {
this.handleClick(e);
}
});
__privateAdd6(this, _keydownListener, (e) => {
const { metaKey, altKey, key } = e;
if (metaKey || altKey || !this.keysUsed.includes(key)) {
this.removeEventListener("keyup", __privateGet6(this, _keyupListener));
return;
}
this.addEventListener("keyup", __privateGet6(this, _keyupListener), { once: true });
});
if (!this.shadowRoot) {
this.attachShadow(this.constructor.shadowRootOptions);
const attrs = namedNodeMapToObject(this.attributes);
const html = this.constructor.getTemplateHTML(attrs);
this.shadowRoot.setHTMLUnsafe ? this.shadowRoot.setHTMLUnsafe(html) : this.shadowRoot.innerHTML = html;
}
this.tooltipEl = this.shadowRoot.querySelector("media-tooltip");
}
static get observedAttributes() {
return [
"disabled",
Attributes4.TOOLTIP_PLACEMENT,
MediaStateReceiverAttributes.MEDIA_CONTROLLER
];
}
enable() {
this.addEventListener("click", __privateGet6(this, _clickListener));
this.addEventListener("keydown", __privateGet6(this, _keydownListener));
this.tabIndex = 0;
}
disable() {
this.removeEventListener("click", __privateGet6(this, _clickListener));
this.removeEventListener("keydown", __privateGet6(this, _keydownListener));
this.removeEventListener("keyup", __privateGet6(this, _keyupListener));
this.tabIndex = -1;
}
attributeChangedCallback(attrName, oldValue, newValue) {
var _a3, _b2, _c, _d, _e;
if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
if (oldValue) {
(_b2 = (_a3 = __privateGet6(this, _mediaController2)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
__privateSet6(this, _mediaController2, null);
}
if (newValue && this.isConnected) {
__privateSet6(this, _mediaController2, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
(_e = (_d = __privateGet6(this, _mediaController2)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
}
} else if (attrName === "disabled" && newValue !== oldValue) {
if (newValue == null) {
this.enable();
} else {
this.disable();
}
} else if (attrName === Attributes4.TOOLTIP_PLACEMENT && this.tooltipEl && newValue !== oldValue) {
this.tooltipEl.placement = newValue;
}
__privateGet6(this, _positionTooltip).call(this);
}
connectedCallback() {
var _a3, _b2, _c;
const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
style.setProperty(
"display",
`var(--media-control-display, var(--${this.localName}-display, inline-flex))`
);
if (!this.hasAttribute("disabled")) {
this.enable();
} else {
this.disable();
}
this.setAttribute("role", "button");
const mediaControllerId = this.getAttribute(
MediaStateReceiverAttributes.MEDIA_CONTROLLER
);
if (mediaControllerId) {
__privateSet6(
this,
_mediaController2,
// @ts-ignore
(_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(mediaControllerId)
);
(_c = (_b2 = __privateGet6(this, _mediaController2)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
}
GlobalThis.customElements.whenDefined("media-tooltip").then(() => __privateMethod4(this, _setupTooltip, setupTooltip_fn).call(this));
}
disconnectedCallback() {
var _a3, _b2;
this.disable();
(_b2 = (_a3 = __privateGet6(this, _mediaController2)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
__privateSet6(this, _mediaController2, null);
this.removeEventListener("mouseenter", __privateGet6(this, _positionTooltip));
this.removeEventListener("focus", __privateGet6(this, _positionTooltip));
this.removeEventListener("click", __privateGet6(this, _clickListener));
}
get keysUsed() {
return ["Enter", " "];
}
/**
* Get or set tooltip placement
*/
get tooltipPlacement() {
return getStringAttr(this, Attributes4.TOOLTIP_PLACEMENT);
}
set tooltipPlacement(value) {
setStringAttr(this, Attributes4.TOOLTIP_PLACEMENT, value);
}
get mediaController() {
return getStringAttr(this, MediaStateReceiverAttributes.MEDIA_CONTROLLER);
}
set mediaController(value) {
setStringAttr(this, MediaStateReceiverAttributes.MEDIA_CONTROLLER, value);
}
get disabled() {
return getBooleanAttr(this, Attributes4.DISABLED);
}
set disabled(value) {
setBooleanAttr(this, Attributes4.DISABLED, value);
}
get noTooltip() {
return getBooleanAttr(this, Attributes4.NO_TOOLTIP);
}
set noTooltip(value) {
setBooleanAttr(this, Attributes4.NO_TOOLTIP, value);
}
/**
* @abstract
* @argument {Event} e
*/
handleClick(e) {
}
// eslint-disable-line
};
_mediaController2 = /* @__PURE__ */ new WeakMap();
_clickListener = /* @__PURE__ */ new WeakMap();
_positionTooltip = /* @__PURE__ */ new WeakMap();
_keyupListener = /* @__PURE__ */ new WeakMap();
_keydownListener = /* @__PURE__ */ new WeakMap();
_setupTooltip = /* @__PURE__ */ new WeakSet();
setupTooltip_fn = function() {
this.addEventListener("mouseenter", __privateGet6(this, _positionTooltip));
this.addEventListener("focus", __privateGet6(this, _positionTooltip));
this.addEventListener("click", __privateGet6(this, _clickListener));
const initialPlacement = this.tooltipPlacement;
if (initialPlacement && this.tooltipEl) {
this.tooltipEl.placement = initialPlacement;
}
};
MediaChromeButton.shadowRootOptions = { mode: "open" };
MediaChromeButton.getTemplateHTML = getTemplateHTML6;
MediaChromeButton.getSlotTemplateHTML = getSlotTemplateHTML;
MediaChromeButton.getTooltipContentHTML = getTooltipContentHTML;
if (!GlobalThis.customElements.get("media-chrome-button")) {
GlobalThis.customElements.define("media-chrome-button", MediaChromeButton);
}
// ../../node_modules/media-chrome/dist/menu/media-chrome-menu-button.js
var MediaChromeMenuButton = class extends MediaChromeButton {
connectedCallback() {
super.connectedCallback();
if (this.invokeTargetElement) {
this.setAttribute("aria-haspopup", "menu");
}
}
get invokeTarget() {
return this.getAttribute("invoketarget");
}
set invokeTarget(value) {
this.setAttribute("invoketarget", `${value}`);
}
/**
* Returns the element with the id specified by the `invoketarget` attribute.
* @return {HTMLElement | null}
*/
get invokeTargetElement() {
var _a3;
if (this.invokeTarget) {
return (_a3 = getDocumentOrShadowRoot(this)) == null ? void 0 : _a3.querySelector(
`#${this.invokeTarget}`
);
}
return null;
}
handleClick() {
var _a3;
(_a3 = this.invokeTargetElement) == null ? void 0 : _a3.dispatchEvent(
new InvokeEvent({ relatedTarget: this })
);
}
};
if (!GlobalThis.customElements.get("media-chrome-menu-button")) {
GlobalThis.customElements.define(
"media-chrome-menu-button",
MediaChromeMenuButton
);
}
// ../../node_modules/media-chrome/dist/lang/en.js
var En = {
"Start airplay": "Start airplay",
"Stop airplay": "Stop airplay",
Audio: "Audio",
Captions: "Captions",
"Enable captions": "Enable captions",
"Disable captions": "Disable captions",
"Start casting": "Start casting",
"Stop casting": "Stop casting",
"Enter fullscreen mode": "Enter fullscreen mode",
"Exit fullscreen mode": "Exit fullscreen mode",
Mute: "Mute",
Unmute: "Unmute",
"Enter picture in picture mode": "Enter picture in picture mode",
"Exit picture in picture mode": "Exit picture in picture mode",
Play: "Play",
Pause: "Pause",
"Playback rate": "Playback rate",
"Playback rate {playbackRate}": "Playback rate {playbackRate}",
Quality: "Quality",
"Seek backward": "Seek backward",
"Seek forward": "Seek forward",
Settings: "Settings",
Auto: "Auto",
"audio player": "audio player",
"video player": "video player",
volume: "volume",
seek: "seek",
"closed captions": "closed captions",
"current playback rate": "current playback rate",
"playback time": "playback time",
"media loading": "media loading",
settings: "settings",
"audio tracks": "audio tracks",
quality: "quality",
play: "play",
pause: "pause",
mute: "mute",
unmute: "unmute",
live: "live",
Off: "Off",
"start airplay": "start airplay",
"stop airplay": "stop airplay",
"start casting": "start casting",
"stop casting": "stop casting",
"enter fullscreen mode": "enter fullscreen mode",
"exit fullscreen mode": "exit fullscreen mode",
"enter picture in picture mode": "enter picture in picture mode",
"exit picture in picture mode": "exit picture in picture mode",
"seek to live": "seek to live",
"playing live": "playing live",
"seek back {seekOffset} seconds": "seek back {seekOffset} seconds",
"seek forward {seekOffset} seconds": "seek forward {seekOffset} seconds",
"Network Error": "Network Error",
"Decode Error": "Decode Error",
"Source Not Supported": "Source Not Supported",
"Encryption Error": "Encryption Error",
"A network error caused the media download to fail.": "A network error caused the media download to fail.",
"A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.": "A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.",
"An unsupported error occurred. The server or network failed, or your browser does not support this format.": "An unsupported error occurred. The server or network failed, or your browser does not support this format.",
"The media is encrypted and there are no keys to decrypt it.": "The media is encrypted and there are no keys to decrypt it."
};
// ../../node_modules/media-chrome/dist/utils/i18n.js
var _a;
var translations = {
en: En
};
var currentLang = ((_a = globalThis.navigator) == null ? void 0 : _a.language) || "en";
var resolveTranslation = (key) => {
var _a22, _b2, _c;
const [base] = currentLang.split("-");
return ((_a22 = translations[currentLang]) == null ? void 0 : _a22[key]) || ((_b2 = translations[base]) == null ? void 0 : _b2[key]) || ((_c = translations.en) == null ? void 0 : _c[key]) || key;
};
var t = (key, vars = {}) => resolveTranslation(key).replace(
/\{(\w+)\}/g,
(_, v) => v in vars ? String(vars[v]) : `{${v}}`
);
// ../../node_modules/media-chrome/dist/menu/media-settings-menu-button.js
function getSlotTemplateHTML2() {
return (
/*html*/
`
<style>
:host([aria-expanded="true"]) slot[name=tooltip] {
display: none;
}
</style>
<slot name="icon">
<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M4.5 14.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm7.5 0a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm7.5 0a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/>
</svg>
</slot>
`
);
}
function getTooltipContentHTML2() {
return t("Settings");
}
var MediaSettingsMenuButton = class extends MediaChromeMenuButton {
static get observedAttributes() {
return [...super.observedAttributes, "target"];
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-label", t("settings"));
}
/**
* Returns the element with the id specified by the `invoketarget` attribute.
* @return {HTMLElement | null}
*/
get invokeTargetElement() {
if (this.invokeTarget != void 0)
return super.invokeTargetElement;
return getMediaController(this).querySelector("media-settings-menu");
}
};
MediaSettingsMenuButton.getSlotTemplateHTML = getSlotTemplateHTML2;
MediaSettingsMenuButton.getTooltipContentHTML = getTooltipContentHTML2;
if (!GlobalThis.customElements.get("media-settings-menu-button")) {
GlobalThis.customElements.define(
"media-settings-menu-button",
MediaSettingsMenuButton
);
}
// ../../node_modules/media-chrome/dist/menu/media-audio-track-menu.js
var __accessCheck7 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet7 = (obj, member, getter) => {
__accessCheck7(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd7 = (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 __privateSet7 = (obj, member, value, setter) => {
__accessCheck7(obj, member, "write to private field");
setter ? setter.call(obj, value) : member.set(obj, value);
return value;
};
var __privateMethod5 = (obj, member, method) => {
__accessCheck7(obj, member, "access private method");
return method;
};
var _audioTrackList;
var _prevState;
var _render;
var render_fn;
var _onChange;
var onChange_fn;
var MediaAudioTrackMenu = class extends MediaChromeMenu {
constructor() {
super(...arguments);
__privateAdd7(this, _render);
__privateAdd7(this, _onChange);
__privateAdd7(this, _audioTrackList, []);
__privateAdd7(this, _prevState, void 0);
}
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST,
MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED,
MediaUIAttributes.MEDIA_AUDIO_TRACK_UNAVAILABLE
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED && oldValue !== newValue) {
this.value = newValue;
} else if (attrName === MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST && oldValue !== newValue) {
__privateSet7(this, _audioTrackList, parseAudioTrackList(newValue != null ? newValue : ""));
__privateMethod5(this, _render, render_fn).call(this);
}
}
connectedCallback() {
super.connectedCallback();
this.addEventListener("change", __privateMethod5(this, _onChange, onChange_fn));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener("change", __privateMethod5(this, _onChange, onChange_fn));
}
/**
* Returns the anchor element when it is a floating menu.
*/
get anchorElement() {
var _a3;
if (this.anchor !== "auto")
return super.anchorElement;
return (_a3 = getMediaController(this)) == null ? void 0 : _a3.querySelector(
"media-audio-track-menu-button"
);
}
get mediaAudioTrackList() {
return __privateGet7(this, _audioTrackList);
}
set mediaAudioTrackList(list) {
__privateSet7(this, _audioTrackList, list);
__privateMethod5(this, _render, render_fn).call(this);
}
/**
* Get enabled audio track id.
*/
get mediaAudioTrackEnabled() {
var _a3;
return (_a3 = getStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED)) != null ? _a3 : "";
}
set mediaAudioTrackEnabled(id) {
setStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED, id);
}
};
_audioTrackList = /* @__PURE__ */ new WeakMap();
_prevState = /* @__PURE__ */ new WeakMap();
_render = /* @__PURE__ */ new WeakSet();
render_fn = function() {
if (__privateGet7(this, _prevState) === JSON.stringify(this.mediaAudioTrackList))
return;
__privateSet7(this, _prevState, JSON.stringify(this.mediaAudioTrackList));
const audioTrackList = this.mediaAudioTrackList;
this.defaultSlot.textContent = "";
for (const audioTrack of audioTrackList) {
const text = this.formatMenuItemText(audioTrack.label, audioTrack);
const item = createMenuItem({
type: "radio",
text,
value: `${audioTrack.id}`,
checked: audioTrack.enabled
});
item.prepend(createIndicator(this, "checked-indicator"));
this.defaultSlot.append(item);
}
};
_onChange = /* @__PURE__ */ new WeakSet();
onChange_fn = function() {
if (this.value == null)
return;
const event = new GlobalThis.CustomEvent(
MediaUIEvents.MEDIA_AUDIO_TRACK_REQUEST,
{
composed: true,
bubbles: true,
detail: this.value
}
);
this.dispatchEvent(event);
};
if (!GlobalThis.customElements.get("media-audio-track-menu")) {
GlobalThis.customElements.define(
"media-audio-track-menu",
MediaAudioTrackMenu
);
}
// ../../node_modules/media-chrome/dist/menu/media-audio-track-menu-button.js
var audioTrackIcon = (
/*html*/
`<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M11 17H9.5V7H11v10Zm-3-3H6.5v-4H8v4Zm6-5h-1.5v6H14V9Zm3 7h-1.5V8H17v8Z"/>
<path d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"/>
</svg>`
);
function getSlotTemplateHTML3() {
return (
/*html*/
`
<style>
:host([aria-expanded="true"]) slot[name=tooltip] {
display: none;
}
</style>
<slot name="icon">${audioTrackIcon}</slot>
`
);
}
function getTooltipContentHTML3() {
return t("Audio");
}
var MediaAudioTrackMenuButton = class extends MediaChromeMenuButton {
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED,
MediaUIAttributes.MEDIA_AUDIO_TRACK_UNAVAILABLE
];
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-label", t("Audio"));
}
/**
* Returns the element with the id specified by the `invoketarget` attribute.
* @return {HTMLElement | null}
*/
get invokeTargetElement() {
var _a3;
if (this.invokeTarget != void 0)
return super.invokeTargetElement;
return (_a3 = getMediaController(this)) == null ? void 0 : _a3.querySelector("media-audio-track-menu");
}
/**
* Get enabled audio track id.
* @return {string}
*/
get mediaAudioTrackEnabled() {
var _a3;
return (_a3 = getStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED)) != null ? _a3 : "";
}
set mediaAudioTrackEnabled(id) {
setStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED, id);
}
};
MediaAudioTrackMenuButton.getSlotTemplateHTML = getSlotTemplateHTML3;
MediaAudioTrackMenuButton.getTooltipContentHTML = getTooltipContentHTML3;
if (!GlobalThis.customElements.get("media-audio-track-menu-button")) {
GlobalThis.customElements.define(
"media-audio-track-menu-button",
MediaAudioTrackMenuButton
);
}
// ../../node_modules/media-chrome/dist/utils/captions.js
var splitTextTracksStr = (textTracksStr = "") => textTracksStr.split(/\s+/);
var parseTextTrackStr = (textTrackStr = "") => {
const [kind, language, encodedLabel] = textTrackStr.split(":");
const label = encodedLabel ? decodeURIComponent(encodedLabel) : void 0;
return {
kind: kind === "cc" ? TextTrackKinds.CAPTIONS : TextTrackKinds.SUBTITLES,
language,
label
};
};
var parseTextTracksStr = (textTracksStr = "", textTrackLikeObj = {}) => {
return splitTextTracksStr(textTracksStr).map((textTrackStr) => {
const textTrackObj = parseTextTrackStr(textTrackStr);
return {
...textTrackLikeObj,
...textTrackObj
};
});
};
var formatTextTrackObj = ({ kind, label, language } = { kind: "subtitles" }) => {
if (!label)
return language;
return `${kind === "captions" ? "cc" : "sb"}:${language}:${encodeURIComponent(
label
)}`;
};
var stringifyTextTrackList = (textTracks = []) => {
return Array.prototype.map.call(textTracks, formatTextTrackObj).join(" ");
};
var areSubsOn = (el) => {
var _a3;
const showingSubtitles = !!((_a3 = el.mediaSubtitlesShowing) == null ? void 0 : _a3.length) || el.hasAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING);
return showingSubtitles;
};
// ../../node_modules/media-chrome/dist/menu/media-captions-menu.js
var __accessCheck8 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet8 = (obj, member, getter) => {
__accessCheck8(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd8 = (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 __privateSet8 = (obj, member, value, setter) => {
__accessCheck8(obj, member, "write to private field");
setter ? setter.call(obj, value) : member.set(obj, value);
return value;
};
var __privateMethod6 = (obj, member, method) => {
__accessCheck8(obj, member, "access private method");
return method;
};
var _prevState2;
var _render2;
var render_fn2;
var _onChange2;
var onChange_fn2;
var ccIcon = (
/*html*/
`
<svg aria-hidden="true" viewBox="0 0 26 24" part="captions-indicator indicator">
<path d="M22.83 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.39 9.45a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.92 3.92 0 0 1 .92-2.77 3.18 3.18 0 0 1 2.43-1 2.94 2.94 0 0 1 2.13.78c.364.359.62.813.74 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.17 1.61 1.61 0 0 0-1.29.58 2.79 2.79 0 0 0-.5 1.89 3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.48 1.48 0 0 0 1-.37 2.1 2.1 0 0 0 .59-1.14l1.4.44a3.23 3.23 0 0 1-1.07 1.69Zm7.22 0a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.88 3.88 0 0 1 .93-2.77 3.14 3.14 0 0 1 2.42-1 3 3 0 0 1 2.16.82 2.8 2.8 0 0 1 .73 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.21 1.61 1.61 0 0 0-1.29.58A2.79 2.79 0 0 0 15 12a3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.44 1.44 0 0 0 1-.37 2.1 2.1 0 0 0 .6-1.15l1.4.44a3.17 3.17 0 0 1-1.1 1.7Z"/>
</svg>`
);
function getTemplateHTML7(_attrs) {
return (
/*html*/
`
${MediaChromeMenu.getTemplateHTML(_attrs)}
<slot name="captions-indicator" hidden>${ccIcon}</slot>
`
);
}
var MediaCaptionsMenu = class extends MediaChromeMenu {
constructor() {
super(...arguments);
__privateAdd8(this, _render2);
__privateAdd8(this, _onChange2);
__privateAdd8(this, _prevState2, void 0);
}
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_SUBTITLES_LIST,
MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_LIST && oldValue !== newValue) {
__privateMethod6(this, _render2, render_fn2).call(this);
} else if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_SHOWING && oldValue !== newValue) {
this.value = newValue;
}
}
connectedCallback() {
super.connectedCallback();
this.addEventListener("change", __privateMethod6(this, _onChange2, onChange_fn2));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener("change", __privateMethod6(this, _onChange2, onChange_fn2));
}
/**
* Returns the anchor element when it is a floating menu.
*/
get anchorElement() {
if (this.anchor !== "auto")
return super.anchorElement;
return getMediaController(this).querySelector("media-captions-menu-button");
}
/**
* @type {Array<object>} An array of TextTrack-like objects.
* Objects must have the properties: kind, language, and label.
*/
get mediaSubtitlesList() {
return getSubtitlesListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST);
}
set mediaSubtitlesList(list) {
setSubtitlesListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST, list);
}
/**
* An array of TextTrack-like objects.
* Objects must have the properties: kind, language, and label.
*/
get mediaSubtitlesShowing() {
return getSubtitlesListAttr(
this,
MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
);
}
set mediaSubtitlesShowing(list) {
setSubtitlesListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, list);
}
};
_prevState2 = /* @__PURE__ */ new WeakMap();
_render2 = /* @__PURE__ */ new WeakSet();
render_fn2 = function() {
var _a3;
if (__privateGet8(this, _prevState2) === JSON.stringify(this.mediaSubtitlesList))
return;
__privateSet8(this, _prevState2, JSON.stringify(this.mediaSubtitlesList));
this.defaultSlot.textContent = "";
const isOff = !this.value;
const item = createMenuItem({
type: "radio",
text: this.formatMenuItemText(t("Off")),
value: "off",
checked: isOff
});
item.prepend(createIndicator(this, "checked-indicator"));
this.defaultSlot.append(item);
const subtitlesList = this.mediaSubtitlesList;
for (const subs of subtitlesList) {
const item2 = createMenuItem({
type: "radio",
text: this.formatMenuItemText(subs.label, subs),
value: formatTextTrackObj(subs),
checked: this.value == formatTextTrackObj(subs)
});
item2.prepend(createIndicator(this, "checked-indicator"));
const type = (_a3 = subs.kind) != null ? _a3 : "subs";
if (type === "captions") {
item2.append(createIndicator(this, "captions-indicator"));
}
this.defaultSlot.append(item2);
}
};
_onChange2 = /* @__PURE__ */ new WeakSet();
onChange_fn2 = function() {
const showingSubs = this.mediaSubtitlesShowing;
const showingSubsStr = this.getAttribute(
MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
);
const localStateChange = this.value !== showingSubsStr;
if ((showingSubs == null ? void 0 : showingSubs.length) && localStateChange) {
this.dispatchEvent(
new GlobalThis.CustomEvent(
MediaUIEvents.MEDIA_DISABLE_SUBTITLES_REQUEST,
{
composed: true,
bubbles: true,
detail: showingSubs
}
)
);
}
if (!this.value || !localStateChange)
return;
const event = new GlobalThis.CustomEvent(
MediaUIEvents.MEDIA_SHOW_SUBTITLES_REQUEST,
{
composed: true,
bubbles: true,
detail: this.value
}
);
this.dispatchEvent(event);
};
MediaCaptionsMenu.getTemplateHTML = getTemplateHTML7;
var getSubtitlesListAttr = (el, attrName) => {
const attrVal = el.getAttribute(attrName);
return attrVal ? parseTextTracksStr(attrVal) : [];
};
var setSubtitlesListAttr = (el, attrName, list) => {
if (!(list == null ? void 0 : list.length)) {
el.removeAttribute(attrName);
return;
}
const newValStr = stringifyTextTrackList(list);
const oldVal = el.getAttribute(attrName);
if (oldVal === newValStr)
return;
el.setAttribute(attrName, newValStr);
};
if (!GlobalThis.customElements.get("media-captions-menu")) {
GlobalThis.customElements.define("media-captions-menu", MediaCaptionsMenu);
}
// ../../node_modules/media-chrome/dist/menu/media-captions-menu-button.js
var ccIconOn = `<svg aria-hidden="true" viewBox="0 0 26 24">
<path d="M22.83 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.39 9.45a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.92 3.92 0 0 1 .92-2.77 3.18 3.18 0 0 1 2.43-1 2.94 2.94 0 0 1 2.13.78c.364.359.62.813.74 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.17 1.61 1.61 0 0 0-1.29.58 2.79 2.79 0 0 0-.5 1.89 3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.48 1.48 0 0 0 1-.37 2.1 2.1 0 0 0 .59-1.14l1.4.44a3.23 3.23 0 0 1-1.07 1.69Zm7.22 0a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.88 3.88 0 0 1 .93-2.77 3.14 3.14 0 0 1 2.42-1 3 3 0 0 1 2.16.82 2.8 2.8 0 0 1 .73 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.21 1.61 1.61 0 0 0-1.29.58A2.79 2.79 0 0 0 15 12a3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.44 1.44 0 0 0 1-.37 2.1 2.1 0 0 0 .6-1.15l1.4.44a3.17 3.17 0 0 1-1.1 1.7Z"/>
</svg>`;
var ccIconOff = `<svg aria-hidden="true" viewBox="0 0 26 24">
<path d="M17.73 14.09a1.4 1.4 0 0 1-1 .37 1.579 1.579 0 0 1-1.27-.58A3 3 0 0 1 15 12a2.8 2.8 0 0 1 .5-1.85 1.63 1.63 0 0 1 1.29-.57 1.47 1.47 0 0 1 1.51 1.2l1.43-.34A2.89 2.89 0 0 0 19 9.07a3 3 0 0 0-2.14-.78 3.14 3.14 0 0 0-2.42 1 3.91 3.91 0 0 0-.93 2.78 3.74 3.74 0 0 0 .92 2.66 3.07 3.07 0 0 0 2.34 1 3.07 3.07 0 0 0 1.91-.57 3.17 3.17 0 0 0 1.07-1.74l-1.4-.45c-.083.43-.3.822-.62 1.12Zm-7.22 0a1.43 1.43 0 0 1-1 .37 1.58 1.58 0 0 1-1.27-.58A3 3 0 0 1 7.76 12a2.8 2.8 0 0 1 .5-1.85 1.63 1.63 0 0 1 1.29-.57 1.47 1.47 0 0 1 1.51 1.2l1.43-.34a2.81 2.81 0 0 0-.74-1.32 2.94 2.94 0 0 0-2.13-.78 3.18 3.18 0 0 0-2.43 1 4 4 0 0 0-.92 2.78 3.74 3.74 0 0 0 .92 2.66 3.07 3.07 0 0 0 2.34 1 3.07 3.07 0 0 0 1.91-.57 3.23 3.23 0 0 0 1.07-1.74l-1.4-.45a2.06 2.06 0 0 1-.6 1.07Zm12.32-8.41a2.59 2.59 0 0 0-2.3-2.51C18.72 3.05 15.86 3 13 3c-2.86 0-5.72.05-7.53.17a2.59 2.59 0 0 0-2.3 2.51c-.23 4.207-.23 8.423 0 12.63a2.57 2.57 0 0 0 2.3 2.5c1.81.13 4.67.19 7.53.19 2.86 0 5.72-.06 7.53-.19a2.57 2.57 0 0 0 2.3-2.5c.23-4.207.23-8.423 0-12.63Zm-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.14-.21-8.29 0-12.43a1.11 1.11 0 0 1 .91-1.11C7.24 4.56 10 4.49 13 4.49s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.14.21 8.29 0 12.43Z"/>
</svg>`;
function getSlotTemplateHTML4() {
return (
/*html*/
`
<style>
:host([aria-checked="true"]) slot[name=off] {
display: none !important;
}
${/* Double negative, but safer if display doesn't equal 'block' */
""}
:host(:not([aria-checked="true"])) slot[name=on] {
display: none !important;
}
:host([aria-expanded="true"]) slot[name=tooltip] {
display: none;
}
</style>
<slot name="icon">
<slot name="on">${ccIconOn}</slot>
<slot name="off">${ccIconOff}</slot>
</slot>
`
);
}
function getTooltipContentHTML4() {
return t("Captions");
}
var updateAriaChecked = (el) => {
el.setAttribute("aria-checked", areSubsOn(el).toString());
};
var MediaCaptionsMenuButton = class extends MediaChromeMenuButton {
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_SUBTITLES_LIST,
MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
];
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-label", t("closed captions"));
updateAriaChecked(this);
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_SHOWING) {
updateAriaChecked(this);
}
}
/**
* Returns the element with the id specified by the `invoketarget` attribute.
* @return {HTMLElement | null}
*/
get invokeTargetElement() {
var _a3;
if (this.invokeTarget != void 0)
return super.invokeTargetElement;
return (_a3 = getMediaController(this)) == null ? void 0 : _a3.querySelector("media-captions-menu");
}
/**
* An array of TextTrack-like objects.
* Objects must have the properties: kind, language, and label.
*/
get mediaSubtitlesList() {
return getSubtitlesListAttr2(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST);
}
set mediaSubtitlesList(list) {
setSubtitlesListAttr2(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST, list);
}
/**
* An array of TextTrack-like objects.
* Objects must have the properties: kind, language, and label.
*/
get mediaSubtitlesShowing() {
return getSubtitlesListAttr2(
this,
MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
);
}
set mediaSubtitlesShowing(list) {
setSubtitlesListAttr2(this, MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, list);
}
};
MediaCaptionsMenuButton.getSlotTemplateHTML = getSlotTemplateHTML4;
MediaCaptionsMenuButton.getTooltipContentHTML = getTooltipContentHTML4;
var getSubtitlesListAttr2 = (el, attrName) => {
const attrVal = el.getAttribute(attrName);
return attrVal ? parseTextTracksStr(attrVal) : [];
};
var setSubtitlesListAttr2 = (el, attrName, list) => {
if (!(list == null ? void 0 : list.length)) {
el.removeAttribute(attrName);
return;
}
const newValStr = stringifyTextTrackList(list);
const oldVal = el.getAttribute(attrName);
if (oldVal === newValStr)
return;
el.setAttribute(attrName, newValStr);
};
if (!GlobalThis.customElements.get("media-captions-menu-button")) {
GlobalThis.customElements.define(
"media-captions-menu-button",
MediaCaptionsMenuButton
);
}
// ../../node_modules/media-chrome/dist/utils/attribute-token-list.js
var __accessCheck9 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet9 = (obj, member, getter) => {
__accessCheck9(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd9 = (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 __privateSet9 = (obj, member, value, setter) => {
__accessCheck9(obj, member, "write to private field");
setter ? setter.call(obj, value) : member.set(obj, value);
return value;
};
var _el;
var _attr;
var _defaultSet;
var _tokenSet;
var _tokens;
var tokens_get;
var AttributeTokenList = class {
constructor(el, attr, { defaultValue } = { defaultValue: void 0 }) {
__privateAdd9(this, _tokens);
__privateAdd9(this, _el, void 0);
__privateAdd9(this, _attr, void 0);
__privateAdd9(this, _defaultSet, void 0);
__privateAdd9(this, _tokenSet, /* @__PURE__ */ new Set());
__privateSet9(this, _el, el);
__privateSet9(this, _attr, attr);
__privateSet9(this, _defaultSet, new Set(defaultValue));
}
[Symbol.iterator]() {
return __privateGet9(this, _tokens, tokens_get).values();
}
get length() {
return __privateGet9(this, _tokens, tokens_get).size;
}
get value() {
var _a3;
return (_a3 = [...__privateGet9(this, _tokens, tokens_get)].join(" ")) != null ? _a3 : "";
}
set value(val) {
var _a3;
if (val === this.value)
return;
__privateSet9(this, _tokenSet, /* @__PURE__ */ new Set());
this.add(...(_a3 = val == null ? void 0 : val.split(" ")) != null ? _a3 : []);
}
toString() {
return this.value;
}
item(index) {
return [...__privateGet9(this, _tokens, tokens_get)][index];
}
values() {
return __privateGet9(this, _tokens, tokens_get).values();
}
forEach(callback, thisArg) {
__privateGet9(this, _tokens, tokens_get).forEach(callback, thisArg);
}
add(...tokens) {
var _a3, _b2;
tokens.forEach((t2) => __privateGet9(this, _tokenSet).add(t2));
if (this.value === "" && !((_a3 = __privateGet9(this, _el)) == null ? void 0 : _a3.hasAttribute(`${__privateGet9(this, _attr)}`))) {
return;
}
(_b2 = __privateGet9(this, _el)) == null ? void 0 : _b2.setAttribute(`${__privateGet9(this, _attr)}`, `${this.value}`);
}
remove(...tokens) {
var _a3;
tokens.forEach((t2) => __privateGet9(this, _tokenSet).delete(t2));
(_a3 = __privateGet9(this, _el)) == null ? void 0 : _a3.setAttribute(`${__privateGet9(this, _attr)}`, `${this.value}`);
}
contains(token) {
return __privateGet9(this, _tokens, tokens_get).has(token);
}
toggle(token, force) {
if (typeof force !== "undefined") {
if (force) {
this.add(token);
return true;
} else {
this.remove(token);
return false;
}
}
if (this.contains(token)) {
this.remove(token);
return false;
}
this.add(token);
return true;
}
replace(oldToken, newToken) {
this.remove(oldToken);
this.add(newToken);
return oldToken === newToken;
}
};
_el = /* @__PURE__ */ new WeakMap();
_attr = /* @__PURE__ */ new WeakMap();
_defaultSet = /* @__PURE__ */ new WeakMap();
_tokenSet = /* @__PURE__ */ new WeakMap();
_tokens = /* @__PURE__ */ new WeakSet();
tokens_get = function() {
return __privateGet9(this, _tokenSet).size ? __privateGet9(this, _tokenSet) : __privateGet9(this, _defaultSet);
};
// ../../node_modules/media-chrome/dist/media-playback-rate-button.js
var __accessCheck10 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet10 = (obj, member, getter) => {
__accessCheck10(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd10 = (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 _rates;
var Attributes5 = {
RATES: "rates"
};
var DEFAULT_RATES = [1, 1.2, 1.5, 1.7, 2];
var DEFAULT_RATE = 1;
function getSlotTemplateHTML5(attrs) {
return (
/*html*/
`
<style>
:host {
min-width: 5ch;
padding: var(--media-button-padding, var(--media-control-padding, 10px 5px));
}
</style>
<slot name="icon">${attrs["mediaplaybackrate"] || DEFAULT_RATE}x</slot>
`
);
}
function getTooltipContentHTML5() {
return t("Playback rate");
}
var MediaPlaybackRateButton = class extends MediaChromeButton {
constructor() {
var _a3;
super();
__privateAdd10(this, _rates, new AttributeTokenList(this, Attributes5.RATES, {
defaultValue: DEFAULT_RATES
}));
this.container = this.shadowRoot.querySelector('slot[name="icon"]');
this.container.innerHTML = `${(_a3 = this.mediaPlaybackRate) != null ? _a3 : DEFAULT_RATE}x`;
}
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_PLAYBACK_RATE,
Attributes5.RATES
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === Attributes5.RATES) {
__privateGet10(this, _rates).value = newValue;
}
if (attrName === MediaUIAttributes.MEDIA_PLAYBACK_RATE) {
const newPlaybackRate = newValue ? +newValue : Number.NaN;
const playbackRate = !Number.isNaN(newPlaybackRate) ? newPlaybackRate : DEFAULT_RATE;
this.container.innerHTML = `${playbackRate}x`;
this.setAttribute(
"aria-label",
t("Playback rate {playbackRate}", { playbackRate })
);
}
}
/**
* Get the playback rates for the button.
*/
get rates() {
return __privateGet10(this, _rates);
}
/**
* Set the playback rates for the button.
* For React 19+ compatibility, accept a string of space-separated rates.
*/
set rates(value) {
if (!value) {
__privateGet10(this, _rates).value = "";
} else if (Array.isArray(value)) {
__privateGet10(this, _rates).value = value.join(" ");
} else if (typeof value === "string") {
__privateGet10(this, _rates).value = value;
}
}
/**
* @type {number} The current playback rate
*/
get mediaPlaybackRate() {
return getNumericAttr(
this,
MediaUIAttributes.MEDIA_PLAYBACK_RATE,
DEFAULT_RATE
);
}
set mediaPlaybackRate(value) {
setNumericAttr(this, MediaUIAttributes.MEDIA_PLAYBACK_RATE, value);
}
handleClick() {
var _a3, _b2;
const availableRates = Array.from(__privateGet10(this, _rates).values(), (str) => +str).sort(
(a, b) => a - b
);
const detail = (_b2 = (_a3 = availableRates.find((r) => r > this.mediaPlaybackRate)) != null ? _a3 : availableRates[0]) != null ? _b2 : DEFAULT_RATE;
const evt = new GlobalThis.CustomEvent(
MediaUIEvents.MEDIA_PLAYBACK_RATE_REQUEST,
{ composed: true, bubbles: true, detail }
);
this.dispatchEvent(evt);
}
};
_rates = /* @__PURE__ */ new WeakMap();
MediaPlaybackRateButton.getSlotTemplateHTML = getSlotTemplateHTML5;
MediaPlaybackRateButton.getTooltipContentHTML = getTooltipContentHTML5;
if (!GlobalThis.customElements.get("media-playback-rate-button")) {
GlobalThis.customElements.define(
"media-playback-rate-button",
MediaPlaybackRateButton
);
}
// ../../node_modules/media-chrome/dist/menu/media-playback-rate-menu.js
var __accessCheck11 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet11 = (obj, member, getter) => {
__accessCheck11(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd11 = (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 __privateMethod7 = (obj, member, method) => {
__accessCheck11(obj, member, "access private method");
return method;
};
var _rates2;
var _render3;
var render_fn3;
var _onChange3;
var onChange_fn3;
var Attributes6 = {
RATES: "rates"
};
var MediaPlaybackRateMenu = class extends MediaChromeMenu {
constructor() {
super();
__privateAdd11(this, _render3);
__privateAdd11(this, _onChange3);
__privateAdd11(this, _rates2, new AttributeTokenList(this, Attributes6.RATES, {
defaultValue: DEFAULT_RATES
}));
__privateMethod7(this, _render3, render_fn3).call(this);
}
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_PLAYBACK_RATE,
Attributes6.RATES
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === MediaUIAttributes.MEDIA_PLAYBACK_RATE && oldValue != newValue) {
this.value = newValue;
} else if (attrName === Attributes6.RATES && oldValue != newValue) {
__privateGet11(this, _rates2).value = newValue;
__privateMethod7(this, _render3, render_fn3).call(this);
}
}
connectedCallback() {
super.connectedCallback();
this.addEventListener("change", __privateMethod7(this, _onChange3, onChange_fn3));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener("change", __privateMethod7(this, _onChange3, onChange_fn3));
}
/**
* Returns the anchor element when it is a floating menu.
*/
get anchorElement() {
if (this.anchor !== "auto")
return super.anchorElement;
return getMediaController(this).querySelector(
"media-playback-rate-menu-button"
);
}
/**
* Get the playback rates for the button.
*/
get rates() {
return __privateGet11(this, _rates2);
}
/**
* Set the playback rates for the button.
* For React 19+ compatibility, accept a string of space-separated rates.
*/
set rates(value) {
if (!value) {
__privateGet11(this, _rates2).value = "";
} else if (Array.isArray(value)) {
__privateGet11(this, _rates2).value = value.join(" ");
} else if (typeof value === "string") {
__privateGet11(this, _rates2).value = value;
}
__privateMethod7(this, _render3, render_fn3).call(this);
}
/**
* The current playback rate
*/
get mediaPlaybackRate() {
return getNumericAttr(
this,
MediaUIAttributes.MEDIA_PLAYBACK_RATE,
DEFAULT_RATE
);
}
set mediaPlaybackRate(value) {
setNumericAttr(this, MediaUIAttributes.MEDIA_PLAYBACK_RATE, value);
}
};
_rates2 = /* @__PURE__ */ new WeakMap();
_render3 = /* @__PURE__ */ new WeakSet();
render_fn3 = function() {
this.defaultSlot.textContent = "";
for (const rate of __privateGet11(this, _rates2)) {
const item = createMenuItem({
type: "radio",
text: this.formatMenuItemText(`${rate}x`, rate),
value: rate,
checked: this.mediaPlaybackRate === Number(rate)
});
item.prepend(createIndicator(this, "checked-indicator"));
this.defaultSlot.append(item);
}
};
_onChange3 = /* @__PURE__ */ new WeakSet();
onChange_fn3 = function() {
if (!this.value)
return;
const event = new GlobalThis.CustomEvent(
MediaUIEvents.MEDIA_PLAYBACK_RATE_REQUEST,
{
composed: true,
bubbles: true,
detail: this.value
}
);
this.dispatchEvent(event);
};
if (!GlobalThis.customElements.get("media-playback-rate-menu")) {
GlobalThis.customElements.define(
"media-playback-rate-menu",
MediaPlaybackRateMenu
);
}
// ../../node_modules/media-chrome/dist/menu/media-playback-rate-menu-button.js
var DEFAULT_RATE2 = 1;
function getSlotTemplateHTML6(attrs) {
return (
/*html*/
`
<style>
:host {
min-width: 5ch;
padding: var(--media-button-padding, var(--media-control-padding, 10px 5px));
}
:host([aria-expanded="true"]) slot[name=tooltip] {
display: none;
}
</style>
<slot name="icon">${attrs["mediaplaybackrate"] || DEFAULT_RATE2}x</slot>
`
);
}
function getTooltipContentHTML6() {
return t("Playback rate");
}
var MediaPlaybackRateMenuButton = class extends MediaChromeMenuButton {
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_PLAYBACK_RATE
];
}
constructor() {
var _a3;
super();
this.container = this.shadowRoot.querySelector('slot[name="icon"]');
this.container.innerHTML = `${(_a3 = this.mediaPlaybackRate) != null ? _a3 : DEFAULT_RATE2}x`;
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === MediaUIAttributes.MEDIA_PLAYBACK_RATE) {
const newPlaybackRate = newValue ? +newValue : Number.NaN;
const playbackRate = !Number.isNaN(newPlaybackRate) ? newPlaybackRate : DEFAULT_RATE2;
this.container.innerHTML = `${playbackRate}x`;
this.setAttribute(
"aria-label",
t("Playback rate {playbackRate}", { playbackRate })
);
}
}
/**
* Returns the element with the id specified by the `invoketarget` attribute.
*/
get invokeTargetElement() {
if (this.invokeTarget != void 0)
return super.invokeTargetElement;
return getMediaController(this).querySelector("media-playback-rate-menu");
}
/**
* The current playback rate
*/
get mediaPlaybackRate() {
return getNumericAttr(
this,
MediaUIAttributes.MEDIA_PLAYBACK_RATE,
DEFAULT_RATE2
);
}
set mediaPlaybackRate(value) {
setNumericAttr(this, MediaUIAttributes.MEDIA_PLAYBACK_RATE, value);
}
};
MediaPlaybackRateMenuButton.getSlotTemplateHTML = getSlotTemplateHTML6;
MediaPlaybackRateMenuButton.getTooltipContentHTML = getTooltipContentHTML6;
if (!GlobalThis.customElements.get("media-playback-rate-menu-button")) {
GlobalThis.customElements.define(
"media-playback-rate-menu-button",
MediaPlaybackRateMenuButton
);
}
// ../../node_modules/media-chrome/dist/menu/media-rendition-menu.js
var __accessCheck12 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet12 = (obj, member, getter) => {
__accessCheck12(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd12 = (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 __privateSet10 = (obj, member, value, setter) => {
__accessCheck12(obj, member, "write to private field");
setter ? setter.call(obj, value) : member.set(obj, value);
return value;
};
var __privateMethod8 = (obj, member, method) => {
__accessCheck12(obj, member, "access private method");
return method;
};
var _renditionList;
var _prevState3;
var _render4;
var render_fn4;
var _onChange4;
var onChange_fn4;
var MediaRenditionMenu = class extends MediaChromeMenu {
constructor() {
super(...arguments);
__privateAdd12(this, _render4);
__privateAdd12(this, _onChange4);
__privateAdd12(this, _renditionList, []);
__privateAdd12(this, _prevState3, {});
}
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_RENDITION_LIST,
MediaUIAttributes.MEDIA_RENDITION_SELECTED,
MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
MediaUIAttributes.MEDIA_HEIGHT
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === MediaUIAttributes.MEDIA_RENDITION_SELECTED && oldValue !== newValue) {
this.value = newValue != null ? newValue : "auto";
__privateMethod8(this, _render4, render_fn4).call(this);
} else if (attrName === MediaUIAttributes.MEDIA_RENDITION_LIST && oldValue !== newValue) {
__privateSet10(this, _renditionList, parseRenditionList(newValue));
__privateMethod8(this, _render4, render_fn4).call(this);
} else if (attrName === MediaUIAttributes.MEDIA_HEIGHT && oldValue !== newValue) {
__privateMethod8(this, _render4, render_fn4).call(this);
}
}
connectedCallback() {
super.connectedCallback();
this.addEventListener("change", __privateMethod8(this, _onChange4, onChange_fn4));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener("change", __privateMethod8(this, _onChange4, onChange_fn4));
}
/**
* Returns the anchor element when it is a floating menu.
*/
get anchorElement() {
if (this.anchor !== "auto")
return super.anchorElement;
return getMediaController(this).querySelector(
"media-rendition-menu-button"
);
}
get mediaRenditionList() {
return __privateGet12(this, _renditionList);
}
set mediaRenditionList(list) {
__privateSet10(this, _renditionList, list);
__privateMethod8(this, _render4, render_fn4).call(this);
}
/**
* Get selected rendition id.
*/
get mediaRenditionSelected() {
return getStringAttr(this, MediaUIAttributes.MEDIA_RENDITION_SELECTED);
}
set mediaRenditionSelected(id) {
setStringAttr(this, MediaUIAttributes.MEDIA_RENDITION_SELECTED, id);
}
get mediaHeight() {
return getNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT);
}
set mediaHeight(height) {
setNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT, height);
}
};
_renditionList = /* @__PURE__ */ new WeakMap();
_prevState3 = /* @__PURE__ */ new WeakMap();
_render4 = /* @__PURE__ */ new WeakSet();
render_fn4 = function() {
if (__privateGet12(this, _prevState3).mediaRenditionList === JSON.stringify(this.mediaRenditionList) && __privateGet12(this, _prevState3).mediaHeight === this.mediaHeight)
return;
__privateGet12(this, _prevState3).mediaRenditionList = JSON.stringify(this.mediaRenditionList);
__privateGet12(this, _prevState3).mediaHeight = this.mediaHeight;
const renditionList = this.mediaRenditionList.sort(
(a, b) => b.height - a.height
);
for (const rendition of renditionList) {
rendition.selected = rendition.id === this.mediaRenditionSelected;
}
this.defaultSlot.textContent = "";
const isAuto = !this.mediaRenditionSelected;
for (const rendition of renditionList) {
const text2 = this.formatMenuItemText(
`${Math.min(rendition.width, rendition.height)}p`,
rendition
);
const item2 = createMenuItem({
type: "radio",
text: text2,
value: `${rendition.id}`,
checked: rendition.selected && !isAuto
});
item2.prepend(createIndicator(this, "checked-indicator"));
this.defaultSlot.append(item2);
}
const text = isAuto ? this.formatMenuItemText(`${t("Auto")} (${this.mediaHeight}p)`) : this.formatMenuItemText(t("Auto"));
const item = createMenuItem({
type: "radio",
text,
value: "auto",
checked: isAuto
});
const autoDescription = this.mediaHeight > 0 ? `${t("Auto")} (${this.mediaHeight}p)` : t("Auto");
item.dataset.description = autoDescription;
item.prepend(createIndicator(this, "checked-indicator"));
this.defaultSlot.append(item);
};
_onChange4 = /* @__PURE__ */ new WeakSet();
onChange_fn4 = function() {
if (this.value == null)
return;
const event = new GlobalThis.CustomEvent(
MediaUIEvents.MEDIA_RENDITION_REQUEST,
{
composed: true,
bubbles: true,
detail: this.value
}
);
this.dispatchEvent(event);
};
if (!GlobalThis.customElements.get("media-rendition-menu")) {
GlobalThis.customElements.define("media-rendition-menu", MediaRenditionMenu);
}
// ../../node_modules/media-chrome/dist/menu/media-rendition-menu-button.js
var renditionIcon = (
/*html*/
`<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M13.5 2.5h2v6h-2v-2h-11v-2h11v-2Zm4 2h4v2h-4v-2Zm-12 4h2v6h-2v-2h-3v-2h3v-2Zm4 2h12v2h-12v-2Zm1 4h2v6h-2v-2h-8v-2h8v-2Zm4 2h7v2h-7v-2Z" />
</svg>`
);
function getSlotTemplateHTML7() {
return (
/*html*/
`
<style>
:host([aria-expanded="true"]) slot[name=tooltip] {
display: none;
}
</style>
<slot name="icon">${renditionIcon}</slot>
`
);
}
function getTooltipContentHTML7() {
return t("Quality");
}
var MediaRenditionMenuButton = class extends MediaChromeMenuButton {
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_RENDITION_SELECTED,
MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
MediaUIAttributes.MEDIA_HEIGHT
];
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-label", t("quality"));
}
/**
* Returns the element with the id specified by the `invoketarget` attribute.
*/
get invokeTargetElement() {
if (this.invokeTarget != void 0)
return super.invokeTargetElement;
return getMediaController(this).querySelector("media-rendition-menu");
}
/**
* Get selected rendition id.
*/
get mediaRenditionSelected() {
return getStringAttr(this, MediaUIAttributes.MEDIA_RENDITION_SELECTED);
}
set mediaRenditionSelected(id) {
setStringAttr(this, MediaUIAttributes.MEDIA_RENDITION_SELECTED, id);
}
get mediaHeight() {
return getNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT);
}
set mediaHeight(height) {
setNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT, height);
}
};
MediaRenditionMenuButton.getSlotTemplateHTML = getSlotTemplateHTML7;
MediaRenditionMenuButton.getTooltipContentHTML = getTooltipContentHTML7;
if (!GlobalThis.customElements.get("media-rendition-menu-button")) {
GlobalThis.customElements.define(
"media-rendition-menu-button",
MediaRenditionMenuButton
);
}
// src/themes/news/index.ts
var template = internalDocument.createElement("template");
if ("innerHTML" in template) template.innerHTML = news_default;
var _a2, _b;
var MediaThemeNews = class extends MediaThemeElement {
};
MediaThemeNews.template = (_b = (_a2 = template.content) == null ? void 0 : _a2.children) == null ? void 0 : _b[0];
if (!internalGlobalThis.customElements.get("media-theme-news")) {
internalGlobalThis.customElements.define("media-theme-news", MediaThemeNews);
}
var index_default = MediaThemeNews;
export {
index_default as default
};