@hanifhan1f/vidstack 1.12.13

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

@@ -0,0 +1,78 @@
+import { Component, effect, prop } from 'maverick.js';
+import type { DOMEvent } from 'maverick.js/std';
+
+import { RadioGroupController } from './radio-group-controller';
+
+/**
+ * A radio group consists of options where only one of them can be checked. Each option is
+ * provided as a radio (i.e., a selectable element).
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/menu/radio-group}
+ */
+export class RadioGroup extends Component<RadioGroupProps, {}, RadioGroupEvents> {
+  static props: RadioGroupProps = {
+    value: '',
+  };
+
+  #controller: RadioGroupController;
+
+  /**
+   * A list of radio values that belong this group.
+   */
+  @prop
+  get values(): string[] {
+    return this.#controller.values;
+  }
+
+  /**
+   * The radio value that is checked in this group.
+   */
+  @prop
+  get value() {
+    return this.#controller.value;
+  }
+
+  set value(newValue) {
+    this.#controller.value = newValue;
+  }
+
+  constructor() {
+    super();
+    this.#controller = new RadioGroupController();
+    this.#controller.onValueChange = this.#onValueChange.bind(this);
+  }
+
+  protected override onSetup(): void {
+    if (__SERVER__) this.#watchValue();
+    else effect(this.#watchValue.bind(this));
+  }
+
+  #watchValue() {
+    this.#controller.value = this.$props.value();
+  }
+
+  #onValueChange(value: string, trigger?: Event) {
+    const event = this.createEvent('change', { detail: value, trigger });
+    this.dispatch(event);
+  }
+}
+
+export interface RadioGroupProps {
+  /**
+   * The value of the radio that is checked in this group.
+   */
+  value: string;
+}
+
+export interface RadioGroupEvents {
+  change: RadioGroupChangeEvent;
+}
+
+/**
+ * Fired when the checked radio changes.
+ *
+ * @detail value
+ */
+export interface RadioGroupChangeEvent extends DOMEvent<string> {
+  target: RadioGroup;
+}

package/src/components/ui/menu/radio/radio.ts

@@ -0,0 +1,151 @@
+import {
+  Component,
+  effect,
+  hasProvidedContext,
+  onDispose,
+  peek,
+  prop,
+  scoped,
+  signal,
+  useContext,
+  type ReadSignal,
+} from 'maverick.js';
+import type { DOMEvent } from 'maverick.js/std';
+
+import { FocusVisibleController } from '../../../../foundation/observers/focus-visible';
+import { $ariaBool } from '../../../../utils/aria';
+import { onPress, setAttributeIfEmpty } from '../../../../utils/dom';
+import { menuContext } from '../menu-context';
+import { radioControllerContext, type RadioController } from './radio-controller';
+
+/**
+ * A radio represents a option that a user can select inside of a radio group. Only one radio
+ * can be checked in a group.
+ *
+ * @attr data-checked - Whether radio is checked.
+ * @attr data-focus - Whether radio is being keyboard focused.
+ * @attr data-hocus - Whether radio is being keyboard focused or hovered over.
+ * @docs {@link https://www.vidstack.io/docs/player/components/menu/radio}
+ */
+export class Radio extends Component<RadioProps, {}, RadioEvents> {
+  static props: RadioProps = {
+    value: '',
+  };
+
+  #checked = signal(false);
+
+  #controller: RadioController = {
+    value: this.$props.value,
+    check: this.#check.bind(this),
+    onCheck: null,
+  };
+
+  /**
+   * Whether this radio is currently checked.
+   */
+  @prop
+  get checked(): boolean {
+    return this.#checked();
+  }
+
+  constructor() {
+    super();
+    new FocusVisibleController();
+  }
+
+  protected override onSetup(): void {
+    this.setAttributes({
+      value: this.$props.value,
+      'data-checked': this.#checked,
+      'aria-checked': $ariaBool(this.#checked),
+    });
+  }
+
+  protected override onAttach(el: HTMLElement) {
+    const isMenuItem = hasProvidedContext(menuContext);
+    setAttributeIfEmpty(el, 'tabindex', isMenuItem ? '-1' : '0');
+    setAttributeIfEmpty(el, 'role', isMenuItem ? 'menuitemradio' : 'radio');
+    effect(this.#watchValue.bind(this));
+  }
+
+  protected override onConnect(el: HTMLElement) {
+    this.#addToGroup();
+    onPress(el, this.#onPress.bind(this));
+    onDispose(this.#onDisconnect.bind(this));
+  }
+
+  #onDisconnect() {
+    scoped(() => {
+      const group = useContext(radioControllerContext);
+      group.remove(this.#controller);
+    }, this.connectScope);
+  }
+
+  #addToGroup() {
+    const group = useContext(radioControllerContext);
+    group.add(this.#controller);
+  }
+
+  #watchValue() {
+    const { value } = this.$props,
+      newValue = value();
+    if (peek(this.#checked)) {
+      this.#controller.onCheck?.(newValue);
+    }
+  }
+
+  #onPress(event: Event) {
+    if (peek(this.#checked)) return;
+
+    this.#onChange(true, event);
+    this.#onSelect(event);
+
+    this.#controller.onCheck?.(peek(this.$props.value), event);
+  }
+
+  #check(value: boolean, trigger?: Event) {
+    if (peek(this.#checked) === value) return;
+    this.#onChange(value, trigger);
+  }
+
+  #onChange(value: boolean, trigger?: Event) {
+    this.#checked.set(value);
+    this.dispatch('change', { detail: value, trigger });
+  }
+
+  #onSelect(trigger?: Event) {
+    this.dispatch('select', { trigger });
+  }
+}
+
+export interface RadioProps {
+  /** The radio value. */
+  value: string;
+}
+
+export interface RadioEvents {
+  change: RadioChangeEvent;
+  select: RadioSelectEvent;
+}
+
+/**
+ * Fired when the radio's checked value changes.
+ *
+ * @detail isSelected
+ */
+export interface RadioChangeEvent extends DOMEvent<boolean> {
+  target: Radio;
+}
+
+/**
+ * Fired when the radio is pressed via mouse, touch, or, keyboard. This will not fire if the radio
+ * is programmatically selected.
+ */
+export interface RadioSelectEvent extends DOMEvent<void> {
+  target: Radio;
+}
+
+export interface RadioOption {
+  label: string | ReadSignal<string>;
+  value: string;
+}

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

@@ -0,0 +1,116 @@
+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_AUDIO_GAINS = [1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4];
+
+/**
+ * This component manages audio gain radios.
+ *
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/audio-gain-radio-group}
+ */
+export class AudioGainRadioGroup extends Component<
+  AudioGainRadioGroupProps,
+  {},
+  AudioGainRadioGroupEvents
+> {
+  static props: AudioGainRadioGroupProps = {
+    normalLabel: 'Disabled',
+    gains: DEFAULT_AUDIO_GAINS,
+  };
+
+  #media!: MediaContext;
+  #menu?: MenuContext;
+  #controller: RadioGroupController;
+
+  @prop
+  get value() {
+    return this.#controller.value;
+  }
+
+  @prop
+  get disabled() {
+    const { gains } = this.$props,
+      { canSetAudioGain } = this.#media.$state;
+    return !canSetAudioGain() || gains().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 { gains, normalLabel } = this.$props;
+    return gains().map((gain) => ({
+      label: gain === 1 || gain === null ? normalLabel : String(gain * 100) + '%',
+      value: gain.toString(),
+    }));
+  }
+
+  #watchValue() {
+    this.#controller.value = this.#getValue();
+  }
+
+  #watchHintText() {
+    const { normalLabel } = this.$props,
+      { audioGain } = this.#media.$state,
+      gain = audioGain();
+    this.#menu?.hint.set(gain === 1 || gain == null ? normalLabel() : String(gain * 100) + '%');
+  }
+
+  #watchControllerDisabled() {
+    this.#menu?.disable(this.disabled);
+  }
+
+  #getValue() {
+    const { audioGain } = this.#media.$state;
+    return audioGain()?.toString() ?? '1';
+  }
+
+  #onValueChange(value: string, trigger?: Event) {
+    if (this.disabled) return;
+    const gain = +value;
+    this.#media.remote.changeAudioGain(gain, trigger);
+    this.dispatch('change', { detail: gain, trigger });
+  }
+}
+
+export interface AudioGainRadioGroupProps {
+  /** The audio gain options to be displayed. */
+  gains: number[];
+  /** The text to display for disabled audio gain (i.e., audio gain is 1.0). */
+  normalLabel: string;
+}
+
+export interface AudioGainRadioGroupEvents {
+  change: AudioGainRadioGroupChangeEvent;
+}
+
+/**
+ * Fired when the checked radio changes.
+ *
+ * @detail gain
+ */
+export interface AudioGainRadioGroupChangeEvent extends DOMEvent<number> {
+  target: AudioGainRadioGroup;
+}

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

@@ -0,0 +1,121 @@
+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 type { AudioTrack } from '../../../../core/tracks/audio/audio-tracks';
+import { menuContext, type MenuContext } from '../menu-context';
+import type { RadioOption } from '../radio/radio';
+import { RadioGroupController } from '../radio/radio-group-controller';
+
+/**
+ * This component manages audio track radios.
+ *
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/audio-radio-group}
+ */
+export class AudioRadioGroup extends Component<AudioRadioGroupProps, {}, AudioRadioGroupEvents> {
+  static props: AudioRadioGroupProps = {
+    emptyLabel: 'Default',
+  };
+
+  #menu?: MenuContext;
+  #media!: MediaContext;
+  #controller: RadioGroupController;
+
+  @prop
+  get value() {
+    return this.#controller.value;
+  }
+
+  @prop
+  get disabled() {
+    const { audioTracks } = this.#media.$state;
+    return audioTracks().length <= 1;
+  }
+
+  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(): AudioRadioOption[] {
+    const { audioTracks } = this.#media.$state;
+    return audioTracks().map((track) => ({
+      track,
+      label: track.label,
+      value: track.label.toLowerCase(),
+    }));
+  }
+
+  #watchValue() {
+    this.#controller.value = this.#getValue();
+  }
+
+  #watchHintText() {
+    const { emptyLabel } = this.$props,
+      { audioTrack } = this.#media.$state,
+      track = audioTrack();
+
+    this.#menu?.hint.set(track?.label ?? emptyLabel());
+  }
+
+  #watchControllerDisabled() {
+    this.#menu?.disable(this.disabled);
+  }
+
+  #getValue() {
+    const { audioTrack } = this.#media.$state;
+    const track = audioTrack();
+    return track ? track.label.toLowerCase() : '';
+  }
+
+  #onValueChange(value: string, trigger?: Event) {
+    if (this.disabled) return;
+
+    const index = this.#media.audioTracks
+      .toArray()
+      .findIndex((track) => track.label.toLowerCase() === value);
+
+    if (index >= 0) {
+      const track = this.#media.audioTracks[index]!;
+      this.#media.remote.changeAudioTrack(index, trigger);
+      this.dispatch('change', { detail: track, trigger });
+    }
+  }
+}
+
+export interface AudioRadioGroupProps {
+  /** The text to display when the are no audio tracks. */
+  emptyLabel: string;
+}
+
+export interface AudioRadioGroupEvents {
+  change: AudioRadioGroupChangeEvent;
+}
+
+export interface AudioRadioOption extends RadioOption {
+  track: AudioTrack;
+}
+
+/**
+ * Fired when the checked radio changes.
+ *
+ * @detail track
+ */
+export interface AudioRadioGroupChangeEvent extends DOMEvent<AudioTrack> {
+  target: AudioRadioGroup;
+}

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

@@ -0,0 +1,153 @@
+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 { isTrackCaptionKind, TextTrack } from '../../../../core/tracks/text/text-track';
+import { menuContext, type MenuContext } from '../menu-context';
+import type { RadioOption } from '../radio/radio';
+import { RadioGroupController } from '../radio/radio-group-controller';
+
+/**
+ * This component manages caption/subtitle track radio options.
+ *
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/menu/captions-radio-group}
+ */
+export class CaptionsRadioGroup extends Component<
+  CaptionsRadioGroupProps,
+  {},
+  CaptionsRadioGroupEvents
+> {
+  static props: CaptionsRadioGroupProps = {
+    offLabel: 'Off',
+  };
+
+  #media!: MediaContext;
+  #menu?: MenuContext;
+  #controller: RadioGroupController;
+
+  @prop
+  get value() {
+    return this.#controller.value;
+  }
+
+  @prop
+  get disabled() {
+    const { hasCaptions } = this.#media.$state;
+    return !hasCaptions();
+  }
+
+  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) {
+    super.onConnect?.(el);
+    effect(this.#watchValue.bind(this));
+    effect(this.#watchControllerDisabled.bind(this));
+    effect(this.#watchHintText.bind(this));
+  }
+
+  @method
+  getOptions(): CaptionsRadioOption[] {
+    const { offLabel } = this.$props,
+      { textTracks } = this.#media.$state;
+    return [
+      { value: 'off', label: offLabel },
+      ...textTracks()
+        .filter(isTrackCaptionKind)
+        .map((track) => ({
+          track,
+          label: track.label,
+          value: this.#getTrackValue(track),
+        })),
+    ];
+  }
+
+  #watchValue() {
+    this.#controller.value = this.#getValue();
+  }
+
+  #watchHintText() {
+    const { offLabel } = this.$props,
+      { textTrack } = this.#media.$state,
+      track = textTrack();
+
+    this.#menu?.hint.set(
+      track && isTrackCaptionKind(track) && track.mode === 'showing' ? track.label : offLabel(),
+    );
+  }
+
+  #watchControllerDisabled() {
+    this.#menu?.disable(this.disabled);
+  }
+
+  #getValue() {
+    const { textTrack } = this.#media.$state,
+      track = textTrack();
+    return track && isTrackCaptionKind(track) && track.mode === 'showing'
+      ? this.#getTrackValue(track)
+      : 'off';
+  }
+
+  #onValueChange(value: string, trigger?: Event) {
+    if (this.disabled) return;
+
+    if (value === 'off') {
+      const track = this.#media.textTracks.selected;
+
+      if (track) {
+        const index = this.#media.textTracks.indexOf(track);
+        this.#media.remote.changeTextTrackMode(index, 'disabled', trigger);
+        this.dispatch('change', { detail: null, trigger });
+      }
+
+      return;
+    }
+
+    const index = this.#media.textTracks
+      .toArray()
+      .findIndex((track) => this.#getTrackValue(track) === value);
+
+    if (index >= 0) {
+      const track = this.#media.textTracks[index]!;
+      this.#media.remote.changeTextTrackMode(index, 'showing', trigger);
+      this.dispatch('change', { detail: track, trigger });
+    }
+  }
+
+  #getTrackValue(track: TextTrack) {
+    return track.id + ':' + track.kind + '-' + track.label.toLowerCase();
+  }
+}
+
+export interface CaptionsRadioGroupProps {
+  /** The text to display when the captions are turned off. */
+  offLabel: string;
+}
+
+export interface CaptionsRadioGroupEvents {
+  change: CaptionsRadioGroupChangeEvent;
+}
+
+export interface CaptionsRadioOption extends RadioOption {
+  track?: TextTrack;
+}
+
+/**
+ * Fired when the checked radio changes. The event detail will be `null` when no track is selected
+ * or captions are turned off.
+ *
+ * @detail track
+ */
+export interface CaptionsRadioGroupChangeEvent extends DOMEvent<TextTrack | null> {
+  target: CaptionsRadioGroup;
+}