@hanifhan1f/vidstack 1.12.33 → 1.12.35

package/prod/chunks/vidstack-BP49Gz0m.js

@@ -1,58 +0,0 @@
-import { listenEvent, scoped, isString, getScope } from './vidstack-BNpgCJJ1.js';
-
-function findActiveCue(cues, time) {
-  for (let i = 0, len = cues.length; i < len; i++) {
-    if (isCueActive(cues[i], time)) return cues[i];
-  }
-  return null;
-}
-function isCueActive(cue, time) {
-  return time >= cue.startTime && time < cue.endTime;
-}
-function watchActiveTextTrack(tracks, kind, onChange) {
-  let currentTrack = null, scope = getScope();
-  function onModeChange() {
-    const kinds = isString(kind) ? [kind] : kind, track = tracks.toArray().find((track2) => kinds.includes(track2.kind) && track2.mode === "showing");
-    if (track === currentTrack) return;
-    if (!track) {
-      onChange(null);
-      currentTrack = null;
-      return;
-    }
-    if (track.readyState == 2) {
-      onChange(track);
-    } else {
-      onChange(null);
-      scoped(() => {
-        const off = listenEvent(
-          track,
-          "load",
-          () => {
-            onChange(track);
-            off();
-          },
-          { once: true }
-        );
-      }, scope);
-    }
-    currentTrack = track;
-  }
-  onModeChange();
-  return listenEvent(tracks, "mode-change", onModeChange);
-}
-function watchCueTextChange(tracks, kind, callback) {
-  watchActiveTextTrack(tracks, kind, (track) => {
-    if (!track) {
-      callback("");
-      return;
-    }
-    const onCueChange = () => {
-      const activeCue = track?.activeCues[0];
-      callback(activeCue?.text || "");
-    };
-    onCueChange();
-    listenEvent(track, "cue-change", onCueChange);
-  });
-}
-
-export { findActiveCue, isCueActive, watchActiveTextTrack, watchCueTextChange };

package/prod/chunks/vidstack-BRZe2BNi.js

@@ -1,107 +0,0 @@
-import { Component, State, effect, isNull, setAttribute, EventsController } from './vidstack-BNpgCJJ1.js';
-import { useMediaContext } from './vidstack-tt3O1zL6.js';
-import { preconnect } from './vidstack-V1jwkH0s.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/prod/chunks/vidstack-BRnfTkxi.js

@@ -1,297 +0,0 @@
-import { Host, effect, Component, signal, setAttribute, isBoolean, computed, isString, useState } from './vidstack-BNpgCJJ1.js';
-import { Captions, Gesture, MediaAnnouncer, Controls, ControlsGroup, GoogleCastButton, ToggleButton, Tooltip, TooltipTrigger, TooltipContent, ChaptersRadioGroup, AudioGainRadioGroup, RadioGroup, SliderVideo, AudioGainSlider, SpeedSlider, QualitySlider, SliderChapters } from './vidstack-kdaDngIm.js';
-import { useMediaContext } from './vidstack-tt3O1zL6.js';
-import { watchCueTextChange } from './vidstack-BP49Gz0m.js';
-import { html } from 'lit-html';
-import { requestScopedAnimationFrame, isHTMLElement, cloneTemplateContent, createTemplate, cloneTemplate } from './vidstack-DB9WDRL5.js';
-import { LitElement } from './vidstack-CwTj4H1w.js';
-import { MenuPortal, Slider, sliderState } from './vidstack-BexQYZop.js';
-import { renderMenuItemsTemplate } from './vidstack-ShUhyBfI.js';
-
-class MediaCaptionsElement extends Host(HTMLElement, Captions) {
-  static tagName = "media-captions";
-}
-
-class MediaGestureElement extends Host(HTMLElement, Gesture) {
-  static tagName = "media-gesture";
-}
-
-class MediaAnnouncerElement extends Host(HTMLElement, MediaAnnouncer) {
-  static tagName = "media-announcer";
-}
-
-class MediaControlsElement extends Host(HTMLElement, Controls) {
-  static tagName = "media-controls";
-}
-
-class MediaControlsGroupElement extends Host(HTMLElement, ControlsGroup) {
-  static tagName = "media-controls-group";
-}
-
-class Title extends Component {
-}
-class MediaTitleElement extends Host(HTMLElement, Title) {
-  static tagName = "media-title";
-  #media;
-  onSetup() {
-    this.#media = useMediaContext();
-  }
-  onConnect() {
-    effect(this.#watchTitle.bind(this));
-  }
-  #watchTitle() {
-    const { title } = this.#media.$state;
-    this.textContent = title();
-  }
-}
-
-class ChapterTitle extends Component {
-  static props = {
-    defaultText: ""
-  };
-}
-class MediaChapterTitleElement extends Host(HTMLElement, ChapterTitle) {
-  static tagName = "media-chapter-title";
-  #media;
-  #chapterTitle;
-  onSetup() {
-    this.#media = useMediaContext();
-    this.#chapterTitle = signal("");
-  }
-  onConnect() {
-    const tracks = this.#media.textTracks;
-    watchCueTextChange(tracks, "chapters", this.#chapterTitle.set);
-    effect(this.#watchChapterTitle.bind(this));
-  }
-  #watchChapterTitle() {
-    const { defaultText } = this.$props;
-    this.textContent = this.#chapterTitle() || defaultText();
-  }
-}
-
-class Spinner extends Component {
-  static props = {
-    size: 96,
-    trackWidth: 8,
-    fillPercent: 50
-  };
-  onConnect(el) {
-    requestScopedAnimationFrame(() => {
-      if (!this.connectScope) return;
-      const root = el.querySelector("svg"), track = root.firstElementChild, trackFill = track.nextElementSibling;
-      effect(this.#update.bind(this, root, track, trackFill));
-    });
-  }
-  #update(root, track, trackFill) {
-    const { size, trackWidth, fillPercent } = this.$props;
-    setAttribute(root, "width", size());
-    setAttribute(root, "height", size());
-    setAttribute(track, "stroke-width", trackWidth());
-    setAttribute(trackFill, "stroke-width", trackWidth());
-    setAttribute(trackFill, "stroke-dashoffset", 100 - fillPercent());
-  }
-}
-class MediaSpinnerElement extends Host(LitElement, Spinner) {
-  static tagName = "media-spinner";
-  render() {
-    return html`
-      <svg fill="none" viewBox="0 0 120 120" aria-hidden="true" data-part="root">
-        <circle cx="60" cy="60" r="54" stroke="currentColor" data-part="track"></circle>
-        <circle
-          cx="60"
-          cy="60"
-          r="54"
-          stroke="currentColor"
-          pathLength="100"
-          stroke-dasharray="100"
-          data-part="track-fill"
-        ></circle>
-      </svg>
-    `;
-  }
-}
-
-class MediaLayout extends Component {
-  static props = {
-    when: false
-  };
-}
-class MediaLayoutElement extends Host(HTMLElement, MediaLayout) {
-  static tagName = "media-layout";
-  #media;
-  onSetup() {
-    this.#media = useMediaContext();
-  }
-  onConnect() {
-    effect(this.#watchWhen.bind(this));
-  }
-  #watchWhen() {
-    const root = this.firstElementChild, isTemplate = root?.localName === "template", when = this.$props.when(), matches = isBoolean(when) ? when : computed(() => when(this.#media.player.state))();
-    if (!matches) {
-      if (isTemplate) {
-        this.textContent = "";
-        this.appendChild(root);
-      } else if (isHTMLElement(root)) {
-        root.style.display = "none";
-      }
-      return;
-    }
-    if (isTemplate) {
-      this.append(root.content.cloneNode(true));
-    } else if (isHTMLElement(root)) {
-      root.style.display = "";
-    }
-  }
-}
-
-class MediaGoogleCastButtonElement extends Host(HTMLElement, GoogleCastButton) {
-  static tagName = "media-google-cast-button";
-}
-
-class MediaToggleButtonElement extends Host(HTMLElement, ToggleButton) {
-  static tagName = "media-toggle-button";
-}
-
-class MediaTooltipElement extends Host(HTMLElement, Tooltip) {
-  static tagName = "media-tooltip";
-}
-
-class MediaTooltipTriggerElement extends Host(HTMLElement, TooltipTrigger) {
-  static tagName = "media-tooltip-trigger";
-  onConnect() {
-    this.style.display = "contents";
-  }
-}
-
-class MediaTooltipContentElement extends Host(HTMLElement, TooltipContent) {
-  static tagName = "media-tooltip-content";
-}
-
-class MediaMenuPortalElement extends Host(HTMLElement, MenuPortal) {
-  static tagName = "media-menu-portal";
-  static attrs = {
-    disabled: {
-      converter(value) {
-        if (isString(value)) return value;
-        return value !== null;
-      }
-    }
-  };
-}
-
-class MediaChaptersRadioGroupElement extends Host(HTMLElement, ChaptersRadioGroup) {
-  static tagName = "media-chapters-radio-group";
-  onConnect() {
-    renderMenuItemsTemplate(this, (el, option) => {
-      const { cue, startTime, duration } = option, thumbnailEl = el.querySelector(".vds-thumbnail,media-thumbnail"), startEl = el.querySelector('[data-part="start-time"]'), durationEl = el.querySelector('[data-part="duration"]');
-      if (startEl) startEl.textContent = startTime;
-      if (durationEl) durationEl.textContent = duration;
-      if (thumbnailEl) {
-        thumbnailEl.setAttribute("time", cue.startTime + "");
-        effect(() => {
-          const thumbnails = this.$props.thumbnails();
-          if ("src" in thumbnailEl) {
-            thumbnailEl.src = thumbnails;
-          } else if (isString(thumbnails)) {
-            thumbnailEl.setAttribute("src", thumbnails);
-          }
-        });
-      }
-    });
-  }
-}
-
-class MediaAudioGainRadioGroupElement extends Host(HTMLElement, AudioGainRadioGroup) {
-  static tagName = "media-audio-gain-radio-group";
-  onConnect() {
-    renderMenuItemsTemplate(this);
-  }
-}
-
-class MediaRadioGroupElement extends Host(HTMLElement, RadioGroup) {
-  static tagName = "media-radio-group";
-}
-
-class MediaSliderElement extends Host(HTMLElement, Slider) {
-  static tagName = "media-slider";
-}
-
-const videoTemplate = /* @__PURE__ */ createTemplate(
-  `<video muted playsinline preload="none" style="max-width: unset;"></video>`
-);
-class MediaSliderVideoElement extends Host(HTMLElement, SliderVideo) {
-  static tagName = "media-slider-video";
-  #media;
-  #video = this.#createVideo();
-  onSetup() {
-    this.#media = useMediaContext();
-    this.$state.video.set(this.#video);
-  }
-  onConnect() {
-    const { canLoad } = this.#media.$state, { src, crossOrigin } = this.$state;
-    if (this.#video.parentNode !== this) {
-      this.prepend(this.#video);
-    }
-    effect(() => {
-      setAttribute(this.#video, "crossorigin", crossOrigin());
-      setAttribute(this.#video, "preload", canLoad() ? "auto" : "none");
-      setAttribute(this.#video, "src", src());
-    });
-  }
-  #createVideo() {
-    return cloneTemplateContent(videoTemplate);
-  }
-}
-
-class MediaAudioGainSliderElement extends Host(HTMLElement, AudioGainSlider) {
-  static tagName = "media-audio-gain-slider";
-}
-
-class MediaSpeedSliderElement extends Host(HTMLElement, SpeedSlider) {
-  static tagName = "media-speed-slider";
-}
-
-class MediaQualitySliderElement extends Host(HTMLElement, QualitySlider) {
-  static tagName = "media-quality-slider";
-}
-
-class MediaSliderChaptersElement extends Host(HTMLElement, SliderChapters) {
-  static tagName = "media-slider-chapters";
-  #template = null;
-  onConnect() {
-    requestScopedAnimationFrame(() => {
-      if (!this.connectScope) return;
-      const template = this.querySelector("template");
-      if (template) {
-        this.#template = template;
-        effect(this.#renderTemplate.bind(this));
-      }
-    });
-  }
-  #renderTemplate() {
-    if (!this.#template) return;
-    const elements = cloneTemplate(this.#template, this.cues.length || 1);
-    this.setRefs(elements);
-  }
-}
-
-class SliderSteps extends Component {
-}
-class MediaSliderStepsElement extends Host(HTMLElement, SliderSteps) {
-  static tagName = "media-slider-steps";
-  #template = null;
-  onConnect(el) {
-    requestScopedAnimationFrame(() => {
-      if (!this.connectScope) return;
-      this.#template = el.querySelector("template");
-      if (this.#template) effect(this.#render.bind(this));
-    });
-  }
-  #render() {
-    if (!this.#template) return;
-    const { min, max, step } = useState(sliderState), steps = (max() - min()) / step();
-    cloneTemplate(this.#template, Math.floor(steps) + 1);
-  }
-}
-
-export { MediaAnnouncerElement, MediaAudioGainRadioGroupElement, MediaAudioGainSliderElement, MediaCaptionsElement, MediaChapterTitleElement, MediaChaptersRadioGroupElement, MediaControlsElement, MediaControlsGroupElement, MediaGestureElement, MediaGoogleCastButtonElement, MediaLayoutElement, MediaMenuPortalElement, MediaQualitySliderElement, MediaRadioGroupElement, MediaSliderChaptersElement, MediaSliderElement, MediaSliderStepsElement, MediaSliderVideoElement, MediaSpeedSliderElement, MediaSpinnerElement, MediaTitleElement, MediaToggleButtonElement, MediaTooltipContentElement, MediaTooltipElement, MediaTooltipTriggerElement };

package/prod/chunks/vidstack-BaaRY-9x.js

@@ -1,201 +0,0 @@
-import { Host, effect, setAttribute, isString, useState, BOOLEAN } from './vidstack-BNpgCJJ1.js';
-import { Thumbnail, Time, AirPlayButton, CaptionButton, FullscreenButton, LiveButton, MuteButton, PIPButton, PlayButton, SeekButton, AudioRadioGroup, CaptionsRadioGroup, Menu, MenuButton, MenuItem, MenuItems, SpeedRadioGroup, QualityRadioGroup, Radio, Slider, SliderValue, TimeSlider, SliderPreview, VolumeSlider } from './vidstack-DcMkaIHJ.js';
-import { cloneTemplateContent, createTemplate, requestScopedAnimationFrame, cloneTemplate } from './vidstack-DB9WDRL5.js';
-import { useMediaContext } from './vidstack-tt3O1zL6.js';
-
-const imgTemplate = /* @__PURE__ */ createTemplate(
-  '<img loading="eager" decoding="async" aria-hidden="true">'
-);
-class MediaThumbnailElement extends Host(HTMLElement, Thumbnail) {
-  static tagName = "media-thumbnail";
-  static attrs = {
-    crossOrigin: "crossorigin"
-  };
-  #media;
-  #img = this.#createImg();
-  onSetup() {
-    this.#media = useMediaContext();
-    this.$state.img.set(this.#img);
-  }
-  onConnect() {
-    const { src, crossOrigin } = this.$state;
-    if (this.#img.parentNode !== this) {
-      this.prepend(this.#img);
-    }
-    effect(() => {
-      setAttribute(this.#img, "src", src());
-      setAttribute(this.#img, "crossorigin", crossOrigin());
-    });
-  }
-  #createImg() {
-    return cloneTemplateContent(imgTemplate);
-  }
-}
-
-class MediaTimeElement extends Host(HTMLElement, Time) {
-  static tagName = "media-time";
-  onConnect() {
-    effect(() => {
-      this.textContent = this.$state.timeText();
-    });
-  }
-}
-
-class MediaAirPlayButtonElement extends Host(HTMLElement, AirPlayButton) {
-  static tagName = "media-airplay-button";
-}
-
-class MediaCaptionButtonElement extends Host(HTMLElement, CaptionButton) {
-  static tagName = "media-caption-button";
-}
-
-class MediaFullscreenButtonElement extends Host(HTMLElement, FullscreenButton) {
-  static tagName = "media-fullscreen-button";
-}
-
-class MediaLiveButtonElement extends Host(HTMLElement, LiveButton) {
-  static tagName = "media-live-button";
-}
-
-class MediaMuteButtonElement extends Host(HTMLElement, MuteButton) {
-  static tagName = "media-mute-button";
-}
-
-class MediaPIPButtonElement extends Host(HTMLElement, PIPButton) {
-  static tagName = "media-pip-button";
-}
-
-class MediaPlayButtonElement extends Host(HTMLElement, PlayButton) {
-  static tagName = "media-play-button";
-}
-
-class MediaSeekButtonElement extends Host(HTMLElement, SeekButton) {
-  static tagName = "media-seek-button";
-}
-
-function renderMenuItemsTemplate(el, onCreate) {
-  requestScopedAnimationFrame(() => {
-    if (!el.connectScope) return;
-    const template = el.querySelector("template");
-    if (!template) return;
-    effect(() => {
-      const options = el.getOptions();
-      cloneTemplate(template, options.length, (radio, i) => {
-        const { label, value } = options[i], labelEl = radio.querySelector(`[data-part="label"]`);
-        radio.setAttribute("value", value);
-        if (labelEl) {
-          if (isString(label)) {
-            labelEl.textContent = label;
-          } else {
-            effect(() => {
-              labelEl.textContent = label();
-            });
-          }
-        }
-        onCreate?.(radio, options[i], i);
-      });
-    });
-  });
-}
-
-class MediaAudioRadioGroupElement extends Host(HTMLElement, AudioRadioGroup) {
-  static tagName = "media-audio-radio-group";
-  onConnect() {
-    renderMenuItemsTemplate(this);
-  }
-}
-
-class MediaCaptionsRadioGroupElement extends Host(HTMLElement, CaptionsRadioGroup) {
-  static tagName = "media-captions-radio-group";
-  onConnect() {
-    renderMenuItemsTemplate(this);
-  }
-}
-
-class MediaMenuElement extends Host(HTMLElement, Menu) {
-  static tagName = "media-menu";
-}
-
-class MediaMenuButtonElement extends Host(HTMLElement, MenuButton) {
-  static tagName = "media-menu-button";
-}
-
-class MediaMenuItemElement extends Host(HTMLElement, MenuItem) {
-  static tagName = "media-menu-item";
-}
-
-class MediaMenuItemsElement extends Host(HTMLElement, MenuItems) {
-  static tagName = "media-menu-items";
-}
-
-class MediaSpeedRadioGroupElement extends Host(HTMLElement, SpeedRadioGroup) {
-  static tagName = "media-speed-radio-group";
-  onConnect() {
-    renderMenuItemsTemplate(this);
-  }
-}
-
-class MediaQualityRadioGroupElement extends Host(HTMLElement, QualityRadioGroup) {
-  static tagName = "media-quality-radio-group";
-  onConnect() {
-    renderMenuItemsTemplate(this, (el, option) => {
-      const bitrate = option.bitrate, bitrateEl = el.querySelector('[data-part="bitrate"]');
-      if (bitrate && bitrateEl) {
-        effect(() => {
-          bitrateEl.textContent = bitrate() || "";
-        });
-      }
-    });
-  }
-}
-
-class MediaRadioElement extends Host(HTMLElement, Radio) {
-  static tagName = "media-radio";
-}
-
-class MediaSliderThumbnailElement extends MediaThumbnailElement {
-  static tagName = "media-slider-thumbnail";
-  #media;
-  #slider;
-  onSetup() {
-    super.onSetup();
-    this.#media = useMediaContext();
-    this.#slider = useState(Slider.state);
-  }
-  onConnect() {
-    super.onConnect();
-    effect(this.#watchTime.bind(this));
-  }
-  #watchTime() {
-    const { duration, clipStartTime } = this.#media.$state;
-    this.time = clipStartTime() + this.#slider.pointerRate() * duration();
-  }
-}
-
-class MediaSliderValueElement extends Host(HTMLElement, SliderValue) {
-  static tagName = "media-slider-value";
-  static attrs = {
-    padMinutes: {
-      converter: BOOLEAN
-    }
-  };
-  onConnect() {
-    effect(() => {
-      this.textContent = this.getValueText();
-    });
-  }
-}
-
-class MediaTimeSliderElement extends Host(HTMLElement, TimeSlider) {
-  static tagName = "media-time-slider";
-}
-
-class MediaSliderPreviewElement extends Host(HTMLElement, SliderPreview) {
-  static tagName = "media-slider-preview";
-}
-
-class MediaVolumeSliderElement extends Host(HTMLElement, VolumeSlider) {
-  static tagName = "media-volume-slider";
-}
-
-export { MediaAirPlayButtonElement, MediaAudioRadioGroupElement, MediaCaptionButtonElement, MediaCaptionsRadioGroupElement, MediaFullscreenButtonElement, MediaLiveButtonElement, MediaMenuButtonElement, MediaMenuElement, MediaMenuItemElement, MediaMenuItemsElement, MediaMuteButtonElement, MediaPIPButtonElement, MediaPlayButtonElement, MediaQualityRadioGroupElement, MediaRadioElement, MediaSeekButtonElement, MediaSliderPreviewElement, MediaSliderThumbnailElement, MediaSliderValueElement, MediaSpeedRadioGroupElement, MediaThumbnailElement, MediaTimeElement, MediaTimeSliderElement, MediaVolumeSliderElement, renderMenuItemsTemplate };