oier/pole-book
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0092aa321d7dfdfede52602d52961225cf9a5bb6
pole-book/server/node_modules/@mux/mux-player/dist/themes/gerwig/index.js

5475 lines
192 KiB
JavaScript
Raw Blame History

"use strict";
var mediaThemeGerwig = (() => {
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var __accessCheck = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet = (obj, member, getter) => {
__accessCheck(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd = (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 __privateSet = (obj, member, value, setter) => {
__accessCheck(obj, member, "write to private field");
setter ? setter.call(obj, value) : member.set(obj, value);
return value;
};
// src/themes/gerwig/index.ts
var gerwig_exports = {};
__export(gerwig_exports, {
default: () => gerwig_default2
});
// src/themes/gerwig/gerwig.html
var gerwig_default = `<template id="media-theme-gerwig">
<style>
@keyframes pre-play-hide {
0% {
transform: scale(1);
opacity: 1;
}
30% {
transform: scale(0.7);
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
:host {
--_primary-color: var(--media-primary-color, #fff);
--_secondary-color: var(--media-secondary-color, transparent);
--_accent-color: var(--media-accent-color, #fa50b5);
--_text-color: var(--media-text-color, #000);
--media-icon-color: var(--_primary-color);
--media-control-background: var(--_secondary-color);
--media-control-hover-background: var(--_accent-color);
--media-time-buffered-color: rgba(255, 255, 255, 0.4);
--media-preview-time-text-shadow: none;
--media-control-height: 14px;
--media-control-padding: 6px;
--media-tooltip-container-margin: 6px;
--media-tooltip-distance: 18px;
color: var(--_primary-color);
display: inline-block;
width: 100%;
height: 100%;
}
:host([audio]) {
--_secondary-color: var(--media-secondary-color, black);
--media-preview-time-text-shadow: none;
}
:host([audio]) ::slotted([slot='media']) {
height: 0px;
}
:host([audio]) media-loading-indicator {
display: none;
}
:host([audio]) media-controller {
background: transparent;
}
:host([audio]) media-controller::part(vertical-layer) {
background: transparent;
}
:host([audio]) media-control-bar {
width: 100%;
background-color: var(--media-control-background);
}
/*
* 0.433s is the transition duration for VTT Regions.
* Borrowed here, so the captions don't move too fast.
*/
media-controller {
--media-webkit-text-track-transform: translateY(0) scale(0.98);
--media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
}
media-controller:is([mediapaused], :not([userinactive])) {
--media-webkit-text-track-transform: translateY(-50px) scale(0.98);
--media-webkit-text-track-transition: transform 0.15s ease;
}
/*
* CSS specific to iOS devices.
* See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
*/
@supports (-webkit-touch-callout: none) {
/* Disable subtitle adjusting for iOS Safari */
media-controller[mediaisfullscreen] {
--media-webkit-text-track-transform: unset;
--media-webkit-text-track-transition: unset;
}
}
media-time-range {
--media-box-padding-left: 6px;
--media-box-padding-right: 6px;
--media-range-bar-color: var(--_accent-color);
--media-time-range-buffered-color: var(--_primary-color);
--media-range-track-color: transparent;
--media-range-track-background: rgba(255, 255, 255, 0.4);
--media-range-thumb-background: radial-gradient(
circle,
#000 0%,
#000 25%,
var(--_accent-color) 25%,
var(--_accent-color)
);
--media-range-thumb-width: 12px;
--media-range-thumb-height: 12px;
--media-range-thumb-transform: scale(0);
--media-range-thumb-transition: transform 0.3s;
--media-range-thumb-opacity: 1;
--media-preview-background: var(--_primary-color);
--media-box-arrow-background: var(--_primary-color);
--media-preview-thumbnail-border: 5px solid var(--_primary-color);
--media-preview-border-radius: 5px;
--media-text-color: var(--_text-color);
--media-control-hover-background: transparent;
--media-preview-chapter-text-shadow: none;
color: var(--_accent-color);
padding: 0 6px;
}
:host([audio]) media-time-range {
--media-preview-time-padding: 1.5px 6px;
--media-preview-box-margin: 0 0 -5px;
}
media-time-range:hover {
--media-range-thumb-transform: scale(1);
}
media-preview-thumbnail {
border-bottom-width: 0;
}
[part~='menu'] {
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.1);
bottom: 50px;
padding: 2.5px 10px;
}
[part~='menu']::part(indicator) {
fill: var(--_accent-color);
}
[part~='menu']::part(menu-item) {
box-sizing: border-box;
display: flex;
align-items: center;
padding: 6px 10px;
min-height: 34px;
}
[part~='menu']::part(checked) {
font-weight: 700;
}
media-captions-menu,
media-rendition-menu,
media-audio-track-menu,
media-playback-rate-menu {
position: absolute; /* ensure they don't take up space in DOM on load */
--media-menu-background: var(--_primary-color);
--media-menu-item-checked-background: transparent;
--media-text-color: var(--_text-color);
--media-menu-item-hover-background: transparent;
--media-menu-item-hover-outline: var(--_accent-color) solid 1px;
}
/* The icon is a circle so make it 16px high instead of 14px for more balance. */
media-audio-track-menu-button {
--media-control-padding: 5px;
--media-control-height: 16px;
}
media-playback-rate-menu-button {
--media-control-padding: 6px 3px;
min-width: 4.4ch;
}
media-playback-rate-menu {
--media-menu-flex-direction: row;
--media-menu-item-checked-background: var(--_accent-color);
--media-menu-item-checked-indicator-display: none;
margin-right: 6px;
padding: 0;
--media-menu-gap: 0.25em;
}
media-playback-rate-menu[part~='menu']::part(menu-item) {
padding: 6px 6px 6px 8px;
}
media-playback-rate-menu[part~='menu']::part(checked) {
color: #fff;
}
:host(:not([audio])) media-time-range {
/* Adding px is required here for calc() */
--media-range-padding: 0px;
background: transparent;
z-index: 10;
height: 10px;
bottom: -3px;
width: 100%;
}
media-control-bar :is([role='button'], [role='switch'], button) {
line-height: 0;
}
media-control-bar :is([part*='button'], [part*='range'], [part*='display']) {
border-radius: 3px;
}
.spacer {
flex-grow: 1;
background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
}
media-control-bar[slot~='top-chrome'] {
min-height: 42px;
pointer-events: none;
}
media-control-bar {
--gradient-steps: hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%,
hsl(0 0% 0% / 0.104) 22.5%, hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%,
hsl(0 0% 0% / 0.45) 47.1%, hsl(0 0% 0% / 0.55) 52.9%, hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%,
hsl(0 0% 0% / 0.825) 71%, hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%,
hsl(0 0% 0%) 100%;
}
:host([title]:not([audio])) media-control-bar[slot='top-chrome']::before {
content: '';
position: absolute;
width: 100%;
padding-bottom: min(100px, 25%);
background: linear-gradient(to top, var(--gradient-steps));
opacity: 0.8;
pointer-events: none;
}
:host(:not([audio])) media-control-bar[part~='bottom']::before {
content: '';
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding-bottom: min(100px, 25%);
background: linear-gradient(to bottom, var(--gradient-steps));
opacity: 0.8;
z-index: 1;
pointer-events: none;
}
media-control-bar[part~='bottom'] > * {
z-index: 20;
}
media-control-bar[part~='bottom'] {
padding: 6px 6px;
}
media-control-bar[slot~='top-chrome'] > * {
--media-control-background: transparent;
--media-control-hover-background: transparent;
position: relative;
}
media-controller::part(vertical-layer) {
transition: background-color 1s;
}
media-controller:is([mediapaused], :not([userinactive]))::part(vertical-layer) {
background-color: var(--controls-backdrop-color, var(--controls, transparent));
transition: background-color 0.25s;
}
.center-controls {
--media-button-icon-width: 100%;
--media-button-icon-height: auto;
--media-tooltip-display: none;
pointer-events: none;
width: 100%;
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
paint-order: stroke;
stroke: rgba(102, 102, 102, 1);
stroke-width: 0.3px;
text-shadow:
0 0 2px rgb(0 0 0 / 0.25),
0 0 6px rgb(0 0 0 / 0.25);
}
.center-controls media-play-button {
--media-control-background: transparent;
--media-control-hover-background: transparent;
--media-control-padding: 0;
width: 40px;
}
[breakpointsm] .center-controls media-play-button {
width: 90px;
height: 90px;
border-radius: 50%;
transition: background 0.4s;
padding: 24px;
--media-control-background: #000;
--media-control-hover-background: var(--_accent-color);
}
.center-controls media-seek-backward-button,
.center-controls media-seek-forward-button {
--media-control-background: transparent;
--media-control-hover-background: transparent;
padding: 0;
margin: 0 20px;
width: max(33px, min(8%, 40px));
}
[breakpointsm]:not([audio]) .center-controls.pre-playback {
display: grid;
align-items: initial;
justify-content: initial;
height: 100%;
overflow: hidden;
}
[breakpointsm]:not([audio]) .center-controls.pre-playback media-play-button {
place-self: var(--_pre-playback-place, center);
grid-area: 1 / 1;
margin: 16px;
}
/* Show and hide controls or pre-playback state */
[breakpointsm]:is([mediahasplayed], :not([mediapaused])):not([audio])
.center-controls.pre-playback
media-play-button {
/* Using \`forwards\` would lead to a laggy UI after the animation got in the end state */
animation: 0.3s linear pre-play-hide;
opacity: 0;
pointer-events: none;
}
.autoplay-unmute {
--media-control-hover-background: transparent;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
}
.autoplay-unmute-btn {
--media-control-height: 16px;
border-radius: 8px;
background: #000;
color: var(--_primary-color);
display: flex;
align-items: center;
padding: 8px 16px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
}
.autoplay-unmute-btn:hover {
background: var(--_accent-color);
}
[breakpointsm] .autoplay-unmute-btn {
--media-control-height: 30px;
padding: 14px 24px;
font-size: 26px;
}
.autoplay-unmute-btn svg {
margin: 0 6px 0 0;
}
[breakpointsm] .autoplay-unmute-btn svg {
margin: 0 10px 0 0;
}
media-controller:not([audio]):not([mediahasplayed]) *:is(media-control-bar, media-time-range) {
display: none;
}
media-loading-indicator {
--media-loading-icon-width: 100%;
--media-button-icon-height: auto;
display: var(--media-control-display, var(--media-loading-indicator-display, flex));
pointer-events: none;
position: absolute;
width: min(15%, 150px);
flex-flow: row;
align-items: center;
justify-content: center;
}
/* Intentionally don't target the div for transition but the children
of the div. Prevents messing with media-chrome's autohide feature. */
media-loading-indicator + div * {
transition: opacity 0.15s;
opacity: 1;
}
media-loading-indicator[medialoading]:not([mediapaused]) ~ div > * {
opacity: 0;
transition-delay: 400ms;
}
media-volume-range {
width: min(100%, 100px);
--media-range-padding-left: 10px;
--media-range-padding-right: 10px;
--media-range-thumb-width: 12px;
--media-range-thumb-height: 12px;
--media-range-thumb-background: radial-gradient(
circle,
#000 0%,
#000 25%,
var(--_primary-color) 25%,
var(--_primary-color)
);
--media-control-hover-background: none;
}
media-time-display {
white-space: nowrap;
}
/* Generic style for explicitly disabled controls */
media-control-bar[part~='bottom'] [disabled],
media-control-bar[part~='bottom'] [aria-disabled='true'] {
opacity: 60%;
cursor: not-allowed;
}
media-text-display {
--media-font-size: 16px;
--media-control-padding: 14px;
font-weight: 500;
}
media-play-button.animated *:is(g, path) {
transition: all 0.3s;
}
media-play-button.animated[mediapaused] .pause-icon-pt1 {
opacity: 0;
}
media-play-button.animated[mediapaused] .pause-icon-pt2 {
transform-origin: center center;
transform: scaleY(0);
}
media-play-button.animated[mediapaused] .play-icon {
clip-path: inset(0 0 0 0);
}
media-play-button.animated:not([mediapaused]) .play-icon {
clip-path: inset(0 0 0 100%);
}
media-seek-forward-button,
media-seek-backward-button {
--media-font-weight: 400;
}
.mute-icon {
display: inline-block;
}
.mute-icon :is(path, g) {
transition: opacity 0.5s;
}
.muted {
opacity: 0;
}
media-mute-button[mediavolumelevel='low'] :is(.volume-medium, .volume-high),
media-mute-button[mediavolumelevel='medium'] :is(.volume-high) {
opacity: 0;
}
media-mute-button[mediavolumelevel='off'] .unmuted {
opacity: 0;
}
media-mute-button[mediavolumelevel='off'] .muted {
opacity: 1;
}
/**
* Our defaults for these buttons are to hide them at small sizes
* users can override this with CSS
*/
media-controller:not([breakpointsm]):not([audio]) {
--bottom-play-button: none;
--bottom-seek-backward-button: none;
--bottom-seek-forward-button: none;
--bottom-time-display: none;
--bottom-playback-rate-menu-button: none;
--bottom-pip-button: none;
}
</style>
<template partial="TitleDisplay">
<template if="title">
<media-text-display part="top title display" class="title-display">{{title}}</media-text-display>
</template>
</template>
<template partial="PlayButton">
<media-play-button
part="{{section ?? 'bottom'}} play button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
class="animated"
>
<svg aria-hidden="true" viewBox="0 0 18 14" slot="icon">
<g class="play-icon">
<path
d="M15.5987 6.2911L3.45577 0.110898C2.83667 -0.204202 2.06287 0.189698 2.06287 0.819798V13.1802C2.06287 13.8103 2.83667 14.2042 3.45577 13.8891L15.5987 7.7089C16.2178 7.3938 16.2178 6.6061 15.5987 6.2911Z"
/>
</g>
<g class="pause-icon">
<path
class="pause-icon-pt1"
d="M5.90709 0H2.96889C2.46857 0 2.06299 0.405585 2.06299 0.9059V13.0941C2.06299 13.5944 2.46857 14 2.96889 14H5.90709C6.4074 14 6.81299 13.5944 6.81299 13.0941V0.9059C6.81299 0.405585 6.4074 0 5.90709 0Z"
/>
<path
class="pause-icon-pt2"
d="M15.1571 0H12.2189C11.7186 0 11.313 0.405585 11.313 0.9059V13.0941C11.313 13.5944 11.7186 14 12.2189 14H15.1571C15.6574 14 16.063 13.5944 16.063 13.0941V0.9059C16.063 0.405585 15.6574 0 15.1571 0Z"
/>
</g>
</svg>
</media-play-button>
</template>
<template partial="PrePlayButton">
<media-play-button
part="{{section ?? 'center'}} play button pre-play"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<svg aria-hidden="true" viewBox="0 0 18 14" slot="icon" style="transform: translate(3px, 0)">
<path
d="M15.5987 6.2911L3.45577 0.110898C2.83667 -0.204202 2.06287 0.189698 2.06287 0.819798V13.1802C2.06287 13.8103 2.83667 14.2042 3.45577 13.8891L15.5987 7.7089C16.2178 7.3938 16.2178 6.6061 15.5987 6.2911Z"
/>
</svg>
</media-play-button>
</template>
<template partial="SeekBackwardButton">
<media-seek-backward-button
seekoffset="{{backwardseekoffset}}"
part="{{section ?? 'bottom'}} seek-backward button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<svg viewBox="0 0 22 14" aria-hidden="true" slot="icon">
<path
d="M3.65 2.07888L0.0864 6.7279C-0.0288 6.87812 -0.0288 7.12188 0.0864 7.2721L3.65 11.9211C3.7792 12.0896 4 11.9703 4 11.7321V2.26787C4 2.02968 3.7792 1.9104 3.65 2.07888Z"
/>
<text transform="translate(6 12)" style="font-size: 14px; font-family: 'ArialMT', 'Arial'">
{{backwardseekoffset}}
</text>
</svg>
</media-seek-backward-button>
</template>
<template partial="SeekForwardButton">
<media-seek-forward-button
seekoffset="{{forwardseekoffset}}"
part="{{section ?? 'bottom'}} seek-forward button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<svg viewBox="0 0 22 14" aria-hidden="true" slot="icon">
<g>
<text transform="translate(-1 12)" style="font-size: 14px; font-family: 'ArialMT', 'Arial'">
{{forwardseekoffset}}
</text>
<path
d="M18.35 11.9211L21.9136 7.2721C22.0288 7.12188 22.0288 6.87812 21.9136 6.7279L18.35 2.07888C18.2208 1.91041 18 2.02968 18 2.26787V11.7321C18 11.9703 18.2208 12.0896 18.35 11.9211Z"
/>
</g>
</svg>
</media-seek-forward-button>
</template>
<template partial="MuteButton">
<media-mute-button part="bottom mute button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg viewBox="0 0 18 14" slot="icon" class="mute-icon" aria-hidden="true">
<g class="unmuted">
<path
d="M6.76786 1.21233L3.98606 3.98924H1.19937C0.593146 3.98924 0.101743 4.51375 0.101743 5.1607V6.96412L0 6.99998L0.101743 7.03583V8.83926C0.101743 9.48633 0.593146 10.0108 1.19937 10.0108H3.98606L6.76773 12.7877C7.23561 13.2547 8 12.9007 8 12.2171V1.78301C8 1.09925 7.23574 0.745258 6.76786 1.21233Z"
/>
<path
class="volume-low"
d="M10 3.54781C10.7452 4.55141 11.1393 5.74511 11.1393 6.99991C11.1393 8.25471 10.7453 9.44791 10 10.4515L10.7988 11.0496C11.6734 9.87201 12.1356 8.47161 12.1356 6.99991C12.1356 5.52821 11.6735 4.12731 10.7988 2.94971L10 3.54781Z"
/>
<path
class="volume-medium"
d="M12.3778 2.40086C13.2709 3.76756 13.7428 5.35806 13.7428 7.00026C13.7428 8.64246 13.2709 10.233 12.3778 11.5992L13.2106 12.1484C14.2107 10.6185 14.739 8.83796 14.739 7.00016C14.739 5.16236 14.2107 3.38236 13.2106 1.85156L12.3778 2.40086Z"
/>
<path
class="volume-high"
d="M15.5981 0.75L14.7478 1.2719C15.7937 2.9919 16.3468 4.9723 16.3468 7C16.3468 9.0277 15.7937 11.0082 14.7478 12.7281L15.5981 13.25C16.7398 11.3722 17.343 9.211 17.343 7C17.343 4.789 16.7398 2.6268 15.5981 0.75Z"
/>
</g>
<g class="muted">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.39976 4.98924H1.19937C1.19429 4.98924 1.17777 4.98961 1.15296 5.01609C1.1271 5.04369 1.10174 5.09245 1.10174 5.1607V8.83926C1.10174 8.90761 1.12714 8.95641 1.15299 8.984C1.17779 9.01047 1.1943 9.01084 1.19937 9.01084H4.39977L7 11.6066V2.39357L4.39976 4.98924ZM7.47434 1.92006C7.4743 1.9201 7.47439 1.92002 7.47434 1.92006V1.92006ZM6.76773 12.7877L3.98606 10.0108H1.19937C0.593146 10.0108 0.101743 9.48633 0.101743 8.83926V7.03583L0 6.99998L0.101743 6.96412V5.1607C0.101743 4.51375 0.593146 3.98924 1.19937 3.98924H3.98606L6.76786 1.21233C7.23574 0.745258 8 1.09925 8 1.78301V12.2171C8 12.9007 7.23561 13.2547 6.76773 12.7877Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.2677 9.30323C15.463 9.49849 15.7796 9.49849 15.9749 9.30323C16.1701 9.10796 16.1701 8.79138 15.9749 8.59612L14.2071 6.82841L15.9749 5.06066C16.1702 4.8654 16.1702 4.54882 15.9749 4.35355C15.7796 4.15829 15.4631 4.15829 15.2678 4.35355L13.5 6.1213L11.7322 4.35348C11.537 4.15822 11.2204 4.15822 11.0251 4.35348C10.8298 4.54874 10.8298 4.86532 11.0251 5.06058L12.7929 6.82841L11.0251 8.59619C10.8299 8.79146 10.8299 9.10804 11.0251 9.3033C11.2204 9.49856 11.537 9.49856 11.7323 9.3033L13.5 7.53552L15.2677 9.30323Z"
/>
</g>
</svg>
</media-mute-button>
</template>
<template partial="PipButton">
<media-pip-button part="bottom pip button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg viewBox="0 0 18 14" aria-hidden="true" slot="icon">
<path
d="M15.9891 0H2.011C0.9004 0 0 0.9003 0 2.0109V11.989C0 13.0996 0.9004 14 2.011 14H15.9891C17.0997 14 18 13.0997 18 11.9891V2.0109C18 0.9003 17.0997 0 15.9891 0ZM17 11.9891C17 12.5465 16.5465 13 15.9891 13H2.011C1.4536 13 1.0001 12.5465 1.0001 11.9891V2.0109C1.0001 1.4535 1.4536 0.9999 2.011 0.9999H15.9891C16.5465 0.9999 17 1.4535 17 2.0109V11.9891Z"
/>
<path
d="M15.356 5.67822H8.19523C8.03253 5.67822 7.90063 5.81012 7.90063 5.97282V11.3836C7.90063 11.5463 8.03253 11.6782 8.19523 11.6782H15.356C15.5187 11.6782 15.6506 11.5463 15.6506 11.3836V5.97282C15.6506 5.81012 15.5187 5.67822 15.356 5.67822Z"
/>
</svg>
</media-pip-button>
</template>
<template partial="CaptionsMenu">
<media-captions-menu-button part="bottom captions button">
<svg aria-hidden="true" viewBox="0 0 18 14" slot="on">
<path
d="M15.989 0H2.011C0.9004 0 0 0.9003 0 2.0109V11.9891C0 13.0997 0.9004 14 2.011 14H15.989C17.0997 14 18 13.0997 18 11.9891V2.0109C18 0.9003 17.0997 0 15.989 0ZM4.2292 8.7639C4.5954 9.1902 5.0935 9.4031 5.7233 9.4031C6.1852 9.4031 6.5544 9.301 6.8302 9.0969C7.1061 8.8933 7.2863 8.614 7.3702 8.26H8.4322C8.3062 8.884 8.0093 9.3733 7.5411 9.7273C7.0733 10.0813 6.4703 10.2581 5.732 10.2581C5.108 10.2581 4.5699 10.1219 4.1168 9.8489C3.6637 9.5759 3.3141 9.1946 3.0685 8.7058C2.8224 8.2165 2.6994 7.6511 2.6994 7.009C2.6994 6.3611 2.8224 5.7927 3.0685 5.3034C3.3141 4.8146 3.6637 4.4323 4.1168 4.1559C4.5699 3.88 5.108 3.7418 5.732 3.7418C6.4703 3.7418 7.0733 3.922 7.5411 4.2818C8.0094 4.6422 8.3062 5.1461 8.4322 5.794H7.3702C7.2862 5.4283 7.106 5.1368 6.8302 4.921C6.5544 4.7052 6.1852 4.5968 5.7233 4.5968C5.0934 4.5968 4.5954 4.8116 4.2292 5.2404C3.8635 5.6696 3.6804 6.259 3.6804 7.009C3.6804 7.7531 3.8635 8.3381 4.2292 8.7639ZM11.0974 8.7639C11.4636 9.1902 11.9617 9.4031 12.5915 9.4031C13.0534 9.4031 13.4226 9.301 13.6984 9.0969C13.9743 8.8933 14.1545 8.614 14.2384 8.26H15.3004C15.1744 8.884 14.8775 9.3733 14.4093 9.7273C13.9415 10.0813 13.3385 10.2581 12.6002 10.2581C11.9762 10.2581 11.4381 10.1219 10.985 9.8489C10.5319 9.5759 10.1823 9.1946 9.9367 8.7058C9.6906 8.2165 9.5676 7.6511 9.5676 7.009C9.5676 6.3611 9.6906 5.7927 9.9367 5.3034C10.1823 4.8146 10.5319 4.4323 10.985 4.1559C11.4381 3.88 11.9762 3.7418 12.6002 3.7418C13.3385 3.7418 13.9415 3.922 14.4093 4.2818C14.8776 4.6422 15.1744 5.1461 15.3004 5.794H14.2384C14.1544 5.4283 13.9742 5.1368 13.6984 4.921C13.4226 4.7052 13.0534 4.5968 12.5915 4.5968C11.9616 4.5968 11.4636 4.8116 11.0974 5.2404C10.7317 5.6696 10.5486 6.259 10.5486 7.009C10.5486 7.7531 10.7317 8.3381 11.0974 8.7639Z"
/>
</svg>
<svg aria-hidden="true" viewBox="0 0 18 14" slot="off">
<path
d="M5.73219 10.258C5.10819 10.258 4.57009 10.1218 4.11699 9.8488C3.66389 9.5758 3.31429 9.1945 3.06869 8.7057C2.82259 8.2164 2.69958 7.651 2.69958 7.0089C2.69958 6.361 2.82259 5.7926 3.06869 5.3033C3.31429 4.8145 3.66389 4.4322 4.11699 4.1558C4.57009 3.8799 5.10819 3.7417 5.73219 3.7417C6.47049 3.7417 7.07348 3.9219 7.54128 4.2817C8.00958 4.6421 8.30638 5.146 8.43238 5.7939H7.37039C7.28639 5.4282 7.10618 5.1367 6.83039 4.9209C6.55459 4.7051 6.18538 4.5967 5.72348 4.5967C5.09358 4.5967 4.59559 4.8115 4.22939 5.2403C3.86369 5.6695 3.68058 6.2589 3.68058 7.0089C3.68058 7.753 3.86369 8.338 4.22939 8.7638C4.59559 9.1901 5.09368 9.403 5.72348 9.403C6.18538 9.403 6.55459 9.3009 6.83039 9.0968C7.10629 8.8932 7.28649 8.6139 7.37039 8.2599H8.43238C8.30638 8.8839 8.00948 9.3732 7.54128 9.7272C7.07348 10.0812 6.47049 10.258 5.73219 10.258Z"
/>
<path
d="M12.6003 10.258C11.9763 10.258 11.4382 10.1218 10.9851 9.8488C10.532 9.5758 10.1824 9.1945 9.93685 8.7057C9.69075 8.2164 9.56775 7.651 9.56775 7.0089C9.56775 6.361 9.69075 5.7926 9.93685 5.3033C10.1824 4.8145 10.532 4.4322 10.9851 4.1558C11.4382 3.8799 11.9763 3.7417 12.6003 3.7417C13.3386 3.7417 13.9416 3.9219 14.4094 4.2817C14.8777 4.6421 15.1745 5.146 15.3005 5.7939H14.2385C14.1545 5.4282 13.9743 5.1367 13.6985 4.9209C13.4227 4.7051 13.0535 4.5967 12.5916 4.5967C11.9617 4.5967 11.4637 4.8115 11.0975 5.2403C10.7318 5.6695 10.5487 6.2589 10.5487 7.0089C10.5487 7.753 10.7318 8.338 11.0975 8.7638C11.4637 9.1901 11.9618 9.403 12.5916 9.403C13.0535 9.403 13.4227 9.3009 13.6985 9.0968C13.9744 8.8932 14.1546 8.6139 14.2385 8.2599H15.3005C15.1745 8.8839 14.8776 9.3732 14.4094 9.7272C13.9416 10.0812 13.3386 10.258 12.6003 10.258Z"
/>
<path
d="M15.9891 1C16.5465 1 17 1.4535 17 2.011V11.9891C17 12.5465 16.5465 13 15.9891 13H2.0109C1.4535 13 1 12.5465 1 11.9891V2.0109C1 1.4535 1.4535 0.9999 2.0109 0.9999L15.9891 1ZM15.9891 0H2.0109C0.9003 0 0 0.9003 0 2.0109V11.9891C0 13.0997 0.9003 14 2.0109 14H15.9891C17.0997 14 18 13.0997 18 11.9891V2.0109C18 0.9003 17.0997 0 15.9891 0Z"
/>
</svg>
</media-captions-menu-button>
<media-captions-menu
hidden
anchor="auto"
part="bottom captions menu"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
exportparts="menu-item"
>
<div slot="checked-indicator">
<style>
.indicator {
position: relative;
top: 1px;
width: 0.9em;
height: auto;
fill: var(--_accent-color);
margin-right: 5px;
}
[aria-checked='false'] .indicator {
display: none;
}
</style>
<svg viewBox="0 0 14 18" class="indicator">
<path
d="M12.252 3.48c-.115.033-.301.161-.425.291-.059.063-1.407 1.815-2.995 3.894s-2.897 3.79-2.908 3.802c-.013.014-.661-.616-1.672-1.624-.908-.905-1.702-1.681-1.765-1.723-.401-.27-.783-.211-1.176.183a1.285 1.285 0 0 0-.261.342.582.582 0 0 0-.082.35c0 .165.01.205.08.35.075.153.213.296 2.182 2.271 1.156 1.159 2.17 2.159 2.253 2.222.189.143.338.196.539.194.203-.003.412-.104.618-.299.205-.193 6.7-8.693 6.804-8.903a.716.716 0 0 0 .085-.345c.01-.179.005-.203-.062-.339-.124-.252-.45-.531-.746-.639a.784.784 0 0 0-.469-.027"
fill-rule="evenodd"
/>
</svg></div
></media-captions-menu>
</template>
<template partial="AirplayButton">
<media-airplay-button part="bottom airplay button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg viewBox="0 0 18 14" aria-hidden="true" slot="icon">
<path
d="M16.1383 0H1.8618C0.8335 0 0 0.8335 0 1.8617V10.1382C0 11.1664 0.8335 12 1.8618 12H3.076C3.1204 11.9433 3.1503 11.8785 3.2012 11.826L4.004 11H1.8618C1.3866 11 1 10.6134 1 10.1382V1.8617C1 1.3865 1.3866 0.9999 1.8618 0.9999H16.1383C16.6135 0.9999 17.0001 1.3865 17.0001 1.8617V10.1382C17.0001 10.6134 16.6135 11 16.1383 11H13.9961L14.7989 11.826C14.8499 11.8785 14.8798 11.9432 14.9241 12H16.1383C17.1665 12 18.0001 11.1664 18.0001 10.1382V1.8617C18 0.8335 17.1665 0 16.1383 0Z"
/>
<path
d="M9.55061 8.21903C9.39981 8.06383 9.20001 7.98633 9.00011 7.98633C8.80021 7.98633 8.60031 8.06383 8.44951 8.21903L4.09771 12.697C3.62471 13.1838 3.96961 13.9998 4.64831 13.9998H13.3518C14.0304 13.9998 14.3754 13.1838 13.9023 12.697L9.55061 8.21903Z"
/>
</svg>
</media-airplay-button>
</template>
<template partial="FullscreenButton">
<media-fullscreen-button part="bottom fullscreen button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg viewBox="0 0 18 14" aria-hidden="true" slot="enter">
<path
d="M1.00745 4.39539L1.01445 1.98789C1.01605 1.43049 1.47085 0.978289 2.02835 0.979989L6.39375 0.992589L6.39665 -0.007411L2.03125 -0.020011C0.920646 -0.023211 0.0176463 0.874489 0.0144463 1.98509L0.00744629 4.39539H1.00745Z"
/>
<path
d="M17.0144 2.03431L17.0076 4.39541H18.0076L18.0144 2.03721C18.0176 0.926712 17.1199 0.0237125 16.0093 0.0205125L11.6439 0.0078125L11.641 1.00781L16.0064 1.02041C16.5638 1.02201 17.016 1.47681 17.0144 2.03431Z"
/>
<path
d="M16.9925 9.60498L16.9855 12.0124C16.9839 12.5698 16.5291 13.022 15.9717 13.0204L11.6063 13.0078L11.6034 14.0078L15.9688 14.0204C17.0794 14.0236 17.9823 13.1259 17.9855 12.0153L17.9925 9.60498H16.9925Z"
/>
<path
d="M0.985626 11.9661L0.992426 9.60498H-0.0074737L-0.0142737 11.9632C-0.0174737 13.0738 0.880226 13.9767 1.99083 13.98L6.35623 13.9926L6.35913 12.9926L1.99373 12.98C1.43633 12.9784 0.983926 12.5236 0.985626 11.9661Z"
/>
</svg>
<svg viewBox="0 0 18 14" aria-hidden="true" slot="exit">
<path
d="M5.39655 -0.0200195L5.38955 2.38748C5.38795 2.94488 4.93315 3.39708 4.37565 3.39538L0.0103463 3.38278L0.00744629 4.38278L4.37285 4.39538C5.48345 4.39858 6.38635 3.50088 6.38965 2.39028L6.39665 -0.0200195H5.39655Z"
/>
<path
d="M12.6411 2.36891L12.6479 0.0078125H11.6479L11.6411 2.36601C11.6379 3.47651 12.5356 4.37951 13.6462 4.38271L18.0116 4.39531L18.0145 3.39531L13.6491 3.38271C13.0917 3.38111 12.6395 2.92641 12.6411 2.36891Z"
/>
<path
d="M12.6034 14.0204L12.6104 11.613C12.612 11.0556 13.0668 10.6034 13.6242 10.605L17.9896 10.6176L17.9925 9.61759L13.6271 9.60499C12.5165 9.60179 11.6136 10.4995 11.6104 11.6101L11.6034 14.0204H12.6034Z"
/>
<path
d="M5.359 11.6315L5.3522 13.9926H6.3522L6.359 11.6344C6.3622 10.5238 5.4645 9.62088 4.3539 9.61758L-0.0115043 9.60498L-0.0144043 10.605L4.351 10.6176C4.9084 10.6192 5.3607 11.074 5.359 11.6315Z"
/>
</svg>
</media-fullscreen-button>
</template>
<template partial="CastButton">
<media-cast-button part="bottom cast button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg viewBox="0 0 18 14" aria-hidden="true" slot="enter">
<path
d="M16.0072 0H2.0291C0.9185 0 0.0181 0.9003 0.0181 2.011V5.5009C0.357 5.5016 0.6895 5.5275 1.0181 5.5669V2.011C1.0181 1.4536 1.4716 1 2.029 1H16.0072C16.5646 1 17.0181 1.4536 17.0181 2.011V11.9891C17.0181 12.5465 16.5646 13 16.0072 13H8.4358C8.4746 13.3286 8.4999 13.6611 8.4999 13.9999H16.0071C17.1177 13.9999 18.018 13.0996 18.018 11.989V2.011C18.0181 0.9003 17.1178 0 16.0072 0ZM0 6.4999V7.4999C3.584 7.4999 6.5 10.4159 6.5 13.9999H7.5C7.5 9.8642 4.1357 6.4999 0 6.4999ZM0 8.7499V9.7499C2.3433 9.7499 4.25 11.6566 4.25 13.9999H5.25C5.25 11.1049 2.895 8.7499 0 8.7499ZM0.0181 11V14H3.0181C3.0181 12.3431 1.675 11 0.0181 11Z"
/>
</svg>
<svg viewBox="0 0 18 14" aria-hidden="true" slot="exit">
<path
d="M15.9891 0H2.01103C0.900434 0 3.35947e-05 0.9003 3.35947e-05 2.011V5.5009C0.338934 5.5016 0.671434 5.5275 1.00003 5.5669V2.011C1.00003 1.4536 1.45353 1 2.01093 1H15.9891C16.5465 1 17 1.4536 17 2.011V11.9891C17 12.5465 16.5465 13 15.9891 13H8.41773C8.45653 13.3286 8.48183 13.6611 8.48183 13.9999H15.989C17.0996 13.9999 17.9999 13.0996 17.9999 11.989V2.011C18 0.9003 17.0997 0 15.9891 0ZM-0.0180664 6.4999V7.4999C3.56593 7.4999 6.48193 10.4159 6.48193 13.9999H7.48193C7.48193 9.8642 4.11763 6.4999 -0.0180664 6.4999ZM-0.0180664 8.7499V9.7499C2.32523 9.7499 4.23193 11.6566 4.23193 13.9999H5.23193C5.23193 11.1049 2.87693 8.7499 -0.0180664 8.7499ZM3.35947e-05 11V14H3.00003C3.00003 12.3431 1.65693 11 3.35947e-05 11Z"
/>
<path d="M2.15002 5.634C5.18352 6.4207 7.57252 8.8151 8.35282 11.8499H15.8501V2.1499H2.15002V5.634Z" />
</svg>
</media-cast-button>
</template>
<template partial="LiveButton">
<media-live-button part="{{section ?? 'top'}} live button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<span slot="text">Live</span>
</media-live-button>
</template>
<template partial="PlaybackRateMenu">
<media-playback-rate-menu-button part="bottom playback-rate button"></media-playback-rate-menu-button>
<media-playback-rate-menu
hidden
anchor="auto"
rates="{{playbackrates}}"
exportparts="menu-item"
part="bottom playback-rate menu"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
></media-playback-rate-menu>
</template>
<template partial="VolumeRange">
<media-volume-range
part="bottom volume range"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
></media-volume-range>
</template>
<template partial="TimeDisplay">
<media-time-display
remaining="{{defaultshowremainingtime}}"
showduration="{{!hideduration}}"
part="bottom time display"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
></media-time-display>
</template>
<template partial="TimeRange">
<media-time-range part="bottom time range" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<media-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>
<div slot="preview" part="arrow"></div>
</media-time-range>
</template>
<template partial="AudioTrackMenu">
<media-audio-track-menu-button part="bottom audio-track button">
<svg aria-hidden="true" slot="icon" viewBox="0 0 18 16">
<path d="M9 15A7 7 0 1 1 9 1a7 7 0 0 1 0 14Zm0 1A8 8 0 1 0 9 0a8 8 0 0 0 0 16Z" />
<path
d="M5.2 6.3a.5.5 0 0 1 .5.5v2.4a.5.5 0 1 1-1 0V6.8a.5.5 0 0 1 .5-.5Zm2.4-2.4a.5.5 0 0 1 .5.5v7.2a.5.5 0 0 1-1 0V4.4a.5.5 0 0 1 .5-.5ZM10 5.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.4-.8a.5.5 0 0 1 .5.5v5.6a.5.5 0 0 1-1 0V5.2a.5.5 0 0 1 .5-.5Z"
/>
</svg>
</media-audio-track-menu-button>
<media-audio-track-menu
hidden
anchor="auto"
part="bottom audio-track menu"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
exportparts="menu-item"
>
<div slot="checked-indicator">
<style>
.indicator {
position: relative;
top: 1px;
width: 0.9em;
height: auto;
fill: var(--_accent-color);
margin-right: 5px;
}
[aria-checked='false'] .indicator {
display: none;
}
</style>
<svg viewBox="0 0 14 18" class="indicator">
<path
d="M12.252 3.48c-.115.033-.301.161-.425.291-.059.063-1.407 1.815-2.995 3.894s-2.897 3.79-2.908 3.802c-.013.014-.661-.616-1.672-1.624-.908-.905-1.702-1.681-1.765-1.723-.401-.27-.783-.211-1.176.183a1.285 1.285 0 0 0-.261.342.582.582 0 0 0-.082.35c0 .165.01.205.08.35.075.153.213.296 2.182 2.271 1.156 1.159 2.17 2.159 2.253 2.222.189.143.338.196.539.194.203-.003.412-.104.618-.299.205-.193 6.7-8.693 6.804-8.903a.716.716 0 0 0 .085-.345c.01-.179.005-.203-.062-.339-.124-.252-.45-.531-.746-.639a.784.784 0 0 0-.469-.027"
fill-rule="evenodd"
/>
</svg>
</div>
</media-audio-track-menu>
</template>
<template partial="RenditionMenu">
<media-rendition-menu-button part="bottom rendition button">
<svg aria-hidden="true" slot="icon" viewBox="0 0 18 14">
<path
d="M2.25 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM9 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
/>
</svg>
</media-rendition-menu-button>
<media-rendition-menu
hidden
anchor="auto"
part="bottom rendition menu"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<div slot="checked-indicator">
<style>
.indicator {
position: relative;
top: 1px;
width: 0.9em;
height: auto;
fill: var(--_accent-color);
margin-right: 5px;
}
[aria-checked='false'] .indicator {
display: none;
}
</style>
<svg viewBox="0 0 14 18" class="indicator">
<path
d="M12.252 3.48c-.115.033-.301.161-.425.291-.059.063-1.407 1.815-2.995 3.894s-2.897 3.79-2.908 3.802c-.013.014-.661-.616-1.672-1.624-.908-.905-1.702-1.681-1.765-1.723-.401-.27-.783-.211-1.176.183a1.285 1.285 0 0 0-.261.342.582.582 0 0 0-.082.35c0 .165.01.205.08.35.075.153.213.296 2.182 2.271 1.156 1.159 2.17 2.159 2.253 2.222.189.143.338.196.539.194.203-.003.412-.104.618-.299.205-.193 6.7-8.693 6.804-8.903a.716.716 0 0 0 .085-.345c.01-.179.005-.203-.062-.339-.124-.252-.45-.531-.746-.639a.784.784 0 0 0-.469-.027"
fill-rule="evenodd"
/>
</svg>
</div>
</media-rendition-menu>
</template>
<media-controller
part="controller"
defaultstreamtype="{{defaultstreamtype ?? 'on-demand'}}"
breakpoints="sm:470"
gesturesdisabled="{{disabled}}"
hotkeys="{{hotkeys}}"
nohotkeys="{{nohotkeys}}"
novolumepref="{{novolumepref}}"
audio="{{audio}}"
noautoseektolive="{{noautoseektolive}}"
defaultsubtitles="{{defaultsubtitles}}"
defaultduration="{{defaultduration ?? false}}"
keyboardforwardseekoffset="{{forwardseekoffset}}"
keyboardbackwardseekoffset="{{backwardseekoffset}}"
exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer"
style="--_pre-playback-place:{{preplaybackplace ?? 'center'}}"
>
<slot name="media" slot="media"></slot>
<slot name="poster" slot="poster"></slot>
<media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
<template if="!audio">
<!-- Pre-playback UI -->
<!-- same for both on-demand and live -->
<div slot="centered-chrome" class="center-controls pre-playback">
<template if="!breakpointsm">{{>PlayButton section="center"}}</template>
<template if="breakpointsm">{{>PrePlayButton section="center"}}</template>
</div>
<!-- Autoplay centered unmute button -->
<!--
todo: figure out how show this with available state variables
needs to show when:
- autoplay is enabled
- playback has been successful
- audio is muted
- in place / instead of the pre-plaback play button
- not to show again after user has interacted with this button
- OR user has interacted with the mute button in the control bar
-->
<!--
There should be a >MuteButton to the left of the "Unmute" text, but a templating bug
makes it appear even if commented out in the markup, add it back when code is un-commented
-->
<!-- <div slot="centered-chrome" class="autoplay-unmute">
<div role="button" class="autoplay-unmute-btn">Unmute</div>
</div> -->
<template if="streamtype == 'on-demand'">
<template if="breakpointsm">
<media-control-bar part="control-bar top" slot="top-chrome">{{>TitleDisplay}} </media-control-bar>
</template>
{{>TimeRange}}
<media-control-bar part="control-bar bottom">
{{>PlayButton}} {{>SeekBackwardButton}} {{>SeekForwardButton}} {{>TimeDisplay}} {{>MuteButton}}
{{>VolumeRange}}
<div class="spacer"></div>
{{>RenditionMenu}} {{>PlaybackRateMenu}} {{>AudioTrackMenu}} {{>CaptionsMenu}} {{>AirplayButton}}
{{>CastButton}} {{>PipButton}} {{>FullscreenButton}}
</media-control-bar>
</template>
<template if="streamtype == 'live'">
<media-control-bar part="control-bar top" slot="top-chrome">
{{>LiveButton}}
<template if="breakpointsm"> {{>TitleDisplay}} </template>
</media-control-bar>
<template if="targetlivewindow > 0">{{>TimeRange}}</template>
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
<template if="targetlivewindow > 0">{{>SeekBackwardButton}} {{>SeekForwardButton}}</template>
{{>MuteButton}} {{>VolumeRange}}
<div class="spacer"></div>
{{>RenditionMenu}} {{>AudioTrackMenu}} {{>CaptionsMenu}} {{>AirplayButton}} {{>CastButton}} {{>PipButton}}
{{>FullscreenButton}}
</media-control-bar>
</template>
</template>
<template if="audio">
<template if="streamtype == 'on-demand'">
<template if="title">
<media-control-bar part="control-bar top">{{>TitleDisplay}}</media-control-bar>
</template>
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
<template if="breakpointsm"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>
{{>MuteButton}}
<template if="breakpointsm">{{>VolumeRange}}</template>
{{>TimeDisplay}} {{>TimeRange}}
<template if="breakpointsm">{{>PlaybackRateMenu}}</template>
{{>AirplayButton}} {{>CastButton}}
</media-control-bar>
</template>
<template if="streamtype == 'live'">
<template if="title">
<media-control-bar part="control-bar top">{{>TitleDisplay}}</media-control-bar>
</template>
<media-control-bar part="control-bar bottom">
{{>PlayButton}} {{>LiveButton section="bottom"}} {{>MuteButton}}
<template if="breakpointsm">
{{>VolumeRange}}
<template if="targetlivewindow > 0"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>
</template>
<template if="targetlivewindow > 0"> {{>TimeDisplay}} {{>TimeRange}} </template>
<template if="!targetlivewindow"><div class="spacer"></div></template>
{{>AirplayButton}} {{>CastButton}}
</media-control-bar>
</template>
</template>
<slot></slot>
</media-controller>
</template>
`;
// src/polyfills/index.ts
var EventTarget = class {
addEventListener() {
}
removeEventListener() {
}
dispatchEvent(_event) {
return true;
}
};
if (typeof DocumentFragment === "undefined") {
class DocumentFragment3 extends EventTarget {
}
globalThis.DocumentFragment = DocumentFragment3;
}
var HTMLElement = class extends EventTarget {
};
var HTMLVideoElement = class extends EventTarget {
};
var customElements = {
get(_name) {
return void 0;
},
define(_name, _constructor, _options) {
},
getName(_constructor) {
return null;
},
upgrade(_root) {
},
whenDefined(_name) {
return Promise.resolve(HTMLElement);
}
};
var _detail;
var CustomEvent2 = class {
constructor(typeArg, eventInitDict = {}) {
__privateAdd(this, _detail, void 0);
__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_FULLSCREEN_UNAVAILABLE: "mediaFullscreenUnavailable",
MEDIA_PIP_UNAVAILABLE: "mediaPipUnavailable",
MEDIA_CAST_UNAVAILABLE: "mediaCastUnavailable",
MEDIA_RENDITION_UNAVAILABLE: "mediaRenditionUnavailable",
MEDIA_AUDIO_TRACK_UNAVAILABLE: "mediaAudioTrackUnavailable",
MEDIA_WIDTH: "mediaWidth",
MEDIA_HEIGHT: "mediaHeight",
MEDIA_PAUSED: "mediaPaused",
MEDIA_HAS_PLAYED: "mediaHasPlayed",
MEDIA_ENDED: "mediaEnded",
MEDIA_MUTED: "mediaMuted",
MEDIA_VOLUME_LEVEL: "mediaVolumeLevel",
MEDIA_VOLUME: "mediaVolume",
MEDIA_VOLUME_UNAVAILABLE: "mediaVolumeUnavailable",
MEDIA_IS_PIP: "mediaIsPip",
MEDIA_IS_CASTING: "mediaIsCasting",
MEDIA_IS_AIRPLAYING: "mediaIsAirplaying",
MEDIA_SUBTITLES_LIST: "mediaSubtitlesList",
MEDIA_SUBTITLES_SHOWING: "mediaSubtitlesShowing",
MEDIA_IS_FULLSCREEN: "mediaIsFullscreen",
MEDIA_PLAYBACK_RATE: "mediaPlaybackRate",
MEDIA_CURRENT_TIME: "mediaCurrentTime",
MEDIA_DURATION: "mediaDuration",
MEDIA_SEEKABLE: "mediaSeekable",
MEDIA_PREVIEW_TIME: "mediaPreviewTime",
MEDIA_PREVIEW_IMAGE: "mediaPreviewImage",
MEDIA_PREVIEW_COORDS: "mediaPreviewCoords",
MEDIA_PREVIEW_CHAPTER: "mediaPreviewChapter",
MEDIA_LOADING: "mediaLoading",
MEDIA_BUFFERED: "mediaBuffered",
MEDIA_STREAM_TYPE: "mediaStreamType",
MEDIA_TARGET_LIVE_WINDOW: "mediaTargetLiveWindow",
MEDIA_TIME_IS_LIVE: "mediaTimeIsLive",
MEDIA_RENDITION_LIST: "mediaRenditionList",
MEDIA_RENDITION_SELECTED: "mediaRenditionSelected",
MEDIA_AUDIO_TRACK_LIST: "mediaAudioTrackList",
MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled",
MEDIA_CHAPTERS_CUES: "mediaChaptersCues"
};
var MediaUIPropsEntries = Object.entries(
MediaUIProps
);
var MediaUIAttributes = MediaUIPropsEntries.reduce(
(dictObj, [key, propName]) => {
dictObj[key] = propName.toLowerCase();
return dictObj;
},
{}
);
var AdditionalStateChangeEvents = {
USER_INACTIVE: "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/element-utils.js
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 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 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/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() {
},
/**
*
* @param {Event} event
* @returns {boolean}
*/
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: {
/**
* @param {string} key
* @returns {string|null}
*/
getItem(key) {
return null;
},
/**
* @param {string} key
* @param {string} value
*/
setItem(key, value) {
},
// eslint-disable-line @typescript-eslint/no-unused-vars
/**
* @param {string} key
*/
removeItem(key) {
}
// eslint-disable-line @typescript-eslint/no-unused-vars
},
CustomEvent: function CustomEvent3() {
},
getComputedStyle: function() {
},
navigator: {
languages: [],
get userAgent() {
return "";
}
},
/**
* @param {string} media
*/
matchMedia(media) {
return {
matches: false,
media
};
}
};
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(template8, state, processor2 = defaultProcessor) {
var _a3;
super();
__privateAdd2(this, _parts, void 0);
__privateAdd2(this, _processor, void 0);
this.append(template8.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, template8) {
const directive = template8.getAttribute("directive") || template8.getAttribute("type");
let expression = template8.getAttribute("expression") || template8.getAttribute(directive) || "";
if (expression.startsWith("{{"))
expression = expression.trim().slice(2, -2).trim();
super(parentNode);
this.expression = expression;
this.template = template8;
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(template8) {
this.template = template8;
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;
/* Hide theme element until the breakpoints are available to avoid flicker. */
visibility: hidden;
}
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);
if (this.renderRoot.isConnected) {
const { style } = getOrInsertCSSRule(this.renderRoot, ":host");
if (style.visibility === "hidden") {
style.removeProperty("visibility");
}
}
}
};
_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 template8 = (_a3 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a3.call(rootNode, templateId);
if (template8) {
__privateSet3(this, _prevTemplateId, templateId);
__privateSet3(this, _template, template8);
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/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 "";
}
var template = Document2.createElement("template");
template.innerHTML = /*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)));
background: var(--media-menu-background, var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))));
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;
}
: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: default;
}
slot[name="header"] > button[part~="back"],
slot[name="header"]::slotted(button[part~="back"]) {
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({ mode: "open" });
this.nativeEl = this.constructor.template.content.cloneNode(true);
this.shadowRoot.append(this.nativeEl);
}
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) {
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.template = template;
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;
var template2 = Document2.createElement("template");
template2.innerHTML = /*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: 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: 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"></slot>
<slot name="submenu"></slot>
`;
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({ mode: "open" });
this.shadowRoot.append(this.constructor.template.content.cloneNode(true));
}
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.template = template2;
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
var template3 = Document2.createElement("template");
template3.innerHTML = MediaChromeMenu.template.innerHTML + /*html*/
`
<style>
:host {
background: var(--media-settings-menu-background,
var(--media-menu-background,
var(--media-control-background,
var(--media-secondary-color, rgb(20 20 30 / .8)))));
min-width: var(--media-settings-menu-min-width, 170px);
border-radius: 2px 2px 0 0;
overflow: hidden;
}
: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.template = template3;
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
var _a;
var template4 = Document2.createElement("template");
template4.innerHTML = MediaChromeMenuItem.template.innerHTML + /*html*/
`
<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>
`;
if ((_a = template4.content) == null ? void 0 : _a.querySelector) {
template4.content.querySelector('slot[name="suffix"]').innerHTML = /*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.template = template4;
if (!GlobalThis.customElements.get("media-settings-menu-item")) {
GlobalThis.customElements.define(
"media-settings-menu-item",
MediaSettingsMenuItem
);
}
// ../../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 Attributes3 = {
TOOLTIP_PLACEMENT: "tooltipplacement"
};
var template5 = Document2.createElement("template");
template5.innerHTML = /*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: 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>
<slot name="tooltip">
<media-tooltip part="tooltip" aria-hidden="true">
<slot name="tooltip-content"></slot>
</media-tooltip>
</slot>
`;
var MediaChromeButton = class extends GlobalThis.HTMLElement {
constructor(options = {}) {
var _a3;
super();
__privateAdd6(this, _setupTooltip);
__privateAdd6(this, _mediaController2, void 0);
this.preventClick = false;
this.tooltipEl = null;
this.tooltipContent = "";
__privateAdd6(this, _clickListener, (e) => {
if (!this.preventClick) {
this.handleClick(e);
}
setTimeout(__privateGet6(this, _positionTooltip), 0);
});
__privateAdd6(this, _positionTooltip, () => {
var _a4, _b2;
(_b2 = (_a4 = this.tooltipEl) == null ? void 0 : _a4.updateXOffset) == null ? void 0 : _b2.call(_a4);
});
__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({ mode: "open" });
const buttonHTML = template5.content.cloneNode(true);
this.nativeEl = buttonHTML;
let slotTemplate7 = options.slotTemplate;
if (!slotTemplate7) {
slotTemplate7 = Document2.createElement("template");
slotTemplate7.innerHTML = `<slot>${options.defaultContent || ""}</slot>`;
}
if (options.tooltipContent) {
buttonHTML.querySelector('slot[name="tooltip-content"]').innerHTML = (_a3 = options.tooltipContent) != null ? _a3 : "";
this.tooltipContent = options.tooltipContent;
}
this.nativeEl.appendChild(slotTemplate7.content.cloneNode(true));
this.shadowRoot.appendChild(buttonHTML);
}
this.tooltipEl = this.shadowRoot.querySelector("media-tooltip");
}
static get observedAttributes() {
return [
"disabled",
Attributes3.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 === Attributes3.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();
}
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, Attributes3.TOOLTIP_PLACEMENT);
}
set tooltipPlacement(value) {
setStringAttr(this, Attributes3.TOOLTIP_PLACEMENT, 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;
}
};
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/labels/labels.js
var tooltipLabels = {
ENTER_AIRPLAY: "Start airplay",
EXIT_AIRPLAY: "Stop airplay",
AUDIO_TRACK_MENU: "Audio",
CAPTIONS: "Captions",
ENABLE_CAPTIONS: "Enable captions",
DISABLE_CAPTIONS: "Disable captions",
START_CAST: "Start casting",
STOP_CAST: "Stop casting",
ENTER_FULLSCREEN: "Enter fullscreen mode",
EXIT_FULLSCREEN: "Exit fullscreen mode",
MUTE: "Mute",
UNMUTE: "Unmute",
ENTER_PIP: "Enter picture in picture mode",
EXIT_PIP: "Enter picture in picture mode",
PLAY: "Play",
PAUSE: "Pause",
PLAYBACK_RATE: "Playback rate",
RENDITIONS: "Quality",
SEEK_BACKWARD: "Seek backward",
SEEK_FORWARD: "Seek forward",
SETTINGS: "Settings"
};
var nouns = {
AUDIO_PLAYER: () => "audio player",
VIDEO_PLAYER: () => "video player",
VOLUME: () => "volume",
SEEK: () => "seek",
CLOSED_CAPTIONS: () => "closed captions",
PLAYBACK_RATE: ({ playbackRate = 1 } = {}) => `current playback rate ${playbackRate}`,
PLAYBACK_TIME: () => `playback time`,
MEDIA_LOADING: () => `media loading`,
SETTINGS: () => `settings`,
AUDIO_TRACKS: () => `audio tracks`,
QUALITY: () => `quality`
};
var verbs = {
PLAY: () => "play",
PAUSE: () => "pause",
MUTE: () => "mute",
UNMUTE: () => "unmute",
ENTER_AIRPLAY: () => "start airplay",
EXIT_AIRPLAY: () => "stop airplay",
ENTER_CAST: () => "start casting",
EXIT_CAST: () => "stop casting",
ENTER_FULLSCREEN: () => "enter fullscreen mode",
EXIT_FULLSCREEN: () => "exit fullscreen mode",
ENTER_PIP: () => "enter picture in picture mode",
EXIT_PIP: () => "exit picture in picture mode",
SEEK_FORWARD_N_SECS: ({ seekOffset = 30 } = {}) => `seek forward ${seekOffset} seconds`,
SEEK_BACK_N_SECS: ({ seekOffset = 30 } = {}) => `seek back ${seekOffset} seconds`,
SEEK_LIVE: () => "seek to live",
PLAYING_LIVE: () => "playing live"
};
var labels_default = {
...nouns,
...verbs
};
// ../../node_modules/media-chrome/dist/menu/media-settings-menu-button.js
var slotTemplate = Document2.createElement("template");
slotTemplate.innerHTML = /*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>
`;
var MediaSettingsMenuButton = class extends MediaChromeMenuButton {
static get observedAttributes() {
return [...super.observedAttributes, "target"];
}
constructor() {
super({ slotTemplate, tooltipContent: tooltipLabels.SETTINGS });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-label", nouns.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");
}
};
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>`
);
var slotTemplate2 = Document2.createElement("template");
slotTemplate2.innerHTML = /*html*/
`
<style>
:host([aria-expanded="true"]) slot[name=tooltip] {
display: none;
}
</style>
<slot name="icon">${audioTrackIcon}</slot>
`;
var MediaAudioTrackMenuButton = class extends MediaChromeMenuButton {
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED,
MediaUIAttributes.MEDIA_AUDIO_TRACK_UNAVAILABLE
];
}
constructor() {
super({ slotTemplate: slotTemplate2, tooltipContent: tooltipLabels.AUDIO_TRACK_MENU });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-label", nouns.AUDIO_TRACKS());
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
}
/**
* 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);
}
};
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>`
);
var template6 = Document2.createElement("template");
template6.innerHTML = MediaChromeMenu.template.innerHTML + /*html*/
`
<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("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.template = template6;
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 __accessCheck9 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
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 _captionsReady;
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>`;
var slotTemplate3 = Document2.createElement("template");
slotTemplate3.innerHTML = /*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>
`;
var updateAriaChecked = (el) => {
el.setAttribute("aria-checked", areSubsOn(el).toString());
};
var MediaCaptionsMenuButton = class extends MediaChromeMenuButton {
constructor(options = {}) {
super({ slotTemplate: slotTemplate3, tooltipContent: tooltipLabels.CAPTIONS, ...options });
__privateAdd9(this, _captionsReady, void 0);
__privateSet9(this, _captionsReady, false);
}
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_SUBTITLES_LIST,
MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
];
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-label", nouns.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);
}
};
_captionsReady = /* @__PURE__ */ new WeakMap();
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 __accessCheck10 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet9 = (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 __privateSet10 = (obj, member, value, setter) => {
__accessCheck10(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 }) {
__privateAdd10(this, _tokens);
__privateAdd10(this, _el, void 0);
__privateAdd10(this, _attr, void 0);
__privateAdd10(this, _defaultSet, void 0);
__privateAdd10(this, _tokenSet, /* @__PURE__ */ new Set());
__privateSet10(this, _el, el);
__privateSet10(this, _attr, attr);
__privateSet10(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;
__privateSet10(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((t) => __privateGet9(this, _tokenSet).add(t));
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((t) => __privateGet9(this, _tokenSet).delete(t));
(_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 __accessCheck11 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet10 = (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 _rates;
var Attributes4 = {
RATES: "rates"
};
var DEFAULT_RATES = [1, 1.2, 1.5, 1.7, 2];
var DEFAULT_RATE = 1;
var slotTemplate4 = Document2.createElement("template");
slotTemplate4.innerHTML = /*html*/
`
<style>
:host {
min-width: 5ch;
padding: var(--media-button-padding, var(--media-control-padding, 10px 5px));
}
</style>
<slot name="icon"></slot>
`;
var MediaPlaybackRateButton = class extends MediaChromeButton {
constructor(options = {}) {
super({
slotTemplate: slotTemplate4,
tooltipContent: tooltipLabels.PLAYBACK_RATE,
...options
});
__privateAdd11(this, _rates, new AttributeTokenList(this, Attributes4.RATES, {
defaultValue: DEFAULT_RATES
}));
this.container = this.shadowRoot.querySelector('slot[name="icon"]');
this.container.innerHTML = `${DEFAULT_RATE}x`;
}
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_PLAYBACK_RATE,
Attributes4.RATES
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === Attributes4.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", nouns.PLAYBACK_RATE({ playbackRate }));
}
}
/**
* @type { AttributeTokenList | Array<number> | undefined} Will return a DOMTokenList.
* Setting a value will accept an array of numbers.
*/
get rates() {
return __privateGet10(this, _rates);
}
set rates(value) {
if (!value) {
__privateGet10(this, _rates).value = "";
} else if (Array.isArray(value)) {
__privateGet10(this, _rates).value = value.join(" ");
}
}
/**
* @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(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();
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 __accessCheck12 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet11 = (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 __privateMethod7 = (obj, member, method) => {
__accessCheck12(obj, member, "access private method");
return method;
};
var _rates2;
var _render3;
var render_fn3;
var _onChange3;
var onChange_fn3;
var Attributes5 = {
RATES: "rates"
};
var MediaPlaybackRateMenu = class extends MediaChromeMenu {
constructor() {
super();
__privateAdd12(this, _render3);
__privateAdd12(this, _onChange3);
__privateAdd12(this, _rates2, new AttributeTokenList(this, Attributes5.RATES, {
defaultValue: DEFAULT_RATES
}));
__privateMethod7(this, _render3, render_fn3).call(this);
}
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_PLAYBACK_RATE,
Attributes5.RATES
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === MediaUIAttributes.MEDIA_PLAYBACK_RATE && oldValue != newValue) {
this.value = newValue;
} else if (attrName === Attributes5.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"
);
}
/**
* Will return a DOMTokenList.
* Setting a value will accept an array of numbers.
*/
get rates() {
return __privateGet11(this, _rates2);
}
set rates(value) {
if (!value) {
__privateGet11(this, _rates2).value = "";
} else if (Array.isArray(value)) {
__privateGet11(this, _rates2).value = value.join(" ");
}
__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 this.rates) {
const item = createMenuItem({
type: "radio",
text: this.formatMenuItemText(`${rate}x`, rate),
value: rate,
checked: this.mediaPlaybackRate == 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 __accessCheck13 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet12 = (obj, member, getter) => {
__accessCheck13(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd13 = (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 _rates3;
var Attributes6 = {
RATES: "rates"
};
var DEFAULT_RATES2 = [1, 1.2, 1.5, 1.7, 2];
var DEFAULT_RATE2 = 1;
var slotTemplate5 = Document2.createElement("template");
slotTemplate5.innerHTML = /*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"></slot>
`;
var MediaPlaybackRateMenuButton = class extends MediaChromeMenuButton {
constructor(options = {}) {
super({
slotTemplate: slotTemplate5,
tooltipContent: tooltipLabels.PLAYBACK_RATE,
...options
});
__privateAdd13(this, _rates3, new AttributeTokenList(this, Attributes6.RATES, {
defaultValue: DEFAULT_RATES2
}));
this.container = this.shadowRoot.querySelector('slot[name="icon"]');
this.container.innerHTML = `${DEFAULT_RATE2}x`;
}
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_PLAYBACK_RATE,
Attributes6.RATES
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === Attributes6.RATES) {
__privateGet12(this, _rates3).value = 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", nouns.PLAYBACK_RATE({ 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");
}
/**
* Will return a DOMTokenList.
* Setting a value will accept an array of numbers.
*/
get rates() {
return __privateGet12(this, _rates3);
}
set rates(value) {
if (!value) {
__privateGet12(this, _rates3).value = "";
} else if (Array.isArray(value)) {
__privateGet12(this, _rates3).value = value.join(" ");
}
}
/**
* 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);
}
};
_rates3 = /* @__PURE__ */ new WeakMap();
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 __accessCheck14 = (obj, member, msg) => {
if (!member.has(obj))
throw TypeError("Cannot " + msg);
};
var __privateGet13 = (obj, member, getter) => {
__accessCheck14(obj, member, "read from private field");
return getter ? getter.call(obj) : member.get(obj);
};
var __privateAdd14 = (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 __privateSet11 = (obj, member, value, setter) => {
__accessCheck14(obj, member, "write to private field");
setter ? setter.call(obj, value) : member.set(obj, value);
return value;
};
var __privateMethod8 = (obj, member, method) => {
__accessCheck14(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);
__privateAdd14(this, _render4);
__privateAdd14(this, _onChange4);
__privateAdd14(this, _renditionList, []);
__privateAdd14(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";
} else if (attrName === MediaUIAttributes.MEDIA_RENDITION_LIST && oldValue !== newValue) {
__privateSet11(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 __privateGet13(this, _renditionList);
}
set mediaRenditionList(list) {
__privateSet11(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 (__privateGet13(this, _prevState3).mediaRenditionList === JSON.stringify(this.mediaRenditionList) && __privateGet13(this, _prevState3).mediaHeight === this.mediaHeight)
return;
__privateGet13(this, _prevState3).mediaRenditionList = JSON.stringify(this.mediaRenditionList);
__privateGet13(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 text = this.formatMenuItemText(
`${Math.min(rendition.width, rendition.height)}p`,
rendition
);
const item2 = createMenuItem({
type: "radio",
text,
value: `${rendition.id}`,
checked: rendition.selected && !isAuto
});
item2.prepend(createIndicator(this, "checked-indicator"));
this.defaultSlot.append(item2);
}
const item = createMenuItem({
type: "radio",
text: this.formatMenuItemText("Auto"),
value: "auto",
checked: isAuto
});
const autoDescription = this.mediaHeight > 0 ? `Auto (${this.mediaHeight}p)` : "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>`
);
var slotTemplate6 = Document2.createElement("template");
slotTemplate6.innerHTML = /*html*/
`
<style>
:host([aria-expanded="true"]) slot[name=tooltip] {
display: none;
}
</style>
<slot name="icon">${renditionIcon}</slot>
`;
var MediaRenditionMenuButton = class extends MediaChromeMenuButton {
static get observedAttributes() {
return [
...super.observedAttributes,
MediaUIAttributes.MEDIA_RENDITION_SELECTED,
MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
MediaUIAttributes.MEDIA_HEIGHT
];
}
constructor() {
super({ slotTemplate: slotTemplate6, tooltipContent: tooltipLabels.RENDITIONS });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-label", nouns.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);
}
};
if (!GlobalThis.customElements.get("media-rendition-menu-button")) {
GlobalThis.customElements.define(
"media-rendition-menu-button",
MediaRenditionMenuButton
);
}
// src/themes/gerwig/index.ts
var template7 = internalDocument.createElement("template");
if ("innerHTML" in template7)
template7.innerHTML = gerwig_default;
var _a2, _b;
var MediaThemeGerwig = class extends MediaThemeElement {
};
MediaThemeGerwig.template = (_b = (_a2 = template7.content) == null ? void 0 : _a2.children) == null ? void 0 : _b[0];
if (!internalGlobalThis.customElements.get("media-theme-gerwig")) {
internalGlobalThis.customElements.define("media-theme-gerwig", MediaThemeGerwig);
}
var gerwig_default2 = MediaThemeGerwig;
return __toCommonJS(gerwig_exports);
})();
Reference in New Issue View Git Blame Copy Permalink