@hanifhan1f/vidstack 1.12.13 → 1.12.14

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

@@ -0,0 +1,168 @@
+import { signal, effect, toggleClass, Host, listenEvent } from '../../chunks/vidstack-C1PwJD_4.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-C4aPQ7hZ.js';
+import { useMediaContext, useMediaState } from '../../chunks/vidstack-BjxlZzGu.js';
+import { useTransitionActive, useResizeObserver, isHTMLElement } from '../../chunks/vidstack-C0SWkbs7.js';
+import { $signal, SlotManager } from '../../chunks/vidstack-0Of4tJ8D.js';
+import { LitElement } from '../../chunks/vidstack-CwTj4H1w.js';
+import { html } from 'lit-html';
+import { ref } from 'lit-html/directives/ref.js';
+import '../../chunks/vidstack-CcQdBWil.js';
+import '../../chunks/vidstack-BTM4ERc7.js';
+import 'lit-html/directives/if-defined.js';
+import '../../chunks/vidstack-Bs54kFSz.js';
+import '../../chunks/vidstack-C6OqdJO7.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,446 @@
+import { computed, signal, effect, camelToKebabCase, Host } from '../../chunks/vidstack-C1PwJD_4.js';
+import { DefaultLayout, useDefaultLayoutContext, DefaultPlayButton, DefaultAnnouncer, DefaultCaptions, DefaultControlsSpacer, DefaultCaptionButton, DefaultDownloadButton, DefaultVolumePopup, DefaultTimeSlider, DefaultSeekButton, DefaultTimeInfo, DefaultFullscreenButton, DefaultTitle, DefaultPIPButton, DefaultChaptersMenu, DefaultSettingsMenu, DefaultEpisodeButton, setLayoutName, createMenuContainer, DefaultLayoutIconsLoader } from '../../chunks/vidstack-C4aPQ7hZ.js';
+import { useMediaContext, useMediaState } from '../../chunks/vidstack-BjxlZzGu.js';
+import { $signal, SlotManager } from '../../chunks/vidstack-0Of4tJ8D.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-C0SWkbs7.js';
+import '../../chunks/vidstack-CcQdBWil.js';
+import '../../chunks/vidstack-BTM4ERc7.js';
+import 'lit-html/directives/if-defined.js';
+import 'lit-html/directives/ref.js';
+import '../../chunks/vidstack-Bs54kFSz.js';
+import '../../chunks/vidstack-C6OqdJO7.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 DefaultVideoLayoutLarge() {
+  const { episodes, smallWhen: smWhen } = useDefaultLayoutContext(), { fullscreen } = useMediaState(), $episodesOpen = signal(false);
+  effect(() => {
+    if (!fullscreen()) $episodesOpen.set(false);
+  });
+  function onEpisodesToggle() {
+    if (!fullscreen() && !smWhen() || !episodes()?.length) return;
+    $episodesOpen.set(!$episodesOpen());
+  }
+  function onEpisodesClose() {
+    $episodesOpen.set(false);
+  }
+  return [
+    DefaultAnnouncer(),
+    DefaultVideoGestures(),
+    DefaultBufferingIndicator(),
+    DefaultKeyboardDisplay(),
+    DefaultCaptions(),
+    html`<div class="vds-scrim"></div>`,
+    html`
+      <media-controls class="vds-controls" @vds-episodes-open=${onEpisodesToggle}>
+        ${[
+      DefaultControlsGroupTop(),
+      DefaultControlsSpacer(),
+      html`
+            <media-controls-group class="vds-controls-group">
+              ${DefaultTimeSlider()}
+            </media-controls-group>
+          `,
+      html`
+            <media-controls-group class="vds-controls-group vds-controls-group-bottom">
+              ${[
+        DefaultSeekButton({ backward: true, tooltip: "top" }),
+        DefaultPlayButton({ tooltip: "top start" }),
+        DefaultSeekButton({ backward: false, tooltip: "top" }),
+        DefaultVolumePopup({ orientation: "horizontal", tooltip: "top" }),
+        DefaultTimeInfo(),
+        DefaultTitle(),
+        DefaultControlsSpacer(),
+        $signal(
+          () => (fullscreen() || smWhen()) && episodes()?.length ? DefaultEpisodeButton({ tooltip: "top" }) : null
+        ),
+        DefaultCaptionButton({ tooltip: "top" }),
+        DefaultBottomMenuGroup(),
+        DefaultDownloadButton(),
+        DefaultPIPButton(),
+        DefaultFullscreenButton({ tooltip: "top end" })
+      ]}
+            </media-controls-group>
+          `
+    ]}
+      </media-controls>
+    `,
+    DefaultEpisodesSidebar($episodesOpen, onEpisodesClose)
+  ];
+}
+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() {
+  const { episodes, smallWhen: smWhen } = useDefaultLayoutContext(), { fullscreen } = useMediaState(), $episodesOpen = signal(false);
+  effect(() => {
+    if (!fullscreen()) $episodesOpen.set(false);
+  });
+  function onEpisodesToggle() {
+    if (!fullscreen() && !smWhen() || !episodes()?.length) return;
+    $episodesOpen.set(!$episodesOpen());
+  }
+  function onEpisodesClose() {
+    $episodesOpen.set(false);
+  }
+  return [
+    DefaultAnnouncer(),
+    DefaultVideoGestures(),
+    DefaultBufferingIndicator(),
+    DefaultCaptions(),
+    DefaultKeyboardDisplay(),
+    html`<div class="vds-scrim"></div>`,
+    html`
+      <media-controls class="vds-controls" @vds-episodes-open=${onEpisodesToggle}>
+        <media-controls-group class="vds-controls-group">
+          ${[
+      DefaultControlsSpacer(),
+      DefaultCaptionButton({ tooltip: "bottom" }),
+      DefaultDownloadButton(),
+      DefaultVideoMenus(),
+      DefaultVolumePopup({ orientation: "vertical", tooltip: "bottom end" })
+    ]}
+        </media-controls-group>
+
+        ${DefaultControlsSpacer()}
+
+        <media-controls-group class="vds-controls-group">
+          ${DefaultTimeSlider()}
+        </media-controls-group>
+
+        <media-controls-group class="vds-controls-group vds-controls-group-bottom">
+          ${[
+      DefaultSeekButton({ backward: true, tooltip: "top" }),
+      DefaultPlayButton({ tooltip: "top" }),
+      DefaultSeekButton({ backward: false, tooltip: "top" }),
+      DefaultTimeInfo(),
+      DefaultControlsSpacer(),
+      $signal(
+        () => (fullscreen() || smWhen()) && episodes()?.length ? DefaultEpisodeButton({ tooltip: "top" }) : null
+      ),
+      DefaultFullscreenButton({ tooltip: "top end" })
+    ]}
+        </media-controls-group>
+      </media-controls>
+    `,
+    StartDuration(),
+    DefaultEpisodesSidebar($episodesOpen, onEpisodesClose)
+  ];
+}
+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 DefaultEpisodesSidebar($open, onClose) {
+  const { episodes, episodesTitle, smallWhen: smWhen } = useDefaultLayoutContext(), { fullscreen } = useMediaState();
+  return $signal(() => {
+    const list = episodes() ?? [];
+    if (!fullscreen() && !smWhen() || !list.length) return null;
+    return html`
+      <div
+        class="vds-episodes-backdrop"
+        data-open=${$open() ? "true" : "false"}
+        @pointerup=${(event) => {
+      if (event.target === event.currentTarget) onClose();
+    }}
+      >
+        <aside
+          class="vds-episodes-panel"
+          data-open=${$open() ? "true" : "false"}
+          @keydown=${(event) => {
+      if (event.key === "Escape") onClose();
+    }}
+        >
+          <header class="vds-episodes-panel-header">
+            <h3 class="vds-episodes-panel-title">${episodesTitle()}</h3>
+            <button
+              type="button"
+              class="vds-episodes-close-btn"
+              aria-label="Close episodes"
+              @pointerup=${(event) => {
+      event.stopPropagation();
+      onClose();
+    }}
+            >
+              <span aria-hidden="true">✕</span>
+            </button>
+          </header>
+          <div class="vds-episodes-list" role="list">
+            ${list.map((episode, index) => {
+      const episodeName = episode.episodeTitle || `Episode ${episode.episodeNumber ?? index + 1}`, runtimeText = Number.isFinite(episode.runtime) ? `${episode.runtime}m` : null, seasonEpLabel = episode.seasonNumber != null && episode.episodeNumber != null ? `S${String(episode.seasonNumber).padStart(2, "0")} \xB7 E${String(
+        episode.episodeNumber
+      ).padStart(2, "0")}` : episodeName;
+      const onEpisodeSelect = (event) => {
+        event.stopPropagation();
+        event.currentTarget?.dispatchEvent(
+          new CustomEvent("vds-episode-select", {
+            bubbles: true,
+            composed: true,
+            detail: { episode, index }
+          })
+        );
+        onClose();
+      };
+      return html`
+                <article
+                  class="vds-episode-item"
+                  role="button"
+                  tabindex="0"
+                  aria-label=${episode.title || episodeName}
+                  @pointerup=${onEpisodeSelect}
+                  @keydown=${(event) => {
+        if (event.key === "Enter" || event.key === " ") onEpisodeSelect(event);
+      }}
+                >
+                  <div class="vds-episode-thumb-wrap">
+                    ${episode.thumbnail ? html`
+                          <img
+                            class="vds-episode-thumb"
+                            src=${episode.thumbnail}
+                            alt=${episode.title || episodeName}
+                            loading="lazy"
+                            decoding="async"
+                          />
+                        ` : html`<div class="vds-episode-thumb vds-episode-thumb-placeholder"></div>`}
+                  </div>
+                  <div class="vds-episode-body">
+                    <div class="vds-episode-meta-row">
+                      <span class="vds-episode-label">${seasonEpLabel}</span>
+                      ${runtimeText ? html`<span class="vds-episode-runtime">${runtimeText}</span>` : null}
+                    </div>
+                    <h4 class="vds-episode-title" title=${episode.title || ""}>
+                      ${episode.title || "-"}
+                    </h4>
+                    <p class="vds-episode-subtitle" title=${episodeName}>${episodeName}</p>
+                    ${episode.overview ? html`<p class="vds-episode-desc" title=${episode.overview}>
+                          ${episode.overview}
+                        </p>` : null}
+                  </div>
+                </article>
+              `;
+    })}
+          </div>
+        </aside>
+      </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 }),
+    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;
+      }
+    },
+    episodes: {
+      converter(value) {
+        if (!value) return null;
+        try {
+          const parsed = JSON.parse(value);
+          return Array.isArray(parsed) ? parsed : null;
+        } catch {
+          return null;
+        }
+      }
+    }
+  };
+  #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,22 @@
+import { defineCustomElement } from '../chunks/vidstack-C1PwJD_4.js';
+import { MediaAudioLayoutElement } from './templates/vidstack-audio-layout.js';
+import { MediaVideoLayoutElement } from './templates/vidstack-video-layout.js';
+import '../chunks/vidstack-C4aPQ7hZ.js';
+import '../chunks/vidstack-BjxlZzGu.js';
+import '../chunks/vidstack-C0SWkbs7.js';
+import '@floating-ui/dom';
+import 'lit-html';
+import '../chunks/vidstack-0Of4tJ8D.js';
+import 'lit-html/directives/if-defined.js';
+import 'lit-html/directives/unsafe-svg.js';
+import 'lit-html/async-directive.js';
+import '../chunks/vidstack-CcQdBWil.js';
+import '../chunks/vidstack-BTM4ERc7.js';
+import 'lit-html/directives/ref.js';
+import '../chunks/vidstack-Bs54kFSz.js';
+import '../chunks/vidstack-C6OqdJO7.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,26 @@
+import { defineCustomElement } from '../chunks/vidstack-C1PwJD_4.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-C4aPQ7hZ.js';
+import '../chunks/vidstack-BjxlZzGu.js';
+import '../chunks/vidstack-C0SWkbs7.js';
+import '@floating-ui/dom';
+import 'lit-html';
+import '../chunks/vidstack-0Of4tJ8D.js';
+import 'lit-html/directives/if-defined.js';
+import 'lit-html/directives/unsafe-svg.js';
+import 'lit-html/async-directive.js';
+import '../chunks/vidstack-CcQdBWil.js';
+import '../chunks/vidstack-BTM4ERc7.js';
+import 'lit-html/directives/ref.js';
+import '../chunks/vidstack-Bs54kFSz.js';
+import '../chunks/vidstack-C6OqdJO7.js';
+import '../chunks/vidstack-CwTj4H1w.js';
+import 'lit-html/directives/keyed.js';
+import '../chunks/vidstack-DXzRuMtJ.js';
+import 'lit-html/directives/unsafe-html.js';
+
+defineCustomElement(MediaAudioLayoutElement);
+defineCustomElement(MediaVideoLayoutElement);
+defineCustomElement(MediaPlyrLayoutElement);