@locpd/vidstack 1.12.14

package/dev/chunks/vidstack-Dm1xEU9Q.js

@@ -0,0 +1,34 @@
+const videoIdRE = /(?:youtu\.be|youtube|youtube\.com|youtube-nocookie\.com)(?:\/shorts)?\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=|)((?:\w|-){11})/;
+const posterCache = /* @__PURE__ */ new Map();
+const pendingFetch = /* @__PURE__ */ new Map();
+function resolveYouTubeVideoId(src) {
+  return src.match(videoIdRE)?.[1];
+}
+async function findYouTubePoster(videoId, abort) {
+  if (posterCache.has(videoId)) return posterCache.get(videoId);
+  if (pendingFetch.has(videoId)) return pendingFetch.get(videoId);
+  const pending = new Promise(async (resolve) => {
+    const sizes = ["maxresdefault", "sddefault", "hqdefault"];
+    for (const size of sizes) {
+      for (const webp of [true, false]) {
+        const url = resolveYouTubePosterURL(videoId, size, webp), response = await fetch(url, {
+          mode: "no-cors",
+          signal: abort.signal
+        });
+        if (response.status < 400) {
+          posterCache.set(videoId, url);
+          resolve(url);
+          return;
+        }
+      }
+    }
+  }).catch(() => "").finally(() => pendingFetch.delete(videoId));
+  pendingFetch.set(videoId, pending);
+  return pending;
+}
+function resolveYouTubePosterURL(videoId, size, webp) {
+  const type = webp ? "webp" : "jpg";
+  return `https://i.ytimg.com/${webp ? "vi_webp" : "vi"}/${videoId}/${size}.${type}`;
+}
+
+export { findYouTubePoster, resolveYouTubeVideoId };

package/dev/chunks/vidstack-Dv_LIPFu.js

@@ -0,0 +1,14 @@
+const ADD = Symbol("LIST_ADD" ), REMOVE = Symbol("LIST_REMOVE" ), RESET = Symbol("LIST_RESET" ), SELECT = Symbol("LIST_SELECT" ), READONLY = Symbol("LIST_READONLY" ), SET_READONLY = Symbol("LIST_SET_READONLY" ), ON_RESET = Symbol("LIST_ON_RESET" ), ON_REMOVE = Symbol("LIST_ON_REMOVE" ), ON_USER_SELECT = Symbol("LIST_ON_USER_SELECT" );
+const ListSymbol = {
+  add: ADD,
+  remove: REMOVE,
+  reset: RESET,
+  select: SELECT,
+  readonly: READONLY,
+  setReadonly: SET_READONLY,
+  onReset: ON_RESET,
+  onRemove: ON_REMOVE,
+  onUserSelect: ON_USER_SELECT
+};
+
+export { ListSymbol };

package/dev/chunks/vidstack-igYn0Apa.js

@@ -0,0 +1,254 @@
+import { EventsTarget, DOMEvent, isString, isArray, isNumber } from './vidstack-Bu2kfzUd.js';
+import { getRequestCredentials } from './vidstack-zG6PIeGg.js';
+import { isCueActive } from './vidstack-BGB2pa9s.js';
+
+const CROSS_ORIGIN = Symbol("TEXT_TRACK_CROSS_ORIGIN" ), READY_STATE = Symbol("TEXT_TRACK_READY_STATE" ), UPDATE_ACTIVE_CUES = Symbol("TEXT_TRACK_UPDATE_ACTIVE_CUES" ), CAN_LOAD = Symbol("TEXT_TRACK_CAN_LOAD" ), ON_MODE_CHANGE = Symbol("TEXT_TRACK_ON_MODE_CHANGE" ), NATIVE = Symbol("TEXT_TRACK_NATIVE" ), NATIVE_HLS = Symbol("TEXT_TRACK_NATIVE_HLS" );
+const TextTrackSymbol = {
+  crossOrigin: CROSS_ORIGIN,
+  readyState: READY_STATE,
+  updateActiveCues: UPDATE_ACTIVE_CUES,
+  canLoad: CAN_LOAD,
+  onModeChange: ON_MODE_CHANGE,
+  native: NATIVE,
+  nativeHLS: NATIVE_HLS
+};
+
+class TextTrack extends EventsTarget {
+  static createId(track) {
+    return `vds-${track.type}-${track.kind}-${track.src ?? track.label ?? "?"}`;
+  }
+  src;
+  content;
+  type;
+  encoding;
+  id = "";
+  label = "";
+  language = "";
+  kind;
+  default = false;
+  #canLoad = false;
+  #currentTime = 0;
+  #mode = "disabled";
+  #metadata = {};
+  #regions = [];
+  #cues = [];
+  #activeCues = [];
+  #cueIds = /* @__PURE__ */ new Set();
+  /** @internal */
+  [TextTrackSymbol.readyState] = 0;
+  /** @internal */
+  [TextTrackSymbol.crossOrigin];
+  /** @internal */
+  [TextTrackSymbol.onModeChange] = null;
+  /** @internal */
+  [TextTrackSymbol.native] = null;
+  get metadata() {
+    return this.#metadata;
+  }
+  get regions() {
+    return this.#regions;
+  }
+  get cues() {
+    return this.#cues;
+  }
+  get activeCues() {
+    return this.#activeCues;
+  }
+  /**
+   * - 0: Not Loading
+   * - 1: Loading
+   * - 2: Ready
+   * - 3: Error
+   */
+  get readyState() {
+    return this[TextTrackSymbol.readyState];
+  }
+  get mode() {
+    return this.#mode;
+  }
+  set mode(mode) {
+    this.setMode(mode);
+  }
+  constructor(init) {
+    super();
+    for (const prop of Object.keys(init)) this[prop] = init[prop];
+    if (!this.type) this.type = "vtt";
+    if (init.content) {
+      this.#parseContent(init);
+    } else if (!init.src) {
+      this[TextTrackSymbol.readyState] = 2;
+    }
+    if (isTrackCaptionKind(this) && !this.label) {
+      console.warn(`[vidstack] captions text track created without label: \`${this.src}\``);
+    }
+  }
+  addCue(cue, trigger) {
+    if (cue.id) {
+      if (this.#cueIds.has(cue.id)) return;
+      this.#cueIds.add(cue.id);
+    }
+    let i = 0, length = this.#cues.length;
+    for (i = 0; i < length; i++) if (cue.endTime <= this.#cues[i].startTime) break;
+    if (i === length) this.#cues.push(cue);
+    else this.#cues.splice(i, 0, cue);
+    if (!(cue instanceof TextTrackCue)) {
+      this[TextTrackSymbol.native]?.track.addCue(cue);
+    }
+    this.dispatchEvent(new DOMEvent("add-cue", { detail: cue, trigger }));
+    if (isCueActive(cue, this.#currentTime)) {
+      this[TextTrackSymbol.updateActiveCues](this.#currentTime, trigger);
+    }
+  }
+  removeCue(cue, trigger) {
+    const index = this.#cues.indexOf(cue);
+    if (index >= 0) {
+      const isActive = this.#activeCues.includes(cue);
+      if (cue.id) this.#cueIds.delete(cue.id);
+      this.#cues.splice(index, 1);
+      this[TextTrackSymbol.native]?.track.removeCue(cue);
+      this.dispatchEvent(new DOMEvent("remove-cue", { detail: cue, trigger }));
+      if (isActive) {
+        this[TextTrackSymbol.updateActiveCues](this.#currentTime, trigger);
+      }
+    }
+  }
+  setMode(mode, trigger) {
+    if (this.#mode === mode) return;
+    this.#mode = mode;
+    if (mode === "disabled") {
+      this.#activeCues = [];
+      this.#activeCuesChanged();
+    } else if (this.readyState === 2) {
+      this[TextTrackSymbol.updateActiveCues](this.#currentTime, trigger);
+    } else {
+      this.#load();
+    }
+    this.dispatchEvent(new DOMEvent("mode-change", { detail: this, trigger }));
+    this[TextTrackSymbol.onModeChange]?.();
+  }
+  /** @internal */
+  [TextTrackSymbol.updateActiveCues](currentTime, trigger) {
+    this.#currentTime = currentTime;
+    if (this.mode === "disabled" || !this.#cues.length) return;
+    const activeCues = [];
+    for (let i = 0, length = this.#cues.length; i < length; i++) {
+      const cue = this.#cues[i];
+      if (isCueActive(cue, currentTime)) activeCues.push(cue);
+    }
+    let changed = activeCues.length !== this.#activeCues.length;
+    if (!changed) {
+      for (let i = 0; i < activeCues.length; i++) {
+        if (!this.#activeCues.includes(activeCues[i])) {
+          changed = true;
+          break;
+        }
+      }
+    }
+    this.#activeCues = activeCues;
+    if (changed) this.#activeCuesChanged(trigger);
+  }
+  /** @internal */
+  [TextTrackSymbol.canLoad]() {
+    this.#canLoad = true;
+    if (this.#mode !== "disabled") this.#load();
+  }
+  #parseContent(init) {
+    import('media-captions').then(({ parseText, VTTCue, VTTRegion }) => {
+      if (!isString(init.content) || init.type === "json") {
+        this.#parseJSON(init.content, VTTCue, VTTRegion);
+        if (this.readyState !== 3) this.#ready();
+      } else {
+        const content = init.content.split("\n").map((line) => line.trim()).join("\n").trim();
+        parseText(content, { type: init.type }).then(({ cues, regions }) => {
+          this.#cues = cues;
+          this.#regions = regions;
+          this.#ready();
+        });
+      }
+    });
+  }
+  async #load() {
+    if (!this.#canLoad || this[TextTrackSymbol.readyState] > 0) return;
+    this[TextTrackSymbol.readyState] = 1;
+    this.dispatchEvent(new DOMEvent("load-start"));
+    if (!this.src) {
+      this.#ready();
+      return;
+    }
+    try {
+      const { parseResponse, VTTCue, VTTRegion } = await import('media-captions'), crossOrigin = this[TextTrackSymbol.crossOrigin]?.();
+      const response = fetch(this.src, {
+        headers: this.type === "json" ? { "Content-Type": "application/json" } : void 0,
+        credentials: getRequestCredentials(crossOrigin)
+      });
+      if (this.type === "json") {
+        this.#parseJSON(await (await response).text(), VTTCue, VTTRegion);
+      } else {
+        const { errors, metadata, regions, cues } = await parseResponse(response, {
+          type: this.type,
+          encoding: this.encoding
+        });
+        if (errors[0]?.code === 0) {
+          throw errors[0];
+        } else {
+          this.#metadata = metadata;
+          this.#regions = regions;
+          this.#cues = cues;
+        }
+      }
+      this.#ready();
+    } catch (error) {
+      this.#error(error);
+    }
+  }
+  #ready() {
+    this[TextTrackSymbol.readyState] = 2;
+    if (!this.src || this.type !== "vtt") {
+      const native = this[TextTrackSymbol.native];
+      if (native && !native.managed) {
+        for (const cue of this.#cues) native.track.addCue(cue);
+      }
+    }
+    const loadEvent = new DOMEvent("load");
+    this[TextTrackSymbol.updateActiveCues](this.#currentTime, loadEvent);
+    this.dispatchEvent(loadEvent);
+  }
+  #error(error) {
+    this[TextTrackSymbol.readyState] = 3;
+    this.dispatchEvent(new DOMEvent("error", { detail: error }));
+  }
+  #parseJSON(json, VTTCue, VTTRegion) {
+    try {
+      const { regions, cues } = parseJSONCaptionsFile(json, VTTCue, VTTRegion);
+      this.#regions = regions;
+      this.#cues = cues;
+    } catch (error) {
+      {
+        console.error(`[vidstack] failed to parse JSON captions at: \`${this.src}\`
+
+`, error);
+      }
+      this.#error(error);
+    }
+  }
+  #activeCuesChanged(trigger) {
+    this.dispatchEvent(new DOMEvent("cue-change", { trigger }));
+  }
+}
+const captionRE = /captions|subtitles/;
+function isTrackCaptionKind(track) {
+  return captionRE.test(track.kind);
+}
+function parseJSONCaptionsFile(json, Cue, Region) {
+  const content = isString(json) ? JSON.parse(json) : json;
+  let regions = [], cues = [];
+  if (content.regions && Region) {
+    regions = content.regions.map((region) => Object.assign(new Region(), region));
+  }
+  if (content.cues || isArray(content)) {
+    cues = (isArray(content) ? content : content.cues).filter((content2) => isNumber(content2.startTime) && isNumber(content2.endTime)).map((cue) => Object.assign(new Cue(0, 0, ""), cue));
+  }
+  return { regions, cues };
+}
+
+export { TextTrack, TextTrackSymbol, isTrackCaptionKind, parseJSONCaptionsFile };

package/dev/chunks/vidstack-krOAtKMi.js

@@ -0,0 +1,32 @@
+const videoIdRE = /(?:https:\/\/)?(?:player\.)?vimeo(?:\.com)?\/(?:video\/)?(\d+)(?:(?:\?hash=|\?h=|\/)(.*))?/;
+const infoCache = /* @__PURE__ */ new Map();
+const pendingFetch = /* @__PURE__ */ new Map();
+function resolveVimeoVideoId(src) {
+  const matches = src.match(videoIdRE);
+  return { videoId: matches?.[1], hash: matches?.[2] };
+}
+async function getVimeoVideoInfo(videoId, abort, videoHash) {
+  if (infoCache.has(videoId)) return infoCache.get(videoId);
+  if (pendingFetch.has(videoId)) return pendingFetch.get(videoId);
+  let oembedSrc = `https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/${videoId}`;
+  if (videoHash) {
+    oembedSrc = oembedSrc.concat(`?h=${videoHash}`);
+  }
+  const promise = window.fetch(oembedSrc, {
+    mode: "cors",
+    signal: abort.signal
+  }).then((response) => response.json()).then((data) => {
+    const thumnailRegex = /vimeocdn.com\/video\/(.*)?_/, thumbnailId = data?.thumbnail_url?.match(thumnailRegex)?.[1], poster = thumbnailId ? `https://i.vimeocdn.com/video/${thumbnailId}_1920x1080.webp` : "", info = {
+      title: data?.title ?? "",
+      duration: data?.duration ?? 0,
+      poster,
+      pro: data.account_type !== "basic"
+    };
+    infoCache.set(videoId, info);
+    return info;
+  }).finally(() => pendingFetch.delete(videoId));
+  pendingFetch.set(videoId, promise);
+  return promise;
+}
+
+export { getVimeoVideoInfo, resolveVimeoVideoId };

package/dev/chunks/vidstack-qh1N5_f_.js

@@ -0,0 +1,26 @@
+import { isUndefined, isNumber } from './vidstack-Bu2kfzUd.js';
+
+class RAFLoop {
+  #id;
+  #callback;
+  constructor(callback) {
+    this.#callback = callback;
+  }
+  start() {
+    if (!isUndefined(this.#id)) return;
+    this.#loop();
+  }
+  stop() {
+    if (isNumber(this.#id)) window.cancelAnimationFrame(this.#id);
+    this.#id = void 0;
+  }
+  #loop() {
+    this.#id = window.requestAnimationFrame(() => {
+      if (isUndefined(this.#id)) return;
+      this.#callback();
+      this.#loop();
+    });
+  }
+}
+
+export { RAFLoop };

package/dev/chunks/vidstack-rB-wqXw1.js

@@ -0,0 +1,107 @@
+import { Component, State, effect, isNull, setAttribute, EventsController } from './vidstack-Bu2kfzUd.js';
+import { useMediaContext } from './vidstack-DFImIcIL.js';
+import { preconnect } from './vidstack-zG6PIeGg.js';
+
+class Poster extends Component {
+  static props = {
+    src: null,
+    alt: null,
+    crossOrigin: null
+  };
+  static state = new State({
+    img: null,
+    src: null,
+    alt: null,
+    crossOrigin: null,
+    loading: true,
+    error: null,
+    hidden: false
+  });
+  #media;
+  onSetup() {
+    this.#media = useMediaContext();
+    this.#watchSrc();
+    this.#watchAlt();
+    this.#watchCrossOrigin();
+    this.#watchHidden();
+  }
+  onAttach(el) {
+    el.style.setProperty("pointer-events", "none");
+    effect(this.#watchImg.bind(this));
+    effect(this.#watchSrc.bind(this));
+    effect(this.#watchAlt.bind(this));
+    effect(this.#watchCrossOrigin.bind(this));
+    effect(this.#watchHidden.bind(this));
+    const { started } = this.#media.$state;
+    this.setAttributes({
+      "data-visible": () => !started() && !this.$state.hidden(),
+      "data-loading": this.#isLoading.bind(this),
+      "data-error": this.#hasError.bind(this),
+      "data-hidden": this.$state.hidden
+    });
+  }
+  onConnect(el) {
+    effect(this.#onPreconnect.bind(this));
+    effect(this.#onLoadStart.bind(this));
+  }
+  #hasError() {
+    const { error } = this.$state;
+    return !isNull(error());
+  }
+  #onPreconnect() {
+    const { canLoadPoster, poster } = this.#media.$state;
+    if (!canLoadPoster() && poster()) preconnect(poster(), "preconnect");
+  }
+  #watchHidden() {
+    const { src } = this.$props, { poster, nativeControls } = this.#media.$state;
+    this.el && setAttribute(this.el, "display", nativeControls() ? "none" : null);
+    this.$state.hidden.set(this.#hasError() || !(src() || poster()) || nativeControls());
+  }
+  #isLoading() {
+    const { loading, hidden } = this.$state;
+    return !hidden() && loading();
+  }
+  #watchImg() {
+    const img = this.$state.img();
+    if (!img) return;
+    new EventsController(img).add("load", this.#onLoad.bind(this)).add("error", this.#onError.bind(this));
+    if (img.complete) this.#onLoad();
+  }
+  #prevSrc = "";
+  #watchSrc() {
+    const { poster: defaultPoster } = this.#media.$props, { canLoadPoster, providedPoster, inferredPoster } = this.#media.$state;
+    const src = this.$props.src() || "", poster = src || defaultPoster() || inferredPoster();
+    if (this.#prevSrc === providedPoster()) {
+      providedPoster.set(src);
+    }
+    this.$state.src.set(canLoadPoster() && poster.length ? poster : null);
+    this.#prevSrc = src;
+  }
+  #watchAlt() {
+    const { src } = this.$props, { alt } = this.$state, { poster } = this.#media.$state;
+    alt.set(src() || poster() ? this.$props.alt() : null);
+  }
+  #watchCrossOrigin() {
+    const { crossOrigin: crossOriginProp } = this.$props, { crossOrigin: crossOriginState } = this.$state, { crossOrigin: mediaCrossOrigin, poster: src } = this.#media.$state, crossOrigin = crossOriginProp() !== null ? crossOriginProp() : mediaCrossOrigin();
+    crossOriginState.set(
+      /ytimg\.com|vimeo/.test(src() || "") ? null : crossOrigin === true ? "anonymous" : crossOrigin
+    );
+  }
+  #onLoadStart() {
+    const { loading, error } = this.$state, { canLoadPoster, poster } = this.#media.$state;
+    loading.set(canLoadPoster() && !!poster());
+    error.set(null);
+  }
+  #onLoad() {
+    const { loading, error } = this.$state;
+    loading.set(false);
+    error.set(null);
+  }
+  #onError(event) {
+    const { loading, error } = this.$state;
+    loading.set(false);
+    error.set(event);
+  }
+}
+
+export { Poster };

package/dev/chunks/vidstack-zG6PIeGg.js

@@ -0,0 +1,66 @@
+import { isNull, isString, deferredPromise, isBoolean } from './vidstack-Bu2kfzUd.js';
+import { isAudioSrc, isVideoSrc } from './vidstack-CjhKISI0.js';
+
+function appendParamsToURL(baseUrl, params) {
+  const url = new URL(baseUrl);
+  for (const key of Object.keys(params)) {
+    url.searchParams.set(key, params[key] + "");
+  }
+  return url.toString();
+}
+function preconnect(url, rel = "preconnect") {
+  const exists = document.querySelector(`link[href="${url}"]`);
+  if (!isNull(exists)) return true;
+  const link = document.createElement("link");
+  link.rel = rel;
+  link.href = url;
+  link.crossOrigin = "true";
+  document.head.append(link);
+  return true;
+}
+const pendingRequests = {};
+function loadScript(src) {
+  if (pendingRequests[src]) return pendingRequests[src].promise;
+  const promise = deferredPromise(), exists = document.querySelector(`script[src="${src}"]`);
+  if (!isNull(exists)) {
+    promise.resolve();
+    return promise.promise;
+  }
+  pendingRequests[src] = promise;
+  const script = document.createElement("script");
+  script.src = src;
+  script.onload = () => {
+    promise.resolve();
+    delete pendingRequests[src];
+  };
+  script.onerror = () => {
+    promise.reject();
+    delete pendingRequests[src];
+  };
+  setTimeout(() => document.head.append(script), 0);
+  return promise.promise;
+}
+function getRequestCredentials(crossOrigin) {
+  return crossOrigin === "use-credentials" ? "include" : isString(crossOrigin) ? "same-origin" : void 0;
+}
+function getDownloadFile({
+  title,
+  src,
+  download
+}) {
+  const url = isBoolean(download) || download === "" ? src.src : isString(download) ? download : download?.url;
+  if (!isValidFileDownload({ url, src, download })) return null;
+  return {
+    url,
+    name: !isBoolean(download) && !isString(download) && download?.filename || title.toLowerCase() || "media"
+  };
+}
+function isValidFileDownload({
+  url,
+  src,
+  download
+}) {
+  return isString(url) && (download && download !== true || isAudioSrc(src) || isVideoSrc(src));
+}
+
+export { appendParamsToURL, getDownloadFile, getRequestCredentials, loadScript, preconnect };

package/dev/define/plyr-layout.js

@@ -0,0 +1,51 @@
+import { defineCustomElement } from '../chunks/vidstack-Bu2kfzUd.js';
+import { MediaPlayButtonElement, MediaMuteButtonElement, MediaCaptionButtonElement, MediaPIPButtonElement, MediaFullscreenButtonElement, MediaSeekButtonElement, MediaAirPlayButtonElement, MediaLiveButtonElement, MediaVolumeSliderElement, MediaTimeSliderElement, MediaSliderPreviewElement, MediaSliderThumbnailElement, MediaSliderValueElement, MediaMenuElement, MediaMenuButtonElement, MediaMenuItemsElement, MediaMenuItemElement, MediaAudioRadioGroupElement, MediaCaptionsRadioGroupElement, MediaSpeedRadioGroupElement, MediaQualityRadioGroupElement, MediaRadioElement, MediaTimeElement, MediaThumbnailElement } from '../chunks/vidstack-Bt8MP2DK.js';
+import { MediaPlyrLayoutElement } from './templates/plyr-layout.js';
+import { MediaPosterElement } from '../chunks/vidstack-DGDvUbvO.js';
+import '../chunks/vidstack-C-ffXlSV.js';
+import '../chunks/vidstack-DFImIcIL.js';
+import '../chunks/vidstack-C_l97D5j.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-igYn0Apa.js';
+import '../chunks/vidstack-zG6PIeGg.js';
+import '../chunks/vidstack-CjhKISI0.js';
+import '../chunks/vidstack-BGB2pa9s.js';
+import '../chunks/vidstack-CofXIJAy.js';
+import '../chunks/vidstack-Dihypf8P.js';
+import '../chunks/vidstack-DbBJlz7I.js';
+import 'lit-html';
+import '../chunks/vidstack-DO0kqA99.js';
+import '../chunks/vidstack-Bcmx8pmK.js';
+import 'lit-html/directives/if-defined.js';
+import 'lit-html/directives/unsafe-svg.js';
+import 'lit-html/async-directive.js';
+import '../chunks/vidstack-CwTj4H1w.js';
+import 'lit-html/directives/unsafe-html.js';
+import '../chunks/vidstack-rB-wqXw1.js';
+
+defineCustomElement(MediaPlyrLayoutElement);
+defineCustomElement(MediaPosterElement);
+defineCustomElement(MediaPlayButtonElement);
+defineCustomElement(MediaMuteButtonElement);
+defineCustomElement(MediaCaptionButtonElement);
+defineCustomElement(MediaPIPButtonElement);
+defineCustomElement(MediaFullscreenButtonElement);
+defineCustomElement(MediaSeekButtonElement);
+defineCustomElement(MediaAirPlayButtonElement);
+defineCustomElement(MediaLiveButtonElement);
+defineCustomElement(MediaVolumeSliderElement);
+defineCustomElement(MediaTimeSliderElement);
+defineCustomElement(MediaSliderPreviewElement);
+defineCustomElement(MediaSliderThumbnailElement);
+defineCustomElement(MediaSliderValueElement);
+defineCustomElement(MediaMenuElement);
+defineCustomElement(MediaMenuButtonElement);
+defineCustomElement(MediaMenuItemsElement);
+defineCustomElement(MediaMenuItemElement);
+defineCustomElement(MediaAudioRadioGroupElement);
+defineCustomElement(MediaCaptionsRadioGroupElement);
+defineCustomElement(MediaSpeedRadioGroupElement);
+defineCustomElement(MediaQualityRadioGroupElement);
+defineCustomElement(MediaRadioElement);
+defineCustomElement(MediaTimeElement);
+defineCustomElement(MediaThumbnailElement);