5274 lines
182 KiB
JavaScript
5274 lines
182 KiB
JavaScript
"use strict";
|
|
var mediaThemeClassic = (() => {
|
|
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/classic/index.ts
|
|
var classic_exports = {};
|
|
__export(classic_exports, {
|
|
default: () => classic_default2
|
|
});
|
|
|
|
// src/themes/classic/classic.html
|
|
var classic_default = `<!-- prettier-ignore -->
|
|
<template id="media-theme-classic">
|
|
<style>
|
|
:host {
|
|
--_primary-color: var(--media-primary-color, white);
|
|
--_secondary-color: var(--media-secondary-color, rgb(0 0 0 / .75));
|
|
--media-icon-color: var(--_primary-color);
|
|
--media-range-thumb-background: var(--_primary-color);
|
|
--media-range-bar-color: var(--_primary-color);
|
|
--media-control-background: var(--_secondary-color);
|
|
--media-control-hover-background: var(--_secondary-color);
|
|
--media-time-range-buffered-color: rgba(255, 255, 255, 0.4);
|
|
--media-range-track-background:
|
|
linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
|
|
linear-gradient(rgba(20, 20, 30, 0.7), rgba(20, 20, 30, 0.7));
|
|
--media-preview-thumbnail-border: 0;
|
|
--media-preview-thumbnail-border-radius: 2px 2px 0 0;
|
|
--media-preview-time-border-radius: 0 0 2px 2px;
|
|
--media-preview-time-text-shadow: none;
|
|
--media-menu-border-radius: 2px;
|
|
--media-menu-transform-in: translateY(-8px) scale(1);
|
|
--media-menu-transform-out: translateY(-6px) scale(.99);
|
|
--media-menu-item-hover-background: rgba(255, 255, 255, 0.28);
|
|
--media-tooltip-display: none;
|
|
color: var(--_primary-color);
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
media-rendition-menu,
|
|
media-audio-track-menu,
|
|
media-captions-menu {
|
|
position: absolute; /* ensure they don't take up space in DOM on load */
|
|
}
|
|
|
|
:host([audio]) {
|
|
--media-preview-time-border-radius: 3px;
|
|
--media-preview-time-text-shadow: none;
|
|
}
|
|
|
|
:host([audio]) ::slotted([slot='media']) {
|
|
height: 0px;
|
|
}
|
|
|
|
:host([audio]) media-loading-indicator {
|
|
display: none;
|
|
}
|
|
|
|
:host([audio]) media-controller {
|
|
background: transparent;
|
|
}
|
|
|
|
:host([audio]) media-controller::part(vertical-layer) {
|
|
background: transparent;
|
|
}
|
|
|
|
:host([audio]) media-control-bar {
|
|
width: 100%;
|
|
}
|
|
|
|
[disabled]:not(media-live-button),
|
|
[aria-disabled='true']:not(media-live-button) {
|
|
opacity: 60%;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* 0.433s is the transition duration for VTT Regions.
|
|
* Borrowed here, so the captions don't move too fast. */
|
|
media-controller {
|
|
--media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
|
|
}
|
|
media-controller:is([mediapaused],:not([userinactive])) {
|
|
/* 42px is the height of the control bar and progress bar
|
|
* with an additional 5px as a buffer, to get 47px */
|
|
--media-webkit-text-track-transform: translateY(-47px);
|
|
--media-webkit-text-track-transition: transform 0.15s ease;
|
|
}
|
|
|
|
/*
|
|
* CSS specific to iOS devices.
|
|
* See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
|
|
*/
|
|
@supports (-webkit-touch-callout: none) {
|
|
/* Disable subtitle adjusting for iOS Safari */
|
|
media-controller[mediaisfullscreen] {
|
|
--media-webkit-text-track-transform: unset;
|
|
--media-webkit-text-track-transition: unset;
|
|
}
|
|
}
|
|
|
|
:host media-time-range {
|
|
color: var(--_primary-color);
|
|
--media-range-thumb-opacity: 0;
|
|
}
|
|
|
|
:host(:not([audio])) media-time-range {
|
|
/* Adding px is required here for calc() */
|
|
--media-range-padding: 0px;
|
|
background: transparent;
|
|
z-index: 10;
|
|
height: 10px;
|
|
bottom: -3px;
|
|
width: 100%;
|
|
}
|
|
|
|
media-control-bar {
|
|
--media-control-padding: 4px 3px;
|
|
}
|
|
|
|
[breakpointsm] media-control-bar {
|
|
--media-control-padding: 9px 5px;
|
|
}
|
|
|
|
[breakpointmd] media-control-bar {
|
|
--media-control-padding: 9px 7px;
|
|
}
|
|
|
|
media-control-bar :is([role='button'], [role='switch'], button) {
|
|
line-height: 0;
|
|
}
|
|
|
|
media-control-bar :is(media-text-display, media-time-display):first-child {
|
|
--media-control-padding: 9px 5px 9px 10px;
|
|
}
|
|
|
|
.spacer {
|
|
flex-grow: 1;
|
|
background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
|
|
}
|
|
|
|
/* Add a small space on the right to have the play button and
|
|
* fullscreen button aligned in relation to the progress bar. */
|
|
media-control-bar:not([slot])::after {
|
|
content: '';
|
|
width: 2px;
|
|
height: 100%;
|
|
background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
|
|
}
|
|
|
|
media-control-bar[slot='top-chrome'] {
|
|
min-height: 42px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
:host([title]) media-control-bar[slot='top-chrome']::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
padding-bottom: min(160px, 25%);
|
|
background: linear-gradient(rgb(0 0 0 / 0.4), transparent);
|
|
}
|
|
|
|
media-control-bar[slot='top-chrome'] > * {
|
|
--media-control-background: transparent;
|
|
--media-control-hover-background: transparent;
|
|
position: relative;
|
|
}
|
|
|
|
media-controller::part(vertical-layer) {
|
|
transition: background-color 1s;
|
|
}
|
|
|
|
media-controller:is([mediapaused], :not([userinactive]))::part(vertical-layer) {
|
|
background-color: var(--controls-backdrop-color, var(--controls, transparent));
|
|
transition: background-color 0.25s;
|
|
}
|
|
|
|
.center-controls {
|
|
--media-button-icon-width: 100%;
|
|
--media-button-icon-height: auto;
|
|
pointer-events: none;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-flow: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
|
|
paint-order: stroke;
|
|
stroke: rgba(102, 102, 102, 1);
|
|
stroke-width: 0.3px;
|
|
text-shadow: 0 0 2px rgb(0 0 0 / 0.25), 0 0 6px rgb(0 0 0 / 0.25);
|
|
}
|
|
|
|
.center-controls media-play-button {
|
|
--media-control-background: transparent;
|
|
--media-control-hover-background: transparent;
|
|
padding: 0;
|
|
width: max(43px, min(10%, 55px));
|
|
}
|
|
|
|
.center-controls media-seek-backward-button,
|
|
.center-controls media-seek-forward-button {
|
|
--media-control-background: transparent;
|
|
--media-control-hover-background: transparent;
|
|
padding: 0;
|
|
margin: 0 2%;
|
|
width: max(33px, min(8%, 40px));
|
|
}
|
|
|
|
media-control-bar:not([slot]) media-seek-backward-button {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
media-control-bar:not([slot]) media-seek-forward-button {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
media-loading-indicator {
|
|
--media-loading-icon-width: 100%;
|
|
--media-button-icon-height: auto;
|
|
display: var(--media-control-display, var(--media-loading-indicator-display, flex));
|
|
pointer-events: none;
|
|
position: absolute;
|
|
width: min(15%, 150px);
|
|
flex-flow: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Intentionally don't target the div for transition but the children
|
|
of the div. Prevents messing with media-chrome's autohide feature. */
|
|
media-loading-indicator + div * {
|
|
transition: opacity 0.15s;
|
|
opacity: 1;
|
|
}
|
|
|
|
media-loading-indicator[medialoading]:not([mediapaused]) ~ div > * {
|
|
opacity: 0;
|
|
transition-delay: 400ms;
|
|
}
|
|
|
|
media-volume-range {
|
|
/* Adding px is required here for calc() */
|
|
--media-range-padding-left: 10px;
|
|
--media-range-padding-right: 10px;
|
|
width: min(100%, 100px);
|
|
}
|
|
|
|
media-time-display {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:is(media-time-display, media-text-display, media-playback-rate-button[role='button']) {
|
|
color: inherit;
|
|
line-height: 24px;
|
|
}
|
|
|
|
:is(.title-display, media-live-button) {
|
|
color: inherit;
|
|
font-size: 16px;
|
|
text-shadow: 0 0 2px rgb(0 0 0 / 0.6);
|
|
}
|
|
|
|
:host([audio]) .title-display {
|
|
flex-grow: 1;
|
|
font-size: 21px;
|
|
}
|
|
</style>
|
|
|
|
<template partial="TitleDisplay">
|
|
<template if="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}}"
|
|
>
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" slot="play">
|
|
<path d="m6.73 20.93 14.05-8.54a.46.46 0 0 0 0-.78L6.73 3.07a.48.48 0 0 0-.73.39v17.07a.48.48 0 0 0 .73.4Z" />
|
|
</svg>
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" slot="pause">
|
|
<path
|
|
d="M6 19.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v15ZM14.5 4a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3Z"
|
|
/>
|
|
</svg>
|
|
</media-play-button>
|
|
</template>
|
|
|
|
<template partial="SeekBackwardButton">
|
|
<media-seek-backward-button
|
|
seekoffset="{{backwardseekoffset}}"
|
|
part="{{section ?? 'bottom'}} seek-backward button"
|
|
disabled="{{disabled}}"
|
|
aria-disabled="{{disabled}}"
|
|
>
|
|
<svg aria-hidden="true" viewBox="0 0 22 24" slot="backward">
|
|
<path d="M11 6V3L5.37 7 11 10.94V8a5.54 5.54 0 0 1 1.9 10.48v2.12A7.5 7.5 0 0 0 11 6Z" />
|
|
<text class="value" transform="translate(2.5 21)" style="font-size: 8px; font-family: 'ArialMT', 'Arial'">
|
|
{{backwardseekoffset}}
|
|
</text>
|
|
</svg>
|
|
</media-seek-backward-button>
|
|
</template>
|
|
|
|
<template partial="SeekForwardButton">
|
|
<media-seek-forward-button
|
|
seekoffset="{{forwardseekoffset}}"
|
|
part="{{section ?? 'bottom'}} seek-forward button"
|
|
disabled="{{disabled}}"
|
|
aria-disabled="{{disabled}}"
|
|
>
|
|
<svg aria-hidden="true" viewBox="0 0 22 24" slot="forward">
|
|
<path d="M11 6V3l5.61 4L11 10.94V8a5.54 5.54 0 0 0-1.9 10.48v2.12A7.5 7.5 0 0 1 11 6Z" />
|
|
<text class="value" transform="translate(10 21)" style="font-size: 8px; font-family: 'ArialMT', 'Arial'">
|
|
{{forwardseekoffset}}
|
|
</text>
|
|
</svg>
|
|
</media-seek-forward-button>
|
|
</template>
|
|
|
|
<template partial="MuteButton">
|
|
<media-mute-button part="bottom mute button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" slot="high">
|
|
<path
|
|
d="m11.14 4.86-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.21a.5.5 0 0 0-.86-.35Zm2.74-1.56v1.52A7.52 7.52 0 0 1 19.47 12a7.52 7.52 0 0 1-5.59 7.18v1.52A9 9 0 0 0 21 12a9 9 0 0 0-7.12-8.7Zm3.56 8.7a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
|
|
/>
|
|
</svg>
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" slot="low">
|
|
<path
|
|
d="m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
|
|
/>
|
|
</svg>
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" slot="medium">
|
|
<path
|
|
d="m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
|
|
/>
|
|
</svg>
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" slot="off">
|
|
<path
|
|
d="m3 4.05 4.48 4.47-.33.33a.49.49 0 0 1-.36.15H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.48.48 0 0 0 .36.15.5.5 0 0 0 .5-.5v-5.75l4.67 4.66a7.71 7.71 0 0 1-2.79 1.47v1.52a9.32 9.32 0 0 0 3.87-1.91L20 21l1-1L4.06 3 3 4.05Zm5.36 5.36 2.39 2.39V17L8 14.26a1.74 1.74 0 0 0-1.24-.51H4.25v-3.5h2.54A1.74 1.74 0 0 0 8 9.74l.36-.33ZM19.47 12a7.19 7.19 0 0 1-.89 3.47l1.11 1.1A8.64 8.64 0 0 0 21 12a9 9 0 0 0-7.12-8.7v1.52A7.52 7.52 0 0 1 19.47 12ZM12 8.88V5.21a.5.5 0 0 0-.5-.5.48.48 0 0 0-.36.15L9.56 6.44 12 8.88ZM15.91 12a4.284 4.284 0 0 1-.07.72l1.22 1.22a5.2 5.2 0 0 0 .38-1.94 5.49 5.49 0 0 0-3.56-5.1v1.66A4 4 0 0 1 15.91 12Z"
|
|
/>
|
|
</svg>
|
|
</media-mute-button>
|
|
</template>
|
|
|
|
<template partial="RenditionSelect">
|
|
<media-rendition-menu-button part="bottom rendition button">
|
|
<svg aria-hidden="true" slot="icon" viewBox="0 0 18 24">
|
|
<path
|
|
d="M2.25 14.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
|
|
</svg>
|
|
</media-rendition-menu-button>
|
|
<media-rendition-menu
|
|
hidden
|
|
anchor="auto"
|
|
part="bottom rendition menu"
|
|
disabled="{{disabled}}"
|
|
aria-disabled="{{disabled}}"
|
|
>
|
|
<div slot="header">Quality</div>
|
|
</media-rendition-menu>
|
|
</template>
|
|
|
|
<template partial="AudioTrackSelect">
|
|
<media-audio-track-menu-button part="bottom audio-track button">
|
|
<svg aria-hidden="true" slot="icon" viewBox="0 0 24 24">
|
|
<path d="M12 20.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17Zm0 1.5C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Z"/>
|
|
<path d="M7.25 9.75a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75Zm3-3a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 .75-.75Zm3 2a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0v-5a.75.75 0 0 1 .75-.75Zm3-1a.75.75 0 0 1 .75.75v7a.75.75 0 0 1-1.5 0v-7a.75.75 0 0 1 .75-.75Z"/>
|
|
</svg>
|
|
</media-audio-track-menu-button>
|
|
<media-audio-track-menu
|
|
hidden
|
|
anchor="auto"
|
|
part="bottom audio-track menu"
|
|
disabled="{{disabled}}"
|
|
aria-disabled="{{disabled}}"
|
|
exportparts="menu-item"
|
|
>
|
|
<div slot="header">Audio</div>
|
|
</media-audio-track-menu>
|
|
</template>
|
|
|
|
<template partial="CaptionsSelect">
|
|
<media-captions-menu-button part="bottom captions button">
|
|
<svg aria-hidden="true" viewBox="0 0 26 24" slot="on">
|
|
<path d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.41 10.1a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 4 4 0 0 1-1.28-.83 3.67 3.67 0 0 1-.84-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.53 3.53 0 0 1 .84-1.21 3.89 3.89 0 0 1 1.29-.8 4.76 4.76 0 0 1 1.63-.27 4.06 4.06 0 0 1 1.35.24c.225.091.44.205.64.34a2.7 2.7 0 0 1 .55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.35 2.35 0 0 0-.46.77 2.78 2.78 0 0 0-.16 1c-.009.34.046.68.16 1 .104.283.26.545.46.77.188.21.415.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.88 2.88 0 0 1-1.22 1.01Zm7.52 0a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 3.89 3.89 0 0 1-1.28-.83 3.55 3.55 0 0 1-.85-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.43 3.43 0 0 1 .85-1.25 3.75 3.75 0 0 1 1.28-.8 4.76 4.76 0 0 1 1.63-.27 4 4 0 0 1 1.35.24c.225.091.44.205.64.34.21.144.395.32.55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.352 2.352 0 0 0-.46.77 3.01 3.01 0 0 0-.16 1c-.003.34.05.678.16 1 .108.282.263.542.46.77.188.21.416.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.82 2.82 0 0 1-1.21 1.05Z"/>
|
|
</svg>
|
|
<svg aria-hidden="true" viewBox="0 0 26 24" slot="off">
|
|
<path d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-1.81-.12-4.67-.18-7.53-.18-2.86 0-5.72.06-7.53.18a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18 2.86 0 5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.137-.21-8.283 0-12.42a1.11 1.11 0 0 1 .91-1.11c1.67-.11 4.43-.18 7.43-.18s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.137.21 8.283 0 12.42ZM10.843 14a1.55 1.55 0 0 1-.76.18 1.57 1.57 0 0 1-.71-.18 1.69 1.69 0 0 1-.57-.42 2.099 2.099 0 0 1-.38-.58 2.47 2.47 0 0 1 0-1.64 2 2 0 0 1 .39-.66 1.73 1.73 0 0 1 .58-.42c.23-.103.479-.158.73-.16.241-.004.48.044.7.14.199.088.373.222.51.39l1.08-.89a2.179 2.179 0 0 0-.47-.44 2.81 2.81 0 0 0-.54-.32 2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0 4.08 4.08 0 0 0-1.38.15 3.27 3.27 0 0 0-1.09.67 3.14 3.14 0 0 0-.71 1.06 3.62 3.62 0 0 0-.26 1.39 3.57 3.57 0 0 0 .26 1.38 3 3 0 0 0 .71 1.06c.316.293.687.52 1.09.67.443.16.91.238 1.38.23a3.2 3.2 0 0 0 1.28-.27c.401-.183.747-.47 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18 1.54 1.54 0 0 1-.7-.18 1.69 1.69 0 0 1-.57-.42 2.12 2.12 0 0 1-.43-.58 2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58c.241-.003.48.045.7.14.199.088.373.222.51.39l1.08-.92a2.43 2.43 0 0 0-.47-.44 3.22 3.22 0 0 0-.53-.29 2.999 2.999 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0 4.06 4.06 0 0 0-1.36.15 3.17 3.17 0 0 0-1.09.67 3 3 0 0 0-.72 1.06 3.62 3.62 0 0 0-.25 1.39 3.57 3.57 0 0 0 .25 1.38c.16.402.405.764.72 1.06a3.17 3.17 0 0 0 1.09.67c.44.16.904.237 1.37.23.441 0 .877-.092 1.28-.27a2.45 2.45 0 0 0 1-.83l-1.15-.85a1.49 1.49 0 0 1-.54.49Z"/>
|
|
</svg>
|
|
</media-captions-menu-button>
|
|
<media-captions-menu
|
|
hidden
|
|
anchor="auto"
|
|
part="bottom captions menu"
|
|
disabled="{{disabled}}"
|
|
aria-disabled="{{disabled}}"
|
|
exportparts="menu-item"
|
|
></media-captions-menu>
|
|
</template>
|
|
|
|
<template partial="AirplayButton">
|
|
<media-airplay-button part="bottom airplay button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
|
|
<svg aria-hidden="true" viewBox="0 0 26 24" slot="airplay">
|
|
<path
|
|
d="M13.19 14.22a.25.25 0 0 0-.38 0l-5.46 6.37a.25.25 0 0 0 .19.41h10.92a.25.25 0 0 0 .19-.41l-5.46-6.37Z"
|
|
/>
|
|
<path
|
|
d="M22 3H4a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h2.94L8 16.75H4.25V4.25h17.5v12.5H18L19.06 18H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
|
|
/>
|
|
</svg>
|
|
</media-airplay-button>
|
|
</template>
|
|
|
|
<template partial="CastButton">
|
|
<media-cast-button part="bottom cast button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
|
|
<svg aria-hidden="true" viewBox="0 0 26 24" slot="enter">
|
|
<path d="M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z" />
|
|
<path d="M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z" />
|
|
<path
|
|
d="M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
|
|
/>
|
|
</svg>
|
|
<svg aria-hidden="true" viewBox="0 0 26 24" slot="exit">
|
|
<path d="M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z" />
|
|
<path d="M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z" />
|
|
<path
|
|
d="M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
|
|
/>
|
|
<path d="M20.5 5.5h-15v5.811c3.52.906 6.283 3.67 7.189 7.19H20.5V5.5Z" />
|
|
</svg>
|
|
</media-cast-button>
|
|
</template>
|
|
|
|
<template partial="PipButton">
|
|
<media-pip-button part="bottom pip button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
|
|
<svg aria-hidden="true" viewBox="0 0 26 24" slot="enter">
|
|
<path
|
|
d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
|
|
/>
|
|
</svg>
|
|
<svg aria-hidden="true" viewBox="0 0 26 24" slot="exit">
|
|
<path
|
|
d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
|
|
/>
|
|
</svg>
|
|
</media-pip-button>
|
|
</template>
|
|
|
|
<template partial="FullscreenButton">
|
|
<media-fullscreen-button part="bottom fullscreen button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" slot="enter">
|
|
<path
|
|
d="M20.25 14.5a.76.76 0 0 0-.75.75v4.25h-4.25a.75.75 0 1 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5a.76.76 0 0 0-.75-.75Zm0-11.5h-5a.76.76 0 0 0-.75.75.76.76 0 0 0 .75.75h4.25v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75ZM8.75 19.5H4.5v-4.25a.76.76 0 0 0-.75-.75.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75h5a.75.75 0 1 0 0-1.5Zm0-16.5h-5a.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75.76.76 0 0 0 .75-.75V4.5h4.25a.76.76 0 0 0 .75-.75.76.76 0 0 0-.75-.75Z"
|
|
/>
|
|
</svg>
|
|
<svg aria-hidden="true" viewBox="0 0 24 24" slot="exit">
|
|
<path
|
|
d="M20.25 14.5h-5a.76.76 0 0 0-.75.75v5a.75.75 0 1 0 1.5 0V16h4.25a.75.75 0 1 0 0-1.5Zm-5-5h5a.75.75 0 1 0 0-1.5H16V3.75a.75.75 0 1 0-1.5 0v5a.76.76 0 0 0 .75.75Zm-6.5 5h-5a.75.75 0 1 0 0 1.5H8v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75Zm0-11.5a.76.76 0 0 0-.75.75V8H3.75a.75.75 0 0 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5A.76.76 0 0 0 8.75 3Z"
|
|
/>
|
|
</svg>
|
|
</media-fullscreen-button>
|
|
</template>
|
|
|
|
<template partial="LiveButton">
|
|
<media-live-button
|
|
part="{{section ?? 'top'}} live button"
|
|
disabled="{{disabled}}"
|
|
aria-disabled="{{disabled}}"
|
|
></media-live-button>
|
|
</template>
|
|
|
|
<template partial="PlaybackRateButton">
|
|
<media-playback-rate-button
|
|
rates="{{playbackrates}}"
|
|
part="bottom playback-rate button"
|
|
disabled="{{disabled}}"
|
|
aria-disabled="{{disabled}}"
|
|
></media-playback-rate-button>
|
|
</template>
|
|
|
|
<template partial="VolumeRange">
|
|
<media-volume-range
|
|
part="bottom volume range"
|
|
disabled="{{disabled}}"
|
|
aria-disabled="{{disabled}}"
|
|
></media-volume-range>
|
|
</template>
|
|
|
|
<template partial="TimeDisplay">
|
|
<media-time-display
|
|
remaining="{{defaultshowremainingtime}}"
|
|
showduration="{{!hideduration}}"
|
|
part="bottom time display"
|
|
disabled="{{disabled}}"
|
|
aria-disabled="{{disabled}}"
|
|
></media-time-display>
|
|
</template>
|
|
|
|
<template partial="TimeRange">
|
|
<media-time-range
|
|
part="bottom time range"
|
|
disabled="{{disabled}}"
|
|
aria-disabled="{{disabled}}"
|
|
></media-time-range>
|
|
</template>
|
|
|
|
<media-controller
|
|
part="controller"
|
|
defaultstreamtype="{{defaultstreamtype ?? 'on-demand'}}"
|
|
breakpoints="sm:300 md:700"
|
|
gesturesdisabled="{{disabled}}"
|
|
hotkeys="{{hotkeys}}"
|
|
nohotkeys="{{nohotkeys}}"
|
|
novolumepref="{{novolumepref}}"
|
|
audio="{{audio}}"
|
|
noautoseektolive="{{noautoseektolive}}"
|
|
defaultsubtitles="{{defaultsubtitles}}"
|
|
defaultduration="{{defaultduration ?? false}}"
|
|
keyboardforwardseekoffset="{{forwardseekoffset}}"
|
|
keyboardbackwardseekoffset="{{backwardseekoffset}}"
|
|
exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer"
|
|
>
|
|
<slot name="media" slot="media"></slot>
|
|
<slot name="poster" slot="poster"></slot>
|
|
<media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
|
|
|
|
<template if="audio">
|
|
|
|
<template if="streamtype == 'on-demand'">
|
|
<template if="title">
|
|
<media-control-bar part="control-bar top">{{>TitleDisplay}}</media-control-bar>
|
|
</template>
|
|
<media-control-bar part="control-bar bottom">
|
|
{{>PlayButton}}
|
|
{{>SeekBackwardButton}}
|
|
{{>SeekForwardButton}}
|
|
{{>TimeDisplay}}
|
|
{{>TimeRange}}
|
|
{{>MuteButton}}
|
|
{{>VolumeRange}}
|
|
{{>PlaybackRateButton}}
|
|
{{>AudioTrackSelect}}
|
|
{{>AirplayButton}}
|
|
{{>CastButton}}
|
|
</media-control-bar>
|
|
</template>
|
|
|
|
<template if="streamtype == 'live'">
|
|
|
|
<template if="targetlivewindow > 0">
|
|
<template if="title">
|
|
<media-control-bar part="control-bar top">{{>TitleDisplay}}</media-control-bar>
|
|
</template>
|
|
<media-control-bar part="control-bar bottom">
|
|
{{>PlayButton}}
|
|
{{>LiveButton section="bottom"}}
|
|
{{>SeekBackwardButton}}
|
|
{{>SeekForwardButton}}
|
|
{{>TimeDisplay}}
|
|
{{>TimeRange}}
|
|
{{>MuteButton}}
|
|
{{>VolumeRange}}
|
|
{{>PlaybackRateButton}}
|
|
{{>AudioTrackSelect}}
|
|
{{>AirplayButton}}
|
|
{{>CastButton}}
|
|
</media-control-bar>
|
|
</template>
|
|
|
|
<template if="!targetlivewindow">
|
|
<template if="title">
|
|
<media-control-bar part="control-bar top">{{>TitleDisplay}}</media-control-bar>
|
|
</template>
|
|
<media-control-bar part="control-bar bottom">
|
|
{{>PlayButton}}
|
|
{{>LiveButton section="bottom"}}
|
|
{{>MuteButton}}
|
|
{{>VolumeRange}}
|
|
<div class="spacer"></div>
|
|
{{>AudioTrackSelect}}
|
|
{{>AirplayButton}}
|
|
{{>CastButton}}
|
|
</media-control-bar>
|
|
</template>
|
|
|
|
</template>
|
|
</template>
|
|
|
|
<template if="!audio">
|
|
|
|
<template if="streamtype == 'on-demand'">
|
|
|
|
<template if="!breakpointsm">
|
|
{{>TimeRange}}
|
|
<media-control-bar part="control-bar bottom">
|
|
{{>PlayButton}}
|
|
{{>MuteButton}}
|
|
<div class="spacer"></div>
|
|
{{>CaptionsSelect}}
|
|
{{>FullscreenButton}}
|
|
</media-control-bar>
|
|
</template>
|
|
|
|
<template if="breakpointsm">
|
|
<template if="!breakpointmd">
|
|
<media-control-bar part="control-bar top" slot="top-chrome">
|
|
{{>TitleDisplay}}
|
|
</media-control-bar>
|
|
<div slot="centered-chrome" class="center-controls">
|
|
{{>SeekBackwardButton section="center"}}
|
|
{{>PlayButton section="center"}}
|
|
{{>SeekForwardButton section="center"}}
|
|
</div>
|
|
{{>TimeRange}}
|
|
<media-control-bar part="control-bar bottom">
|
|
{{>PlayButton}}
|
|
{{>TimeDisplay}}
|
|
{{>MuteButton}}
|
|
{{>VolumeRange}}
|
|
<div class="spacer"></div>
|
|
{{>RenditionSelect}}
|
|
{{>PlaybackRateButton}}
|
|
{{>AudioTrackSelect}}
|
|
{{>CaptionsSelect}}
|
|
{{>AirplayButton}}
|
|
{{>CastButton}}
|
|
{{>PipButton}}
|
|
{{>FullscreenButton}}
|
|
</media-control-bar>
|
|
</template>
|
|
</template>
|
|
|
|
<template if="breakpointmd">
|
|
<media-control-bar part="control-bar top" slot="top-chrome">
|
|
{{>TitleDisplay}}
|
|
</media-control-bar>
|
|
<div slot="centered-chrome" class="center-controls">
|
|
{{>PlayButton section="center"}}
|
|
</div>
|
|
{{>TimeRange}}
|
|
<media-control-bar part="control-bar bottom">
|
|
{{>PlayButton}}
|
|
{{>SeekBackwardButton}}
|
|
{{>SeekForwardButton}}
|
|
{{>TimeDisplay}}
|
|
{{>MuteButton}}
|
|
{{>VolumeRange}}
|
|
<div class="spacer"></div>
|
|
{{>RenditionSelect}}
|
|
{{>PlaybackRateButton}}
|
|
{{>AudioTrackSelect}}
|
|
{{>CaptionsSelect}}
|
|
{{>AirplayButton}}
|
|
{{>CastButton}}
|
|
{{>PipButton}}
|
|
{{>FullscreenButton}}
|
|
</media-control-bar>
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template if="streamtype == 'live'">
|
|
|
|
<template if="!targetlivewindow">
|
|
|
|
<template if="!breakpointsm">
|
|
<media-control-bar part="control-bar top" slot="top-chrome">
|
|
{{>LiveButton}}
|
|
</media-control-bar>
|
|
<media-control-bar part="control-bar bottom">
|
|
{{>PlayButton}}
|
|
{{>MuteButton}}
|
|
<div class="spacer"></div>
|
|
{{>CaptionsSelect}}
|
|
{{>FullscreenButton}}
|
|
</media-control-bar>
|
|
</template>
|
|
|
|
<template if="breakpointsm">
|
|
<template if="!breakpointmd">
|
|
<media-control-bar part="control-bar top" slot="top-chrome">
|
|
{{>LiveButton}}
|
|
{{>TitleDisplay}}
|
|
</media-control-bar>
|
|
<div slot="centered-chrome" class="center-controls">
|
|
{{>PlayButton section="center"}}
|
|
</div>
|
|
<media-control-bar part="control-bar bottom">
|
|
{{>PlayButton}}
|
|
{{>MuteButton}}
|
|
{{>VolumeRange}}
|
|
<div class="spacer"></div>
|
|
{{>RenditionSelect}}
|
|
{{>AudioTrackSelect}}
|
|
{{>CaptionsSelect}}
|
|
{{>AirplayButton}}
|
|
{{>CastButton}}
|
|
{{>PipButton}}
|
|
{{>FullscreenButton}}
|
|
</media-control-bar>
|
|
</template>
|
|
</template>
|
|
|
|
<template if="breakpointmd">
|
|
<media-control-bar part="control-bar top" slot="top-chrome">
|
|
{{>LiveButton}}
|
|
{{>TitleDisplay}}
|
|
</media-control-bar>
|
|
<div slot="centered-chrome" class="center-controls">
|
|
{{>PlayButton section="center"}}
|
|
</div>
|
|
<media-control-bar part="control-bar bottom">
|
|
{{>PlayButton}}
|
|
{{>MuteButton}}
|
|
{{>VolumeRange}}
|
|
<div class="spacer"></div>
|
|
{{>RenditionSelect}}
|
|
{{>AudioTrackSelect}}
|
|
{{>CaptionsSelect}}
|
|
{{>AirplayButton}}
|
|
{{>CastButton}}
|
|
{{>PipButton}}
|
|
{{>FullscreenButton}}
|
|
</media-control-bar>
|
|
</template>
|
|
</template>
|
|
|
|
<template if="targetlivewindow > 0">
|
|
|
|
<template if="!breakpointsm">
|
|
<media-control-bar part="control-bar top" slot="top-chrome">
|
|
{{>LiveButton}}
|
|
</media-control-bar>
|
|
{{>TimeRange}}
|
|
<media-control-bar part="control-bar bottom">
|
|
{{>PlayButton}}
|
|
{{>MuteButton}}
|
|
<div class="spacer"></div>
|
|
{{>CaptionsSelect}}
|
|
{{>FullscreenButton}}
|
|
</media-control-bar>
|
|
</template>
|
|
|
|
<template if="breakpointsm">
|
|
<template if="!breakpointmd">
|
|
<media-control-bar part="control-bar top" slot="top-chrome">
|
|
{{>LiveButton}}
|
|
{{>TitleDisplay}}
|
|
</media-control-bar>
|
|
<div slot="centered-chrome" class="center-controls">
|
|
{{>SeekBackwardButton section="center"}}
|
|
{{>PlayButton section="center"}}
|
|
{{>SeekForwardButton section="center"}}
|
|
</div>
|
|
{{>TimeRange}}
|
|
<media-control-bar part="control-bar bottom">
|
|
{{>PlayButton}}
|
|
{{>MuteButton}}
|
|
{{>VolumeRange}}
|
|
<div class="spacer"></div>
|
|
{{>RenditionSelect}}
|
|
{{>AudioTrackSelect}}
|
|
{{>CaptionsSelect}}
|
|
{{>AirplayButton}}
|
|
{{>CastButton}}
|
|
{{>PipButton}}
|
|
{{>FullscreenButton}}
|
|
</media-control-bar>
|
|
</template>
|
|
</template>
|
|
|
|
<template if="breakpointmd">
|
|
<media-control-bar part="control-bar top" slot="top-chrome">
|
|
{{>LiveButton}}
|
|
{{>TitleDisplay}}
|
|
</media-control-bar>
|
|
<div slot="centered-chrome" class="center-controls">
|
|
{{>PlayButton section="center"}}
|
|
</div>
|
|
{{>TimeRange}}
|
|
<media-control-bar part="control-bar bottom">
|
|
{{>PlayButton}}
|
|
{{>SeekBackwardButton}}
|
|
{{>SeekForwardButton}}
|
|
{{>MuteButton}}
|
|
{{>VolumeRange}}
|
|
<div class="spacer"></div>
|
|
{{>RenditionSelect}}
|
|
{{>AudioTrackSelect}}
|
|
{{>CaptionsSelect}}
|
|
{{>AirplayButton}}
|
|
{{>CastButton}}
|
|
{{>PipButton}}
|
|
{{>FullscreenButton}}
|
|
</media-control-bar>
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<slot></slot>
|
|
|
|
</media-controller>
|
|
</template>
|
|
`;
|
|
|
|
// src/polyfills/index.ts
|
|
var EventTarget = class {
|
|
addEventListener() {
|
|
}
|
|
removeEventListener() {
|
|
}
|
|
dispatchEvent(_event) {
|
|
return true;
|
|
}
|
|
};
|
|
if (typeof DocumentFragment === "undefined") {
|
|
class DocumentFragment3 extends EventTarget {
|
|
}
|
|
globalThis.DocumentFragment = DocumentFragment3;
|
|
}
|
|
var HTMLElement = class extends EventTarget {
|
|
};
|
|
var HTMLVideoElement = class extends EventTarget {
|
|
};
|
|
var customElements = {
|
|
get(_name) {
|
|
return void 0;
|
|
},
|
|
define(_name, _constructor, _options) {
|
|
},
|
|
getName(_constructor) {
|
|
return null;
|
|
},
|
|
upgrade(_root) {
|
|
},
|
|
whenDefined(_name) {
|
|
return Promise.resolve(HTMLElement);
|
|
}
|
|
};
|
|
var _detail;
|
|
var CustomEvent2 = class {
|
|
constructor(typeArg, eventInitDict = {}) {
|
|
__privateAdd(this, _detail, 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/classic/index.ts
|
|
var template7 = internalDocument.createElement("template");
|
|
if ("innerHTML" in template7)
|
|
template7.innerHTML = classic_default;
|
|
var _a2, _b;
|
|
var MediaThemeClassic = class extends MediaThemeElement {
|
|
};
|
|
MediaThemeClassic.template = (_b = (_a2 = template7.content) == null ? void 0 : _a2.children) == null ? void 0 : _b[0];
|
|
if (!internalGlobalThis.customElements.get("media-theme-classic")) {
|
|
internalGlobalThis.customElements.define("media-theme-classic", MediaThemeClassic);
|
|
}
|
|
var classic_default2 = MediaThemeClassic;
|
|
return __toCommonJS(classic_exports);
|
|
})();
|