@hanifhan1f/vidstack 1.12.13 → 1.12.14

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

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

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

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

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

@@ -1,153 +0,0 @@
-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;
-}