@locpd/vidstack 1.12.14

package/dev/define/templates/vidstack-audio-layout.js

@@ -0,0 +1,167 @@
+import { signal, effect, toggleClass, Host, listenEvent } from '../../chunks/vidstack-Bu2kfzUd.js';
+import { DefaultLayout, DefaultAnnouncer, DefaultCaptions, DefaultSeekButton, DefaultPlayButton, DefaultTimeSlider, DefaultTimeInvert, DefaultVolumePopup, DefaultCaptionButton, DefaultDownloadButton, DefaultAirPlayButton, DefaultChaptersMenu, DefaultSettingsMenu, useDefaultLayoutContext, DefaultControlsSpacer, i18n, DefaultChapterTitle, setLayoutName, createMenuContainer, DefaultLayoutIconsLoader } from '../../chunks/vidstack-DlAhl87f.js';
+import { useMediaContext, useMediaState } from '../../chunks/vidstack-DFImIcIL.js';
+import { useTransitionActive, useResizeObserver, isHTMLElement } from '../../chunks/vidstack-C_l97D5j.js';
+import { $signal, SlotManager } from '../../chunks/vidstack-Bcmx8pmK.js';
+import { LitElement } from '../../chunks/vidstack-CwTj4H1w.js';
+import { html } from 'lit-html';
+import { ref } from 'lit-html/directives/ref.js';
+import '../../chunks/vidstack-BGB2pa9s.js';
+import 'lit-html/directives/if-defined.js';
+import '../../chunks/vidstack-zG6PIeGg.js';
+import '../../chunks/vidstack-CjhKISI0.js';
+import '@floating-ui/dom';
+import 'lit-html/directives/unsafe-svg.js';
+import 'lit-html/async-directive.js';
+
+let DefaultAudioLayout$1 = class DefaultAudioLayout extends DefaultLayout {
+  static props = {
+    ...super.props,
+    when: ({ viewType }) => viewType === "audio",
+    smallWhen: ({ width }) => width < 576
+  };
+};
+
+function DefaultAudioLayout() {
+  return [
+    DefaultAnnouncer(),
+    DefaultCaptions(),
+    html`
+      <media-controls class="vds-controls">
+        <media-controls-group class="vds-controls-group">
+          ${[
+      DefaultSeekButton({ backward: true, tooltip: "top start" }),
+      DefaultPlayButton({ tooltip: "top" }),
+      DefaultSeekButton({ tooltip: "top" }),
+      DefaultAudioTitle(),
+      DefaultTimeSlider(),
+      DefaultTimeInvert(),
+      DefaultVolumePopup({ orientation: "vertical", tooltip: "top" }),
+      DefaultCaptionButton({ tooltip: "top" }),
+      DefaultDownloadButton(),
+      DefaultAirPlayButton({ tooltip: "top" }),
+      DefaultAudioMenus()
+    ]}
+        </media-controls-group>
+      </media-controls>
+    `
+  ];
+}
+function DefaultAudioTitle() {
+  return $signal(() => {
+    let $ref = signal(void 0), $isTextOverflowing = signal(false), media = useMediaContext(), { title, started, currentTime, ended } = useMediaState(), { translations } = useDefaultLayoutContext(), $isTransitionActive = useTransitionActive($ref), $isContinued = () => started() || currentTime() > 0;
+    const $title = () => {
+      const word = ended() ? "Replay" : $isContinued() ? "Continue" : "Play";
+      return `${i18n(translations, word)}: ${title()}`;
+    };
+    effect(() => {
+      if ($isTransitionActive() && document.activeElement === document.body) {
+        media.player.el?.focus({ preventScroll: true });
+      }
+    });
+    function onResize() {
+      const el = $ref(), isOverflowing = !!el && !$isTransitionActive() && el.clientWidth < el.children[0].clientWidth;
+      el && toggleClass(el, "vds-marquee", isOverflowing);
+      $isTextOverflowing.set(isOverflowing);
+    }
+    function Title() {
+      return html`
+        <span class="vds-title-text">
+          ${$signal($title)}${$signal(() => $isContinued() ? DefaultChapterTitle() : null)}
+        </span>
+      `;
+    }
+    useResizeObserver($ref, onResize);
+    return title() ? html`
+          <span class="vds-title" title=${$signal($title)} ${ref($ref.set)}>
+            ${[
+      Title(),
+      $signal(() => $isTextOverflowing() && !$isTransitionActive() ? Title() : null)
+    ]}
+          </span>
+        ` : DefaultControlsSpacer();
+  });
+}
+function DefaultAudioMenus() {
+  const placement = "top end";
+  return [
+    DefaultChaptersMenu({ tooltip: "top", placement, portal: true }),
+    DefaultSettingsMenu({ tooltip: "top end", placement, portal: true })
+  ];
+}
+
+class MediaAudioLayoutElement extends Host(LitElement, DefaultAudioLayout$1) {
+  static tagName = "media-audio-layout";
+  static attrs = {
+    smallWhen: {
+      converter(value) {
+        return value !== "never" && !!value;
+      }
+    }
+  };
+  #media;
+  #scrubbing = signal(false);
+  onSetup() {
+    this.forwardKeepAlive = false;
+    this.#media = useMediaContext();
+    this.classList.add("vds-audio-layout");
+    this.#setupWatchScrubbing();
+  }
+  onConnect() {
+    setLayoutName("audio", () => this.isMatch);
+    this.#setupMenuContainer();
+  }
+  render() {
+    return $signal(this.#render.bind(this));
+  }
+  #render() {
+    return this.isMatch ? DefaultAudioLayout() : null;
+  }
+  #setupMenuContainer() {
+    const { menuPortal } = useDefaultLayoutContext();
+    effect(() => {
+      if (!this.isMatch) return;
+      const container = createMenuContainer(
+        this,
+        this.menuContainer,
+        "vds-audio-layout",
+        () => this.isSmallLayout
+      ), roots = container ? [this, container] : [this];
+      const iconsManager = this.$props.customIcons() ? new SlotManager(roots) : new DefaultLayoutIconsLoader(roots);
+      iconsManager.connect();
+      menuPortal.set(container);
+      return () => {
+        container.remove();
+        menuPortal.set(null);
+      };
+    });
+  }
+  #setupWatchScrubbing() {
+    const { pointer } = this.#media.$state;
+    effect(() => {
+      if (pointer() !== "coarse") return;
+      effect(this.#watchScrubbing.bind(this));
+    });
+  }
+  #watchScrubbing() {
+    if (!this.#scrubbing()) {
+      listenEvent(this, "pointerdown", this.#onStartScrubbing.bind(this), { capture: true });
+      return;
+    }
+    listenEvent(this, "pointerdown", (e) => e.stopPropagation());
+    listenEvent(window, "pointerdown", this.#onStopScrubbing.bind(this));
+  }
+  #onStartScrubbing(event) {
+    const { target } = event, hasTimeSlider = !!(isHTMLElement(target) && target.closest(".vds-time-slider"));
+    if (!hasTimeSlider) return;
+    event.stopImmediatePropagation();
+    this.setAttribute("data-scrubbing", "");
+    this.#scrubbing.set(true);
+  }
+  #onStopScrubbing() {
+    this.#scrubbing.set(false);
+    this.removeAttribute("data-scrubbing");
+  }
+}
+
+export { MediaAudioLayoutElement };

package/dev/define/templates/vidstack-video-layout.js

@@ -0,0 +1,390 @@
+import { computed, signal, effect, camelToKebabCase, unwrap, isFunction, Host } from '../../chunks/vidstack-Bu2kfzUd.js';
+import { DefaultLayout, useDefaultLayoutContext, $i18n, IconSlot, MenuPortal, DefaultPlayButton, DefaultAnnouncer, DefaultCaptions, DefaultAirPlayButton, DefaultControlsSpacer, DefaultDownloadButton, DefaultVolumePopup, DefaultTimeInfo, DefaultTitle, DefaultFullscreenButton, DefaultTimeSlider, DefaultSeekButton, DefaultPIPButton, DefaultChaptersMenu, DefaultSettingsMenu, setLayoutName, createMenuContainer, DefaultLayoutIconsLoader } from '../../chunks/vidstack-DlAhl87f.js';
+import { useMediaContext, useMediaState } from '../../chunks/vidstack-DFImIcIL.js';
+import { $signal, SlotManager } from '../../chunks/vidstack-Bcmx8pmK.js';
+import { LitElement } from '../../chunks/vidstack-CwTj4H1w.js';
+import { html } from 'lit-html';
+import { keyed } from 'lit-html/directives/keyed.js';
+import { createSlot } from '../../chunks/vidstack-C_l97D5j.js';
+import '../../chunks/vidstack-BGB2pa9s.js';
+import 'lit-html/directives/if-defined.js';
+import 'lit-html/directives/ref.js';
+import '../../chunks/vidstack-zG6PIeGg.js';
+import '../../chunks/vidstack-CjhKISI0.js';
+import 'lit-html/directives/unsafe-svg.js';
+import 'lit-html/async-directive.js';
+import '@floating-ui/dom';
+
+class DefaultVideoLayout extends DefaultLayout {
+  static props = {
+    ...super.props,
+    when: ({ viewType }) => viewType === "video",
+    smallWhen: ({ width, height }) => width < 576 || height < 380
+  };
+}
+
+function DefaultKeyboardDisplay() {
+  return $signal(() => {
+    const media = useMediaContext(), { noKeyboardAnimations, userPrefersKeyboardAnimations } = useDefaultLayoutContext(), $disabled = computed(() => noKeyboardAnimations() || !userPrefersKeyboardAnimations());
+    if ($disabled()) {
+      return null;
+    }
+    const visible = signal(false), { lastKeyboardAction } = media.$state;
+    effect(() => {
+      visible.set(!!lastKeyboardAction());
+      const id = setTimeout(() => visible.set(false), 500);
+      return () => {
+        visible.set(false);
+        window.clearTimeout(id);
+      };
+    });
+    const $actionDataAttr = computed(() => {
+      const action = lastKeyboardAction()?.action;
+      return action && visible() ? camelToKebabCase(action) : null;
+    });
+    const $classList = computed(() => `vds-kb-action${!visible() ? " hidden" : ""}`), $text = computed(getText), $iconSlot = computed(() => {
+      const name = getIconName();
+      return name ? createSlot(name) : null;
+    });
+    function Icon() {
+      const $slot = $iconSlot();
+      if (!$slot) return null;
+      return html`
+        <div class="vds-kb-bezel">
+          <div class="vds-kb-icon">${$slot}</div>
+        </div>
+      `;
+    }
+    return html`
+      <div class=${$signal($classList)} data-action=${$signal($actionDataAttr)}>
+        <div class="vds-kb-text-wrapper">
+          <div class="vds-kb-text">${$signal($text)}</div>
+        </div>
+        ${$signal(() => keyed(lastKeyboardAction(), Icon()))}
+      </div>
+    `;
+  });
+}
+function getText() {
+  const { $state } = useMediaContext(), action = $state.lastKeyboardAction()?.action, audioGain = $state.audioGain() ?? 1;
+  switch (action) {
+    case "toggleMuted":
+      return $state.muted() ? "0%" : getVolumeText($state.volume(), audioGain);
+    case "volumeUp":
+    case "volumeDown":
+      return getVolumeText($state.volume(), audioGain);
+    default:
+      return "";
+  }
+}
+function getVolumeText(volume, gain) {
+  return `${Math.round(volume * gain * 100)}%`;
+}
+function getIconName() {
+  const { $state } = useMediaContext(), action = $state.lastKeyboardAction()?.action;
+  switch (action) {
+    case "togglePaused":
+      return !$state.paused() ? "kb-play-icon" : "kb-pause-icon";
+    case "toggleMuted":
+      return $state.muted() || $state.volume() === 0 ? "kb-mute-icon" : $state.volume() >= 0.5 ? "kb-volume-up-icon" : "kb-volume-down-icon";
+    case "toggleFullscreen":
+      return `kb-fs-${$state.fullscreen() ? "enter" : "exit"}-icon`;
+    case "togglePictureInPicture":
+      return `kb-pip-${$state.pictureInPicture() ? "enter" : "exit"}-icon`;
+    case "toggleCaptions":
+      return $state.hasCaptions() ? `kb-cc-${$state.textTrack() ? "on" : "off"}-icon` : null;
+    case "volumeUp":
+      return "kb-volume-up-icon";
+    case "volumeDown":
+      return "kb-volume-down-icon";
+    case "seekForward":
+      return "kb-seek-forward-icon";
+    case "seekBackward":
+      return "kb-seek-backward-icon";
+    default:
+      return null;
+  }
+}
+
+function DefaultCaptionsMenu({
+  placement,
+  portal,
+  tooltip
+}) {
+  return $signal(() => {
+    const {
+      translations,
+      menuPortal,
+      noModal,
+      menuGroup,
+      smallWhen: smWhen
+    } = useDefaultLayoutContext(), { viewType, hasCaptions } = useMediaState(), $offText = $i18n(translations, "Off");
+    if (!hasCaptions()) return null;
+    const $placement = computed(
+      () => noModal() ? unwrap(placement) : !smWhen() ? unwrap(placement) : null
+    ), $offset = computed(
+      () => !smWhen() && menuGroup() === "bottom" && viewType() === "video" ? 26 : 0
+    ), $isOpen = signal(false);
+    function onOpen() {
+      $isOpen.set(true);
+    }
+    function onClose() {
+      $isOpen.set(false);
+    }
+    const items = html`
+      <media-menu-items
+        class="vds-settings-menu-items vds-menu-items"
+        placement=${$signal($placement)}
+        offset=${$signal($offset)}
+      >
+        ${$signal(() => {
+      if (!$isOpen()) {
+        return null;
+      }
+      return html`
+            <media-captions-radio-group
+              class="vds-captions-radio-group vds-radio-group"
+              off-label=${$offText}
+            >
+              <template>
+                <media-radio class="vds-caption-radio vds-radio">
+                  <slot name="menu-radio-check-icon" data-class="vds-icon"></slot>
+                  <span class="vds-radio-label" data-part="label"></span>
+                </media-radio>
+              </template>
+            </media-captions-radio-group>
+          `;
+    })}
+      </media-menu-items>
+    `;
+    return html`
+      <media-menu class="vds-captions-menu vds-menu" @open=${onOpen} @close=${onClose}>
+        <media-tooltip class="vds-tooltip">
+          <media-tooltip-trigger>
+            <media-menu-button
+              class="vds-menu-button vds-button"
+              aria-label=${$i18n(translations, "Captions")}
+            >
+              ${IconSlot("cc-off")}
+            </media-menu-button>
+          </media-tooltip-trigger>
+          <media-tooltip-content
+            class="vds-tooltip-content"
+            placement=${isFunction(tooltip) ? $signal(tooltip) : tooltip}
+          >
+            ${$i18n(translations, "Captions")}
+          </media-tooltip-content>
+        </media-tooltip>
+        ${MenuPortal(menuPortal, items) }
+      </media-menu>
+    `;
+  });
+}
+
+function DefaultVideoLayoutLarge() {
+  return [
+    DefaultAnnouncer(),
+    DefaultVideoGestures(),
+    DefaultBufferingIndicator(),
+    DefaultKeyboardDisplay(),
+    DefaultCaptions(),
+    html`<div class="vds-scrim"></div>`,
+    html`
+      <media-controls class="vds-controls">
+        ${[
+      DefaultControlsGroupTop(),
+      DefaultControlsSpacer(),
+      html`<media-controls-group class="vds-controls-group"></media-controls-group>`,
+      DefaultControlsSpacer(),
+      html`
+            <media-controls-group class="vds-controls-group">
+              ${DefaultTimeSlider()}
+            </media-controls-group>
+          `,
+      html`
+            <media-controls-group class="vds-controls-group">
+              ${[
+        DefaultPlayButton({ tooltip: "top start" }),
+        DefaultSeekButton({ backward: true, tooltip: "top" }),
+        DefaultSeekButton({ backward: false, tooltip: "top" }),
+        DefaultVolumePopup({ orientation: "horizontal", tooltip: "top" }),
+        DefaultTimeInfo(),
+        DefaultTitle(),
+        DefaultBottomMenuGroup(),
+        DefaultAirPlayButton({ tooltip: "top" }),
+        DefaultDownloadButton(),
+        DefaultPIPButton(),
+        DefaultFullscreenButton({ tooltip: "top end" })
+      ]}
+            </media-controls-group>
+          `
+    ]}
+      </media-controls>
+    `
+  ];
+}
+function DefaultBottomMenuGroup() {
+  return $signal(() => {
+    const { menuGroup } = useDefaultLayoutContext();
+    return menuGroup() === "bottom" ? DefaultVideoMenus() : null;
+  });
+}
+function DefaultControlsGroupTop() {
+  return html`
+    <media-controls-group class="vds-controls-group">
+      ${$signal(() => {
+    const { menuGroup } = useDefaultLayoutContext();
+    return menuGroup() === "top" ? [DefaultControlsSpacer(), DefaultVideoMenus()] : null;
+  })}
+    </media-controls-group>
+  `;
+}
+function DefaultVideoLayoutSmall() {
+  return [
+    DefaultAnnouncer(),
+    DefaultVideoGestures(),
+    DefaultBufferingIndicator(),
+    DefaultCaptions(),
+    DefaultKeyboardDisplay(),
+    html`<div class="vds-scrim"></div>`,
+    html`
+      <media-controls class="vds-controls">
+        <media-controls-group class="vds-controls-group">
+          ${[
+      DefaultAirPlayButton({ tooltip: "top start" }),
+      DefaultControlsSpacer(),
+      DefaultDownloadButton(),
+      DefaultVideoMenus(),
+      DefaultVolumePopup({ orientation: "vertical", tooltip: "bottom end" })
+    ]}
+        </media-controls-group>
+
+        ${DefaultControlsSpacer()}
+
+        <media-controls-group class="vds-controls-group" style="pointer-events: none;">
+          ${[
+      DefaultControlsSpacer(),
+      DefaultPlayButton({ tooltip: "top" }),
+      DefaultControlsSpacer()
+    ]}
+        </media-controls-group>
+
+        ${DefaultControlsSpacer()}
+
+        <media-controls-group class="vds-controls-group">
+          ${[DefaultTimeInfo(), DefaultTitle(), DefaultFullscreenButton({ tooltip: "top end" })]}
+        </media-controls-group>
+
+        <media-controls-group class="vds-controls-group">
+          ${DefaultTimeSlider()}
+        </media-controls-group>
+      </media-controls>
+    `,
+    StartDuration()
+  ];
+}
+function DefaultVideoLoadLayout() {
+  return html`
+    <div class="vds-load-container">
+      ${[DefaultBufferingIndicator(), DefaultPlayButton({ tooltip: "top" })]}
+    </div>
+  `;
+}
+function StartDuration() {
+  return $signal(() => {
+    const { duration } = useMediaState();
+    if (duration() === 0) return null;
+    return html`
+      <div class="vds-start-duration">
+        <media-time class="vds-time" type="duration"></media-time>
+      </div>
+    `;
+  });
+}
+function DefaultBufferingIndicator() {
+  return html`
+    <div class="vds-buffering-indicator">
+      <media-spinner class="vds-buffering-spinner"></media-spinner>
+    </div>
+  `;
+}
+function DefaultVideoMenus() {
+  const { menuGroup, smallWhen: smWhen } = useDefaultLayoutContext(), $side = () => menuGroup() === "top" || smWhen() ? "bottom" : "top", $tooltip = computed(() => `${$side()} ${menuGroup() === "top" ? "end" : "center"}`), $placement = computed(() => `${$side()} end`);
+  return [
+    DefaultChaptersMenu({ tooltip: $tooltip, placement: $placement, portal: true }),
+    DefaultCaptionsMenu({ tooltip: $tooltip, placement: $placement, portal: true }),
+    DefaultSettingsMenu({ tooltip: $tooltip, placement: $placement, portal: true })
+  ];
+}
+function DefaultVideoGestures() {
+  return $signal(() => {
+    const { noGestures } = useDefaultLayoutContext();
+    if (noGestures()) return null;
+    return html`
+      <div class="vds-gestures">
+        <media-gesture class="vds-gesture" event="pointerup" action="toggle:paused"></media-gesture>
+        <media-gesture
+          class="vds-gesture"
+          event="pointerup"
+          action="toggle:controls"
+        ></media-gesture>
+        <media-gesture
+          class="vds-gesture"
+          event="dblpointerup"
+          action="toggle:fullscreen"
+        ></media-gesture>
+        <media-gesture class="vds-gesture" event="dblpointerup" action="seek:-10"></media-gesture>
+        <media-gesture class="vds-gesture" event="dblpointerup" action="seek:10"></media-gesture>
+      </div>
+    `;
+  });
+}
+
+class MediaVideoLayoutElement extends Host(LitElement, DefaultVideoLayout) {
+  static tagName = "media-video-layout";
+  static attrs = {
+    smallWhen: {
+      converter(value) {
+        return value !== "never" && !!value;
+      }
+    }
+  };
+  #media;
+  onSetup() {
+    this.forwardKeepAlive = false;
+    this.#media = useMediaContext();
+    this.classList.add("vds-video-layout");
+  }
+  onConnect() {
+    setLayoutName("video", () => this.isMatch);
+    this.#setupMenuContainer();
+  }
+  render() {
+    return $signal(this.#render.bind(this));
+  }
+  #setupMenuContainer() {
+    const { menuPortal } = useDefaultLayoutContext();
+    effect(() => {
+      if (!this.isMatch) return;
+      const container = createMenuContainer(
+        this,
+        this.menuContainer,
+        "vds-video-layout",
+        () => this.isSmallLayout
+      ), roots = container ? [this, container] : [this];
+      const iconsManager = this.$props.customIcons() ? new SlotManager(roots) : new DefaultLayoutIconsLoader(roots);
+      iconsManager.connect();
+      menuPortal.set(container);
+      return () => {
+        container.remove();
+        menuPortal.set(null);
+      };
+    });
+  }
+  #render() {
+    const { load } = this.#media.$props, { canLoad, streamType, nativeControls } = this.#media.$state;
+    return !nativeControls() && this.isMatch ? load() === "play" && !canLoad() ? DefaultVideoLoadLayout() : streamType() === "unknown" ? DefaultBufferingIndicator() : this.isSmallLayout ? DefaultVideoLayoutSmall() : DefaultVideoLayoutLarge() : null;
+  }
+}
+
+export { MediaVideoLayoutElement };

package/dev/define/vidstack-icons.js

@@ -0,0 +1 @@
+import 'media-icons/element';

package/dev/define/vidstack-player-default-layout.js

@@ -0,0 +1,21 @@
+import { defineCustomElement } from '../chunks/vidstack-Bu2kfzUd.js';
+import { MediaAudioLayoutElement } from './templates/vidstack-audio-layout.js';
+import { MediaVideoLayoutElement } from './templates/vidstack-video-layout.js';
+import '../chunks/vidstack-DlAhl87f.js';
+import '../chunks/vidstack-DFImIcIL.js';
+import '../chunks/vidstack-C_l97D5j.js';
+import '@floating-ui/dom';
+import 'lit-html';
+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-BGB2pa9s.js';
+import 'lit-html/directives/ref.js';
+import '../chunks/vidstack-zG6PIeGg.js';
+import '../chunks/vidstack-CjhKISI0.js';
+import '../chunks/vidstack-CwTj4H1w.js';
+import 'lit-html/directives/keyed.js';
+
+defineCustomElement(MediaAudioLayoutElement);
+defineCustomElement(MediaVideoLayoutElement);

package/dev/define/vidstack-player-layouts.js

@@ -0,0 +1,25 @@
+import { defineCustomElement } from '../chunks/vidstack-Bu2kfzUd.js';
+import { MediaAudioLayoutElement } from './templates/vidstack-audio-layout.js';
+import { MediaVideoLayoutElement } from './templates/vidstack-video-layout.js';
+import { MediaPlyrLayoutElement } from './templates/plyr-layout.js';
+import '../chunks/vidstack-DlAhl87f.js';
+import '../chunks/vidstack-DFImIcIL.js';
+import '../chunks/vidstack-C_l97D5j.js';
+import '@floating-ui/dom';
+import 'lit-html';
+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-BGB2pa9s.js';
+import 'lit-html/directives/ref.js';
+import '../chunks/vidstack-zG6PIeGg.js';
+import '../chunks/vidstack-CjhKISI0.js';
+import '../chunks/vidstack-CwTj4H1w.js';
+import 'lit-html/directives/keyed.js';
+import '../chunks/vidstack-DO0kqA99.js';
+import 'lit-html/directives/unsafe-html.js';
+
+defineCustomElement(MediaAudioLayoutElement);
+defineCustomElement(MediaVideoLayoutElement);
+defineCustomElement(MediaPlyrLayoutElement);

package/dev/define/vidstack-player-ui.js

@@ -0,0 +1,70 @@
+import { defineCustomElement } from '../chunks/vidstack-Bu2kfzUd.js';
+import { MediaLayoutElement, MediaControlsElement, MediaControlsGroupElement, MediaAnnouncerElement, MediaTooltipElement, MediaTooltipTriggerElement, MediaTooltipContentElement, MediaGoogleCastButtonElement, MediaToggleButtonElement, MediaSliderElement, MediaAudioGainSliderElement, MediaSpeedSliderElement, MediaQualitySliderElement, MediaSliderChaptersElement, MediaSliderStepsElement, MediaSliderVideoElement, MediaMenuPortalElement, MediaAudioGainRadioGroupElement, MediaChaptersRadioGroupElement, MediaRadioGroupElement, MediaGestureElement, MediaCaptionsElement, MediaTitleElement, MediaChapterTitleElement, MediaSpinnerElement } from '../chunks/vidstack-DajrMUR0.js';
+import { MediaPlayButtonElement, MediaMuteButtonElement, MediaCaptionButtonElement, MediaFullscreenButtonElement, MediaPIPButtonElement, MediaSeekButtonElement, MediaAirPlayButtonElement, MediaVolumeSliderElement, MediaTimeSliderElement, MediaSliderPreviewElement, MediaSliderValueElement, MediaSliderThumbnailElement, MediaMenuElement, MediaMenuButtonElement, MediaMenuItemsElement, MediaMenuItemElement, MediaAudioRadioGroupElement, MediaCaptionsRadioGroupElement, MediaSpeedRadioGroupElement, MediaQualityRadioGroupElement, MediaRadioElement, MediaThumbnailElement, MediaLiveButtonElement, MediaTimeElement } from '../chunks/vidstack-Bt8MP2DK.js';
+import { MediaPosterElement } from '../chunks/vidstack-DGDvUbvO.js';
+import '../chunks/vidstack-BaIbHZE3.js';
+import '../chunks/vidstack-DFImIcIL.js';
+import '../chunks/vidstack-C_l97D5j.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-C-ffXlSV.js';
+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-CwTj4H1w.js';
+import '../chunks/vidstack-rB-wqXw1.js';
+
+defineCustomElement(MediaLayoutElement);
+defineCustomElement(MediaControlsElement);
+defineCustomElement(MediaControlsGroupElement);
+defineCustomElement(MediaPosterElement);
+defineCustomElement(MediaAnnouncerElement);
+defineCustomElement(MediaTooltipElement);
+defineCustomElement(MediaTooltipTriggerElement);
+defineCustomElement(MediaTooltipContentElement);
+defineCustomElement(MediaPlayButtonElement);
+defineCustomElement(MediaMuteButtonElement);
+defineCustomElement(MediaCaptionButtonElement);
+defineCustomElement(MediaFullscreenButtonElement);
+defineCustomElement(MediaPIPButtonElement);
+defineCustomElement(MediaSeekButtonElement);
+defineCustomElement(MediaAirPlayButtonElement);
+defineCustomElement(MediaGoogleCastButtonElement);
+defineCustomElement(MediaToggleButtonElement);
+defineCustomElement(MediaSliderElement);
+defineCustomElement(MediaAudioGainSliderElement);
+defineCustomElement(MediaVolumeSliderElement);
+defineCustomElement(MediaTimeSliderElement);
+defineCustomElement(MediaSpeedSliderElement);
+defineCustomElement(MediaQualitySliderElement);
+defineCustomElement(MediaSliderChaptersElement);
+defineCustomElement(MediaSliderStepsElement);
+defineCustomElement(MediaSliderPreviewElement);
+defineCustomElement(MediaSliderValueElement);
+defineCustomElement(MediaSliderThumbnailElement);
+defineCustomElement(MediaSliderVideoElement);
+defineCustomElement(MediaMenuElement);
+defineCustomElement(MediaMenuButtonElement);
+defineCustomElement(MediaMenuPortalElement);
+defineCustomElement(MediaMenuItemsElement);
+defineCustomElement(MediaMenuItemElement);
+defineCustomElement(MediaAudioRadioGroupElement);
+defineCustomElement(MediaCaptionsRadioGroupElement);
+defineCustomElement(MediaSpeedRadioGroupElement);
+defineCustomElement(MediaAudioGainRadioGroupElement);
+defineCustomElement(MediaQualityRadioGroupElement);
+defineCustomElement(MediaChaptersRadioGroupElement);
+defineCustomElement(MediaRadioGroupElement);
+defineCustomElement(MediaRadioElement);
+defineCustomElement(MediaGestureElement);
+defineCustomElement(MediaThumbnailElement);
+defineCustomElement(MediaCaptionsElement);
+defineCustomElement(MediaLiveButtonElement);
+defineCustomElement(MediaTimeElement);
+defineCustomElement(MediaTitleElement);
+defineCustomElement(MediaChapterTitleElement);
+defineCustomElement(MediaSpinnerElement);