@hanifhan1f/vidstack 1.12.13

package/src/components/ui/poster.ts

@@ -0,0 +1,187 @@
+import { Component, effect, State } from 'maverick.js';
+import { EventsController, isNull, listenEvent, setAttribute } from 'maverick.js/std';
+
+import { useMediaContext, type MediaContext } from '../../core/api/media-context';
+import type { MediaCrossOrigin } from '../../core/api/types';
+import { preconnect } from '../../utils/network';
+
+export interface PosterProps {
+  /**
+   * The URL of the poster image resource.
+   */
+  src: string | null;
+  /**
+   * ♿ **ARIA:** Provides alternative information for a poster image if a user for some reason
+   * cannot view it.
+   */
+  alt: string | null;
+  /**
+   * Defines how the img handles cross-origin requests, thereby enabling the
+   * configuration of the CORS requests for the element's fetched data.
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin}
+   */
+  crossOrigin: true | MediaCrossOrigin | null;
+}
+
+export interface PosterState {
+  img: HTMLImageElement | null;
+  src: string | null;
+  alt: string | null;
+  crossOrigin: MediaCrossOrigin | null;
+  loading: boolean;
+  error: ErrorEvent | null;
+  hidden: boolean;
+}
+
+/**
+ * Loads and displays the current media poster image. By default, the media provider's
+ * loading strategy is respected meaning the poster won't load until the media can.
+ *
+ * @attr data-visible - Whether poster image should be shown.
+ * @attr data-loading - Whether poster image is loading.
+ * @attr data-error - Whether an error occurred loading poster.
+ * @attr data-hidden - Whether poster has no src or has failed to load.
+ * @docs {@link https://www.vidstack.io/docs/player/components/media/poster}
+ */
+export class Poster extends Component<PosterProps, PosterState> {
+  static props: PosterProps = {
+    src: null,
+    alt: null,
+    crossOrigin: null,
+  };
+
+  static state = new State<PosterState>({
+    img: null,
+    src: null,
+    alt: null,
+    crossOrigin: null,
+    loading: true,
+    error: null,
+    hidden: false,
+  });
+
+  #media!: MediaContext;
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+    this.#watchSrc();
+    this.#watchAlt();
+    this.#watchCrossOrigin();
+    this.#watchHidden();
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    el.style.setProperty('pointer-events', 'none');
+
+    effect(this.#watchImg.bind(this));
+    effect(this.#watchSrc.bind(this));
+    effect(this.#watchAlt.bind(this));
+    effect(this.#watchCrossOrigin.bind(this));
+    effect(this.#watchHidden.bind(this));
+
+    const { started } = this.#media.$state;
+    this.setAttributes({
+      'data-visible': () => !started() && !this.$state.hidden(),
+      'data-loading': this.#isLoading.bind(this),
+      'data-error': this.#hasError.bind(this),
+      'data-hidden': this.$state.hidden,
+    });
+  }
+
+  protected override onConnect(el: HTMLElement) {
+    effect(this.#onPreconnect.bind(this));
+    effect(this.#onLoadStart.bind(this));
+  }
+
+  #hasError() {
+    const { error } = this.$state;
+    return !isNull(error());
+  }
+
+  #onPreconnect() {
+    const { canLoadPoster, poster } = this.#media.$state;
+    if (!canLoadPoster() && poster()) preconnect(poster(), 'preconnect');
+  }
+
+  #watchHidden() {
+    const { src } = this.$props,
+      { poster, nativeControls } = this.#media.$state;
+    this.el && setAttribute(this.el, 'display', nativeControls() ? 'none' : null);
+    this.$state.hidden.set(this.#hasError() || !(src() || poster()) || nativeControls());
+  }
+
+  #isLoading() {
+    const { loading, hidden } = this.$state;
+    return !hidden() && loading();
+  }
+
+  #watchImg() {
+    const img = this.$state.img();
+    if (!img) return;
+
+    new EventsController(img)
+      .add('load', this.#onLoad.bind(this))
+      .add('error', this.#onError.bind(this));
+
+    if (img.complete) this.#onLoad();
+  }
+
+  #prevSrc = '';
+  #watchSrc() {
+    const { poster: defaultPoster } = this.#media.$props,
+      { canLoadPoster, providedPoster, inferredPoster } = this.#media.$state;
+
+    // Either src set on this poster component, or defined on the player.
+    const src = this.$props.src() || '',
+      poster = src || defaultPoster() || inferredPoster();
+
+    if (this.#prevSrc === providedPoster()) {
+      providedPoster.set(src);
+    }
+
+    this.$state.src.set(canLoadPoster() && poster.length ? poster : null);
+    this.#prevSrc = src;
+  }
+
+  #watchAlt() {
+    const { src } = this.$props,
+      { alt } = this.$state,
+      { poster } = this.#media.$state;
+    alt.set(src() || poster() ? this.$props.alt() : null);
+  }
+
+  #watchCrossOrigin() {
+    const { crossOrigin: crossOriginProp } = this.$props,
+      { crossOrigin: crossOriginState } = this.$state,
+      { crossOrigin: mediaCrossOrigin, poster: src } = this.#media.$state,
+      crossOrigin = crossOriginProp() !== null ? crossOriginProp() : mediaCrossOrigin();
+
+    crossOriginState.set(
+      /ytimg\.com|vimeo/.test(src() || '')
+        ? null
+        : crossOrigin === true
+          ? 'anonymous'
+          : crossOrigin,
+    );
+  }
+
+  #onLoadStart() {
+    const { loading, error } = this.$state,
+      { canLoadPoster, poster } = this.#media.$state;
+    loading.set(canLoadPoster() && !!poster());
+    error.set(null);
+  }
+
+  #onLoad() {
+    const { loading, error } = this.$state;
+    loading.set(false);
+    error.set(null);
+  }
+
+  #onError(event: ErrorEvent) {
+    const { loading, error } = this.$state;
+    loading.set(false);
+    error.set(event);
+  }
+}

package/src/components/ui/sliders/audio-gain-slider.ts

@@ -0,0 +1,150 @@
+import { Component, effect, provideContext } from 'maverick.js';
+
+import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
+import type { MediaRequestEvents } from '../../../core/api/media-request-events';
+import { $ariaBool } from '../../../utils/aria';
+import { setAttributeIfEmpty } from '../../../utils/dom';
+import { round } from '../../../utils/number';
+import type { SliderCSSVars } from './slider/api/cssvars';
+import type {
+  SliderDragValueChangeEvent,
+  SliderEvents,
+  SliderValueChangeEvent,
+} from './slider/api/events';
+import { sliderState, type SliderState } from './slider/api/state';
+import { sliderValueFormatContext } from './slider/format';
+import { SliderController, type SliderControllerProps } from './slider/slider-controller';
+
+/**
+ * Versatile and user-friendly audio boost control designed for seamless cross-browser and provider
+ * compatibility and accessibility with ARIA support. It offers a smooth user experience for both
+ * mouse and touch interactions and is highly customizable in terms of styling. Users can
+ * effortlessly change the audio gain within the range 0 to 100.
+ *
+ * @attr data-dragging - Whether slider thumb is being dragged.
+ * @attr data-pointing - Whether user's pointing device is over slider.
+ * @attr data-active - Whether slider is being interacted with.
+ * @attr data-focus - Whether slider is being keyboard focused.
+ * @attr data-hocus - Whether slider is being keyboard focused or hovered over.
+ * @attr data-supported - Whether audio gain is supported.
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/audio-gain-slider}
+ */
+export class AudioGainSlider extends Component<
+  AudioGainSliderProps,
+  AudioGainSliderState,
+  AudioGainSliderEvents,
+  AudioGainSliderCSSVars
+> {
+  static props: AudioGainSliderProps = {
+    ...SliderController.props,
+    step: 25,
+    keyStep: 25,
+    shiftKeyMultiplier: 2,
+    min: 0,
+    max: 300,
+  };
+
+  static state = sliderState;
+
+  #media!: MediaContext;
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+
+    provideContext(sliderValueFormatContext, {
+      default: 'percent',
+      percent: (_, decimalPlaces) => {
+        return round(this.$state.value(), decimalPlaces) + '%';
+      },
+    });
+
+    new SliderController({
+      getStep: this.$props.step,
+      getKeyStep: this.$props.keyStep,
+      roundValue: Math.round,
+      isDisabled: this.#isDisabled.bind(this),
+      aria: {
+        valueNow: this.#getARIAValueNow.bind(this),
+        valueText: this.#getARIAValueText.bind(this),
+      },
+      onDragValueChange: this.#onDragValueChange.bind(this),
+      onValueChange: this.#onValueChange.bind(this),
+    }).attach(this);
+
+    effect(this.#watchMinMax.bind(this));
+    effect(this.#watchAudioGain.bind(this));
+  }
+
+  protected override onAttach(el: HTMLElement) {
+    el.setAttribute('data-media-audio-gain-slider', '');
+    setAttributeIfEmpty(el, 'aria-label', 'Audio Boost');
+
+    const { canSetAudioGain } = this.#media.$state;
+    this.setAttributes({
+      'data-supported': canSetAudioGain,
+      'aria-hidden': $ariaBool(() => !canSetAudioGain()),
+    });
+  }
+
+  #getARIAValueNow() {
+    const { value } = this.$state;
+    return Math.round(value());
+  }
+
+  #getARIAValueText() {
+    const { value } = this.$state;
+    return value() + '%';
+  }
+
+  #watchMinMax() {
+    const { min, max } = this.$props;
+    this.$state.min.set(min());
+    this.$state.max.set(max());
+  }
+
+  #watchAudioGain() {
+    const { audioGain } = this.#media.$state,
+      value = ((audioGain() ?? 1) - 1) * 100;
+    this.$state.value.set(value);
+    this.dispatch('value-change', { detail: value });
+  }
+
+  #isDisabled() {
+    const { disabled } = this.$props,
+      { canSetAudioGain } = this.#media.$state;
+    return disabled() || !canSetAudioGain();
+  }
+
+  #onAudioGainChange(event: SliderValueChangeEvent | SliderDragValueChangeEvent) {
+    if (!event.trigger) return;
+    const gain = round(1 + event.detail / 100, 2);
+    this.#media.remote.changeAudioGain(gain, event);
+  }
+
+  #onValueChange(event: SliderValueChangeEvent): void {
+    this.#onAudioGainChange(event);
+  }
+
+  #onDragValueChange(event: SliderDragValueChangeEvent): void {
+    this.#onAudioGainChange(event);
+  }
+}
+
+export interface AudioGainSliderProps extends SliderControllerProps {
+  /**
+   * The minimum audio gain boost represented as a percentage.
+   */
+  min: number;
+  /**
+   * The minimum audio gain boost represented as a percentage.
+   */
+  max: number;
+}
+
+export interface AudioGainSliderState extends SliderState {}
+
+export interface AudioGainSliderEvents
+  extends SliderEvents,
+    Pick<MediaRequestEvents, 'media-audio-gain-change-request'> {}
+
+export interface AudioGainSliderCSSVars extends SliderCSSVars {}

package/src/components/ui/sliders/quality-slider.ts

@@ -0,0 +1,148 @@
+import throttle from 'just-throttle';
+import { Component, computed, effect, peek } from 'maverick.js';
+
+import { useMediaContext, type MediaContext } from '../../../core/api/media-context';
+import type { MediaRequestEvents } from '../../../core/api/media-request-events';
+import { sortVideoQualities } from '../../../core/quality/utils';
+import { $ariaBool } from '../../../utils/aria';
+import { setAttributeIfEmpty } from '../../../utils/dom';
+import type { SliderCSSVars } from './slider/api/cssvars';
+import type {
+  SliderDragValueChangeEvent,
+  SliderEvents,
+  SliderValueChangeEvent,
+} from './slider/api/events';
+import { sliderState, type SliderState } from './slider/api/state';
+import { SliderController, type SliderControllerProps } from './slider/slider-controller';
+
+/**
+ * Versatile and user-friendly input video quality control designed for seamless cross-browser and
+ * provider compatibility and accessibility with ARIA support. It offers a smooth user experience
+ * for both mouse and touch interactions and is highly customizable in terms of styling.
+ *
+ * @attr data-dragging - Whether slider thumb is being dragged.
+ * @attr data-pointing - Whether user's pointing device is over slider.
+ * @attr data-active - Whether slider is being interacted with.
+ * @attr data-focus - Whether slider is being keyboard focused.
+ * @attr data-hocus - Whether slider is being keyboard focused or hovered over.
+ * @attr data-supported - Whether setting video quality is supported.
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/quality-slider}
+ */
+export class QualitySlider extends Component<
+  QualitySliderProps,
+  QualitySliderState,
+  QualitySliderEvents,
+  QualitySliderCSSVars
+> {
+  static props: QualitySliderProps = {
+    ...SliderController.props,
+    step: 1,
+    keyStep: 1,
+    shiftKeyMultiplier: 1,
+  };
+
+  static state = sliderState;
+
+  #media!: MediaContext;
+
+  #sortedQualities = computed(() => {
+    const { qualities } = this.#media.$state;
+    return sortVideoQualities(qualities());
+  });
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+
+    new SliderController({
+      getStep: this.$props.step,
+      getKeyStep: this.$props.keyStep,
+      roundValue: Math.round,
+      isDisabled: this.#isDisabled.bind(this),
+      aria: {
+        valueNow: this.#getARIAValueNow.bind(this),
+        valueText: this.#getARIAValueText.bind(this),
+      },
+      onDragValueChange: this.#onDragValueChange.bind(this),
+      onValueChange: this.#onValueChange.bind(this),
+    }).attach(this);
+
+    effect(this.#watchMax.bind(this));
+    effect(this.#watchQuality.bind(this));
+  }
+
+  protected override onAttach(el: HTMLElement) {
+    el.setAttribute('data-media-quality-slider', '');
+    setAttributeIfEmpty(el, 'aria-label', 'Video Quality');
+
+    const { qualities, canSetQuality } = this.#media.$state,
+      $supported = computed(() => canSetQuality() && qualities().length > 0);
+
+    this.setAttributes({
+      'data-supported': $supported,
+      'aria-hidden': $ariaBool(() => !$supported()),
+    });
+  }
+
+  #getARIAValueNow() {
+    const { value } = this.$state;
+    return value();
+  }
+
+  #getARIAValueText() {
+    const { quality } = this.#media.$state;
+
+    if (!quality()) return '';
+
+    const { height, bitrate } = quality()!,
+      bitrateText = bitrate && bitrate > 0 ? `${(bitrate / 1000000).toFixed(2)} Mbps` : null;
+
+    return height ? `${height}p${bitrateText ? ` (${bitrateText})` : ''}` : 'Auto';
+  }
+
+  #watchMax() {
+    const $qualities = this.#sortedQualities();
+    this.$state.max.set(Math.max(0, $qualities.length - 1));
+  }
+
+  #watchQuality() {
+    let { quality } = this.#media.$state,
+      $qualities = this.#sortedQualities(),
+      value = Math.max(0, $qualities.indexOf(quality()!));
+    this.$state.value.set(value);
+    this.dispatch('value-change', { detail: value });
+  }
+
+  #isDisabled() {
+    const { disabled } = this.$props,
+      { canSetQuality, qualities } = this.#media.$state;
+    return disabled() || qualities().length <= 1 || !canSetQuality();
+  }
+
+  #throttledQualityChange = throttle(this.#onQualityChange.bind(this), 25);
+  #onQualityChange(event: SliderValueChangeEvent | SliderDragValueChangeEvent) {
+    if (!event.trigger) return;
+
+    const { qualities } = this.#media,
+      quality = peek(this.#sortedQualities)[event.detail];
+
+    this.#media.remote.changeQuality(qualities.indexOf(quality), event);
+  }
+
+  #onValueChange(event: SliderValueChangeEvent): void {
+    this.#throttledQualityChange(event);
+  }
+
+  #onDragValueChange(event: SliderDragValueChangeEvent): void {
+    this.#throttledQualityChange(event);
+  }
+}
+
+export interface QualitySliderProps extends SliderControllerProps {}
+
+export interface QualitySliderState extends SliderState {}
+
+export interface QualitySliderEvents
+  extends SliderEvents,
+    Pick<MediaRequestEvents, 'media-quality-change-request'> {}
+
+export interface QualitySliderCSSVars extends SliderCSSVars {}

package/src/components/ui/sliders/slider/api/cssvars.ts

@@ -0,0 +1,10 @@
+export interface SliderCSSVars {
+  /**
+   * The fill rate expressed as a percentage.
+   */
+  readonly 'slider-fill': string;
+  /**
+   * The pointer rate expressed as a percentage.
+   */
+  readonly 'slider-pointer': string;
+}

package/src/components/ui/sliders/slider/api/events.ts

@@ -0,0 +1,65 @@
+import type { DOMEvent } from 'maverick.js/std';
+
+import type { Slider } from '../slider';
+
+export interface SliderEvents {
+  'drag-start': SliderDragStartEvent;
+  'drag-end': SliderDragEndEvent;
+  'value-change': SliderValueChangeEvent;
+  'drag-value-change': SliderDragValueChangeEvent;
+  'pointer-value-change': SliderPointerValueChangeEvent;
+}
+
+export interface SliderEvent<Detail = unknown> extends DOMEvent<Detail> {
+  target: Slider;
+}
+
+/**
+ * Fired when the user begins interacting with the slider and dragging the thumb. The event
+ * detail contains the current value the drag is starting at.
+ *
+ * @detail value
+ */
+export interface SliderDragStartEvent extends SliderEvent<number> {
+  readonly trigger: PointerEvent | KeyboardEvent;
+}
+
+/**
+ * Fired when the user stops dragging the slider thumb. The event detail contains the value
+ * the drag is ending at.
+ *
+ * @detail value
+ */
+export interface SliderDragEndEvent extends SliderEvent<number> {
+  readonly trigger: PointerEvent | KeyboardEvent;
+}
+
+/**
+ * Fired when the slider value changes. The event detail contains the current value.
+ *
+ * @detail value
+ */
+export interface SliderValueChangeEvent extends SliderEvent<number> {
+  readonly trigger: PointerEvent | KeyboardEvent | undefined;
+}
+
+/**
+ * Fired when the slider drag value changes. The drag value indicates the last slider value that
+ * the user has dragged to. The event detail contains the value.
+ *
+ * @detail value
+ */
+export interface SliderDragValueChangeEvent extends SliderEvent<number> {
+  readonly trigger: PointerEvent | KeyboardEvent;
+}
+
+/**
+ * Fired when the device pointer is inside the slider region and it's position changes. The
+ * event detail contains the preview value. Do note, this includes touch, mouse, and keyboard
+ * devices.
+ *
+ * @detail pointerValue
+ */
+export interface SliderPointerValueChangeEvent extends SliderEvent<number> {
+  readonly trigger: PointerEvent | KeyboardEvent;
+}

package/src/components/ui/sliders/slider/api/state.ts

@@ -0,0 +1,101 @@
+import { State, type Store } from 'maverick.js';
+
+export const sliderState = new State<SliderState>({
+  min: 0,
+  max: 100,
+  value: 0,
+  step: 1,
+  pointerValue: 0,
+  focused: false,
+  dragging: false,
+  pointing: false,
+  hidden: false,
+  get active() {
+    return this.dragging || this.focused || this.pointing;
+  },
+  get fillRate() {
+    return calcRate(this.min, this.max, this.value);
+  },
+  get fillPercent() {
+    return this.fillRate * 100;
+  },
+  get pointerRate() {
+    return calcRate(this.min, this.max, this.pointerValue);
+  },
+  get pointerPercent() {
+    return this.pointerRate * 100;
+  },
+});
+
+function calcRate(min: number, max: number, value: number) {
+  const range = max - min,
+    offset = value - min;
+  return range > 0 ? offset / range : 0;
+}
+
+export interface SliderStore extends Store<SliderState> {}
+
+export interface SliderState {
+  /**
+   * The current slider value.
+   */
+  value: number;
+  /**
+   * The value at which the device pointer is pointing to inside the slider.
+   */
+  pointerValue: number;
+  /**
+   * The minimum slider value.
+   */
+  min: number;
+  /**
+   * The maximum slider value.
+   */
+  max: number;
+  /**
+   * The granularity that the slider value must adhere to.
+   */
+  step: number;
+  /**
+   * Whether the slider has keyboard focus.
+   */
+  focused: boolean;
+  /**
+   * Whether the slider thumb is currently being dragged.
+   */
+  dragging: boolean;
+  /**
+   * Whether a device pointer is within the slider bounds.
+   */
+  pointing: boolean;
+  /** Whether the slider is not visible. */
+  hidden: boolean;
+  /**
+   * Whether the slider is being interacted with via keyboard or pointer device.
+   */
+  readonly active: boolean;
+  /**
+   * The current value to range ratio.
+   *
+   * @signal
+   * @example
+   * `min` = 0
+   * `max` = 10
+   * `value` = 5
+   * `range` = 10 (max - min)
+   * `fillRate` = 0.5 (result)
+   */
+  readonly fillRate: number;
+  /**
+   * The fill rate expressed as a percentage (`fillRate * 100`).
+   */
+  readonly fillPercent: number;
+  /**
+   * The pointer value to range ratio.
+   */
+  readonly pointerRate: number;
+  /**
+   * The pointer rate expressed as a percentage (`pointerRate * 100`).
+   */
+  readonly pointerPercent: number;
+}