@hanifhan1f/vidstack 1.12.13

package/src/elements/define/layouts/default/audio-layout-element.ts

@@ -0,0 +1,137 @@
+import { effect, signal } from 'maverick.js';
+import { Host, type Attributes } from 'maverick.js/element';
+import { listenEvent } from 'maverick.js/std';
+
+import { DefaultAudioLayout } from '../../../../components/layouts/default/audio-layout';
+import { useDefaultLayoutContext } from '../../../../components/layouts/default/context';
+import type { DefaultLayoutProps } from '../../../../components/layouts/default/props';
+import { useMediaContext, type MediaContext } from '../../../../core/api/media-context';
+import { isHTMLElement } from '../../../../utils/dom';
+import { $signal } from '../../../lit/directives/signal';
+import { LitElement, type LitRenderer } from '../../../lit/lit-element';
+import { setLayoutName } from '../layout-name';
+import { SlotManager } from '../slot-manager';
+import { DefaultAudioLayout as Layout } from './audio-layout';
+import { DefaultLayoutIconsLoader } from './icons-loader';
+import { createMenuContainer } from './ui/menu/menu-portal';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/layouts/default-layout}
+ * @example
+ * ```html
+ * <media-player>
+ *   <media-provider></media-provider>
+ *   <media-audio-layout></media-audio-layout>
+ * </media-player>
+ * ```
+ */
+export class MediaAudioLayoutElement
+  extends Host(LitElement, DefaultAudioLayout)
+  implements LitRenderer
+{
+  static tagName = 'media-audio-layout';
+
+  static override attrs: Attributes<DefaultLayoutProps> = {
+    smallWhen: {
+      converter(value) {
+        return value !== 'never' && !!value;
+      },
+    },
+  };
+
+  #media!: MediaContext;
+  #scrubbing = signal(false);
+
+  protected onSetup() {
+    // Avoid memory leaks if `keepAlive` is true. The DOM will re-render regardless.
+    this.forwardKeepAlive = false;
+
+    this.#media = useMediaContext();
+
+    this.classList.add('vds-audio-layout');
+
+    this.#setupWatchScrubbing();
+  }
+
+  protected onConnect() {
+    setLayoutName('audio', () => this.isMatch);
+    this.#setupMenuContainer();
+  }
+
+  render() {
+    return $signal(this.#render.bind(this));
+  }
+
+  #render() {
+    return this.isMatch ? Layout() : 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: 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');
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-audio-layout': MediaAudioLayoutElement;
+  }
+}

package/src/elements/define/layouts/default/audio-layout.ts

@@ -0,0 +1,113 @@
+import { html } from 'lit-html';
+import { ref } from 'lit-html/directives/ref.js';
+import { effect, signal } from 'maverick.js';
+import { toggleClass } from 'maverick.js/std';
+
+import { useDefaultLayoutContext } from '../../../../components/layouts/default/context';
+import { i18n } from '../../../../components/layouts/default/translations';
+import { useMediaContext, useMediaState } from '../../../../core/api/media-context';
+import { useResizeObserver, useTransitionActive } from '../../../../utils/dom';
+import { $signal } from '../../../lit/directives/signal';
+import { DefaultAnnouncer } from './ui/announcer';
+import {
+  DefaultAirPlayButton,
+  DefaultCaptionButton,
+  DefaultDownloadButton,
+  DefaultPlayButton,
+  DefaultSeekButton,
+} from './ui/buttons';
+import { DefaultCaptions } from './ui/captions';
+import { DefaultControlsSpacer } from './ui/controls';
+import { DefaultChaptersMenu } from './ui/menu/chapters-menu';
+import { DefaultSettingsMenu } from './ui/menu/settings-menu';
+import { DefaultTimeSlider, DefaultVolumePopup } from './ui/slider';
+import { DefaultTimeInvert } from './ui/time';
+import { DefaultChapterTitle } from './ui/title';
+
+export 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<Element | undefined>(undefined),
+      $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 }),
+  ];
+}

package/src/elements/define/layouts/default/icons-loader.ts

@@ -0,0 +1,17 @@
+import type { TemplateResult } from 'lit-html';
+
+import { Icon } from '../../../icon';
+import { LayoutIconsLoader } from '../icons/layout-icons-loader';
+
+export class DefaultLayoutIconsLoader extends LayoutIconsLoader {
+  async loadIcons() {
+    const paths = (await import('./icons')).icons,
+      icons: Record<string, TemplateResult> = {};
+
+    for (const iconName of Object.keys(paths)) {
+      icons[iconName] = Icon({ name: iconName, paths: paths[iconName] });
+    }
+
+    return icons;
+  }
+}

package/src/elements/define/layouts/default/icons.ts

@@ -0,0 +1,86 @@
+import menuAccessibility from 'media-icons/dist/icons/accessibility.js';
+import airplay from 'media-icons/dist/icons/airplay.js';
+import arrowDown from 'media-icons/dist/icons/arrow-down.js';
+import menuArrowLeft from 'media-icons/dist/icons/arrow-left.js';
+import arrowUp from 'media-icons/dist/icons/arrow-up.js';
+import chapters from 'media-icons/dist/icons/chapters.js';
+import menuRadioCheck from 'media-icons/dist/icons/check.js';
+import menuArrowRight from 'media-icons/dist/icons/chevron-right.js';
+import googleCast from 'media-icons/dist/icons/chromecast.js';
+import ccOn from 'media-icons/dist/icons/closed-captions-on.js';
+import ccOff from 'media-icons/dist/icons/closed-captions.js';
+import menuCaptions from 'media-icons/dist/icons/closed-captions.js';
+import download from 'media-icons/dist/icons/download.js';
+import episodes from 'media-icons/dist/icons/episodes.js';
+import menuOpacityUp from 'media-icons/dist/icons/eye.js';
+import fastBackward from 'media-icons/dist/icons/fast-backward.js';
+import fastForward from 'media-icons/dist/icons/fast-forward.js';
+import fsExit from 'media-icons/dist/icons/fullscreen-exit.js';
+import fsEnter from 'media-icons/dist/icons/fullscreen.js';
+import menuAudio from 'media-icons/dist/icons/music.js';
+import mute from 'media-icons/dist/icons/mute.js';
+import menuOpacityDown from 'media-icons/dist/icons/no-eye.js';
+import pause from 'media-icons/dist/icons/pause.js';
+import pipExit from 'media-icons/dist/icons/picture-in-picture-exit.js';
+import pipEnter from 'media-icons/dist/icons/picture-in-picture.js';
+import play from 'media-icons/dist/icons/play.js';
+import menuPlayback from 'media-icons/dist/icons/playback-speed-circle.js';
+import replay from 'media-icons/dist/icons/replay.js';
+import seekBackward from 'media-icons/dist/icons/seek-backward-10.js';
+import seekForward from 'media-icons/dist/icons/seek-forward-10.js';
+import settings from 'media-icons/dist/icons/settings.js';
+import volumeHigh from 'media-icons/dist/icons/volume-high.js';
+import volumeLow from 'media-icons/dist/icons/volume-low.js';
+
+export const icons = {
+  airplay,
+  download,
+  play,
+  pause,
+  replay,
+  mute,
+  'google-cast': googleCast,
+  'volume-low': volumeLow,
+  'volume-high': volumeHigh,
+  'cc-on': ccOn,
+  'cc-off': ccOff,
+  'pip-enter': pipEnter,
+  'pip-exit': pipExit,
+  'fs-enter': fsEnter,
+  'fs-exit': fsExit,
+  'seek-forward': fastForward,
+  'seek-backward': fastBackward,
+  'menu-chapters': chapters,
+  'menu-settings': settings,
+  'menu-arrow-left': menuArrowLeft,
+  'menu-arrow-right': menuArrowRight,
+  'menu-accessibility': menuAccessibility,
+  'menu-audio': menuAudio,
+  'menu-audio-boost-up': volumeHigh,
+  'menu-audio-boost-down': volumeLow,
+  'menu-playback': menuPlayback,
+  'menu-speed-up': fastForward,
+  'menu-speed-down': fastBackward,
+  'menu-captions': menuCaptions,
+  'menu-quality-up': arrowUp,
+  'menu-quality-down': arrowDown,
+  'menu-radio-check': menuRadioCheck,
+  'menu-font-size-up': arrowUp,
+  'menu-font-size-down': arrowDown,
+  'menu-opacity-up': menuOpacityUp,
+  'menu-opacity-down': menuOpacityDown,
+  'kb-play': play,
+  'kb-pause': pause,
+  'kb-mute': mute,
+  'kb-volume-up': volumeHigh,
+  'kb-volume-down': volumeLow,
+  'kb-fs-enter': fsEnter,
+  'kb-fs-exit': fsExit,
+  'kb-pip-enter': pipEnter,
+  'kb-pip-exit': pipExit,
+  'kb-cc-on': ccOn,
+  'kb-cc-off': ccOff,
+  'kb-seek-forward': fastForward,
+  'kb-seek-backward': fastBackward,
+  'menu-episodes': episodes,
+};

package/src/elements/define/layouts/default/slots.ts

@@ -0,0 +1,12 @@
+import { html } from 'lit-html';
+
+export function IconSlot(name: string, classes = '') {
+  return html`<slot
+    name=${`${name}-icon`}
+    data-class=${`vds-icon vds-${name}-icon${classes ? ` ${classes}` : ''}`}
+  ></slot>`;
+}
+
+export function IconSlots(names: string[]) {
+  return names.map((name) => IconSlot(name));
+}

package/src/elements/define/layouts/default/ui/announcer.ts

@@ -0,0 +1,14 @@
+import { html } from 'lit-html';
+
+import { useDefaultLayoutContext } from '../../../../../components/layouts/default/context';
+import { $signal } from '../../../../lit/directives/signal';
+
+export function DefaultAnnouncer() {
+  return $signal(() => {
+    const { translations, userPrefersAnnouncements } = useDefaultLayoutContext();
+
+    if (!userPrefersAnnouncements()) return null;
+
+    return html`<media-announcer .translations=${$signal(translations)}></media-announcer>`;
+  });
+}

package/src/elements/define/layouts/default/ui/buttons.ts

@@ -0,0 +1,291 @@
+import { html } from 'lit-html';
+import { ref as $ref, type RefOrCallback } from 'lit-html/directives/ref.js';
+import { isNil, isString, noop, uppercaseFirstChar } from 'maverick.js/std';
+
+import { useDefaultLayoutContext } from '../../../../../components/layouts/default/context';
+import { i18n } from '../../../../../components/layouts/default/translations';
+import type { TooltipPlacement } from '../../../../../components/ui/tooltip/tooltip-content';
+import { useMediaState } from '../../../../../core/api/media-context';
+import { appendParamsToURL, getDownloadFile } from '../../../../../utils/network';
+import { $signal } from '../../../../lit/directives/signal';
+import { IconSlot, IconSlots } from '../slots';
+import { $i18n } from './utils';
+
+export function DefaultAirPlayButton({ tooltip }: { tooltip: TooltipPlacement }) {
+  const { translations } = useDefaultLayoutContext(),
+    { remotePlaybackState } = useMediaState(),
+    $label = $signal(() => {
+      const airPlayText = i18n(translations, 'AirPlay'),
+        stateText = uppercaseFirstChar(remotePlaybackState()) as Capitalize<RemotePlaybackState>;
+      return `${airPlayText} ${stateText}`;
+    }),
+    $airPlayText = $i18n(translations, 'AirPlay');
+  return html`
+    <media-tooltip class="vds-airplay-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-airplay-button class="vds-airplay-button vds-button" aria-label=${$label}>
+          ${IconSlot('airplay')}
+        </media-airplay-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        <span class="vds-airplay-tooltip-text">${$airPlayText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+
+export function DefaultGoogleCastButton({ tooltip }: { tooltip: TooltipPlacement }) {
+  const { translations } = useDefaultLayoutContext(),
+    { remotePlaybackState } = useMediaState(),
+    $label = $signal(() => {
+      const googleCastText = i18n(translations, 'Google Cast'),
+        stateText = uppercaseFirstChar(remotePlaybackState()) as Capitalize<RemotePlaybackState>;
+      return `${googleCastText} ${stateText}`;
+    }),
+    $googleCastText = $i18n(translations, 'Google Cast');
+  return html`
+    <media-tooltip class="vds-google-cast-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-google-cast-button class="vds-google-cast-button vds-button" aria-label=${$label}>
+          ${IconSlot('google-cast')}
+        </media-google-cast-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        <span class="vds-google-cast-tooltip-text">${$googleCastText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+
+export function DefaultPlayButton({ tooltip }: { tooltip: TooltipPlacement }) {
+  const { translations } = useDefaultLayoutContext(),
+    $playText = $i18n(translations, 'Play'),
+    $pauseText = $i18n(translations, 'Pause');
+  return html`
+    <media-tooltip class="vds-play-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-play-button
+          class="vds-play-button vds-button"
+          aria-label=${$i18n(translations, 'Play')}
+        >
+          ${IconSlots(['play', 'pause', 'replay'])}
+        </media-play-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        <span class="vds-play-tooltip-text">${$playText}</span>
+        <span class="vds-pause-tooltip-text">${$pauseText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+
+export function DefaultMuteButton({
+  tooltip,
+  ref = noop,
+}: {
+  tooltip: TooltipPlacement;
+  ref?: RefOrCallback;
+}) {
+  const { translations } = useDefaultLayoutContext(),
+    $muteText = $i18n(translations, 'Mute'),
+    $unmuteText = $i18n(translations, 'Unmute');
+  return html`
+    <media-tooltip class="vds-mute-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-mute-button
+          class="vds-mute-button vds-button"
+          aria-label=${$i18n(translations, 'Mute')}
+          ${$ref(ref)}
+        >
+          ${IconSlots(['mute', 'volume-low', 'volume-high'])}
+        </media-mute-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        <span class="vds-mute-tooltip-text">${$unmuteText}</span>
+        <span class="vds-unmute-tooltip-text">${$muteText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+
+export function DefaultCaptionButton({ tooltip }: { tooltip: TooltipPlacement }) {
+  const { translations } = useDefaultLayoutContext(),
+    $ccOnText = $i18n(translations, 'Closed-Captions On'),
+    $ccOffText = $i18n(translations, 'Closed-Captions Off');
+  return html`
+    <media-tooltip class="vds-caption-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-caption-button
+          class="vds-caption-button vds-button"
+          aria-label=${$i18n(translations, 'Captions')}
+        >
+          ${IconSlots(['cc-on', 'cc-off'])}
+        </media-caption-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        <span class="vds-cc-on-tooltip-text">${$ccOffText}</span>
+        <span class="vds-cc-off-tooltip-text">${$ccOnText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+
+export function DefaultPIPButton() {
+  const { translations } = useDefaultLayoutContext(),
+    $enterText = $i18n(translations, 'Enter PiP'),
+    $exitText = $i18n(translations, 'Exit PiP');
+  return html`
+    <media-tooltip class="vds-pip-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-pip-button
+          class="vds-pip-button vds-button"
+          aria-label=${$i18n(translations, 'PiP')}
+        >
+          ${IconSlots(['pip-enter', 'pip-exit'])}
+        </media-pip-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content">
+        <span class="vds-pip-enter-tooltip-text">${$enterText}</span>
+        <span class="vds-pip-exit-tooltip-text">${$exitText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+
+export function DefaultFullscreenButton({ tooltip }: { tooltip: TooltipPlacement }) {
+  const { translations } = useDefaultLayoutContext(),
+    $enterText = $i18n(translations, 'Enter Fullscreen'),
+    $exitText = $i18n(translations, 'Exit Fullscreen');
+  return html`
+    <media-tooltip class="vds-fullscreen-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-fullscreen-button
+          class="vds-fullscreen-button vds-button"
+          aria-label=${$i18n(translations, 'Fullscreen')}
+        >
+          ${IconSlots(['fs-enter', 'fs-exit'])}
+        </media-fullscreen-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        <span class="vds-fs-enter-tooltip-text">${$enterText}</span>
+        <span class="vds-fs-exit-tooltip-text">${$exitText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+
+export function DefaultSeekButton({
+  backward,
+  tooltip,
+}: {
+  backward?: boolean;
+  tooltip: TooltipPlacement;
+}) {
+  const { translations, seekStep } = useDefaultLayoutContext(),
+    seekText = !backward ? 'Seek Forward' : 'Seek Backward',
+    $label = $i18n(translations, seekText),
+    $seconds = () => (backward ? -1 : 1) * seekStep();
+  return html`
+    <media-tooltip class="vds-seek-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-seek-button
+          class="vds-seek-button vds-button"
+          seconds=${$signal($seconds)}
+          aria-label=${$label}
+        >
+          ${!backward ? IconSlot('seek-forward') : IconSlot('seek-backward')}
+        </media-seek-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        ${$i18n(translations, seekText)}
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+
+export function DefaultLiveButton() {
+  const { translations } = useDefaultLayoutContext(),
+    { live } = useMediaState(),
+    $label = $i18n(translations, 'Skip To Live'),
+    $liveText = $i18n(translations, 'LIVE');
+  return live()
+    ? html`
+        <media-live-button class="vds-live-button" aria-label=${$label}>
+          <span class="vds-live-button-text">${$liveText}</span>
+        </media-live-button>
+      `
+    : null;
+}
+
+export function DefaultDownloadButton() {
+  return $signal(() => {
+    const { download, translations } = useDefaultLayoutContext(),
+      $download = download();
+
+    if (isNil($download)) return null;
+
+    const { source, title } = useMediaState(),
+      $src = source(),
+      file = getDownloadFile({
+        title: title(),
+        src: $src,
+        download: $download,
+      });
+
+    return isString(file?.url)
+      ? html`
+          <media-tooltip class="vds-download-tooltip vds-tooltip">
+            <media-tooltip-trigger>
+              <a
+                role="button"
+                class="vds-download-button vds-button"
+                aria-label=${$i18n(translations, 'Download')}
+                href=${appendParamsToURL(file.url, { download: file.name })}
+                download=${file.name}
+                target="_blank"
+              >
+                <slot name="download-icon" data-class="vds-icon" />
+              </a>
+            </media-tooltip-trigger>
+            <media-tooltip-content class="vds-tooltip-content" placement="top">
+              ${$i18n(translations, 'Download')}
+            </media-tooltip-content>
+          </media-tooltip>
+        `
+      : null;
+  });
+}
+
+export function DefaultEpisodeButton({ tooltip }: { tooltip?: TooltipPlacement } = {}) {
+  const $label = 'Episodes',
+    $episodesText = 'Episodes';
+
+  function openEpisodes(e: Event) {
+    e.stopPropagation();
+    (e.currentTarget as HTMLElement | null)?.dispatchEvent(
+      new CustomEvent('vds-episodes-open', { bubbles: true, composed: true }),
+    );
+  }
+
+  const content = html`
+    <button
+      type="button"
+      class="vds-episode-button vds-button"
+      aria-label=${$label}
+      @pointerup=${openEpisodes}
+    >
+      ${IconSlot('menu-episodes')}
+    </button>
+  `;
+
+  if (!tooltip) return content;
+
+  return html`
+    <media-tooltip class="vds-episode-tooltip vds-tooltip">
+      <media-tooltip-trigger> ${content} </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        <span class="vds-episode-tooltip-text">${$episodesText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}

package/src/elements/define/layouts/default/ui/captions.ts

@@ -0,0 +1,14 @@
+import { html } from 'lit-html';
+
+import { useDefaultLayoutContext } from '../../../../../components/layouts/default/context';
+import { $i18n } from './utils';
+
+export function DefaultCaptions() {
+  const { translations } = useDefaultLayoutContext();
+  return html`
+    <media-captions
+      class="vds-captions"
+      .exampleText=${$i18n(translations, 'Captions look like this')}
+    ></media-captions>
+  `;
+}