@hanifhan1f/vidstack 1.12.13

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,71 @@
+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';

package/src/elements/lit/directives/signal.ts

@@ -0,0 +1,80 @@
+import { nothing } from 'lit-html';
+import { AsyncDirective, directive, PartType, type PartInfo } from 'lit-html/async-directive.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { computed, effect, peek, type ReadSignal, type StopEffect } from 'maverick.js';
+
+class SignalDirective extends AsyncDirective {
+  #signal: ReadSignal<any> | null = null;
+  #isAttr = false;
+  #stop: StopEffect | null = null;
+
+  constructor(part: PartInfo) {
+    super(part);
+    this.#isAttr = part.type === PartType.ATTRIBUTE || part.type === PartType.BOOLEAN_ATTRIBUTE;
+  }
+
+  render(signal: ReadSignal<any> | null) {
+    if (signal !== this.#signal) {
+      this.disconnected();
+      this.#signal = signal;
+      if (this.isConnected) this.#watch();
+    }
+
+    return this.#signal ? this.#resolveValue(peek(this.#signal)) : nothing;
+  }
+
+  override reconnected() {
+    this.#watch();
+  }
+
+  override disconnected() {
+    this.#stop?.();
+    this.#stop = null;
+  }
+
+  #watch() {
+    if (!this.#signal) return;
+    this.#stop = effect(this.#onValueChange.bind(this));
+  }
+
+  #resolveValue(value: any) {
+    return this.#isAttr ? ifDefined(value) : value;
+  }
+
+  #setValue(value: any) {
+    this.setValue(this.#resolveValue(value));
+  }
+
+  #onValueChange() {
+    if (__DEV__) {
+      try {
+        this.#setValue(this.#signal?.());
+      } catch (error) {
+        if (
+          error instanceof Error &&
+          error.message.includes('This `ChildPart` has no `parentNode`')
+        ) {
+          const svelteDynamicImportExample = [
+            "{#await import('./Player.svelte') then {default: Player}}",
+            '  <svelte:component this={Player} />',
+            '{/await}',
+          ].join('\n');
+
+          console.warn(
+            `[vidstack] Failed to render most likely due to a hydration issue with your framework.` +
+              ` Dynamically importing the player should resolve the issue.` +
+              `\n\nSvelte Example:\n\n${svelteDynamicImportExample}`,
+          );
+        } else {
+          console.error(error);
+        }
+      }
+    } else {
+      this.#setValue(this.#signal?.());
+    }
+  }
+}
+
+export function $signal(compute: () => any): any {
+  return directive(SignalDirective)(computed(compute));
+}

package/src/elements/lit/html.ts

@@ -0,0 +1,11 @@
+import { html } from 'lit-html';
+import { isReadSignal } from 'maverick.js';
+
+import { $signal } from './directives/signal';
+
+/**
+ * Extends `lit-html` by setting all signal values as a `SignalDirective`.
+ */
+export const $html = (strings: TemplateStringsArray, ...values: any[]) => {
+  return html(strings, ...values.map((val) => (isReadSignal(val) ? $signal(val) : val)));
+};

package/src/elements/lit/lit-element.ts

@@ -0,0 +1,23 @@
+import { render } from 'lit-html';
+
+export class LitElement extends HTMLElement {
+  rootPart: any = null;
+
+  connectedCallback() {
+    this.rootPart = render((this as unknown as LitRenderer).render(), this, {
+      renderBefore: this.firstChild,
+    });
+
+    this.rootPart.setConnected(true);
+  }
+
+  disconnectedCallback() {
+    this.rootPart?.setConnected(false);
+    this.rootPart = null;
+    render(null, this);
+  }
+}
+
+export interface LitRenderer {
+  render(): any;
+}

package/src/elements/state-controller.ts

@@ -0,0 +1,48 @@
+import { effect, onDispose, type ReadSignal } from 'maverick.js';
+
+import { requestScopedAnimationFrame } from '../utils/dom';
+
+export class StateController {
+  #el: HTMLElement | null;
+  #states: ReadSignal<Record<string, boolean>>;
+
+  constructor(el: HTMLElement | null, states: ReadSignal<Record<string, boolean>>) {
+    this.#el = el;
+    this.#states = states;
+
+    if (this.#el) this.#observe(this.#el);
+
+    onDispose(() => {
+      this.#el = null;
+    });
+
+    requestScopedAnimationFrame(() => {
+      const tooltip = this.#getTooltip();
+      if (tooltip) this.#observe(tooltip);
+    });
+  }
+
+  #getTooltip() {
+    if (!this.#el) return;
+
+    const describedBy =
+      this.#el.getAttribute('aria-describedby') ?? this.#el.getAttribute('data-describedby');
+
+    return describedBy && document.getElementById(describedBy);
+  }
+
+  #observe(root: HTMLElement) {
+    effect(this.#update.bind(this, root));
+  }
+
+  #update(root: HTMLElement) {
+    const states = this.#states();
+    for (const state of Object.keys(states)) {
+      const el = root.querySelector<HTMLElement>(`[data-state="${state}"]`);
+      if (el) {
+        const display = el.localName === 'slot' ? 'contents' : 'inline-block';
+        el.style.display = !states[state] ? 'none' : display;
+      }
+    }
+  }
+}