@hanifhan1f/vidstack 1.12.13 → 1.12.18

package/src/elements/define/sliders/slider-value-element.ts

@@ -1,49 +0,0 @@
-import { effect } from 'maverick.js';
-import { BOOLEAN, Host, type Attributes } from 'maverick.js/element';
-
-import { SliderValue, type SliderValueProps } from '../../../components/ui/sliders/slider-value';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/sliders/slider-value}
- * @example
- * ```html
- * <media-time-slider>
- *   <media-slider-preview>
- *     <media-slider-value></media-slider-value>
- *   </media-slider-preview>
- * </media-time-slider>
- * ```
- * @example
- * ```html
- * <media-slider-value type="current"></media-slider-value>
- * ```
- * @example
- * ```html
- * <media-slider-value show-hours pad-hours></media-slider-value>
- * ```
- * @example
- * ```html
- * <media-slider-value decimal-places="2"></media-slider-value>
- * ```
- */
-export class MediaSliderValueElement extends Host(HTMLElement, SliderValue) {
-  static tagName = 'media-slider-value';
-
-  static override attrs: Attributes<SliderValueProps> = {
-    padMinutes: {
-      converter: BOOLEAN,
-    },
-  };
-
-  protected onConnect() {
-    effect(() => {
-      this.textContent = this.getValueText();
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-slider-value': MediaSliderValueElement;
-  }
-}

package/src/elements/define/sliders/slider-video-element.ts

@@ -1,59 +0,0 @@
-import { effect } from 'maverick.js';
-import { Host } from 'maverick.js/element';
-import { setAttribute } from 'maverick.js/std';
-
-import { SliderVideo } from '../../../components/ui/sliders/slider-video';
-import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
-import { cloneTemplateContent, createTemplate } from '../../../utils/dom';
-
-const videoTemplate = /* #__PURE__*/ createTemplate(
-  `<video muted playsinline preload="none" style="max-width: unset;"></video>`,
-);
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/sliders/slider-video}
- * @example
- * ```html
- * <media-time-slider>
- *   <media-slider-preview>
- *     <media-slider-video src="/low-res-video.mp4"></media-slider-video>
- *   </media-slider-preview>
- * </media-time-slider>
- * ```
- */
-export class MediaSliderVideoElement extends Host(HTMLElement, SliderVideo) {
-  static tagName = 'media-slider-video';
-
-  #media!: MediaContext;
-  #video = this.#createVideo();
-
-  protected onSetup(): void {
-    this.#media = useMediaContext();
-    this.$state.video.set(this.#video);
-  }
-
-  protected onConnect(): void {
-    const { canLoad } = this.#media.$state,
-      { src, crossOrigin } = this.$state;
-
-    if (this.#video.parentNode !== this) {
-      this.prepend(this.#video);
-    }
-
-    effect(() => {
-      setAttribute(this.#video, 'crossorigin', crossOrigin());
-      setAttribute(this.#video, 'preload', canLoad() ? 'auto' : 'none');
-      setAttribute(this.#video, 'src', src());
-    });
-  }
-
-  #createVideo() {
-    return cloneTemplateContent<HTMLVideoElement>(videoTemplate);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-slider-video': MediaSliderVideoElement;
-  }
-}

package/src/elements/define/sliders/speed-slider-element.ts

@@ -1,34 +0,0 @@
-import { Host } from 'maverick.js/element';
-
-import { SpeedSlider } from '../../../components/ui/sliders/speed-slider';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/sliders/speed-slider}
- * @example
- * ```html
- * <media-speed-slider>
- *   <div class="track"></div>
- *   <div class="track-fill"></div>
- *   <div class="track-progress"></div>
- *   <div class="thumb"></div>
- * </media-speed-slider>
- * ```
- * @example
- * ```html
- * <media-speed-slider>
- *   <!-- ... -->
- *   <media-slider-preview>
- *     <media-slider-value></media-slider-value>
- *   </media-slider-preview>
- * </media-speed-slider>
- * ```
- */
-export class MediaSpeedSliderElement extends Host(HTMLElement, SpeedSlider) {
-  static tagName = 'media-speed-slider';
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-speed-slider': MediaSpeedSliderElement;
-  }
-}

package/src/elements/define/sliders/time-slider-element.ts

@@ -1,34 +0,0 @@
-import { Host } from 'maverick.js/element';
-
-import { TimeSlider } from '../../../components/ui/sliders/time-slider/time-slider';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/sliders/time-slider}
- * @example
- * ```html
- * <media-time-slider>
- *   <div class="track"></div>
- *   <div class="track-fill"></div>
- *   <div class="track-progress"></div>
- *   <div class="thumb"></div>
- * </media-time-slider>
- * ```
- * @example
- * ```html
- * <media-time-slider>
- *   <!-- ... -->
- *   <media-slider-preview>
- *     <media-slider-value></media-slider-value>
- *   <media-slider-preview>
- * </media-time-slider>
- * ```
- */
-export class MediaTimeSliderElement extends Host(HTMLElement, TimeSlider) {
-  static tagName = 'media-time-slider';
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-time-slider': MediaTimeSliderElement;
-  }
-}

package/src/elements/define/sliders/volume-slider-element.ts

@@ -1,34 +0,0 @@
-import { Host } from 'maverick.js/element';
-
-import { VolumeSlider } from '../../../components/ui/sliders/volume-slider';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/sliders/volume-slider}
- * @example
- * ```html
- * <media-volume-slider>
- *   <div class="track"></div>
- *   <div class="track-fill"></div>
- *   <div class="track-progress"></div>
- *   <div class="thumb"></div>
- * </media-volume-slider>
- * ```
- * @example
- * ```html
- * <media-volume-slider>
- *   <!-- ... -->
- *   <media-slider-preview>
- *     <media-slider-value></media-slider-value>
- *   </media-slider-preview>
- * </media-volume-slider>
- * ```
- */
-export class MediaVolumeSliderElement extends Host(HTMLElement, VolumeSlider) {
-  static tagName = 'media-volume-slider';
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-volume-slider': MediaVolumeSliderElement;
-  }
-}

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

@@ -1,96 +0,0 @@
-import { html } from 'lit-html';
-import { Component, effect } from 'maverick.js';
-import { Host } from 'maverick.js/element';
-import { setAttribute } from 'maverick.js/std';
-
-import { requestScopedAnimationFrame } from '../../utils/dom';
-import { LitElement } from '../lit/lit-element';
-
-export interface SpinnerProps {
-  /**
-   * The horizontal (width) and vertical (height) length of the spinner.
-   */
-  size: number;
-  /**
-   * The width of the spinner track and track fill.
-   */
-  trackWidth: number;
-  /**
-   * The percentage of the spinner track that should be filled.
-   */
-  fillPercent: number;
-}
-
-export class Spinner extends Component<SpinnerProps> {
-  static props: SpinnerProps = {
-    size: 96,
-    trackWidth: 8,
-    fillPercent: 50,
-  };
-
-  protected override onConnect(el: HTMLElement): void {
-    requestScopedAnimationFrame(() => {
-      if (!this.connectScope) return;
-
-      const root = el.querySelector('svg')!,
-        track = root.firstElementChild as SVGCircleElement,
-        trackFill = track.nextElementSibling as SVGCircleElement;
-
-      effect(this.#update.bind(this, root, track, trackFill));
-    });
-  }
-
-  #update(root: SVGSVGElement, track: SVGCircleElement, trackFill: SVGCircleElement) {
-    const { size, trackWidth, fillPercent } = this.$props;
-    setAttribute(root, 'width', size());
-    setAttribute(root, 'height', size());
-    setAttribute(track, 'stroke-width', trackWidth());
-    setAttribute(trackFill, 'stroke-width', trackWidth());
-    setAttribute(trackFill, 'stroke-dashoffset', 100 - fillPercent());
-  }
-}
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/display/buffering-indicator}
- * @example
- * ```html
- * <!-- default values below -->
- * <media-spinner size="84" track-width="8" fill-percent="50"></media-spinner>
- * ```
- * @example
- * ```css
- * media-spinner [data-part="track"] {
- *   color: rgb(255 255 255 / 0.5);
- * }
- *
- * media-spinner [data-part="track-fill"] {
- *   color: white;
- * }
- * ```
- */
-export class MediaSpinnerElement extends Host(LitElement, Spinner) {
-  static tagName = 'media-spinner';
-
-  render() {
-    return html`
-      <svg fill="none" viewBox="0 0 120 120" aria-hidden="true" data-part="root">
-        <circle cx="60" cy="60" r="54" stroke="currentColor" data-part="track"></circle>
-        <circle
-          cx="60"
-          cy="60"
-          r="54"
-          stroke="currentColor"
-          pathLength="100"
-          stroke-dasharray="100"
-          data-part="track-fill"
-        ></circle>
-      </svg>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-spinner': MediaSpinnerElement;
-  }
-}

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

@@ -1,63 +0,0 @@
-import { effect } from 'maverick.js';
-import { Host, type Attributes } from 'maverick.js/element';
-import { setAttribute } from 'maverick.js/std';
-
-import { Thumbnail, type ThumbnailProps } from '../../components/ui/thumbnails/thumbnail';
-import { useMediaContext, type MediaContext } from '../../core/api/media-context';
-import { cloneTemplateContent, createTemplate } from '../../utils/dom';
-
-const imgTemplate = /* #__PURE__*/ createTemplate(
-  '<img loading="eager" decoding="async" aria-hidden="true">',
-);
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/display/thumbnail}
- * @example
- * ```html
- * <media-player>
- *   <!-- ... -->
- *   <media-thumbnail
- *     src="https://files.vidstack.io/thumbnails.vtt"
- *     time="10"
- *   ></media-thumbnail>
- * </media-player>
- * ```
- */
-export class MediaThumbnailElement extends Host(HTMLElement, Thumbnail) {
-  static tagName = 'media-thumbnail';
-
-  static override attrs: Attributes<ThumbnailProps> = {
-    crossOrigin: 'crossorigin',
-  };
-
-  #media!: MediaContext;
-  #img = this.#createImg();
-
-  protected onSetup(): void {
-    this.#media = useMediaContext();
-    this.$state.img.set(this.#img);
-  }
-
-  protected onConnect(): void {
-    const { src, crossOrigin } = this.$state;
-
-    if (this.#img.parentNode !== this) {
-      this.prepend(this.#img);
-    }
-
-    effect(() => {
-      setAttribute(this.#img, 'src', src());
-      setAttribute(this.#img, 'crossorigin', crossOrigin());
-    });
-  }
-
-  #createImg() {
-    return cloneTemplateContent<HTMLImageElement>(imgTemplate);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-thumbnail': MediaThumbnailElement;
-  }
-}

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

@@ -1,32 +0,0 @@
-import { effect } from 'maverick.js';
-import { Host } from 'maverick.js/element';
-
-import { Time } from '../../components/ui/time';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/display/time}
- * @example
- * ```html
- * <media-time type="current"></media-time>
- * ```
- * @example
- * ```html
- * <!-- Remaining time. -->
- * <media-time type="current" remainder></media-time>
- * ```
- */
-export class MediaTimeElement extends Host(HTMLElement, Time) {
-  static tagName = 'media-time';
-
-  protected onConnect() {
-    effect(() => {
-      this.textContent = this.$state.timeText();
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-time': MediaTimeElement;
-  }
-}

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

@@ -1,38 +0,0 @@
-import { Component, effect } from 'maverick.js';
-import { Host } from 'maverick.js/element';
-
-import { useMediaContext, type MediaContext } from '../../core/api/media-context';
-
-class Title extends Component {}
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/display/title}
- * @example
- * ```html
- * <media-title></media-title>
- * ```
- */
-export class MediaTitleElement extends Host(HTMLElement, Title) {
-  static tagName = 'media-title';
-
-  #media!: MediaContext;
-
-  protected onSetup() {
-    this.#media = useMediaContext();
-  }
-
-  protected onConnect() {
-    effect(this.#watchTitle.bind(this));
-  }
-
-  #watchTitle() {
-    const { title } = this.#media.$state;
-    this.textContent = title();
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-title': MediaTitleElement;
-  }
-}

package/src/elements/define/tooltips/tooltip-content-element.ts

@@ -1,28 +0,0 @@
-import { Host } from 'maverick.js/element';
-
-import { TooltipContent } from '../../../components/ui/tooltip/tooltip-content';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/tooltip}
- * @example
- * ```html
- * <media-tooltip>
- *   <media-tooltip-trigger>
- *     <media-play-button></media-play-button>
- *   </media-tooltip-trigger>
- *   <media-tooltip-content placement="top">
- *      <span class="play-tooltip-text">Play</span>
- *      <span class="pause-tooltip-text">Pause</span>
- *   </media-tooltip-content>
- * </media-tooltip>
- * ```
- */
-export class MediaTooltipContentElement extends Host(HTMLElement, TooltipContent) {
-  static tagName = 'media-tooltip-content';
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-tooltip-content': MediaTooltipContentElement;
-  }
-}

package/src/elements/define/tooltips/tooltip-element.ts

@@ -1,28 +0,0 @@
-import { Host } from 'maverick.js/element';
-
-import { Tooltip } from '../../../components/ui/tooltip/tooltip';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/tooltip}
- * @example
- * ```html
- * <media-tooltip>
- *   <media-tooltip-trigger>
- *     <media-play-button></media-play-button>
- *   </media-tooltip-trigger>
- *   <media-tooltip-content placement="top start">
- *      <span class="play-tooltip-text">Play</span>
- *      <span class="pause-tooltip-text">Pause</span>
- *   </media-tooltip-content>
- * </media-tooltip>
- * ```
- */
-export class MediaTooltipElement extends Host(HTMLElement, Tooltip) {
-  static tagName = 'media-tooltip';
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-tooltip': MediaTooltipElement;
-  }
-}

package/src/elements/define/tooltips/tooltip-trigger-element.ts

@@ -1,32 +0,0 @@
-import { Host } from 'maverick.js/element';
-
-import { TooltipTrigger } from '../../../components/ui/tooltip/tooltip-trigger';
-
-/**
- * @docs {@link https://www.vidstack.io/docs/wc/player/components/tooltip}
- * @example
- * ```html
- * <media-tooltip>
- *   <media-tooltip-trigger>
- *     <media-play-button></media-play-button>
- *   </media-tooltip-trigger>
- *   <media-tooltip-content placement="top start">
- *      <span class="play-tooltip-text">Play</span>
- *      <span class="pause-tooltip-text">Pause</span>
- *   </media-tooltip-content>
- * </media-tooltip>
- * ```
- */
-export class MediaTooltipTriggerElement extends Host(HTMLElement, TooltipTrigger) {
-  static tagName = 'media-tooltip-trigger';
-
-  onConnect() {
-    this.style.display = 'contents';
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'media-tooltip-trigger': MediaTooltipTriggerElement;
-  }
-}

package/src/elements/icon.ts

@@ -1,30 +0,0 @@
-import { html } from 'lit-html';
-import type { DirectiveResult } from 'lit-html/directive.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
-import { type ReadSignal } from 'maverick.js';
-import { isString } from 'maverick.js/std';
-
-import { $signal } from './lit/directives/signal';
-
-export function Icon({ name, class: _class, state, paths, viewBox = '0 0 32 32' }: IconProps) {
-  return html`<svg
-    class="${'vds-icon' + (_class ? ` ${_class}` : '')}"
-    viewBox="${viewBox}"
-    fill="none"
-    aria-hidden="true"
-    focusable="false"
-    xmlns="http://www.w3.org/2000/svg"
-    data-icon=${ifDefined(name ?? state)}
-  >
-    ${!isString(paths) ? $signal(paths) : unsafeSVG(paths)}
-  </svg>`;
-}
-
-export interface IconProps {
-  name?: string;
-  class?: string;
-  state?: string;
-  viewBox?: string;
-  paths: string | ReadSignal<string> | ReadSignal<DirectiveResult>;
-}

package/src/elements/index.ts

@@ -1,71 +0,0 @@
-export { defineCustomElement } from 'maverick.js/element';
-
-export { MediaCaptionsElement } from './define/captions-element';
-export { MediaGestureElement } from './define/gesture-element';
-export { MediaProviderElement } from './define/provider-element';
-export { MediaPlayerElement } from './define/player-element';
-export { MediaAnnouncerElement } from './define/announcer-element';
-export { MediaPosterElement } from './define/poster-element';
-export { MediaThumbnailElement } from './define/thumbnail-element';
-export { MediaTimeElement } from './define/time-element';
-export { MediaControlsElement } from './define/controls-element';
-export { MediaControlsGroupElement } from './define/controls-group-element';
-export { MediaTitleElement } from './define/title-element';
-export { MediaChapterTitleElement } from './define/chapter-title-element';
-export { MediaSpinnerElement } from './define/spinner-element';
-
-// Layouts
-export { MediaLayoutElement } from './define/layouts/layout-element';
-
-// Default Layout
-export { MediaAudioLayoutElement } from './define/layouts/default/audio-layout-element';
-export { MediaVideoLayoutElement } from './define/layouts/default/video-layout-element';
-
-// Plyr Layout
-export { MediaPlyrLayoutElement } from './define/layouts/plyr/plyr-layout-element';
-
-// Buttons
-export { MediaAirPlayButtonElement } from './define/buttons/airplay-button-element';
-export { MediaCaptionButtonElement } from './define/buttons/caption-button-element';
-export { MediaFullscreenButtonElement } from './define/buttons/fullscreen-button-element';
-export { MediaGoogleCastButtonElement } from './define/buttons/google-cast-button-element';
-export { MediaLiveButtonElement } from './define/buttons/live-button-element';
-export { MediaMuteButtonElement } from './define/buttons/mute-button-element';
-export { MediaPIPButtonElement } from './define/buttons/pip-button-element';
-export { MediaPlayButtonElement } from './define/buttons/play-button-element';
-export { MediaSeekButtonElement } from './define/buttons/seek-button-element';
-export { MediaToggleButtonElement } from './define/buttons/toggle-button-element';
-
-// Tooltips
-export { MediaTooltipElement } from './define/tooltips/tooltip-element';
-export { MediaTooltipTriggerElement } from './define/tooltips/tooltip-trigger-element';
-export { MediaTooltipContentElement } from './define/tooltips/tooltip-content-element';
-
-// Menus
-export { MediaAudioRadioGroupElement } from './define/menus/audio-radio-group-element';
-export { MediaCaptionsRadioGroupElement } from './define/menus/captions-radio-group-element';
-export { MediaMenuElement } from './define/menus/menu-element';
-export { MediaMenuButtonElement } from './define/menus/menu-button-element';
-export { MediaMenuPortalElement } from './define/menus/menu-portal-element';
-export { MediaMenuItemElement } from './define/menus/menu-item-element';
-export { MediaMenuItemsElement } from './define/menus/menu-items-element';
-export { MediaChaptersRadioGroupElement } from './define/menus/chapters-radio-group-element';
-export { MediaSpeedRadioGroupElement } from './define/menus/speed-radio-group-element';
-export { MediaAudioGainRadioGroupElement } from './define/menus/audio-gain-group-element';
-export { MediaQualityRadioGroupElement } from './define/menus/quality-radio-group-element';
-export { MediaRadioElement } from './define/menus/radio-element';
-export { MediaRadioGroupElement } from './define/menus/radio-group-element';
-
-// Sliders
-export { MediaSliderElement } from './define/sliders/slider-element';
-export { MediaSliderThumbnailElement } from './define/sliders/slider-thumbnail-element';
-export { MediaSliderValueElement } from './define/sliders/slider-value-element';
-export { MediaSliderVideoElement } from './define/sliders/slider-video-element';
-export { MediaTimeSliderElement } from './define/sliders/time-slider-element';
-export { MediaSliderPreviewElement } from './define/sliders/slider-preview-element';
-export { MediaVolumeSliderElement } from './define/sliders/volume-slider-element';
-export { MediaAudioGainSliderElement } from './define/sliders/audio-gain-slider-element';
-export { MediaSpeedSliderElement } from './define/sliders/speed-slider-element';
-export { MediaQualitySliderElement } from './define/sliders/quality-slider-element';
-export { MediaSliderChaptersElement } from './define/sliders/slider-chapters-element';
-export { MediaSliderStepsElement } from './define/sliders/slider-steps-element';