node_modules ignore

This commit is contained in:
2025-05-08 23:43:47 +02:00
parent e19d52f172
commit 4574544c9f
65041 changed files with 10593536 additions and 0 deletions

19
server/node_modules/media-chrome/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,19 @@
Copyright (c) 2020 Mux, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

125
server/node_modules/media-chrome/README.md generated vendored Normal file
View File

@@ -0,0 +1,125 @@
<h1>
<a href="https://media-chrome.org" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/public/media-chrome-logo-dark.svg">
<source media="(prefers-color-scheme: light)" srcset="docs/public/media-chrome-logo-light.svg">
<img alt="Media Chrome Logo" src="docs/public/media-chrome-logo-light.svg">
</picture>
</a>
</h1>
[![NPM Version](https://img.shields.io/npm/v/media-chrome?style=flat-square&color=informational)](https://www.npmjs.com/package/media-chrome)
[![NPM Downloads](https://img.shields.io/npm/dm/media-chrome?style=flat-square&color=informational&label=npm)](https://www.npmjs.com/package/media-chrome)
[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/media-chrome?style=flat-square&color=informational)](https://www.jsdelivr.com/package/npm/media-chrome)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/media-chrome?style=flat-square&color=informational&label=gzip)](https://bundlephobia.com/result?p=media-chrome)
[![slack](https://img.shields.io/badge/slack-%23media--chrome-pink?style=flat-square&color=informational)](https://www.video-dev.org/)
Your media player's dancing suit. :man_dancing:
Fully customizable media player controls using web components (native custom elements).
- [x] Compatible with any javascript framework (React, Angular, Svelte, etc.)
- [x] Compatible with the `<video>` and `<audio>` elements and [a lot of players](https://www.media-chrome.org/docs/en/media-element#compatible-media-elements) (YouTube, HLS.js, and more)
- [x] Simple HTML to add/remove controls
- [x] Simple CSS to style the controls
_From [Mux](https://mux.com?utm_source=github&utm_medium=social&utm_campaign=media-chrome) and the creator of [Video.js](https://videojs.com/)._
## Documentation
Visit the [official documentation for Media Chrome](https://media-chrome.org/docs) for the latest up-to-date usage instructions.
You can find the [documentation for v0.x of media-chrome here.](https://v0.media-chrome.org/en/get-started)
## Examples
<a href="https://media-chrome.mux.dev/examples/vanilla/" target="_blank">See all of the repo examples in action.</a>
### Video Example
```html
<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@4/+esm"></script>
<media-controller>
<video
slot="media"
src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
crossorigin
>
<track
label="thumbnails"
default
kind="metadata"
src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/storyboard.vtt"
/>
</video>
<media-control-bar>
<media-play-button></media-play-button>
<media-mute-button></media-mute-button>
<media-volume-range></media-volume-range>
<media-time-range></media-time-range>
<media-pip-button></media-pip-button>
<media-fullscreen-button></media-fullscreen-button>
</media-control-bar>
</media-controller>
```
#### Results (<a href="https://codepen.io/heff/pen/ZEGdBzN?editors=1000" target="_blank">Try the CodePen example</a>)
<a href="https://codepen.io/heff/pen/ZEGdBzN?editors=1000" target="_blank">
<img width="890" alt="Media Chrome Video Player Demo" src="./docs/public/assets/media-chrome-video-player.jpeg">
</a>
### Audio Example
```html
<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@4/+esm"></script>
<media-controller audio>
<audio
slot="media"
src="https://stream.mux.com/O4h5z00885HEucNNa1rV02wZapcGp01FXXoJd35AHmGX7g/audio.m4a"
></audio>
<media-control-bar>
<media-play-button></media-play-button>
<media-time-display showduration></media-time-display>
<media-time-range></media-time-range>
<media-playback-rate-button></media-playback-rate-button>
<media-mute-button></media-mute-button>
<media-volume-range></media-volume-range>
</media-control-bar>
</media-controller>
```
#### Results (<a href="https://codepen.io/heff/pen/wvdyNWd?editors=1000" target="_blank">Try the CodePen example</a>)
<a href="https://codepen.io/heff/pen/wvdyNWd?editors=1000" target="_blank">
<img width="410" alt="Media Chrome Audio Player Demo" src="./docs/public/assets/media-chrome-audio-player.png">
</a>
## Use with React
While you technically can use Media Chrome elements directly with React, it can sometimes be a bit clunky to work with Web Components in React, and some things just don't feel idiomatic to the framework (for example: having to use `class=` instead of `className=`, see [React's official docs regarding web components](https://react.dev/reference/react-dom/components#custom-html-elements) for more details). To help with this, we've published some React wrapper components for all of our core Elements. You can read up on using them [here](https://www.media-chrome.org/docs/en/react/get-started).
## Why?
More often than not web designers and developers just use the default media player controls, even when creating a beautiful custom design theme. It's hard not to.
- Web browsers have built-in media controls that can't easily be customized and look different in every browser.
- Social sites like Youtube, Vimeo, and SoundCloud only let you customize small details of the player, like primary button color.
- Media controls are complex and hard to build from scratch. Open source players like Video.js and JW Player help, but require you to learn proprietary JS APIs, and can be difficult to use with popular Javascript frameworks.
It should be easier... `<media-chrome>` is an attempt at solving that.
## Why now?
Web components. @heff spoke about [the potential of web components for video](https://youtu.be/TwnygSWmToc?t=859) at Demuxed 2015, and [again in 2020](https://www.youtube.com/watch?v=qMcNDWyRw20). They allow us to extend the browser's base HTML functionality, meaning we can now build media player controls as simple HTML tags that:
- Can be used like any native HTML tag in HTML, Javascript, and CSS (unleash your designer)
- Are compatible by default with Javascript frameworks (React, Angular, Svelte)
- Can be used across players when using multiple in the same site, e.g Youtube & `<video>`. (Could even be used by players as their own built-in controls)
## Core Concepts
- [Design Principles](https://www.media-chrome.org/docs/en/design-principles)
- [Architecture](https://www.media-chrome.org/docs/en/architecture)

3
server/node_modules/media-chrome/dist/all.d.ts generated vendored Normal file
View File

@@ -0,0 +1,3 @@
export * from './index.js';
export * from './menu/index.js';
export * from './media-theme-element.js';

3
server/node_modules/media-chrome/dist/all.js generated vendored Normal file
View File

@@ -0,0 +1,3 @@
export * from "./index.js";
export * from "./menu/index.js";
export * from "./media-theme-element.js";

19
server/node_modules/media-chrome/dist/cjs/all.js generated vendored Normal file
View File

@@ -0,0 +1,19 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var all_exports = {};
module.exports = __toCommonJS(all_exports);
__reExport(all_exports, require("./index.js"), module.exports);
__reExport(all_exports, require("./menu/index.js"), module.exports);
__reExport(all_exports, require("./media-theme-element.js"), module.exports);

198
server/node_modules/media-chrome/dist/cjs/constants.js generated vendored Normal file
View File

@@ -0,0 +1,198 @@
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 constants_exports = {};
__export(constants_exports, {
AttributeToStateChangeEventMap: () => AttributeToStateChangeEventMap,
AvailabilityStates: () => AvailabilityStates,
MediaStateChangeEvents: () => MediaStateChangeEvents,
MediaStateReceiverAttributes: () => MediaStateReceiverAttributes,
MediaUIAttributes: () => MediaUIAttributes,
MediaUIEvents: () => MediaUIEvents,
MediaUIProps: () => MediaUIProps,
PointerTypes: () => PointerTypes,
ReadyStates: () => ReadyStates,
StateChangeEventToAttributeMap: () => StateChangeEventToAttributeMap,
StreamTypes: () => StreamTypes,
TextTrackKinds: () => TextTrackKinds,
TextTrackModes: () => TextTrackModes,
VolumeLevels: () => VolumeLevels,
WebkitPresentationModes: () => WebkitPresentationModes
});
module.exports = __toCommonJS(constants_exports);
const 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"
};
const MediaStateReceiverAttributes = {
MEDIA_CHROME_ATTRIBUTES: "mediachromeattributes",
MEDIA_CONTROLLER: "mediacontroller"
};
const 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"
};
const MediaUIPropsEntries = Object.entries(
MediaUIProps
);
const MediaUIAttributes = MediaUIPropsEntries.reduce(
(dictObj, [key, propName]) => {
dictObj[key] = propName.toLowerCase();
return dictObj;
},
{}
);
const AdditionalStateChangeEvents = {
USER_INACTIVE: "userinactivechange",
BREAKPOINTS_CHANGE: "breakpointchange",
BREAKPOINTS_COMPUTED: "breakpointscomputed"
};
const MediaStateChangeEvents = MediaUIPropsEntries.reduce(
(dictObj, [key, propName]) => {
dictObj[key] = propName.toLowerCase();
return dictObj;
},
{ ...AdditionalStateChangeEvents }
);
const StateChangeEventToAttributeMap = Object.entries(
MediaStateChangeEvents
).reduce(
(mapObj, [key, eventType]) => {
const attrName = MediaUIAttributes[key];
if (attrName) {
mapObj[eventType] = attrName;
}
return mapObj;
},
{ userinactivechange: "userinactive" }
);
const AttributeToStateChangeEventMap = Object.entries(
MediaUIAttributes
).reduce(
(mapObj, [key, attrName]) => {
const evtType = MediaStateChangeEvents[key];
if (evtType) {
mapObj[attrName] = evtType;
}
return mapObj;
},
{ userinactive: "userinactivechange" }
);
const TextTrackKinds = {
SUBTITLES: "subtitles",
CAPTIONS: "captions",
DESCRIPTIONS: "descriptions",
CHAPTERS: "chapters",
METADATA: "metadata"
};
const TextTrackModes = {
DISABLED: "disabled",
HIDDEN: "hidden",
SHOWING: "showing"
};
const ReadyStates = {
HAVE_NOTHING: 0,
HAVE_METADATA: 1,
HAVE_CURRENT_DATA: 2,
HAVE_FUTURE_DATA: 3,
HAVE_ENOUGH_DATA: 4
};
const PointerTypes = {
MOUSE: "mouse",
PEN: "pen",
TOUCH: "touch"
};
const AvailabilityStates = {
UNAVAILABLE: "unavailable",
UNSUPPORTED: "unsupported"
};
const StreamTypes = {
LIVE: "live",
ON_DEMAND: "on-demand",
UNKNOWN: "unknown"
};
const VolumeLevels = {
HIGH: "high",
MEDIUM: "medium",
LOW: "low",
OFF: "off"
};
const WebkitPresentationModes = {
INLINE: "inline",
FULLSCREEN: "fullscreen",
PICTURE_IN_PICTURE: "picture-in-picture"
};

View File

View File

@@ -0,0 +1,418 @@
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 media_clip_selector_exports = {};
__export(media_clip_selector_exports, {
default: () => media_clip_selector_default
});
module.exports = __toCommonJS(media_clip_selector_exports);
var import_server_safe_globals = require("../../utils/server-safe-globals.js");
var import_constants = require("../../constants.js");
const template = import_server_safe_globals.document.createElement("template");
const HANDLE_W = 8;
const Z = {
100: 100,
200: 200,
300: 300
};
function lockBetweenZeroAndOne(num) {
return Math.max(0, Math.min(1, num));
}
template.innerHTML = `
<style>
#selectorContainer {
background-color: transparent;
height: 44px;
width: 100%;
display: flex;
position: relative;
}
#timeline {
width: 100%;
height: 10px;
background: #ccc;
position: absolute;
top: 16px;
z-index: ${Z["100"]};
}
#startHandle, #endHandle {
cursor: pointer;
height: 80%;
width: ${HANDLE_W}px;
border-radius: 4px;
background-color: royalblue;
}
#playhead {
height: 100%;
width: 3px;
background-color: #aaa;
position: absolute;
display: none;
z-index: ${Z["300"]};
}
#selection {
display: flex;
z-index: ${Z["200"]};
width: 25%;
height: 100%;
align-items: center;
}
#leftTrim {
width: 25%;
}
#spacer {
flex: 1;
background-color: cornflowerblue;
height: 40%;
}
#thumbnailContainer {
display: none;
position: absolute;
top: 0;
}
media-preview-thumbnail {
position: absolute;
bottom: 10px;
border: 2px solid #fff;
border-radius: 2px;
background-color: #000;
width: 160px;
height: 90px;
/* Negative offset of half to center on the handle */
margin-left: -80px;
}
/* Can't get this working. Trying a downward triangle. */
/* media-preview-thumbnail::after {
content: "";
display: block;
width: 300px;
height: 300px;
margin: 100px;
background-color: #ff0;
} */
:host(:hover) #thumbnailContainer.enabled {
display: block;
animation: fadeIn ease 0.5s;
}
@keyframes fadeIn {
0% {
/* transform-origin: bottom center; */
/* transform: scale(0.7); */
margin-top: 10px;
opacity: 0;
}
100% {
/* transform-origin: bottom center; */
/* transform: scale(1); */
margin-top: 0;
opacity: 1;
}
}
</style>
<div id="thumbnailContainer">
<media-preview-thumbnail></media-preview-thumbnail>
</div>
<div id="selectorContainer">
<div id="timeline"></div>
<div id="playhead"></div>
<div id="leftTrim"></div>
<div id="selection">
<div id="startHandle"></div>
<div id="spacer"></div>
<div id="endHandle"></div>
</div>
</div>
`;
class MediaClipSelector extends import_server_safe_globals.globalThis.HTMLElement {
static get observedAttributes() {
return [
"thumbnails",
import_constants.MediaUIAttributes.MEDIA_DURATION,
import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME
];
}
constructor() {
var _a, _b, _c;
super();
if (!this.shadowRoot) {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
this.draggingEl = null;
this.wrapper = this.shadowRoot.querySelector("#selectorContainer");
this.selection = this.shadowRoot.querySelector("#selection");
this.playhead = this.shadowRoot.querySelector("#playhead");
this.leftTrim = this.shadowRoot.querySelector("#leftTrim");
this.spacerFirst = this.shadowRoot.querySelector("#spacerFirst");
this.startHandle = this.shadowRoot.querySelector("#startHandle");
this.spacerMiddle = this.shadowRoot.querySelector("#spacerMiddle");
this.endHandle = this.shadowRoot.querySelector("#endHandle");
this.spacerLast = this.shadowRoot.querySelector("#spacerLast");
this._clickHandler = this.handleClick.bind(this);
this._dragStart = this.dragStart.bind(this);
this._dragEnd = this.dragEnd.bind(this);
this._drag = this.drag.bind(this);
this.wrapper.addEventListener("click", this._clickHandler, false);
this.wrapper.addEventListener("touchstart", this._dragStart, false);
(_a = import_server_safe_globals.globalThis.window) == null ? void 0 : _a.addEventListener("touchend", this._dragEnd, false);
this.wrapper.addEventListener("touchmove", this._drag, false);
this.wrapper.addEventListener("mousedown", this._dragStart, false);
(_b = import_server_safe_globals.globalThis.window) == null ? void 0 : _b.addEventListener("mouseup", this._dragEnd, false);
(_c = import_server_safe_globals.globalThis.window) == null ? void 0 : _c.addEventListener("mousemove", this._drag, false);
this.enableThumbnails();
}
get mediaDuration() {
return +this.getAttribute(import_constants.MediaUIAttributes.MEDIA_DURATION);
}
get mediaCurrentTime() {
return +this.getAttribute(import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME);
}
/*
* pass in a mouse event (evt.clientX)
* calculates the percentage progress based on the bounding rectang
* converts the percentage progress into a duration in seconds
*/
getPlayheadBasedOnMouseEvent(evt) {
const duration = this.mediaDuration;
if (!duration)
return;
const mousePercent = lockBetweenZeroAndOne(this.getMousePercent(evt));
return mousePercent * duration;
}
getXPositionFromMouse(evt) {
let clientX;
if (["touchstart", "touchmove"].includes(evt.type)) {
clientX = evt.touches[0].clientX;
}
return clientX || evt.clientX;
}
getMousePercent(evt) {
const rangeRect = this.wrapper.getBoundingClientRect();
const mousePercent = (this.getXPositionFromMouse(evt) - rangeRect.left) / rangeRect.width;
return lockBetweenZeroAndOne(mousePercent);
}
dragStart(evt) {
if (evt.target === this.startHandle) {
this.draggingEl = this.startHandle;
}
if (evt.target === this.endHandle) {
this.draggingEl = this.endHandle;
}
this.initialX = this.getXPositionFromMouse(evt);
}
dragEnd() {
this.initialX = null;
this.draggingEl = null;
}
setSelectionWidth(selectionPercent, fullTimelineWidth) {
let percent = selectionPercent;
const minWidthPx = HANDLE_W * 3;
const minWidthPercent = lockBetweenZeroAndOne(
minWidthPx / fullTimelineWidth
);
if (percent < minWidthPercent) {
percent = minWidthPercent;
}
this.selection.style.width = `${percent * 100}%`;
}
drag(evt) {
if (!this.draggingEl) {
return;
}
evt.preventDefault();
const rangeRect = this.wrapper.getBoundingClientRect();
const fullTimelineWidth = rangeRect.width;
const endXPosition = this.getXPositionFromMouse(evt);
const xDelta = endXPosition - this.initialX;
const percent = this.getMousePercent(evt);
const selectionW = this.selection.getBoundingClientRect().width;
if (this.draggingEl === this.startHandle) {
this.initialX = this.getXPositionFromMouse(evt);
this.leftTrim.style.width = `${percent * 100}%`;
const selectionPercent = lockBetweenZeroAndOne(
(selectionW - xDelta) / fullTimelineWidth
);
this.setSelectionWidth(selectionPercent, fullTimelineWidth);
}
if (this.draggingEl === this.endHandle) {
this.initialX = this.getXPositionFromMouse(evt);
const selectionPercent = lockBetweenZeroAndOne(
(selectionW + xDelta) / fullTimelineWidth
);
this.setSelectionWidth(selectionPercent, fullTimelineWidth);
}
this.dispatchUpdate();
}
dispatchUpdate() {
const updateEvent = new CustomEvent("update", {
detail: this.getCurrentClipBounds()
});
this.dispatchEvent(updateEvent);
}
getCurrentClipBounds() {
const rangeRect = this.wrapper.getBoundingClientRect();
const leftTrimRect = this.leftTrim.getBoundingClientRect();
const selectionRect = this.selection.getBoundingClientRect();
const percentStart = lockBetweenZeroAndOne(
leftTrimRect.width / rangeRect.width
);
const percentEnd = lockBetweenZeroAndOne(
(leftTrimRect.width + selectionRect.width) / rangeRect.width
);
return {
startTime: Math.round(percentStart * this.mediaDuration),
endTime: Math.round(percentEnd * this.mediaDuration)
};
}
isTimestampInBounds(timestamp) {
const { startTime, endTime } = this.getCurrentClipBounds();
return startTime <= timestamp && endTime >= timestamp;
}
handleClick(evt) {
const mousePercent = this.getMousePercent(evt);
const timestampForClick = mousePercent * this.mediaDuration;
if (this.isTimestampInBounds(timestampForClick)) {
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(import_constants.MediaUIEvents.MEDIA_SEEK_REQUEST, {
composed: true,
bubbles: true,
detail: timestampForClick
})
);
}
}
mediaCurrentTimeSet() {
const percentComplete = lockBetweenZeroAndOne(
this.mediaCurrentTime / this.mediaDuration
);
this.playhead.style.left = `${percentComplete * 100}%`;
this.playhead.style.display = "block";
if (!this.mediaPaused) {
const { startTime, endTime } = this.getCurrentClipBounds();
if (this.mediaCurrentTime < startTime || this.mediaCurrentTime > endTime) {
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(import_constants.MediaUIEvents.MEDIA_SEEK_REQUEST, {
composed: true,
bubbles: true,
detail: startTime
})
);
}
}
}
mediaUnsetCallback(media) {
var _a, _b;
super.mediaUnsetCallback(media);
this.wrapper.removeEventListener("touchstart", this._dragStart);
this.wrapper.removeEventListener("touchend", this._dragEnd);
this.wrapper.removeEventListener("touchmove", this._drag);
this.wrapper.removeEventListener("mousedown", this._dragStart);
(_a = import_server_safe_globals.globalThis.window) == null ? void 0 : _a.removeEventListener("mouseup", this._dragEnd);
(_b = import_server_safe_globals.globalThis.window) == null ? void 0 : _b.removeEventListener("mousemove", this._drag);
}
/*
* This was copied over from media-time-range, we should have a way of making
* this code shared between the two components
*/
enableThumbnails() {
this.thumbnailPreview = this.shadowRoot.querySelector(
"media-preview-thumbnail"
);
const thumbnailContainer = this.shadowRoot.querySelector(
"#thumbnailContainer"
);
thumbnailContainer.classList.add("enabled");
let mouseMoveHandler;
const trackMouse = () => {
var _a;
mouseMoveHandler = (evt) => {
const duration = this.mediaDuration;
if (!duration)
return;
const rangeRect = this.wrapper.getBoundingClientRect();
const mousePercent = this.getMousePercent(evt);
const leftPadding = rangeRect.left - this.getBoundingClientRect().left;
const thumbnailLeft = leftPadding + mousePercent * rangeRect.width;
this.thumbnailPreview.style.left = `${thumbnailLeft}px`;
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(import_constants.MediaUIEvents.MEDIA_PREVIEW_REQUEST, {
composed: true,
bubbles: true,
detail: mousePercent * duration
})
);
};
(_a = import_server_safe_globals.globalThis.window) == null ? void 0 : _a.addEventListener("mousemove", mouseMoveHandler, false);
};
const stopTrackingMouse = () => {
var _a;
(_a = import_server_safe_globals.globalThis.window) == null ? void 0 : _a.removeEventListener("mousemove", mouseMoveHandler);
};
let rangeEntered = false;
const rangeMouseMoveHander = () => {
var _a;
if (!rangeEntered && this.mediaDuration) {
rangeEntered = true;
this.thumbnailPreview.style.display = "block";
trackMouse();
const offRangeHandler = (evt) => {
var _a2;
if (evt.target != this && !this.contains(evt.target)) {
this.thumbnailPreview.style.display = "none";
(_a2 = import_server_safe_globals.globalThis.window) == null ? void 0 : _a2.removeEventListener(
"mousemove",
offRangeHandler
);
rangeEntered = false;
stopTrackingMouse();
}
};
(_a = import_server_safe_globals.globalThis.window) == null ? void 0 : _a.addEventListener(
"mousemove",
offRangeHandler,
false
);
}
if (!this.mediaDuration) {
this.thumbnailPreview.style.display = "none";
}
};
this.addEventListener("mousemove", rangeMouseMoveHander, false);
}
disableThumbnails() {
const thumbnailContainer = this.shadowRoot.querySelector(
"#thumbnailContainer"
);
thumbnailContainer.classList.remove("enabled");
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-clip-selector")) {
import_server_safe_globals.globalThis.customElements.define("media-clip-selector", MediaClipSelector);
}
var media_clip_selector_default = MediaClipSelector;

91
server/node_modules/media-chrome/dist/cjs/index.js generated vendored Normal file
View File

@@ -0,0 +1,91 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var js_exports = {};
__export(js_exports, {
MediaAirplayButton: () => import_media_airplay_button.default,
MediaCaptionsButton: () => import_media_captions_button.default,
MediaCastButton: () => import_media_cast_button.default,
MediaChromeButton: () => import_media_chrome_button.default,
MediaChromeDialog: () => import_media_chrome_dialog.default,
MediaChromeRange: () => import_media_chrome_range.default,
MediaControlBar: () => import_media_control_bar.default,
MediaController: () => import_media_controller.default,
MediaDurationDisplay: () => import_media_duration_display.default,
MediaFullscreenButton: () => import_media_fullscreen_button.default,
MediaGestureReceiver: () => import_media_gesture_receiver.default,
MediaLiveButton: () => import_media_live_button.default,
MediaLoadingIndicator: () => import_media_loading_indicator.default,
MediaMuteButton: () => import_media_mute_button.default,
MediaPipButton: () => import_media_pip_button.default,
MediaPlayButton: () => import_media_play_button.default,
MediaPlaybackRateButton: () => import_media_playback_rate_button.default,
MediaPosterImage: () => import_media_poster_image.default,
MediaPreviewChapterDisplay: () => import_media_preview_chapter_display.default,
MediaPreviewThumbnail: () => import_media_preview_thumbnail.default,
MediaPreviewTimeDisplay: () => import_media_preview_time_display.default,
MediaSeekBackwardButton: () => import_media_seek_backward_button.default,
MediaSeekForwardButton: () => import_media_seek_forward_button.default,
MediaTimeDisplay: () => import_media_time_display.default,
MediaTimeRange: () => import_media_time_range.default,
MediaTooltip: () => import_media_tooltip.default,
MediaVolumeRange: () => import_media_volume_range.default,
constants: () => constants,
labels: () => import_labels.default,
timeUtils: () => timeUtils
});
module.exports = __toCommonJS(js_exports);
var constants = __toESM(require("./constants.js"), 1);
var import_labels = __toESM(require("./labels/labels.js"), 1);
var timeUtils = __toESM(require("./utils/time.js"), 1);
var import_media_controller = __toESM(require("./media-controller.js"), 1);
var import_media_airplay_button = __toESM(require("./media-airplay-button.js"), 1);
var import_media_captions_button = __toESM(require("./media-captions-button.js"), 1);
var import_media_cast_button = __toESM(require("./media-cast-button.js"), 1);
var import_media_chrome_button = __toESM(require("./media-chrome-button.js"), 1);
var import_media_chrome_dialog = __toESM(require("./media-chrome-dialog.js"), 1);
var import_media_chrome_range = __toESM(require("./media-chrome-range.js"), 1);
var import_media_control_bar = __toESM(require("./media-control-bar.js"), 1);
var import_media_duration_display = __toESM(require("./media-duration-display.js"), 1);
var import_media_fullscreen_button = __toESM(require("./media-fullscreen-button.js"), 1);
var import_media_gesture_receiver = __toESM(require("./media-gesture-receiver.js"), 1);
var import_media_live_button = __toESM(require("./media-live-button.js"), 1);
var import_media_loading_indicator = __toESM(require("./media-loading-indicator.js"), 1);
var import_media_mute_button = __toESM(require("./media-mute-button.js"), 1);
var import_media_pip_button = __toESM(require("./media-pip-button.js"), 1);
var import_media_playback_rate_button = __toESM(require("./media-playback-rate-button.js"), 1);
var import_media_play_button = __toESM(require("./media-play-button.js"), 1);
var import_media_poster_image = __toESM(require("./media-poster-image.js"), 1);
var import_media_preview_chapter_display = __toESM(require("./media-preview-chapter-display.js"), 1);
var import_media_preview_thumbnail = __toESM(require("./media-preview-thumbnail.js"), 1);
var import_media_preview_time_display = __toESM(require("./media-preview-time-display.js"), 1);
var import_media_seek_backward_button = __toESM(require("./media-seek-backward-button.js"), 1);
var import_media_seek_forward_button = __toESM(require("./media-seek-forward-button.js"), 1);
var import_media_time_display = __toESM(require("./media-time-display.js"), 1);
var import_media_time_range = __toESM(require("./media-time-range.js"), 1);
var import_media_tooltip = __toESM(require("./media-tooltip.js"), 1);
var import_media_volume_range = __toESM(require("./media-volume-range.js"), 1);

View File

@@ -0,0 +1,83 @@
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 labels_exports = {};
__export(labels_exports, {
default: () => labels_default,
nouns: () => nouns,
tooltipLabels: () => tooltipLabels,
verbs: () => verbs
});
module.exports = __toCommonJS(labels_exports);
const 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"
};
const 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`
};
const 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
};

View File

@@ -0,0 +1,121 @@
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 media_airplay_button_exports = {};
__export(media_airplay_button_exports, {
default: () => media_airplay_button_default
});
module.exports = __toCommonJS(media_airplay_button_exports);
var import_media_chrome_button = require("./media-chrome-button.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var import_element_utils = require("./utils/element-utils.js");
const airplayIcon = `<svg aria-hidden="true" viewBox="0 0 26 24">
<path d="M22.13 3H3.87a.87.87 0 0 0-.87.87v13.26a.87.87 0 0 0 .87.87h3.4L9 16H5V5h16v11h-4l1.72 2h3.4a.87.87 0 0 0 .87-.87V3.87a.87.87 0 0 0-.86-.87Zm-8.75 11.44a.5.5 0 0 0-.76 0l-4.91 5.73a.5.5 0 0 0 .38.83h9.82a.501.501 0 0 0 .38-.83l-4.91-5.73Z"/>
</svg>
`;
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = /*html*/
`
<style>
:host([${import_constants.MediaUIAttributes.MEDIA_IS_AIRPLAYING}]) slot[name=icon] slot:not([name=exit]) {
display: none !important;
}
${/* Double negative, but safer if display doesn't equal 'block' */
""}
:host(:not([${import_constants.MediaUIAttributes.MEDIA_IS_AIRPLAYING}])) slot[name=icon] slot:not([name=enter]) {
display: none !important;
}
:host([${import_constants.MediaUIAttributes.MEDIA_IS_AIRPLAYING}]) slot[name=tooltip-enter],
:host(:not([${import_constants.MediaUIAttributes.MEDIA_IS_AIRPLAYING}])) slot[name=tooltip-exit] {
display: none;
}
</style>
<slot name="icon">
<slot name="enter">${airplayIcon}</slot>
<slot name="exit">${airplayIcon}</slot>
</slot>
`;
const tooltipContent = (
/*html*/
`
<slot name="tooltip-enter">${import_labels.tooltipLabels.ENTER_AIRPLAY}</slot>
<slot name="tooltip-exit">${import_labels.tooltipLabels.EXIT_AIRPLAY}</slot>
`
);
const updateAriaLabel = (el) => {
const label = el.mediaIsAirplaying ? import_labels.verbs.EXIT_AIRPLAY() : import_labels.verbs.ENTER_AIRPLAY();
el.setAttribute("aria-label", label);
};
class MediaAirplayButton extends import_media_chrome_button.MediaChromeButton {
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_IS_AIRPLAYING,
import_constants.MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE
];
}
constructor(options = {}) {
super({ slotTemplate, tooltipContent, ...options });
}
connectedCallback() {
super.connectedCallback();
updateAriaLabel(this);
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === import_constants.MediaUIAttributes.MEDIA_IS_AIRPLAYING) {
updateAriaLabel(this);
}
}
/**
* Are we currently airplaying
*/
get mediaIsAirplaying() {
return (0, import_element_utils.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_IS_AIRPLAYING);
}
set mediaIsAirplaying(value) {
(0, import_element_utils.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_IS_AIRPLAYING, value);
}
/**
* Airplay unavailability state
*/
get mediaAirplayUnavailable() {
return (0, import_element_utils.getStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE);
}
set mediaAirplayUnavailable(value) {
(0, import_element_utils.setStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE, value);
}
handleClick() {
const evt = new import_server_safe_globals.globalThis.CustomEvent(
import_constants.MediaUIEvents.MEDIA_AIRPLAY_REQUEST,
{
composed: true,
bubbles: true
}
);
this.dispatchEvent(evt);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-airplay-button")) {
import_server_safe_globals.globalThis.customElements.define("media-airplay-button", MediaAirplayButton);
}
var media_airplay_button_default = MediaAirplayButton;

View File

@@ -0,0 +1,147 @@
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 media_captions_button_exports = {};
__export(media_captions_button_exports, {
MediaCaptionsButton: () => MediaCaptionsButton,
default: () => media_captions_button_default
});
module.exports = __toCommonJS(media_captions_button_exports);
var import_media_chrome_button = require("./media-chrome-button.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var import_captions = require("./utils/captions.js");
const 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>`;
const 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>`;
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.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-checked="true"]) slot[name=tooltip-enable],
:host(:not([aria-checked="true"])) slot[name=tooltip-disable] {
display: none;
}
</style>
<slot name="icon">
<slot name="on">${ccIconOn}</slot>
<slot name="off">${ccIconOff}</slot>
</slot>
`;
const tooltipContent = (
/*html*/
`
<slot name="tooltip-enable">${import_labels.tooltipLabels.ENABLE_CAPTIONS}</slot>
<slot name="tooltip-disable">${import_labels.tooltipLabels.DISABLE_CAPTIONS}</slot>
`
);
const updateAriaChecked = (el) => {
el.setAttribute("aria-checked", (0, import_captions.areSubsOn)(el).toString());
};
class MediaCaptionsButton extends import_media_chrome_button.MediaChromeButton {
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_SUBTITLES_LIST,
import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
];
}
constructor(options = {}) {
super({ slotTemplate, tooltipContent, ...options });
this._captionsReady = false;
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("role", "switch");
this.setAttribute("aria-label", import_labels.nouns.CLOSED_CAPTIONS());
updateAriaChecked(this);
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING) {
updateAriaChecked(this);
}
}
/**
* An array of TextTrack-like objects.
* Objects must have the properties: kind, language, and label.
*/
get mediaSubtitlesList() {
return getSubtitlesListAttr(this, import_constants.MediaUIAttributes.MEDIA_SUBTITLES_LIST);
}
set mediaSubtitlesList(list) {
setSubtitlesListAttr(this, import_constants.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,
import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
);
}
set mediaSubtitlesShowing(list) {
setSubtitlesListAttr(this, import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, list);
}
handleClick() {
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(import_constants.MediaUIEvents.MEDIA_TOGGLE_SUBTITLES_REQUEST, {
composed: true,
bubbles: true
})
);
}
}
const getSubtitlesListAttr = (el, attrName) => {
const attrVal = el.getAttribute(attrName);
return attrVal ? (0, import_captions.parseTextTracksStr)(attrVal) : [];
};
const setSubtitlesListAttr = (el, attrName, list) => {
if (!(list == null ? void 0 : list.length)) {
el.removeAttribute(attrName);
return;
}
const newValStr = (0, import_captions.stringifyTextTrackList)(list);
const oldVal = el.getAttribute(attrName);
if (oldVal === newValStr)
return;
el.setAttribute(attrName, newValStr);
};
if (!import_server_safe_globals.globalThis.customElements.get("media-captions-button")) {
import_server_safe_globals.globalThis.customElements.define(
"media-captions-button",
MediaCaptionsButton
);
}
var media_captions_button_default = MediaCaptionsButton;

View File

@@ -0,0 +1,115 @@
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 media_cast_button_exports = {};
__export(media_cast_button_exports, {
default: () => media_cast_button_default
});
module.exports = __toCommonJS(media_cast_button_exports);
var import_media_chrome_button = require("./media-chrome-button.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var import_element_utils = require("./utils/element-utils.js");
const enterIcon = `<svg aria-hidden="true" viewBox="0 0 24 24"><g><path class="cast_caf_icon_arch0" d="M1,18 L1,21 L4,21 C4,19.3 2.66,18 1,18 L1,18 Z"/><path class="cast_caf_icon_arch1" d="M1,14 L1,16 C3.76,16 6,18.2 6,21 L8,21 C8,17.13 4.87,14 1,14 L1,14 Z"/><path class="cast_caf_icon_arch2" d="M1,10 L1,12 C5.97,12 10,16.0 10,21 L12,21 C12,14.92 7.07,10 1,10 L1,10 Z"/><path class="cast_caf_icon_box" d="M21,3 L3,3 C1.9,3 1,3.9 1,5 L1,8 L3,8 L3,5 L21,5 L21,19 L14,19 L14,21 L21,21 C22.1,21 23,20.1 23,19 L23,5 C23,3.9 22.1,3 21,3 L21,3 Z"/></g></svg>`;
const exitIcon = `<svg aria-hidden="true" viewBox="0 0 24 24"><g><path class="cast_caf_icon_arch0" d="M1,18 L1,21 L4,21 C4,19.3 2.66,18 1,18 L1,18 Z"/><path class="cast_caf_icon_arch1" d="M1,14 L1,16 C3.76,16 6,18.2 6,21 L8,21 C8,17.13 4.87,14 1,14 L1,14 Z"/><path class="cast_caf_icon_arch2" d="M1,10 L1,12 C5.97,12 10,16.0 10,21 L12,21 C12,14.92 7.07,10 1,10 L1,10 Z"/><path class="cast_caf_icon_box" d="M21,3 L3,3 C1.9,3 1,3.9 1,5 L1,8 L3,8 L3,5 L21,5 L21,19 L14,19 L14,21 L21,21 C22.1,21 23,20.1 23,19 L23,5 C23,3.9 22.1,3 21,3 L21,3 Z"/><path class="cast_caf_icon_boxfill" d="M5,7 L5,8.63 C8,8.6 13.37,14 13.37,17 L19,17 L19,7 Z"/></g></svg>`;
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = /*html*/
`
<style>
:host([${import_constants.MediaUIAttributes.MEDIA_IS_CASTING}]) slot[name=icon] slot:not([name=exit]) {
display: none !important;
}
${/* Double negative, but safer if display doesn't equal 'block' */
""}
:host(:not([${import_constants.MediaUIAttributes.MEDIA_IS_CASTING}])) slot[name=icon] slot:not([name=enter]) {
display: none !important;
}
:host([${import_constants.MediaUIAttributes.MEDIA_IS_CASTING}]) slot[name=tooltip-enter],
:host(:not([${import_constants.MediaUIAttributes.MEDIA_IS_CASTING}])) slot[name=tooltip-exit] {
display: none;
}
</style>
<slot name="icon">
<slot name="enter">${enterIcon}</slot>
<slot name="exit">${exitIcon}</slot>
</slot>
`;
const tooltipContent = (
/*html*/
`
<slot name="tooltip-enter">${import_labels.tooltipLabels.START_CAST}</slot>
<slot name="tooltip-exit">${import_labels.tooltipLabels.STOP_CAST}</slot>
`
);
const updateAriaLabel = (el) => {
const label = el.mediaIsCasting ? import_labels.verbs.EXIT_CAST() : import_labels.verbs.ENTER_CAST();
el.setAttribute("aria-label", label);
};
class MediaCastButton extends import_media_chrome_button.MediaChromeButton {
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_IS_CASTING,
import_constants.MediaUIAttributes.MEDIA_CAST_UNAVAILABLE
];
}
constructor(options = {}) {
super({ slotTemplate, tooltipContent, ...options });
}
connectedCallback() {
super.connectedCallback();
updateAriaLabel(this);
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === import_constants.MediaUIAttributes.MEDIA_IS_CASTING) {
updateAriaLabel(this);
}
}
/**
* @type {boolean} Are we currently casting
*/
get mediaIsCasting() {
return (0, import_element_utils.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_IS_CASTING);
}
set mediaIsCasting(value) {
(0, import_element_utils.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_IS_CASTING, value);
}
/**
* @type {string | undefined} Cast unavailability state
*/
get mediaCastUnavailable() {
return (0, import_element_utils.getStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_CAST_UNAVAILABLE);
}
set mediaCastUnavailable(value) {
(0, import_element_utils.setStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_CAST_UNAVAILABLE, value);
}
handleClick() {
const eventName = this.mediaIsCasting ? import_constants.MediaUIEvents.MEDIA_EXIT_CAST_REQUEST : import_constants.MediaUIEvents.MEDIA_ENTER_CAST_REQUEST;
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(eventName, { composed: true, bubbles: true })
);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-cast-button")) {
import_server_safe_globals.globalThis.customElements.define("media-cast-button", MediaCastButton);
}
var media_cast_button_default = MediaCastButton;

View File

@@ -0,0 +1,309 @@
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;
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var media_chrome_button_exports = {};
__export(media_chrome_button_exports, {
MediaChromeButton: () => MediaChromeButton,
default: () => media_chrome_button_default
});
module.exports = __toCommonJS(media_chrome_button_exports);
var import_constants = require("./constants.js");
var import_element_utils = require("./utils/element-utils.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var _mediaController, _clickListener, _positionTooltip, _keyupListener, _keydownListener, _setupTooltip, setupTooltip_fn;
const Attributes = {
TOOLTIP_PLACEMENT: "tooltipplacement"
};
const template = import_server_safe_globals.document.createElement("template");
template.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>
`;
class MediaChromeButton extends import_server_safe_globals.globalThis.HTMLElement {
constructor(options = {}) {
var _a;
super();
// Called when we know the tooltip is ready / defined
__privateAdd(this, _setupTooltip);
__privateAdd(this, _mediaController, void 0);
this.preventClick = false;
this.tooltipEl = null;
this.tooltipContent = "";
__privateAdd(this, _clickListener, (e) => {
if (!this.preventClick) {
this.handleClick(e);
}
setTimeout(__privateGet(this, _positionTooltip), 0);
});
__privateAdd(this, _positionTooltip, () => {
var _a, _b;
(_b = (_a = this.tooltipEl) == null ? void 0 : _a.updateXOffset) == null ? void 0 : _b.call(_a);
});
// NOTE: There are definitely some "false positive" cases with multi-key pressing,
// but this should be good enough for most use cases.
__privateAdd(this, _keyupListener, (e) => {
const { key } = e;
if (!this.keysUsed.includes(key)) {
this.removeEventListener("keyup", __privateGet(this, _keyupListener));
return;
}
if (!this.preventClick) {
this.handleClick(e);
}
});
__privateAdd(this, _keydownListener, (e) => {
const { metaKey, altKey, key } = e;
if (metaKey || altKey || !this.keysUsed.includes(key)) {
this.removeEventListener("keyup", __privateGet(this, _keyupListener));
return;
}
this.addEventListener("keyup", __privateGet(this, _keyupListener), { once: true });
});
if (!this.shadowRoot) {
this.attachShadow({ mode: "open" });
const buttonHTML = template.content.cloneNode(true);
this.nativeEl = buttonHTML;
let slotTemplate = options.slotTemplate;
if (!slotTemplate) {
slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = `<slot>${options.defaultContent || ""}</slot>`;
}
if (options.tooltipContent) {
buttonHTML.querySelector('slot[name="tooltip-content"]').innerHTML = (_a = options.tooltipContent) != null ? _a : "";
this.tooltipContent = options.tooltipContent;
}
this.nativeEl.appendChild(slotTemplate.content.cloneNode(true));
this.shadowRoot.appendChild(buttonHTML);
}
this.tooltipEl = this.shadowRoot.querySelector("media-tooltip");
}
static get observedAttributes() {
return [
"disabled",
Attributes.TOOLTIP_PLACEMENT,
import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER
];
}
enable() {
this.addEventListener("click", __privateGet(this, _clickListener));
this.addEventListener("keydown", __privateGet(this, _keydownListener));
this.tabIndex = 0;
}
disable() {
this.removeEventListener("click", __privateGet(this, _clickListener));
this.removeEventListener("keydown", __privateGet(this, _keydownListener));
this.removeEventListener("keyup", __privateGet(this, _keyupListener));
this.tabIndex = -1;
}
attributeChangedCallback(attrName, oldValue, newValue) {
var _a, _b, _c, _d, _e;
if (attrName === import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
if (oldValue) {
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
}
if (newValue && this.isConnected) {
__privateSet(this, _mediaController, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
(_e = (_d = __privateGet(this, _mediaController)) == 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 === Attributes.TOOLTIP_PLACEMENT && this.tooltipEl && newValue !== oldValue) {
this.tooltipEl.placement = newValue;
}
__privateGet(this, _positionTooltip).call(this);
}
connectedCallback() {
var _a, _b, _c;
const { style } = (0, import_element_utils.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(
import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER
);
if (mediaControllerId) {
__privateSet(
this,
_mediaController,
// @ts-ignore
(_a = this.getRootNode()) == null ? void 0 : _a.getElementById(mediaControllerId)
);
(_c = (_b = __privateGet(this, _mediaController)) == null ? void 0 : _b.associateElement) == null ? void 0 : _c.call(_b, this);
}
import_server_safe_globals.globalThis.customElements.whenDefined("media-tooltip").then(() => __privateMethod(this, _setupTooltip, setupTooltip_fn).call(this));
}
disconnectedCallback() {
var _a, _b;
this.disable();
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
this.removeEventListener("mouseenter", __privateGet(this, _positionTooltip));
this.removeEventListener("focus", __privateGet(this, _positionTooltip));
this.removeEventListener("click", __privateGet(this, _clickListener));
}
get keysUsed() {
return ["Enter", " "];
}
/**
* Get or set tooltip placement
*/
get tooltipPlacement() {
return (0, import_element_utils.getStringAttr)(this, Attributes.TOOLTIP_PLACEMENT);
}
set tooltipPlacement(value) {
(0, import_element_utils.setStringAttr)(this, Attributes.TOOLTIP_PLACEMENT, value);
}
/**
* @abstract
* @argument {Event} e
*/
handleClick(e) {
}
// eslint-disable-line
}
_mediaController = new WeakMap();
_clickListener = new WeakMap();
_positionTooltip = new WeakMap();
_keyupListener = new WeakMap();
_keydownListener = new WeakMap();
_setupTooltip = new WeakSet();
setupTooltip_fn = function() {
this.addEventListener("mouseenter", __privateGet(this, _positionTooltip));
this.addEventListener("focus", __privateGet(this, _positionTooltip));
this.addEventListener("click", __privateGet(this, _clickListener));
const initialPlacement = this.tooltipPlacement;
if (initialPlacement && this.tooltipEl) {
this.tooltipEl.placement = initialPlacement;
}
};
if (!import_server_safe_globals.globalThis.customElements.get("media-chrome-button")) {
import_server_safe_globals.globalThis.customElements.define("media-chrome-button", MediaChromeButton);
}
var media_chrome_button_default = MediaChromeButton;

View File

@@ -0,0 +1,213 @@
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;
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var media_chrome_dialog_exports = {};
__export(media_chrome_dialog_exports, {
Attributes: () => Attributes,
MediaChromeDialog: () => MediaChromeDialog,
default: () => media_chrome_dialog_default
});
module.exports = __toCommonJS(media_chrome_dialog_exports);
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_element_utils = require("./utils/element-utils.js");
var _previouslyFocused, _invokerElement, _handleOpen, handleOpen_fn, _handleClosed, handleClosed_fn, _handleInvoke, handleInvoke_fn, _handleFocusOut, handleFocusOut_fn, _handleKeyDown, handleKeyDown_fn;
const template = import_server_safe_globals.document.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-dialog-background, var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))));
border-radius: var(--media-dialog-border-radius);
border: var(--media-dialog-border, none);
display: var(--media-dialog-display, inline-flex);
transition: var(--media-dialog-transition-in,
visibility 0s,
opacity .2s ease-out,
transform .15s ease-out
) !important;
${/* ^^Prevent transition override by media-container */
""}
visibility: var(--media-dialog-visibility, visible);
opacity: var(--media-dialog-opacity, 1);
transform: var(--media-dialog-transform-in, translateY(0) scale(1));
}
:host([hidden]) {
transition: var(--media-dialog-transition-out,
visibility .15s ease-in,
opacity .15s ease-in,
transform .15s ease-in
) !important;
visibility: var(--media-dialog-hidden-visibility, hidden);
opacity: var(--media-dialog-hidden-opacity, 0);
transform: var(--media-dialog-transform-out, translateY(2px) scale(.99));
pointer-events: none;
}
</style>
<slot></slot>
`;
const Attributes = {
HIDDEN: "hidden",
ANCHOR: "anchor"
};
class MediaChromeDialog extends import_server_safe_globals.globalThis.HTMLElement {
constructor() {
super();
__privateAdd(this, _handleOpen);
__privateAdd(this, _handleClosed);
__privateAdd(this, _handleInvoke);
__privateAdd(this, _handleFocusOut);
__privateAdd(this, _handleKeyDown);
__privateAdd(this, _previouslyFocused, null);
__privateAdd(this, _invokerElement, null);
if (!this.shadowRoot) {
this.attachShadow({ mode: "open" });
this.nativeEl = this.constructor.template.content.cloneNode(true);
this.shadowRoot.append(this.nativeEl);
}
this.addEventListener("invoke", this);
this.addEventListener("focusout", this);
this.addEventListener("keydown", this);
}
static get observedAttributes() {
return [Attributes.HIDDEN, Attributes.ANCHOR];
}
handleEvent(event) {
switch (event.type) {
case "invoke":
__privateMethod(this, _handleInvoke, handleInvoke_fn).call(this, event);
break;
case "focusout":
__privateMethod(this, _handleFocusOut, handleFocusOut_fn).call(this, event);
break;
case "keydown":
__privateMethod(this, _handleKeyDown, handleKeyDown_fn).call(this, event);
break;
}
}
connectedCallback() {
if (!this.role) {
this.role = "dialog";
}
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName === Attributes.HIDDEN && newValue !== oldValue) {
if (this.hidden) {
__privateMethod(this, _handleClosed, handleClosed_fn).call(this);
} else {
__privateMethod(this, _handleOpen, handleOpen_fn).call(this);
}
}
}
focus() {
__privateSet(this, _previouslyFocused, (0, import_element_utils.getActiveElement)());
const focusable = this.querySelector(
'[autofocus], [tabindex]:not([tabindex="-1"]), [role="menu"]'
);
focusable == null ? void 0 : focusable.focus();
}
get keysUsed() {
return ["Escape", "Tab"];
}
}
_previouslyFocused = new WeakMap();
_invokerElement = new WeakMap();
_handleOpen = new WeakSet();
handleOpen_fn = function() {
var _a;
(_a = __privateGet(this, _invokerElement)) == null ? void 0 : _a.setAttribute("aria-expanded", "true");
this.addEventListener("transitionend", () => this.focus(), { once: true });
};
_handleClosed = new WeakSet();
handleClosed_fn = function() {
var _a;
(_a = __privateGet(this, _invokerElement)) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
};
_handleInvoke = new WeakSet();
handleInvoke_fn = function(event) {
__privateSet(this, _invokerElement, event.relatedTarget);
if (!(0, import_element_utils.containsComposedNode)(this, event.relatedTarget)) {
this.hidden = !this.hidden;
}
};
_handleFocusOut = new WeakSet();
handleFocusOut_fn = function(event) {
var _a;
if (!(0, import_element_utils.containsComposedNode)(this, event.relatedTarget)) {
(_a = __privateGet(this, _previouslyFocused)) == null ? void 0 : _a.focus();
if (__privateGet(this, _invokerElement) && __privateGet(this, _invokerElement) !== event.relatedTarget && !this.hidden) {
this.hidden = true;
}
}
};
_handleKeyDown = new WeakSet();
handleKeyDown_fn = function(event) {
var _a, _b, _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 (event.shiftKey) {
(_b = (_a = this.previousElementSibling) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
} else {
(_d = (_c = this.nextElementSibling) == null ? void 0 : _c.focus) == null ? void 0 : _d.call(_c);
}
this.blur();
} else if (key === "Escape") {
(_e = __privateGet(this, _previouslyFocused)) == null ? void 0 : _e.focus();
this.hidden = true;
}
};
MediaChromeDialog.template = template;
if (!import_server_safe_globals.globalThis.customElements.get("media-chrome-dialog")) {
import_server_safe_globals.globalThis.customElements.define("media-chrome-dialog", MediaChromeDialog);
}
var media_chrome_dialog_default = MediaChromeDialog;

View File

@@ -0,0 +1,578 @@
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;
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var media_chrome_range_exports = {};
__export(media_chrome_range_exports, {
MediaChromeRange: () => MediaChromeRange,
default: () => media_chrome_range_default
});
module.exports = __toCommonJS(media_chrome_range_exports);
var import_constants = require("./constants.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_element_utils = require("./utils/element-utils.js");
var import_resize_observer = require("./utils/resize-observer.js");
var _mediaController, _isInputTarget, _startpoint, _endpoint, _cssRules, _segments, _onFocusIn, _onFocusOut, _updateComputedStyles, _updateActiveSegment, updateActiveSegment_fn, _enableUserEvents, enableUserEvents_fn, _disableUserEvents, disableUserEvents_fn, _handlePointerDown, handlePointerDown_fn, _handlePointerEnter, handlePointerEnter_fn, _handlePointerUp, handlePointerUp_fn, _handlePointerLeave, handlePointerLeave_fn, _handlePointerMove, handlePointerMove_fn;
const template = import_server_safe_globals.document.createElement("template");
template.innerHTML = /*html*/
`
<style>
:host {
--_focus-box-shadow: var(--media-focus-box-shadow, inset 0 0 0 2px rgb(27 127 204 / .9));
--_media-range-padding: var(--media-range-padding, var(--media-control-padding, 10px));
box-shadow: var(--_focus-visible-box-shadow, none);
background: var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7)));
height: calc(var(--media-control-height, 24px) + 2 * var(--_media-range-padding));
display: inline-flex;
align-items: center;
${/* Don't horizontal align w/ justify-content! #container can go negative on the x-axis w/ small width. */
""}
vertical-align: middle;
box-sizing: border-box;
position: relative;
width: 100px;
transition: background .15s linear;
cursor: pointer;
pointer-events: auto;
touch-action: none; ${/* Prevent scrolling when dragging on mobile. */
""}
z-index: 1; ${/* Apply z-index to overlap buttons below. */
""}
}
${/* Reset before `outline` on track could be set by a CSS var */
""}
input[type=range]:focus {
outline: 0;
}
input[type=range]:focus::-webkit-slider-runnable-track {
outline: 0;
}
:host(:hover) {
background: var(--media-control-hover-background, rgb(50 50 70 / .7));
}
#leftgap {
padding-left: var(--media-range-padding-left, var(--_media-range-padding));
}
#rightgap {
padding-right: var(--media-range-padding-right, var(--_media-range-padding));
}
#startpoint,
#endpoint {
position: absolute;
}
#endpoint {
right: 0;
}
#container {
${/* Not using the CSS `padding` prop makes it easier for slide open volume ranges so the width can be zero. */
""}
width: var(--media-range-track-width, 100%);
transform: translate(var(--media-range-track-translate-x, 0px), var(--media-range-track-translate-y, 0px));
position: relative;
height: 100%;
display: flex;
align-items: center;
min-width: 40px;
}
#range {
${/* The input range acts as a hover and hit zone for input events. */
""}
display: var(--media-time-range-hover-display, block);
bottom: var(--media-time-range-hover-bottom, -7px);
height: var(--media-time-range-hover-height, max(100% + 7px, 25px));
width: 100%;
position: absolute;
cursor: pointer;
-webkit-appearance: none; ${/* Hides the slider so that custom slider can be made */
""}
-webkit-tap-highlight-color: transparent;
background: transparent; ${/* Otherwise white in Chrome */
""}
margin: 0;
z-index: 1;
}
@media (hover: hover) {
#range {
bottom: var(--media-time-range-hover-bottom, -5px);
height: var(--media-time-range-hover-height, max(100% + 5px, 20px));
}
}
${/* Special styling for WebKit/Blink */
""}
${/* Make thumb width/height small so it has no effect on range click position. */
""}
#range::-webkit-slider-thumb {
-webkit-appearance: none;
background: transparent;
width: .1px;
height: .1px;
}
${/* The thumb is not positioned relative to the track in Firefox */
""}
#range::-moz-range-thumb {
background: transparent;
border: transparent;
width: .1px;
height: .1px;
}
#appearance {
height: var(--media-range-track-height, 4px);
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
position: absolute;
${/* Required for Safari to stop glitching track height on hover */
""}
will-change: transform;
}
#track {
background: var(--media-range-track-background, rgb(255 255 255 / .2));
border-radius: var(--media-range-track-border-radius, 1px);
border: var(--media-range-track-border, none);
outline: var(--media-range-track-outline);
outline-offset: var(--media-range-track-outline-offset);
backdrop-filter: var(--media-range-track-backdrop-filter);
-webkit-backdrop-filter: var(--media-range-track-backdrop-filter);
box-shadow: var(--media-range-track-box-shadow, none);
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
#progress,
#pointer {
position: absolute;
height: 100%;
will-change: width;
}
#progress {
background: var(--media-range-bar-color, var(--media-primary-color, rgb(238 238 238)));
transition: var(--media-range-track-transition);
}
#pointer {
background: var(--media-range-track-pointer-background);
border-right: var(--media-range-track-pointer-border-right);
transition: visibility .25s, opacity .25s;
visibility: hidden;
opacity: 0;
}
@media (hover: hover) {
:host(:hover) #pointer {
transition: visibility .5s, opacity .5s;
visibility: visible;
opacity: 1;
}
}
#thumb {
width: var(--media-range-thumb-width, 10px);
height: var(--media-range-thumb-height, 10px);
margin-left: calc(var(--media-range-thumb-width, 10px) / -2);
border: var(--media-range-thumb-border, none);
border-radius: var(--media-range-thumb-border-radius, 10px);
background: var(--media-range-thumb-background, var(--media-primary-color, rgb(238 238 238)));
box-shadow: var(--media-range-thumb-box-shadow, 1px 1px 1px transparent);
transition: var(--media-range-thumb-transition);
transform: var(--media-range-thumb-transform, none);
opacity: var(--media-range-thumb-opacity, 1);
position: absolute;
left: 0;
cursor: pointer;
}
:host([disabled]) #thumb {
background-color: #777;
}
.segments #appearance {
height: var(--media-range-segment-hover-height, 7px);
}
#track {
clip-path: url(#segments-clipping);
}
#segments {
--segments-gap: var(--media-range-segments-gap, 2px);
position: absolute;
width: 100%;
height: 100%;
}
#segments-clipping {
transform: translateX(calc(var(--segments-gap) / 2));
}
#segments-clipping:empty {
display: none;
}
#segments-clipping rect {
height: var(--media-range-track-height, 4px);
y: calc((var(--media-range-segment-hover-height, 7px) - var(--media-range-track-height, 4px)) / 2);
transition: var(--media-range-segment-transition, transform .1s ease-in-out);
transform: var(--media-range-segment-transform, scaleY(1));
transform-origin: center;
}
</style>
<div id="leftgap"></div>
<div id="container">
<div id="startpoint"></div>
<div id="endpoint"></div>
<div id="appearance">
<div id="track" part="track">
<div id="pointer"></div>
<div id="progress" part="progress"></div>
</div>
<div id="thumb" part="thumb"></div>
<svg id="segments"><clipPath id="segments-clipping"></clipPath></svg>
</div>
<input id="range" type="range" min="0" max="1" step="any" value="0">
</div>
<div id="rightgap"></div>
`;
class MediaChromeRange extends import_server_safe_globals.globalThis.HTMLElement {
constructor() {
super();
__privateAdd(this, _updateActiveSegment);
__privateAdd(this, _enableUserEvents);
__privateAdd(this, _disableUserEvents);
__privateAdd(this, _handlePointerDown);
__privateAdd(this, _handlePointerEnter);
__privateAdd(this, _handlePointerUp);
__privateAdd(this, _handlePointerLeave);
__privateAdd(this, _handlePointerMove);
__privateAdd(this, _mediaController, void 0);
__privateAdd(this, _isInputTarget, void 0);
__privateAdd(this, _startpoint, void 0);
__privateAdd(this, _endpoint, void 0);
__privateAdd(this, _cssRules, {});
__privateAdd(this, _segments, []);
__privateAdd(this, _onFocusIn, () => {
if (this.range.matches(":focus-visible")) {
const { style } = (0, import_element_utils.getOrInsertCSSRule)(this.shadowRoot, ":host");
style.setProperty(
"--_focus-visible-box-shadow",
"var(--_focus-box-shadow)"
);
}
});
__privateAdd(this, _onFocusOut, () => {
const { style } = (0, import_element_utils.getOrInsertCSSRule)(this.shadowRoot, ":host");
style.removeProperty("--_focus-visible-box-shadow");
});
__privateAdd(this, _updateComputedStyles, () => {
const clipping = this.shadowRoot.querySelector("#segments-clipping");
if (clipping)
clipping.parentNode.append(clipping);
});
if (!this.shadowRoot) {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
this.container = this.shadowRoot.querySelector("#container");
__privateSet(this, _startpoint, this.shadowRoot.querySelector("#startpoint"));
__privateSet(this, _endpoint, this.shadowRoot.querySelector("#endpoint"));
this.range = this.shadowRoot.querySelector("#range");
this.appearance = this.shadowRoot.querySelector("#appearance");
}
static get observedAttributes() {
return [
"disabled",
"aria-disabled",
import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
var _a, _b, _c, _d, _e;
if (attrName === import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
if (oldValue) {
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
}
if (newValue && this.isConnected) {
__privateSet(this, _mediaController, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
(_e = (_d = __privateGet(this, _mediaController)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
}
} else if (attrName === "disabled" || attrName === "aria-disabled" && oldValue !== newValue) {
if (newValue == null) {
this.range.removeAttribute(attrName);
__privateMethod(this, _enableUserEvents, enableUserEvents_fn).call(this);
} else {
this.range.setAttribute(attrName, newValue);
__privateMethod(this, _disableUserEvents, disableUserEvents_fn).call(this);
}
}
}
connectedCallback() {
var _a, _b, _c;
const { style } = (0, import_element_utils.getOrInsertCSSRule)(this.shadowRoot, ":host");
style.setProperty(
"display",
`var(--media-control-display, var(--${this.localName}-display, inline-flex))`
);
__privateGet(this, _cssRules).pointer = (0, import_element_utils.getOrInsertCSSRule)(this.shadowRoot, "#pointer");
__privateGet(this, _cssRules).progress = (0, import_element_utils.getOrInsertCSSRule)(this.shadowRoot, "#progress");
__privateGet(this, _cssRules).thumb = (0, import_element_utils.getOrInsertCSSRule)(this.shadowRoot, "#thumb");
__privateGet(this, _cssRules).activeSegment = (0, import_element_utils.getOrInsertCSSRule)(
this.shadowRoot,
"#segments-clipping rect:nth-child(0)"
);
const mediaControllerId = this.getAttribute(
import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER
);
if (mediaControllerId) {
__privateSet(this, _mediaController, (_a = this.getRootNode()) == null ? void 0 : _a.getElementById(
mediaControllerId
));
(_c = (_b = __privateGet(this, _mediaController)) == null ? void 0 : _b.associateElement) == null ? void 0 : _c.call(_b, this);
}
this.updateBar();
this.shadowRoot.addEventListener("focusin", __privateGet(this, _onFocusIn));
this.shadowRoot.addEventListener("focusout", __privateGet(this, _onFocusOut));
__privateMethod(this, _enableUserEvents, enableUserEvents_fn).call(this);
(0, import_resize_observer.observeResize)(this.container, __privateGet(this, _updateComputedStyles));
}
disconnectedCallback() {
var _a, _b;
__privateMethod(this, _disableUserEvents, disableUserEvents_fn).call(this);
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
this.shadowRoot.removeEventListener("focusin", __privateGet(this, _onFocusIn));
this.shadowRoot.removeEventListener("focusout", __privateGet(this, _onFocusOut));
(0, import_resize_observer.unobserveResize)(this.container, __privateGet(this, _updateComputedStyles));
}
updatePointerBar(evt) {
var _a;
(_a = __privateGet(this, _cssRules).pointer) == null ? void 0 : _a.style.setProperty(
"width",
`${this.getPointerRatio(evt) * 100}%`
);
}
updateBar() {
var _a, _b;
const rangePercent = this.range.valueAsNumber * 100;
(_a = __privateGet(this, _cssRules).progress) == null ? void 0 : _a.style.setProperty("width", `${rangePercent}%`);
(_b = __privateGet(this, _cssRules).thumb) == null ? void 0 : _b.style.setProperty("left", `${rangePercent}%`);
}
updateSegments(segments) {
const clipping = this.shadowRoot.querySelector("#segments-clipping");
clipping.textContent = "";
this.container.classList.toggle("segments", !!(segments == null ? void 0 : segments.length));
if (!(segments == null ? void 0 : segments.length))
return;
const normalized = [
.../* @__PURE__ */ new Set([
+this.range.min,
...segments.flatMap((s) => [s.start, s.end]),
+this.range.max
])
];
__privateSet(this, _segments, [...normalized]);
const lastMarker = normalized.pop();
for (const [i, marker] of normalized.entries()) {
const [isFirst, isLast] = [i === 0, i === normalized.length - 1];
const x = isFirst ? "calc(var(--segments-gap) / -1)" : `${marker * 100}%`;
const x2 = isLast ? lastMarker : normalized[i + 1];
const width = `calc(${(x2 - marker) * 100}%${isFirst || isLast ? "" : ` - var(--segments-gap)`})`;
const segmentEl = import_server_safe_globals.document.createElementNS(
"http://www.w3.org/2000/svg",
"rect"
);
const cssRule = (0, import_element_utils.getOrInsertCSSRule)(
this.shadowRoot,
`#segments-clipping rect:nth-child(${i + 1})`
);
cssRule.style.setProperty("x", x);
cssRule.style.setProperty("width", width);
clipping.append(segmentEl);
}
}
getPointerRatio(evt) {
const pointerRatio = (0, import_element_utils.getPointProgressOnLine)(
evt.clientX,
evt.clientY,
__privateGet(this, _startpoint).getBoundingClientRect(),
__privateGet(this, _endpoint).getBoundingClientRect()
);
return Math.max(0, Math.min(1, pointerRatio));
}
get dragging() {
return this.hasAttribute("dragging");
}
handleEvent(evt) {
switch (evt.type) {
case "pointermove":
__privateMethod(this, _handlePointerMove, handlePointerMove_fn).call(this, evt);
break;
case "input":
this.updateBar();
break;
case "pointerenter":
__privateMethod(this, _handlePointerEnter, handlePointerEnter_fn).call(this, evt);
break;
case "pointerdown":
__privateMethod(this, _handlePointerDown, handlePointerDown_fn).call(this, evt);
break;
case "pointerup":
__privateMethod(this, _handlePointerUp, handlePointerUp_fn).call(this);
break;
case "pointerleave":
__privateMethod(this, _handlePointerLeave, handlePointerLeave_fn).call(this);
break;
}
}
get keysUsed() {
return ["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"];
}
}
_mediaController = new WeakMap();
_isInputTarget = new WeakMap();
_startpoint = new WeakMap();
_endpoint = new WeakMap();
_cssRules = new WeakMap();
_segments = new WeakMap();
_onFocusIn = new WeakMap();
_onFocusOut = new WeakMap();
_updateComputedStyles = new WeakMap();
_updateActiveSegment = new WeakSet();
updateActiveSegment_fn = function(evt) {
const rule = __privateGet(this, _cssRules).activeSegment;
if (!rule)
return;
const pointerRatio = this.getPointerRatio(evt);
const segmentIndex = __privateGet(this, _segments).findIndex((start, i, arr) => {
const end = arr[i + 1];
return end != null && pointerRatio >= start && pointerRatio <= end;
});
const selectorText = `#segments-clipping rect:nth-child(${segmentIndex + 1})`;
if (rule.selectorText != selectorText || !rule.style.transform) {
rule.selectorText = selectorText;
rule.style.setProperty(
"transform",
"var(--media-range-segment-hover-transform, scaleY(2))"
);
}
};
_enableUserEvents = new WeakSet();
enableUserEvents_fn = function() {
if (this.hasAttribute("disabled"))
return;
this.addEventListener("input", this);
this.addEventListener("pointerdown", this);
this.addEventListener("pointerenter", this);
};
_disableUserEvents = new WeakSet();
disableUserEvents_fn = function() {
var _a, _b;
this.removeEventListener("input", this);
this.removeEventListener("pointerdown", this);
this.removeEventListener("pointerenter", this);
(_a = import_server_safe_globals.globalThis.window) == null ? void 0 : _a.removeEventListener("pointerup", this);
(_b = import_server_safe_globals.globalThis.window) == null ? void 0 : _b.removeEventListener("pointermove", this);
};
_handlePointerDown = new WeakSet();
handlePointerDown_fn = function(evt) {
var _a;
__privateSet(this, _isInputTarget, evt.composedPath().includes(this.range));
(_a = import_server_safe_globals.globalThis.window) == null ? void 0 : _a.addEventListener("pointerup", this);
};
_handlePointerEnter = new WeakSet();
handlePointerEnter_fn = function(evt) {
var _a;
if (evt.pointerType !== "mouse")
__privateMethod(this, _handlePointerDown, handlePointerDown_fn).call(this, evt);
this.addEventListener("pointerleave", this);
(_a = import_server_safe_globals.globalThis.window) == null ? void 0 : _a.addEventListener("pointermove", this);
};
_handlePointerUp = new WeakSet();
handlePointerUp_fn = function() {
var _a;
(_a = import_server_safe_globals.globalThis.window) == null ? void 0 : _a.removeEventListener("pointerup", this);
this.toggleAttribute("dragging", false);
this.range.disabled = this.hasAttribute("disabled");
};
_handlePointerLeave = new WeakSet();
handlePointerLeave_fn = function() {
var _a, _b;
this.removeEventListener("pointerleave", this);
(_a = import_server_safe_globals.globalThis.window) == null ? void 0 : _a.removeEventListener("pointermove", this);
this.toggleAttribute("dragging", false);
this.range.disabled = this.hasAttribute("disabled");
(_b = __privateGet(this, _cssRules).activeSegment) == null ? void 0 : _b.style.removeProperty("transform");
};
_handlePointerMove = new WeakSet();
handlePointerMove_fn = function(evt) {
this.toggleAttribute(
"dragging",
evt.buttons === 1 || evt.pointerType !== "mouse"
);
this.updatePointerBar(evt);
__privateMethod(this, _updateActiveSegment, updateActiveSegment_fn).call(this, evt);
if (this.dragging && (evt.pointerType !== "mouse" || !__privateGet(this, _isInputTarget))) {
this.range.disabled = true;
this.range.valueAsNumber = this.getPointerRatio(evt);
this.range.dispatchEvent(
new Event("input", { bubbles: true, composed: true })
);
}
};
if (!import_server_safe_globals.globalThis.customElements.get("media-chrome-range")) {
import_server_safe_globals.globalThis.customElements.define("media-chrome-range", MediaChromeRange);
}
var media_chrome_range_default = MediaChromeRange;

View File

@@ -0,0 +1,539 @@
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;
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var media_container_exports = {};
__export(media_container_exports, {
Attributes: () => Attributes,
MediaContainer: () => MediaContainer,
default: () => media_container_default
});
module.exports = __toCommonJS(media_container_exports);
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var import_resize_observer = require("./utils/resize-observer.js");
var import_media_gesture_receiver = require("./media-gesture-receiver.js");
var _pointerDownTimeStamp, _currentMedia, _inactiveTimeout, _autohide, _handlePointerMove, handlePointerMove_fn, _handlePointerUp, handlePointerUp_fn, _setInactive, setInactive_fn, _setActive, setActive_fn, _scheduleInactive, scheduleInactive_fn;
const Attributes = {
AUDIO: "audio",
AUTOHIDE: "autohide",
BREAKPOINTS: "breakpoints",
GESTURES_DISABLED: "gesturesdisabled",
KEYBOARD_CONTROL: "keyboardcontrol",
NO_AUTOHIDE: "noautohide",
USER_INACTIVE: "userinactive"
};
const template = import_server_safe_globals.document.createElement("template");
template.innerHTML = /*html*/
`
<style>
${/*
* outline on media is turned off because it is allowed to get focus to faciliate hotkeys.
* However, on keyboard interactions, the focus outline is shown,
* which is particularly noticeable when going fullscreen via hotkeys.
*/
""}
:host([${import_constants.MediaUIAttributes.MEDIA_IS_FULLSCREEN}]) ::slotted([slot=media]) {
outline: none;
}
:host {
box-sizing: border-box;
position: relative;
display: inline-block;
line-height: 0;
background-color: var(--media-background-color, #000);
}
:host(:not([${Attributes.AUDIO}])) [part~=layer]:not([part~=media-layer]) {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-flow: column nowrap;
align-items: start;
pointer-events: none;
background: none;
}
slot[name=media] {
display: var(--media-slot-display, contents);
}
${/*
* when in audio mode, hide the slotted media element by default
*/
""}
:host([${Attributes.AUDIO}]) slot[name=media] {
display: var(--media-slot-display, none);
}
${/*
* when in audio mode, hide the gesture-layer which causes media-controller to be taller than the control bar
*/
""}
:host([${Attributes.AUDIO}]) [part~=layer][part~=gesture-layer] {
height: 0;
display: block;
}
${/*
* if gestures are disabled, don't accept pointer-events
*/
""}
:host(:not([${Attributes.AUDIO}])[${Attributes.GESTURES_DISABLED}]) ::slotted([slot=gestures-chrome]),
:host(:not([${Attributes.AUDIO}])[${Attributes.GESTURES_DISABLED}]) media-gesture-receiver[slot=gestures-chrome] {
display: none;
}
${/*
* any slotted element that isn't a poster or media slot should be pointer-events auto
* we'll want to add here any slotted elements that shouldn't get pointer-events by default when slotted
*/
""}
::slotted(:not([slot=media]):not([slot=poster]):not(media-loading-indicator):not([hidden])) {
pointer-events: auto;
}
:host(:not([${Attributes.AUDIO}])) *[part~=layer][part~=centered-layer] {
align-items: center;
justify-content: center;
}
:host(:not([${Attributes.AUDIO}])) ::slotted(media-gesture-receiver[slot=gestures-chrome]),
:host(:not([${Attributes.AUDIO}])) media-gesture-receiver[slot=gestures-chrome] {
align-self: stretch;
flex-grow: 1;
}
slot[name=middle-chrome] {
display: inline;
flex-grow: 1;
pointer-events: none;
background: none;
}
${/* Position the media and poster elements to fill the container */
""}
::slotted([slot=media]),
::slotted([slot=poster]) {
width: 100%;
height: 100%;
}
${/* Video specific styles */
""}
:host(:not([${Attributes.AUDIO}])) .spacer {
flex-grow: 1;
}
${/* Safari needs this to actually make the element fill the window */
""}
:host(:-webkit-full-screen) {
${/* Needs to use !important otherwise easy to break */
""}
width: 100% !important;
height: 100% !important;
}
${/* Only add these if auto hide is not disabled */
""}
::slotted(:not([slot=media]):not([slot=poster]):not([${Attributes.NO_AUTOHIDE}]):not([hidden])) {
opacity: 1;
transition: opacity 0.25s;
}
${/* Hide controls when inactive, not paused, not audio and auto hide not disabled */
""}
:host([${Attributes.USER_INACTIVE}]:not([${import_constants.MediaUIAttributes.MEDIA_PAUSED}]):not([${import_constants.MediaUIAttributes.MEDIA_IS_AIRPLAYING}]):not([${import_constants.MediaUIAttributes.MEDIA_IS_CASTING}]):not([${Attributes.AUDIO}])) ::slotted(:not([slot=media]):not([slot=poster]):not([${Attributes.NO_AUTOHIDE}])) {
opacity: 0;
transition: opacity 1s;
}
:host([${Attributes.USER_INACTIVE}]:not([${import_constants.MediaUIAttributes.MEDIA_PAUSED}]):not([${import_constants.MediaUIAttributes.MEDIA_IS_CASTING}]):not([${Attributes.AUDIO}])) ::slotted([slot=media]) {
cursor: none;
}
::slotted(media-control-bar) {
align-self: stretch;
}
${/* ::slotted([slot=poster]) doesn't work for slot fallback content so hide parent slot instead */
""}
:host(:not([${Attributes.AUDIO}])[${import_constants.MediaUIAttributes.MEDIA_HAS_PLAYED}]) slot[name=poster] {
display: none;
}
::slotted([role="menu"]) {
align-self: end;
}
::slotted([role="dialog"]) {
align-self: center;
}
</style>
<slot name="media" part="layer media-layer"></slot>
<slot name="poster" part="layer poster-layer"></slot>
<slot name="gestures-chrome" part="layer gesture-layer">
<media-gesture-receiver slot="gestures-chrome"></media-gesture-receiver>
</slot>
<span part="layer vertical-layer">
<slot name="top-chrome" part="top chrome"></slot>
<slot name="middle-chrome" part="middle chrome"></slot>
<slot name="centered-chrome" part="layer centered-layer center centered chrome"></slot>
${/* default, effectively "bottom-chrome" */
""}
<slot part="bottom chrome"></slot>
</span>
`;
const MEDIA_UI_ATTRIBUTE_NAMES = Object.values(import_constants.MediaUIAttributes);
const defaultBreakpoints = "sm:384 md:576 lg:768 xl:960";
function resizeCallback(entry) {
setBreakpoints(entry.target, entry.contentRect.width);
}
function setBreakpoints(container, width) {
var _a;
if (!container.isConnected)
return;
const breakpoints = (_a = container.getAttribute(Attributes.BREAKPOINTS)) != null ? _a : defaultBreakpoints;
const ranges = createBreakpointMap(breakpoints);
const activeBreakpoints = getBreakpoints(ranges, width);
let changed = false;
Object.keys(ranges).forEach((name) => {
if (activeBreakpoints.includes(name)) {
if (!container.hasAttribute(`breakpoint${name}`)) {
container.setAttribute(`breakpoint${name}`, "");
changed = true;
}
return;
}
if (container.hasAttribute(`breakpoint${name}`)) {
container.removeAttribute(`breakpoint${name}`);
changed = true;
}
});
if (changed) {
const evt = new CustomEvent(import_constants.MediaStateChangeEvents.BREAKPOINTS_CHANGE, {
detail: activeBreakpoints
});
container.dispatchEvent(evt);
}
}
function createBreakpointMap(breakpoints) {
const pairs = breakpoints.split(/\s+/);
return Object.fromEntries(pairs.map((pair) => pair.split(":")));
}
function getBreakpoints(breakpoints, width) {
return Object.keys(breakpoints).filter((name) => {
return width >= parseInt(breakpoints[name]);
});
}
class MediaContainer extends import_server_safe_globals.globalThis.HTMLElement {
constructor() {
super();
__privateAdd(this, _handlePointerMove);
__privateAdd(this, _handlePointerUp);
__privateAdd(this, _setInactive);
__privateAdd(this, _setActive);
__privateAdd(this, _scheduleInactive);
__privateAdd(this, _pointerDownTimeStamp, 0);
__privateAdd(this, _currentMedia, null);
__privateAdd(this, _inactiveTimeout, null);
__privateAdd(this, _autohide, void 0);
this.breakpointsComputed = false;
if (!this.shadowRoot) {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
const mutationCallback = (mutationsList) => {
const media = this.media;
for (const mutation of mutationsList) {
if (mutation.type === "childList") {
mutation.removedNodes.forEach((node) => {
if (node.slot == "media" && mutation.target == this) {
let previousSibling = mutation.previousSibling && mutation.previousSibling.previousElementSibling;
if (!previousSibling || !media) {
this.mediaUnsetCallback(node);
} else {
let wasFirst = previousSibling.slot !== "media";
while ((previousSibling = previousSibling.previousSibling) !== null) {
if (previousSibling.slot == "media")
wasFirst = false;
}
if (wasFirst)
this.mediaUnsetCallback(node);
}
}
});
if (media) {
mutation.addedNodes.forEach((node) => {
if (node === media) {
this.handleMediaUpdated(media);
}
});
}
}
}
};
const mutationObserver = new MutationObserver(mutationCallback);
mutationObserver.observe(this, { childList: true, subtree: true });
let pendingResizeCb = false;
const deferResizeCallback = (entry) => {
if (pendingResizeCb)
return;
setTimeout(() => {
resizeCallback(entry);
pendingResizeCb = false;
if (!this.breakpointsComputed) {
this.breakpointsComputed = true;
this.dispatchEvent(
new CustomEvent(import_constants.MediaStateChangeEvents.BREAKPOINTS_COMPUTED, {
bubbles: true,
composed: true
})
);
}
}, 0);
pendingResizeCb = true;
};
(0, import_resize_observer.observeResize)(this, deferResizeCallback);
const chainedSlot = this.querySelector(
":scope > slot[slot=media]"
);
if (chainedSlot) {
chainedSlot.addEventListener("slotchange", () => {
const slotEls = chainedSlot.assignedElements({ flatten: true });
if (!slotEls.length) {
if (__privateGet(this, _currentMedia)) {
this.mediaUnsetCallback(__privateGet(this, _currentMedia));
}
return;
}
this.handleMediaUpdated(this.media);
});
}
}
static get observedAttributes() {
return [Attributes.AUTOHIDE, Attributes.GESTURES_DISABLED].concat(MEDIA_UI_ATTRIBUTE_NAMES).filter(
(name) => ![
import_constants.MediaUIAttributes.MEDIA_RENDITION_LIST,
import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST,
import_constants.MediaUIAttributes.MEDIA_CHAPTERS_CUES,
import_constants.MediaUIAttributes.MEDIA_WIDTH,
import_constants.MediaUIAttributes.MEDIA_HEIGHT
].includes(name)
);
}
// Could share this code with media-chrome-html-element instead
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName.toLowerCase() == Attributes.AUTOHIDE) {
this.autohide = newValue;
}
}
// First direct child with slot=media, or null
/**
* @returns {HTMLVideoElement &
* {buffered,
* webkitEnterFullscreen?,
* webkitExitFullscreen?,
* requestCast?,
* webkitShowPlaybackTargetPicker?,
* videoTracks?,
* }}
*/
get media() {
let media = this.querySelector(":scope > [slot=media]");
if ((media == null ? void 0 : media.nodeName) == "SLOT")
media = media.assignedElements({ flatten: true })[0];
return media;
}
/**
* @param {HTMLMediaElement} media
*/
async handleMediaUpdated(media) {
if (!media)
return;
__privateSet(this, _currentMedia, media);
if (media.localName.includes("-")) {
await import_server_safe_globals.globalThis.customElements.whenDefined(media.localName);
}
this.mediaSetCallback(media);
}
connectedCallback() {
var _a;
const isAudioChrome = this.getAttribute(Attributes.AUDIO) != null;
const label = isAudioChrome ? import_labels.nouns.AUDIO_PLAYER() : import_labels.nouns.VIDEO_PLAYER();
this.setAttribute("role", "region");
this.setAttribute("aria-label", label);
this.handleMediaUpdated(this.media);
this.setAttribute(Attributes.USER_INACTIVE, "");
this.addEventListener("pointerdown", this);
this.addEventListener("pointermove", this);
this.addEventListener("pointerup", this);
this.addEventListener("mouseleave", this);
this.addEventListener("keyup", this);
(_a = import_server_safe_globals.globalThis.window) == null ? void 0 : _a.addEventListener("mouseup", this);
}
disconnectedCallback() {
var _a;
if (this.media) {
this.mediaUnsetCallback(this.media);
}
(_a = import_server_safe_globals.globalThis.window) == null ? void 0 : _a.removeEventListener("mouseup", this);
}
/**
* @abstract
* @param {HTMLMediaElement} media
*/
mediaSetCallback(media) {
}
// eslint-disable-line
/**
* @param {HTMLMediaElement} media
*/
mediaUnsetCallback(media) {
__privateSet(this, _currentMedia, null);
}
handleEvent(event) {
switch (event.type) {
case "pointerdown":
__privateSet(this, _pointerDownTimeStamp, event.timeStamp);
break;
case "pointermove":
__privateMethod(this, _handlePointerMove, handlePointerMove_fn).call(this, event);
break;
case "pointerup":
__privateMethod(this, _handlePointerUp, handlePointerUp_fn).call(this, event);
break;
case "mouseleave":
__privateMethod(this, _setInactive, setInactive_fn).call(this);
break;
case "mouseup":
this.removeAttribute(Attributes.KEYBOARD_CONTROL);
break;
case "keyup":
__privateMethod(this, _scheduleInactive, scheduleInactive_fn).call(this);
this.setAttribute(Attributes.KEYBOARD_CONTROL, "");
break;
}
}
set autohide(seconds) {
const parsedSeconds = Number(seconds);
__privateSet(this, _autohide, isNaN(parsedSeconds) ? 0 : parsedSeconds);
}
get autohide() {
return (__privateGet(this, _autohide) === void 0 ? 2 : __privateGet(this, _autohide)).toString();
}
}
_pointerDownTimeStamp = new WeakMap();
_currentMedia = new WeakMap();
_inactiveTimeout = new WeakMap();
_autohide = new WeakMap();
_handlePointerMove = new WeakSet();
handlePointerMove_fn = function(event) {
if (event.pointerType !== "mouse") {
const MAX_TAP_DURATION = 250;
if (event.timeStamp - __privateGet(this, _pointerDownTimeStamp) < MAX_TAP_DURATION)
return;
}
__privateMethod(this, _setActive, setActive_fn).call(this);
clearTimeout(__privateGet(this, _inactiveTimeout));
if ([this, this.media].includes(event.target)) {
__privateMethod(this, _scheduleInactive, scheduleInactive_fn).call(this);
}
};
_handlePointerUp = new WeakSet();
handlePointerUp_fn = function(event) {
if (event.pointerType === "touch") {
const controlsVisible = !this.hasAttribute(Attributes.USER_INACTIVE);
if ([this, this.media].includes(event.target) && controlsVisible) {
__privateMethod(this, _setInactive, setInactive_fn).call(this);
} else {
__privateMethod(this, _scheduleInactive, scheduleInactive_fn).call(this);
}
} else if (event.composedPath().some(
(el) => ["media-play-button", "media-fullscreen-button"].includes(
el == null ? void 0 : el.localName
)
)) {
__privateMethod(this, _scheduleInactive, scheduleInactive_fn).call(this);
}
};
_setInactive = new WeakSet();
setInactive_fn = function() {
if (__privateGet(this, _autohide) < 0)
return;
if (this.hasAttribute(Attributes.USER_INACTIVE))
return;
this.setAttribute(Attributes.USER_INACTIVE, "");
const evt = new import_server_safe_globals.globalThis.CustomEvent(
import_constants.MediaStateChangeEvents.USER_INACTIVE,
{ composed: true, bubbles: true, detail: true }
);
this.dispatchEvent(evt);
};
_setActive = new WeakSet();
setActive_fn = function() {
if (!this.hasAttribute(Attributes.USER_INACTIVE))
return;
this.removeAttribute(Attributes.USER_INACTIVE);
const evt = new import_server_safe_globals.globalThis.CustomEvent(
import_constants.MediaStateChangeEvents.USER_INACTIVE,
{ composed: true, bubbles: true, detail: false }
);
this.dispatchEvent(evt);
};
_scheduleInactive = new WeakSet();
scheduleInactive_fn = function() {
__privateMethod(this, _setActive, setActive_fn).call(this);
clearTimeout(__privateGet(this, _inactiveTimeout));
const autohide = parseInt(this.autohide);
if (autohide < 0)
return;
__privateSet(this, _inactiveTimeout, setTimeout(() => {
__privateMethod(this, _setInactive, setInactive_fn).call(this);
}, autohide * 1e3));
};
if (!import_server_safe_globals.globalThis.customElements.get("media-container")) {
import_server_safe_globals.globalThis.customElements.define("media-container", MediaContainer);
}
var media_container_default = MediaContainer;

View File

@@ -0,0 +1,121 @@
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;
};
var media_control_bar_exports = {};
__export(media_control_bar_exports, {
default: () => media_control_bar_default
});
module.exports = __toCommonJS(media_control_bar_exports);
var import_constants = require("./constants.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var _mediaController;
const template = import_server_safe_globals.document.createElement("template");
template.innerHTML = /*html*/
`
<style>
:host {
${/* Need position to display above video for some reason */
""}
box-sizing: border-box;
display: var(--media-control-display, var(--media-control-bar-display, inline-flex));
color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
--media-loading-indicator-icon-height: 44px;
}
::slotted(media-time-range),
::slotted(media-volume-range) {
min-height: 100%;
}
::slotted(media-time-range),
::slotted(media-clip-selector) {
flex-grow: 1;
}
::slotted([role="menu"]) {
position: absolute;
}
</style>
<slot></slot>
`;
class MediaControlBar extends import_server_safe_globals.globalThis.HTMLElement {
constructor() {
super();
__privateAdd(this, _mediaController, void 0);
if (!this.shadowRoot) {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
static get observedAttributes() {
return [import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER];
}
attributeChangedCallback(attrName, oldValue, newValue) {
var _a, _b, _c, _d, _e;
if (attrName === import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
if (oldValue) {
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
}
if (newValue && this.isConnected) {
__privateSet(this, _mediaController, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
(_e = (_d = __privateGet(this, _mediaController)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
}
}
}
connectedCallback() {
var _a, _b, _c;
const mediaControllerId = this.getAttribute(
import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER
);
if (mediaControllerId) {
__privateSet(this, _mediaController, (_a = this.getRootNode()) == null ? void 0 : _a.getElementById(
mediaControllerId
));
(_c = (_b = __privateGet(this, _mediaController)) == null ? void 0 : _b.associateElement) == null ? void 0 : _c.call(_b, this);
}
}
disconnectedCallback() {
var _a, _b;
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
}
}
_mediaController = new WeakMap();
if (!import_server_safe_globals.globalThis.customElements.get("media-control-bar")) {
import_server_safe_globals.globalThis.customElements.define("media-control-bar", MediaControlBar);
}
var media_control_bar_default = MediaControlBar;

View File

@@ -0,0 +1,685 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
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;
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var media_controller_exports = {};
__export(media_controller_exports, {
Attributes: () => Attributes,
MediaController: () => MediaController,
default: () => media_controller_default
});
module.exports = __toCommonJS(media_controller_exports);
var import_media_container = require("./media-container.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_attribute_token_list = require("./utils/attribute-token-list.js");
var import_utils = require("./utils/utils.js");
var import_captions = require("./utils/captions.js");
var import_constants = require("./constants.js");
var import_element_utils = require("./utils/element-utils.js");
var import_media_store = __toESM(require("./media-store/media-store.js"), 1);
var _hotKeys, _fullscreenElement, _mediaStore, _mediaStateCallback, _mediaStoreUnsubscribe, _mediaStateEventHandler, _setupDefaultStore, setupDefaultStore_fn, _keyUpHandler, keyUpHandler_fn, _keyDownHandler, keyDownHandler_fn;
const ButtonPressedKeys = [
"ArrowLeft",
"ArrowRight",
"Enter",
" ",
"f",
"m",
"k",
"c"
];
const DEFAULT_SEEK_OFFSET = 10;
const Attributes = {
DEFAULT_SUBTITLES: "defaultsubtitles",
DEFAULT_STREAM_TYPE: "defaultstreamtype",
DEFAULT_DURATION: "defaultduration",
FULLSCREEN_ELEMENT: "fullscreenelement",
HOTKEYS: "hotkeys",
KEYS_USED: "keysused",
LIVE_EDGE_OFFSET: "liveedgeoffset",
NO_AUTO_SEEK_TO_LIVE: "noautoseektolive",
NO_HOTKEYS: "nohotkeys",
NO_VOLUME_PREF: "novolumepref",
NO_SUBTITLES_LANG_PREF: "nosubtitleslangpref",
NO_DEFAULT_STORE: "nodefaultstore",
KEYBOARD_FORWARD_SEEK_OFFSET: "keyboardforwardseekoffset",
KEYBOARD_BACKWARD_SEEK_OFFSET: "keyboardbackwardseekoffset"
};
class MediaController extends import_media_container.MediaContainer {
constructor() {
super();
__privateAdd(this, _setupDefaultStore);
__privateAdd(this, _keyUpHandler);
__privateAdd(this, _keyDownHandler);
this.mediaStateReceivers = [];
this.associatedElementSubscriptions = /* @__PURE__ */ new Map();
__privateAdd(this, _hotKeys, new import_attribute_token_list.AttributeTokenList(this, Attributes.HOTKEYS));
__privateAdd(this, _fullscreenElement, void 0);
__privateAdd(this, _mediaStore, void 0);
__privateAdd(this, _mediaStateCallback, void 0);
__privateAdd(this, _mediaStoreUnsubscribe, void 0);
__privateAdd(this, _mediaStateEventHandler, (event) => {
var _a;
(_a = __privateGet(this, _mediaStore)) == null ? void 0 : _a.dispatch(event);
});
this.associateElement(this);
let prevState = {};
__privateSet(this, _mediaStateCallback, (nextState) => {
Object.entries(nextState).forEach(([stateName, stateValue]) => {
if (stateName in prevState && prevState[stateName] === stateValue)
return;
this.propagateMediaState(stateName, stateValue);
const attrName = stateName.toLowerCase();
const evt = new import_server_safe_globals.globalThis.CustomEvent(
import_constants.AttributeToStateChangeEventMap[attrName],
{ composed: true, detail: stateValue }
);
this.dispatchEvent(evt);
});
prevState = nextState;
});
this.enableHotkeys();
}
static get observedAttributes() {
return super.observedAttributes.concat(
Attributes.NO_HOTKEYS,
Attributes.HOTKEYS,
Attributes.DEFAULT_STREAM_TYPE,
Attributes.DEFAULT_SUBTITLES,
Attributes.DEFAULT_DURATION
);
}
get mediaStore() {
return __privateGet(this, _mediaStore);
}
set mediaStore(value) {
var _a, _b;
if (__privateGet(this, _mediaStore)) {
(_a = __privateGet(this, _mediaStoreUnsubscribe)) == null ? void 0 : _a.call(this);
__privateSet(this, _mediaStoreUnsubscribe, void 0);
}
__privateSet(this, _mediaStore, value);
if (!__privateGet(this, _mediaStore) && !this.hasAttribute(Attributes.NO_DEFAULT_STORE)) {
__privateMethod(this, _setupDefaultStore, setupDefaultStore_fn).call(this);
return;
}
__privateSet(this, _mediaStoreUnsubscribe, (_b = __privateGet(this, _mediaStore)) == null ? void 0 : _b.subscribe(
__privateGet(this, _mediaStateCallback)
));
}
get fullscreenElement() {
var _a;
return (_a = __privateGet(this, _fullscreenElement)) != null ? _a : this;
}
set fullscreenElement(element) {
var _a;
if (this.hasAttribute(Attributes.FULLSCREEN_ELEMENT)) {
this.removeAttribute(Attributes.FULLSCREEN_ELEMENT);
}
__privateSet(this, _fullscreenElement, element);
(_a = __privateGet(this, _mediaStore)) == null ? void 0 : _a.dispatch({
type: "fullscreenelementchangerequest",
detail: this.fullscreenElement
});
}
attributeChangedCallback(attrName, oldValue, newValue) {
var _a, _b, _c, _d, _e, _f;
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === Attributes.NO_HOTKEYS) {
if (newValue !== oldValue && newValue === "") {
if (this.hasAttribute(Attributes.HOTKEYS)) {
console.warn(
"Media Chrome: Both `hotkeys` and `nohotkeys` have been set. All hotkeys will be disabled."
);
}
this.disableHotkeys();
} else if (newValue !== oldValue && newValue === null) {
this.enableHotkeys();
}
} else if (attrName === Attributes.HOTKEYS) {
__privateGet(this, _hotKeys).value = newValue;
} else if (attrName === Attributes.DEFAULT_SUBTITLES && newValue !== oldValue) {
(_a = __privateGet(this, _mediaStore)) == null ? void 0 : _a.dispatch({
type: "optionschangerequest",
detail: {
defaultSubtitles: this.hasAttribute(Attributes.DEFAULT_SUBTITLES)
}
});
} else if (attrName === Attributes.DEFAULT_STREAM_TYPE) {
(_c = __privateGet(this, _mediaStore)) == null ? void 0 : _c.dispatch({
type: "optionschangerequest",
detail: {
defaultStreamType: (_b = this.getAttribute(Attributes.DEFAULT_STREAM_TYPE)) != null ? _b : void 0
}
});
} else if (attrName === Attributes.LIVE_EDGE_OFFSET) {
(_d = __privateGet(this, _mediaStore)) == null ? void 0 : _d.dispatch({
type: "optionschangerequest",
detail: {
liveEdgeOffset: this.hasAttribute(Attributes.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes.LIVE_EDGE_OFFSET) : void 0
}
});
} else if (attrName === Attributes.FULLSCREEN_ELEMENT) {
const el = newValue ? (_e = this.getRootNode()) == null ? void 0 : _e.getElementById(newValue) : void 0;
__privateSet(this, _fullscreenElement, el);
(_f = __privateGet(this, _mediaStore)) == null ? void 0 : _f.dispatch({
type: "fullscreenelementchangerequest",
detail: this.fullscreenElement
});
}
}
connectedCallback() {
var _a, _b;
if (!__privateGet(this, _mediaStore) && !this.hasAttribute(Attributes.NO_DEFAULT_STORE)) {
__privateMethod(this, _setupDefaultStore, setupDefaultStore_fn).call(this);
}
(_a = __privateGet(this, _mediaStore)) == null ? void 0 : _a.dispatch({
type: "documentelementchangerequest",
detail: import_server_safe_globals.document
});
super.connectedCallback();
if (__privateGet(this, _mediaStore) && !__privateGet(this, _mediaStoreUnsubscribe)) {
__privateSet(this, _mediaStoreUnsubscribe, (_b = __privateGet(this, _mediaStore)) == null ? void 0 : _b.subscribe(
__privateGet(this, _mediaStateCallback)
));
}
this.enableHotkeys();
}
disconnectedCallback() {
var _a, _b, _c, _d;
(_a = super.disconnectedCallback) == null ? void 0 : _a.call(this);
if (__privateGet(this, _mediaStore)) {
(_b = __privateGet(this, _mediaStore)) == null ? void 0 : _b.dispatch({
type: "documentelementchangerequest",
detail: void 0
});
(_c = __privateGet(this, _mediaStore)) == null ? void 0 : _c.dispatch({
type: import_constants.MediaUIEvents.MEDIA_TOGGLE_SUBTITLES_REQUEST,
detail: false
});
}
if (__privateGet(this, _mediaStoreUnsubscribe)) {
(_d = __privateGet(this, _mediaStoreUnsubscribe)) == null ? void 0 : _d.call(this);
__privateSet(this, _mediaStoreUnsubscribe, void 0);
}
}
/**
* @override
* @param {HTMLMediaElement} media
*/
mediaSetCallback(media) {
var _a;
super.mediaSetCallback(media);
(_a = __privateGet(this, _mediaStore)) == null ? void 0 : _a.dispatch({
type: "mediaelementchangerequest",
detail: media
});
if (!media.hasAttribute("tabindex")) {
media.tabIndex = -1;
}
}
/**
* @override
* @param {HTMLMediaElement} media
*/
mediaUnsetCallback(media) {
var _a;
super.mediaUnsetCallback(media);
(_a = __privateGet(this, _mediaStore)) == null ? void 0 : _a.dispatch({
type: "mediaelementchangerequest",
detail: void 0
});
}
propagateMediaState(stateName, state) {
propagateMediaState(this.mediaStateReceivers, stateName, state);
}
associateElement(element) {
if (!element)
return;
const { associatedElementSubscriptions } = this;
if (associatedElementSubscriptions.has(element))
return;
const registerMediaStateReceiver = this.registerMediaStateReceiver.bind(this);
const unregisterMediaStateReceiver = this.unregisterMediaStateReceiver.bind(this);
const unsubscribe = monitorForMediaStateReceivers(
element,
registerMediaStateReceiver,
unregisterMediaStateReceiver
);
Object.values(import_constants.MediaUIEvents).forEach((eventName) => {
element.addEventListener(eventName, __privateGet(this, _mediaStateEventHandler));
});
associatedElementSubscriptions.set(element, unsubscribe);
}
unassociateElement(element) {
if (!element)
return;
const { associatedElementSubscriptions } = this;
if (!associatedElementSubscriptions.has(element))
return;
const unsubscribe = associatedElementSubscriptions.get(element);
unsubscribe();
associatedElementSubscriptions.delete(element);
Object.values(import_constants.MediaUIEvents).forEach((eventName) => {
element.removeEventListener(eventName, __privateGet(this, _mediaStateEventHandler));
});
}
registerMediaStateReceiver(el) {
if (!el)
return;
const els = this.mediaStateReceivers;
const index = els.indexOf(el);
if (index > -1)
return;
els.push(el);
if (__privateGet(this, _mediaStore)) {
Object.entries(__privateGet(this, _mediaStore).getState()).forEach(
([stateName, stateValue]) => {
propagateMediaState([el], stateName, stateValue);
}
);
}
}
unregisterMediaStateReceiver(el) {
const els = this.mediaStateReceivers;
const index = els.indexOf(el);
if (index < 0)
return;
els.splice(index, 1);
}
enableHotkeys() {
this.addEventListener("keydown", __privateMethod(this, _keyDownHandler, keyDownHandler_fn));
}
disableHotkeys() {
this.removeEventListener("keydown", __privateMethod(this, _keyDownHandler, keyDownHandler_fn));
this.removeEventListener("keyup", __privateMethod(this, _keyUpHandler, keyUpHandler_fn));
}
get hotkeys() {
return __privateGet(this, _hotKeys);
}
keyboardShortcutHandler(e) {
var _a, _b, _c, _d, _e;
const target = e.target;
const keysUsed = ((_c = (_b = (_a = target.getAttribute(Attributes.KEYS_USED)) == null ? void 0 : _a.split(" ")) != null ? _b : target == null ? void 0 : target.keysUsed) != null ? _c : []).map((key) => key === "Space" ? " " : key).filter(Boolean);
if (keysUsed.includes(e.key)) {
return;
}
let eventName, detail, evt;
if (__privateGet(this, _hotKeys).contains(`no${e.key.toLowerCase()}`))
return;
if (e.key === " " && __privateGet(this, _hotKeys).contains(`nospace`))
return;
switch (e.key) {
case " ":
case "k":
eventName = __privateGet(this, _mediaStore).getState().mediaPaused ? import_constants.MediaUIEvents.MEDIA_PLAY_REQUEST : import_constants.MediaUIEvents.MEDIA_PAUSE_REQUEST;
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(eventName, {
composed: true,
bubbles: true
})
);
break;
case "m":
eventName = this.mediaStore.getState().mediaVolumeLevel === "off" ? import_constants.MediaUIEvents.MEDIA_UNMUTE_REQUEST : import_constants.MediaUIEvents.MEDIA_MUTE_REQUEST;
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(eventName, {
composed: true,
bubbles: true
})
);
break;
case "f":
eventName = this.mediaStore.getState().mediaIsFullscreen ? import_constants.MediaUIEvents.MEDIA_EXIT_FULLSCREEN_REQUEST : import_constants.MediaUIEvents.MEDIA_ENTER_FULLSCREEN_REQUEST;
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(eventName, {
composed: true,
bubbles: true
})
);
break;
case "c":
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(
import_constants.MediaUIEvents.MEDIA_TOGGLE_SUBTITLES_REQUEST,
{ composed: true, bubbles: true }
)
);
break;
case "ArrowLeft": {
const offsetValue = this.hasAttribute(
Attributes.KEYBOARD_BACKWARD_SEEK_OFFSET
) ? +this.getAttribute(Attributes.KEYBOARD_BACKWARD_SEEK_OFFSET) : DEFAULT_SEEK_OFFSET;
detail = Math.max(
((_d = this.mediaStore.getState().mediaCurrentTime) != null ? _d : 0) - offsetValue,
0
);
evt = new import_server_safe_globals.globalThis.CustomEvent(import_constants.MediaUIEvents.MEDIA_SEEK_REQUEST, {
composed: true,
bubbles: true,
detail
});
this.dispatchEvent(evt);
break;
}
case "ArrowRight": {
const offsetValue = this.hasAttribute(
Attributes.KEYBOARD_FORWARD_SEEK_OFFSET
) ? +this.getAttribute(Attributes.KEYBOARD_FORWARD_SEEK_OFFSET) : DEFAULT_SEEK_OFFSET;
detail = Math.max(
((_e = this.mediaStore.getState().mediaCurrentTime) != null ? _e : 0) + offsetValue,
0
);
evt = new import_server_safe_globals.globalThis.CustomEvent(import_constants.MediaUIEvents.MEDIA_SEEK_REQUEST, {
composed: true,
bubbles: true,
detail
});
this.dispatchEvent(evt);
break;
}
default:
break;
}
}
}
_hotKeys = new WeakMap();
_fullscreenElement = new WeakMap();
_mediaStore = new WeakMap();
_mediaStateCallback = new WeakMap();
_mediaStoreUnsubscribe = new WeakMap();
_mediaStateEventHandler = new WeakMap();
_setupDefaultStore = new WeakSet();
setupDefaultStore_fn = function() {
var _a;
this.mediaStore = (0, import_media_store.default)({
media: this.media,
fullscreenElement: this.fullscreenElement,
options: {
defaultSubtitles: this.hasAttribute(Attributes.DEFAULT_SUBTITLES),
defaultDuration: this.hasAttribute(Attributes.DEFAULT_DURATION) ? +this.getAttribute(Attributes.DEFAULT_DURATION) : void 0,
defaultStreamType: (
/** @type {import('./media-store/state-mediator.js').StreamTypeValue} */
(_a = this.getAttribute(
Attributes.DEFAULT_STREAM_TYPE
)) != null ? _a : void 0
),
liveEdgeOffset: this.hasAttribute(Attributes.LIVE_EDGE_OFFSET) ? +this.getAttribute(Attributes.LIVE_EDGE_OFFSET) : void 0,
// NOTE: This wasn't updated if it was changed later. Should it be? (CJP)
noVolumePref: this.hasAttribute(Attributes.NO_VOLUME_PREF),
noSubtitlesLangPref: this.hasAttribute(
Attributes.NO_SUBTITLES_LANG_PREF
)
}
});
};
_keyUpHandler = new WeakSet();
keyUpHandler_fn = function(e) {
const { key } = e;
if (!ButtonPressedKeys.includes(key)) {
this.removeEventListener("keyup", __privateMethod(this, _keyUpHandler, keyUpHandler_fn));
return;
}
this.keyboardShortcutHandler(e);
};
_keyDownHandler = new WeakSet();
keyDownHandler_fn = function(e) {
const { metaKey, altKey, key } = e;
if (metaKey || altKey || !ButtonPressedKeys.includes(key)) {
this.removeEventListener("keyup", __privateMethod(this, _keyUpHandler, keyUpHandler_fn));
return;
}
if ([" ", "ArrowLeft", "ArrowRight"].includes(key) && !(__privateGet(this, _hotKeys).contains(`no${key.toLowerCase()}`) || key === " " && __privateGet(this, _hotKeys).contains("nospace"))) {
e.preventDefault();
}
this.addEventListener("keyup", __privateMethod(this, _keyUpHandler, keyUpHandler_fn), { once: true });
};
const MEDIA_UI_ATTRIBUTE_NAMES = Object.values(import_constants.MediaUIAttributes);
const MEDIA_UI_PROP_NAMES = Object.values(import_constants.MediaUIProps);
const getMediaUIAttributesFrom = (child) => {
var _a, _b, _c, _d;
let { observedAttributes } = child.constructor;
if (!observedAttributes && ((_a = child.nodeName) == null ? void 0 : _a.includes("-"))) {
import_server_safe_globals.globalThis.customElements.upgrade(child);
({ observedAttributes } = child.constructor);
}
const mediaChromeAttributesList = (_d = (_c = (_b = child == null ? void 0 : child.getAttribute) == null ? void 0 : _b.call(child, import_constants.MediaStateReceiverAttributes.MEDIA_CHROME_ATTRIBUTES)) == null ? void 0 : _c.split) == null ? void 0 : _d.call(_c, /\s+/);
if (!Array.isArray(observedAttributes || mediaChromeAttributesList))
return [];
return (observedAttributes || mediaChromeAttributesList).filter(
(attrName) => MEDIA_UI_ATTRIBUTE_NAMES.includes(attrName)
);
};
const hasMediaUIProps = (mediaStateReceiverCandidate) => {
var _a, _b;
if (((_a = mediaStateReceiverCandidate.nodeName) == null ? void 0 : _a.includes("-")) && !!import_server_safe_globals.globalThis.customElements.get(
(_b = mediaStateReceiverCandidate.nodeName) == null ? void 0 : _b.toLowerCase()
) && !(mediaStateReceiverCandidate instanceof import_server_safe_globals.globalThis.customElements.get(
mediaStateReceiverCandidate.nodeName.toLowerCase()
))) {
import_server_safe_globals.globalThis.customElements.upgrade(mediaStateReceiverCandidate);
}
return MEDIA_UI_PROP_NAMES.some(
(propName) => propName in mediaStateReceiverCandidate
);
};
const isMediaStateReceiver = (child) => {
return hasMediaUIProps(child) || !!getMediaUIAttributesFrom(child).length;
};
const serializeTuple = (tuple) => {
var _a;
return (_a = tuple == null ? void 0 : tuple.join) == null ? void 0 : _a.call(tuple, ":");
};
const CustomAttrSerializer = {
[import_constants.MediaUIAttributes.MEDIA_SUBTITLES_LIST]: import_captions.stringifyTextTrackList,
[import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING]: import_captions.stringifyTextTrackList,
[import_constants.MediaUIAttributes.MEDIA_SEEKABLE]: serializeTuple,
[import_constants.MediaUIAttributes.MEDIA_BUFFERED]: (tuples) => tuples == null ? void 0 : tuples.map(serializeTuple).join(" "),
[import_constants.MediaUIAttributes.MEDIA_PREVIEW_COORDS]: (coords) => coords == null ? void 0 : coords.join(" "),
[import_constants.MediaUIAttributes.MEDIA_RENDITION_LIST]: import_utils.stringifyRenditionList,
[import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST]: import_utils.stringifyAudioTrackList
};
const setAttr = async (child, attrName, attrValue) => {
var _a, _b;
if (!child.isConnected) {
await (0, import_utils.delay)(0);
}
if (typeof attrValue === "boolean" || attrValue == null) {
return (0, import_element_utils.setBooleanAttr)(child, attrName, attrValue);
}
if (typeof attrValue === "number") {
return (0, import_element_utils.setNumericAttr)(child, attrName, attrValue);
}
if (typeof attrValue === "string") {
return (0, import_element_utils.setStringAttr)(child, attrName, attrValue);
}
if (Array.isArray(attrValue) && !attrValue.length) {
return child.removeAttribute(attrName);
}
const val = (_b = (_a = CustomAttrSerializer[attrName]) == null ? void 0 : _a.call(CustomAttrSerializer, attrValue)) != null ? _b : attrValue;
return child.setAttribute(attrName, val);
};
const isMediaSlotElementDescendant = (el) => {
var _a;
return !!((_a = el.closest) == null ? void 0 : _a.call(el, '*[slot="media"]'));
};
const traverseForMediaStateReceivers = (rootNode, mediaStateReceiverCallback) => {
if (isMediaSlotElementDescendant(rootNode)) {
return;
}
const traverseForMediaStateReceiversSync = (rootNode2, mediaStateReceiverCallback2) => {
var _a, _b;
if (isMediaStateReceiver(rootNode2)) {
mediaStateReceiverCallback2(rootNode2);
}
const { children = [] } = rootNode2 != null ? rootNode2 : {};
const shadowChildren = (_b = (_a = rootNode2 == null ? void 0 : rootNode2.shadowRoot) == null ? void 0 : _a.children) != null ? _b : [];
const allChildren = [...children, ...shadowChildren];
allChildren.forEach(
(child) => traverseForMediaStateReceivers(
child,
mediaStateReceiverCallback2
)
);
};
const name = rootNode == null ? void 0 : rootNode.nodeName.toLowerCase();
if (name.includes("-") && !isMediaStateReceiver(rootNode)) {
import_server_safe_globals.globalThis.customElements.whenDefined(name).then(() => {
traverseForMediaStateReceiversSync(rootNode, mediaStateReceiverCallback);
});
return;
}
traverseForMediaStateReceiversSync(rootNode, mediaStateReceiverCallback);
};
const propagateMediaState = (els, stateName, val) => {
els.forEach((el) => {
if (stateName in el) {
el[stateName] = val;
return;
}
const relevantAttrs = getMediaUIAttributesFrom(el);
const attrName = stateName.toLowerCase();
if (!relevantAttrs.includes(attrName))
return;
setAttr(el, attrName, val);
});
};
const monitorForMediaStateReceivers = (rootNode, registerMediaStateReceiver, unregisterMediaStateReceiver) => {
traverseForMediaStateReceivers(rootNode, registerMediaStateReceiver);
const registerMediaStateReceiverHandler = (evt) => {
var _a;
const el = (_a = evt == null ? void 0 : evt.composedPath()[0]) != null ? _a : evt.target;
registerMediaStateReceiver(el);
};
const unregisterMediaStateReceiverHandler = (evt) => {
var _a;
const el = (_a = evt == null ? void 0 : evt.composedPath()[0]) != null ? _a : evt.target;
unregisterMediaStateReceiver(el);
};
rootNode.addEventListener(
import_constants.MediaUIEvents.REGISTER_MEDIA_STATE_RECEIVER,
registerMediaStateReceiverHandler
);
rootNode.addEventListener(
import_constants.MediaUIEvents.UNREGISTER_MEDIA_STATE_RECEIVER,
unregisterMediaStateReceiverHandler
);
const mutationCallback = (mutationsList) => {
mutationsList.forEach((mutationRecord) => {
const {
addedNodes = [],
removedNodes = [],
type,
target,
attributeName
} = mutationRecord;
if (type === "childList") {
Array.prototype.forEach.call(
addedNodes,
(node) => traverseForMediaStateReceivers(
node,
registerMediaStateReceiver
)
);
Array.prototype.forEach.call(
removedNodes,
(node) => traverseForMediaStateReceivers(
node,
unregisterMediaStateReceiver
)
);
} else if (type === "attributes" && attributeName === import_constants.MediaStateReceiverAttributes.MEDIA_CHROME_ATTRIBUTES) {
if (isMediaStateReceiver(target)) {
registerMediaStateReceiver(target);
} else {
unregisterMediaStateReceiver(target);
}
}
});
};
let prevSlotted = [];
const slotChangeHandler = (event) => {
const slotEl = event.target;
if (slotEl.name === "media")
return;
prevSlotted.forEach(
(node) => traverseForMediaStateReceivers(node, unregisterMediaStateReceiver)
);
prevSlotted = [
...slotEl.assignedElements({ flatten: true })
];
prevSlotted.forEach(
(node) => traverseForMediaStateReceivers(node, registerMediaStateReceiver)
);
};
rootNode.addEventListener("slotchange", slotChangeHandler);
const observer = new MutationObserver(mutationCallback);
observer.observe(rootNode, {
childList: true,
attributes: true,
subtree: true
});
const unsubscribe = () => {
traverseForMediaStateReceivers(rootNode, unregisterMediaStateReceiver);
rootNode.removeEventListener("slotchange", slotChangeHandler);
observer.disconnect();
rootNode.removeEventListener(
import_constants.MediaUIEvents.REGISTER_MEDIA_STATE_RECEIVER,
registerMediaStateReceiverHandler
);
rootNode.removeEventListener(
import_constants.MediaUIEvents.UNREGISTER_MEDIA_STATE_RECEIVER,
unregisterMediaStateReceiverHandler
);
};
return unsubscribe;
};
if (!import_server_safe_globals.globalThis.customElements.get("media-controller")) {
import_server_safe_globals.globalThis.customElements.define("media-controller", MediaController);
}
var media_controller_default = MediaController;

View File

@@ -0,0 +1,81 @@
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;
};
var media_duration_display_exports = {};
__export(media_duration_display_exports, {
default: () => media_duration_display_default
});
module.exports = __toCommonJS(media_duration_display_exports);
var import_media_text_display = require("./media-text-display.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_time = require("./utils/time.js");
var import_constants = require("./constants.js");
var import_element_utils = require("./utils/element-utils.js");
var _slot;
class MediaDurationDisplay extends import_media_text_display.MediaTextDisplay {
constructor() {
super();
/** @type {HTMLSlotElement} */
__privateAdd(this, _slot, void 0);
__privateSet(this, _slot, this.shadowRoot.querySelector("slot"));
__privateGet(this, _slot).textContent = (0, import_time.formatTime)(0);
}
static get observedAttributes() {
return [...super.observedAttributes, import_constants.MediaUIAttributes.MEDIA_DURATION];
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName === import_constants.MediaUIAttributes.MEDIA_DURATION) {
__privateGet(this, _slot).textContent = (0, import_time.formatTime)(+newValue);
}
super.attributeChangedCallback(attrName, oldValue, newValue);
}
/**
* @type {number | undefined} In seconds
*/
get mediaDuration() {
return (0, import_element_utils.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_DURATION);
}
set mediaDuration(time) {
(0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_DURATION, time);
}
}
_slot = new WeakMap();
if (!import_server_safe_globals.globalThis.customElements.get("media-duration-display")) {
import_server_safe_globals.globalThis.customElements.define(
"media-duration-display",
MediaDurationDisplay
);
}
var media_duration_display_default = MediaDurationDisplay;

View File

@@ -0,0 +1,122 @@
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 media_fullscreen_button_exports = {};
__export(media_fullscreen_button_exports, {
default: () => media_fullscreen_button_default
});
module.exports = __toCommonJS(media_fullscreen_button_exports);
var import_media_chrome_button = require("./media-chrome-button.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var import_element_utils = require("./utils/element-utils.js");
const enterFullscreenIcon = `<svg aria-hidden="true" viewBox="0 0 26 24">
<path d="M16 3v2.5h3.5V9H22V3h-6ZM4 9h2.5V5.5H10V3H4v6Zm15.5 9.5H16V21h6v-6h-2.5v3.5ZM6.5 15H4v6h6v-2.5H6.5V15Z"/>
</svg>`;
const exitFullscreenIcon = `<svg aria-hidden="true" viewBox="0 0 26 24">
<path d="M18.5 6.5V3H16v6h6V6.5h-3.5ZM16 21h2.5v-3.5H22V15h-6v6ZM4 17.5h3.5V21H10v-6H4v2.5Zm3.5-11H4V9h6V3H7.5v3.5Z"/>
</svg>`;
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = /*html*/
`
<style>
:host([${import_constants.MediaUIAttributes.MEDIA_IS_FULLSCREEN}]) slot[name=icon] slot:not([name=exit]) {
display: none !important;
}
${/* Double negative, but safer if display doesn't equal 'block' */
""}
:host(:not([${import_constants.MediaUIAttributes.MEDIA_IS_FULLSCREEN}])) slot[name=icon] slot:not([name=enter]) {
display: none !important;
}
:host([${import_constants.MediaUIAttributes.MEDIA_IS_FULLSCREEN}]) slot[name=tooltip-enter],
:host(:not([${import_constants.MediaUIAttributes.MEDIA_IS_FULLSCREEN}])) slot[name=tooltip-exit] {
display: none;
}
</style>
<slot name="icon">
<slot name="enter">${enterFullscreenIcon}</slot>
<slot name="exit">${exitFullscreenIcon}</slot>
</slot>
`;
const tooltipContent = (
/*html*/
`
<slot name="tooltip-enter">${import_labels.tooltipLabels.ENTER_FULLSCREEN}</slot>
<slot name="tooltip-exit">${import_labels.tooltipLabels.EXIT_FULLSCREEN}</slot>
`
);
const updateAriaLabel = (el) => {
const label = el.mediaIsFullscreen ? import_labels.verbs.EXIT_FULLSCREEN() : import_labels.verbs.ENTER_FULLSCREEN();
el.setAttribute("aria-label", label);
};
class MediaFullscreenButton extends import_media_chrome_button.MediaChromeButton {
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_IS_FULLSCREEN,
import_constants.MediaUIAttributes.MEDIA_FULLSCREEN_UNAVAILABLE
];
}
constructor(options = {}) {
super({ slotTemplate, tooltipContent, ...options });
}
connectedCallback() {
super.connectedCallback();
updateAriaLabel(this);
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === import_constants.MediaUIAttributes.MEDIA_IS_FULLSCREEN) {
updateAriaLabel(this);
}
}
/**
* @type {string | undefined} Fullscreen unavailability state
*/
get mediaFullscreenUnavailable() {
return (0, import_element_utils.getStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_FULLSCREEN_UNAVAILABLE);
}
set mediaFullscreenUnavailable(value) {
(0, import_element_utils.setStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_FULLSCREEN_UNAVAILABLE, value);
}
/**
* @type {boolean} Whether fullscreen is available
*/
get mediaIsFullscreen() {
return (0, import_element_utils.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_IS_FULLSCREEN);
}
set mediaIsFullscreen(value) {
(0, import_element_utils.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_IS_FULLSCREEN, value);
}
handleClick() {
const eventName = this.mediaIsFullscreen ? import_constants.MediaUIEvents.MEDIA_EXIT_FULLSCREEN_REQUEST : import_constants.MediaUIEvents.MEDIA_ENTER_FULLSCREEN_REQUEST;
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(eventName, { composed: true, bubbles: true })
);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-fullscreen-button")) {
import_server_safe_globals.globalThis.customElements.define(
"media-fullscreen-button",
MediaFullscreenButton
);
}
var media_fullscreen_button_default = MediaFullscreenButton;

View File

@@ -0,0 +1,184 @@
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;
};
var media_gesture_receiver_exports = {};
__export(media_gesture_receiver_exports, {
default: () => media_gesture_receiver_default
});
module.exports = __toCommonJS(media_gesture_receiver_exports);
var import_constants = require("./constants.js");
var import_element_utils = require("./utils/element-utils.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var _mediaController;
const template = import_server_safe_globals.document.createElement("template");
template.innerHTML = /*html*/
`
<style>
:host {
display: var(--media-control-display, var(--media-gesture-receiver-display, inline-block));
box-sizing: border-box;
}
</style>
`;
class MediaGestureReceiver extends import_server_safe_globals.globalThis.HTMLElement {
constructor(options = {}) {
super();
__privateAdd(this, _mediaController, void 0);
if (!this.shadowRoot) {
const shadow = this.attachShadow({ mode: "open" });
const buttonHTML = template.content.cloneNode(true);
this.nativeEl = buttonHTML;
let slotTemplate = options.slotTemplate;
if (!slotTemplate) {
slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = `<slot>${options.defaultContent || ""}</slot>`;
}
this.nativeEl.appendChild(slotTemplate.content.cloneNode(true));
shadow.appendChild(buttonHTML);
}
}
// NOTE: Currently "baking in" actions + attrs until we come up with
// a more robust architecture (CJP)
static get observedAttributes() {
return [
import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER,
import_constants.MediaUIAttributes.MEDIA_PAUSED
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
var _a, _b, _c, _d, _e;
if (attrName === import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
if (oldValue) {
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
}
if (newValue && this.isConnected) {
__privateSet(this, _mediaController, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
(_e = (_d = __privateGet(this, _mediaController)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
}
}
}
connectedCallback() {
var _a, _b, _c, _d;
this.tabIndex = -1;
this.setAttribute("aria-hidden", "true");
__privateSet(this, _mediaController, getMediaControllerEl(this));
if (this.getAttribute(import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER)) {
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.associateElement) == null ? void 0 : _b.call(_a, this);
}
(_c = __privateGet(this, _mediaController)) == null ? void 0 : _c.addEventListener("pointerdown", this);
(_d = __privateGet(this, _mediaController)) == null ? void 0 : _d.addEventListener("click", this);
}
disconnectedCallback() {
var _a, _b, _c, _d;
if (this.getAttribute(import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER)) {
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
}
(_c = __privateGet(this, _mediaController)) == null ? void 0 : _c.removeEventListener("pointerdown", this);
(_d = __privateGet(this, _mediaController)) == null ? void 0 : _d.removeEventListener("click", this);
__privateSet(this, _mediaController, null);
}
handleEvent(event) {
var _a;
const composedTarget = (_a = event.composedPath()) == null ? void 0 : _a[0];
const allowList = ["video", "media-controller"];
if (!allowList.includes(composedTarget == null ? void 0 : composedTarget.localName))
return;
if (event.type === "pointerdown") {
this._pointerType = event.pointerType;
} else if (event.type === "click") {
const { clientX, clientY } = event;
const { left, top, width, height } = this.getBoundingClientRect();
const x = clientX - left;
const y = clientY - top;
if (x < 0 || y < 0 || x > width || y > height || // In case this element has no dimensions (or display: none) return.
width === 0 && height === 0) {
return;
}
const { pointerType = this._pointerType } = event;
this._pointerType = void 0;
if (pointerType === import_constants.PointerTypes.TOUCH) {
this.handleTap(event);
return;
} else if (pointerType === import_constants.PointerTypes.MOUSE) {
this.handleMouseClick(event);
return;
}
}
}
/**
* @type {boolean} Is the media paused
*/
get mediaPaused() {
return (0, import_element_utils.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_PAUSED);
}
set mediaPaused(value) {
(0, import_element_utils.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_PAUSED, value);
}
// NOTE: Currently "baking in" actions + attrs until we come up with
// a more robust architecture (CJP)
/**
* @abstract
* @argument {Event} e
*/
handleTap(e) {
}
// eslint-disable-line
// eslint-disable-next-line
handleMouseClick(e) {
const eventName = this.mediaPaused ? import_constants.MediaUIEvents.MEDIA_PLAY_REQUEST : import_constants.MediaUIEvents.MEDIA_PAUSE_REQUEST;
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(eventName, { composed: true, bubbles: true })
);
}
}
_mediaController = new WeakMap();
function getMediaControllerEl(controlEl) {
var _a;
const mediaControllerId = controlEl.getAttribute(
import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER
);
if (mediaControllerId) {
return (_a = controlEl.getRootNode()) == null ? void 0 : _a.getElementById(mediaControllerId);
}
return (0, import_element_utils.closestComposedNode)(controlEl, "media-controller");
}
if (!import_server_safe_globals.globalThis.customElements.get("media-gesture-receiver")) {
import_server_safe_globals.globalThis.customElements.define(
"media-gesture-receiver",
MediaGestureReceiver
);
}
var media_gesture_receiver_default = MediaGestureReceiver;

View File

@@ -0,0 +1,127 @@
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 media_live_button_exports = {};
__export(media_live_button_exports, {
default: () => media_live_button_default
});
module.exports = __toCommonJS(media_live_button_exports);
var import_media_chrome_button = require("./media-chrome-button.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var import_element_utils = require("./utils/element-utils.js");
const { MEDIA_TIME_IS_LIVE, MEDIA_PAUSED } = import_constants.MediaUIAttributes;
const { MEDIA_SEEK_TO_LIVE_REQUEST, MEDIA_PLAY_REQUEST } = import_constants.MediaUIEvents;
const indicatorSVG = '<svg viewBox="0 0 6 12"><circle cx="3" cy="6" r="2"></circle></svg>';
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = /*html*/
`
<style>
:host { --media-tooltip-display: none; }
slot[name=indicator] > *,
:host ::slotted([slot=indicator]) {
${/* Override styles for icon-only buttons */
""}
min-width: auto;
fill: var(--media-live-button-icon-color, rgb(140, 140, 140));
color: var(--media-live-button-icon-color, rgb(140, 140, 140));
}
:host([${MEDIA_TIME_IS_LIVE}]:not([${MEDIA_PAUSED}])) slot[name=indicator] > *,
:host([${MEDIA_TIME_IS_LIVE}]:not([${MEDIA_PAUSED}])) ::slotted([slot=indicator]) {
fill: var(--media-live-button-indicator-color, rgb(255, 0, 0));
color: var(--media-live-button-indicator-color, rgb(255, 0, 0));
}
:host([${MEDIA_TIME_IS_LIVE}]:not([${MEDIA_PAUSED}])) {
cursor: not-allowed;
}
</style>
<slot name="indicator">${indicatorSVG}</slot>
${/*
A new line between spacer and text creates inconsistent spacing
between slotted items and default slots.
*/
""}
<slot name="spacer">&nbsp;</slot><slot name="text">LIVE</slot>
`;
const updateAriaAttributes = (el) => {
const isPausedOrNotLive = el.mediaPaused || !el.mediaTimeIsLive;
const label = isPausedOrNotLive ? import_labels.verbs.SEEK_LIVE() : import_labels.verbs.PLAYING_LIVE();
el.setAttribute("aria-label", label);
isPausedOrNotLive ? el.removeAttribute("aria-disabled") : el.setAttribute("aria-disabled", "true");
};
class MediaLiveButton extends import_media_chrome_button.MediaChromeButton {
static get observedAttributes() {
return [...super.observedAttributes, MEDIA_PAUSED, MEDIA_TIME_IS_LIVE];
}
constructor(options = {}) {
super({ slotTemplate, ...options });
}
connectedCallback() {
updateAriaAttributes(this);
super.connectedCallback();
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
updateAriaAttributes(this);
}
/**
* @type {boolean} Is the media paused
*/
get mediaPaused() {
return (0, import_element_utils.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_PAUSED);
}
set mediaPaused(value) {
(0, import_element_utils.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_PAUSED, value);
}
/**
* @type {boolean} Is the media playback currently live
*/
get mediaTimeIsLive() {
return (0, import_element_utils.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_TIME_IS_LIVE);
}
set mediaTimeIsLive(value) {
(0, import_element_utils.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_TIME_IS_LIVE, value);
}
handleClick() {
if (!this.mediaPaused && this.mediaTimeIsLive)
return;
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(MEDIA_SEEK_TO_LIVE_REQUEST, {
composed: true,
bubbles: true
})
);
if (this.hasAttribute(MEDIA_PAUSED)) {
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(MEDIA_PLAY_REQUEST, {
composed: true,
bubbles: true
})
);
}
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-live-button")) {
import_server_safe_globals.globalThis.customElements.define("media-live-button", MediaLiveButton);
}
var media_live_button_default = MediaLiveButton;

View File

@@ -0,0 +1,207 @@
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;
};
var media_loading_indicator_exports = {};
__export(media_loading_indicator_exports, {
Attributes: () => Attributes,
default: () => media_loading_indicator_default
});
module.exports = __toCommonJS(media_loading_indicator_exports);
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_element_utils = require("./utils/element-utils.js");
var _mediaController, _delay;
const Attributes = {
LOADING_DELAY: "loadingdelay"
};
const DEFAULT_LOADING_DELAY = 500;
const template = import_server_safe_globals.document.createElement("template");
const loadingIndicatorIcon = `
<svg aria-hidden="true" viewBox="0 0 100 100">
<path d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="1s"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</path>
</svg>
`;
template.innerHTML = /*html*/
`
<style>
:host {
display: var(--media-control-display, var(--media-loading-indicator-display, inline-block));
vertical-align: middle;
box-sizing: border-box;
--_loading-indicator-delay: var(--media-loading-indicator-transition-delay, ${DEFAULT_LOADING_DELAY}ms);
}
#status {
color: rgba(0,0,0,0);
width: 0px;
height: 0px;
}
:host slot[name=icon] > *,
:host ::slotted([slot=icon]) {
opacity: var(--media-loading-indicator-opacity, 0);
transition: opacity 0.15s;
}
:host([${import_constants.MediaUIAttributes.MEDIA_LOADING}]:not([${import_constants.MediaUIAttributes.MEDIA_PAUSED}])) slot[name=icon] > *,
:host([${import_constants.MediaUIAttributes.MEDIA_LOADING}]:not([${import_constants.MediaUIAttributes.MEDIA_PAUSED}])) ::slotted([slot=icon]) {
opacity: var(--media-loading-indicator-opacity, 1);
transition: opacity 0.15s var(--_loading-indicator-delay);
}
:host #status {
visibility: var(--media-loading-indicator-opacity, hidden);
transition: visibility 0.15s;
}
:host([${import_constants.MediaUIAttributes.MEDIA_LOADING}]:not([${import_constants.MediaUIAttributes.MEDIA_PAUSED}])) #status {
visibility: var(--media-loading-indicator-opacity, visible);
transition: visibility 0.15s var(--_loading-indicator-delay);
}
svg, img, ::slotted(svg), ::slotted(img) {
width: var(--media-loading-indicator-icon-width);
height: var(--media-loading-indicator-icon-height, 100px);
fill: var(--media-icon-color, var(--media-primary-color, rgb(238 238 238)));
vertical-align: middle;
}
</style>
<slot name="icon">${loadingIndicatorIcon}</slot>
<div id="status" role="status" aria-live="polite">${import_labels.nouns.MEDIA_LOADING()}</div>
`;
class MediaLoadingIndicator extends import_server_safe_globals.globalThis.HTMLElement {
constructor() {
super();
__privateAdd(this, _mediaController, void 0);
__privateAdd(this, _delay, DEFAULT_LOADING_DELAY);
if (!this.shadowRoot) {
const shadow = this.attachShadow({ mode: "open" });
const indicatorHTML = template.content.cloneNode(true);
shadow.appendChild(indicatorHTML);
}
}
static get observedAttributes() {
return [
import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER,
import_constants.MediaUIAttributes.MEDIA_PAUSED,
import_constants.MediaUIAttributes.MEDIA_LOADING,
Attributes.LOADING_DELAY
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
var _a, _b, _c, _d, _e;
if (attrName === Attributes.LOADING_DELAY && oldValue !== newValue) {
this.loadingDelay = Number(newValue);
} else if (attrName === import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
if (oldValue) {
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
}
if (newValue && this.isConnected) {
__privateSet(this, _mediaController, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
(_e = (_d = __privateGet(this, _mediaController)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
}
}
}
connectedCallback() {
var _a, _b, _c;
const mediaControllerId = this.getAttribute(
import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER
);
if (mediaControllerId) {
__privateSet(this, _mediaController, (_a = this.getRootNode()) == null ? void 0 : _a.getElementById(
mediaControllerId
));
(_c = (_b = __privateGet(this, _mediaController)) == null ? void 0 : _b.associateElement) == null ? void 0 : _c.call(_b, this);
}
}
disconnectedCallback() {
var _a, _b;
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
}
/**
* Delay in ms
*/
get loadingDelay() {
return __privateGet(this, _delay);
}
set loadingDelay(delay) {
__privateSet(this, _delay, delay);
const { style } = (0, import_element_utils.getOrInsertCSSRule)(this.shadowRoot, ":host");
style.setProperty(
"--_loading-indicator-delay",
`var(--media-loading-indicator-transition-delay, ${delay}ms)`
);
}
/**
* Is the media paused
*/
get mediaPaused() {
return (0, import_element_utils.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_PAUSED);
}
set mediaPaused(value) {
(0, import_element_utils.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_PAUSED, value);
}
/**
* Is the media loading
*/
get mediaLoading() {
return (0, import_element_utils.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_LOADING);
}
set mediaLoading(value) {
(0, import_element_utils.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_LOADING, value);
}
}
_mediaController = new WeakMap();
_delay = new WeakMap();
if (!import_server_safe_globals.globalThis.customElements.get("media-loading-indicator")) {
import_server_safe_globals.globalThis.customElements.define(
"media-loading-indicator",
MediaLoadingIndicator
);
}
var media_loading_indicator_default = MediaLoadingIndicator;

View File

@@ -0,0 +1,122 @@
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 media_mute_button_exports = {};
__export(media_mute_button_exports, {
default: () => media_mute_button_default
});
module.exports = __toCommonJS(media_mute_button_exports);
var import_media_chrome_button = require("./media-chrome-button.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var import_element_utils = require("./utils/element-utils.js");
const { MEDIA_VOLUME_LEVEL } = import_constants.MediaUIAttributes;
const offIcon = `<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M16.5 12A4.5 4.5 0 0 0 14 8v2.18l2.45 2.45a4.22 4.22 0 0 0 .05-.63Zm2.5 0a6.84 6.84 0 0 1-.54 2.64L20 16.15A8.8 8.8 0 0 0 21 12a9 9 0 0 0-7-8.77v2.06A7 7 0 0 1 19 12ZM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25A6.92 6.92 0 0 1 14 18.7v2.06A9 9 0 0 0 17.69 19l2 2.05L21 19.73l-9-9L4.27 3ZM12 4 9.91 6.09 12 8.18V4Z"/>
</svg>`;
const lowIcon = `<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3Zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.47 4.47 0 0 0 2.5-4Z"/>
</svg>`;
const highIcon = `<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3Zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.47 4.47 0 0 0 2.5-4ZM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54Z"/>
</svg>`;
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = /*html*/
`
<style>
${/* Default to High slot/icon. */
""}
:host(:not([${MEDIA_VOLUME_LEVEL}])) slot[name=icon] slot:not([name=high]),
:host([${MEDIA_VOLUME_LEVEL}=high]) slot[name=icon] slot:not([name=high]) {
display: none !important;
}
:host([${MEDIA_VOLUME_LEVEL}=off]) slot[name=icon] slot:not([name=off]) {
display: none !important;
}
:host([${MEDIA_VOLUME_LEVEL}=low]) slot[name=icon] slot:not([name=low]) {
display: none !important;
}
:host([${MEDIA_VOLUME_LEVEL}=medium]) slot[name=icon] slot:not([name=medium]) {
display: none !important;
}
:host(:not([${MEDIA_VOLUME_LEVEL}=off])) slot[name=tooltip-unmute],
:host([${MEDIA_VOLUME_LEVEL}=off]) slot[name=tooltip-mute] {
display: none;
}
</style>
<slot name="icon">
<slot name="off">${offIcon}</slot>
<slot name="low">${lowIcon}</slot>
<slot name="medium">${lowIcon}</slot>
<slot name="high">${highIcon}</slot>
</slot>
`;
const tooltipContent = (
/*html*/
`
<slot name="tooltip-mute">${import_labels.tooltipLabels.MUTE}</slot>
<slot name="tooltip-unmute">${import_labels.tooltipLabels.UNMUTE}</slot>
`
);
const updateAriaLabel = (el) => {
const muted = el.mediaVolumeLevel === "off";
const label = muted ? import_labels.verbs.UNMUTE() : import_labels.verbs.MUTE();
el.setAttribute("aria-label", label);
};
class MediaMuteButton extends import_media_chrome_button.MediaChromeButton {
static get observedAttributes() {
return [...super.observedAttributes, import_constants.MediaUIAttributes.MEDIA_VOLUME_LEVEL];
}
constructor(options = {}) {
super({ slotTemplate, tooltipContent, ...options });
}
connectedCallback() {
updateAriaLabel(this);
super.connectedCallback();
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName === import_constants.MediaUIAttributes.MEDIA_VOLUME_LEVEL) {
updateAriaLabel(this);
}
super.attributeChangedCallback(attrName, oldValue, newValue);
}
/**
* @type {string | undefined}
*/
get mediaVolumeLevel() {
return (0, import_element_utils.getStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_VOLUME_LEVEL);
}
set mediaVolumeLevel(value) {
(0, import_element_utils.setStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_VOLUME_LEVEL, value);
}
handleClick() {
const eventName = this.mediaVolumeLevel === "off" ? import_constants.MediaUIEvents.MEDIA_UNMUTE_REQUEST : import_constants.MediaUIEvents.MEDIA_MUTE_REQUEST;
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(eventName, { composed: true, bubbles: true })
);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-mute-button")) {
import_server_safe_globals.globalThis.customElements.define("media-mute-button", MediaMuteButton);
}
var media_mute_button_default = MediaMuteButton;

View File

@@ -0,0 +1,116 @@
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 media_pip_button_exports = {};
__export(media_pip_button_exports, {
default: () => media_pip_button_default
});
module.exports = __toCommonJS(media_pip_button_exports);
var import_media_chrome_button = require("./media-chrome-button.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var import_element_utils = require("./utils/element-utils.js");
const pipIcon = `<svg aria-hidden="true" viewBox="0 0 28 24">
<path d="M24 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h20a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Zm-1 16H5V5h18v14Zm-3-8h-7v5h7v-5Z"/>
</svg>`;
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = /*html*/
`
<style>
:host([${import_constants.MediaUIAttributes.MEDIA_IS_PIP}]) slot[name=icon] slot:not([name=exit]) {
display: none !important;
}
${/* Double negative, but safer if display doesn't equal 'block' */
""}
:host(:not([${import_constants.MediaUIAttributes.MEDIA_IS_PIP}])) slot[name=icon] slot:not([name=enter]) {
display: none !important;
}
:host([${import_constants.MediaUIAttributes.MEDIA_IS_PIP}]) slot[name=tooltip-enter],
:host(:not([${import_constants.MediaUIAttributes.MEDIA_IS_PIP}])) slot[name=tooltip-exit] {
display: none;
}
</style>
<slot name="icon">
<slot name="enter">${pipIcon}</slot>
<slot name="exit">${pipIcon}</slot>
</slot>
`;
const tooltipContent = (
/*html*/
`
<slot name="tooltip-enter">${import_labels.tooltipLabels.ENTER_PIP}</slot>
<slot name="tooltip-exit">${import_labels.tooltipLabels.EXIT_PIP}</slot>
`
);
const updateAriaLabel = (el) => {
const label = el.mediaIsPip ? import_labels.verbs.EXIT_PIP() : import_labels.verbs.ENTER_PIP();
el.setAttribute("aria-label", label);
};
class MediaPipButton extends import_media_chrome_button.MediaChromeButton {
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_IS_PIP,
import_constants.MediaUIAttributes.MEDIA_PIP_UNAVAILABLE
];
}
constructor(options = {}) {
super({ slotTemplate, tooltipContent, ...options });
}
connectedCallback() {
updateAriaLabel(this);
super.connectedCallback();
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName === import_constants.MediaUIAttributes.MEDIA_IS_PIP) {
updateAriaLabel(this);
}
super.attributeChangedCallback(attrName, oldValue, newValue);
}
/**
* @type {string | undefined} Pip unavailability state
*/
get mediaPipUnavailable() {
return (0, import_element_utils.getStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_PIP_UNAVAILABLE);
}
set mediaPipUnavailable(value) {
(0, import_element_utils.setStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_PIP_UNAVAILABLE, value);
}
/**
* @type {boolean} Is the media currently playing picture-in-picture
*/
get mediaIsPip() {
return (0, import_element_utils.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_IS_PIP);
}
set mediaIsPip(value) {
(0, import_element_utils.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_IS_PIP, value);
}
handleClick() {
const eventName = this.mediaIsPip ? import_constants.MediaUIEvents.MEDIA_EXIT_PIP_REQUEST : import_constants.MediaUIEvents.MEDIA_ENTER_PIP_REQUEST;
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(eventName, { composed: true, bubbles: true })
);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-pip-button")) {
import_server_safe_globals.globalThis.customElements.define("media-pip-button", MediaPipButton);
}
var media_pip_button_default = MediaPipButton;

View File

@@ -0,0 +1,106 @@
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 media_play_button_exports = {};
__export(media_play_button_exports, {
MediaPlayButton: () => MediaPlayButton,
default: () => media_play_button_default
});
module.exports = __toCommonJS(media_play_button_exports);
var import_media_chrome_button = require("./media-chrome-button.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var import_element_utils = require("./utils/element-utils.js");
const playIcon = `<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="m6 21 15-9L6 3v18Z"/>
</svg>`;
const pauseIcon = `<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M6 20h4V4H6v16Zm8-16v16h4V4h-4Z"/>
</svg>`;
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = /*html*/
`
<style>
:host([${import_constants.MediaUIAttributes.MEDIA_PAUSED}]) slot[name=pause],
:host(:not([${import_constants.MediaUIAttributes.MEDIA_PAUSED}])) slot[name=play] {
display: none !important;
}
:host([${import_constants.MediaUIAttributes.MEDIA_PAUSED}]) slot[name=tooltip-pause],
:host(:not([${import_constants.MediaUIAttributes.MEDIA_PAUSED}])) slot[name=tooltip-play] {
display: none;
}
</style>
<slot name="icon">
<slot name="play">${playIcon}</slot>
<slot name="pause">${pauseIcon}</slot>
</slot>
`;
const tooltipContent = (
/*html*/
`
<slot name="tooltip-play">${import_labels.tooltipLabels.PLAY}</slot>
<slot name="tooltip-pause">${import_labels.tooltipLabels.PAUSE}</slot>
`
);
const updateAriaLabel = (el) => {
const label = el.mediaPaused ? import_labels.verbs.PLAY() : import_labels.verbs.PAUSE();
el.setAttribute("aria-label", label);
};
class MediaPlayButton extends import_media_chrome_button.MediaChromeButton {
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_PAUSED,
import_constants.MediaUIAttributes.MEDIA_ENDED
];
}
constructor(options = {}) {
super({ slotTemplate, tooltipContent, ...options });
}
connectedCallback() {
updateAriaLabel(this);
super.connectedCallback();
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName === import_constants.MediaUIAttributes.MEDIA_PAUSED) {
updateAriaLabel(this);
}
super.attributeChangedCallback(attrName, oldValue, newValue);
}
/**
* Is the media paused
*/
get mediaPaused() {
return (0, import_element_utils.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_PAUSED);
}
set mediaPaused(value) {
(0, import_element_utils.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_PAUSED, value);
}
handleClick() {
const eventName = this.mediaPaused ? import_constants.MediaUIEvents.MEDIA_PLAY_REQUEST : import_constants.MediaUIEvents.MEDIA_PAUSE_REQUEST;
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(eventName, { composed: true, bubbles: true })
);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-play-button")) {
import_server_safe_globals.globalThis.customElements.define("media-play-button", MediaPlayButton);
}
var media_play_button_default = MediaPlayButton;

View File

@@ -0,0 +1,141 @@
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 media_playback_rate_button_exports = {};
__export(media_playback_rate_button_exports, {
Attributes: () => Attributes,
DEFAULT_RATE: () => DEFAULT_RATE,
DEFAULT_RATES: () => DEFAULT_RATES,
default: () => media_playback_rate_button_default
});
module.exports = __toCommonJS(media_playback_rate_button_exports);
var import_media_chrome_button = require("./media-chrome-button.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var import_attribute_token_list = require("./utils/attribute-token-list.js");
var import_element_utils = require("./utils/element-utils.js");
var _rates;
const Attributes = {
RATES: "rates"
};
const DEFAULT_RATES = [1, 1.2, 1.5, 1.7, 2];
const DEFAULT_RATE = 1;
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = /*html*/
`
<style>
:host {
min-width: 5ch;
padding: var(--media-button-padding, var(--media-control-padding, 10px 5px));
}
</style>
<slot name="icon"></slot>
`;
class MediaPlaybackRateButton extends import_media_chrome_button.MediaChromeButton {
constructor(options = {}) {
super({
slotTemplate,
tooltipContent: import_labels.tooltipLabels.PLAYBACK_RATE,
...options
});
__privateAdd(this, _rates, new import_attribute_token_list.AttributeTokenList(this, Attributes.RATES, {
defaultValue: DEFAULT_RATES
}));
this.container = this.shadowRoot.querySelector('slot[name="icon"]');
this.container.innerHTML = `${DEFAULT_RATE}x`;
}
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_PLAYBACK_RATE,
Attributes.RATES
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === Attributes.RATES) {
__privateGet(this, _rates).value = newValue;
}
if (attrName === import_constants.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", import_labels.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 __privateGet(this, _rates);
}
set rates(value) {
if (!value) {
__privateGet(this, _rates).value = "";
} else if (Array.isArray(value)) {
__privateGet(this, _rates).value = value.join(" ");
}
}
/**
* @type {number} The current playback rate
*/
get mediaPlaybackRate() {
return (0, import_element_utils.getNumericAttr)(
this,
import_constants.MediaUIAttributes.MEDIA_PLAYBACK_RATE,
DEFAULT_RATE
);
}
set mediaPlaybackRate(value) {
(0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_PLAYBACK_RATE, value);
}
handleClick() {
var _a, _b;
const availableRates = Array.from(this.rates.values(), (str) => +str).sort(
(a, b) => a - b
);
const detail = (_b = (_a = availableRates.find((r) => r > this.mediaPlaybackRate)) != null ? _a : availableRates[0]) != null ? _b : DEFAULT_RATE;
const evt = new import_server_safe_globals.globalThis.CustomEvent(
import_constants.MediaUIEvents.MEDIA_PLAYBACK_RATE_REQUEST,
{ composed: true, bubbles: true, detail }
);
this.dispatchEvent(evt);
}
}
_rates = new WeakMap();
if (!import_server_safe_globals.globalThis.customElements.get("media-playback-rate-button")) {
import_server_safe_globals.globalThis.customElements.define(
"media-playback-rate-button",
MediaPlaybackRateButton
);
}
var media_playback_rate_button_default = MediaPlaybackRateButton;

View File

@@ -0,0 +1,111 @@
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 media_poster_image_exports = {};
__export(media_poster_image_exports, {
Attributes: () => Attributes,
default: () => media_poster_image_default
});
module.exports = __toCommonJS(media_poster_image_exports);
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_element_utils = require("./utils/element-utils.js");
const Attributes = {
PLACEHOLDER_SRC: "placeholdersrc",
SRC: "src"
};
const template = import_server_safe_globals.document.createElement("template");
template.innerHTML = /*html*/
`
<style>
:host {
pointer-events: none;
display: var(--media-poster-image-display, inline-block);
box-sizing: border-box;
}
img {
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
background-repeat: no-repeat;
background-position: var(--media-poster-image-background-position, var(--media-object-position, center));
background-size: var(--media-poster-image-background-size, var(--media-object-fit, contain));
object-fit: var(--media-object-fit, contain);
object-position: var(--media-object-position, center);
}
</style>
<img part="poster img" aria-hidden="true" id="image"/>
`;
const unsetBackgroundImage = (el) => {
el.style.removeProperty("background-image");
};
const setBackgroundImage = (el, image) => {
el.style["background-image"] = `url('${image}')`;
};
class MediaPosterImage extends import_server_safe_globals.globalThis.HTMLElement {
static get observedAttributes() {
return [Attributes.PLACEHOLDER_SRC, Attributes.SRC];
}
constructor() {
super();
if (!this.shadowRoot) {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
this.image = this.shadowRoot.querySelector("#image");
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName === Attributes.SRC) {
if (newValue == null) {
this.image.removeAttribute(Attributes.SRC);
} else {
this.image.setAttribute(Attributes.SRC, newValue);
}
}
if (attrName === Attributes.PLACEHOLDER_SRC) {
if (newValue == null) {
unsetBackgroundImage(this.image);
} else {
setBackgroundImage(this.image, newValue);
}
}
}
/**
*
*/
get placeholderSrc() {
return (0, import_element_utils.getStringAttr)(this, Attributes.PLACEHOLDER_SRC);
}
set placeholderSrc(value) {
(0, import_element_utils.setStringAttr)(this, Attributes.SRC, value);
}
/**
*
*/
get src() {
return (0, import_element_utils.getStringAttr)(this, Attributes.SRC);
}
set src(value) {
(0, import_element_utils.setStringAttr)(this, Attributes.SRC, value);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-poster-image")) {
import_server_safe_globals.globalThis.customElements.define("media-poster-image", MediaPosterImage);
}
var media_poster_image_default = MediaPosterImage;

View File

@@ -0,0 +1,88 @@
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;
};
var media_preview_chapter_display_exports = {};
__export(media_preview_chapter_display_exports, {
default: () => media_preview_chapter_display_default
});
module.exports = __toCommonJS(media_preview_chapter_display_exports);
var import_media_text_display = require("./media-text-display.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_element_utils = require("./utils/element-utils.js");
var _slot;
class MediaPreviewChapterDisplay extends import_media_text_display.MediaTextDisplay {
constructor() {
super();
__privateAdd(this, _slot, void 0);
__privateSet(this, _slot, this.shadowRoot.querySelector("slot"));
}
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_PREVIEW_CHAPTER
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === import_constants.MediaUIAttributes.MEDIA_PREVIEW_CHAPTER) {
if (newValue !== oldValue && newValue != null) {
__privateGet(this, _slot).textContent = newValue;
if (newValue !== "") {
this.setAttribute("aria-valuetext", `chapter: ${newValue}`);
} else {
this.removeAttribute("aria-valuetext");
}
}
}
}
/**
* @type {string | undefined} Timeline preview chapter
*/
get mediaPreviewChapter() {
return (0, import_element_utils.getStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_PREVIEW_CHAPTER);
}
set mediaPreviewChapter(value) {
(0, import_element_utils.setStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_PREVIEW_CHAPTER, value);
}
}
_slot = new WeakMap();
if (!import_server_safe_globals.globalThis.customElements.get("media-preview-chapter-display")) {
import_server_safe_globals.globalThis.customElements.define(
"media-preview-chapter-display",
MediaPreviewChapterDisplay
);
}
var media_preview_chapter_display_default = MediaPreviewChapterDisplay;

View File

@@ -0,0 +1,188 @@
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;
};
var media_preview_thumbnail_exports = {};
__export(media_preview_thumbnail_exports, {
default: () => media_preview_thumbnail_default
});
module.exports = __toCommonJS(media_preview_thumbnail_exports);
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_element_utils = require("./utils/element-utils.js");
var _mediaController;
const template = import_server_safe_globals.document.createElement("template");
template.innerHTML = /*html*/
`
<style>
:host {
box-sizing: border-box;
display: var(--media-control-display, var(--media-preview-thumbnail-display, inline-block));
overflow: hidden;
}
img {
display: none;
position: relative;
}
</style>
<img crossorigin loading="eager" decoding="async">
`;
class MediaPreviewThumbnail extends import_server_safe_globals.globalThis.HTMLElement {
constructor() {
super();
__privateAdd(this, _mediaController, void 0);
if (!this.shadowRoot) {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
static get observedAttributes() {
return [
import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER,
import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE,
import_constants.MediaUIAttributes.MEDIA_PREVIEW_COORDS
];
}
connectedCallback() {
var _a, _b, _c;
const mediaControllerId = this.getAttribute(
import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER
);
if (mediaControllerId) {
__privateSet(
this,
_mediaController,
// @ts-ignore
(_a = this.getRootNode()) == null ? void 0 : _a.getElementById(mediaControllerId)
);
(_c = (_b = __privateGet(this, _mediaController)) == null ? void 0 : _b.associateElement) == null ? void 0 : _c.call(_b, this);
}
}
disconnectedCallback() {
var _a, _b;
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
}
attributeChangedCallback(attrName, oldValue, newValue) {
var _a, _b, _c, _d, _e;
if ([
import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE,
import_constants.MediaUIAttributes.MEDIA_PREVIEW_COORDS
].includes(attrName)) {
this.update();
}
if (attrName === import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
if (oldValue) {
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
}
if (newValue && this.isConnected) {
__privateSet(this, _mediaController, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
(_e = (_d = __privateGet(this, _mediaController)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
}
}
}
/**
* @type {string | undefined} The url of the preview image
*/
get mediaPreviewImage() {
return (0, import_element_utils.getStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE);
}
set mediaPreviewImage(value) {
(0, import_element_utils.setStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE, value);
}
/**
* @type {Array<number> | undefined} Fixed length array [x, y, width, height] or undefined
*/
get mediaPreviewCoords() {
const attrVal = this.getAttribute(import_constants.MediaUIAttributes.MEDIA_PREVIEW_COORDS);
if (!attrVal)
return void 0;
return attrVal.split(/\s+/).map((coord) => +coord);
}
set mediaPreviewCoords(value) {
if (!value) {
this.removeAttribute(import_constants.MediaUIAttributes.MEDIA_PREVIEW_COORDS);
return;
}
this.setAttribute(import_constants.MediaUIAttributes.MEDIA_PREVIEW_COORDS, value.join(" "));
}
update() {
const coords = this.mediaPreviewCoords;
const previewImage = this.mediaPreviewImage;
if (!(coords && previewImage))
return;
const [x, y, w, h] = coords;
const src = previewImage.split("#")[0];
const computedStyle = getComputedStyle(this);
const { maxWidth, maxHeight, minWidth, minHeight } = computedStyle;
const maxRatio = Math.min(parseInt(maxWidth) / w, parseInt(maxHeight) / h);
const minRatio = Math.max(parseInt(minWidth) / w, parseInt(minHeight) / h);
const isScalingDown = maxRatio < 1;
const scale = isScalingDown ? maxRatio : minRatio > 1 ? minRatio : 1;
const { style } = (0, import_element_utils.getOrInsertCSSRule)(this.shadowRoot, ":host");
const imgStyle = (0, import_element_utils.getOrInsertCSSRule)(this.shadowRoot, "img").style;
const img = this.shadowRoot.querySelector("img");
const extremum = isScalingDown ? "min" : "max";
style.setProperty(`${extremum}-width`, "initial", "important");
style.setProperty(`${extremum}-height`, "initial", "important");
style.width = `${w * scale}px`;
style.height = `${h * scale}px`;
const resize = () => {
imgStyle.width = `${this.imgWidth * scale}px`;
imgStyle.height = `${this.imgHeight * scale}px`;
imgStyle.display = "block";
};
if (img.src !== src) {
img.onload = () => {
this.imgWidth = img.naturalWidth;
this.imgHeight = img.naturalHeight;
resize();
};
img.src = src;
resize();
}
resize();
imgStyle.transform = `translate(-${x * scale}px, -${y * scale}px)`;
}
}
_mediaController = new WeakMap();
if (!import_server_safe_globals.globalThis.customElements.get("media-preview-thumbnail")) {
import_server_safe_globals.globalThis.customElements.define(
"media-preview-thumbnail",
MediaPreviewThumbnail
);
}
var media_preview_thumbnail_default = MediaPreviewThumbnail;

View File

@@ -0,0 +1,80 @@
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;
};
var media_preview_time_display_exports = {};
__export(media_preview_time_display_exports, {
default: () => media_preview_time_display_default
});
module.exports = __toCommonJS(media_preview_time_display_exports);
var import_media_text_display = require("./media-text-display.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_time = require("./utils/time.js");
var import_constants = require("./constants.js");
var import_element_utils = require("./utils/element-utils.js");
var _slot;
class MediaPreviewTimeDisplay extends import_media_text_display.MediaTextDisplay {
constructor() {
super();
__privateAdd(this, _slot, void 0);
__privateSet(this, _slot, this.shadowRoot.querySelector("slot"));
__privateGet(this, _slot).textContent = (0, import_time.formatTime)(0);
}
static get observedAttributes() {
return [...super.observedAttributes, import_constants.MediaUIAttributes.MEDIA_PREVIEW_TIME];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === import_constants.MediaUIAttributes.MEDIA_PREVIEW_TIME && newValue != null) {
__privateGet(this, _slot).textContent = (0, import_time.formatTime)(parseFloat(newValue));
}
}
/**
* Timeline preview time
*/
get mediaPreviewTime() {
return (0, import_element_utils.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_PREVIEW_TIME);
}
set mediaPreviewTime(value) {
(0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_PREVIEW_TIME, value);
}
}
_slot = new WeakMap();
if (!import_server_safe_globals.globalThis.customElements.get("media-preview-time-display")) {
import_server_safe_globals.globalThis.customElements.define(
"media-preview-time-display",
MediaPreviewTimeDisplay
);
}
var media_preview_time_display_default = MediaPreviewTimeDisplay;

View File

@@ -0,0 +1,118 @@
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 media_seek_backward_button_exports = {};
__export(media_seek_backward_button_exports, {
Attributes: () => Attributes,
default: () => media_seek_backward_button_default
});
module.exports = __toCommonJS(media_seek_backward_button_exports);
var import_media_chrome_button = require("./media-chrome-button.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_element_utils = require("./utils/element-utils.js");
var import_labels = require("./labels/labels.js");
var import_element_utils2 = require("./utils/element-utils.js");
const Attributes = {
SEEK_OFFSET: "seekoffset"
};
const DEFAULT_SEEK_OFFSET = 30;
const backwardIcon = `<svg aria-hidden="true" viewBox="0 0 20 24"><defs><style>.text{font-size:8px;font-family:Arial-BoldMT, Arial;font-weight:700;}</style></defs><text class="text value" transform="translate(2.18 19.87)">${DEFAULT_SEEK_OFFSET}</text><path d="M10 6V3L4.37 7 10 10.94V8a5.54 5.54 0 0 1 1.9 10.48v2.12A7.5 7.5 0 0 0 10 6Z"/></svg>`;
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = `
<slot name="icon">${backwardIcon}</slot>
`;
const DEFAULT_TIME = 0;
class MediaSeekBackwardButton extends import_media_chrome_button.MediaChromeButton {
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME,
Attributes.SEEK_OFFSET
];
}
constructor(options = {}) {
super({
slotTemplate,
tooltipContent: import_labels.tooltipLabels.SEEK_BACKWARD,
...options
});
}
connectedCallback() {
this.seekOffset = (0, import_element_utils.getNumericAttr)(
this,
Attributes.SEEK_OFFSET,
DEFAULT_SEEK_OFFSET
);
super.connectedCallback();
}
attributeChangedCallback(attrName, _oldValue, newValue) {
if (attrName === Attributes.SEEK_OFFSET) {
this.seekOffset = (0, import_element_utils.getNumericAttr)(
this,
Attributes.SEEK_OFFSET,
DEFAULT_SEEK_OFFSET
);
}
super.attributeChangedCallback(attrName, _oldValue, newValue);
}
// Own props
/**
* Seek amount in seconds
*/
get seekOffset() {
return (0, import_element_utils.getNumericAttr)(this, Attributes.SEEK_OFFSET, DEFAULT_SEEK_OFFSET);
}
set seekOffset(value) {
(0, import_element_utils.setNumericAttr)(this, Attributes.SEEK_OFFSET, value);
this.setAttribute(
"aria-label",
import_labels.verbs.SEEK_BACK_N_SECS({ seekOffset: this.seekOffset })
);
(0, import_element_utils2.updateIconText)((0, import_element_utils2.getSlotted)(this, "icon"), this.seekOffset);
}
// Props derived from Media UI Attributes
/**
* The current time in seconds
*/
get mediaCurrentTime() {
return (0, import_element_utils.getNumericAttr)(
this,
import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME,
DEFAULT_TIME
);
}
set mediaCurrentTime(time) {
(0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME, time);
}
handleClick() {
const detail = Math.max(this.mediaCurrentTime - this.seekOffset, 0);
const evt = new import_server_safe_globals.globalThis.CustomEvent(import_constants.MediaUIEvents.MEDIA_SEEK_REQUEST, {
composed: true,
bubbles: true,
detail
});
this.dispatchEvent(evt);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-seek-backward-button")) {
import_server_safe_globals.globalThis.customElements.define(
"media-seek-backward-button",
MediaSeekBackwardButton
);
}
var media_seek_backward_button_default = MediaSeekBackwardButton;

View File

@@ -0,0 +1,118 @@
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 media_seek_forward_button_exports = {};
__export(media_seek_forward_button_exports, {
Attributes: () => Attributes,
default: () => media_seek_forward_button_default
});
module.exports = __toCommonJS(media_seek_forward_button_exports);
var import_media_chrome_button = require("./media-chrome-button.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_constants = require("./constants.js");
var import_element_utils = require("./utils/element-utils.js");
var import_labels = require("./labels/labels.js");
var import_element_utils2 = require("./utils/element-utils.js");
const Attributes = {
SEEK_OFFSET: "seekoffset"
};
const DEFAULT_SEEK_OFFSET = 30;
const forwardIcon = `<svg aria-hidden="true" viewBox="0 0 20 24"><defs><style>.text{font-size:8px;font-family:Arial-BoldMT, Arial;font-weight:700;}</style></defs><text class="text value" transform="translate(8.9 19.87)">${DEFAULT_SEEK_OFFSET}</text><path d="M10 6V3l5.61 4L10 10.94V8a5.54 5.54 0 0 0-1.9 10.48v2.12A7.5 7.5 0 0 1 10 6Z"/></svg>`;
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = `
<slot name="icon">${forwardIcon}</slot>
`;
const DEFAULT_TIME = 0;
class MediaSeekForwardButton extends import_media_chrome_button.MediaChromeButton {
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME,
Attributes.SEEK_OFFSET
];
}
constructor(options = {}) {
super({
slotTemplate,
tooltipContent: import_labels.tooltipLabels.SEEK_FORWARD,
...options
});
}
connectedCallback() {
this.seekOffset = (0, import_element_utils.getNumericAttr)(
this,
Attributes.SEEK_OFFSET,
DEFAULT_SEEK_OFFSET
);
super.connectedCallback();
}
attributeChangedCallback(attrName, _oldValue, newValue) {
if (attrName === Attributes.SEEK_OFFSET) {
this.seekOffset = (0, import_element_utils.getNumericAttr)(
this,
Attributes.SEEK_OFFSET,
DEFAULT_SEEK_OFFSET
);
}
super.attributeChangedCallback(attrName, _oldValue, newValue);
}
// Own props
/**
* Seek amount in seconds
*/
get seekOffset() {
return (0, import_element_utils.getNumericAttr)(this, Attributes.SEEK_OFFSET, DEFAULT_SEEK_OFFSET);
}
set seekOffset(value) {
(0, import_element_utils.setNumericAttr)(this, Attributes.SEEK_OFFSET, value);
this.setAttribute(
"aria-label",
import_labels.verbs.SEEK_FORWARD_N_SECS({ seekOffset: this.seekOffset })
);
(0, import_element_utils2.updateIconText)((0, import_element_utils2.getSlotted)(this, "icon"), this.seekOffset);
}
// Props derived from Media UI Attributes
/**
* The current time in seconds
*/
get mediaCurrentTime() {
return (0, import_element_utils.getNumericAttr)(
this,
import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME,
DEFAULT_TIME
);
}
set mediaCurrentTime(time) {
(0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME, time);
}
handleClick() {
const detail = this.mediaCurrentTime + this.seekOffset;
const evt = new import_server_safe_globals.globalThis.CustomEvent(import_constants.MediaUIEvents.MEDIA_SEEK_REQUEST, {
composed: true,
bubbles: true,
detail
});
this.dispatchEvent(evt);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-seek-forward-button")) {
import_server_safe_globals.globalThis.customElements.define(
"media-seek-forward-button",
MediaSeekForwardButton
);
}
var media_seek_forward_button_default = MediaSeekForwardButton;

View File

@@ -0,0 +1,296 @@
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 media_store_exports = {};
__export(media_store_exports, {
default: () => media_store_default
});
module.exports = __toCommonJS(media_store_exports);
var import_state_mediator = require("./state-mediator.js");
var import_util = require("./util.js");
var import_request_map = require("./request-map.js");
const createMediaStore = ({
media,
fullscreenElement,
documentElement,
stateMediator = import_state_mediator.stateMediator,
requestMap = import_request_map.requestMap,
options = {},
monitorStateOwnersOnlyWithSubscriptions = true
}) => {
const callbacks = [];
const stateOwners = {
// Spreading options here since folks should not rely on holding onto references
// for any app-level logic wrt options.
options: { ...options }
};
let state = Object.freeze({
mediaPreviewTime: void 0,
mediaPreviewImage: void 0,
mediaPreviewCoords: void 0,
mediaPreviewChapter: void 0
});
const updateState = (nextStateDelta) => {
if (nextStateDelta == void 0)
return;
if ((0, import_util.areValuesEq)(nextStateDelta, state)) {
return;
}
state = Object.freeze({
...state,
...nextStateDelta
});
callbacks.forEach((cb) => cb(state));
};
const updateStateFromFacade = () => {
const nextState = Object.entries(stateMediator).reduce(
(nextState2, [stateName, { get }]) => {
nextState2[stateName] = get(stateOwners);
return nextState2;
},
{}
);
updateState(nextState);
};
const stateUpdateHandlers = {};
let nextStateOwners = void 0;
const updateStateOwners = async (nextStateOwnersDelta, nextSubscriberCount) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
const pendingUpdate = !!nextStateOwners;
nextStateOwners = {
...stateOwners,
...nextStateOwners != null ? nextStateOwners : {},
...nextStateOwnersDelta
};
if (pendingUpdate)
return;
await (0, import_state_mediator.prepareStateOwners)(...Object.values(nextStateOwnersDelta));
const shouldTeardownFromSubscriberCount = callbacks.length > 0 && nextSubscriberCount === 0 && monitorStateOwnersOnlyWithSubscriptions;
const mediaChanged = stateOwners.media !== nextStateOwners.media;
const textTracksChanged = ((_a = stateOwners.media) == null ? void 0 : _a.textTracks) !== ((_b = nextStateOwners.media) == null ? void 0 : _b.textTracks);
const videoRenditionsChanged = ((_c = stateOwners.media) == null ? void 0 : _c.videoRenditions) !== ((_d = nextStateOwners.media) == null ? void 0 : _d.videoRenditions);
const audioTracksChanged = ((_e = stateOwners.media) == null ? void 0 : _e.audioTracks) !== ((_f = nextStateOwners.media) == null ? void 0 : _f.audioTracks);
const remoteChanged = ((_g = stateOwners.media) == null ? void 0 : _g.remote) !== ((_h = nextStateOwners.media) == null ? void 0 : _h.remote);
const rootNodeChanged = stateOwners.documentElement !== nextStateOwners.documentElement;
const teardownMedia = !!stateOwners.media && (mediaChanged || shouldTeardownFromSubscriberCount);
const teardownTextTracks = !!((_i = stateOwners.media) == null ? void 0 : _i.textTracks) && (textTracksChanged || shouldTeardownFromSubscriberCount);
const teardownVideoRenditions = !!((_j = stateOwners.media) == null ? void 0 : _j.videoRenditions) && (videoRenditionsChanged || shouldTeardownFromSubscriberCount);
const teardownAudioTracks = !!((_k = stateOwners.media) == null ? void 0 : _k.audioTracks) && (audioTracksChanged || shouldTeardownFromSubscriberCount);
const teardownRemote = !!((_l = stateOwners.media) == null ? void 0 : _l.remote) && (remoteChanged || shouldTeardownFromSubscriberCount);
const teardownRootNode = !!stateOwners.documentElement && (rootNodeChanged || shouldTeardownFromSubscriberCount);
const teardownSomething = teardownMedia || teardownTextTracks || teardownVideoRenditions || teardownAudioTracks || teardownRemote || teardownRootNode;
const shouldSetupFromSubscriberCount = callbacks.length === 0 && nextSubscriberCount === 1 && monitorStateOwnersOnlyWithSubscriptions;
const setupMedia = !!nextStateOwners.media && (mediaChanged || shouldSetupFromSubscriberCount);
const setupTextTracks = !!((_m = nextStateOwners.media) == null ? void 0 : _m.textTracks) && (textTracksChanged || shouldSetupFromSubscriberCount);
const setupVideoRenditions = !!((_n = nextStateOwners.media) == null ? void 0 : _n.videoRenditions) && (videoRenditionsChanged || shouldSetupFromSubscriberCount);
const setupAudioTracks = !!((_o = nextStateOwners.media) == null ? void 0 : _o.audioTracks) && (audioTracksChanged || shouldSetupFromSubscriberCount);
const setupRemote = !!((_p = nextStateOwners.media) == null ? void 0 : _p.remote) && (remoteChanged || shouldSetupFromSubscriberCount);
const setupRootNode = !!nextStateOwners.documentElement && (rootNodeChanged || shouldSetupFromSubscriberCount);
const setupSomething = setupMedia || setupTextTracks || setupVideoRenditions || setupAudioTracks || setupRemote || setupRootNode;
const somethingToDo = teardownSomething || setupSomething;
if (!somethingToDo) {
Object.entries(nextStateOwners).forEach(
([stateOwnerName, stateOwner]) => {
stateOwners[stateOwnerName] = stateOwner;
}
);
updateStateFromFacade();
nextStateOwners = void 0;
return;
}
Object.entries(stateMediator).forEach(
([
stateName,
{
get,
mediaEvents = [],
textTracksEvents = [],
videoRenditionsEvents = [],
audioTracksEvents = [],
remoteEvents = [],
rootEvents = [],
stateOwnersUpdateHandlers = []
}
]) => {
if (!stateUpdateHandlers[stateName]) {
stateUpdateHandlers[stateName] = {};
}
const handler = (event) => {
const nextValue = get(stateOwners, event);
updateState({ [stateName]: nextValue });
};
let prevHandler;
prevHandler = stateUpdateHandlers[stateName].mediaEvents;
mediaEvents.forEach((eventType) => {
if (prevHandler && teardownMedia) {
stateOwners.media.removeEventListener(eventType, prevHandler);
stateUpdateHandlers[stateName].mediaEvents = void 0;
}
if (setupMedia) {
nextStateOwners.media.addEventListener(eventType, handler);
stateUpdateHandlers[stateName].mediaEvents = handler;
}
});
prevHandler = stateUpdateHandlers[stateName].textTracksEvents;
textTracksEvents.forEach((eventType) => {
var _a2, _b2;
if (prevHandler && teardownTextTracks) {
(_a2 = stateOwners.media.textTracks) == null ? void 0 : _a2.removeEventListener(
eventType,
prevHandler
);
stateUpdateHandlers[stateName].textTracksEvents = void 0;
}
if (setupTextTracks) {
(_b2 = nextStateOwners.media.textTracks) == null ? void 0 : _b2.addEventListener(
eventType,
handler
);
stateUpdateHandlers[stateName].textTracksEvents = handler;
}
});
prevHandler = stateUpdateHandlers[stateName].videoRenditionsEvents;
videoRenditionsEvents.forEach((eventType) => {
var _a2, _b2;
if (prevHandler && teardownVideoRenditions) {
(_a2 = stateOwners.media.videoRenditions) == null ? void 0 : _a2.removeEventListener(
eventType,
prevHandler
);
stateUpdateHandlers[stateName].videoRenditionsEvents = void 0;
}
if (setupVideoRenditions) {
(_b2 = nextStateOwners.media.videoRenditions) == null ? void 0 : _b2.addEventListener(
eventType,
handler
);
stateUpdateHandlers[stateName].videoRenditionsEvents = handler;
}
});
prevHandler = stateUpdateHandlers[stateName].audioTracksEvents;
audioTracksEvents.forEach((eventType) => {
var _a2, _b2;
if (prevHandler && teardownAudioTracks) {
(_a2 = stateOwners.media.audioTracks) == null ? void 0 : _a2.removeEventListener(
eventType,
prevHandler
);
stateUpdateHandlers[stateName].audioTracksEvents = void 0;
}
if (setupAudioTracks) {
(_b2 = nextStateOwners.media.audioTracks) == null ? void 0 : _b2.addEventListener(
eventType,
handler
);
stateUpdateHandlers[stateName].audioTracksEvents = handler;
}
});
prevHandler = stateUpdateHandlers[stateName].remoteEvents;
remoteEvents.forEach((eventType) => {
var _a2, _b2;
if (prevHandler && teardownRemote) {
(_a2 = stateOwners.media.remote) == null ? void 0 : _a2.removeEventListener(
eventType,
prevHandler
);
stateUpdateHandlers[stateName].remoteEvents = void 0;
}
if (setupRemote) {
(_b2 = nextStateOwners.media.remote) == null ? void 0 : _b2.addEventListener(eventType, handler);
stateUpdateHandlers[stateName].remoteEvents = handler;
}
});
prevHandler = stateUpdateHandlers[stateName].rootEvents;
rootEvents.forEach((eventType) => {
if (prevHandler && teardownRootNode) {
stateOwners.documentElement.removeEventListener(
eventType,
prevHandler
);
stateUpdateHandlers[stateName].rootEvents = void 0;
}
if (setupRootNode) {
nextStateOwners.documentElement.addEventListener(
eventType,
handler
);
stateUpdateHandlers[stateName].rootEvents = handler;
}
});
const prevHandlerTeardown = stateUpdateHandlers[stateName].stateOwnersUpdateHandlers;
stateOwnersUpdateHandlers.forEach((fn) => {
if (prevHandlerTeardown && teardownSomething) {
prevHandlerTeardown();
}
if (setupSomething) {
stateUpdateHandlers[stateName].stateOwnersUpdateHandlers = fn(
handler,
nextStateOwners
);
}
});
}
);
Object.entries(nextStateOwners).forEach(([stateOwnerName, stateOwner]) => {
stateOwners[stateOwnerName] = stateOwner;
});
updateStateFromFacade();
nextStateOwners = void 0;
};
updateStateOwners({ media, fullscreenElement, documentElement, options });
return {
// note that none of these cases directly interact with the media element, root node, full screen element, etc.
// note these "actions" could just be the events if we wanted, especially if we normalize on "detail" for
// any payload-relevant values
// This is roughly equivalent to our used to be in our state requests dictionary object, though much of the
// "heavy lifting" is now moved into the facade `set()`
dispatch(action) {
const { type, detail } = action;
if (requestMap[type]) {
updateState(requestMap[type](stateMediator, stateOwners, action));
return;
}
if (type === "mediaelementchangerequest") {
updateStateOwners({ media: detail });
} else if (type === "fullscreenelementchangerequest") {
updateStateOwners({ fullscreenElement: detail });
} else if (type === "documentelementchangerequest") {
updateStateOwners({ documentElement: detail });
} else if (type === "optionschangerequest") {
Object.entries(detail != null ? detail : {}).forEach(([optionName, optionValue]) => {
stateOwners.options[optionName] = optionValue;
});
}
},
getState() {
return state;
},
subscribe(callback) {
updateStateOwners({}, callbacks.length + 1);
callbacks.push(callback);
callback(state);
return () => {
const idx = callbacks.indexOf(callback);
if (idx >= 0) {
updateStateOwners({}, callbacks.length - 1);
callbacks.splice(idx, 1);
}
};
}
};
};
var media_store_default = createMediaStore;

View File

@@ -0,0 +1,214 @@
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 request_map_exports = {};
__export(request_map_exports, {
requestMap: () => requestMap
});
module.exports = __toCommonJS(request_map_exports);
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_constants = require("../constants.js");
var import_captions = require("../utils/captions.js");
var import_util = require("./util.js");
const requestMap = {
/**
* @TODO Consider adding state to `StateMediator` for e.g. `mediaThumbnailCues` and use that for derived state here (CJP)
*/
[import_constants.MediaUIEvents.MEDIA_PREVIEW_REQUEST](stateMediator, stateOwners, { detail }) {
var _a, _b, _c;
const { media } = stateOwners;
const mediaPreviewTime = detail != null ? detail : void 0;
let mediaPreviewImage = void 0;
let mediaPreviewCoords = void 0;
if (media && mediaPreviewTime != null) {
const [track] = (0, import_captions.getTextTracksList)(media, {
kind: import_constants.TextTrackKinds.METADATA,
label: "thumbnails"
});
const cue = Array.prototype.find.call((_a = track == null ? void 0 : track.cues) != null ? _a : [], (c, i, cs) => {
if (i === 0)
return c.endTime > mediaPreviewTime;
if (i === cs.length - 1)
return c.startTime <= mediaPreviewTime;
return c.startTime <= mediaPreviewTime && c.endTime > mediaPreviewTime;
});
if (cue) {
const base = !/'^(?:[a-z]+:)?\/\//i.test(cue.text) ? (_b = media == null ? void 0 : media.querySelector(
'track[label="thumbnails"]'
)) == null ? void 0 : _b.src : void 0;
const url = new URL(cue.text, base);
const previewCoordsStr = new URLSearchParams(url.hash).get("#xywh");
mediaPreviewCoords = previewCoordsStr.split(",").map((numStr) => +numStr);
mediaPreviewImage = url.href;
}
}
const mediaDuration = stateMediator.mediaDuration.get(stateOwners);
const mediaChaptersCues = stateMediator.mediaChaptersCues.get(stateOwners);
let mediaPreviewChapter = (_c = mediaChaptersCues.find((c, i, cs) => {
if (i === cs.length - 1 && mediaDuration === c.endTime) {
return c.startTime <= mediaPreviewTime && c.endTime >= mediaPreviewTime;
}
return c.startTime <= mediaPreviewTime && c.endTime > mediaPreviewTime;
})) == null ? void 0 : _c.text;
if (detail != null && mediaPreviewChapter == null) {
mediaPreviewChapter = "";
}
return {
mediaPreviewTime,
mediaPreviewImage,
mediaPreviewCoords,
mediaPreviewChapter
};
},
[import_constants.MediaUIEvents.MEDIA_PAUSE_REQUEST](stateMediator, stateOwners) {
const key = "mediaPaused";
const value = true;
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_PLAY_REQUEST](stateMediator, stateOwners) {
var _a;
const key = "mediaPaused";
const value = false;
const live = stateMediator.mediaStreamType.get(stateOwners) === import_constants.StreamTypes.LIVE;
if (live) {
const notDvr = !(stateMediator.mediaTargetLiveWindow.get(stateOwners) > 0);
const liveEdgeTime = (_a = stateMediator.mediaSeekable.get(stateOwners)) == null ? void 0 : _a[1];
if (notDvr && liveEdgeTime) {
stateMediator.mediaCurrentTime.set(liveEdgeTime, stateOwners);
}
}
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_PLAYBACK_RATE_REQUEST](stateMediator, stateOwners, { detail }) {
const key = "mediaPlaybackRate";
const value = detail;
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_MUTE_REQUEST](stateMediator, stateOwners) {
const key = "mediaMuted";
const value = true;
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_UNMUTE_REQUEST](stateMediator, stateOwners) {
const key = "mediaMuted";
const value = false;
if (!stateMediator.mediaVolume.get(stateOwners)) {
stateMediator.mediaVolume.set(0.25, stateOwners);
}
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_VOLUME_REQUEST](stateMediator, stateOwners, { detail }) {
const key = "mediaVolume";
const value = detail;
if (value && stateMediator.mediaMuted.get(stateOwners)) {
stateMediator.mediaMuted.set(false, stateOwners);
}
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_SEEK_REQUEST](stateMediator, stateOwners, { detail }) {
const key = "mediaCurrentTime";
const value = detail;
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_SEEK_TO_LIVE_REQUEST](stateMediator, stateOwners) {
var _a;
const key = "mediaCurrentTime";
const value = (_a = stateMediator.mediaSeekable.get(stateOwners)) == null ? void 0 : _a[1];
if (Number.isNaN(Number(value)))
return;
stateMediator[key].set(value, stateOwners);
},
// Text Tracks state change requests
[import_constants.MediaUIEvents.MEDIA_SHOW_SUBTITLES_REQUEST](_stateMediator, stateOwners, { detail }) {
var _a;
const { options } = stateOwners;
const tracks = (0, import_util.getSubtitleTracks)(stateOwners);
const tracksToUpdate = (0, import_captions.parseTracks)(detail);
const preferredLanguage = (_a = tracksToUpdate[0]) == null ? void 0 : _a.language;
if (preferredLanguage && !options.noSubtitlesLangPref) {
import_server_safe_globals.globalThis.localStorage.setItem(
"media-chrome-pref-subtitles-lang",
preferredLanguage
);
}
(0, import_captions.updateTracksModeTo)(import_constants.TextTrackModes.SHOWING, tracks, tracksToUpdate);
},
[import_constants.MediaUIEvents.MEDIA_DISABLE_SUBTITLES_REQUEST](_stateMediator, stateOwners, { detail }) {
const tracks = (0, import_util.getSubtitleTracks)(stateOwners);
const tracksToUpdate = detail != null ? detail : [];
(0, import_captions.updateTracksModeTo)(import_constants.TextTrackModes.DISABLED, tracks, tracksToUpdate);
},
[import_constants.MediaUIEvents.MEDIA_TOGGLE_SUBTITLES_REQUEST](_stateMediator, stateOwners, { detail }) {
(0, import_util.toggleSubtitleTracks)(stateOwners, detail);
},
// Renditions/Tracks state change requests
[import_constants.MediaUIEvents.MEDIA_RENDITION_REQUEST](stateMediator, stateOwners, { detail }) {
const key = "mediaRenditionSelected";
const value = detail;
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_AUDIO_TRACK_REQUEST](stateMediator, stateOwners, { detail }) {
const key = "mediaAudioTrackEnabled";
const value = detail;
stateMediator[key].set(value, stateOwners);
},
// State change requests dependent on root node
[import_constants.MediaUIEvents.MEDIA_ENTER_PIP_REQUEST](stateMediator, stateOwners) {
const key = "mediaIsPip";
const value = true;
if (stateMediator.mediaIsFullscreen.get(stateOwners)) {
stateMediator.mediaIsFullscreen.set(false, stateOwners);
}
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_EXIT_PIP_REQUEST](stateMediator, stateOwners) {
const key = "mediaIsPip";
const value = false;
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_ENTER_FULLSCREEN_REQUEST](stateMediator, stateOwners) {
const key = "mediaIsFullscreen";
const value = true;
if (stateMediator.mediaIsPip.get(stateOwners)) {
stateMediator.mediaIsPip.set(false, stateOwners);
}
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_EXIT_FULLSCREEN_REQUEST](stateMediator, stateOwners) {
const key = "mediaIsFullscreen";
const value = false;
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_ENTER_CAST_REQUEST](stateMediator, stateOwners) {
const key = "mediaIsCasting";
const value = true;
if (stateMediator.mediaIsFullscreen.get(stateOwners)) {
stateMediator.mediaIsFullscreen.set(false, stateOwners);
}
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_EXIT_CAST_REQUEST](stateMediator, stateOwners) {
const key = "mediaIsCasting";
const value = false;
stateMediator[key].set(value, stateOwners);
},
[import_constants.MediaUIEvents.MEDIA_AIRPLAY_REQUEST](stateMediator, stateOwners) {
const key = "mediaIsAirplaying";
const value = true;
stateMediator[key].set(value, stateOwners);
}
};

View File

@@ -0,0 +1,811 @@
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 state_mediator_exports = {};
__export(state_mediator_exports, {
prepareStateOwners: () => prepareStateOwners,
stateMediator: () => stateMediator,
volumeSupportPromise: () => volumeSupportPromise
});
module.exports = __toCommonJS(state_mediator_exports);
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_constants = require("../constants.js");
var import_element_utils = require("../utils/element-utils.js");
var import_fullscreen_api = require("../utils/fullscreen-api.js");
var import_platform_tests = require("../utils/platform-tests.js");
var import_util = require("./util.js");
var import_captions = require("../utils/captions.js");
var import_utils = require("../utils/utils.js");
const StreamTypeValues = Object.values(import_constants.StreamTypes);
let volumeSupported;
const volumeSupportPromise = (0, import_platform_tests.hasVolumeSupportAsync)().then((supported) => {
volumeSupported = supported;
return volumeSupported;
});
const prepareStateOwners = async (...stateOwners) => {
await Promise.all(
stateOwners.filter((x) => x).map(async (stateOwner) => {
if (!("localName" in stateOwner && stateOwner instanceof import_server_safe_globals.globalThis.HTMLElement)) {
return;
}
const name = stateOwner.localName;
if (!name.includes("-"))
return;
const classDef = import_server_safe_globals.globalThis.customElements.get(name);
if (classDef && stateOwner instanceof classDef)
return;
await import_server_safe_globals.globalThis.customElements.whenDefined(name);
import_server_safe_globals.globalThis.customElements.upgrade(stateOwner);
})
);
};
const stateMediator = {
mediaWidth: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
return (_a = media == null ? void 0 : media.videoWidth) != null ? _a : 0;
},
mediaEvents: ["resize"]
},
mediaHeight: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
return (_a = media == null ? void 0 : media.videoHeight) != null ? _a : 0;
},
mediaEvents: ["resize"]
},
mediaPaused: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
return (_a = media == null ? void 0 : media.paused) != null ? _a : true;
},
set(value, stateOwners) {
var _a;
const { media } = stateOwners;
if (!media)
return;
if (value) {
media.pause();
} else {
(_a = media.play()) == null ? void 0 : _a.catch(() => {
});
}
},
mediaEvents: ["play", "playing", "pause", "emptied"]
},
mediaHasPlayed: {
// We want to let the user know that the media started playing at any point (`media-has-played`).
// Since these propagators are all called when boostrapping state, let's verify this is
// a real playing event by checking that 1) there's media and 2) it isn't currently paused.
get(stateOwners, event) {
const { media } = stateOwners;
if (!media)
return false;
if (!event)
return !media.paused;
return event.type === "playing";
},
mediaEvents: ["playing", "emptied"]
},
mediaEnded: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
return (_a = media == null ? void 0 : media.ended) != null ? _a : false;
},
mediaEvents: ["seeked", "ended", "emptied"]
},
mediaPlaybackRate: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
return (_a = media == null ? void 0 : media.playbackRate) != null ? _a : 1;
},
set(value, stateOwners) {
const { media } = stateOwners;
if (!media)
return;
if (!Number.isFinite(+value))
return;
media.playbackRate = +value;
},
mediaEvents: ["ratechange", "loadstart"]
},
mediaMuted: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
return (_a = media == null ? void 0 : media.muted) != null ? _a : false;
},
set(value, stateOwners) {
const { media } = stateOwners;
if (!media)
return;
media.muted = value;
},
mediaEvents: ["volumechange"]
},
mediaVolume: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
return (_a = media == null ? void 0 : media.volume) != null ? _a : 1;
},
set(value, stateOwners) {
const { media } = stateOwners;
if (!media)
return;
try {
if (value == null) {
import_server_safe_globals.globalThis.localStorage.removeItem("media-chrome-pref-volume");
} else {
import_server_safe_globals.globalThis.localStorage.setItem(
"media-chrome-pref-volume",
value.toString()
);
}
} catch (err) {
}
if (!Number.isFinite(+value))
return;
media.volume = +value;
},
mediaEvents: ["volumechange"],
stateOwnersUpdateHandlers: [
(handler, stateOwners) => {
const {
options: { noVolumePref }
} = stateOwners;
if (noVolumePref)
return;
try {
const volumePref = import_server_safe_globals.globalThis.localStorage.getItem(
"media-chrome-pref-volume"
);
if (volumePref == null)
return;
stateMediator.mediaVolume.set(+volumePref, stateOwners);
handler(+volumePref);
} catch (e) {
console.debug("Error getting volume pref", e);
}
}
]
},
// NOTE: Keeping this roughly equivalent to prior impl to reduce number of changes,
// however we may want to model "derived" state differently from "primary" state
// (in this case, derived === mediaVolumeLevel, primary === mediaMuted, mediaVolume) (CJP)
mediaVolumeLevel: {
get(stateOwners) {
const { media } = stateOwners;
if (typeof (media == null ? void 0 : media.volume) == "undefined")
return "high";
if (media.muted || media.volume === 0)
return "off";
if (media.volume < 0.5)
return "low";
if (media.volume < 0.75)
return "medium";
return "high";
},
mediaEvents: ["volumechange"]
},
mediaCurrentTime: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
return (_a = media == null ? void 0 : media.currentTime) != null ? _a : 0;
},
set(value, stateOwners) {
const { media } = stateOwners;
if (!media || !(0, import_utils.isValidNumber)(value))
return;
media.currentTime = value;
},
mediaEvents: ["timeupdate", "loadedmetadata"]
},
mediaDuration: {
get(stateOwners) {
const { media, options: { defaultDuration } = {} } = stateOwners;
if (defaultDuration && (!media || !media.duration || Number.isNaN(media.duration) || !Number.isFinite(media.duration))) {
return defaultDuration;
}
return Number.isFinite(media == null ? void 0 : media.duration) ? media.duration : Number.NaN;
},
mediaEvents: ["durationchange", "loadedmetadata", "emptied"]
},
mediaLoading: {
get(stateOwners) {
const { media } = stateOwners;
return (media == null ? void 0 : media.readyState) < 3;
},
mediaEvents: ["waiting", "playing", "emptied"]
},
mediaSeekable: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
if (!((_a = media == null ? void 0 : media.seekable) == null ? void 0 : _a.length))
return void 0;
const start = media.seekable.start(0);
const end = media.seekable.end(media.seekable.length - 1);
if (!start && !end)
return void 0;
return [Number(start.toFixed(3)), Number(end.toFixed(3))];
},
mediaEvents: ["loadedmetadata", "emptied", "progress", "seekablechange"]
},
mediaBuffered: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
const timeRanges = (_a = media == null ? void 0 : media.buffered) != null ? _a : [];
return Array.from(timeRanges).map((_, i) => [
Number(timeRanges.start(i).toFixed(3)),
Number(timeRanges.end(i).toFixed(3))
]);
},
mediaEvents: ["progress", "emptied"]
},
mediaStreamType: {
get(stateOwners) {
const { media, options: { defaultStreamType } = {} } = stateOwners;
const usedDefaultStreamType = [
import_constants.StreamTypes.LIVE,
import_constants.StreamTypes.ON_DEMAND
].includes(defaultStreamType) ? defaultStreamType : void 0;
if (!media)
return usedDefaultStreamType;
const { streamType } = media;
if (StreamTypeValues.includes(streamType)) {
if (streamType === import_constants.StreamTypes.UNKNOWN) {
return usedDefaultStreamType;
}
return streamType;
}
const duration = media.duration;
if (duration === Infinity) {
return import_constants.StreamTypes.LIVE;
} else if (Number.isFinite(duration)) {
return import_constants.StreamTypes.ON_DEMAND;
}
return usedDefaultStreamType;
},
mediaEvents: [
"emptied",
"durationchange",
"loadedmetadata",
"streamtypechange"
]
},
mediaTargetLiveWindow: {
get(stateOwners) {
const { media } = stateOwners;
if (!media)
return Number.NaN;
const { targetLiveWindow } = media;
const streamType = stateMediator.mediaStreamType.get(stateOwners);
if ((targetLiveWindow == null || Number.isNaN(targetLiveWindow)) && streamType === import_constants.StreamTypes.LIVE) {
return 0;
}
return targetLiveWindow;
},
mediaEvents: [
"emptied",
"durationchange",
"loadedmetadata",
"streamtypechange",
"targetlivewindowchange"
]
},
mediaTimeIsLive: {
get(stateOwners) {
const {
media,
// Default to 10 seconds
options: { liveEdgeOffset = 10 } = {}
} = stateOwners;
if (!media)
return false;
if (typeof media.liveEdgeStart === "number") {
if (Number.isNaN(media.liveEdgeStart))
return false;
return media.currentTime >= media.liveEdgeStart;
}
const live = stateMediator.mediaStreamType.get(stateOwners) === import_constants.StreamTypes.LIVE;
if (!live)
return false;
const seekable = media.seekable;
if (!seekable)
return true;
if (!seekable.length)
return false;
const liveEdgeStart = seekable.end(seekable.length - 1) - liveEdgeOffset;
return media.currentTime >= liveEdgeStart;
},
mediaEvents: ["playing", "timeupdate", "progress", "waiting", "emptied"]
},
// Text Tracks modeling
mediaSubtitlesList: {
get(stateOwners) {
return (0, import_util.getSubtitleTracks)(stateOwners).map(
({ kind, label, language }) => ({ kind, label, language })
);
},
mediaEvents: ["loadstart"],
textTracksEvents: ["addtrack", "removetrack"]
},
mediaSubtitlesShowing: {
get(stateOwners) {
return (0, import_util.getShowingSubtitleTracks)(stateOwners).map(
({ kind, label, language }) => ({ kind, label, language })
);
},
mediaEvents: ["loadstart"],
textTracksEvents: ["addtrack", "removetrack", "change"],
stateOwnersUpdateHandlers: [
(_handler, stateOwners) => {
var _a, _b;
const { media, options } = stateOwners;
if (!media)
return;
const updateDefaultSubtitlesCallback = (event) => {
var _a2;
if (!options.defaultSubtitles)
return;
const nonSubsEvent = event && ![import_constants.TextTrackKinds.CAPTIONS, import_constants.TextTrackKinds.SUBTITLES].includes(
// @ts-ignore
(_a2 = event == null ? void 0 : event.track) == null ? void 0 : _a2.kind
);
if (nonSubsEvent)
return;
(0, import_util.toggleSubtitleTracks)(stateOwners, true);
};
(_a = media.textTracks) == null ? void 0 : _a.addEventListener(
"addtrack",
updateDefaultSubtitlesCallback
);
(_b = media.textTracks) == null ? void 0 : _b.addEventListener(
"removetrack",
updateDefaultSubtitlesCallback
);
updateDefaultSubtitlesCallback();
return () => {
var _a2, _b2;
(_a2 = media.textTracks) == null ? void 0 : _a2.removeEventListener(
"addtrack",
updateDefaultSubtitlesCallback
);
(_b2 = media.textTracks) == null ? void 0 : _b2.removeEventListener(
"removetrack",
updateDefaultSubtitlesCallback
);
};
}
]
},
mediaChaptersCues: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
if (!media)
return [];
const [chaptersTrack] = (0, import_captions.getTextTracksList)(media, {
kind: import_constants.TextTrackKinds.CHAPTERS
});
return Array.from((_a = chaptersTrack == null ? void 0 : chaptersTrack.cues) != null ? _a : []).map(
({ text, startTime, endTime }) => ({
text,
startTime,
endTime
})
);
},
mediaEvents: ["loadstart", "loadedmetadata"],
textTracksEvents: ["addtrack", "removetrack", "change"],
stateOwnersUpdateHandlers: [
(handler, stateOwners) => {
var _a;
const { media } = stateOwners;
if (!media)
return;
const chaptersTrack = media.querySelector(
'track[kind="chapters"][default][src]'
);
const shadowChaptersTrack = (_a = media.shadowRoot) == null ? void 0 : _a.querySelector(
':is(video,audio) > track[kind="chapters"][default][src]'
);
chaptersTrack == null ? void 0 : chaptersTrack.addEventListener("load", handler);
shadowChaptersTrack == null ? void 0 : shadowChaptersTrack.addEventListener("load", handler);
return () => {
chaptersTrack == null ? void 0 : chaptersTrack.removeEventListener("load", handler);
shadowChaptersTrack == null ? void 0 : shadowChaptersTrack.removeEventListener("load", handler);
};
}
]
},
// Modeling state tied to root node
mediaIsPip: {
get(stateOwners) {
var _a, _b;
const { media, documentElement } = stateOwners;
if (!media || !documentElement)
return false;
if (!documentElement.pictureInPictureElement)
return false;
if (documentElement.pictureInPictureElement === media)
return true;
if (documentElement.pictureInPictureElement instanceof HTMLMediaElement) {
if (!((_a = media.localName) == null ? void 0 : _a.includes("-")))
return false;
return (0, import_element_utils.containsComposedNode)(
media,
documentElement.pictureInPictureElement
);
}
if (documentElement.pictureInPictureElement.localName.includes("-")) {
let currentRoot = documentElement.pictureInPictureElement.shadowRoot;
while (currentRoot == null ? void 0 : currentRoot.pictureInPictureElement) {
if (currentRoot.pictureInPictureElement === media)
return true;
currentRoot = (_b = currentRoot.pictureInPictureElement) == null ? void 0 : _b.shadowRoot;
}
}
return false;
},
set(value, stateOwners) {
const { media } = stateOwners;
if (!media)
return;
if (value) {
if (!import_server_safe_globals.document.pictureInPictureEnabled) {
console.warn("MediaChrome: Picture-in-picture is not enabled");
return;
}
if (!media.requestPictureInPicture) {
console.warn(
"MediaChrome: The current media does not support picture-in-picture"
);
return;
}
const warnNotReady = () => {
console.warn(
"MediaChrome: The media is not ready for picture-in-picture. It must have a readyState > 0."
);
};
media.requestPictureInPicture().catch((err) => {
if (err.code === 11) {
if (!media.src) {
console.warn(
"MediaChrome: The media is not ready for picture-in-picture. It must have a src set."
);
return;
}
if (media.readyState === 0 && media.preload === "none") {
const cleanup = () => {
media.removeEventListener("loadedmetadata", tryPip);
media.preload = "none";
};
const tryPip = () => {
media.requestPictureInPicture().catch(warnNotReady);
cleanup();
};
media.addEventListener("loadedmetadata", tryPip);
media.preload = "metadata";
setTimeout(() => {
if (media.readyState === 0)
warnNotReady();
cleanup();
}, 1e3);
} else {
throw err;
}
} else {
throw err;
}
});
} else if (import_server_safe_globals.document.pictureInPictureElement) {
import_server_safe_globals.document.exitPictureInPicture();
}
},
mediaEvents: ["enterpictureinpicture", "leavepictureinpicture"]
},
mediaRenditionList: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
return [...(_a = media == null ? void 0 : media.videoRenditions) != null ? _a : []].map((videoRendition) => ({
...videoRendition
}));
},
mediaEvents: ["emptied", "loadstart"],
videoRenditionsEvents: ["addrendition", "removerendition"]
},
/** @TODO Model this as a derived value? (CJP) */
mediaRenditionSelected: {
get(stateOwners) {
var _a, _b, _c;
const { media } = stateOwners;
return (_c = (_b = media == null ? void 0 : media.videoRenditions) == null ? void 0 : _b[(_a = media.videoRenditions) == null ? void 0 : _a.selectedIndex]) == null ? void 0 : _c.id;
},
set(value, stateOwners) {
const { media } = stateOwners;
if (!(media == null ? void 0 : media.videoRenditions)) {
console.warn(
"MediaController: Rendition selection not supported by this media."
);
return;
}
const renditionId = value;
const index = Array.prototype.findIndex.call(
media.videoRenditions,
(r) => r.id == renditionId
);
if (media.videoRenditions.selectedIndex != index) {
media.videoRenditions.selectedIndex = index;
}
},
mediaEvents: ["emptied"],
videoRenditionsEvents: ["addrendition", "removerendition", "change"]
},
mediaAudioTrackList: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
return [...(_a = media == null ? void 0 : media.audioTracks) != null ? _a : []];
},
mediaEvents: ["emptied", "loadstart"],
audioTracksEvents: ["addtrack", "removetrack"]
},
mediaAudioTrackEnabled: {
get(stateOwners) {
var _a, _b;
const { media } = stateOwners;
return (_b = [...(_a = media == null ? void 0 : media.audioTracks) != null ? _a : []].find(
(audioTrack) => audioTrack.enabled
)) == null ? void 0 : _b.id;
},
set(value, stateOwners) {
const { media } = stateOwners;
if (!(media == null ? void 0 : media.audioTracks)) {
console.warn(
"MediaChrome: Audio track selection not supported by this media."
);
return;
}
const audioTrackId = value;
for (const track of media.audioTracks) {
track.enabled = audioTrackId == track.id;
}
},
mediaEvents: ["emptied"],
audioTracksEvents: ["addtrack", "removetrack", "change"]
},
mediaIsFullscreen: {
get(stateOwners) {
return (0, import_fullscreen_api.isFullscreen)(stateOwners);
},
set(value, stateOwners) {
if (!value) {
(0, import_fullscreen_api.exitFullscreen)(stateOwners);
} else {
(0, import_fullscreen_api.enterFullscreen)(stateOwners);
}
},
// older Safari version may require webkit-specific events
rootEvents: ["fullscreenchange", "webkitfullscreenchange"],
// iOS requires webkit-specific events on the video.
mediaEvents: ["webkitbeginfullscreen", "webkitendfullscreen", "webkitpresentationmodechanged"]
},
mediaIsCasting: {
// Note this relies on a customized castable-video element.
get(stateOwners) {
var _a;
const { media } = stateOwners;
if (!(media == null ? void 0 : media.remote) || ((_a = media.remote) == null ? void 0 : _a.state) === "disconnected")
return false;
return !!media.remote.state;
},
set(value, stateOwners) {
var _a, _b;
const { media } = stateOwners;
if (!media)
return;
if (value && ((_a = media.remote) == null ? void 0 : _a.state) !== "disconnected")
return;
if (!value && ((_b = media.remote) == null ? void 0 : _b.state) !== "connected")
return;
if (typeof media.remote.prompt !== "function") {
console.warn(
"MediaChrome: Casting is not supported in this environment"
);
return;
}
media.remote.prompt().catch(() => {
});
},
remoteEvents: ["connect", "connecting", "disconnect"]
},
// NOTE: Newly added state for tracking airplaying
mediaIsAirplaying: {
// NOTE: Cannot know if airplaying since Safari doesn't fully support HTMLMediaElement::remote yet (e.g. remote::state) (CJP)
get() {
return false;
},
set(_value, stateOwners) {
const { media } = stateOwners;
if (!media)
return;
if (!(media.webkitShowPlaybackTargetPicker && import_server_safe_globals.globalThis.WebKitPlaybackTargetAvailabilityEvent)) {
console.warn(
"MediaChrome: received a request to select AirPlay but AirPlay is not supported in this environment"
);
return;
}
media.webkitShowPlaybackTargetPicker();
},
mediaEvents: ["webkitcurrentplaybacktargetiswirelesschanged"]
},
mediaFullscreenUnavailable: {
get(stateOwners) {
const { media } = stateOwners;
if (!import_platform_tests.fullscreenSupported || !(0, import_platform_tests.hasFullscreenSupport)(media))
return import_constants.AvailabilityStates.UNSUPPORTED;
return void 0;
}
},
mediaPipUnavailable: {
get(stateOwners) {
const { media } = stateOwners;
if (!import_platform_tests.pipSupported || !(0, import_platform_tests.hasPipSupport)(media))
return import_constants.AvailabilityStates.UNSUPPORTED;
}
},
mediaVolumeUnavailable: {
get(stateOwners) {
const { media } = stateOwners;
if (volumeSupported === false || (media == null ? void 0 : media.volume) == void 0) {
return import_constants.AvailabilityStates.UNSUPPORTED;
}
return void 0;
},
// NOTE: Slightly different impl here. Added generic support for
// "stateOwnersUpdateHandlers" since the original impl had to hack around
// race conditions. (CJP)
stateOwnersUpdateHandlers: [
(handler) => {
if (volumeSupported == null) {
volumeSupportPromise.then(
(supported) => handler(supported ? void 0 : import_constants.AvailabilityStates.UNSUPPORTED)
);
}
}
]
},
mediaCastUnavailable: {
// @ts-ignore
get(stateOwners, { availability = "not-available" } = {}) {
var _a;
const { media } = stateOwners;
if (!import_platform_tests.castSupported || !((_a = media == null ? void 0 : media.remote) == null ? void 0 : _a.state)) {
return import_constants.AvailabilityStates.UNSUPPORTED;
}
if (availability == null || availability === "available")
return void 0;
return import_constants.AvailabilityStates.UNAVAILABLE;
},
stateOwnersUpdateHandlers: [
(handler, stateOwners) => {
var _a;
const { media } = stateOwners;
if (!media)
return;
const remotePlaybackDisabled = media.disableRemotePlayback || media.hasAttribute("disableremoteplayback");
if (!remotePlaybackDisabled) {
(_a = media == null ? void 0 : media.remote) == null ? void 0 : _a.watchAvailability((availabilityBool) => {
const availability = availabilityBool ? "available" : "not-available";
handler({ availability });
}).catch((error) => {
if (error.name === "NotSupportedError") {
handler({ availability: null });
} else {
handler({ availability: "not-available" });
}
});
}
return () => {
var _a2;
(_a2 = media == null ? void 0 : media.remote) == null ? void 0 : _a2.cancelWatchAvailability().catch(() => {
});
};
}
]
},
mediaAirplayUnavailable: {
get(_stateOwners, event) {
if (!import_platform_tests.airplaySupported)
return import_constants.AvailabilityStates.UNSUPPORTED;
if ((event == null ? void 0 : event.availability) === "not-available") {
return import_constants.AvailabilityStates.UNAVAILABLE;
}
return void 0;
},
// NOTE: Keeping this event, as it's still the documented way of monitoring
// for AirPlay availability from Apple.
// See: https://developer.apple.com/documentation/webkitjs/adding_an_airplay_button_to_your_safari_media_controls#2940021 (CJP)
mediaEvents: ["webkitplaybacktargetavailabilitychanged"],
stateOwnersUpdateHandlers: [
(handler, stateOwners) => {
var _a;
const { media } = stateOwners;
if (!media)
return;
const remotePlaybackDisabled = media.disableRemotePlayback || media.hasAttribute("disableremoteplayback");
if (!remotePlaybackDisabled) {
(_a = media == null ? void 0 : media.remote) == null ? void 0 : _a.watchAvailability((availabilityBool) => {
const availability = availabilityBool ? "available" : "not-available";
handler({ availability });
}).catch((error) => {
if (error.name === "NotSupportedError") {
handler({ availability: null });
} else {
handler({ availability: "not-available" });
}
});
}
return () => {
var _a2;
(_a2 = media == null ? void 0 : media.remote) == null ? void 0 : _a2.cancelWatchAvailability().catch(() => {
});
};
}
]
},
mediaRenditionUnavailable: {
get(stateOwners) {
var _a;
const { media } = stateOwners;
if (!(media == null ? void 0 : media.videoRenditions)) {
return import_constants.AvailabilityStates.UNSUPPORTED;
}
if (!((_a = media.videoRenditions) == null ? void 0 : _a.length)) {
return import_constants.AvailabilityStates.UNAVAILABLE;
}
return void 0;
},
mediaEvents: ["emptied", "loadstart"],
videoRenditionsEvents: ["addrendition", "removerendition"]
},
mediaAudioTrackUnavailable: {
get(stateOwners) {
var _a, _b;
const { media } = stateOwners;
if (!(media == null ? void 0 : media.audioTracks)) {
return import_constants.AvailabilityStates.UNSUPPORTED;
}
if (((_b = (_a = media.audioTracks) == null ? void 0 : _a.length) != null ? _b : 0) <= 1) {
return import_constants.AvailabilityStates.UNAVAILABLE;
}
return void 0;
},
mediaEvents: ["emptied", "loadstart"],
audioTracksEvents: ["addtrack", "removetrack"]
}
};

View File

@@ -0,0 +1,109 @@
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 util_exports = {};
__export(util_exports, {
areArraysEq: () => areArraysEq,
areValuesEq: () => areValuesEq,
getShowingSubtitleTracks: () => getShowingSubtitleTracks,
getSubtitleTracks: () => getSubtitleTracks,
toggleSubtitleTracks: () => toggleSubtitleTracks
});
module.exports = __toCommonJS(util_exports);
var import_constants = require("../constants.js");
var import_captions = require("../utils/captions.js");
const getSubtitleTracks = (stateOwners) => {
return (0, import_captions.getTextTracksList)(stateOwners.media, (textTrack) => {
return [import_constants.TextTrackKinds.SUBTITLES, import_constants.TextTrackKinds.CAPTIONS].includes(
textTrack.kind
);
}).sort((a, b) => a.kind >= b.kind ? 1 : -1);
};
const getShowingSubtitleTracks = (stateOwners) => {
return (0, import_captions.getTextTracksList)(stateOwners.media, (textTrack) => {
return textTrack.mode === import_constants.TextTrackModes.SHOWING && [import_constants.TextTrackKinds.SUBTITLES, import_constants.TextTrackKinds.CAPTIONS].includes(
textTrack.kind
);
});
};
const toggleSubtitleTracks = (stateOwners, force) => {
const tracks = getSubtitleTracks(stateOwners);
const showingSubitleTracks = getShowingSubtitleTracks(stateOwners);
const subtitlesShowing = !!showingSubitleTracks.length;
if (!tracks.length)
return;
if (force === false || subtitlesShowing && force !== true) {
(0, import_captions.updateTracksModeTo)(import_constants.TextTrackModes.DISABLED, tracks, showingSubitleTracks);
} else if (force === true || !subtitlesShowing && force !== false) {
let subTrack = tracks[0];
const { options } = stateOwners;
if (!(options == null ? void 0 : options.noSubtitlesLangPref)) {
const subtitlesPref = globalThis.localStorage.getItem(
"media-chrome-pref-subtitles-lang"
);
const userLangPrefs = subtitlesPref ? [subtitlesPref, ...globalThis.navigator.languages] : globalThis.navigator.languages;
const preferredAvailableSubs = tracks.filter((textTrack) => {
return userLangPrefs.some(
(lang) => textTrack.language.toLowerCase().startsWith(lang.split("-")[0])
);
}).sort((textTrackA, textTrackB) => {
const idxA = userLangPrefs.findIndex(
(lang) => textTrackA.language.toLowerCase().startsWith(lang.split("-")[0])
);
const idxB = userLangPrefs.findIndex(
(lang) => textTrackB.language.toLowerCase().startsWith(lang.split("-")[0])
);
return idxA - idxB;
});
if (preferredAvailableSubs[0]) {
subTrack = preferredAvailableSubs[0];
}
}
const { language, label, kind } = subTrack;
(0, import_captions.updateTracksModeTo)(import_constants.TextTrackModes.DISABLED, tracks, showingSubitleTracks);
(0, import_captions.updateTracksModeTo)(import_constants.TextTrackModes.SHOWING, tracks, [
{ language, label, kind }
]);
}
};
const areValuesEq = (x, y) => {
if (x === y)
return true;
if (typeof x !== typeof y)
return false;
if (typeof x === "number" && Number.isNaN(x) && Number.isNaN(y))
return true;
if (typeof x !== "object")
return false;
if (Array.isArray(x))
return areArraysEq(x, y);
return Object.entries(x).every(
// NOTE: Checking key in y to disambiguate between between missing keys and keys whose value are undefined (CJP)
([key, value]) => key in y && areValuesEq(value, y[key])
);
};
const areArraysEq = (xs, ys) => {
const xIsArray = Array.isArray(xs);
const yIsArray = Array.isArray(ys);
if (xIsArray !== yIsArray)
return false;
if (!(xIsArray || yIsArray))
return true;
if (xs.length !== ys.length)
return false;
return xs.every((x, i) => areValuesEq(x, ys[i]));
};

View File

@@ -0,0 +1,141 @@
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;
};
var media_text_display_exports = {};
__export(media_text_display_exports, {
MediaTextDisplay: () => MediaTextDisplay,
default: () => media_text_display_default
});
module.exports = __toCommonJS(media_text_display_exports);
var import_constants = require("./constants.js");
var import_element_utils = require("./utils/element-utils.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var _mediaController;
const template = import_server_safe_globals.document.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-text-background, var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7))));
padding: var(--media-control-padding, 10px);
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
box-sizing: border-box;
text-align: center;
pointer-events: auto;
}
${/*
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;
}
</style>
<slot></slot>
`;
class MediaTextDisplay extends import_server_safe_globals.globalThis.HTMLElement {
constructor() {
super();
__privateAdd(this, _mediaController, void 0);
if (!this.shadowRoot) {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
static get observedAttributes() {
return [import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER];
}
attributeChangedCallback(attrName, oldValue, newValue) {
var _a, _b, _c, _d, _e;
if (attrName === import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
if (oldValue) {
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
}
if (newValue && this.isConnected) {
__privateSet(this, _mediaController, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
(_e = (_d = __privateGet(this, _mediaController)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
}
}
}
connectedCallback() {
var _a, _b, _c;
const { style } = (0, import_element_utils.getOrInsertCSSRule)(this.shadowRoot, ":host");
style.setProperty(
"display",
`var(--media-control-display, var(--${this.localName}-display, inline-flex))`
);
const mediaControllerId = this.getAttribute(
import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER
);
if (mediaControllerId) {
__privateSet(this, _mediaController, (_a = this.getRootNode()) == null ? void 0 : _a.getElementById(
mediaControllerId
));
(_c = (_b = __privateGet(this, _mediaController)) == null ? void 0 : _b.associateElement) == null ? void 0 : _c.call(_b, this);
}
}
disconnectedCallback() {
var _a, _b;
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
}
}
_mediaController = new WeakMap();
if (!import_server_safe_globals.globalThis.customElements.get("media-text-display")) {
import_server_safe_globals.globalThis.customElements.define("media-text-display", MediaTextDisplay);
}
var media_text_display_default = MediaTextDisplay;

View File

@@ -0,0 +1,267 @@
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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
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;
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var media_theme_element_exports = {};
__export(media_theme_element_exports, {
MediaThemeElement: () => MediaThemeElement
});
module.exports = __toCommonJS(media_theme_element_exports);
var import_constants = require("./constants.js");
var import_element_utils = require("./utils/element-utils.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_template_parts = require("./utils/template-parts.js");
var import_template_processor = require("./utils/template-processor.js");
var import_utils = require("./utils/utils.js");
__reExport(media_theme_element_exports, require("./utils/template-parts.js"), module.exports);
var _template, _prevTemplate, _prevTemplateId, _upgradeProperty, upgradeProperty_fn, _updateTemplate, updateTemplate_fn;
const observedMediaAttributes = {
mediatargetlivewindow: "targetlivewindow",
mediastreamtype: "streamtype"
};
const prependTemplate = import_server_safe_globals.document.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>
`;
class MediaThemeElement extends import_server_safe_globals.globalThis.HTMLElement {
constructor() {
super();
__privateAdd(this, _upgradeProperty);
__privateAdd(this, _updateTemplate);
__privateAdd(this, _template, void 0);
__privateAdd(this, _prevTemplate, void 0);
__privateAdd(this, _prevTemplateId, void 0);
if (this.shadowRoot) {
this.renderRoot = this.shadowRoot;
} else {
this.renderRoot = this.attachShadow({ mode: "open" });
this.createRenderer();
}
const observer = new MutationObserver((mutationList) => {
var _a;
if (this.mediaController && !((_a = this.mediaController) == null ? void 0 : _a.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();
}
});
observer.observe(this, { attributes: true });
observer.observe(this.renderRoot, {
attributes: true,
subtree: true
});
this.addEventListener(
import_constants.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 _a;
return (_a = __privateGet(this, _template)) != null ? _a : this.constructor.template;
}
set template(element) {
__privateSet(this, _prevTemplateId, null);
__privateSet(this, _template, element);
this.createRenderer();
}
get props() {
var _a, _b, _c;
const observedAttributes = [
...Array.from((_b = (_a = this.mediaController) == null ? void 0 : _a.attributes) != null ? _b : []).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 : (0, import_utils.camelCase)(attr.name);
let { value } = attr;
if (value != null) {
if ((0, import_utils.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 !== __privateGet(this, _prevTemplate)) {
__privateSet(this, _prevTemplate, this.template);
this.renderer = new import_template_parts.TemplateInstance(
this.template,
this.props,
// @ts-ignore
this.constructor.processor
);
this.renderRoot.textContent = "";
this.renderRoot.append(
prependTemplate.content.cloneNode(true),
this.renderer
);
}
}
render() {
var _a;
(_a = this.renderer) == null ? void 0 : _a.update(this.props);
if (this.renderRoot.isConnected) {
const { style } = (0, import_element_utils.getOrInsertCSSRule)(this.renderRoot, ":host");
if (style.visibility === "hidden") {
style.removeProperty("visibility");
}
}
}
}
_template = new WeakMap();
_prevTemplate = new WeakMap();
_prevTemplateId = new WeakMap();
_upgradeProperty = new WeakSet();
upgradeProperty_fn = function(prop) {
if (Object.prototype.hasOwnProperty.call(this, prop)) {
const value = this[prop];
delete this[prop];
this[prop] = value;
}
};
_updateTemplate = new WeakSet();
updateTemplate_fn = function() {
var _a;
const templateId = this.getAttribute("template");
if (!templateId || templateId === __privateGet(this, _prevTemplateId))
return;
const rootNode = this.getRootNode();
const template = (_a = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a.call(rootNode, templateId);
if (template) {
__privateSet(this, _prevTemplateId, templateId);
__privateSet(this, _template, template);
this.createRenderer();
return;
}
if (isValidUrl(templateId)) {
__privateSet(this, _prevTemplateId, templateId);
request(templateId).then((data) => {
const template2 = import_server_safe_globals.document.createElement("template");
template2.innerHTML = data;
__privateSet(this, _template, template2);
this.createRenderer();
}).catch(console.error);
}
};
MediaThemeElement.observedAttributes = ["template"];
MediaThemeElement.processor = import_template_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 (!import_server_safe_globals.globalThis.customElements.get("media-theme")) {
import_server_safe_globals.globalThis.customElements.define("media-theme", MediaThemeElement);
}

View File

@@ -0,0 +1,257 @@
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;
};
var media_time_display_exports = {};
__export(media_time_display_exports, {
Attributes: () => Attributes,
default: () => media_time_display_default
});
module.exports = __toCommonJS(media_time_display_exports);
var import_media_text_display = require("./media-text-display.js");
var import_element_utils = require("./utils/element-utils.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_time = require("./utils/time.js");
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var _slot;
const Attributes = {
REMAINING: "remaining",
SHOW_DURATION: "showduration",
NO_TOGGLE: "notoggle"
};
const CombinedAttributes = [
...Object.values(Attributes),
import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME,
import_constants.MediaUIAttributes.MEDIA_DURATION,
import_constants.MediaUIAttributes.MEDIA_SEEKABLE
];
const ButtonPressedKeys = ["Enter", " "];
const DEFAULT_TIMES_SEP = "&nbsp;/&nbsp;";
const formatTimesLabel = (el, { timesSep = DEFAULT_TIMES_SEP } = {}) => {
var _a, _b;
const showRemaining = el.hasAttribute(Attributes.REMAINING);
const showDuration = el.hasAttribute(Attributes.SHOW_DURATION);
const currentTime = (_a = el.mediaCurrentTime) != null ? _a : 0;
const [, seekableEnd] = (_b = el.mediaSeekable) != null ? _b : [];
let endTime = 0;
if (Number.isFinite(el.mediaDuration)) {
endTime = el.mediaDuration;
} else if (Number.isFinite(seekableEnd)) {
endTime = seekableEnd;
}
const timeLabel = showRemaining ? (0, import_time.formatTime)(0 - (endTime - currentTime)) : (0, import_time.formatTime)(currentTime);
if (!showDuration)
return timeLabel;
return `${timeLabel}${timesSep}${(0, import_time.formatTime)(endTime)}`;
};
const DEFAULT_MISSING_TIME_PHRASE = "video not loaded, unknown time.";
const updateAriaValueText = (el) => {
var _a;
const currentTime = el.mediaCurrentTime;
const [, seekableEnd] = (_a = el.mediaSeekable) != null ? _a : [];
let endTime = null;
if (Number.isFinite(el.mediaDuration)) {
endTime = el.mediaDuration;
} else if (Number.isFinite(seekableEnd)) {
endTime = seekableEnd;
}
if (currentTime == null || endTime === null) {
el.setAttribute("aria-valuetext", DEFAULT_MISSING_TIME_PHRASE);
return;
}
const showRemaining = el.hasAttribute(Attributes.REMAINING);
const showDuration = el.hasAttribute(Attributes.SHOW_DURATION);
const currentTimePhrase = showRemaining ? (0, import_time.formatAsTimePhrase)(0 - (endTime - currentTime)) : (0, import_time.formatAsTimePhrase)(currentTime);
if (!showDuration) {
el.setAttribute("aria-valuetext", currentTimePhrase);
return;
}
const totalTimePhrase = (0, import_time.formatAsTimePhrase)(endTime);
const fullPhrase = `${currentTimePhrase} of ${totalTimePhrase}`;
el.setAttribute("aria-valuetext", fullPhrase);
};
class MediaTimeDisplay extends import_media_text_display.MediaTextDisplay {
constructor() {
super();
__privateAdd(this, _slot, void 0);
__privateSet(this, _slot, this.shadowRoot.querySelector("slot"));
__privateGet(this, _slot).innerHTML = `${formatTimesLabel(this)}`;
}
static get observedAttributes() {
return [...super.observedAttributes, ...CombinedAttributes, "disabled"];
}
connectedCallback() {
const { style } = (0, import_element_utils.getOrInsertCSSRule)(
this.shadowRoot,
":host(:hover:not([notoggle]))"
);
style.setProperty("cursor", "pointer");
style.setProperty(
"background",
"var(--media-control-hover-background, rgba(50 50 70 / .7))"
);
if (!this.hasAttribute("disabled")) {
this.enable();
}
this.setAttribute("role", "progressbar");
this.setAttribute("aria-label", import_labels.nouns.PLAYBACK_TIME());
const keyUpHandler = (evt) => {
const { key } = evt;
if (!ButtonPressedKeys.includes(key)) {
this.removeEventListener("keyup", keyUpHandler);
return;
}
this.toggleTimeDisplay();
};
this.addEventListener("keydown", (evt) => {
const { metaKey, altKey, key } = evt;
if (metaKey || altKey || !ButtonPressedKeys.includes(key)) {
this.removeEventListener("keyup", keyUpHandler);
return;
}
this.addEventListener("keyup", keyUpHandler);
});
this.addEventListener("click", this.toggleTimeDisplay);
super.connectedCallback();
}
toggleTimeDisplay() {
if (this.noToggle) {
return;
}
if (this.hasAttribute("remaining")) {
this.removeAttribute("remaining");
} else {
this.setAttribute("remaining", "");
}
}
disconnectedCallback() {
this.disable();
super.disconnectedCallback();
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (CombinedAttributes.includes(attrName)) {
this.update();
} else if (attrName === "disabled" && newValue !== oldValue) {
if (newValue == null) {
this.enable();
} else {
this.disable();
}
}
super.attributeChangedCallback(attrName, oldValue, newValue);
}
enable() {
this.tabIndex = 0;
}
disable() {
this.tabIndex = -1;
}
// Own props
/**
* Whether to show the remaining time
*/
get remaining() {
return (0, import_element_utils.getBooleanAttr)(this, Attributes.REMAINING);
}
set remaining(show) {
(0, import_element_utils.setBooleanAttr)(this, Attributes.REMAINING, show);
}
/**
* Whether to show the duration
*/
get showDuration() {
return (0, import_element_utils.getBooleanAttr)(this, Attributes.SHOW_DURATION);
}
set showDuration(show) {
(0, import_element_utils.setBooleanAttr)(this, Attributes.SHOW_DURATION, show);
}
/**
* Disable the default behavior that toggles between current and remaining time
*/
get noToggle() {
return (0, import_element_utils.getBooleanAttr)(this, Attributes.NO_TOGGLE);
}
set noToggle(noToggle) {
(0, import_element_utils.setBooleanAttr)(this, Attributes.NO_TOGGLE, noToggle);
}
// Props derived from media UI attributes
/**
* Get the duration
*/
get mediaDuration() {
return (0, import_element_utils.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_DURATION);
}
set mediaDuration(time) {
(0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_DURATION, time);
}
/**
* The current time in seconds
*/
get mediaCurrentTime() {
return (0, import_element_utils.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME);
}
set mediaCurrentTime(time) {
(0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME, time);
}
/**
* Range of values that can be seeked to.
* An array of two numbers [start, end]
*/
get mediaSeekable() {
const seekable = this.getAttribute(import_constants.MediaUIAttributes.MEDIA_SEEKABLE);
if (!seekable)
return void 0;
return seekable.split(":").map((time) => +time);
}
set mediaSeekable(range) {
if (range == null) {
this.removeAttribute(import_constants.MediaUIAttributes.MEDIA_SEEKABLE);
return;
}
this.setAttribute(import_constants.MediaUIAttributes.MEDIA_SEEKABLE, range.join(":"));
}
update() {
const timesLabel = formatTimesLabel(this);
updateAriaValueText(this);
if (timesLabel !== __privateGet(this, _slot).innerHTML) {
__privateGet(this, _slot).innerHTML = timesLabel;
}
}
}
_slot = new WeakMap();
if (!import_server_safe_globals.globalThis.customElements.get("media-time-display")) {
import_server_safe_globals.globalThis.customElements.define("media-time-display", MediaTimeDisplay);
}
var media_time_display_default = MediaTimeDisplay;

View File

@@ -0,0 +1,737 @@
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;
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var media_time_range_exports = {};
__export(media_time_range_exports, {
default: () => media_time_range_default
});
module.exports = __toCommonJS(media_time_range_exports);
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_media_chrome_range = require("./media-chrome-range.js");
var import_media_preview_thumbnail = require("./media-preview-thumbnail.js");
var import_media_preview_time_display = require("./media-preview-time-display.js");
var import_media_preview_chapter_display = require("./media-preview-chapter-display.js");
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var import_utils = require("./utils/utils.js");
var import_time = require("./utils/time.js");
var import_element_utils = require("./utils/element-utils.js");
var import_range_animation = require("./utils/range-animation.js");
var import_element_utils2 = require("./utils/element-utils.js");
var _rootNode, _animation, _boxes, _previewTime, _previewBox, _currentBox, _boxPaddingLeft, _boxPaddingRight, _mediaChaptersCues, _toggleRangeAnimation, toggleRangeAnimation_fn, _shouldRangeAnimate, shouldRangeAnimate_fn, _updateRange, _getElementRects, getElementRects_fn, _getBoxPosition, getBoxPosition_fn, _getBoxShiftPosition, getBoxShiftPosition_fn, _handlePointerMove, handlePointerMove_fn, _previewRequest, previewRequest_fn, _seekRequest, seekRequest_fn;
const DEFAULT_MISSING_TIME_PHRASE = "video not loaded, unknown time.";
const updateAriaValueText = (el) => {
const range = el.range;
const currentTimePhrase = (0, import_time.formatAsTimePhrase)(+calcTimeFromRangeValue(el));
const totalTimePhrase = (0, import_time.formatAsTimePhrase)(+el.mediaSeekableEnd);
const fullPhrase = !(currentTimePhrase && totalTimePhrase) ? DEFAULT_MISSING_TIME_PHRASE : `${currentTimePhrase} of ${totalTimePhrase}`;
range.setAttribute("aria-valuetext", fullPhrase);
};
const template = import_server_safe_globals.document.createElement("template");
template.innerHTML = /*html*/
`
<style>
:host {
--media-box-border-radius: 4px;
--media-box-padding-left: 10px;
--media-box-padding-right: 10px;
--media-preview-border-radius: var(--media-box-border-radius);
--media-box-arrow-offset: var(--media-box-border-radius);
--_control-background: var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7)));
--_preview-background: var(--media-preview-background, var(--_control-background));
${/* 1% rail width trick was off in Safari, contain: layout seems to
prevent the horizontal overflow as well. */
""}
contain: layout;
}
#buffered {
background: var(--media-time-range-buffered-color, rgb(255 255 255 / .4));
position: absolute;
height: 100%;
will-change: width;
}
#preview-rail,
#current-rail {
width: 100%;
position: absolute;
left: 0;
bottom: 100%;
pointer-events: none;
will-change: transform;
}
[part~="box"] {
width: min-content;
${/* absolute position is needed here so the box doesn't overflow the bounds */
""}
position: absolute;
bottom: 100%;
flex-direction: column;
align-items: center;
transform: translateX(-50%);
}
[part~="current-box"] {
display: var(--media-current-box-display, var(--media-box-display, flex));
margin: var(--media-current-box-margin, var(--media-box-margin, 0 0 5px));
visibility: hidden;
}
[part~="preview-box"] {
display: var(--media-preview-box-display, var(--media-box-display, flex));
margin: var(--media-preview-box-margin, var(--media-box-margin, 0 0 5px));
transition-property: var(--media-preview-transition-property, visibility, opacity);
transition-duration: var(--media-preview-transition-duration-out, .25s);
transition-delay: var(--media-preview-transition-delay-out, 0s);
visibility: hidden;
opacity: 0;
}
:host(:is([${import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}], [${import_constants.MediaUIAttributes.MEDIA_PREVIEW_TIME}])[dragging]) [part~="preview-box"] {
transition-duration: var(--media-preview-transition-duration-in, .5s);
transition-delay: var(--media-preview-transition-delay-in, .25s);
visibility: visible;
opacity: 1;
}
@media (hover: hover) {
:host(:is([${import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}], [${import_constants.MediaUIAttributes.MEDIA_PREVIEW_TIME}]):hover) [part~="preview-box"] {
transition-duration: var(--media-preview-transition-duration-in, .5s);
transition-delay: var(--media-preview-transition-delay-in, .25s);
visibility: visible;
opacity: 1;
}
}
media-preview-thumbnail,
::slotted(media-preview-thumbnail) {
visibility: hidden;
${/* delay changing these CSS props until the preview box transition is ended */
""}
transition: visibility 0s .25s;
transition-delay: calc(var(--media-preview-transition-delay-out, 0s) + var(--media-preview-transition-duration-out, .25s));
background: var(--media-preview-thumbnail-background, var(--_preview-background));
box-shadow: var(--media-preview-thumbnail-box-shadow, 0 0 4px rgb(0 0 0 / .2));
max-width: var(--media-preview-thumbnail-max-width, 180px);
max-height: var(--media-preview-thumbnail-max-height, 160px);
min-width: var(--media-preview-thumbnail-min-width, 120px);
min-height: var(--media-preview-thumbnail-min-height, 80px);
border: var(--media-preview-thumbnail-border);
border-radius: var(--media-preview-thumbnail-border-radius,
var(--media-preview-border-radius) var(--media-preview-border-radius) 0 0);
}
:host([${import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}][dragging]) media-preview-thumbnail,
:host([${import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}][dragging]) ::slotted(media-preview-thumbnail) {
transition-delay: var(--media-preview-transition-delay-in, .25s);
visibility: visible;
}
@media (hover: hover) {
:host([${import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}]:hover) media-preview-thumbnail,
:host([${import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}]:hover) ::slotted(media-preview-thumbnail) {
transition-delay: var(--media-preview-transition-delay-in, .25s);
visibility: visible;
}
:host([${import_constants.MediaUIAttributes.MEDIA_PREVIEW_TIME}]:hover) {
--media-time-range-hover-display: block;
}
}
media-preview-chapter-display,
::slotted(media-preview-chapter-display) {
font-size: var(--media-font-size, 13px);
line-height: 17px;
min-width: 0;
visibility: hidden;
${/* delay changing these CSS props until the preview box transition is ended */
""}
transition: min-width 0s, border-radius 0s, margin 0s, padding 0s, visibility 0s;
transition-delay: calc(var(--media-preview-transition-delay-out, 0s) + var(--media-preview-transition-duration-out, .25s));
background: var(--media-preview-chapter-background, var(--_preview-background));
border-radius: var(--media-preview-chapter-border-radius,
var(--media-preview-border-radius) var(--media-preview-border-radius)
var(--media-preview-border-radius) var(--media-preview-border-radius));
padding: var(--media-preview-chapter-padding, 3.5px 9px);
margin: var(--media-preview-chapter-margin, 0 0 5px);
text-shadow: var(--media-preview-chapter-text-shadow, 0 0 4px rgb(0 0 0 / .75));
}
:host([${import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}]) media-preview-chapter-display,
:host([${import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}]) ::slotted(media-preview-chapter-display) {
transition-delay: var(--media-preview-transition-delay-in, .25s);
border-radius: var(--media-preview-chapter-border-radius, 0);
padding: var(--media-preview-chapter-padding, 3.5px 9px 0);
margin: var(--media-preview-chapter-margin, 0);
min-width: 100%;
}
media-preview-chapter-display[${import_constants.MediaUIAttributes.MEDIA_PREVIEW_CHAPTER}],
::slotted(media-preview-chapter-display[${import_constants.MediaUIAttributes.MEDIA_PREVIEW_CHAPTER}]) {
visibility: visible;
}
media-preview-chapter-display:not([aria-valuetext]),
::slotted(media-preview-chapter-display:not([aria-valuetext])) {
display: none;
}
media-preview-time-display,
::slotted(media-preview-time-display),
media-time-display,
::slotted(media-time-display) {
font-size: var(--media-font-size, 13px);
line-height: 17px;
min-width: 0;
${/* delay changing these CSS props until the preview box transition is ended */
""}
transition: min-width 0s, border-radius 0s;
transition-delay: calc(var(--media-preview-transition-delay-out, 0s) + var(--media-preview-transition-duration-out, .25s));
background: var(--media-preview-time-background, var(--_preview-background));
border-radius: var(--media-preview-time-border-radius,
var(--media-preview-border-radius) var(--media-preview-border-radius)
var(--media-preview-border-radius) var(--media-preview-border-radius));
padding: var(--media-preview-time-padding, 3.5px 9px);
margin: var(--media-preview-time-margin, 0);
text-shadow: var(--media-preview-time-text-shadow, 0 0 4px rgb(0 0 0 / .75));
transform: translateX(min(
max(calc(50% - var(--_box-width) / 2),
calc(var(--_box-shift, 0))),
calc(var(--_box-width) / 2 - 50%)
));
}
:host([${import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}]) media-preview-time-display,
:host([${import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}]) ::slotted(media-preview-time-display) {
transition-delay: var(--media-preview-transition-delay-in, .25s);
border-radius: var(--media-preview-time-border-radius,
0 0 var(--media-preview-border-radius) var(--media-preview-border-radius));
min-width: 100%;
}
:host([${import_constants.MediaUIAttributes.MEDIA_PREVIEW_TIME}]:hover) {
--media-time-range-hover-display: block;
}
[part~="arrow"],
::slotted([part~="arrow"]) {
display: var(--media-box-arrow-display, inline-block);
transform: translateX(min(
max(calc(50% - var(--_box-width) / 2 + var(--media-box-arrow-offset)),
calc(var(--_box-shift, 0))),
calc(var(--_box-width) / 2 - 50% - var(--media-box-arrow-offset))
));
${/* border-color has to come before border-top-color! */
""}
border-color: transparent;
border-top-color: var(--media-box-arrow-background, var(--_control-background));
border-width: var(--media-box-arrow-border-width,
var(--media-box-arrow-height, 5px) var(--media-box-arrow-width, 6px) 0);
border-style: solid;
justify-content: center;
height: 0;
}
</style>
<div id="preview-rail">
<slot name="preview" part="box preview-box">
<media-preview-thumbnail></media-preview-thumbnail>
<media-preview-chapter-display></media-preview-chapter-display>
<media-preview-time-display></media-preview-time-display>
<slot name="preview-arrow"><div part="arrow"></div></slot>
</slot>
</div>
<div id="current-rail">
<slot name="current" part="box current-box">
${/* Example: add the current time w/ arrow to the playhead
<media-time-display slot="current"></media-time-display>
<div part="arrow" slot="current"></div> */
""}
</slot>
</div>
`;
const calcRangeValueFromTime = (el, time = el.mediaCurrentTime) => {
const startTime = Number.isFinite(el.mediaSeekableStart) ? el.mediaSeekableStart : 0;
const endTime = Number.isFinite(el.mediaDuration) ? el.mediaDuration : el.mediaSeekableEnd;
if (Number.isNaN(endTime))
return 0;
const value = (time - startTime) / (endTime - startTime);
return Math.max(0, Math.min(value, 1));
};
const calcTimeFromRangeValue = (el, value = el.range.valueAsNumber) => {
const startTime = Number.isFinite(el.mediaSeekableStart) ? el.mediaSeekableStart : 0;
const endTime = Number.isFinite(el.mediaDuration) ? el.mediaDuration : el.mediaSeekableEnd;
if (Number.isNaN(endTime))
return 0;
return value * (endTime - startTime) + startTime;
};
class MediaTimeRange extends import_media_chrome_range.MediaChromeRange {
constructor() {
super();
__privateAdd(this, _toggleRangeAnimation);
__privateAdd(this, _shouldRangeAnimate);
__privateAdd(this, _getElementRects);
/**
* Get the position, max and min for the box in percentage.
* It's important this is in percentage so when the player is resized
* the box will move accordingly.
*/
__privateAdd(this, _getBoxPosition);
__privateAdd(this, _getBoxShiftPosition);
__privateAdd(this, _handlePointerMove);
__privateAdd(this, _previewRequest);
__privateAdd(this, _seekRequest);
__privateAdd(this, _rootNode, void 0);
__privateAdd(this, _animation, void 0);
__privateAdd(this, _boxes, void 0);
__privateAdd(this, _previewTime, void 0);
__privateAdd(this, _previewBox, void 0);
__privateAdd(this, _currentBox, void 0);
__privateAdd(this, _boxPaddingLeft, void 0);
__privateAdd(this, _boxPaddingRight, void 0);
__privateAdd(this, _mediaChaptersCues, void 0);
__privateAdd(this, _updateRange, (value) => {
if (this.dragging)
return;
if ((0, import_utils.isValidNumber)(value)) {
this.range.valueAsNumber = value;
}
this.updateBar();
});
this.container.appendChild(template.content.cloneNode(true));
const track = this.shadowRoot.querySelector("#track");
track.insertAdjacentHTML("afterbegin", '<div id="buffered" part="buffered"></div>');
__privateSet(this, _boxes, this.shadowRoot.querySelectorAll('[part~="box"]'));
__privateSet(this, _previewBox, this.shadowRoot.querySelector('[part~="preview-box"]'));
__privateSet(this, _currentBox, this.shadowRoot.querySelector('[part~="current-box"]'));
const computedStyle = getComputedStyle(this);
__privateSet(this, _boxPaddingLeft, parseInt(
computedStyle.getPropertyValue("--media-box-padding-left")
));
__privateSet(this, _boxPaddingRight, parseInt(
computedStyle.getPropertyValue("--media-box-padding-right")
));
__privateSet(this, _animation, new import_range_animation.RangeAnimation(this.range, __privateGet(this, _updateRange), 60));
}
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_PAUSED,
import_constants.MediaUIAttributes.MEDIA_DURATION,
import_constants.MediaUIAttributes.MEDIA_SEEKABLE,
import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME,
import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE,
import_constants.MediaUIAttributes.MEDIA_PREVIEW_TIME,
import_constants.MediaUIAttributes.MEDIA_PREVIEW_CHAPTER,
import_constants.MediaUIAttributes.MEDIA_BUFFERED,
import_constants.MediaUIAttributes.MEDIA_PLAYBACK_RATE,
import_constants.MediaUIAttributes.MEDIA_LOADING,
import_constants.MediaUIAttributes.MEDIA_ENDED
];
}
connectedCallback() {
var _a;
super.connectedCallback();
this.range.setAttribute("aria-label", import_labels.nouns.SEEK());
__privateMethod(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
__privateSet(this, _rootNode, this.getRootNode());
(_a = __privateGet(this, _rootNode)) == null ? void 0 : _a.addEventListener("transitionstart", this);
}
disconnectedCallback() {
var _a;
super.disconnectedCallback();
__privateMethod(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
(_a = __privateGet(this, _rootNode)) == null ? void 0 : _a.removeEventListener("transitionstart", this);
__privateSet(this, _rootNode, null);
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (oldValue == newValue)
return;
if (attrName === import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME || attrName === import_constants.MediaUIAttributes.MEDIA_PAUSED || attrName === import_constants.MediaUIAttributes.MEDIA_ENDED || attrName === import_constants.MediaUIAttributes.MEDIA_LOADING || attrName === import_constants.MediaUIAttributes.MEDIA_DURATION || attrName === import_constants.MediaUIAttributes.MEDIA_SEEKABLE) {
__privateGet(this, _animation).update({
start: calcRangeValueFromTime(this),
duration: this.mediaSeekableEnd - this.mediaSeekableStart,
playbackRate: this.mediaPlaybackRate
});
__privateMethod(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this);
updateAriaValueText(this);
} else if (attrName === import_constants.MediaUIAttributes.MEDIA_BUFFERED) {
this.updateBufferedBar();
}
if (attrName === import_constants.MediaUIAttributes.MEDIA_DURATION || attrName === import_constants.MediaUIAttributes.MEDIA_SEEKABLE) {
this.mediaChaptersCues = __privateGet(this, _mediaChaptersCues);
this.updateBar();
}
}
get mediaChaptersCues() {
return __privateGet(this, _mediaChaptersCues);
}
set mediaChaptersCues(value) {
var _a;
__privateSet(this, _mediaChaptersCues, value);
this.updateSegments(
(_a = __privateGet(this, _mediaChaptersCues)) == null ? void 0 : _a.map((c) => ({
start: calcRangeValueFromTime(this, c.startTime),
end: calcRangeValueFromTime(this, c.endTime)
}))
);
}
/**
* Is the media paused
*/
get mediaPaused() {
return (0, import_element_utils2.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_PAUSED);
}
set mediaPaused(value) {
(0, import_element_utils2.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_PAUSED, value);
}
/**
* Is the media loading
*/
get mediaLoading() {
return (0, import_element_utils2.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_LOADING);
}
set mediaLoading(value) {
(0, import_element_utils2.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_LOADING, value);
}
/**
*
*/
get mediaDuration() {
return (0, import_element_utils2.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_DURATION);
}
set mediaDuration(value) {
(0, import_element_utils2.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_DURATION, value);
}
/**
*
*/
get mediaCurrentTime() {
return (0, import_element_utils2.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME);
}
set mediaCurrentTime(value) {
(0, import_element_utils2.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_CURRENT_TIME, value);
}
/**
*
*/
get mediaPlaybackRate() {
return (0, import_element_utils2.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_PLAYBACK_RATE, 1);
}
set mediaPlaybackRate(value) {
(0, import_element_utils2.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_PLAYBACK_RATE, value);
}
/**
* An array of ranges, each range being an array of two numbers.
* e.g. [[1, 2], [3, 4]]
*/
get mediaBuffered() {
const buffered = this.getAttribute(import_constants.MediaUIAttributes.MEDIA_BUFFERED);
if (!buffered)
return [];
return buffered.split(" ").map((timePair) => timePair.split(":").map((timeStr) => +timeStr));
}
set mediaBuffered(list) {
if (!list) {
this.removeAttribute(import_constants.MediaUIAttributes.MEDIA_BUFFERED);
return;
}
const strVal = list.map((tuple) => tuple.join(":")).join(" ");
this.setAttribute(import_constants.MediaUIAttributes.MEDIA_BUFFERED, strVal);
}
/**
* Range of values that can be seeked to
* An array of two numbers [start, end]
*/
get mediaSeekable() {
const seekable = this.getAttribute(import_constants.MediaUIAttributes.MEDIA_SEEKABLE);
if (!seekable)
return void 0;
return seekable.split(":").map((time) => +time);
}
set mediaSeekable(range) {
if (range == null) {
this.removeAttribute(import_constants.MediaUIAttributes.MEDIA_SEEKABLE);
return;
}
this.setAttribute(import_constants.MediaUIAttributes.MEDIA_SEEKABLE, range.join(":"));
}
/**
*
*/
get mediaSeekableEnd() {
var _a;
const [, end = this.mediaDuration] = (_a = this.mediaSeekable) != null ? _a : [];
return end;
}
get mediaSeekableStart() {
var _a;
const [start = 0] = (_a = this.mediaSeekable) != null ? _a : [];
return start;
}
/**
* The url of the preview image
*/
get mediaPreviewImage() {
return (0, import_element_utils2.getStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE);
}
set mediaPreviewImage(value) {
(0, import_element_utils2.setStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_PREVIEW_IMAGE, value);
}
/**
*
*/
get mediaPreviewTime() {
return (0, import_element_utils2.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_PREVIEW_TIME);
}
set mediaPreviewTime(value) {
(0, import_element_utils2.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_PREVIEW_TIME, value);
}
/**
*
*/
get mediaEnded() {
return (0, import_element_utils2.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_ENDED);
}
set mediaEnded(value) {
(0, import_element_utils2.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_ENDED, value);
}
/* Add a buffered progress bar */
updateBar() {
super.updateBar();
this.updateBufferedBar();
this.updateCurrentBox();
}
updateBufferedBar() {
var _a;
const buffered = this.mediaBuffered;
if (!buffered.length) {
return;
}
let relativeBufferedEnd;
if (!this.mediaEnded) {
const currentTime = this.mediaCurrentTime;
const [, bufferedEnd = this.mediaSeekableStart] = (_a = buffered.find(
([start, end]) => start <= currentTime && currentTime <= end
)) != null ? _a : [];
relativeBufferedEnd = calcRangeValueFromTime(this, bufferedEnd);
} else {
relativeBufferedEnd = 1;
}
const { style } = (0, import_element_utils2.getOrInsertCSSRule)(this.shadowRoot, "#buffered");
style.setProperty("width", `${relativeBufferedEnd * 100}%`);
}
updateCurrentBox() {
const currentSlot = this.shadowRoot.querySelector(
'slot[name="current"]'
);
if (!currentSlot.assignedElements().length)
return;
const currentRailRule = (0, import_element_utils2.getOrInsertCSSRule)(
this.shadowRoot,
"#current-rail"
);
const currentBoxRule = (0, import_element_utils2.getOrInsertCSSRule)(
this.shadowRoot,
'[part~="current-box"]'
);
const rects = __privateMethod(this, _getElementRects, getElementRects_fn).call(this, __privateGet(this, _currentBox));
const boxPos = __privateMethod(this, _getBoxPosition, getBoxPosition_fn).call(this, rects, this.range.valueAsNumber);
const boxShift = __privateMethod(this, _getBoxShiftPosition, getBoxShiftPosition_fn).call(this, rects, this.range.valueAsNumber);
currentRailRule.style.transform = `translateX(${boxPos})`;
currentRailRule.style.setProperty("--_range-width", `${rects.range.width}`);
currentBoxRule.style.setProperty("--_box-shift", `${boxShift}`);
currentBoxRule.style.setProperty("--_box-width", `${rects.box.width}px`);
currentBoxRule.style.setProperty("visibility", "initial");
}
handleEvent(evt) {
super.handleEvent(evt);
switch (evt.type) {
case "input":
__privateMethod(this, _seekRequest, seekRequest_fn).call(this);
break;
case "pointermove":
__privateMethod(this, _handlePointerMove, handlePointerMove_fn).call(this, evt);
break;
case "pointerup":
case "pointerleave":
__privateMethod(this, _previewRequest, previewRequest_fn).call(this, null);
break;
case "transitionstart":
if ((0, import_element_utils2.containsComposedNode)(evt.target, this)) {
setTimeout(() => __privateMethod(this, _toggleRangeAnimation, toggleRangeAnimation_fn).call(this), 0);
}
break;
}
}
}
_rootNode = new WeakMap();
_animation = new WeakMap();
_boxes = new WeakMap();
_previewTime = new WeakMap();
_previewBox = new WeakMap();
_currentBox = new WeakMap();
_boxPaddingLeft = new WeakMap();
_boxPaddingRight = new WeakMap();
_mediaChaptersCues = new WeakMap();
_toggleRangeAnimation = new WeakSet();
toggleRangeAnimation_fn = function() {
if (__privateMethod(this, _shouldRangeAnimate, shouldRangeAnimate_fn).call(this)) {
__privateGet(this, _animation).start();
} else {
__privateGet(this, _animation).stop();
}
};
_shouldRangeAnimate = new WeakSet();
shouldRangeAnimate_fn = function() {
return this.isConnected && !this.mediaPaused && !this.mediaLoading && !this.mediaEnded && this.mediaSeekableEnd > 0 && (0, import_element_utils.isElementVisible)(this);
};
_updateRange = new WeakMap();
_getElementRects = new WeakSet();
getElementRects_fn = function(box) {
var _a;
const bounds = (_a = this.getAttribute("bounds") ? (0, import_element_utils2.closestComposedNode)(this, `#${this.getAttribute("bounds")}`) : this.parentElement) != null ? _a : this;
const boundsRect = bounds.getBoundingClientRect();
const rangeRect = this.range.getBoundingClientRect();
const width = box.offsetWidth;
const min = -(rangeRect.left - boundsRect.left - width / 2);
const max = boundsRect.right - rangeRect.left - width / 2;
return {
box: { width, min, max },
bounds: boundsRect,
range: rangeRect
};
};
_getBoxPosition = new WeakSet();
getBoxPosition_fn = function(rects, ratio) {
let position = `${ratio * 100}%`;
const { width, min, max } = rects.box;
if (!width)
return position;
if (!Number.isNaN(min)) {
const pad = `var(--media-box-padding-left)`;
const minPos = `calc(1 / var(--_range-width) * 100 * ${min}% + ${pad})`;
position = `max(${minPos}, ${position})`;
}
if (!Number.isNaN(max)) {
const pad = `var(--media-box-padding-right)`;
const maxPos = `calc(1 / var(--_range-width) * 100 * ${max}% - ${pad})`;
position = `min(${position}, ${maxPos})`;
}
return position;
};
_getBoxShiftPosition = new WeakSet();
getBoxShiftPosition_fn = function(rects, ratio) {
const { width, min, max } = rects.box;
const pointerX = ratio * rects.range.width;
if (pointerX < min + __privateGet(this, _boxPaddingLeft)) {
const offset = rects.range.left - rects.bounds.left - __privateGet(this, _boxPaddingLeft);
return `${pointerX - width / 2 + offset}px`;
}
if (pointerX > max - __privateGet(this, _boxPaddingRight)) {
const offset = rects.bounds.right - rects.range.right - __privateGet(this, _boxPaddingRight);
return `${pointerX + width / 2 - offset - rects.range.width}px`;
}
return 0;
};
_handlePointerMove = new WeakSet();
handlePointerMove_fn = function(evt) {
const isOverBoxes = [...__privateGet(this, _boxes)].some(
(b) => evt.composedPath().includes(b)
);
if (!this.dragging && (isOverBoxes || !evt.composedPath().includes(this))) {
__privateMethod(this, _previewRequest, previewRequest_fn).call(this, null);
return;
}
const duration = this.mediaSeekableEnd;
if (!duration)
return;
const previewRailRule = (0, import_element_utils2.getOrInsertCSSRule)(
this.shadowRoot,
"#preview-rail"
);
const previewBoxRule = (0, import_element_utils2.getOrInsertCSSRule)(
this.shadowRoot,
'[part~="preview-box"]'
);
const rects = __privateMethod(this, _getElementRects, getElementRects_fn).call(this, __privateGet(this, _previewBox));
let pointerRatio = (evt.clientX - rects.range.left) / rects.range.width;
pointerRatio = Math.max(0, Math.min(1, pointerRatio));
const boxPos = __privateMethod(this, _getBoxPosition, getBoxPosition_fn).call(this, rects, pointerRatio);
const boxShift = __privateMethod(this, _getBoxShiftPosition, getBoxShiftPosition_fn).call(this, rects, pointerRatio);
previewRailRule.style.transform = `translateX(${boxPos})`;
previewRailRule.style.setProperty("--_range-width", `${rects.range.width}`);
previewBoxRule.style.setProperty("--_box-shift", `${boxShift}`);
previewBoxRule.style.setProperty("--_box-width", `${rects.box.width}px`);
const diff = Math.round(__privateGet(this, _previewTime)) - Math.round(pointerRatio * duration);
if (Math.abs(diff) < 1 && pointerRatio > 0.01 && pointerRatio < 0.99)
return;
__privateSet(this, _previewTime, pointerRatio * duration);
__privateMethod(this, _previewRequest, previewRequest_fn).call(this, __privateGet(this, _previewTime));
};
_previewRequest = new WeakSet();
previewRequest_fn = function(detail) {
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(import_constants.MediaUIEvents.MEDIA_PREVIEW_REQUEST, {
composed: true,
bubbles: true,
detail
})
);
};
_seekRequest = new WeakSet();
seekRequest_fn = function() {
__privateGet(this, _animation).stop();
const detail = calcTimeFromRangeValue(this);
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(import_constants.MediaUIEvents.MEDIA_SEEK_REQUEST, {
composed: true,
bubbles: true,
detail
})
);
};
if (!import_server_safe_globals.globalThis.customElements.get("media-time-range")) {
import_server_safe_globals.globalThis.customElements.define("media-time-range", MediaTimeRange);
}
var media_time_range_default = MediaTimeRange;

View File

@@ -0,0 +1,223 @@
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 media_tooltip_exports = {};
__export(media_tooltip_exports, {
Attributes: () => Attributes,
default: () => media_tooltip_default
});
module.exports = __toCommonJS(media_tooltip_exports);
var import_element_utils = require("./utils/element-utils.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
const Attributes = {
PLACEMENT: "placement",
BOUNDS: "bounds"
};
const template = import_server_safe_globals.document.createElement("template");
template.innerHTML = /*html*/
`
<style>
:host {
--_tooltip-background-color: var(--media-tooltip-background-color, var(--media-secondary-color, rgba(20, 20, 30, .7)));
--_tooltip-background: var(--media-tooltip-background, var(--_tooltip-background-color));
--_tooltip-arrow-half-width: calc(var(--media-tooltip-arrow-width, 12px) / 2);
--_tooltip-arrow-height: var(--media-tooltip-arrow-height, 5px);
--_tooltip-arrow-background: var(--media-tooltip-arrow-color, var(--_tooltip-background-color));
position: relative;
pointer-events: none;
display: var(--media-tooltip-display, inline-flex);
justify-content: center;
align-items: center;
box-sizing: border-box;
z-index: var(--media-tooltip-z-index, 1);
background: var(--_tooltip-background);
color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
font: var(--media-font,
var(--media-font-weight, 400)
var(--media-font-size, 13px) /
var(--media-text-content-height, var(--media-control-height, 18px))
var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif));
padding: var(--media-tooltip-padding, .35em .7em);
border: var(--media-tooltip-border, none);
border-radius: var(--media-tooltip-border-radius, 5px);
filter: var(--media-tooltip-filter, drop-shadow(0 0 4px rgba(0, 0, 0, .2)));
white-space: var(--media-tooltip-white-space, nowrap);
}
:host([hidden]) {
display: none;
}
img, svg {
display: inline-block;
}
#arrow {
position: absolute;
width: 0px;
height: 0px;
border-style: solid;
display: var(--media-tooltip-arrow-display, block);
}
:host(:not([placement])),
:host([placement="top"]) {
position: absolute;
bottom: calc(100% + var(--media-tooltip-distance, 12px));
left: 50%;
transform: translate(calc(-50% - var(--media-tooltip-offset-x, 0px)), 0);
}
:host(:not([placement])) #arrow,
:host([placement="top"]) #arrow {
top: 100%;
left: 50%;
border-width: var(--_tooltip-arrow-height) var(--_tooltip-arrow-half-width) 0 var(--_tooltip-arrow-half-width);
border-color: var(--_tooltip-arrow-background) transparent transparent transparent;
transform: translate(calc(-50% + var(--media-tooltip-offset-x, 0px)), 0);
}
:host([placement="right"]) {
position: absolute;
left: calc(100% + var(--media-tooltip-distance, 12px));
top: 50%;
transform: translate(0, -50%);
}
:host([placement="right"]) #arrow {
top: 50%;
right: 100%;
border-width: var(--_tooltip-arrow-half-width) var(--_tooltip-arrow-height) var(--_tooltip-arrow-half-width) 0;
border-color: transparent var(--_tooltip-arrow-background) transparent transparent;
transform: translate(0, -50%);
}
:host([placement="bottom"]) {
position: absolute;
top: calc(100% + var(--media-tooltip-distance, 12px));
left: 50%;
transform: translate(calc(-50% - var(--media-tooltip-offset-x, 0px)), 0);
}
:host([placement="bottom"]) #arrow {
bottom: 100%;
left: 50%;
border-width: 0 var(--_tooltip-arrow-half-width) var(--_tooltip-arrow-height) var(--_tooltip-arrow-half-width);
border-color: transparent transparent var(--_tooltip-arrow-background) transparent;
transform: translate(calc(-50% + var(--media-tooltip-offset-x, 0px)), 0);
}
:host([placement="left"]) {
position: absolute;
right: calc(100% + var(--media-tooltip-distance, 12px));
top: 50%;
transform: translate(0, -50%);
}
:host([placement="left"]) #arrow {
top: 50%;
left: 100%;
border-width: var(--_tooltip-arrow-half-width) 0 var(--_tooltip-arrow-half-width) var(--_tooltip-arrow-height);
border-color: transparent transparent transparent var(--_tooltip-arrow-background);
transform: translate(0, -50%);
}
:host([placement="none"]) #arrow {
display: none;
}
</style>
<slot></slot>
<div id="arrow"></div>
`;
class MediaTooltip extends import_server_safe_globals.globalThis.HTMLElement {
constructor() {
super();
// Adjusts tooltip position relative to the closest specified container
// such that it doesn't spill out of the left or right sides. Only applies
// to 'top' and 'bottom' placed tooltips.
this.updateXOffset = () => {
var _a;
if (!(0, import_element_utils.isElementVisible)(this, { checkOpacity: false, checkVisibilityCSS: false }))
return;
const placement = this.placement;
if (placement === "left" || placement === "right") {
this.style.removeProperty("--media-tooltip-offset-x");
return;
}
const tooltipStyle = getComputedStyle(this);
const containingEl = (_a = (0, import_element_utils.closestComposedNode)(this, "#" + this.bounds)) != null ? _a : (0, import_element_utils.getMediaController)(this);
if (!containingEl)
return;
const { x: containerX, width: containerWidth } = containingEl.getBoundingClientRect();
const { x: tooltipX, width: tooltipWidth } = this.getBoundingClientRect();
const tooltipRight = tooltipX + tooltipWidth;
const containerRight = containerX + containerWidth;
const offsetXVal = tooltipStyle.getPropertyValue(
"--media-tooltip-offset-x"
);
const currOffsetX = offsetXVal ? parseFloat(offsetXVal.replace("px", "")) : 0;
const marginVal = tooltipStyle.getPropertyValue(
"--media-tooltip-container-margin"
);
const currMargin = marginVal ? parseFloat(marginVal.replace("px", "")) : 0;
const leftDiff = tooltipX - containerX + currOffsetX - currMargin;
const rightDiff = tooltipRight - containerRight + currOffsetX + currMargin;
if (leftDiff < 0) {
this.style.setProperty("--media-tooltip-offset-x", `${leftDiff}px`);
return;
}
if (rightDiff > 0) {
this.style.setProperty("--media-tooltip-offset-x", `${rightDiff}px`);
return;
}
this.style.removeProperty("--media-tooltip-offset-x");
};
if (!this.shadowRoot) {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
this.arrowEl = this.shadowRoot.querySelector("#arrow");
if (Object.prototype.hasOwnProperty.call(this, "placement")) {
const placement = this.placement;
delete this.placement;
this.placement = placement;
}
}
static get observedAttributes() {
return [Attributes.PLACEMENT, Attributes.BOUNDS];
}
/**
* Get or set tooltip placement
*/
get placement() {
return (0, import_element_utils.getStringAttr)(this, Attributes.PLACEMENT);
}
set placement(value) {
(0, import_element_utils.setStringAttr)(this, Attributes.PLACEMENT, value);
}
/**
* Get or set tooltip container ID selector that will constrain the tooltips
* horizontal position.
*/
get bounds() {
return (0, import_element_utils.getStringAttr)(this, Attributes.BOUNDS);
}
set bounds(value) {
(0, import_element_utils.setStringAttr)(this, Attributes.BOUNDS, value);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-tooltip")) {
import_server_safe_globals.globalThis.customElements.define("media-tooltip", MediaTooltip);
}
var media_tooltip_default = MediaTooltip;

View File

@@ -0,0 +1,105 @@
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 media_volume_range_exports = {};
__export(media_volume_range_exports, {
default: () => media_volume_range_default
});
module.exports = __toCommonJS(media_volume_range_exports);
var import_server_safe_globals = require("./utils/server-safe-globals.js");
var import_media_chrome_range = require("./media-chrome-range.js");
var import_constants = require("./constants.js");
var import_labels = require("./labels/labels.js");
var import_element_utils = require("./utils/element-utils.js");
const DEFAULT_VOLUME = 1;
const toVolume = (el) => {
if (el.mediaMuted)
return 0;
return el.mediaVolume;
};
const formatAsPercentString = (value) => `${Math.round(value * 100)}%`;
class MediaVolumeRange extends import_media_chrome_range.MediaChromeRange {
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_VOLUME,
import_constants.MediaUIAttributes.MEDIA_MUTED,
import_constants.MediaUIAttributes.MEDIA_VOLUME_UNAVAILABLE
];
}
constructor() {
super();
this.range.addEventListener("input", () => {
const detail = this.range.value;
const evt = new import_server_safe_globals.globalThis.CustomEvent(
import_constants.MediaUIEvents.MEDIA_VOLUME_REQUEST,
{
composed: true,
bubbles: true,
detail
}
);
this.dispatchEvent(evt);
});
}
connectedCallback() {
super.connectedCallback();
this.range.setAttribute("aria-label", import_labels.nouns.VOLUME());
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === import_constants.MediaUIAttributes.MEDIA_VOLUME || attrName === import_constants.MediaUIAttributes.MEDIA_MUTED) {
this.range.valueAsNumber = toVolume(this);
this.range.setAttribute(
"aria-valuetext",
formatAsPercentString(this.range.valueAsNumber)
);
this.updateBar();
}
}
/**
*
*/
get mediaVolume() {
return (0, import_element_utils.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_VOLUME, DEFAULT_VOLUME);
}
set mediaVolume(value) {
(0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_VOLUME, value);
}
/**
* Is the media currently muted
*/
get mediaMuted() {
return (0, import_element_utils.getBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_MUTED);
}
set mediaMuted(value) {
(0, import_element_utils.setBooleanAttr)(this, import_constants.MediaUIAttributes.MEDIA_MUTED, value);
}
/**
* The volume unavailability state
*/
get mediaVolumeUnavailable() {
return (0, import_element_utils.getStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_VOLUME_UNAVAILABLE);
}
set mediaVolumeUnavailable(value) {
(0, import_element_utils.setStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_VOLUME_UNAVAILABLE, value);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-volume-range")) {
import_server_safe_globals.globalThis.customElements.define("media-volume-range", MediaVolumeRange);
}
var media_volume_range_default = MediaVolumeRange;

View File

@@ -0,0 +1,47 @@
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 menu_exports = {};
__export(menu_exports, {
MediaAudioTrackMenu: () => import_media_audio_track_menu.MediaAudioTrackMenu,
MediaAudioTrackMenuButton: () => import_media_audio_track_menu_button.MediaAudioTrackMenuButton,
MediaCaptionsMenu: () => import_media_captions_menu.MediaCaptionsMenu,
MediaCaptionsMenuButton: () => import_media_captions_menu_button.MediaCaptionsMenuButton,
MediaChromeMenu: () => import_media_chrome_menu.MediaChromeMenu,
MediaChromeMenuItem: () => import_media_chrome_menu_item.MediaChromeMenuItem,
MediaPlaybackRateMenu: () => import_media_playback_rate_menu.MediaPlaybackRateMenu,
MediaPlaybackRateMenuButton: () => import_media_playback_rate_menu_button.MediaPlaybackRateMenuButton,
MediaRenditionMenu: () => import_media_rendition_menu.MediaRenditionMenu,
MediaRenditionMenuButton: () => import_media_rendition_menu_button.MediaRenditionMenuButton,
MediaSettingsMenu: () => import_media_settings_menu.MediaSettingsMenu,
MediaSettingsMenuButton: () => import_media_settings_menu_button.MediaSettingsMenuButton,
MediaSettingsMenuItem: () => import_media_settings_menu_item.MediaSettingsMenuItem
});
module.exports = __toCommonJS(menu_exports);
var import_media_chrome_menu = require("./media-chrome-menu.js");
var import_media_chrome_menu_item = require("./media-chrome-menu-item.js");
var import_media_settings_menu = require("./media-settings-menu.js");
var import_media_settings_menu_item = require("./media-settings-menu-item.js");
var import_media_settings_menu_button = require("./media-settings-menu-button.js");
var import_media_audio_track_menu = require("./media-audio-track-menu.js");
var import_media_audio_track_menu_button = require("./media-audio-track-menu-button.js");
var import_media_captions_menu = require("./media-captions-menu.js");
var import_media_captions_menu_button = require("./media-captions-menu-button.js");
var import_media_playback_rate_menu = require("./media-playback-rate-menu.js");
var import_media_playback_rate_menu_button = require("./media-playback-rate-menu-button.js");
var import_media_rendition_menu = require("./media-rendition-menu.js");
var import_media_rendition_menu_button = require("./media-rendition-menu-button.js");

View File

@@ -0,0 +1,92 @@
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 media_audio_track_menu_button_exports = {};
__export(media_audio_track_menu_button_exports, {
MediaAudioTrackMenuButton: () => MediaAudioTrackMenuButton,
default: () => media_audio_track_menu_button_default
});
module.exports = __toCommonJS(media_audio_track_menu_button_exports);
var import_constants = require("../constants.js");
var import_media_chrome_menu_button = require("./media-chrome-menu-button.js");
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_labels = require("../labels/labels.js");
var import_element_utils = require("../utils/element-utils.js");
const 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>`
);
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = /*html*/
`
<style>
:host([aria-expanded="true"]) slot[name=tooltip] {
display: none;
}
</style>
<slot name="icon">${audioTrackIcon}</slot>
`;
class MediaAudioTrackMenuButton extends import_media_chrome_menu_button.MediaChromeMenuButton {
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED,
import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_UNAVAILABLE
];
}
constructor() {
super({ slotTemplate, tooltipContent: import_labels.tooltipLabels.AUDIO_TRACK_MENU });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-label", import_labels.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 _a;
if (this.invokeTarget != void 0)
return super.invokeTargetElement;
return (_a = (0, import_element_utils.getMediaController)(this)) == null ? void 0 : _a.querySelector("media-audio-track-menu");
}
/**
* Get enabled audio track id.
* @return {string}
*/
get mediaAudioTrackEnabled() {
var _a;
return (_a = (0, import_element_utils.getStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED)) != null ? _a : "";
}
set mediaAudioTrackEnabled(id) {
(0, import_element_utils.setStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED, id);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-audio-track-menu-button")) {
import_server_safe_globals.globalThis.customElements.define(
"media-audio-track-menu-button",
MediaAudioTrackMenuButton
);
}
var media_audio_track_menu_button_default = MediaAudioTrackMenuButton;

View File

@@ -0,0 +1,155 @@
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;
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var media_audio_track_menu_exports = {};
__export(media_audio_track_menu_exports, {
MediaAudioTrackMenu: () => MediaAudioTrackMenu,
default: () => media_audio_track_menu_default
});
module.exports = __toCommonJS(media_audio_track_menu_exports);
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_constants = require("../constants.js");
var import_utils = require("../utils/utils.js");
var import_media_chrome_menu = require("./media-chrome-menu.js");
var import_element_utils = require("../utils/element-utils.js");
var _audioTrackList, _prevState, _render, render_fn, _onChange, onChange_fn;
class MediaAudioTrackMenu extends import_media_chrome_menu.MediaChromeMenu {
constructor() {
super(...arguments);
__privateAdd(this, _render);
__privateAdd(this, _onChange);
__privateAdd(this, _audioTrackList, []);
__privateAdd(this, _prevState, void 0);
}
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST,
import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED,
import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_UNAVAILABLE
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED && oldValue !== newValue) {
this.value = newValue;
} else if (attrName === import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST && oldValue !== newValue) {
__privateSet(this, _audioTrackList, (0, import_utils.parseAudioTrackList)(newValue != null ? newValue : ""));
__privateMethod(this, _render, render_fn).call(this);
}
}
connectedCallback() {
super.connectedCallback();
this.addEventListener("change", __privateMethod(this, _onChange, onChange_fn));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener("change", __privateMethod(this, _onChange, onChange_fn));
}
/**
* Returns the anchor element when it is a floating menu.
*/
get anchorElement() {
var _a;
if (this.anchor !== "auto")
return super.anchorElement;
return (_a = (0, import_element_utils.getMediaController)(this)) == null ? void 0 : _a.querySelector(
"media-audio-track-menu-button"
);
}
get mediaAudioTrackList() {
return __privateGet(this, _audioTrackList);
}
set mediaAudioTrackList(list) {
__privateSet(this, _audioTrackList, list);
__privateMethod(this, _render, render_fn).call(this);
}
/**
* Get enabled audio track id.
*/
get mediaAudioTrackEnabled() {
var _a;
return (_a = (0, import_element_utils.getStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED)) != null ? _a : "";
}
set mediaAudioTrackEnabled(id) {
(0, import_element_utils.setStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED, id);
}
}
_audioTrackList = new WeakMap();
_prevState = new WeakMap();
_render = new WeakSet();
render_fn = function() {
if (__privateGet(this, _prevState) === JSON.stringify(this.mediaAudioTrackList))
return;
__privateSet(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 = (0, import_media_chrome_menu.createMenuItem)({
type: "radio",
text,
value: `${audioTrack.id}`,
checked: audioTrack.enabled
});
item.prepend((0, import_media_chrome_menu.createIndicator)(this, "checked-indicator"));
this.defaultSlot.append(item);
}
};
_onChange = new WeakSet();
onChange_fn = function() {
if (this.value == null)
return;
const event = new import_server_safe_globals.globalThis.CustomEvent(
import_constants.MediaUIEvents.MEDIA_AUDIO_TRACK_REQUEST,
{
composed: true,
bubbles: true,
detail: this.value
}
);
this.dispatchEvent(event);
};
if (!import_server_safe_globals.globalThis.customElements.get("media-audio-track-menu")) {
import_server_safe_globals.globalThis.customElements.define(
"media-audio-track-menu",
MediaAudioTrackMenu
);
}
var media_audio_track_menu_default = MediaAudioTrackMenu;

View File

@@ -0,0 +1,158 @@
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 __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;
};
var media_captions_menu_button_exports = {};
__export(media_captions_menu_button_exports, {
MediaCaptionsMenuButton: () => MediaCaptionsMenuButton,
default: () => media_captions_menu_button_default
});
module.exports = __toCommonJS(media_captions_menu_button_exports);
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_constants = require("../constants.js");
var import_labels = require("../labels/labels.js");
var import_media_chrome_menu_button = require("./media-chrome-menu-button.js");
var import_element_utils = require("../utils/element-utils.js");
var import_captions = require("../utils/captions.js");
var _captionsReady;
const 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>`;
const 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>`;
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.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>
`;
const updateAriaChecked = (el) => {
el.setAttribute("aria-checked", (0, import_captions.areSubsOn)(el).toString());
};
class MediaCaptionsMenuButton extends import_media_chrome_menu_button.MediaChromeMenuButton {
constructor(options = {}) {
super({ slotTemplate, tooltipContent: import_labels.tooltipLabels.CAPTIONS, ...options });
__privateAdd(this, _captionsReady, void 0);
__privateSet(this, _captionsReady, false);
}
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_SUBTITLES_LIST,
import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
];
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-label", import_labels.nouns.CLOSED_CAPTIONS());
updateAriaChecked(this);
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING) {
updateAriaChecked(this);
}
}
/**
* Returns the element with the id specified by the `invoketarget` attribute.
* @return {HTMLElement | null}
*/
get invokeTargetElement() {
var _a;
if (this.invokeTarget != void 0)
return super.invokeTargetElement;
return (_a = (0, import_element_utils.getMediaController)(this)) == null ? void 0 : _a.querySelector("media-captions-menu");
}
/**
* An array of TextTrack-like objects.
* Objects must have the properties: kind, language, and label.
*/
get mediaSubtitlesList() {
return getSubtitlesListAttr(this, import_constants.MediaUIAttributes.MEDIA_SUBTITLES_LIST);
}
set mediaSubtitlesList(list) {
setSubtitlesListAttr(this, import_constants.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,
import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
);
}
set mediaSubtitlesShowing(list) {
setSubtitlesListAttr(this, import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, list);
}
}
_captionsReady = new WeakMap();
const getSubtitlesListAttr = (el, attrName) => {
const attrVal = el.getAttribute(attrName);
return attrVal ? (0, import_captions.parseTextTracksStr)(attrVal) : [];
};
const setSubtitlesListAttr = (el, attrName, list) => {
if (!(list == null ? void 0 : list.length)) {
el.removeAttribute(attrName);
return;
}
const newValStr = (0, import_captions.stringifyTextTrackList)(list);
const oldVal = el.getAttribute(attrName);
if (oldVal === newValStr)
return;
el.setAttribute(attrName, newValStr);
};
if (!import_server_safe_globals.globalThis.customElements.get("media-captions-menu-button")) {
import_server_safe_globals.globalThis.customElements.define(
"media-captions-menu-button",
MediaCaptionsMenuButton
);
}
var media_captions_menu_button_default = MediaCaptionsMenuButton;

View File

@@ -0,0 +1,208 @@
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;
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var media_captions_menu_exports = {};
__export(media_captions_menu_exports, {
MediaCaptionsMenu: () => MediaCaptionsMenu,
default: () => media_captions_menu_default
});
module.exports = __toCommonJS(media_captions_menu_exports);
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_constants = require("../constants.js");
var import_element_utils = require("../utils/element-utils.js");
var import_media_chrome_menu = require("./media-chrome-menu.js");
var import_captions = require("../utils/captions.js");
var _prevState, _render, render_fn, _onChange, onChange_fn;
const 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>`
);
const template = import_server_safe_globals.document.createElement("template");
template.innerHTML = import_media_chrome_menu.MediaChromeMenu.template.innerHTML + /*html*/
`
<slot name="captions-indicator" hidden>${ccIcon}</slot>`;
class MediaCaptionsMenu extends import_media_chrome_menu.MediaChromeMenu {
constructor() {
super(...arguments);
__privateAdd(this, _render);
__privateAdd(this, _onChange);
__privateAdd(this, _prevState, void 0);
}
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_SUBTITLES_LIST,
import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === import_constants.MediaUIAttributes.MEDIA_SUBTITLES_LIST && oldValue !== newValue) {
__privateMethod(this, _render, render_fn).call(this);
} else if (attrName === import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING && oldValue !== newValue) {
this.value = newValue;
}
}
connectedCallback() {
super.connectedCallback();
this.addEventListener("change", __privateMethod(this, _onChange, onChange_fn));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener("change", __privateMethod(this, _onChange, onChange_fn));
}
/**
* Returns the anchor element when it is a floating menu.
*/
get anchorElement() {
if (this.anchor !== "auto")
return super.anchorElement;
return (0, import_element_utils.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, import_constants.MediaUIAttributes.MEDIA_SUBTITLES_LIST);
}
set mediaSubtitlesList(list) {
setSubtitlesListAttr(this, import_constants.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,
import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
);
}
set mediaSubtitlesShowing(list) {
setSubtitlesListAttr(this, import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, list);
}
}
_prevState = new WeakMap();
_render = new WeakSet();
render_fn = function() {
var _a;
if (__privateGet(this, _prevState) === JSON.stringify(this.mediaSubtitlesList))
return;
__privateSet(this, _prevState, JSON.stringify(this.mediaSubtitlesList));
this.defaultSlot.textContent = "";
const isOff = !this.value;
const item = (0, import_media_chrome_menu.createMenuItem)({
type: "radio",
text: this.formatMenuItemText("Off"),
value: "off",
checked: isOff
});
item.prepend((0, import_media_chrome_menu.createIndicator)(this, "checked-indicator"));
this.defaultSlot.append(item);
const subtitlesList = this.mediaSubtitlesList;
for (const subs of subtitlesList) {
const item2 = (0, import_media_chrome_menu.createMenuItem)({
type: "radio",
text: this.formatMenuItemText(subs.label, subs),
value: (0, import_captions.formatTextTrackObj)(subs),
checked: this.value == (0, import_captions.formatTextTrackObj)(subs)
});
item2.prepend((0, import_media_chrome_menu.createIndicator)(this, "checked-indicator"));
const type = (_a = subs.kind) != null ? _a : "subs";
if (type === "captions") {
item2.append((0, import_media_chrome_menu.createIndicator)(this, "captions-indicator"));
}
this.defaultSlot.append(item2);
}
};
_onChange = new WeakSet();
onChange_fn = function() {
const showingSubs = this.mediaSubtitlesShowing;
const showingSubsStr = this.getAttribute(
import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
);
const localStateChange = this.value !== showingSubsStr;
if ((showingSubs == null ? void 0 : showingSubs.length) && localStateChange) {
this.dispatchEvent(
new import_server_safe_globals.globalThis.CustomEvent(
import_constants.MediaUIEvents.MEDIA_DISABLE_SUBTITLES_REQUEST,
{
composed: true,
bubbles: true,
detail: showingSubs
}
)
);
}
if (!this.value || !localStateChange)
return;
const event = new import_server_safe_globals.globalThis.CustomEvent(
import_constants.MediaUIEvents.MEDIA_SHOW_SUBTITLES_REQUEST,
{
composed: true,
bubbles: true,
detail: this.value
}
);
this.dispatchEvent(event);
};
MediaCaptionsMenu.template = template;
const getSubtitlesListAttr = (el, attrName) => {
const attrVal = el.getAttribute(attrName);
return attrVal ? (0, import_captions.parseTextTracksStr)(attrVal) : [];
};
const setSubtitlesListAttr = (el, attrName, list) => {
if (!(list == null ? void 0 : list.length)) {
el.removeAttribute(attrName);
return;
}
const newValStr = (0, import_captions.stringifyTextTrackList)(list);
const oldVal = el.getAttribute(attrName);
if (oldVal === newValStr)
return;
el.setAttribute(attrName, newValStr);
};
if (!import_server_safe_globals.globalThis.customElements.get("media-captions-menu")) {
import_server_safe_globals.globalThis.customElements.define("media-captions-menu", MediaCaptionsMenu);
}
var media_captions_menu_default = MediaCaptionsMenu;

View File

@@ -0,0 +1,67 @@
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 media_chrome_menu_button_exports = {};
__export(media_chrome_menu_button_exports, {
MediaChromeMenuButton: () => MediaChromeMenuButton,
default: () => media_chrome_menu_button_default
});
module.exports = __toCommonJS(media_chrome_menu_button_exports);
var import_media_chrome_button = require("../media-chrome-button.js");
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_events = require("../utils/events.js");
var import_element_utils = require("../utils/element-utils.js");
class MediaChromeMenuButton extends import_media_chrome_button.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 _a;
if (this.invokeTarget) {
return (_a = (0, import_element_utils.getDocumentOrShadowRoot)(this)) == null ? void 0 : _a.querySelector(
`#${this.invokeTarget}`
);
}
return null;
}
handleClick() {
var _a;
(_a = this.invokeTargetElement) == null ? void 0 : _a.dispatchEvent(
new import_events.InvokeEvent({ relatedTarget: this })
);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-chrome-menu-button")) {
import_server_safe_globals.globalThis.customElements.define(
"media-chrome-menu-button",
MediaChromeMenuButton
);
}
var media_chrome_menu_button_default = MediaChromeMenuButton;

View File

@@ -0,0 +1,455 @@
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;
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var media_chrome_menu_item_exports = {};
__export(media_chrome_menu_item_exports, {
Attributes: () => Attributes,
MediaChromeMenuItem: () => MediaChromeMenuItem,
default: () => media_chrome_menu_item_default
});
module.exports = __toCommonJS(media_chrome_menu_item_exports);
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_events = require("../utils/events.js");
var import_element_utils = require("../utils/element-utils.js");
var _dirty, _ownerElement, _handleSlotChange, handleSlotChange_fn, _submenuConnected, submenuConnected_fn, _submenuDisconnected, submenuDisconnected_fn, _handleMenuItem, _handleKeyUp, handleKeyUp_fn, _handleKeyDown, handleKeyDown_fn, _reset, reset_fn;
const template = import_server_safe_globals.document.createElement("template");
template.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>
`;
const Attributes = {
TYPE: "type",
VALUE: "value",
CHECKED: "checked",
DISABLED: "disabled"
};
class MediaChromeMenuItem extends import_server_safe_globals.globalThis.HTMLElement {
constructor() {
super();
__privateAdd(this, _handleSlotChange);
__privateAdd(this, _submenuConnected);
__privateAdd(this, _submenuDisconnected);
__privateAdd(this, _handleKeyUp);
__privateAdd(this, _handleKeyDown);
__privateAdd(this, _reset);
__privateAdd(this, _dirty, false);
__privateAdd(this, _ownerElement, void 0);
/**
* If there is a slotted submenu the fallback content of the description slot
* is populated with the text of the first checked item.
*/
__privateAdd(this, _handleMenuItem, () => {
var _a, _b;
this.setAttribute("submenusize", `${this.submenuElement.items.length}`);
const descriptionSlot = this.shadowRoot.querySelector(
'slot[name="description"]'
);
const checkedItem = (_a = this.submenuElement.checkedItems) == null ? void 0 : _a[0];
const description = (_b = checkedItem == null ? void 0 : checkedItem.dataset.description) != null ? _b : checkedItem == null ? void 0 : checkedItem.text;
const span = import_server_safe_globals.document.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 [
Attributes.TYPE,
Attributes.DISABLED,
Attributes.CHECKED,
Attributes.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":
__privateMethod(this, _handleSlotChange, handleSlotChange_fn).call(this, event);
break;
case "click":
this.handleClick(event);
break;
case "keydown":
__privateMethod(this, _handleKeyDown, handleKeyDown_fn).call(this, event);
break;
case "keyup":
__privateMethod(this, _handleKeyUp, handleKeyUp_fn).call(this, event);
break;
}
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName === Attributes.CHECKED && isCheckable(this) && !__privateGet(this, _dirty)) {
this.setAttribute("aria-checked", newValue != null ? "true" : "false");
} else if (attrName === Attributes.TYPE && newValue !== oldValue) {
this.role = "menuitem" + newValue;
} else if (attrName === Attributes.DISABLED && newValue !== oldValue) {
if (newValue == null) {
this.enable();
} else {
this.disable();
}
}
}
connectedCallback() {
if (!this.hasAttribute(Attributes.DISABLED)) {
this.enable();
}
this.role = "menuitem" + this.type;
__privateSet(this, _ownerElement, closestMenuItemsContainer(this, this.parentNode));
__privateMethod(this, _reset, reset_fn).call(this);
}
disconnectedCallback() {
this.disable();
__privateMethod(this, _reset, reset_fn).call(this);
__privateSet(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 _a;
if (this.invokeTarget) {
return (_a = (0, import_element_utils.getDocumentOrShadowRoot)(this)) == null ? void 0 : _a.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 _a;
return (_a = this.getAttribute(Attributes.TYPE)) != null ? _a : "";
}
set type(val) {
this.setAttribute(Attributes.TYPE, `${val}`);
}
get value() {
var _a;
return (_a = this.getAttribute(Attributes.VALUE)) != null ? _a : this.text;
}
set value(val) {
this.setAttribute(Attributes.VALUE, val);
}
get text() {
var _a;
return ((_a = this.textContent) != null ? _a : "").trim();
}
get checked() {
if (!isCheckable(this))
return void 0;
return this.getAttribute("aria-checked") === "true";
}
set checked(value) {
if (!isCheckable(this))
return;
__privateSet(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 && (0, import_element_utils.containsComposedNode)(this, event.target)) {
this.invokeTargetElement.dispatchEvent(
new import_events.InvokeEvent({ relatedTarget: this })
);
}
}
get keysUsed() {
return ["Enter", " "];
}
}
_dirty = new WeakMap();
_ownerElement = new WeakMap();
_handleSlotChange = new WeakSet();
handleSlotChange_fn = 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) {
__privateMethod(this, _submenuConnected, submenuConnected_fn).call(this);
} else {
__privateMethod(this, _submenuDisconnected, submenuDisconnected_fn).call(this);
}
}
};
_submenuConnected = new WeakSet();
submenuConnected_fn = async function() {
this.setAttribute("aria-haspopup", "menu");
this.setAttribute("aria-expanded", `${!this.submenuElement.hidden}`);
this.submenuElement.addEventListener("change", __privateGet(this, _handleMenuItem));
this.submenuElement.addEventListener("addmenuitem", __privateGet(this, _handleMenuItem));
this.submenuElement.addEventListener(
"removemenuitem",
__privateGet(this, _handleMenuItem)
);
__privateGet(this, _handleMenuItem).call(this);
};
_submenuDisconnected = new WeakSet();
submenuDisconnected_fn = function() {
this.removeAttribute("aria-haspopup");
this.removeAttribute("aria-expanded");
this.submenuElement.removeEventListener("change", __privateGet(this, _handleMenuItem));
this.submenuElement.removeEventListener(
"addmenuitem",
__privateGet(this, _handleMenuItem)
);
this.submenuElement.removeEventListener(
"removemenuitem",
__privateGet(this, _handleMenuItem)
);
__privateGet(this, _handleMenuItem).call(this);
};
_handleMenuItem = new WeakMap();
_handleKeyUp = new WeakSet();
handleKeyUp_fn = function(event) {
const { key } = event;
if (!this.keysUsed.includes(key)) {
this.removeEventListener("keyup", __privateMethod(this, _handleKeyUp, handleKeyUp_fn));
return;
}
this.handleClick(event);
};
_handleKeyDown = new WeakSet();
handleKeyDown_fn = function(event) {
const { metaKey, altKey, key } = event;
if (metaKey || altKey || !this.keysUsed.includes(key)) {
this.removeEventListener("keyup", __privateMethod(this, _handleKeyUp, handleKeyUp_fn));
return;
}
this.addEventListener("keyup", __privateMethod(this, _handleKeyUp, handleKeyUp_fn), { once: true });
};
_reset = new WeakSet();
reset_fn = function() {
var _a;
const items = (_a = __privateGet(this, _ownerElement)) == null ? void 0 : _a.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 = template;
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 (!import_server_safe_globals.globalThis.customElements.get("media-chrome-menu-item")) {
import_server_safe_globals.globalThis.customElements.define(
"media-chrome-menu-item",
MediaChromeMenuItem
);
}
var media_chrome_menu_item_default = MediaChromeMenuItem;

View File

@@ -0,0 +1,829 @@
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;
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var media_chrome_menu_exports = {};
__export(media_chrome_menu_exports, {
Attributes: () => Attributes,
MediaChromeMenu: () => MediaChromeMenu,
createIndicator: () => createIndicator,
createMenuItem: () => createMenuItem,
default: () => media_chrome_menu_default
});
module.exports = __toCommonJS(media_chrome_menu_exports);
var import_constants = require("../constants.js");
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_anchor_utils = require("../utils/anchor-utils.js");
var import_resize_observer = require("../utils/resize-observer.js");
var import_events = require("../utils/events.js");
var import_element_utils = require("../utils/element-utils.js");
var _mediaController, _previouslyFocused, _invokerElement, _previousItems, _mutationObserver, _isPopover, _cssRule, _handleSlotChange, handleSlotChange_fn, _handleMenuItems, _updateLayoutStyle, updateLayoutStyle_fn, _handleInvoke, handleInvoke_fn, _handleOpen, handleOpen_fn, _handleClosed, handleClosed_fn, _handleBoundsResize, _handleMenuResize, _positionMenu, positionMenu_fn, _resizeMenu, resizeMenu_fn, _handleClick, handleClick_fn, _backButtonElement, backButtonElement_get, _handleToggle, handleToggle_fn, _checkSubmenuHasExpanded, checkSubmenuHasExpanded_fn, _handleFocusOut, handleFocusOut_fn, _handleKeyDown, handleKeyDown_fn, _getItem, getItem_fn, _getTabItem, getTabItem_fn, _setTabItem, setTabItem_fn, _selectItem, selectItem_fn;
function createMenuItem({
type,
text,
value,
checked
}) {
const item = import_server_safe_globals.document.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 = import_server_safe_globals.document.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 "";
}
const template = import_server_safe_globals.document.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>
`;
const Attributes = {
STYLE: "style",
HIDDEN: "hidden",
DISABLED: "disabled",
ANCHOR: "anchor"
};
class MediaChromeMenu extends import_server_safe_globals.globalThis.HTMLElement {
constructor() {
super();
__privateAdd(this, _handleSlotChange);
/**
* Sets the layout style for the menu.
* It can be a row or column layout. e.g. playback-rate-menu
*/
__privateAdd(this, _updateLayoutStyle);
__privateAdd(this, _handleInvoke);
__privateAdd(this, _handleOpen);
__privateAdd(this, _handleClosed);
/**
* Updates the popover menu position based on the anchor element.
* @param {number} [menuWidth]
*/
__privateAdd(this, _positionMenu);
/**
* Resize this menu to fit the submenu.
* @param {boolean} animate
*/
__privateAdd(this, _resizeMenu);
__privateAdd(this, _handleClick);
__privateAdd(this, _backButtonElement);
/**
* Handle the toggle event of submenus.
* Closes all other open submenus when opening a submenu.
* Resizes this menu to fit the submenu.
*
* @param {ToggleEvent} event
*/
__privateAdd(this, _handleToggle);
/**
* Check if any submenu is expanded and update the container class accordingly.
* When the CSS :has() selector is supported, this can be done with CSS only.
*/
__privateAdd(this, _checkSubmenuHasExpanded);
__privateAdd(this, _handleFocusOut);
__privateAdd(this, _handleKeyDown);
__privateAdd(this, _getItem);
__privateAdd(this, _getTabItem);
__privateAdd(this, _setTabItem);
__privateAdd(this, _selectItem);
__privateAdd(this, _mediaController, null);
__privateAdd(this, _previouslyFocused, null);
__privateAdd(this, _invokerElement, null);
__privateAdd(this, _previousItems, /* @__PURE__ */ new Set());
__privateAdd(this, _mutationObserver, void 0);
__privateAdd(this, _isPopover, false);
__privateAdd(this, _cssRule, null);
/**
* Fires an event when a menu item is added or removed.
* This is needed to update the description slot of an ancestor menu item.
*/
__privateAdd(this, _handleMenuItems, () => {
const previousItems = __privateGet(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 }));
}
}
__privateSet(this, _previousItems, currentItems);
});
__privateAdd(this, _handleBoundsResize, () => {
__privateMethod(this, _positionMenu, positionMenu_fn).call(this);
__privateMethod(this, _resizeMenu, resizeMenu_fn).call(this, false);
});
__privateAdd(this, _handleMenuResize, () => {
__privateMethod(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);
__privateSet(this, _mutationObserver, new MutationObserver(__privateGet(this, _handleMenuItems)));
__privateGet(this, _mutationObserver).observe(this.defaultSlot, { childList: true });
}
static get observedAttributes() {
return [
Attributes.DISABLED,
Attributes.HIDDEN,
Attributes.STYLE,
Attributes.ANCHOR,
import_constants.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":
__privateMethod(this, _handleSlotChange, handleSlotChange_fn).call(this, event);
break;
case "invoke":
__privateMethod(this, _handleInvoke, handleInvoke_fn).call(this, event);
break;
case "click":
__privateMethod(this, _handleClick, handleClick_fn).call(this, event);
break;
case "toggle":
__privateMethod(this, _handleToggle, handleToggle_fn).call(this, event);
break;
case "focusout":
__privateMethod(this, _handleFocusOut, handleFocusOut_fn).call(this, event);
break;
case "keydown":
__privateMethod(this, _handleKeyDown, handleKeyDown_fn).call(this, event);
break;
}
}
connectedCallback() {
var _a, _b;
__privateSet(this, _cssRule, (0, import_element_utils.insertCSSRule)(this.shadowRoot, ":host"));
__privateMethod(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
if (!this.hasAttribute("disabled")) {
this.enable();
}
if (!this.role) {
this.role = "menu";
}
__privateSet(this, _mediaController, (0, import_element_utils.getAttributeMediaController)(this));
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.associateElement) == null ? void 0 : _b.call(_a, this);
if (!this.hidden) {
(0, import_resize_observer.observeResize)(getBoundsElement(this), __privateGet(this, _handleBoundsResize));
(0, import_resize_observer.observeResize)(this, __privateGet(this, _handleMenuResize));
}
}
disconnectedCallback() {
var _a, _b;
(0, import_resize_observer.unobserveResize)(getBoundsElement(this), __privateGet(this, _handleBoundsResize));
(0, import_resize_observer.unobserveResize)(this, __privateGet(this, _handleMenuResize));
this.disable();
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
}
attributeChangedCallback(attrName, oldValue, newValue) {
var _a, _b, _c, _d;
if (attrName === Attributes.HIDDEN && newValue !== oldValue) {
if (!__privateGet(this, _isPopover))
__privateSet(this, _isPopover, true);
if (this.hidden) {
__privateMethod(this, _handleClosed, handleClosed_fn).call(this);
} else {
__privateMethod(this, _handleOpen, handleOpen_fn).call(this);
}
this.dispatchEvent(
new import_events.ToggleEvent({
oldState: this.hidden ? "open" : "closed",
newState: this.hidden ? "closed" : "open",
bubbles: true
})
);
} else if (attrName === import_constants.MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
if (oldValue) {
(_b = (_a = __privateGet(this, _mediaController)) == null ? void 0 : _a.unassociateElement) == null ? void 0 : _b.call(_a, this);
__privateSet(this, _mediaController, null);
}
if (newValue && this.isConnected) {
__privateSet(this, _mediaController, (0, import_element_utils.getAttributeMediaController)(this));
(_d = (_c = __privateGet(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) {
__privateMethod(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 _a;
if (this.anchor) {
return (_a = (0, import_element_utils.getDocumentOrShadowRoot)(this)) == null ? void 0 : _a.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 _a, _b;
return (_b = (_a = this.checkedItems[0]) == null ? void 0 : _a.value) != null ? _b : "";
}
set value(newValue) {
const item = this.items.find((item2) => item2.value === newValue);
if (!item)
return;
__privateMethod(this, _selectItem, selectItem_fn).call(this, item);
}
focus() {
__privateSet(this, _previouslyFocused, (0, import_element_utils.getActiveElement)());
if (this.items.length) {
__privateMethod(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 _a;
const item = __privateMethod(this, _getItem, getItem_fn).call(this, event);
if (!item)
return;
__privateMethod(this, _selectItem, selectItem_fn).call(this, item, item.type === "checkbox");
if (__privateGet(this, _invokerElement) && !this.hidden) {
(_a = __privateGet(this, _previouslyFocused)) == null ? void 0 : _a.focus();
this.hidden = true;
}
}
get keysUsed() {
return [
"Enter",
"Escape",
"Tab",
" ",
"ArrowDown",
"ArrowUp",
"Home",
"End"
];
}
handleMove(event) {
var _a, _b;
const { key } = event;
const items = this.items;
const currentItem = (_b = (_a = __privateMethod(this, _getItem, getItem_fn).call(this, event)) != null ? _a : __privateMethod(this, _getTabItem, getTabItem_fn).call(this)) != null ? _b : 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;
}
__privateMethod(this, _setTabItem, setTabItem_fn).call(this, items[index]);
items[index].focus();
}
}
_mediaController = new WeakMap();
_previouslyFocused = new WeakMap();
_invokerElement = new WeakMap();
_previousItems = new WeakMap();
_mutationObserver = new WeakMap();
_isPopover = new WeakMap();
_cssRule = new WeakMap();
_handleSlotChange = 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) {
__privateGet(this, _handleMenuItems).call(this);
}
};
_handleMenuItems = new WeakMap();
_updateLayoutStyle = new WeakSet();
updateLayoutStyle_fn = function() {
var _a;
const layoutRowStyle = this.shadowRoot.querySelector("#layout-row");
const menuLayout = (_a = getComputedStyle(this).getPropertyValue("--media-menu-layout")) == null ? void 0 : _a.trim();
layoutRowStyle.setAttribute("media", menuLayout === "row" ? "" : "width:0");
};
_handleInvoke = new WeakSet();
handleInvoke_fn = function(event) {
__privateSet(this, _invokerElement, event.relatedTarget);
if (!(0, import_element_utils.containsComposedNode)(this, event.relatedTarget)) {
this.hidden = !this.hidden;
}
};
_handleOpen = new WeakSet();
handleOpen_fn = function() {
var _a;
(_a = __privateGet(this, _invokerElement)) == null ? void 0 : _a.setAttribute("aria-expanded", "true");
this.addEventListener("transitionend", () => this.focus(), { once: true });
(0, import_resize_observer.observeResize)(getBoundsElement(this), __privateGet(this, _handleBoundsResize));
(0, import_resize_observer.observeResize)(this, __privateGet(this, _handleMenuResize));
};
_handleClosed = new WeakSet();
handleClosed_fn = function() {
var _a;
(_a = __privateGet(this, _invokerElement)) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
(0, import_resize_observer.unobserveResize)(getBoundsElement(this), __privateGet(this, _handleBoundsResize));
(0, import_resize_observer.unobserveResize)(this, __privateGet(this, _handleMenuResize));
};
_handleBoundsResize = new WeakMap();
_handleMenuResize = new WeakMap();
_positionMenu = new WeakSet();
positionMenu_fn = function(menuWidth) {
if (this.hasAttribute("mediacontroller") && !this.anchor)
return;
if (this.hidden || !this.anchorElement)
return;
const { x, y } = (0, import_anchor_utils.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 } = __privateGet(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 = 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 } = __privateGet(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`);
__privateMethod(this, _positionMenu, positionMenu_fn).call(this, width);
} else {
this.style.removeProperty("min-width");
this.style.removeProperty("min-height");
__privateMethod(this, _positionMenu, positionMenu_fn).call(this);
}
style.removeProperty("--media-menu-transition-in");
};
_handleClick = new WeakSet();
handleClick_fn = function(event) {
var _a;
event.stopPropagation();
if (event.composedPath().includes(__privateGet(this, _backButtonElement, backButtonElement_get))) {
(_a = __privateGet(this, _previouslyFocused)) == null ? void 0 : _a.focus();
this.hidden = true;
return;
}
const item = __privateMethod(this, _getItem, getItem_fn).call(this, event);
if (!item || item.hasAttribute("disabled"))
return;
__privateMethod(this, _setTabItem, setTabItem_fn).call(this, item);
this.handleSelect(event);
};
_backButtonElement = new WeakSet();
backButtonElement_get = function() {
var _a;
const headerSlot = this.shadowRoot.querySelector(
'slot[name="header"]'
);
return (_a = headerSlot.assignedElements({ flatten: true })) == null ? void 0 : _a.find(
(el) => el.matches('button[part~="back"]')
);
};
_handleToggle = new WeakSet();
handleToggle_fn = function(event) {
if (event.target === this)
return;
__privateMethod(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 import_events.InvokeEvent({ relatedTarget: item })
);
}
}
for (const item of menuItemsWithSubmenu) {
item.setAttribute("aria-expanded", `${!item.submenuElement.hidden}`);
}
__privateMethod(this, _resizeMenu, resizeMenu_fn).call(this, true);
};
_checkSubmenuHasExpanded = 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 = new WeakSet();
handleFocusOut_fn = function(event) {
var _a;
if (!(0, import_element_utils.containsComposedNode)(this, event.relatedTarget)) {
if (__privateGet(this, _isPopover)) {
(_a = __privateGet(this, _previouslyFocused)) == null ? void 0 : _a.focus();
}
if (__privateGet(this, _invokerElement) && __privateGet(this, _invokerElement) !== event.relatedTarget && !this.hidden) {
this.hidden = true;
}
}
};
_handleKeyDown = new WeakSet();
handleKeyDown_fn = function(event) {
var _a, _b, _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 (__privateGet(this, _isPopover)) {
this.hidden = true;
return;
}
if (event.shiftKey) {
(_b = (_a = this.previousElementSibling) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
} else {
(_d = (_c = this.nextElementSibling) == null ? void 0 : _c.focus) == null ? void 0 : _d.call(_c);
}
this.blur();
} else if (key === "Escape") {
(_e = __privateGet(this, _previouslyFocused)) == null ? void 0 : _e.focus();
if (__privateGet(this, _isPopover)) {
this.hidden = true;
}
} else if (key === "Enter" || key === " ") {
this.handleSelect(event);
} else {
this.handleMove(event);
}
};
_getItem = new WeakSet();
getItem_fn = function(event) {
return event.composedPath().find((el) => {
return ["menuitemradio", "menuitemcheckbox"].includes(
el.role
);
});
};
_getTabItem = new WeakSet();
getTabItem_fn = function() {
return this.items.find((item) => item.tabIndex === 0);
};
_setTabItem = new WeakSet();
setTabItem_fn = function(tabItem) {
for (const item of this.items) {
item.tabIndex = item === tabItem ? 0 : -1;
}
};
_selectItem = 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 _a;
return (_a = host.getAttribute("bounds") ? (0, import_element_utils.closestComposedNode)(host, `#${host.getAttribute("bounds")}`) : (0, import_element_utils.getMediaController)(host) || host.parentElement) != null ? _a : host;
}
if (!import_server_safe_globals.globalThis.customElements.get("media-chrome-menu")) {
import_server_safe_globals.globalThis.customElements.define("media-chrome-menu", MediaChromeMenu);
}
var media_chrome_menu_default = MediaChromeMenu;

View File

@@ -0,0 +1,142 @@
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 media_playback_rate_menu_button_exports = {};
__export(media_playback_rate_menu_button_exports, {
Attributes: () => Attributes,
DEFAULT_RATE: () => DEFAULT_RATE,
DEFAULT_RATES: () => DEFAULT_RATES,
MediaPlaybackRateMenuButton: () => MediaPlaybackRateMenuButton,
default: () => media_playback_rate_menu_button_default
});
module.exports = __toCommonJS(media_playback_rate_menu_button_exports);
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_constants = require("../constants.js");
var import_labels = require("../labels/labels.js");
var import_media_chrome_menu_button = require("./media-chrome-menu-button.js");
var import_attribute_token_list = require("../utils/attribute-token-list.js");
var import_element_utils = require("../utils/element-utils.js");
var _rates;
const Attributes = {
RATES: "rates"
};
const DEFAULT_RATES = [1, 1.2, 1.5, 1.7, 2];
const DEFAULT_RATE = 1;
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.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>
`;
class MediaPlaybackRateMenuButton extends import_media_chrome_menu_button.MediaChromeMenuButton {
constructor(options = {}) {
super({
slotTemplate,
tooltipContent: import_labels.tooltipLabels.PLAYBACK_RATE,
...options
});
__privateAdd(this, _rates, new import_attribute_token_list.AttributeTokenList(this, Attributes.RATES, {
defaultValue: DEFAULT_RATES
}));
this.container = this.shadowRoot.querySelector('slot[name="icon"]');
this.container.innerHTML = `${DEFAULT_RATE}x`;
}
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_PLAYBACK_RATE,
Attributes.RATES
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === Attributes.RATES) {
__privateGet(this, _rates).value = newValue;
}
if (attrName === import_constants.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", import_labels.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 (0, import_element_utils.getMediaController)(this).querySelector("media-playback-rate-menu");
}
/**
* Will return a DOMTokenList.
* Setting a value will accept an array of numbers.
*/
get rates() {
return __privateGet(this, _rates);
}
set rates(value) {
if (!value) {
__privateGet(this, _rates).value = "";
} else if (Array.isArray(value)) {
__privateGet(this, _rates).value = value.join(" ");
}
}
/**
* The current playback rate
*/
get mediaPlaybackRate() {
return (0, import_element_utils.getNumericAttr)(
this,
import_constants.MediaUIAttributes.MEDIA_PLAYBACK_RATE,
DEFAULT_RATE
);
}
set mediaPlaybackRate(value) {
(0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_PLAYBACK_RATE, value);
}
}
_rates = new WeakMap();
if (!import_server_safe_globals.globalThis.customElements.get("media-playback-rate-menu-button")) {
import_server_safe_globals.globalThis.customElements.define(
"media-playback-rate-menu-button",
MediaPlaybackRateMenuButton
);
}
var media_playback_rate_menu_button_default = MediaPlaybackRateMenuButton;

View File

@@ -0,0 +1,160 @@
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 __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var media_playback_rate_menu_exports = {};
__export(media_playback_rate_menu_exports, {
Attributes: () => Attributes,
MediaPlaybackRateMenu: () => MediaPlaybackRateMenu,
default: () => media_playback_rate_menu_default
});
module.exports = __toCommonJS(media_playback_rate_menu_exports);
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_constants = require("../constants.js");
var import_attribute_token_list = require("../utils/attribute-token-list.js");
var import_element_utils = require("../utils/element-utils.js");
var import_media_playback_rate_button = require("../media-playback-rate-button.js");
var import_media_chrome_menu = require("./media-chrome-menu.js");
var _rates, _render, render_fn, _onChange, onChange_fn;
const Attributes = {
RATES: "rates"
};
class MediaPlaybackRateMenu extends import_media_chrome_menu.MediaChromeMenu {
constructor() {
super();
__privateAdd(this, _render);
__privateAdd(this, _onChange);
__privateAdd(this, _rates, new import_attribute_token_list.AttributeTokenList(this, Attributes.RATES, {
defaultValue: import_media_playback_rate_button.DEFAULT_RATES
}));
__privateMethod(this, _render, render_fn).call(this);
}
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_PLAYBACK_RATE,
Attributes.RATES
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === import_constants.MediaUIAttributes.MEDIA_PLAYBACK_RATE && oldValue != newValue) {
this.value = newValue;
} else if (attrName === Attributes.RATES && oldValue != newValue) {
__privateGet(this, _rates).value = newValue;
__privateMethod(this, _render, render_fn).call(this);
}
}
connectedCallback() {
super.connectedCallback();
this.addEventListener("change", __privateMethod(this, _onChange, onChange_fn));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener("change", __privateMethod(this, _onChange, onChange_fn));
}
/**
* Returns the anchor element when it is a floating menu.
*/
get anchorElement() {
if (this.anchor !== "auto")
return super.anchorElement;
return (0, import_element_utils.getMediaController)(this).querySelector(
"media-playback-rate-menu-button"
);
}
/**
* Will return a DOMTokenList.
* Setting a value will accept an array of numbers.
*/
get rates() {
return __privateGet(this, _rates);
}
set rates(value) {
if (!value) {
__privateGet(this, _rates).value = "";
} else if (Array.isArray(value)) {
__privateGet(this, _rates).value = value.join(" ");
}
__privateMethod(this, _render, render_fn).call(this);
}
/**
* The current playback rate
*/
get mediaPlaybackRate() {
return (0, import_element_utils.getNumericAttr)(
this,
import_constants.MediaUIAttributes.MEDIA_PLAYBACK_RATE,
import_media_playback_rate_button.DEFAULT_RATE
);
}
set mediaPlaybackRate(value) {
(0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_PLAYBACK_RATE, value);
}
}
_rates = new WeakMap();
_render = new WeakSet();
render_fn = function() {
this.defaultSlot.textContent = "";
for (const rate of this.rates) {
const item = (0, import_media_chrome_menu.createMenuItem)({
type: "radio",
text: this.formatMenuItemText(`${rate}x`, rate),
value: rate,
checked: this.mediaPlaybackRate == rate
});
item.prepend((0, import_media_chrome_menu.createIndicator)(this, "checked-indicator"));
this.defaultSlot.append(item);
}
};
_onChange = new WeakSet();
onChange_fn = function() {
if (!this.value)
return;
const event = new import_server_safe_globals.globalThis.CustomEvent(
import_constants.MediaUIEvents.MEDIA_PLAYBACK_RATE_REQUEST,
{
composed: true,
bubbles: true,
detail: this.value
}
);
this.dispatchEvent(event);
};
if (!import_server_safe_globals.globalThis.customElements.get("media-playback-rate-menu")) {
import_server_safe_globals.globalThis.customElements.define(
"media-playback-rate-menu",
MediaPlaybackRateMenu
);
}
var media_playback_rate_menu_default = MediaPlaybackRateMenu;

View File

@@ -0,0 +1,91 @@
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 media_rendition_menu_button_exports = {};
__export(media_rendition_menu_button_exports, {
MediaRenditionMenuButton: () => MediaRenditionMenuButton,
default: () => media_rendition_menu_button_default
});
module.exports = __toCommonJS(media_rendition_menu_button_exports);
var import_constants = require("../constants.js");
var import_media_chrome_menu_button = require("./media-chrome-menu-button.js");
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_labels = require("../labels/labels.js");
var import_element_utils = require("../utils/element-utils.js");
const 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>`
);
const slotTemplate = import_server_safe_globals.document.createElement("template");
slotTemplate.innerHTML = /*html*/
`
<style>
:host([aria-expanded="true"]) slot[name=tooltip] {
display: none;
}
</style>
<slot name="icon">${renditionIcon}</slot>
`;
class MediaRenditionMenuButton extends import_media_chrome_menu_button.MediaChromeMenuButton {
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_RENDITION_SELECTED,
import_constants.MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
import_constants.MediaUIAttributes.MEDIA_HEIGHT
];
}
constructor() {
super({ slotTemplate, tooltipContent: import_labels.tooltipLabels.RENDITIONS });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-label", import_labels.nouns.QUALITY());
}
/**
* Returns the element with the id specified by the `invoketarget` attribute.
*/
get invokeTargetElement() {
if (this.invokeTarget != void 0)
return super.invokeTargetElement;
return (0, import_element_utils.getMediaController)(this).querySelector("media-rendition-menu");
}
/**
* Get selected rendition id.
*/
get mediaRenditionSelected() {
return (0, import_element_utils.getStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_RENDITION_SELECTED);
}
set mediaRenditionSelected(id) {
(0, import_element_utils.setStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_RENDITION_SELECTED, id);
}
get mediaHeight() {
return (0, import_element_utils.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_HEIGHT);
}
set mediaHeight(height) {
(0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_HEIGHT, height);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-rendition-menu-button")) {
import_server_safe_globals.globalThis.customElements.define(
"media-rendition-menu-button",
MediaRenditionMenuButton
);
}
var media_rendition_menu_button_default = MediaRenditionMenuButton;

View File

@@ -0,0 +1,179 @@
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;
};
var __privateMethod = (obj, member, method) => {
__accessCheck(obj, member, "access private method");
return method;
};
var media_rendition_menu_exports = {};
__export(media_rendition_menu_exports, {
MediaRenditionMenu: () => MediaRenditionMenu,
default: () => media_rendition_menu_default
});
module.exports = __toCommonJS(media_rendition_menu_exports);
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_constants = require("../constants.js");
var import_element_utils = require("../utils/element-utils.js");
var import_utils = require("../utils/utils.js");
var import_media_chrome_menu = require("./media-chrome-menu.js");
var _renditionList, _prevState, _render, render_fn, _onChange, onChange_fn;
class MediaRenditionMenu extends import_media_chrome_menu.MediaChromeMenu {
constructor() {
super(...arguments);
__privateAdd(this, _render);
__privateAdd(this, _onChange);
__privateAdd(this, _renditionList, []);
__privateAdd(this, _prevState, {});
}
static get observedAttributes() {
return [
...super.observedAttributes,
import_constants.MediaUIAttributes.MEDIA_RENDITION_LIST,
import_constants.MediaUIAttributes.MEDIA_RENDITION_SELECTED,
import_constants.MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
import_constants.MediaUIAttributes.MEDIA_HEIGHT
];
}
attributeChangedCallback(attrName, oldValue, newValue) {
super.attributeChangedCallback(attrName, oldValue, newValue);
if (attrName === import_constants.MediaUIAttributes.MEDIA_RENDITION_SELECTED && oldValue !== newValue) {
this.value = newValue != null ? newValue : "auto";
} else if (attrName === import_constants.MediaUIAttributes.MEDIA_RENDITION_LIST && oldValue !== newValue) {
__privateSet(this, _renditionList, (0, import_utils.parseRenditionList)(newValue));
__privateMethod(this, _render, render_fn).call(this);
} else if (attrName === import_constants.MediaUIAttributes.MEDIA_HEIGHT && oldValue !== newValue) {
__privateMethod(this, _render, render_fn).call(this);
}
}
connectedCallback() {
super.connectedCallback();
this.addEventListener("change", __privateMethod(this, _onChange, onChange_fn));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener("change", __privateMethod(this, _onChange, onChange_fn));
}
/**
* Returns the anchor element when it is a floating menu.
*/
get anchorElement() {
if (this.anchor !== "auto")
return super.anchorElement;
return (0, import_element_utils.getMediaController)(this).querySelector(
"media-rendition-menu-button"
);
}
get mediaRenditionList() {
return __privateGet(this, _renditionList);
}
set mediaRenditionList(list) {
__privateSet(this, _renditionList, list);
__privateMethod(this, _render, render_fn).call(this);
}
/**
* Get selected rendition id.
*/
get mediaRenditionSelected() {
return (0, import_element_utils.getStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_RENDITION_SELECTED);
}
set mediaRenditionSelected(id) {
(0, import_element_utils.setStringAttr)(this, import_constants.MediaUIAttributes.MEDIA_RENDITION_SELECTED, id);
}
get mediaHeight() {
return (0, import_element_utils.getNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_HEIGHT);
}
set mediaHeight(height) {
(0, import_element_utils.setNumericAttr)(this, import_constants.MediaUIAttributes.MEDIA_HEIGHT, height);
}
}
_renditionList = new WeakMap();
_prevState = new WeakMap();
_render = new WeakSet();
render_fn = function() {
if (__privateGet(this, _prevState).mediaRenditionList === JSON.stringify(this.mediaRenditionList) && __privateGet(this, _prevState).mediaHeight === this.mediaHeight)
return;
__privateGet(this, _prevState).mediaRenditionList = JSON.stringify(this.mediaRenditionList);
__privateGet(this, _prevState).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 = (0, import_media_chrome_menu.createMenuItem)({
type: "radio",
text,
value: `${rendition.id}`,
checked: rendition.selected && !isAuto
});
item2.prepend((0, import_media_chrome_menu.createIndicator)(this, "checked-indicator"));
this.defaultSlot.append(item2);
}
const item = (0, import_media_chrome_menu.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((0, import_media_chrome_menu.createIndicator)(this, "checked-indicator"));
this.defaultSlot.append(item);
};
_onChange = new WeakSet();
onChange_fn = function() {
if (this.value == null)
return;
const event = new import_server_safe_globals.globalThis.CustomEvent(
import_constants.MediaUIEvents.MEDIA_RENDITION_REQUEST,
{
composed: true,
bubbles: true,
detail: this.value
}
);
this.dispatchEvent(event);
};
if (!import_server_safe_globals.globalThis.customElements.get("media-rendition-menu")) {
import_server_safe_globals.globalThis.customElements.define("media-rendition-menu", MediaRenditionMenu);
}
var media_rendition_menu_default = MediaRenditionMenu;

View File

@@ -0,0 +1,69 @@
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 media_settings_menu_button_exports = {};
__export(media_settings_menu_button_exports, {
MediaSettingsMenuButton: () => MediaSettingsMenuButton,
default: () => media_settings_menu_button_default
});
module.exports = __toCommonJS(media_settings_menu_button_exports);
var import_media_chrome_menu_button = require("./media-chrome-menu-button.js");
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_element_utils = require("../utils/element-utils.js");
var import_labels = require("../labels/labels.js");
const slotTemplate = import_server_safe_globals.document.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>
`;
class MediaSettingsMenuButton extends import_media_chrome_menu_button.MediaChromeMenuButton {
static get observedAttributes() {
return [...super.observedAttributes, "target"];
}
constructor() {
super({ slotTemplate, tooltipContent: import_labels.tooltipLabels.SETTINGS });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-label", import_labels.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 (0, import_element_utils.getMediaController)(this).querySelector("media-settings-menu");
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-settings-menu-button")) {
import_server_safe_globals.globalThis.customElements.define(
"media-settings-menu-button",
MediaSettingsMenuButton
);
}
var media_settings_menu_button_default = MediaSettingsMenuButton;

View File

@@ -0,0 +1,57 @@
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 media_settings_menu_item_exports = {};
__export(media_settings_menu_item_exports, {
MediaSettingsMenuItem: () => MediaSettingsMenuItem,
default: () => media_settings_menu_item_default
});
module.exports = __toCommonJS(media_settings_menu_item_exports);
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_media_chrome_menu_item = require("./media-chrome-menu-item.js");
var _a;
const template = import_server_safe_globals.document.createElement("template");
template.innerHTML = import_media_chrome_menu_item.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 = template.content) == null ? void 0 : _a.querySelector) {
template.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>
`;
}
class MediaSettingsMenuItem extends import_media_chrome_menu_item.MediaChromeMenuItem {
}
MediaSettingsMenuItem.template = template;
if (!import_server_safe_globals.globalThis.customElements.get("media-settings-menu-item")) {
import_server_safe_globals.globalThis.customElements.define(
"media-settings-menu-item",
MediaSettingsMenuItem
);
}
var media_settings_menu_item_default = MediaSettingsMenuItem;

View File

@@ -0,0 +1,72 @@
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 media_settings_menu_exports = {};
__export(media_settings_menu_exports, {
MediaSettingsMenu: () => MediaSettingsMenu,
default: () => media_settings_menu_default
});
module.exports = __toCommonJS(media_settings_menu_exports);
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var import_media_chrome_menu = require("./media-chrome-menu.js");
var import_element_utils = require("../utils/element-utils.js");
const template = import_server_safe_globals.document.createElement("template");
template.innerHTML = import_media_chrome_menu.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>
`;
class MediaSettingsMenu extends import_media_chrome_menu.MediaChromeMenu {
/**
* Returns the anchor element when it is a floating menu.
*/
get anchorElement() {
if (this.anchor !== "auto")
return super.anchorElement;
return (0, import_element_utils.getMediaController)(this).querySelector("media-settings-menu-button");
}
}
MediaSettingsMenu.template = template;
if (!import_server_safe_globals.globalThis.customElements.get("media-settings-menu")) {
import_server_safe_globals.globalThis.customElements.define("media-settings-menu", MediaSettingsMenu);
}
var media_settings_menu_default = MediaSettingsMenu;

View File

@@ -0,0 +1 @@
{"type": "commonjs"}

View File

@@ -0,0 +1,63 @@
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 utils_exports = {};
__export(utils_exports, {
toNativeAttrName: () => toNativeAttrName,
toNativeAttrValue: () => toNativeAttrValue,
toNativeProps: () => toNativeProps
});
module.exports = __toCommonJS(utils_exports);
const ReactPropToAttrNameMap = {
className: "class",
classname: "class",
htmlFor: "for",
crossOrigin: "crossorigin",
viewBox: "viewBox"
};
const toNativeAttrName = (propName, propValue) => {
if (ReactPropToAttrNameMap[propName])
return ReactPropToAttrNameMap[propName];
if (typeof propValue == void 0)
return void 0;
if (typeof propValue === "boolean" && !propValue)
return void 0;
if (/[A-Z]/.test(propName))
return propName.toLowerCase();
return propName;
};
const toNativeAttrValue = (propValue, _propName) => {
if (typeof propValue === "boolean")
return "";
if (Array.isArray(propValue))
return propValue.join(" ");
return propValue;
};
const toNativeProps = (props = {}) => {
return Object.entries(props).reduce(
(transformedProps, [propName, propValue]) => {
const attrName = toNativeAttrName(propName, propValue);
if (!attrName) {
return transformedProps;
}
const attrValue = toNativeAttrValue(propValue, propName);
transformedProps[attrName] = attrValue;
return transformedProps;
},
{}
);
};

View File

@@ -0,0 +1,150 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var react_exports = {};
__export(react_exports, {
MediaAirplayButton: () => MediaAirplayButton,
MediaCaptionsButton: () => MediaCaptionsButton,
MediaCastButton: () => MediaCastButton,
MediaChromeButton: () => MediaChromeButton,
MediaChromeDialog: () => MediaChromeDialog,
MediaChromeRange: () => MediaChromeRange,
MediaContainer: () => MediaContainer,
MediaControlBar: () => MediaControlBar,
MediaController: () => MediaController,
MediaDurationDisplay: () => MediaDurationDisplay,
MediaFullscreenButton: () => MediaFullscreenButton,
MediaGestureReceiver: () => MediaGestureReceiver,
MediaLiveButton: () => MediaLiveButton,
MediaLoadingIndicator: () => MediaLoadingIndicator,
MediaMuteButton: () => MediaMuteButton,
MediaPipButton: () => MediaPipButton,
MediaPlayButton: () => MediaPlayButton,
MediaPlaybackRateButton: () => MediaPlaybackRateButton,
MediaPosterImage: () => MediaPosterImage,
MediaPreviewChapterDisplay: () => MediaPreviewChapterDisplay,
MediaPreviewThumbnail: () => MediaPreviewThumbnail,
MediaPreviewTimeDisplay: () => MediaPreviewTimeDisplay,
MediaSeekBackwardButton: () => MediaSeekBackwardButton,
MediaSeekForwardButton: () => MediaSeekForwardButton,
MediaTextDisplay: () => MediaTextDisplay,
MediaTimeDisplay: () => MediaTimeDisplay,
MediaTimeRange: () => MediaTimeRange,
MediaTooltip: () => MediaTooltip,
MediaVolumeRange: () => MediaVolumeRange
});
module.exports = __toCommonJS(react_exports);
var import_react = __toESM(require("react"), 1);
var import__ = require("../index.js");
var import_utils = require("./common/utils.js");
const MediaGestureReceiver = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-gesture-receiver", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaContainer = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-container", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaController = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-controller", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaChromeButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-chrome-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaAirplayButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-airplay-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaCaptionsButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-captions-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaCastButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-cast-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaChromeDialog = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-chrome-dialog", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaChromeRange = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-chrome-range", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaControlBar = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-control-bar", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaTextDisplay = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-text-display", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaDurationDisplay = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-duration-display", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaFullscreenButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-fullscreen-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaLiveButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-live-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaLoadingIndicator = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-loading-indicator", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaMuteButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-mute-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaPipButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-pip-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaPlaybackRateButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-playback-rate-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaPlayButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-play-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaPosterImage = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-poster-image", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaPreviewChapterDisplay = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-preview-chapter-display", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaPreviewThumbnail = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-preview-thumbnail", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaPreviewTimeDisplay = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-preview-time-display", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaSeekBackwardButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-seek-backward-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaSeekForwardButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-seek-forward-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaTimeDisplay = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-time-display", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaTimeRange = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-time-range", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaTooltip = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-tooltip", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaVolumeRange = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-volume-range", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});

View File

@@ -0,0 +1,134 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var media_store_exports = {};
__export(media_store_exports, {
AvailabilityStates: () => import_constants.AvailabilityStates,
MediaActionTypes: () => MediaActionTypes,
MediaContext: () => MediaContext,
MediaProvider: () => MediaProvider,
MediaStateNames: () => MediaStateNames,
StreamTypes: () => import_constants.StreamTypes,
VolumeLevels: () => import_constants.VolumeLevels,
timeUtils: () => timeUtils,
useMediaDispatch: () => useMediaDispatch,
useMediaFullscreenRef: () => useMediaFullscreenRef,
useMediaRef: () => useMediaRef,
useMediaSelector: () => useMediaSelector,
useMediaStore: () => useMediaStore
});
module.exports = __toCommonJS(media_store_exports);
var import_react = __toESM(require("react"), 1);
var import_constants = require("../constants.js");
var import_media_store = __toESM(require("../media-store/media-store.js"), 1);
var import_useSyncExternalStoreWithSelector = require("./useSyncExternalStoreWithSelector.js");
var timeUtils = __toESM(require("../utils/time.js"), 1);
const {
REGISTER_MEDIA_STATE_RECEIVER,
// eslint-disable-line
UNREGISTER_MEDIA_STATE_RECEIVER,
// eslint-disable-line
// NOTE: These generic state change requests are not currently supported (CJP)
MEDIA_SHOW_TEXT_TRACKS_REQUEST,
// eslint-disable-line
MEDIA_HIDE_TEXT_TRACKS_REQUEST,
// eslint-disable-line
...StateChangeRequests
} = import_constants.MediaUIEvents;
const MediaActionTypes = {
...StateChangeRequests,
MEDIA_ELEMENT_CHANGE_REQUEST: "mediaelementchangerequest",
FULLSCREEN_ELEMENT_CHANGE_REQUEST: "fullscreenelementchangerequest"
};
const MediaStateNames = { ...import_constants.MediaUIProps };
const identity = (x) => x;
const MediaContext = (0, import_react.createContext)(null);
const MediaProvider = ({
children,
mediaStore
}) => {
const value = (0, import_react.useMemo)(
() => mediaStore != null ? mediaStore : (0, import_media_store.default)({ documentElement: globalThis.document }),
[mediaStore]
);
(0, import_react.useEffect)(() => {
value == null ? void 0 : value.dispatch({
type: "documentelementchangerequest",
detail: globalThis.document
});
return () => {
value == null ? void 0 : value.dispatch({
type: "documentelementchangerequest",
detail: void 0
});
};
}, []);
return /* @__PURE__ */ import_react.default.createElement(MediaContext.Provider, { value }, children);
};
const useMediaStore = () => {
const store = (0, import_react.useContext)(MediaContext);
return store;
};
const useMediaDispatch = () => {
var _a;
const store = (0, import_react.useContext)(MediaContext);
const dispatch = (_a = store == null ? void 0 : store.dispatch) != null ? _a : identity;
return (value) => {
return dispatch(value);
};
};
const useMediaRef = () => {
const dispatch = useMediaDispatch();
return (mediaEl) => {
dispatch({
type: MediaActionTypes.MEDIA_ELEMENT_CHANGE_REQUEST,
detail: mediaEl
});
};
};
const useMediaFullscreenRef = () => {
const dispatch = useMediaDispatch();
return (fullscreenEl) => {
dispatch({
type: MediaActionTypes.FULLSCREEN_ELEMENT_CHANGE_REQUEST,
detail: fullscreenEl
});
};
};
const refEquality = (a, b) => a === b;
const useMediaSelector = (selector, equalityFn = refEquality) => {
var _a, _b, _c;
const store = (0, import_react.useContext)(MediaContext);
const selectedState = (0, import_useSyncExternalStoreWithSelector.useSyncExternalStoreWithSelector)(
(_a = store == null ? void 0 : store.subscribe) != null ? _a : identity,
(_b = store == null ? void 0 : store.getState) != null ? _b : identity,
(_c = store == null ? void 0 : store.getState) != null ? _c : identity,
selector,
equalityFn
);
return selectedState;
};

View File

@@ -0,0 +1,38 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var media_theme_exports = {};
__export(media_theme_exports, {
MediaTheme: () => MediaTheme
});
module.exports = __toCommonJS(media_theme_exports);
var import_react = __toESM(require("react"), 1);
var import_media_theme_element = require("../media-theme-element.js");
var import_utils = require("./common/utils.js");
const MediaTheme = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-theme", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});

View File

@@ -0,0 +1,90 @@
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var menu_exports = {};
__export(menu_exports, {
MediaAudioTrackMenu: () => MediaAudioTrackMenu,
MediaAudioTrackMenuButton: () => MediaAudioTrackMenuButton,
MediaCaptionsMenu: () => MediaCaptionsMenu,
MediaCaptionsMenuButton: () => MediaCaptionsMenuButton,
MediaChromeMenu: () => MediaChromeMenu,
MediaChromeMenuButton: () => MediaChromeMenuButton,
MediaChromeMenuItem: () => MediaChromeMenuItem,
MediaPlaybackRateMenu: () => MediaPlaybackRateMenu,
MediaPlaybackRateMenuButton: () => MediaPlaybackRateMenuButton,
MediaRenditionMenu: () => MediaRenditionMenu,
MediaRenditionMenuButton: () => MediaRenditionMenuButton,
MediaSettingsMenu: () => MediaSettingsMenu,
MediaSettingsMenuButton: () => MediaSettingsMenuButton,
MediaSettingsMenuItem: () => MediaSettingsMenuItem
});
module.exports = __toCommonJS(menu_exports);
var import_react = __toESM(require("react"), 1);
var import_menu = require("../../menu/index.js");
var import_utils = require("../common/utils.js");
const MediaChromeMenu = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-chrome-menu", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaChromeMenuItem = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-chrome-menu-item", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaSettingsMenu = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-settings-menu", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaSettingsMenuItem = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-settings-menu-item", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaChromeMenuButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-chrome-menu-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaSettingsMenuButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-settings-menu-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaAudioTrackMenu = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-audio-track-menu", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaAudioTrackMenuButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-audio-track-menu-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaCaptionsMenu = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-captions-menu", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaCaptionsMenuButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-captions-menu-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaPlaybackRateMenu = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-playback-rate-menu", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaPlaybackRateMenuButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-playback-rate-menu-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaRenditionMenu = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-rendition-menu", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});
const MediaRenditionMenuButton = import_react.default.forwardRef(({ children = [], ...props }, ref) => {
return import_react.default.createElement("media-rendition-menu-button", { ...(0, import_utils.toNativeProps)(props), ref, suppressHydrationWarning: true }, children);
});

View File

@@ -0,0 +1,90 @@
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 useSyncExternalStoreWithSelector_exports = {};
__export(useSyncExternalStoreWithSelector_exports, {
useSyncExternalStoreWithSelector: () => useSyncExternalStoreWithSelector
});
module.exports = __toCommonJS(useSyncExternalStoreWithSelector_exports);
var import_react = require("react");
function isPolyfill(x, y) {
return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
}
const is = typeof Object.is === "function" ? Object.is : isPolyfill;
function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
const instRef = (0, import_react.useRef)(null);
let inst;
if (instRef.current === null) {
inst = {
hasValue: false,
value: null
};
instRef.current = inst;
} else {
inst = instRef.current;
}
const [getSelection, getServerSelection] = (0, import_react.useMemo)(() => {
let hasMemo = false;
let memoizedSnapshot;
let memoizedSelection;
const memoizedSelector = (nextSnapshot) => {
if (!hasMemo) {
hasMemo = true;
memoizedSnapshot = nextSnapshot;
const nextSelection2 = selector(nextSnapshot);
if (isEqual !== void 0) {
if (inst.hasValue) {
const currentSelection = inst.value;
if (isEqual(currentSelection, nextSelection2)) {
memoizedSelection = currentSelection;
return currentSelection;
}
}
}
memoizedSelection = nextSelection2;
return nextSelection2;
}
const prevSnapshot = memoizedSnapshot;
const prevSelection = memoizedSelection;
if (is(prevSnapshot, nextSnapshot)) {
return prevSelection;
}
const nextSelection = selector(nextSnapshot);
if (isEqual !== void 0 && isEqual(prevSelection, nextSelection)) {
return prevSelection;
}
memoizedSnapshot = nextSnapshot;
memoizedSelection = nextSelection;
return nextSelection;
};
const maybeGetServerSnapshot = getServerSnapshot === void 0 ? null : getServerSnapshot;
const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());
const getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? void 0 : () => memoizedSelector(maybeGetServerSnapshot());
return [getSnapshotWithSelector, getServerSnapshotWithSelector];
}, [getSnapshot, getServerSnapshot, selector, isEqual]);
const value = (0, import_react.useSyncExternalStore)(
subscribe,
getSelection,
getServerSelection
);
(0, import_react.useEffect)(() => {
inst.hasValue = true;
inst.value = value;
}, [value]);
(0, import_react.useDebugValue)(value);
return value;
}

View File

@@ -0,0 +1,33 @@
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 CustomElement_exports = {};
__export(CustomElement_exports, {
CustomElement: () => CustomElement
});
module.exports = __toCommonJS(CustomElement_exports);
class CustomElement extends HTMLElement {
static get observedAttributes() {
return [];
}
attributeChangedCallback(attrName, oldValue, newValue) {
}
connectedCallback() {
}
disconnectedCallback() {
}
}

View File

@@ -0,0 +1,15 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
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 Entry_exports = {};
module.exports = __toCommonJS(Entry_exports);

View File

@@ -0,0 +1,15 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
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 Point_exports = {};
module.exports = __toCommonJS(Point_exports);

View File

@@ -0,0 +1,15 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
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 Rect_exports = {};
module.exports = __toCommonJS(Rect_exports);

View File

@@ -0,0 +1,15 @@
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
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 TextTrackLike_exports = {};
module.exports = __toCommonJS(TextTrackLike_exports);

View File

@@ -0,0 +1,96 @@
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 anchor_utils_exports = {};
__export(anchor_utils_exports, {
computePosition: () => computePosition
});
module.exports = __toCommonJS(anchor_utils_exports);
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 _a;
const rect = element.getBoundingClientRect();
const offsetRect = (_a = offsetParent == null ? void 0 : offsetParent.getBoundingClientRect()) != null ? _a : { 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";
}

View File

@@ -0,0 +1,128 @@
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;
};
var attribute_token_list_exports = {};
__export(attribute_token_list_exports, {
AttributeTokenList: () => AttributeTokenList
});
module.exports = __toCommonJS(attribute_token_list_exports);
var _el, _attr, _defaultSet, _tokenSet, _tokens, tokens_get;
class AttributeTokenList {
constructor(el, attr, { defaultValue } = { defaultValue: void 0 }) {
__privateAdd(this, _tokens);
__privateAdd(this, _el, void 0);
__privateAdd(this, _attr, void 0);
__privateAdd(this, _defaultSet, void 0);
__privateAdd(this, _tokenSet, /* @__PURE__ */ new Set());
__privateSet(this, _el, el);
__privateSet(this, _attr, attr);
__privateSet(this, _defaultSet, new Set(defaultValue));
}
[Symbol.iterator]() {
return __privateGet(this, _tokens, tokens_get).values();
}
get length() {
return __privateGet(this, _tokens, tokens_get).size;
}
get value() {
var _a;
return (_a = [...__privateGet(this, _tokens, tokens_get)].join(" ")) != null ? _a : "";
}
set value(val) {
var _a;
if (val === this.value)
return;
__privateSet(this, _tokenSet, /* @__PURE__ */ new Set());
this.add(...(_a = val == null ? void 0 : val.split(" ")) != null ? _a : []);
}
toString() {
return this.value;
}
item(index) {
return [...__privateGet(this, _tokens, tokens_get)][index];
}
values() {
return __privateGet(this, _tokens, tokens_get).values();
}
forEach(callback, thisArg) {
__privateGet(this, _tokens, tokens_get).forEach(callback, thisArg);
}
add(...tokens) {
var _a, _b;
tokens.forEach((t) => __privateGet(this, _tokenSet).add(t));
if (this.value === "" && !((_a = __privateGet(this, _el)) == null ? void 0 : _a.hasAttribute(`${__privateGet(this, _attr)}`))) {
return;
}
(_b = __privateGet(this, _el)) == null ? void 0 : _b.setAttribute(`${__privateGet(this, _attr)}`, `${this.value}`);
}
remove(...tokens) {
var _a;
tokens.forEach((t) => __privateGet(this, _tokenSet).delete(t));
(_a = __privateGet(this, _el)) == null ? void 0 : _a.setAttribute(`${__privateGet(this, _attr)}`, `${this.value}`);
}
contains(token) {
return __privateGet(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 = new WeakMap();
_attr = new WeakMap();
_defaultSet = new WeakMap();
_tokenSet = new WeakMap();
_tokens = new WeakSet();
tokens_get = function() {
return __privateGet(this, _tokenSet).size ? __privateGet(this, _tokenSet) : __privateGet(this, _defaultSet);
};

View File

@@ -0,0 +1,105 @@
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 captions_exports = {};
__export(captions_exports, {
areSubsOn: () => areSubsOn,
formatTextTrackObj: () => formatTextTrackObj,
getTextTracksList: () => getTextTracksList,
isMatchingPropOf: () => isMatchingPropOf,
parseTextTrackStr: () => parseTextTrackStr,
parseTextTracksStr: () => parseTextTracksStr,
parseTracks: () => parseTracks,
splitTextTracksStr: () => splitTextTracksStr,
stringifyTextTrackList: () => stringifyTextTrackList,
textTrackObjAsPred: () => textTrackObjAsPred,
updateTracksModeTo: () => updateTracksModeTo
});
module.exports = __toCommonJS(captions_exports);
var import_constants = require("../constants.js");
const splitTextTracksStr = (textTracksStr = "") => textTracksStr.split(/\s+/);
const parseTextTrackStr = (textTrackStr = "") => {
const [kind, language, encodedLabel] = textTrackStr.split(":");
const label = encodedLabel ? decodeURIComponent(encodedLabel) : void 0;
return {
kind: kind === "cc" ? import_constants.TextTrackKinds.CAPTIONS : import_constants.TextTrackKinds.SUBTITLES,
language,
label
};
};
const parseTextTracksStr = (textTracksStr = "", textTrackLikeObj = {}) => {
return splitTextTracksStr(textTracksStr).map((textTrackStr) => {
const textTrackObj = parseTextTrackStr(textTrackStr);
return {
...textTrackLikeObj,
...textTrackObj
};
});
};
const parseTracks = (trackOrTracks) => {
if (!trackOrTracks)
return [];
if (Array.isArray(trackOrTracks)) {
return trackOrTracks.map((trackObjOrStr) => {
if (typeof trackObjOrStr === "string") {
return parseTextTrackStr(trackObjOrStr);
}
return trackObjOrStr;
});
}
if (typeof trackOrTracks === "string") {
return parseTextTracksStr(trackOrTracks);
}
return [trackOrTracks];
};
const formatTextTrackObj = ({ kind, label, language } = { kind: "subtitles" }) => {
if (!label)
return language;
return `${kind === "captions" ? "cc" : "sb"}:${language}:${encodeURIComponent(
label
)}`;
};
const stringifyTextTrackList = (textTracks = []) => {
return Array.prototype.map.call(textTracks, formatTextTrackObj).join(" ");
};
const isMatchingPropOf = (key, value) => (obj) => obj[key] === value;
const textTrackObjAsPred = (filterObj) => {
const preds = Object.entries(filterObj).map(([key, value]) => {
return isMatchingPropOf(key, value);
});
return (textTrack) => preds.every((pred) => pred(textTrack));
};
const updateTracksModeTo = (mode, tracks = [], tracksToUpdate = []) => {
const preds = parseTracks(tracksToUpdate).map(textTrackObjAsPred);
const isTrackToUpdate = (textTrack) => {
return preds.some((pred) => pred(textTrack));
};
Array.from(tracks).filter(isTrackToUpdate).forEach((textTrack) => {
textTrack.mode = mode;
});
};
const getTextTracksList = (media, filterPredOrObj = () => true) => {
if (!(media == null ? void 0 : media.textTracks))
return [];
const filterPred = typeof filterPredOrObj === "function" ? filterPredOrObj : textTrackObjAsPred(filterPredOrObj);
return Array.from(media.textTracks).filter(filterPred);
};
const areSubsOn = (el) => {
var _a;
const showingSubtitles = !!((_a = el.mediaSubtitlesShowing) == null ? void 0 : _a.length) || el.hasAttribute(import_constants.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING);
return showingSubtitles;
};

View File

@@ -0,0 +1,230 @@
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 element_utils_exports = {};
__export(element_utils_exports, {
closestComposedNode: () => closestComposedNode,
containsComposedNode: () => containsComposedNode,
distance: () => distance,
getActiveElement: () => getActiveElement,
getAllSlotted: () => getAllSlotted,
getAttributeMediaController: () => getAttributeMediaController,
getBooleanAttr: () => getBooleanAttr,
getCSSRule: () => getCSSRule,
getDocumentOrShadowRoot: () => getDocumentOrShadowRoot,
getMediaController: () => getMediaController,
getNumericAttr: () => getNumericAttr,
getOrInsertCSSRule: () => getOrInsertCSSRule,
getPointProgressOnLine: () => getPointProgressOnLine,
getSlotted: () => getSlotted,
getStringAttr: () => getStringAttr,
insertCSSRule: () => insertCSSRule,
isElementVisible: () => isElementVisible,
setBooleanAttr: () => setBooleanAttr,
setNumericAttr: () => setNumericAttr,
setStringAttr: () => setStringAttr,
updateIconText: () => updateIconText
});
module.exports = __toCommonJS(element_utils_exports);
var import_constants = require("../constants.js");
function getMediaController(host) {
var _a;
return (_a = getAttributeMediaController(host)) != null ? _a : closestComposedNode(host, "media-controller");
}
function getAttributeMediaController(host) {
var _a;
const { MEDIA_CONTROLLER } = import_constants.MediaStateReceiverAttributes;
const mediaControllerId = host.getAttribute(MEDIA_CONTROLLER);
if (mediaControllerId) {
return (_a = getDocumentOrShadowRoot(host)) == null ? void 0 : _a.getElementById(
mediaControllerId
);
}
}
const updateIconText = (svg, value, selector = ".value") => {
const node = svg.querySelector(selector);
if (!node)
return;
node.textContent = value;
};
const getAllSlotted = (el, name) => {
const slotSelector = `slot[name="${name}"]`;
const slot = el.shadowRoot.querySelector(slotSelector);
if (!slot)
return [];
return slot.children;
};
const getSlotted = (el, name) => getAllSlotted(el, name)[0];
const containsComposedNode = (rootNode, childNode) => {
if (!rootNode || !childNode)
return false;
if (rootNode == null ? void 0 : rootNode.contains(childNode))
return true;
return containsComposedNode(
rootNode,
childNode.getRootNode().host
);
};
const 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 _a;
const activeEl = root == null ? void 0 : root.activeElement;
if (!activeEl)
return null;
return (_a = getActiveElement(activeEl.shadowRoot)) != null ? _a : activeEl;
}
function getDocumentOrShadowRoot(node) {
var _a;
const rootNode = (_a = node == null ? void 0 : node.getRootNode) == null ? void 0 : _a.call(node);
if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
return rootNode;
}
return null;
}
function isElementVisible(element, { depth = 3, checkOpacity = true, checkVisibilityCSS = true } = {}) {
if (element.checkVisibility) {
return element.checkVisibility({
checkOpacity,
checkVisibilityCSS
});
}
let el = element;
while (el && depth > 0) {
const style = getComputedStyle(el);
if (checkOpacity && style.opacity === "0" || checkVisibilityCSS && style.visibility === "hidden" || style.display === "none") {
return false;
}
el = el.parentElement;
depth--;
}
return true;
}
function getPointProgressOnLine(x, y, p1, p2) {
const segment = distance(p1, p2);
const toStart = distance(p1, { x, y });
const toEnd = distance(p2, { x, y });
if (toStart > segment || toEnd > segment) {
return toStart > toEnd ? 1 : 0;
}
return toStart / segment;
}
function distance(p1, p2) {
return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
}
function getOrInsertCSSRule(styleParent, selectorText) {
const cssRule = getCSSRule(styleParent, (st) => st === selectorText);
if (cssRule)
return cssRule;
return insertCSSRule(styleParent, selectorText);
}
function getCSSRule(styleParent, predicate) {
var _a, _b;
let style;
for (style of (_a = styleParent.querySelectorAll("style:not([media])")) != null ? _a : []) {
let cssRules;
try {
cssRules = (_b = style.sheet) == null ? void 0 : _b.cssRules;
} catch {
continue;
}
for (const rule of cssRules != null ? cssRules : []) {
if (predicate(rule.selectorText))
return rule;
}
}
}
function insertCSSRule(styleParent, selectorText) {
var _a, _b;
const styles = (_a = styleParent.querySelectorAll("style:not([media])")) != null ? _a : [];
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} */
(_b = style.sheet.cssRules) == null ? void 0 : _b[style.sheet.cssRules.length - 1]
);
}
function getNumericAttr(el, attrName, defaultValue = Number.NaN) {
const attrVal = el.getAttribute(attrName);
return attrVal != null ? +attrVal : defaultValue;
}
function setNumericAttr(el, attrName, value) {
const nextNumericValue = +value;
if (value == null || Number.isNaN(nextNumericValue)) {
if (el.hasAttribute(attrName)) {
el.removeAttribute(attrName);
}
return;
}
if (getNumericAttr(el, attrName, void 0) === nextNumericValue)
return;
el.setAttribute(attrName, `${nextNumericValue}`);
}
function getBooleanAttr(el, attrName) {
return el.hasAttribute(attrName);
}
function setBooleanAttr(el, attrName, value) {
if (value == null) {
if (el.hasAttribute(attrName)) {
el.removeAttribute(attrName);
}
return;
}
if (getBooleanAttr(el, attrName) == value)
return;
el.toggleAttribute(attrName, value);
}
function getStringAttr(el, attrName, defaultValue = null) {
var _a;
return (_a = el.getAttribute(attrName)) != null ? _a : 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);
}

View File

@@ -0,0 +1,43 @@
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 events_exports = {};
__export(events_exports, {
InvokeEvent: () => InvokeEvent,
ToggleEvent: () => ToggleEvent
});
module.exports = __toCommonJS(events_exports);
class InvokeEvent extends Event {
/**
* @param init - The event options.
*/
constructor({ action = "auto", relatedTarget, ...options }) {
super("invoke", options);
this.action = action;
this.relatedTarget = relatedTarget;
}
}
class ToggleEvent extends Event {
/**
* @param init - The event options.
*/
constructor({ newState, oldState, ...options }) {
super("toggle", options);
this.newState = newState;
this.oldState = oldState;
}
}

View File

@@ -0,0 +1,100 @@
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 fullscreen_api_exports = {};
__export(fullscreen_api_exports, {
enterFullscreen: () => enterFullscreen,
exitFullscreen: () => exitFullscreen,
getFullscreenElement: () => getFullscreenElement,
isFullscreen: () => isFullscreen,
isFullscreenEnabled: () => isFullscreenEnabled
});
module.exports = __toCommonJS(fullscreen_api_exports);
var import_constants = require("../constants.js");
var import_element_utils = require("./element-utils.js");
var import_server_safe_globals = require("./server-safe-globals.js");
const enterFullscreen = (stateOwners) => {
var _a;
const { media, fullscreenElement } = stateOwners;
const enterFullscreenKey = fullscreenElement && "requestFullscreen" in fullscreenElement ? "requestFullscreen" : fullscreenElement && "webkitRequestFullScreen" in fullscreenElement ? "webkitRequestFullScreen" : void 0;
if (enterFullscreenKey) {
const maybePromise = (_a = fullscreenElement[enterFullscreenKey]) == null ? void 0 : _a.call(fullscreenElement);
if (maybePromise instanceof Promise) {
return maybePromise.catch(() => {
});
}
} else if (media == null ? void 0 : media.webkitEnterFullscreen) {
media.webkitEnterFullscreen();
} else if (media == null ? void 0 : media.requestFullscreen) {
media.requestFullscreen();
}
};
const exitFullscreenKey = "exitFullscreen" in import_server_safe_globals.document ? "exitFullscreen" : "webkitExitFullscreen" in import_server_safe_globals.document ? "webkitExitFullscreen" : "webkitCancelFullScreen" in import_server_safe_globals.document ? "webkitCancelFullScreen" : void 0;
const exitFullscreen = (stateOwners) => {
var _a;
const { documentElement } = stateOwners;
if (exitFullscreenKey) {
const maybePromise = (_a = documentElement == null ? void 0 : documentElement[exitFullscreenKey]) == null ? void 0 : _a.call(documentElement);
if (maybePromise instanceof Promise) {
return maybePromise.catch(() => {
});
}
}
};
const fullscreenElementKey = "fullscreenElement" in import_server_safe_globals.document ? "fullscreenElement" : "webkitFullscreenElement" in import_server_safe_globals.document ? "webkitFullscreenElement" : void 0;
const getFullscreenElement = (stateOwners) => {
const { documentElement, media } = stateOwners;
const docFullscreenElement = documentElement == null ? void 0 : documentElement[fullscreenElementKey];
if (!docFullscreenElement && "webkitDisplayingFullscreen" in media && "webkitPresentationMode" in media && media.webkitDisplayingFullscreen && media.webkitPresentationMode === import_constants.WebkitPresentationModes.FULLSCREEN) {
return media;
}
return docFullscreenElement;
};
const isFullscreen = (stateOwners) => {
var _a;
const { media, documentElement, fullscreenElement = media } = stateOwners;
if (!media || !documentElement)
return false;
const currentFullscreenElement = getFullscreenElement(stateOwners);
if (!currentFullscreenElement)
return false;
if (currentFullscreenElement === fullscreenElement || currentFullscreenElement === media) {
return true;
}
if (currentFullscreenElement.localName.includes("-")) {
let currentRoot = currentFullscreenElement.shadowRoot;
if (!(fullscreenElementKey in currentRoot)) {
return (0, import_element_utils.containsComposedNode)(
currentFullscreenElement,
/** @TODO clean up type assumptions (e.g. Node) (CJP) */
// @ts-ignore
fullscreenElement
);
}
while (currentRoot == null ? void 0 : currentRoot[fullscreenElementKey]) {
if (currentRoot[fullscreenElementKey] === fullscreenElement)
return true;
currentRoot = (_a = currentRoot[fullscreenElementKey]) == null ? void 0 : _a.shadowRoot;
}
}
return false;
};
const fullscreenEnabledKey = "fullscreenEnabled" in import_server_safe_globals.document ? "fullscreenEnabled" : "webkitFullscreenEnabled" in import_server_safe_globals.document ? "webkitFullscreenEnabled" : void 0;
const isFullscreenEnabled = (stateOwners) => {
const { documentElement, media } = stateOwners;
return !!(documentElement == null ? void 0 : documentElement[fullscreenEnabledKey]) || media && "webkitSupportsFullscreen" in media;
};

View File

@@ -0,0 +1,81 @@
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 platform_tests_exports = {};
__export(platform_tests_exports, {
airplaySupported: () => airplaySupported,
castSupported: () => castSupported,
fullscreenSupported: () => fullscreenSupported,
getTestMediaEl: () => getTestMediaEl,
hasFullscreenSupport: () => hasFullscreenSupport,
hasPipSupport: () => hasPipSupport,
hasVolumeSupportAsync: () => hasVolumeSupportAsync,
pipSupported: () => pipSupported
});
module.exports = __toCommonJS(platform_tests_exports);
var import_server_safe_globals = require("./server-safe-globals.js");
var import_utils = require("./utils.js");
var import_fullscreen_api = require("./fullscreen-api.js");
let testMediaEl;
const getTestMediaEl = () => {
var _a, _b;
if (testMediaEl)
return testMediaEl;
testMediaEl = (_b = (_a = import_server_safe_globals.document) == null ? void 0 : _a.createElement) == null ? void 0 : _b.call(_a, "video");
return testMediaEl;
};
const hasVolumeSupportAsync = async (mediaEl = getTestMediaEl()) => {
if (!mediaEl)
return false;
const prevVolume = mediaEl.volume;
mediaEl.volume = prevVolume / 2 + 0.1;
const abortController = new AbortController();
const volumeSupported = await Promise.race([
dispatchedVolumeChange(mediaEl, abortController.signal),
volumeChanged(mediaEl, prevVolume)
]);
abortController.abort();
return volumeSupported;
};
const dispatchedVolumeChange = (mediaEl, signal) => {
return new Promise((resolve) => {
mediaEl.addEventListener("volumechange", () => resolve(true), { signal });
});
};
const volumeChanged = async (mediaEl, prevVolume) => {
for (let i = 0; i < 10; i++) {
if (mediaEl.volume === prevVolume)
return false;
await (0, import_utils.delay)(10);
}
return mediaEl.volume !== prevVolume;
};
const isSafari = /.*Version\/.*Safari\/.*/.test(
import_server_safe_globals.globalThis.navigator.userAgent
);
const hasPipSupport = (mediaEl = getTestMediaEl()) => {
if (import_server_safe_globals.globalThis.matchMedia("(display-mode: standalone)").matches && isSafari)
return false;
return typeof (mediaEl == null ? void 0 : mediaEl.requestPictureInPicture) === "function";
};
const hasFullscreenSupport = (mediaEl = getTestMediaEl()) => {
return (0, import_fullscreen_api.isFullscreenEnabled)({ documentElement: import_server_safe_globals.document, media: mediaEl });
};
const fullscreenSupported = hasFullscreenSupport();
const pipSupported = hasPipSupport();
const airplaySupported = !!import_server_safe_globals.globalThis.WebKitPlaybackTargetAvailabilityEvent;
const castSupported = !!import_server_safe_globals.globalThis.chrome;

View File

@@ -0,0 +1,119 @@
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;
};
var __privateWrapper = (obj, member, setter, getter) => ({
set _(value) {
__privateSet(obj, member, value, setter);
},
get _() {
return __privateGet(obj, member, getter);
}
});
var range_animation_exports = {};
__export(range_animation_exports, {
RangeAnimation: () => RangeAnimation
});
module.exports = __toCommonJS(range_animation_exports);
var _range, _startTime, _previousTime, _deltaTime, _frameCount, _updateTimestamp, _updateStartValue, _lastRangeIncrease, _id, _animate;
class RangeAnimation {
constructor(range, callback, fps) {
__privateAdd(this, _range, void 0);
__privateAdd(this, _startTime, void 0);
__privateAdd(this, _previousTime, void 0);
__privateAdd(this, _deltaTime, void 0);
__privateAdd(this, _frameCount, void 0);
__privateAdd(this, _updateTimestamp, void 0);
__privateAdd(this, _updateStartValue, void 0);
__privateAdd(this, _lastRangeIncrease, void 0);
__privateAdd(this, _id, 0);
__privateAdd(this, _animate, (now = performance.now()) => {
__privateSet(this, _id, requestAnimationFrame(__privateGet(this, _animate)));
__privateSet(this, _deltaTime, performance.now() - __privateGet(this, _previousTime));
const fpsInterval = 1e3 / this.fps;
if (__privateGet(this, _deltaTime) > fpsInterval) {
__privateSet(this, _previousTime, now - __privateGet(this, _deltaTime) % fpsInterval);
const fps = 1e3 / ((now - __privateGet(this, _startTime)) / ++__privateWrapper(this, _frameCount)._);
const delta = (now - __privateGet(this, _updateTimestamp)) / 1e3 / this.duration;
let value = __privateGet(this, _updateStartValue) + delta * this.playbackRate;
const increase = value - __privateGet(this, _range).valueAsNumber;
if (increase > 0) {
__privateSet(this, _lastRangeIncrease, this.playbackRate / this.duration / fps);
} else {
__privateSet(this, _lastRangeIncrease, 0.995 * __privateGet(this, _lastRangeIncrease));
value = __privateGet(this, _range).valueAsNumber + __privateGet(this, _lastRangeIncrease);
}
this.callback(value);
}
});
__privateSet(this, _range, range);
this.callback = callback;
this.fps = fps;
}
start() {
if (__privateGet(this, _id) !== 0)
return;
__privateSet(this, _previousTime, performance.now());
__privateSet(this, _startTime, __privateGet(this, _previousTime));
__privateSet(this, _frameCount, 0);
__privateGet(this, _animate).call(this);
}
stop() {
if (__privateGet(this, _id) === 0)
return;
cancelAnimationFrame(__privateGet(this, _id));
__privateSet(this, _id, 0);
}
update({ start, duration, playbackRate }) {
const increase = start - __privateGet(this, _range).valueAsNumber;
const durationDelta = Math.abs(duration - this.duration);
if (increase > 0 || increase < -0.03 || durationDelta >= 0.5) {
this.callback(start);
}
__privateSet(this, _updateStartValue, start);
__privateSet(this, _updateTimestamp, performance.now());
this.duration = duration;
this.playbackRate = playbackRate;
}
}
_range = new WeakMap();
_startTime = new WeakMap();
_previousTime = new WeakMap();
_deltaTime = new WeakMap();
_frameCount = new WeakMap();
_updateTimestamp = new WeakMap();
_updateStartValue = new WeakMap();
_lastRangeIncrease = new WeakMap();
_id = new WeakMap();
_animate = new WeakMap();

View File

@@ -0,0 +1,51 @@
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 resize_observer_exports = {};
__export(resize_observer_exports, {
observeResize: () => observeResize,
unobserveResize: () => unobserveResize
});
module.exports = __toCommonJS(resize_observer_exports);
var import_server_safe_globals = require("./server-safe-globals.js");
const callbacksMap = /* @__PURE__ */ new WeakMap();
const getCallbacks = (element) => {
let callbacks = callbacksMap.get(element);
if (!callbacks)
callbacksMap.set(element, callbacks = /* @__PURE__ */ new Set());
return callbacks;
};
const observer = new import_server_safe_globals.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);
}
}

View File

@@ -0,0 +1,141 @@
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 server_safe_globals_exports = {};
__export(server_safe_globals_exports, {
Document: () => Document,
GlobalThis: () => GlobalThis,
document: () => Document,
globalThis: () => GlobalThis,
isServer: () => isServer
});
module.exports = __toCommonJS(server_safe_globals_exports);
class EventTarget {
addEventListener() {
}
removeEventListener() {
}
dispatchEvent() {
return true;
}
}
class Node extends EventTarget {
}
class Element extends Node {
constructor() {
super(...arguments);
this.role = null;
}
}
class ResizeObserver {
observe() {
}
unobserve() {
}
disconnect() {
}
}
const documentShim = {
createElement: function() {
return new globalThisShim.HTMLElement();
},
createElementNS: function() {
return new globalThisShim.HTMLElement();
},
addEventListener() {
},
removeEventListener() {
},
/**
*
* @param {Event} event
* @returns {boolean}
*/
dispatchEvent(event) {
return false;
}
};
const globalThisShim = {
ResizeObserver,
document: documentShim,
Node,
Element,
HTMLElement: class HTMLElement extends Element {
constructor() {
super(...arguments);
this.innerHTML = "";
}
get content() {
return new globalThisShim.DocumentFragment();
}
},
DocumentFragment: class DocumentFragment extends EventTarget {
},
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 CustomEvent() {
},
getComputedStyle: function() {
},
navigator: {
languages: [],
get userAgent() {
return "";
}
},
/**
* @param {string} media
*/
matchMedia(media) {
return {
matches: false,
media
};
}
};
const isServer = typeof window === "undefined" || typeof window.customElements === "undefined";
const isShimmed = Object.keys(globalThisShim).every((key) => key in globalThis);
const GlobalThis = isServer && !isShimmed ? globalThisShim : globalThis;
const Document = isServer && !isShimmed ? documentShim : globalThis.document;

View File

@@ -0,0 +1,350 @@
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;
};
var template_parts_exports = {};
__export(template_parts_exports, {
AttrPart: () => AttrPart,
AttrPartList: () => AttrPartList,
ChildNodePart: () => ChildNodePart,
InnerTemplatePart: () => InnerTemplatePart,
Part: () => Part,
TemplateInstance: () => TemplateInstance,
defaultProcessor: () => defaultProcessor,
parse: () => parse,
tokenize: () => tokenize
});
module.exports = __toCommonJS(template_parts_exports);
var import_server_safe_globals = require("../utils/server-safe-globals.js");
var _parts, _processor, _items, _value, _element, _attributeName, _namespaceURI, _list, list_get, _parentNode, _nodes;
const ELEMENT = 1;
const STRING = 0;
const PART = 1;
const 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;
}
}
}
}
};
class TemplateInstance extends import_server_safe_globals.globalThis.DocumentFragment {
constructor(template, state, processor = defaultProcessor) {
var _a;
super();
__privateAdd(this, _parts, void 0);
__privateAdd(this, _processor, void 0);
this.append(template.content.cloneNode(true));
__privateSet(this, _parts, parse(this));
__privateSet(this, _processor, processor);
(_a = processor.createCallback) == null ? void 0 : _a.call(processor, this, __privateGet(this, _parts), state);
processor.processCallback(this, __privateGet(this, _parts), state);
}
update(state) {
__privateGet(this, _processor).processCallback(this, __privateGet(this, _parts), state);
}
}
_parts = new WeakMap();
_processor = new WeakMap();
const 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;
};
const mem = {};
const 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;
};
const FRAGMENT = 11;
class Part {
get value() {
return "";
}
set value(val) {
}
toString() {
return this.value;
}
}
const attrPartToList = /* @__PURE__ */ new WeakMap();
class AttrPartList {
constructor() {
__privateAdd(this, _items, []);
}
[Symbol.iterator]() {
return __privateGet(this, _items).values();
}
get length() {
return __privateGet(this, _items).length;
}
item(index) {
return __privateGet(this, _items)[index];
}
append(...items) {
for (const item of items) {
if (item instanceof AttrPart) {
attrPartToList.set(item, this);
}
__privateGet(this, _items).push(item);
}
}
toString() {
return __privateGet(this, _items).join("");
}
}
_items = new WeakMap();
class AttrPart extends Part {
constructor(element, attributeName, namespaceURI) {
super();
__privateAdd(this, _list);
__privateAdd(this, _value, "");
__privateAdd(this, _element, void 0);
__privateAdd(this, _attributeName, void 0);
__privateAdd(this, _namespaceURI, void 0);
__privateSet(this, _element, element);
__privateSet(this, _attributeName, attributeName);
__privateSet(this, _namespaceURI, namespaceURI);
}
get attributeName() {
return __privateGet(this, _attributeName);
}
get attributeNamespace() {
return __privateGet(this, _namespaceURI);
}
get element() {
return __privateGet(this, _element);
}
get value() {
return __privateGet(this, _value);
}
set value(newValue) {
if (__privateGet(this, _value) === newValue)
return;
__privateSet(this, _value, newValue);
if (!__privateGet(this, _list, list_get) || __privateGet(this, _list, list_get).length === 1) {
if (newValue == null) {
__privateGet(this, _element).removeAttributeNS(
__privateGet(this, _namespaceURI),
__privateGet(this, _attributeName)
);
} else {
__privateGet(this, _element).setAttributeNS(
__privateGet(this, _namespaceURI),
__privateGet(this, _attributeName),
newValue
);
}
} else {
__privateGet(this, _element).setAttributeNS(
__privateGet(this, _namespaceURI),
__privateGet(this, _attributeName),
__privateGet(this, _list, list_get).toString()
);
}
}
get booleanValue() {
return __privateGet(this, _element).hasAttributeNS(
__privateGet(this, _namespaceURI),
__privateGet(this, _attributeName)
);
}
set booleanValue(value) {
if (!__privateGet(this, _list, list_get) || __privateGet(this, _list, list_get).length === 1)
this.value = value ? "" : null;
else
throw new DOMException("Value is not fully templatized");
}
}
_value = new WeakMap();
_element = new WeakMap();
_attributeName = new WeakMap();
_namespaceURI = new WeakMap();
_list = new WeakSet();
list_get = function() {
return attrPartToList.get(this);
};
class ChildNodePart extends Part {
constructor(parentNode, nodes) {
super();
__privateAdd(this, _parentNode, void 0);
__privateAdd(this, _nodes, void 0);
__privateSet(this, _parentNode, parentNode);
__privateSet(this, _nodes, nodes ? [...nodes] : [new Text()]);
}
get replacementNodes() {
return __privateGet(this, _nodes);
}
get parentNode() {
return __privateGet(this, _parentNode);
}
get nextSibling() {
return __privateGet(this, _nodes)[__privateGet(this, _nodes).length - 1].nextSibling;
}
get previousSibling() {
return __privateGet(this, _nodes)[0].previousSibling;
}
// FIXME: not sure why do we need string serialization here? Just because parent class has type DOMString?
get value() {
return __privateGet(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());
__privateSet(this, _nodes, swapdom(
__privateGet(this, _nodes)[0].parentNode,
__privateGet(this, _nodes),
normalisedNodes,
this.nextSibling
));
}
}
_parentNode = new WeakMap();
_nodes = new WeakMap();
class InnerTemplatePart extends ChildNodePart {
constructor(parentNode, template) {
const directive = template.getAttribute("directive") || template.getAttribute("type");
let expression = template.getAttribute("expression") || template.getAttribute(directive) || "";
if (expression.startsWith("{{"))
expression = expression.trim().slice(2, -2).trim();
super(parentNode);
this.expression = expression;
this.template = template;
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;
}

View File

@@ -0,0 +1,252 @@
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 template_processor_exports = {};
__export(template_processor_exports, {
evaluateExpression: () => evaluateExpression,
getParamValue: () => getParamValue,
processor: () => processor,
tokenizeExpression: () => tokenizeExpression
});
module.exports = __toCommonJS(template_processor_exports);
var import_template_parts = require("./template-parts.js");
var import_utils = require("./utils.js");
const pipeModifiers = {
string: (value) => String(value)
};
class PartialTemplate {
constructor(template) {
this.template = template;
this.state = void 0;
}
}
const templates = /* @__PURE__ */ new WeakMap();
const templateInstances = /* @__PURE__ */ new WeakMap();
const Directives = {
partial: (part, state) => {
state[part.expression] = new PartialTemplate(part.template);
},
if: (part, state) => {
var _a;
if (evaluateExpression(part.expression, state)) {
if (templates.get(part) !== part.template) {
templates.set(part, part.template);
const tpl = new import_template_parts.TemplateInstance(part.template, state, processor);
part.replace(tpl);
templateInstances.set(part, tpl);
} else {
(_a = templateInstances.get(part)) == null ? void 0 : _a.update(state);
}
} else {
part.replace("");
templates.delete(part);
templateInstances.delete(part);
}
}
};
const DirectiveNames = Object.keys(Directives);
const processor = {
processCallback(instance, parts, state) {
var _a, _b;
if (!state)
return;
for (const [expression, part] of parts) {
if (part instanceof import_template_parts.InnerTemplatePart) {
if (!part.directive) {
const directive = DirectiveNames.find(
(n) => part.template.hasAttribute(n)
);
if (directive) {
part.directive = directive;
part.expression = part.template.getAttribute(directive);
}
}
(_a = Directives[part.directive]) == null ? void 0 : _a.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 import_template_parts.TemplateInstance(value.template, value.state, processor);
part.value = value;
templateInstances.set(part, value);
} else {
(_b = templateInstances.get(part)) == null ? void 0 : _b.update(value.state);
}
continue;
}
if (value) {
if (part instanceof import_template_parts.AttrPart) {
if (part.attributeName.startsWith("aria-")) {
value = String(value);
}
}
if (part instanceof import_template_parts.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 import_template_parts.AttrPart) {
part.value = void 0;
} else {
part.value = void 0;
templates.delete(part);
templateInstances.delete(part);
}
}
}
}
};
const 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 _a;
return (_a = pipeModifiers[b]) == null ? void 0 : _a.call(pipeModifiers, a);
}
};
function tokenizeExpression(expr) {
return tokenize(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 _a, _b, _c, _d, _e, _f, _g;
const tokens = tokenizeExpression(expr);
if (tokens.length === 0 || tokens.some(({ type }) => !type)) {
return invalidExpression(expr);
}
if (((_a = tokens[0]) == null ? void 0 : _a.token) === ">") {
const partial = state[(_b = tokens[1]) == null ? void 0 : _b.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 ((0, import_utils.isNumericString)(raw)) {
return parseFloat(raw);
}
return state[raw];
}
function tokenize(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;
}

110
server/node_modules/media-chrome/dist/cjs/utils/time.js generated vendored Normal file
View File

@@ -0,0 +1,110 @@
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 time_exports = {};
__export(time_exports, {
emptyTimeRanges: () => emptyTimeRanges,
formatAsTimePhrase: () => formatAsTimePhrase,
formatTime: () => formatTime,
serializeTimeRanges: () => serializeTimeRanges
});
module.exports = __toCommonJS(time_exports);
var import_utils = require("./utils.js");
const UnitLabels = [
{
singular: "hour",
plural: "hours"
},
{
singular: "minute",
plural: "minutes"
},
{
singular: "second",
plural: "seconds"
}
];
const toTimeUnitPhrase = (timeUnitValue, unitIndex) => {
const unitLabel = timeUnitValue === 1 ? UnitLabels[unitIndex].singular : UnitLabels[unitIndex].plural;
return `${timeUnitValue} ${unitLabel}`;
};
const formatAsTimePhrase = (seconds) => {
if (!(0, import_utils.isValidNumber)(seconds))
return "";
const positiveSeconds = Math.abs(seconds);
const negative = positiveSeconds !== seconds;
const secondsDateTime = new Date(0, 0, 0, 0, 0, positiveSeconds, 0);
const timeParts = [
secondsDateTime.getHours(),
secondsDateTime.getMinutes(),
secondsDateTime.getSeconds()
];
const timeString = timeParts.map(
(timeUnitValue, index) => timeUnitValue && toTimeUnitPhrase(timeUnitValue, index)
).filter((x) => x).join(", ");
const negativeSuffix = negative ? " remaining" : "";
return `${timeString}${negativeSuffix}`;
};
function formatTime(seconds, guide) {
let negative = false;
if (seconds < 0) {
negative = true;
seconds = 0 - seconds;
}
seconds = seconds < 0 ? 0 : seconds;
let s = Math.floor(seconds % 60);
let m = Math.floor(seconds / 60 % 60);
let h = Math.floor(seconds / 3600);
const gm = Math.floor(guide / 60 % 60);
const gh = Math.floor(guide / 3600);
if (isNaN(seconds) || seconds === Infinity) {
h = m = s = "0";
}
h = h > 0 || gh > 0 ? h + ":" : "";
m = ((h || gm >= 10) && m < 10 ? "0" + m : m) + ":";
s = s < 10 ? "0" + s : s;
return (negative ? "-" : "") + h + m + s;
}
const emptyTimeRanges = Object.freeze({
length: 0,
start(index) {
const unsignedIdx = index >>> 0;
if (unsignedIdx >= this.length) {
throw new DOMException(
`Failed to execute 'start' on 'TimeRanges': The index provided (${unsignedIdx}) is greater than or equal to the maximum bound (${this.length}).`
);
}
return 0;
},
end(index) {
const unsignedIdx = index >>> 0;
if (unsignedIdx >= this.length) {
throw new DOMException(
`Failed to execute 'end' on 'TimeRanges': The index provided (${unsignedIdx}) is greater than or equal to the maximum bound (${this.length}).`
);
}
return 0;
}
});
function serializeTimeRanges(timeRanges = emptyTimeRanges) {
return Array.from(timeRanges).map(
(_, i) => [
Number(timeRanges.start(i).toFixed(3)),
Number(timeRanges.end(i).toFixed(3))
].join(":")
).join(" ");
}

View File

@@ -0,0 +1,100 @@
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 utils_exports = {};
__export(utils_exports, {
camelCase: () => camelCase,
capitalize: () => capitalize,
constToCamel: () => constToCamel,
dashedToCamel: () => dashedToCamel,
delay: () => delay,
isNumericString: () => isNumericString,
isValidNumber: () => isValidNumber,
parseAudioTrack: () => parseAudioTrack,
parseAudioTrackList: () => parseAudioTrackList,
parseRendition: () => parseRendition,
parseRenditionList: () => parseRenditionList,
stringifyAudioTrack: () => stringifyAudioTrack,
stringifyAudioTrackList: () => stringifyAudioTrackList,
stringifyRendition: () => stringifyRendition,
stringifyRenditionList: () => stringifyRenditionList
});
module.exports = __toCommonJS(utils_exports);
function stringifyRenditionList(renditions) {
return renditions == null ? void 0 : renditions.map(stringifyRendition).join(" ");
}
function parseRenditionList(renditions) {
return renditions == null ? void 0 : renditions.split(/\s+/).map(parseRendition);
}
function stringifyRendition(rendition) {
if (rendition) {
const { id, width, height } = rendition;
return [id, width, height].filter((a) => a != null).join(":");
}
}
function parseRendition(rendition) {
if (rendition) {
const [id, width, height] = rendition.split(":");
return { id, width: +width, height: +height };
}
}
function stringifyAudioTrackList(audioTracks) {
return audioTracks == null ? void 0 : audioTracks.map(stringifyAudioTrack).join(" ");
}
function parseAudioTrackList(audioTracks) {
return audioTracks == null ? void 0 : audioTracks.split(/\s+/).map(parseAudioTrack);
}
function stringifyAudioTrack(audioTrack) {
if (audioTrack) {
const { id, kind, language, label } = audioTrack;
return [id, kind, language, label].filter((a) => a != null).join(":");
}
}
function parseAudioTrack(audioTrack) {
if (audioTrack) {
const [id, kind, language, label] = audioTrack.split(":");
return {
id,
kind,
language,
label
};
}
}
function dashedToCamel(word) {
return word.split("-").map(function(x, i) {
return (i ? x[0].toUpperCase() : x[0].toLowerCase()) + x.slice(1).toLowerCase();
}).join("");
}
function constToCamel(word, upperFirst = false) {
return word.split("_").map(function(x, i) {
return (i || upperFirst ? x[0].toUpperCase() : x[0].toLowerCase()) + x.slice(1).toLowerCase();
}).join("");
}
function camelCase(name) {
return name.replace(/[-_]([a-z])/g, ($0, $1) => $1.toUpperCase());
}
function isValidNumber(x) {
return typeof x === "number" && !Number.isNaN(x) && Number.isFinite(x);
}
function isNumericString(str) {
if (typeof str != "string")
return false;
return !isNaN(str) && !isNaN(parseFloat(str));
}
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const capitalize = (str) => str && str[0].toUpperCase() + str.slice(1);

157
server/node_modules/media-chrome/dist/constants.d.ts generated vendored Normal file
View File

@@ -0,0 +1,157 @@
export declare const MediaUIEvents: {
readonly MEDIA_PLAY_REQUEST: "mediaplayrequest";
readonly MEDIA_PAUSE_REQUEST: "mediapauserequest";
readonly MEDIA_MUTE_REQUEST: "mediamuterequest";
readonly MEDIA_UNMUTE_REQUEST: "mediaunmuterequest";
readonly MEDIA_VOLUME_REQUEST: "mediavolumerequest";
readonly MEDIA_SEEK_REQUEST: "mediaseekrequest";
readonly MEDIA_AIRPLAY_REQUEST: "mediaairplayrequest";
readonly MEDIA_ENTER_FULLSCREEN_REQUEST: "mediaenterfullscreenrequest";
readonly MEDIA_EXIT_FULLSCREEN_REQUEST: "mediaexitfullscreenrequest";
readonly MEDIA_PREVIEW_REQUEST: "mediapreviewrequest";
readonly MEDIA_ENTER_PIP_REQUEST: "mediaenterpiprequest";
readonly MEDIA_EXIT_PIP_REQUEST: "mediaexitpiprequest";
readonly MEDIA_ENTER_CAST_REQUEST: "mediaentercastrequest";
readonly MEDIA_EXIT_CAST_REQUEST: "mediaexitcastrequest";
readonly MEDIA_SHOW_TEXT_TRACKS_REQUEST: "mediashowtexttracksrequest";
readonly MEDIA_HIDE_TEXT_TRACKS_REQUEST: "mediahidetexttracksrequest";
readonly MEDIA_SHOW_SUBTITLES_REQUEST: "mediashowsubtitlesrequest";
readonly MEDIA_DISABLE_SUBTITLES_REQUEST: "mediadisablesubtitlesrequest";
readonly MEDIA_TOGGLE_SUBTITLES_REQUEST: "mediatogglesubtitlesrequest";
readonly MEDIA_PLAYBACK_RATE_REQUEST: "mediaplaybackraterequest";
readonly MEDIA_RENDITION_REQUEST: "mediarenditionrequest";
readonly MEDIA_AUDIO_TRACK_REQUEST: "mediaaudiotrackrequest";
readonly MEDIA_SEEK_TO_LIVE_REQUEST: "mediaseektoliverequest";
readonly REGISTER_MEDIA_STATE_RECEIVER: "registermediastatereceiver";
readonly UNREGISTER_MEDIA_STATE_RECEIVER: "unregistermediastatereceiver";
};
export type MediaUIEvents = typeof MediaUIEvents;
export declare const MediaStateReceiverAttributes: {
readonly MEDIA_CHROME_ATTRIBUTES: "mediachromeattributes";
readonly MEDIA_CONTROLLER: "mediacontroller";
};
export type MediaStateReceiverAttributes = typeof MediaStateReceiverAttributes;
export declare const MediaUIProps: {
readonly MEDIA_AIRPLAY_UNAVAILABLE: "mediaAirplayUnavailable";
readonly MEDIA_FULLSCREEN_UNAVAILABLE: "mediaFullscreenUnavailable";
readonly MEDIA_PIP_UNAVAILABLE: "mediaPipUnavailable";
readonly MEDIA_CAST_UNAVAILABLE: "mediaCastUnavailable";
readonly MEDIA_RENDITION_UNAVAILABLE: "mediaRenditionUnavailable";
readonly MEDIA_AUDIO_TRACK_UNAVAILABLE: "mediaAudioTrackUnavailable";
readonly MEDIA_WIDTH: "mediaWidth";
readonly MEDIA_HEIGHT: "mediaHeight";
readonly MEDIA_PAUSED: "mediaPaused";
readonly MEDIA_HAS_PLAYED: "mediaHasPlayed";
readonly MEDIA_ENDED: "mediaEnded";
readonly MEDIA_MUTED: "mediaMuted";
readonly MEDIA_VOLUME_LEVEL: "mediaVolumeLevel";
readonly MEDIA_VOLUME: "mediaVolume";
readonly MEDIA_VOLUME_UNAVAILABLE: "mediaVolumeUnavailable";
readonly MEDIA_IS_PIP: "mediaIsPip";
readonly MEDIA_IS_CASTING: "mediaIsCasting";
readonly MEDIA_IS_AIRPLAYING: "mediaIsAirplaying";
readonly MEDIA_SUBTITLES_LIST: "mediaSubtitlesList";
readonly MEDIA_SUBTITLES_SHOWING: "mediaSubtitlesShowing";
readonly MEDIA_IS_FULLSCREEN: "mediaIsFullscreen";
readonly MEDIA_PLAYBACK_RATE: "mediaPlaybackRate";
readonly MEDIA_CURRENT_TIME: "mediaCurrentTime";
readonly MEDIA_DURATION: "mediaDuration";
readonly MEDIA_SEEKABLE: "mediaSeekable";
readonly MEDIA_PREVIEW_TIME: "mediaPreviewTime";
readonly MEDIA_PREVIEW_IMAGE: "mediaPreviewImage";
readonly MEDIA_PREVIEW_COORDS: "mediaPreviewCoords";
readonly MEDIA_PREVIEW_CHAPTER: "mediaPreviewChapter";
readonly MEDIA_LOADING: "mediaLoading";
readonly MEDIA_BUFFERED: "mediaBuffered";
readonly MEDIA_STREAM_TYPE: "mediaStreamType";
readonly MEDIA_TARGET_LIVE_WINDOW: "mediaTargetLiveWindow";
readonly MEDIA_TIME_IS_LIVE: "mediaTimeIsLive";
readonly MEDIA_RENDITION_LIST: "mediaRenditionList";
readonly MEDIA_RENDITION_SELECTED: "mediaRenditionSelected";
readonly MEDIA_AUDIO_TRACK_LIST: "mediaAudioTrackList";
readonly MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled";
readonly MEDIA_CHAPTERS_CUES: "mediaChaptersCues";
};
export type MediaUIProps = typeof MediaUIProps;
type LowercaseValues<T extends Record<any, string>> = {
[k in keyof T]: Lowercase<T[k]>;
};
export type MediaUIAttributes = LowercaseValues<MediaUIProps>;
export declare const MediaUIAttributes: MediaUIAttributes;
declare const AdditionalStateChangeEvents: {
readonly USER_INACTIVE: "userinactivechange";
readonly BREAKPOINTS_CHANGE: "breakpointchange";
readonly BREAKPOINTS_COMPUTED: "breakpointscomputed";
};
export type MediaStateChangeEvents = {
[k in keyof MediaUIProps]: Lowercase<MediaUIProps[k]>;
} & typeof AdditionalStateChangeEvents;
/** @TODO In a prior migration, we dropped the 'change' from our state change event types. Although a breaking change, we should consider re-adding (CJP) */
export declare const MediaStateChangeEvents: MediaStateChangeEvents;
/** @TODO Make types more precise derivations, at least after updates to event type names mentioned above (CJP) */
export type StateChangeEventToAttributeMap = {
[k in MediaStateChangeEvents[keyof MediaStateChangeEvents & keyof MediaUIAttributes]]: MediaUIAttributes[keyof MediaUIAttributes];
} & {
userinactivechange: 'userinactive';
};
export declare const StateChangeEventToAttributeMap: StateChangeEventToAttributeMap;
/** @TODO Make types more precise derivations, at least after updates to event type names mentioned above (CJP) */
export type AttributeToStateChangeEventMap = {
[k in MediaUIAttributes[keyof MediaUIAttributes & keyof MediaStateChangeEvents]]: MediaStateChangeEvents[keyof MediaStateChangeEvents];
} & {
userinactive: 'userinactivechange';
};
export declare const AttributeToStateChangeEventMap: AttributeToStateChangeEventMap;
export declare const TextTrackKinds: {
readonly SUBTITLES: "subtitles";
readonly CAPTIONS: "captions";
readonly DESCRIPTIONS: "descriptions";
readonly CHAPTERS: "chapters";
readonly METADATA: "metadata";
};
export type TextTrackKinds = typeof TextTrackKinds[keyof typeof TextTrackKinds];
export declare const TextTrackModes: {
readonly DISABLED: "disabled";
readonly HIDDEN: "hidden";
readonly SHOWING: "showing";
};
export type TextTrackModes = typeof TextTrackModes;
export declare const ReadyStates: {
readonly HAVE_NOTHING: 0;
readonly HAVE_METADATA: 1;
readonly HAVE_CURRENT_DATA: 2;
readonly HAVE_FUTURE_DATA: 3;
readonly HAVE_ENOUGH_DATA: 4;
};
export type ReadyStates = typeof ReadyStates;
export declare const PointerTypes: {
readonly MOUSE: "mouse";
readonly PEN: "pen";
readonly TOUCH: "touch";
};
export type PointerTypes = typeof PointerTypes;
export declare const AvailabilityStates: {
readonly UNAVAILABLE: "unavailable";
readonly UNSUPPORTED: "unsupported";
};
export type AvailabilityStates = typeof AvailabilityStates[keyof typeof AvailabilityStates];
export declare const StreamTypes: {
readonly LIVE: "live";
readonly ON_DEMAND: "on-demand";
readonly UNKNOWN: "unknown";
};
export type StreamTypes = typeof StreamTypes[keyof typeof StreamTypes];
export declare const VolumeLevels: {
readonly HIGH: "high";
readonly MEDIUM: "medium";
readonly LOW: "low";
readonly OFF: "off";
};
export type VolumeLevels = typeof VolumeLevels;
export declare const WebkitPresentationModes: {
readonly INLINE: "inline";
readonly FULLSCREEN: "fullscreen";
readonly PICTURE_IN_PICTURE: "picture-in-picture";
};
export type WebkitPresentationModes = typeof WebkitPresentationModes;
export {};

179
server/node_modules/media-chrome/dist/constants.js generated vendored Normal file
View File

@@ -0,0 +1,179 @@
const 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"
};
const MediaStateReceiverAttributes = {
MEDIA_CHROME_ATTRIBUTES: "mediachromeattributes",
MEDIA_CONTROLLER: "mediacontroller"
};
const 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"
};
const MediaUIPropsEntries = Object.entries(
MediaUIProps
);
const MediaUIAttributes = MediaUIPropsEntries.reduce(
(dictObj, [key, propName]) => {
dictObj[key] = propName.toLowerCase();
return dictObj;
},
{}
);
const AdditionalStateChangeEvents = {
USER_INACTIVE: "userinactivechange",
BREAKPOINTS_CHANGE: "breakpointchange",
BREAKPOINTS_COMPUTED: "breakpointscomputed"
};
const MediaStateChangeEvents = MediaUIPropsEntries.reduce(
(dictObj, [key, propName]) => {
dictObj[key] = propName.toLowerCase();
return dictObj;
},
{ ...AdditionalStateChangeEvents }
);
const StateChangeEventToAttributeMap = Object.entries(
MediaStateChangeEvents
).reduce(
(mapObj, [key, eventType]) => {
const attrName = MediaUIAttributes[key];
if (attrName) {
mapObj[eventType] = attrName;
}
return mapObj;
},
{ userinactivechange: "userinactive" }
);
const AttributeToStateChangeEventMap = Object.entries(
MediaUIAttributes
).reduce(
(mapObj, [key, attrName]) => {
const evtType = MediaStateChangeEvents[key];
if (evtType) {
mapObj[attrName] = evtType;
}
return mapObj;
},
{ userinactive: "userinactivechange" }
);
const TextTrackKinds = {
SUBTITLES: "subtitles",
CAPTIONS: "captions",
DESCRIPTIONS: "descriptions",
CHAPTERS: "chapters",
METADATA: "metadata"
};
const TextTrackModes = {
DISABLED: "disabled",
HIDDEN: "hidden",
SHOWING: "showing"
};
const ReadyStates = {
HAVE_NOTHING: 0,
HAVE_METADATA: 1,
HAVE_CURRENT_DATA: 2,
HAVE_FUTURE_DATA: 3,
HAVE_ENOUGH_DATA: 4
};
const PointerTypes = {
MOUSE: "mouse",
PEN: "pen",
TOUCH: "touch"
};
const AvailabilityStates = {
UNAVAILABLE: "unavailable",
UNSUPPORTED: "unsupported"
};
const StreamTypes = {
LIVE: "live",
ON_DEMAND: "on-demand",
UNKNOWN: "unknown"
};
const VolumeLevels = {
HIGH: "high",
MEDIUM: "medium",
LOW: "low",
OFF: "off"
};
const WebkitPresentationModes = {
INLINE: "inline",
FULLSCREEN: "fullscreen",
PICTURE_IN_PICTURE: "picture-in-picture"
};
export {
AttributeToStateChangeEventMap,
AvailabilityStates,
MediaStateChangeEvents,
MediaStateReceiverAttributes,
MediaUIAttributes,
MediaUIEvents,
MediaUIProps,
PointerTypes,
ReadyStates,
StateChangeEventToAttributeMap,
StreamTypes,
TextTrackKinds,
TextTrackModes,
VolumeLevels,
WebkitPresentationModes
};

20873
server/node_modules/media-chrome/dist/custom-elements.json generated vendored Normal file

File diff suppressed because it is too large Load Diff

View File

View File

View File

@@ -0,0 +1,45 @@
import { globalThis } from '../../utils/server-safe-globals.js';
/**
*
*/
declare class MediaClipSelector extends globalThis.HTMLElement {
static get observedAttributes(): string[];
draggingEl: HTMLElement | null;
wrapper: HTMLElement;
selection: HTMLElement;
playhead: HTMLElement;
leftTrim: HTMLElement;
spacerFirst: HTMLElement;
startHandle: HTMLElement;
spacerMiddle: HTMLElement;
endHandle: HTMLElement;
spacerLast: HTMLElement;
initialX: number;
thumbnailPreview: HTMLElement;
_clickHandler: () => void;
_dragStart: () => void;
_dragEnd: () => void;
_drag: () => void;
constructor();
get mediaDuration(): number;
get mediaCurrentTime(): number;
getPlayheadBasedOnMouseEvent(evt: MouseEvent): number;
getXPositionFromMouse(evt: any): number;
getMousePercent(evt: MouseEvent): number;
dragStart(evt: MouseEvent): void;
dragEnd(): void;
setSelectionWidth(selectionPercent: number, fullTimelineWidth: number): void;
drag(evt: MouseEvent): void;
dispatchUpdate(): void;
getCurrentClipBounds(): {
startTime: number;
endTime: number;
};
isTimestampInBounds(timestamp: number): boolean;
handleClick(evt: MouseEvent): void;
mediaCurrentTimeSet(): void;
mediaUnsetCallback(media: HTMLVideoElement): void;
enableThumbnails(): void;
disableThumbnails(): void;
}
export default MediaClipSelector;

View File

@@ -0,0 +1,399 @@
import { globalThis, document } from "../../utils/server-safe-globals.js";
import { MediaUIEvents, MediaUIAttributes } from "../../constants.js";
const template = document.createElement("template");
const HANDLE_W = 8;
const Z = {
100: 100,
200: 200,
300: 300
};
function lockBetweenZeroAndOne(num) {
return Math.max(0, Math.min(1, num));
}
template.innerHTML = `
<style>
#selectorContainer {
background-color: transparent;
height: 44px;
width: 100%;
display: flex;
position: relative;
}
#timeline {
width: 100%;
height: 10px;
background: #ccc;
position: absolute;
top: 16px;
z-index: ${Z["100"]};
}
#startHandle, #endHandle {
cursor: pointer;
height: 80%;
width: ${HANDLE_W}px;
border-radius: 4px;
background-color: royalblue;
}
#playhead {
height: 100%;
width: 3px;
background-color: #aaa;
position: absolute;
display: none;
z-index: ${Z["300"]};
}
#selection {
display: flex;
z-index: ${Z["200"]};
width: 25%;
height: 100%;
align-items: center;
}
#leftTrim {
width: 25%;
}
#spacer {
flex: 1;
background-color: cornflowerblue;
height: 40%;
}
#thumbnailContainer {
display: none;
position: absolute;
top: 0;
}
media-preview-thumbnail {
position: absolute;
bottom: 10px;
border: 2px solid #fff;
border-radius: 2px;
background-color: #000;
width: 160px;
height: 90px;
/* Negative offset of half to center on the handle */
margin-left: -80px;
}
/* Can't get this working. Trying a downward triangle. */
/* media-preview-thumbnail::after {
content: "";
display: block;
width: 300px;
height: 300px;
margin: 100px;
background-color: #ff0;
} */
:host(:hover) #thumbnailContainer.enabled {
display: block;
animation: fadeIn ease 0.5s;
}
@keyframes fadeIn {
0% {
/* transform-origin: bottom center; */
/* transform: scale(0.7); */
margin-top: 10px;
opacity: 0;
}
100% {
/* transform-origin: bottom center; */
/* transform: scale(1); */
margin-top: 0;
opacity: 1;
}
}
</style>
<div id="thumbnailContainer">
<media-preview-thumbnail></media-preview-thumbnail>
</div>
<div id="selectorContainer">
<div id="timeline"></div>
<div id="playhead"></div>
<div id="leftTrim"></div>
<div id="selection">
<div id="startHandle"></div>
<div id="spacer"></div>
<div id="endHandle"></div>
</div>
</div>
`;
class MediaClipSelector extends globalThis.HTMLElement {
static get observedAttributes() {
return [
"thumbnails",
MediaUIAttributes.MEDIA_DURATION,
MediaUIAttributes.MEDIA_CURRENT_TIME
];
}
constructor() {
var _a, _b, _c;
super();
if (!this.shadowRoot) {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
this.draggingEl = null;
this.wrapper = this.shadowRoot.querySelector("#selectorContainer");
this.selection = this.shadowRoot.querySelector("#selection");
this.playhead = this.shadowRoot.querySelector("#playhead");
this.leftTrim = this.shadowRoot.querySelector("#leftTrim");
this.spacerFirst = this.shadowRoot.querySelector("#spacerFirst");
this.startHandle = this.shadowRoot.querySelector("#startHandle");
this.spacerMiddle = this.shadowRoot.querySelector("#spacerMiddle");
this.endHandle = this.shadowRoot.querySelector("#endHandle");
this.spacerLast = this.shadowRoot.querySelector("#spacerLast");
this._clickHandler = this.handleClick.bind(this);
this._dragStart = this.dragStart.bind(this);
this._dragEnd = this.dragEnd.bind(this);
this._drag = this.drag.bind(this);
this.wrapper.addEventListener("click", this._clickHandler, false);
this.wrapper.addEventListener("touchstart", this._dragStart, false);
(_a = globalThis.window) == null ? void 0 : _a.addEventListener("touchend", this._dragEnd, false);
this.wrapper.addEventListener("touchmove", this._drag, false);
this.wrapper.addEventListener("mousedown", this._dragStart, false);
(_b = globalThis.window) == null ? void 0 : _b.addEventListener("mouseup", this._dragEnd, false);
(_c = globalThis.window) == null ? void 0 : _c.addEventListener("mousemove", this._drag, false);
this.enableThumbnails();
}
get mediaDuration() {
return +this.getAttribute(MediaUIAttributes.MEDIA_DURATION);
}
get mediaCurrentTime() {
return +this.getAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME);
}
/*
* pass in a mouse event (evt.clientX)
* calculates the percentage progress based on the bounding rectang
* converts the percentage progress into a duration in seconds
*/
getPlayheadBasedOnMouseEvent(evt) {
const duration = this.mediaDuration;
if (!duration)
return;
const mousePercent = lockBetweenZeroAndOne(this.getMousePercent(evt));
return mousePercent * duration;
}
getXPositionFromMouse(evt) {
let clientX;
if (["touchstart", "touchmove"].includes(evt.type)) {
clientX = evt.touches[0].clientX;
}
return clientX || evt.clientX;
}
getMousePercent(evt) {
const rangeRect = this.wrapper.getBoundingClientRect();
const mousePercent = (this.getXPositionFromMouse(evt) - rangeRect.left) / rangeRect.width;
return lockBetweenZeroAndOne(mousePercent);
}
dragStart(evt) {
if (evt.target === this.startHandle) {
this.draggingEl = this.startHandle;
}
if (evt.target === this.endHandle) {
this.draggingEl = this.endHandle;
}
this.initialX = this.getXPositionFromMouse(evt);
}
dragEnd() {
this.initialX = null;
this.draggingEl = null;
}
setSelectionWidth(selectionPercent, fullTimelineWidth) {
let percent = selectionPercent;
const minWidthPx = HANDLE_W * 3;
const minWidthPercent = lockBetweenZeroAndOne(
minWidthPx / fullTimelineWidth
);
if (percent < minWidthPercent) {
percent = minWidthPercent;
}
this.selection.style.width = `${percent * 100}%`;
}
drag(evt) {
if (!this.draggingEl) {
return;
}
evt.preventDefault();
const rangeRect = this.wrapper.getBoundingClientRect();
const fullTimelineWidth = rangeRect.width;
const endXPosition = this.getXPositionFromMouse(evt);
const xDelta = endXPosition - this.initialX;
const percent = this.getMousePercent(evt);
const selectionW = this.selection.getBoundingClientRect().width;
if (this.draggingEl === this.startHandle) {
this.initialX = this.getXPositionFromMouse(evt);
this.leftTrim.style.width = `${percent * 100}%`;
const selectionPercent = lockBetweenZeroAndOne(
(selectionW - xDelta) / fullTimelineWidth
);
this.setSelectionWidth(selectionPercent, fullTimelineWidth);
}
if (this.draggingEl === this.endHandle) {
this.initialX = this.getXPositionFromMouse(evt);
const selectionPercent = lockBetweenZeroAndOne(
(selectionW + xDelta) / fullTimelineWidth
);
this.setSelectionWidth(selectionPercent, fullTimelineWidth);
}
this.dispatchUpdate();
}
dispatchUpdate() {
const updateEvent = new CustomEvent("update", {
detail: this.getCurrentClipBounds()
});
this.dispatchEvent(updateEvent);
}
getCurrentClipBounds() {
const rangeRect = this.wrapper.getBoundingClientRect();
const leftTrimRect = this.leftTrim.getBoundingClientRect();
const selectionRect = this.selection.getBoundingClientRect();
const percentStart = lockBetweenZeroAndOne(
leftTrimRect.width / rangeRect.width
);
const percentEnd = lockBetweenZeroAndOne(
(leftTrimRect.width + selectionRect.width) / rangeRect.width
);
return {
startTime: Math.round(percentStart * this.mediaDuration),
endTime: Math.round(percentEnd * this.mediaDuration)
};
}
isTimestampInBounds(timestamp) {
const { startTime, endTime } = this.getCurrentClipBounds();
return startTime <= timestamp && endTime >= timestamp;
}
handleClick(evt) {
const mousePercent = this.getMousePercent(evt);
const timestampForClick = mousePercent * this.mediaDuration;
if (this.isTimestampInBounds(timestampForClick)) {
this.dispatchEvent(
new globalThis.CustomEvent(MediaUIEvents.MEDIA_SEEK_REQUEST, {
composed: true,
bubbles: true,
detail: timestampForClick
})
);
}
}
mediaCurrentTimeSet() {
const percentComplete = lockBetweenZeroAndOne(
this.mediaCurrentTime / this.mediaDuration
);
this.playhead.style.left = `${percentComplete * 100}%`;
this.playhead.style.display = "block";
if (!this.mediaPaused) {
const { startTime, endTime } = this.getCurrentClipBounds();
if (this.mediaCurrentTime < startTime || this.mediaCurrentTime > endTime) {
this.dispatchEvent(
new globalThis.CustomEvent(MediaUIEvents.MEDIA_SEEK_REQUEST, {
composed: true,
bubbles: true,
detail: startTime
})
);
}
}
}
mediaUnsetCallback(media) {
var _a, _b;
super.mediaUnsetCallback(media);
this.wrapper.removeEventListener("touchstart", this._dragStart);
this.wrapper.removeEventListener("touchend", this._dragEnd);
this.wrapper.removeEventListener("touchmove", this._drag);
this.wrapper.removeEventListener("mousedown", this._dragStart);
(_a = globalThis.window) == null ? void 0 : _a.removeEventListener("mouseup", this._dragEnd);
(_b = globalThis.window) == null ? void 0 : _b.removeEventListener("mousemove", this._drag);
}
/*
* This was copied over from media-time-range, we should have a way of making
* this code shared between the two components
*/
enableThumbnails() {
this.thumbnailPreview = this.shadowRoot.querySelector(
"media-preview-thumbnail"
);
const thumbnailContainer = this.shadowRoot.querySelector(
"#thumbnailContainer"
);
thumbnailContainer.classList.add("enabled");
let mouseMoveHandler;
const trackMouse = () => {
var _a;
mouseMoveHandler = (evt) => {
const duration = this.mediaDuration;
if (!duration)
return;
const rangeRect = this.wrapper.getBoundingClientRect();
const mousePercent = this.getMousePercent(evt);
const leftPadding = rangeRect.left - this.getBoundingClientRect().left;
const thumbnailLeft = leftPadding + mousePercent * rangeRect.width;
this.thumbnailPreview.style.left = `${thumbnailLeft}px`;
this.dispatchEvent(
new globalThis.CustomEvent(MediaUIEvents.MEDIA_PREVIEW_REQUEST, {
composed: true,
bubbles: true,
detail: mousePercent * duration
})
);
};
(_a = globalThis.window) == null ? void 0 : _a.addEventListener("mousemove", mouseMoveHandler, false);
};
const stopTrackingMouse = () => {
var _a;
(_a = globalThis.window) == null ? void 0 : _a.removeEventListener("mousemove", mouseMoveHandler);
};
let rangeEntered = false;
const rangeMouseMoveHander = () => {
var _a;
if (!rangeEntered && this.mediaDuration) {
rangeEntered = true;
this.thumbnailPreview.style.display = "block";
trackMouse();
const offRangeHandler = (evt) => {
var _a2;
if (evt.target != this && !this.contains(evt.target)) {
this.thumbnailPreview.style.display = "none";
(_a2 = globalThis.window) == null ? void 0 : _a2.removeEventListener(
"mousemove",
offRangeHandler
);
rangeEntered = false;
stopTrackingMouse();
}
};
(_a = globalThis.window) == null ? void 0 : _a.addEventListener(
"mousemove",
offRangeHandler,
false
);
}
if (!this.mediaDuration) {
this.thumbnailPreview.style.display = "none";
}
};
this.addEventListener("mousemove", rangeMouseMoveHander, false);
}
disableThumbnails() {
const thumbnailContainer = this.shadowRoot.querySelector(
"#thumbnailContainer"
);
thumbnailContainer.classList.remove("enabled");
}
}
if (!globalThis.customElements.get("media-clip-selector")) {
globalThis.customElements.define("media-clip-selector", MediaClipSelector);
}
var media_clip_selector_default = MediaClipSelector;
export {
media_clip_selector_default as default
};

1620
server/node_modules/media-chrome/dist/iife/all.js generated vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1196
server/node_modules/media-chrome/dist/iife/index.js generated vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

31
server/node_modules/media-chrome/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,31 @@
export * as constants from './constants.js';
export { default as labels } from './labels/labels.js';
export * as timeUtils from './utils/time.js';
import MediaController from './media-controller.js';
import MediaAirplayButton from './media-airplay-button.js';
import MediaCaptionsButton from './media-captions-button.js';
import MediaCastButton from './media-cast-button.js';
import MediaChromeButton from './media-chrome-button.js';
import MediaChromeDialog from './media-chrome-dialog.js';
import MediaChromeRange from './media-chrome-range.js';
import MediaControlBar from './media-control-bar.js';
import MediaDurationDisplay from './media-duration-display.js';
import MediaFullscreenButton from './media-fullscreen-button.js';
import MediaGestureReceiver from './media-gesture-receiver.js';
import MediaLiveButton from './media-live-button.js';
import MediaLoadingIndicator from './media-loading-indicator.js';
import MediaMuteButton from './media-mute-button.js';
import MediaPipButton from './media-pip-button.js';
import MediaPlaybackRateButton from './media-playback-rate-button.js';
import MediaPlayButton from './media-play-button.js';
import MediaPosterImage from './media-poster-image.js';
import MediaPreviewChapterDisplay from './media-preview-chapter-display.js';
import MediaPreviewThumbnail from './media-preview-thumbnail.js';
import MediaPreviewTimeDisplay from './media-preview-time-display.js';
import MediaSeekBackwardButton from './media-seek-backward-button.js';
import MediaSeekForwardButton from './media-seek-forward-button.js';
import MediaTimeDisplay from './media-time-display.js';
import MediaTimeRange from './media-time-range.js';
import MediaTooltip from './media-tooltip.js';
import MediaVolumeRange from './media-volume-range.js';
export { MediaAirplayButton, MediaCaptionsButton, MediaCastButton, MediaChromeButton, MediaChromeDialog, MediaChromeRange, MediaControlBar, MediaController, MediaDurationDisplay, MediaFullscreenButton, MediaGestureReceiver, MediaLiveButton, MediaLoadingIndicator, MediaMuteButton, MediaPipButton, MediaPlaybackRateButton, MediaPlayButton, MediaPosterImage, MediaPreviewChapterDisplay, MediaPreviewThumbnail, MediaPreviewTimeDisplay, MediaSeekBackwardButton, MediaSeekForwardButton, MediaTimeDisplay, MediaTimeRange, MediaTooltip, MediaVolumeRange, };

62
server/node_modules/media-chrome/dist/index.js generated vendored Normal file
View File

@@ -0,0 +1,62 @@
import * as constants from "./constants.js";
import { default as default2 } from "./labels/labels.js";
import * as timeUtils from "./utils/time.js";
import MediaController from "./media-controller.js";
import MediaAirplayButton from "./media-airplay-button.js";
import MediaCaptionsButton from "./media-captions-button.js";
import MediaCastButton from "./media-cast-button.js";
import MediaChromeButton from "./media-chrome-button.js";
import MediaChromeDialog from "./media-chrome-dialog.js";
import MediaChromeRange from "./media-chrome-range.js";
import MediaControlBar from "./media-control-bar.js";
import MediaDurationDisplay from "./media-duration-display.js";
import MediaFullscreenButton from "./media-fullscreen-button.js";
import MediaGestureReceiver from "./media-gesture-receiver.js";
import MediaLiveButton from "./media-live-button.js";
import MediaLoadingIndicator from "./media-loading-indicator.js";
import MediaMuteButton from "./media-mute-button.js";
import MediaPipButton from "./media-pip-button.js";
import MediaPlaybackRateButton from "./media-playback-rate-button.js";
import MediaPlayButton from "./media-play-button.js";
import MediaPosterImage from "./media-poster-image.js";
import MediaPreviewChapterDisplay from "./media-preview-chapter-display.js";
import MediaPreviewThumbnail from "./media-preview-thumbnail.js";
import MediaPreviewTimeDisplay from "./media-preview-time-display.js";
import MediaSeekBackwardButton from "./media-seek-backward-button.js";
import MediaSeekForwardButton from "./media-seek-forward-button.js";
import MediaTimeDisplay from "./media-time-display.js";
import MediaTimeRange from "./media-time-range.js";
import MediaTooltip from "./media-tooltip.js";
import MediaVolumeRange from "./media-volume-range.js";
export {
MediaAirplayButton,
MediaCaptionsButton,
MediaCastButton,
MediaChromeButton,
MediaChromeDialog,
MediaChromeRange,
MediaControlBar,
MediaController,
MediaDurationDisplay,
MediaFullscreenButton,
MediaGestureReceiver,
MediaLiveButton,
MediaLoadingIndicator,
MediaMuteButton,
MediaPipButton,
MediaPlayButton,
MediaPlaybackRateButton,
MediaPosterImage,
MediaPreviewChapterDisplay,
MediaPreviewThumbnail,
MediaPreviewTimeDisplay,
MediaSeekBackwardButton,
MediaSeekForwardButton,
MediaTimeDisplay,
MediaTimeRange,
MediaTooltip,
MediaVolumeRange,
constants,
default2 as labels,
timeUtils
};

View File

@@ -0,0 +1,33 @@
export type LabelOptions = {
seekOffset?: number;
playbackRate?: number;
};
export declare const tooltipLabels: {
ENTER_AIRPLAY: string;
EXIT_AIRPLAY: string;
AUDIO_TRACK_MENU: string;
CAPTIONS: string;
ENABLE_CAPTIONS: string;
DISABLE_CAPTIONS: string;
START_CAST: string;
STOP_CAST: string;
ENTER_FULLSCREEN: string;
EXIT_FULLSCREEN: string;
MUTE: string;
UNMUTE: string;
ENTER_PIP: string;
EXIT_PIP: string;
PLAY: string;
PAUSE: string;
PLAYBACK_RATE: string;
RENDITIONS: string;
SEEK_BACKWARD: string;
SEEK_FORWARD: string;
SETTINGS: string;
};
export declare const nouns: Record<string, (options?: LabelOptions) => string>;
export declare const verbs: Record<string, (options?: LabelOptions) => string>;
declare const _default: {
[x: string]: ((options?: LabelOptions) => string) | ((options?: LabelOptions) => string);
};
export default _default;

64
server/node_modules/media-chrome/dist/labels/labels.js generated vendored Normal file
View File

@@ -0,0 +1,64 @@
const 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"
};
const 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`
};
const 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
};
export {
labels_default as default,
nouns,
tooltipLabels,
verbs
};

Some files were not shown because too many files have changed in this diff Show More