@hanifhan1f/vidstack 1.12.13

package/src/components/ui/menu/radio-groups/chapters-radio-group.ts

@@ -0,0 +1,211 @@
+import {
+  Component,
+  effect,
+  hasProvidedContext,
+  method,
+  peek,
+  prop,
+  signal,
+  useContext,
+} from 'maverick.js';
+import { DOMEvent, EventsController, isNumber, listenEvent, setStyle } from 'maverick.js/std';
+import type { VTTCue } from 'media-captions';
+
+import { useMediaContext, type MediaContext } from '../../../../core/api/media-context';
+import type { TextTrack } from '../../../../core/tracks/text/text-track';
+import { isCueActive, watchActiveTextTrack } from '../../../../core/tracks/text/utils';
+import { requestScopedAnimationFrame } from '../../../../utils/dom';
+import { round } from '../../../../utils/number';
+import { formatSpokenTime, formatTime } from '../../../../utils/time';
+import type { ThumbnailSrc } from '../../thumbnails/thumbnail-loader';
+import { menuContext, type MenuContext } from '../menu-context';
+import type { RadioOption } from '../radio/radio';
+import { RadioGroupController } from '../radio/radio-group-controller';
+
+/**
+ * This component manages media chapters inside of a radio group.
+ *
+ * @attr data-thumbnails - Whether thumbnails are available.
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/chapters-radio-group}
+ */
+export class ChaptersRadioGroup extends Component<
+  ChapterRadioGroupProps,
+  {},
+  ChaptersRadioGroupEvents
+> {
+  static props: ChapterRadioGroupProps = {
+    thumbnails: null,
+  };
+
+  #media!: MediaContext;
+  #menu?: MenuContext;
+  #controller: RadioGroupController;
+
+  #track = signal<TextTrack | null>(null);
+  #cues = signal<readonly VTTCue[]>([]);
+
+  @prop
+  get value() {
+    return this.#controller.value;
+  }
+
+  @prop
+  get disabled() {
+    return !this.#cues()?.length;
+  }
+
+  constructor() {
+    super();
+    this.#controller = new RadioGroupController();
+    this.#controller.onValueChange = this.#onValueChange.bind(this);
+  }
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+
+    if (hasProvidedContext(menuContext)) {
+      this.#menu = useContext(menuContext);
+    }
+
+    const { thumbnails } = this.$props;
+    this.setAttributes({
+      'data-thumbnails': () => !!thumbnails(),
+    });
+  }
+
+  protected override onAttach(el: HTMLElement) {
+    this.#menu?.attachObserver({
+      onOpen: this.#onOpen.bind(this),
+    });
+  }
+
+  @method
+  getOptions(): ChaptersRadioOption[] {
+    const { seekableStart, seekableEnd } = this.#media.$state,
+      startTime = seekableStart(),
+      endTime = seekableEnd();
+    return this.#cues().map((cue, i) => ({
+      cue,
+      value: i.toString(),
+      label: cue.text,
+      startTime: formatTime(Math.max(0, cue.startTime - startTime)),
+      duration: formatSpokenTime(
+        Math.min(endTime, cue.endTime) - Math.max(startTime, cue.startTime),
+      ),
+    }));
+  }
+
+  #onOpen() {
+    peek(() => this.#watchCurrentTime());
+  }
+
+  protected override onConnect(el: HTMLElement) {
+    effect(this.#watchCurrentTime.bind(this));
+    effect(this.#watchControllerDisabled.bind(this));
+    effect(this.#watchTrack.bind(this));
+    watchActiveTextTrack(this.#media.textTracks, 'chapters', this.#track.set);
+  }
+
+  #watchTrack() {
+    const track = this.#track();
+    if (!track) return;
+
+    const onCuesChange = this.#onCuesChange.bind(this, track);
+
+    onCuesChange();
+
+    new EventsController(track).add('add-cue', onCuesChange).add('remove-cue', onCuesChange);
+
+    return () => {
+      this.#cues.set([]);
+    };
+  }
+
+  #onCuesChange(track: TextTrack) {
+    const { seekableStart, seekableEnd } = this.#media.$state,
+      startTime = seekableStart(),
+      endTime = seekableEnd();
+    this.#cues.set(
+      [...track.cues].filter((cue) => cue.startTime <= endTime && cue.endTime >= startTime),
+    );
+  }
+
+  #watchCurrentTime() {
+    if (!this.#menu?.expanded()) return;
+
+    const track = this.#track();
+
+    if (!track) {
+      this.#controller.value = '-1';
+      return;
+    }
+
+    const { realCurrentTime, seekableStart, seekableEnd } = this.#media.$state,
+      startTime = seekableStart(),
+      endTime = seekableEnd(),
+      time = realCurrentTime(),
+      activeCueIndex = this.#cues().findIndex((cue) => isCueActive(cue, time));
+
+    this.#controller.value = activeCueIndex.toString();
+
+    if (activeCueIndex >= 0) {
+      requestScopedAnimationFrame(() => {
+        if (!this.connectScope) return;
+
+        const cue = this.#cues()[activeCueIndex],
+          radio = this.el!.querySelector(`[aria-checked='true']`),
+          cueStartTime = Math.max(startTime, cue.startTime),
+          duration = Math.min(endTime, cue.endTime) - cueStartTime,
+          playedPercent = (Math.max(0, time - cueStartTime) / duration) * 100;
+
+        radio && setStyle(radio as HTMLElement, '--progress', round(playedPercent, 3) + '%');
+      });
+    }
+  }
+
+  #watchControllerDisabled() {
+    this.#menu?.disable(this.disabled);
+  }
+
+  #onValueChange(value: string, trigger?: Event) {
+    if (this.disabled || !trigger) return;
+
+    const index = +value,
+      cues = this.#cues(),
+      { clipStartTime } = this.#media.$state;
+
+    if (isNumber(index) && cues?.[index]) {
+      this.#controller.value = index.toString();
+      this.#media.remote.seek(cues[index].startTime - clipStartTime(), trigger);
+      this.dispatch('change', { detail: cues[index], trigger });
+    }
+  }
+}
+
+export interface ChapterRadioGroupProps {
+  /**
+   * The thumbnails resource.
+   *
+   * @see {@link https://www.vidstack.io/docs/player/core-concepts/loading#thumbnails}
+   */
+  thumbnails: ThumbnailSrc;
+}
+
+export interface ChaptersRadioGroupEvents {
+  change: ChaptersRadioGroupChangeEvent;
+}
+
+/**
+ * Fired when the checked radio changes.
+ *
+ * @detail cue
+ */
+export interface ChaptersRadioGroupChangeEvent extends DOMEvent<VTTCue> {
+  target: ChaptersRadioGroup;
+}
+
+export interface ChaptersRadioOption extends RadioOption {
+  cue: VTTCue;
+  startTime: string;
+  duration: string;
+}

package/src/components/ui/menu/radio-groups/quality-radio-group.ts

@@ -0,0 +1,181 @@
+import {
+  Component,
+  computed,
+  effect,
+  hasProvidedContext,
+  method,
+  peek,
+  prop,
+  useContext,
+  type ReadSignal,
+} from 'maverick.js';
+import type { DOMEvent } from 'maverick.js/std';
+
+import { useMediaContext, type MediaContext } from '../../../../core/api/media-context';
+import { sortVideoQualities } from '../../../../core/quality/utils';
+import type { VideoQuality } from '../../../../core/quality/video-quality';
+import { round } from '../../../../utils/number';
+import { menuContext, type MenuContext } from '../menu-context';
+import type { RadioOption } from '../radio/radio';
+import { RadioGroupController } from '../radio/radio-group-controller';
+
+/**
+ * This component manages video quality radios.
+ *
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/quality-radio-group}
+ */
+export class QualityRadioGroup extends Component<
+  QualityRadioGroupProps,
+  {},
+  QualityRadioGroupEvents
+> {
+  static props: QualityRadioGroupProps = {
+    autoLabel: 'Auto',
+    hideBitrate: false,
+    sort: 'descending',
+  };
+
+  #media!: MediaContext;
+  #menu?: MenuContext;
+  #controller: RadioGroupController;
+
+  @prop
+  get value() {
+    return this.#controller.value;
+  }
+
+  @prop
+  get disabled() {
+    const { canSetQuality, qualities } = this.#media.$state;
+    return !canSetQuality() || qualities().length <= 1;
+  }
+
+  #sortedQualities = computed(() => {
+    const { sort } = this.$props,
+      { qualities } = this.#media.$state;
+    return sortVideoQualities(qualities(), sort() === 'descending');
+  });
+
+  constructor() {
+    super();
+    this.#controller = new RadioGroupController();
+    this.#controller.onValueChange = this.#onValueChange.bind(this);
+  }
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+    if (hasProvidedContext(menuContext)) {
+      this.#menu = useContext(menuContext);
+    }
+  }
+
+  protected override onConnect(el: HTMLElement) {
+    effect(this.#watchValue.bind(this));
+    effect(this.#watchControllerDisabled.bind(this));
+    effect(this.#watchHintText.bind(this));
+  }
+
+  @method
+  getOptions(): QualityRadioOption[] {
+    const { autoLabel, hideBitrate } = this.$props;
+    return [
+      { value: 'auto', label: autoLabel },
+      ...this.#sortedQualities().map((quality) => {
+        const bitrate =
+          quality.bitrate && quality.bitrate >= 0
+            ? `${round(quality.bitrate / 1000000, 2)} Mbps`
+            : null;
+
+        return {
+          quality,
+          label: quality.height + 'p',
+          value: this.#getQualityId(quality),
+          bitrate: () => (!hideBitrate() ? bitrate : null),
+        };
+      }),
+    ];
+  }
+
+  #watchValue() {
+    this.#controller.value = this.#getValue();
+  }
+
+  #watchHintText() {
+    const { autoLabel } = this.$props,
+      { autoQuality, quality } = this.#media.$state,
+      qualityText = quality() ? quality()!.height + 'p' : '';
+
+    this.#menu?.hint.set(
+      !autoQuality() ? qualityText : autoLabel() + (qualityText ? ` (${qualityText})` : ''),
+    );
+  }
+
+  #watchControllerDisabled() {
+    this.#menu?.disable(this.disabled);
+  }
+
+  #onValueChange(value: string, trigger?: Event) {
+    if (this.disabled) return;
+
+    if (value === 'auto') {
+      this.#media.remote.changeQuality(-1, trigger);
+      this.dispatch('change', { detail: 'auto', trigger });
+      return;
+    }
+
+    const { qualities } = this.#media.$state,
+      index = peek(qualities).findIndex((quality) => this.#getQualityId(quality) === value);
+
+    if (index >= 0) {
+      const quality = peek(qualities)[index];
+      this.#media.remote.changeQuality(index, trigger);
+      this.dispatch('change', { detail: quality, trigger });
+    }
+  }
+
+  #getValue() {
+    const { quality, autoQuality } = this.#media.$state;
+
+    if (autoQuality()) return 'auto';
+
+    const currentQuality = quality();
+    return currentQuality ? this.#getQualityId(currentQuality) : 'auto';
+  }
+
+  #getQualityId(quality: VideoQuality) {
+    return quality.height + '_' + quality.bitrate;
+  }
+}
+
+export interface QualityRadioGroupProps {
+  /** The text to display for the auto quality radio option. */
+  autoLabel: string;
+  /** Whether the bitrate should _not_ be displayed next to each quality radio option. */
+  hideBitrate: boolean;
+  /**
+   * Specifies how the options should be sorted. The sorting algorithm looks at both the quality
+   * resolution and bitrate.
+   *
+   * - Ascending: 480p, 720p, 720p (higher bitrate), 1080p
+   * - Descending: 1080p, 720p (higher bitrate), 720p, 480p
+   */
+  sort: 'ascending' | 'descending';
+}
+
+export interface QualityRadioOption extends RadioOption {
+  quality?: VideoQuality;
+  bitrate?: ReadSignal<string | null>;
+}
+
+export interface QualityRadioGroupEvents {
+  change: QualityRadioGroupChangeEvent;
+}
+
+/**
+ * Fired when the checked radio changes.
+ *
+ * @detail quality
+ */
+export interface QualityRadioGroupChangeEvent extends DOMEvent<'auto' | VideoQuality> {
+  target: QualityRadioGroup;
+}

package/src/components/ui/menu/radio-groups/speed-radio-group.ts

@@ -0,0 +1,112 @@
+import { Component, effect, hasProvidedContext, method, prop, useContext } from 'maverick.js';
+import type { DOMEvent } from 'maverick.js/std';
+
+import { useMediaContext, type MediaContext } from '../../../../core/api/media-context';
+import { menuContext, type MenuContext } from '../menu-context';
+import type { RadioOption } from '../radio/radio';
+import { RadioGroupController } from '../radio/radio-group-controller';
+
+export const DEFAULT_PLAYBACK_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+
+/**
+ * This component manages playback rate radios.
+ *
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/speed-radio-group}
+ */
+export class SpeedRadioGroup extends Component<SpeedRadioGroupProps, {}, SpeedRadioGroupEvents> {
+  static props: SpeedRadioGroupProps = {
+    normalLabel: 'Normal',
+    rates: DEFAULT_PLAYBACK_RATES,
+  };
+
+  #media!: MediaContext;
+  #menu?: MenuContext;
+  #controller: RadioGroupController;
+
+  @prop
+  get value() {
+    return this.#controller.value;
+  }
+
+  @prop
+  get disabled() {
+    const { rates } = this.$props,
+      { canSetPlaybackRate } = this.#media.$state;
+    return !canSetPlaybackRate() || rates().length === 0;
+  }
+
+  constructor() {
+    super();
+    this.#controller = new RadioGroupController();
+    this.#controller.onValueChange = this.#onValueChange.bind(this);
+  }
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+    if (hasProvidedContext(menuContext)) {
+      this.#menu = useContext(menuContext);
+    }
+  }
+
+  protected override onConnect(el: HTMLElement) {
+    effect(this.#watchValue.bind(this));
+    effect(this.#watchHintText.bind(this));
+    effect(this.#watchControllerDisabled.bind(this));
+  }
+
+  @method
+  getOptions(): RadioOption[] {
+    const { rates, normalLabel } = this.$props;
+    return rates().map((rate) => ({
+      label: rate === 1 ? normalLabel : rate + '×',
+      value: rate.toString(),
+    }));
+  }
+
+  #watchValue() {
+    this.#controller.value = this.#getValue();
+  }
+
+  #watchHintText() {
+    const { normalLabel } = this.$props,
+      { playbackRate } = this.#media.$state,
+      rate = playbackRate();
+    this.#menu?.hint.set(rate === 1 ? normalLabel() : rate + '×');
+  }
+
+  #watchControllerDisabled() {
+    this.#menu?.disable(this.disabled);
+  }
+
+  #getValue() {
+    const { playbackRate } = this.#media.$state;
+    return playbackRate().toString();
+  }
+
+  #onValueChange(value: string, trigger?: Event) {
+    if (this.disabled) return;
+    const rate = +value;
+    this.#media.remote.changePlaybackRate(rate, trigger);
+    this.dispatch('change', { detail: rate, trigger });
+  }
+}
+
+export interface SpeedRadioGroupProps {
+  /** The playback rate options to be displayed. */
+  rates: number[];
+  /** The text to display for normal speed (i.e., playback rate of 1). */
+  normalLabel: string;
+}
+
+export interface SpeedRadioGroupEvents {
+  change: SpeedRadioGroupChangeEvent;
+}
+
+/**
+ * Fired when the checked radio changes.
+ *
+ * @detail speed
+ */
+export interface SpeedRadioGroupChangeEvent extends DOMEvent<number> {
+  target: SpeedRadioGroup;
+}

package/src/components/ui/popper/popper.ts

@@ -0,0 +1,103 @@
+import { effect, peek, ViewController, type Dispose, type ReadSignal } from 'maverick.js';
+import { listenEvent } from 'maverick.js/std';
+
+import { hasAnimation } from '../../../utils/dom';
+
+export interface PopperDelegate {
+  showDelay?: ReadSignal<number>;
+  trigger: ReadSignal<HTMLElement | null>;
+  content: ReadSignal<HTMLElement | null>;
+  listen(
+    trigger: HTMLElement,
+    show: (trigger?: Event) => void,
+    hide: (trigger?: Event) => void,
+  ): void;
+  onChange(isShowing: boolean, trigger?: Event): void;
+}
+
+export class Popper extends ViewController {
+  #delegate: PopperDelegate;
+
+  constructor(delegate: PopperDelegate) {
+    super();
+    this.#delegate = delegate;
+    effect(this.#watchTrigger.bind(this));
+  }
+
+  protected override onDestroy(): void {
+    this.#stopAnimationEndListener?.();
+    this.#stopAnimationEndListener = null;
+  }
+
+  #watchTrigger() {
+    const trigger = this.#delegate.trigger();
+
+    if (!trigger) {
+      this.hide();
+      return;
+    }
+
+    const show = this.show.bind(this),
+      hide = this.hide.bind(this);
+
+    this.#delegate.listen(trigger, show, hide);
+  }
+
+  #showTimerId = -1;
+  #hideRafId = -1;
+  #stopAnimationEndListener: Dispose | null = null;
+
+  show(trigger?: Event) {
+    this.#cancelShowing();
+
+    window.cancelAnimationFrame(this.#hideRafId);
+    this.#hideRafId = -1;
+
+    this.#stopAnimationEndListener?.();
+    this.#stopAnimationEndListener = null;
+
+    this.#showTimerId = window.setTimeout(() => {
+      this.#showTimerId = -1;
+
+      const content = this.#delegate.content();
+      if (content) content.style.removeProperty('display');
+
+      peek(() => this.#delegate.onChange(true, trigger));
+    }, this.#delegate.showDelay?.() ?? 0);
+  }
+
+  hide(trigger?: Event) {
+    this.#cancelShowing();
+
+    peek(() => this.#delegate.onChange(false, trigger));
+
+    this.#hideRafId = requestAnimationFrame(() => {
+      this.#cancelShowing();
+      this.#hideRafId = -1;
+
+      const content = this.#delegate.content();
+
+      if (content) {
+        const onHide = () => {
+          content.style.display = 'none';
+          this.#stopAnimationEndListener = null;
+        };
+
+        const isAnimated = hasAnimation(content);
+
+        if (isAnimated) {
+          this.#stopAnimationEndListener?.();
+          const stop = listenEvent(content, 'animationend', onHide, { once: true });
+          this.#stopAnimationEndListener = stop;
+        } else {
+          onHide();
+        }
+      }
+    });
+  }
+
+  #cancelShowing() {
+    window.clearTimeout(this.#showTimerId);
+    this.#showTimerId = -1;
+  }
+}