@hanifhan1f/vidstack 1.12.13 → 1.12.18

package/src/elements/define/gesture-element.ts

@@ -1,24 +0,0 @@
-import { Host } from 'maverick.js/element';
-
-import { Gesture } from '../../components/ui/gesture';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/display/gesture}
- * @example
- * ```html
- * <media-player>
- *   <media-provider>
- *     <media-gesture event="pointerup" action="toggle:paused"></media-gesture>
- *   </media-provider>
- * </media-player>
- * ```
- */
-export class MediaGestureElement extends Host(HTMLElement, Gesture) {
-  static tagName = 'media-gesture';
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-gesture': MediaGestureElement;
-  }
-}

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

@@ -1,137 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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>`;
-  });
-}