@hanifhan1f/vidstack 1.12.13 → 1.12.18

package/{src/elements/define/layouts/plyr/ui.ts → server/chunks/vidstack-FHGkN5xj.js}

@@ -1,49 +1,48 @@
-import { html, type TemplateResult } from 'lit-html';
+import { html } from 'lit-html';
+import { computed, signal, effect, peek, isString, listenEvent, isKeyboardEvent, isKeyboardClick, Host, onDispose } from './vidstack-B8LynzY5.js';
+import { usePlyrLayoutContext, PlyrLayout, usePlyrLayoutClasses } from './vidstack-DbvCOsqU.js';
+import { useMediaContext, getDownloadFile, appendParamsToURL } from './vidstack-B4CWj0Hp.js';
+import { LayoutIconsLoader, Icon, $signal, SlotManager } from './vidstack-CdBfecZT.js';
+import { LitElement } from './vidstack-CwTj4H1w.js';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { computed, effect, peek, signal, type ReadSignal } from 'maverick.js';
-import { isKeyboardClick, isKeyboardEvent, isString, listenEvent } from 'maverick.js/std';
-import type { VTTCue } from 'media-captions';
 
-import {
-  usePlyrLayoutContext,
-  type PlyrLayoutContext,
-} from '../../../../components/layouts/plyr/context';
-import type { PlyrControl, PlyrMarker } from '../../../../components/layouts/plyr/props';
-import { i18n, type PlyrLayoutWord } from '../../../../components/layouts/plyr/translations';
-import { useMediaContext } from '../../../../core/api/media-context';
-import type { MediaSeekingRequestEvent } from '../../../../core/api/media-request-events';
-import { appendParamsToURL, getDownloadFile } from '../../../../utils/network';
-import { $signal } from '../../../lit/directives/signal';
-
-export function PlyrAudioLayout() {
-  return AudioControls();
+class PlyrLayoutIconsLoader extends LayoutIconsLoader {
+  async loadIcons() {
+    const paths = (await import('./vidstack-DXxIKXmd.js')).icons, icons = {};
+    for (const iconName of Object.keys(paths)) {
+      icons[iconName] = Icon({
+        name: iconName,
+        paths: paths[iconName],
+        viewBox: "0 0 18 18"
+      });
+    }
+    return icons;
+  }
 }
 
-export function PlyrVideoLayout() {
-  const media = useMediaContext(),
-    { load } = media.$props,
-    { canLoad } = media.$state,
-    showLoadScreen = computed(() => load() === 'play' && !canLoad());
+function i18n(translations, word) {
+  return translations()?.[word] ?? word;
+}
 
+function PlyrAudioLayout() {
+  return AudioControls();
+}
+function PlyrVideoLayout() {
+  const media = useMediaContext(), { load } = media.$props, { canLoad } = media.$state, showLoadScreen = computed(() => load() === "play" && !canLoad());
   if (showLoadScreen()) {
     return [PlayLargeButton(), Poster()];
   }
-
   return [
     OptionalPlayLarge(),
     PreviewScrubbing(),
     Poster(),
     VideoControls(),
     Gestures(),
-    Captions(),
+    Captions()
   ];
 }
-
 function PlayLargeButton() {
-  const media = useMediaContext(),
-    { translations } = usePlyrLayoutContext(),
-    { title } = media.$state,
-    $label = $signal(() => `${i18n(translations, 'Play')}, ${title()}`);
+  const media = useMediaContext(), { translations } = usePlyrLayoutContext(), { title } = media.$state, $label = $signal(() => `${i18n(translations, "Play")}, ${title()}`);
   return html`
     <media-play-button
       class="plyr__control plyr__control--overlaid"
@@ -54,12 +53,10 @@ function PlayLargeButton() {
     </button>
   `;
 }
-
 function OptionalPlayLarge() {
   const { controls } = usePlyrLayoutContext();
-  return $signal(() => (controls().includes('play-large') ? PlayLargeButton() : null));
+  return $signal(() => controls().includes("play-large") ? PlayLargeButton() : null);
 }
-
 function PreviewScrubbing() {
   const { thumbnails, previewTime } = usePlyrLayoutContext();
   return html`
@@ -70,83 +67,67 @@ function PreviewScrubbing() {
     ></media-thumbnail>
   `;
 }
-
 function Poster() {
-  const media = useMediaContext(),
-    { poster } = media.$state,
-    $style = $signal(() => `background-image: url("${poster()}");`);
+  const media = useMediaContext(), { poster } = media.$state, $style = $signal(() => `background-image: url("${poster()}");`);
   return html`<div class="plyr__poster" style=${$style}></div>`;
 }
-
 function AudioControls() {
-  const ignore = new Set<PlyrControl>(['captions', 'pip', 'airplay', 'fullscreen']),
-    { controls } = usePlyrLayoutContext(),
-    $controls = $signal(() =>
-      controls()
-        .filter((type) => !ignore.has(type))
-        .map(Control),
-    );
-
+  const ignore = /* @__PURE__ */ new Set(["captions", "pip", "airplay", "fullscreen"]), { controls } = usePlyrLayoutContext(), $controls = $signal(
+    () => controls().filter((type) => !ignore.has(type)).map(Control)
+  );
   return html`<div class="plyr__controls">${$controls}</div>`;
 }
-
 function VideoControls() {
-  const { controls } = usePlyrLayoutContext(),
-    $controls = $signal(() => controls().map(Control));
+  const { controls } = usePlyrLayoutContext(), $controls = $signal(() => controls().map(Control));
   return html`<div class="plyr__controls">${$controls}</div>`;
 }
-
-function Control(type: PlyrControl) {
+function Control(type) {
   switch (type) {
-    case 'airplay':
+    case "airplay":
       return AirPlayButton();
-    case 'captions':
+    case "captions":
       return CaptionsButton();
-    case 'current-time':
+    case "current-time":
       return CurrentTime();
-    case 'download':
+    case "download":
       return DownloadButton();
-    case 'duration':
+    case "duration":
       return Duration();
-    case 'fast-forward':
+    case "fast-forward":
       return FastForwardButton();
-    case 'fullscreen':
+    case "fullscreen":
       return FullscreenButton();
-    case 'mute':
-    case 'volume':
-    case 'mute+volume':
+    case "mute":
+    case "volume":
+    case "mute+volume":
       return Volume(type);
-    case 'pip':
+    case "pip":
       return PIPButton();
-    case 'play':
+    case "play":
       return PlayButton();
-    case 'progress':
+    case "progress":
       return TimeSlider();
-    case 'restart':
+    case "restart":
       return RestartButton();
-    case 'rewind':
+    case "rewind":
       return RewindButton();
-    case 'settings':
+    case "settings":
       return Settings();
     default:
       return null;
   }
 }
-
 function AirPlayButton() {
   const { translations } = usePlyrLayoutContext();
   return html`
     <media-airplay-button class="plyr__controls__item plyr__control" data-plyr="airplay">
       <slot name="airplay-icon"></slot>
-      <span class="plyr__tooltip">${$i18n(translations, 'AirPlay')}</span>
+      <span class="plyr__tooltip">${$i18n(translations, "AirPlay")}</span>
     </media-airplay-button>
   `;
 }
-
 function CaptionsButton() {
-  const { translations } = usePlyrLayoutContext(),
-    $disableText = $i18n(translations, 'Disable captions'),
-    $enableText = $i18n(translations, 'Enable captions');
+  const { translations } = usePlyrLayoutContext(), $disableText = $i18n(translations, "Disable captions"), $enableText = $i18n(translations, "Enable captions");
   return html`
     <media-caption-button
       class="plyr__controls__item plyr__control"
@@ -160,11 +141,8 @@ function CaptionsButton() {
     </media-caption-button>
   `;
 }
-
 function FullscreenButton() {
-  const { translations } = usePlyrLayoutContext(),
-    $enterText = $i18n(translations, 'Enter Fullscreen'),
-    $exitText = $i18n(translations, 'Exit Fullscreen');
+  const { translations } = usePlyrLayoutContext(), $enterText = $i18n(translations, "Enter Fullscreen"), $exitText = $i18n(translations, "Exit Fullscreen");
   return html`
     <media-fullscreen-button
       class="plyr__controls__item plyr__control"
@@ -178,11 +156,8 @@ function FullscreenButton() {
     </media-fullscreen-button>
   `;
 }
-
 function MuteButton() {
-  const { translations } = usePlyrLayoutContext(),
-    $muteText = $i18n(translations, 'Mute'),
-    $unmuteText = $i18n(translations, 'Unmute');
+  const { translations } = usePlyrLayoutContext(), $muteText = $i18n(translations, "Mute"), $unmuteText = $i18n(translations, "Unmute");
   return html`
     <media-mute-button class="plyr__control" data-no-label data-plyr="mute">
       <slot name="muted-icon" data-class="icon--pressed"></slot>
@@ -192,11 +167,8 @@ function MuteButton() {
     </media-mute-button>
   `;
 }
-
 function PIPButton() {
-  const { translations } = usePlyrLayoutContext(),
-    $enterText = $i18n(translations, 'Enter PiP'),
-    $exitText = $i18n(translations, 'Exit PiP');
+  const { translations } = usePlyrLayoutContext(), $enterText = $i18n(translations, "Enter PiP"), $exitText = $i18n(translations, "Exit PiP");
   return html`
     <media-pip-button class="plyr__controls__item plyr__control" data-no-label data-plyr="pip">
       <slot name="pip-icon"></slot>
@@ -207,11 +179,8 @@ function PIPButton() {
     </media-pip-button>
   `;
 }
-
 function PlayButton() {
-  const { translations } = usePlyrLayoutContext(),
-    $playText = $i18n(translations, 'Play'),
-    $pauseText = $i18n(translations, 'Pause');
+  const { translations } = usePlyrLayoutContext(), $playText = $i18n(translations, "Play"), $pauseText = $i18n(translations, "Pause");
   return html`
     <media-play-button class="plyr__controls__item plyr__control" data-no-label data-plyr="play">
       <slot name="pause-icon" data-class="icon--pressed"></slot>
@@ -221,17 +190,12 @@ function PlayButton() {
     </media-play-button>
   `;
 }
-
 function RestartButton() {
-  const { translations } = usePlyrLayoutContext(),
-    { remote } = useMediaContext(),
-    $restartText = $i18n(translations, 'Restart');
-
-  function onPress(event: Event) {
+  const { translations } = usePlyrLayoutContext(), { remote } = useMediaContext(), $restartText = $i18n(translations, "Restart");
+  function onPress(event) {
     if (isKeyboardEvent(event) && !isKeyboardClick(event)) return;
     remote.seek(0, event);
   }
-
   return html`
     <button
       type="button"
@@ -245,11 +209,8 @@ function RestartButton() {
     </button>
   `;
 }
-
 function RewindButton() {
-  const { translations, seekTime } = usePlyrLayoutContext(),
-    $label = $signal(() => `${i18n(translations, 'Rewind')} ${seekTime()}s`),
-    $seconds = $signal(() => -1 * seekTime());
+  const { translations, seekTime } = usePlyrLayoutContext(), $label = $signal(() => `${i18n(translations, "Rewind")} ${seekTime()}s`), $seconds = $signal(() => -1 * seekTime());
   return html`
     <media-seek-button
       class="plyr__controls__item plyr__control"
@@ -262,11 +223,8 @@ function RewindButton() {
     </media-seek-button>
   `;
 }
-
 function FastForwardButton() {
-  const { translations, seekTime } = usePlyrLayoutContext(),
-    $label = $signal(() => `${i18n(translations, 'Forward')} ${seekTime()}s`),
-    $seconds = $signal(seekTime);
+  const { translations, seekTime } = usePlyrLayoutContext(), $label = $signal(() => `${i18n(translations, "Forward")} ${seekTime()}s`), $seconds = $signal(seekTime);
   return html`
     <media-seek-button
       class="plyr__controls__item plyr__control"
@@ -279,44 +237,28 @@ function FastForwardButton() {
     </media-seek-button>
   `;
 }
-
 function TimeSlider() {
-  let media = useMediaContext(),
-    { duration, viewType } = media.$state,
-    { translations, markers, thumbnails, seekTime, previewTime } = usePlyrLayoutContext(),
-    $seekText = $i18n(translations, 'Seek'),
-    activeMarker = signal<PlyrMarker | null>(null),
-    $markerLabel = $signal(() => {
-      const marker = activeMarker();
-      return marker
-        ? html`<span class="plyr__progress__marker-label">${unsafeHTML(marker.label)}<br /></span>`
-        : null;
-    });
-
-  function onSeekingRequest(event: MediaSeekingRequestEvent) {
+  let media = useMediaContext(), { duration, viewType } = media.$state, { translations, markers, thumbnails, seekTime, previewTime } = usePlyrLayoutContext(), $seekText = $i18n(translations, "Seek"), activeMarker = signal(null), $markerLabel = $signal(() => {
+    const marker = activeMarker();
+    return marker ? html`<span class="plyr__progress__marker-label">${unsafeHTML(marker.label)}<br /></span>` : null;
+  });
+  function onSeekingRequest(event) {
     previewTime.set(event.detail);
   }
-
-  function onMarkerEnter(this: PlyrMarker) {
+  function onMarkerEnter() {
     activeMarker.set(this);
   }
-
   function onMarkerLeave() {
     activeMarker.set(null);
   }
-
   function Preview() {
-    const src = thumbnails(),
-      $noClamp = $signal(() => viewType() === 'audio');
-
-    return !src
-      ? html`
+    const src = thumbnails(), $noClamp = $signal(() => viewType() === "audio");
+    return !src ? html`
           <span class="plyr__tooltip">
             ${$markerLabel}
             <media-slider-value></media-slider-value>
           </span>
-        `
-      : html`
+        ` : html`
           <media-slider-preview class="plyr__slider__preview" ?no-clamp=${$noClamp}>
             <media-slider-thumbnail .src=${src} class="plyr__slider__preview__thumbnail">
               <span class="plyr__slider__preview__time-container">
@@ -327,24 +269,20 @@ function TimeSlider() {
           </media-slider-preview>
         `;
   }
-
   function Markers() {
     const endTime = duration();
-
     if (!Number.isFinite(endTime)) return null;
-
     return markers()?.map(
       (marker) => html`
         <span
           class="plyr__progress__marker"
           @mouseenter=${onMarkerEnter.bind(marker)}
           @mouseleave=${onMarkerLeave}
-          style=${`left: ${(marker.time / endTime) * 100}%;`}
+          style=${`left: ${marker.time / endTime * 100}%;`}
         ></span>
-      `,
+      `
     );
   }
-
   return html`
     <div class="plyr__controls__item plyr__progress__container">
       <div class="plyr__progress">
@@ -365,11 +303,9 @@ function TimeSlider() {
     </div>
   `;
 }
-
-function Volume(type: 'mute' | 'volume' | 'mute+volume') {
+function Volume(type) {
   return $signal(() => {
-    const hasMuteButton = type === 'mute' || type === 'mute+volume',
-      hasVolumeSlider = type === 'volume' || type === 'mute+volume';
+    const hasMuteButton = type === "mute" || type === "mute+volume", hasVolumeSlider = type === "volume" || type === "mute+volume";
     return html`
       <div class="plyr__controls__item plyr__volume">
         ${[hasMuteButton ? MuteButton() : null, hasVolumeSlider ? VolumeSlider() : null]}
@@ -377,10 +313,8 @@ function Volume(type: 'mute' | 'volume' | 'mute+volume') {
     `;
   });
 }
-
 function VolumeSlider() {
-  const { translations } = usePlyrLayoutContext(),
-    $volumeText = $i18n(translations, 'Volume');
+  const { translations } = usePlyrLayoutContext(), $volumeText = $i18n(translations, "Volume");
   return html`
     <media-volume-slider class="plyr__slider" data-plyr="volume" aria-label=${$volumeText}>
       <div class="plyr__slider__track"></div>
@@ -388,39 +322,27 @@ function VolumeSlider() {
     </media-volume-slider>
   `;
 }
-
 function CurrentTime() {
-  const media = useMediaContext(),
-    { translations, invertTime, toggleTime, displayDuration } = usePlyrLayoutContext(),
-    invert = signal(peek(invertTime));
-
-  function onPress(event: Event) {
-    if (!toggleTime() || displayDuration() || (isKeyboardEvent(event) && !isKeyboardClick(event))) {
+  const media = useMediaContext(), { translations, invertTime, toggleTime, displayDuration } = usePlyrLayoutContext(), invert = signal(peek(invertTime));
+  function onPress(event) {
+    if (!toggleTime() || displayDuration() || isKeyboardEvent(event) && !isKeyboardClick(event)) {
       return;
     }
-
     invert.set((n) => !n);
   }
-
   function MaybeDuration() {
-    return $signal(() => (displayDuration() ? Duration() : null));
+    return $signal(() => displayDuration() ? Duration() : null);
   }
-
   return $signal(() => {
-    const { streamType } = media.$state,
-      $liveText = $i18n(translations, 'LIVE'),
-      $currentTimeText = $i18n(translations, 'Current time'),
-      $remainder = $signal(() => !displayDuration() && invert());
-    return streamType() === 'live' || streamType() === 'll-live'
-      ? html`
+    const { streamType } = media.$state, $liveText = $i18n(translations, "LIVE"), $currentTimeText = $i18n(translations, "Current time"), $remainder = $signal(() => !displayDuration() && invert());
+    return streamType() === "live" || streamType() === "ll-live" ? html`
           <media-live-button
             class="plyr__controls__item plyr__control plyr__live-button"
             data-plyr="live"
           >
             <span class="plyr__live-button__text">${$liveText}</span>
           </media-live-button>
-        `
-      : html`
+        ` : html`
           <media-time
             type="current"
             class="plyr__controls__item plyr__time plyr__time--current"
@@ -435,10 +357,8 @@ function CurrentTime() {
         `;
   });
 }
-
 function Duration() {
-  const { translations } = usePlyrLayoutContext(),
-    $durationText = $i18n(translations, 'Duration');
+  const { translations } = usePlyrLayoutContext(), $durationText = $i18n(translations, "Duration");
   return html`
     <media-time
       type="duration"
@@ -449,23 +369,14 @@ function Duration() {
     ></media-time>
   `;
 }
-
 function DownloadButton() {
   return $signal(() => {
-    const media = useMediaContext(),
-      { translations, download } = usePlyrLayoutContext(),
-      { title, source } = media.$state,
-      $src = source(),
-      $download = download(),
-      file = getDownloadFile({
-        title: title(),
-        src: $src,
-        download: $download,
-      }),
-      $downloadText = $i18n(translations, 'Download');
-
-    return isString(file?.url)
-      ? html`
+    const media = useMediaContext(), { translations, download } = usePlyrLayoutContext(), { title, source } = media.$state, $src = source(), $download = download(), file = getDownloadFile({
+      title: title(),
+      src: $src,
+      download: $download
+    }), $downloadText = $i18n(translations, "Download");
+    return isString(file?.url) ? html`
           <a
             class="plyr__controls__item plyr__control"
             href=${appendParamsToURL(file.url, { download: file.name })}
@@ -475,64 +386,49 @@ function DownloadButton() {
             <slot name="download-icon" />
             <span class="plyr__tooltip">${$downloadText}</span>
           </a>
-        `
-      : null;
+        ` : null;
   });
 }
-
 function Gestures() {
   return $signal(() => {
     const { clickToPlay, clickToFullscreen } = usePlyrLayoutContext();
     return [
-      clickToPlay()
-        ? html`
+      clickToPlay() ? html`
             <media-gesture
               class="plyr__gesture"
               event="pointerup"
               action="toggle:paused"
             ></media-gesture>
-          `
-        : null,
-      clickToFullscreen()
-        ? html`
+          ` : null,
+      clickToFullscreen() ? html`
             <media-gesture
               class="plyr__gesture"
               event="dblpointerup"
               action="toggle:fullscreen"
             ></media-gesture>
-          `
-        : null,
+          ` : null
     ];
   });
 }
-
 function Captions() {
-  const media = useMediaContext(),
-    activeCue = signal<VTTCue | undefined>(undefined),
-    $cueText = $signal(() => unsafeHTML(activeCue()?.text));
-
+  const media = useMediaContext(), activeCue = signal(void 0), $cueText = $signal(() => unsafeHTML(activeCue()?.text));
   effect(() => {
     const track = media.$state.textTrack();
     if (!track) return;
-
     function onCueChange() {
       activeCue.set(track?.activeCues[0]);
     }
-
     onCueChange();
-    return listenEvent(track, 'cue-change', onCueChange);
+    return listenEvent();
   });
-
   return html`
     <div class="plyr__captions" dir="auto">
       <span class="plyr__caption">${$cueText}</span>
     </div>
   `;
 }
-
 function Settings() {
-  const { translations } = usePlyrLayoutContext(),
-    $settingsText = $i18n(translations, 'Settings');
+  const { translations } = usePlyrLayoutContext(), $settingsText = $i18n(translations, "Settings");
   return html`
     <div class="plyr__controls__item plyr__menu">
       <media-menu>
@@ -547,11 +443,8 @@ function Settings() {
     </div>
   `;
 }
-
-function Menu({ label, children }: { label: PlyrLayoutWord; children: TemplateResult }) {
-  const open = signal(false),
-    onOpen = () => open.set(true),
-    onClose = () => open.set(false);
+function Menu({ label, children }) {
+  const open = signal(false), onOpen = () => open.set(true), onClose = () => open.set(false);
   return html`
     <media-menu @open=${onOpen} @close=${onClose}>
       ${MenuButton({ label, open })}
@@ -559,16 +452,12 @@ function Menu({ label, children }: { label: PlyrLayoutWord; children: TemplateRe
     </media-menu>
   `;
 }
-
-function MenuButton({ open, label }: { label: PlyrLayoutWord; open: ReadSignal<boolean> }) {
-  const { translations } = usePlyrLayoutContext(),
-    $class = $signal(() => `plyr__control plyr__control--${open() ? 'back' : 'forward'}`);
-
+function MenuButton({ open, label }) {
+  const { translations } = usePlyrLayoutContext(), $class = $signal(() => `plyr__control plyr__control--${open() ? "back" : "forward"}`);
   function GoBackText() {
-    const $text = $i18n(translations, 'Go back to previous menu');
-    return $signal(() => (open() ? html`<span class="plyr__sr-only">${$text}</span>` : null));
+    const $text = $i18n(translations, "Go back to previous menu");
+    return $signal(() => open() ? html`<span class="plyr__sr-only">${$text}</span>` : null);
   }
-
   return html`
     <media-menu-button class=${$class} data-plyr="settings">
       <span class="plyr__menu__label" aria-hidden=${$aria(open)}>
@@ -579,15 +468,13 @@ function MenuButton({ open, label }: { label: PlyrLayoutWord; open: ReadSignal<b
     </media-menu-button>
   `;
 }
-
 function AudioMenu() {
-  return Menu({ label: 'Audio', children: AudioRadioGroup() });
+  return Menu({ label: "Audio", children: AudioRadioGroup() });
 }
-
 function AudioRadioGroup() {
   const { translations } = usePlyrLayoutContext();
   return html`
-    <media-audio-radio-group empty-label=${$i18n(translations, 'Default')}>
+    <media-audio-radio-group empty-label=${$i18n(translations, "Default")}>
       <template>
         <media-radio class="plyr__control" data-plyr="audio">
           <span data-part="label"></span>
@@ -596,15 +483,13 @@ function AudioRadioGroup() {
     </media-audio-radio-group>
   `;
 }
-
 function SpeedMenu() {
-  return Menu({ label: 'Speed', children: SpeedRadioGroup() });
+  return Menu({ label: "Speed", children: SpeedRadioGroup() });
 }
-
 function SpeedRadioGroup() {
   const { translations, speed } = usePlyrLayoutContext();
   return html`
-    <media-speed-radio-group .rates=${speed} normal-label=${$i18n(translations, 'Normal')}>
+    <media-speed-radio-group .rates=${speed} normal-label=${$i18n(translations, "Normal")}>
       <template>
         <media-radio class="plyr__control" data-plyr="speed">
           <span data-part="label"></span>
@@ -613,15 +498,13 @@ function SpeedRadioGroup() {
     </media-speed-radio-group>
   `;
 }
-
 function CaptionsMenu() {
-  return Menu({ label: 'Captions', children: CaptionsRadioGroup() });
+  return Menu({ label: "Captions", children: CaptionsRadioGroup() });
 }
-
 function CaptionsRadioGroup() {
   const { translations } = usePlyrLayoutContext();
   return html`
-    <media-captions-radio-group off-label=${$i18n(translations, 'Disabled')}>
+    <media-captions-radio-group off-label=${$i18n(translations, "Disabled")}>
       <template>
         <media-radio class="plyr__control" data-plyr="captions">
           <span data-part="label"></span>
@@ -630,15 +513,13 @@ function CaptionsRadioGroup() {
     </media-captions-radio-group>
   `;
 }
-
 function QualityMenu() {
-  return Menu({ label: 'Quality', children: QualityRadioGroup() });
+  return Menu({ label: "Quality", children: QualityRadioGroup() });
 }
-
 function QualityRadioGroup() {
   const { translations } = usePlyrLayoutContext();
   return html`
-    <media-quality-radio-group auto-label=${$i18n(translations, 'Auto')}>
+    <media-quality-radio-group auto-label=${$i18n(translations, "Auto")}>
       <template>
         <media-radio class="plyr__control" data-plyr="quality">
           <span data-part="label"></span>
@@ -647,11 +528,39 @@ function QualityRadioGroup() {
     </media-quality-radio-group>
   `;
 }
-
-function $aria(signal: ReadSignal<any>) {
-  return $signal(() => (signal() ? 'true' : 'false'));
+function $aria(signal2) {
+  return $signal(() => signal2() ? "true" : "false");
 }
-
-function $i18n(translations: PlyrLayoutContext['translations'], word: PlyrLayoutWord) {
+function $i18n(translations, word) {
   return $signal(() => i18n(translations, word));
 }
+
+class MediaPlyrLayoutElement extends Host(LitElement, PlyrLayout) {
+  static tagName = "media-plyr-layout";
+  #media;
+  onSetup() {
+    this.forwardKeepAlive = false;
+    this.#media = useMediaContext();
+  }
+  onConnect() {
+    this.#media.player.el?.setAttribute("data-layout", "plyr");
+    onDispose(() => this.#media.player.el?.removeAttribute("data-layout"));
+    usePlyrLayoutClasses(this, this.#media);
+    effect(() => {
+      if (this.$props.customIcons()) {
+        new SlotManager([this]).connect();
+      } else {
+        new PlyrLayoutIconsLoader([this]).connect();
+      }
+    });
+  }
+  render() {
+    return $signal(this.#render.bind(this));
+  }
+  #render() {
+    const { viewType } = this.#media.$state;
+    return viewType() === "audio" ? PlyrAudioLayout() : viewType() === "video" ? PlyrVideoLayout() : null;
+  }
+}
+
+export { MediaPlyrLayoutElement };