@hanifhan1f/vidstack 1.12.13 → 1.12.14

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

@@ -1,147 +0,0 @@
-import throttle from 'just-throttle';
-import { Component, effect } 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 { SliderController, type SliderControllerProps } from './slider/slider-controller';
-
-/**
- * Versatile and user-friendly input playback rate 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 playback rate is supported.
- * @docs {@link https://www.vidstack.io/docs/player/components/sliders/speed-slider}
- */
-export class SpeedSlider extends Component<
-  SpeedSliderProps,
-  SpeedSliderState,
-  SpeedSliderEvents,
-  SpeedSliderCSSVars
-> {
-  static props: SpeedSliderProps = {
-    ...SliderController.props,
-    step: 0.25,
-    keyStep: 0.25,
-    shiftKeyMultiplier: 2,
-    min: 0,
-    max: 2,
-  };
-
-  static state = sliderState;
-
-  #media!: MediaContext;
-
-  protected override onSetup(): void {
-    this.#media = useMediaContext();
-
-    new SliderController({
-      getStep: this.$props.step,
-      getKeyStep: this.$props.keyStep,
-      roundValue: this.#roundValue,
-      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.#watchPlaybackRate.bind(this));
-  }
-
-  protected override onAttach(el: HTMLElement) {
-    el.setAttribute('data-media-speed-slider', '');
-    setAttributeIfEmpty(el, 'aria-label', 'Speed');
-
-    const { canSetPlaybackRate } = this.#media.$state;
-    this.setAttributes({
-      'data-supported': canSetPlaybackRate,
-      'aria-hidden': $ariaBool(() => !canSetPlaybackRate()),
-    });
-  }
-
-  #getARIAValueNow() {
-    const { value } = this.$state;
-    return value();
-  }
-
-  #getARIAValueText() {
-    const { value } = this.$state;
-    return value() + 'x';
-  }
-
-  #watchMinMax() {
-    const { min, max } = this.$props;
-    this.$state.min.set(min());
-    this.$state.max.set(max());
-  }
-
-  #watchPlaybackRate() {
-    const { playbackRate } = this.#media.$state;
-    const newValue = playbackRate();
-    this.$state.value.set(newValue);
-    this.dispatch('value-change', { detail: newValue });
-  }
-
-  #roundValue(value: number) {
-    return round(value, 2);
-  }
-
-  #isDisabled() {
-    const { disabled } = this.$props,
-      { canSetPlaybackRate } = this.#media.$state;
-    return disabled() || !canSetPlaybackRate();
-  }
-
-  #throttledSpeedChange = throttle(this.#onPlaybackRateChange.bind(this), 25);
-  #onPlaybackRateChange(event: SliderValueChangeEvent | SliderDragValueChangeEvent) {
-    if (!event.trigger) return;
-    const rate = event.detail;
-    this.#media.remote.changePlaybackRate(rate, event);
-  }
-
-  #onValueChange(event: SliderValueChangeEvent): void {
-    this.#throttledSpeedChange(event);
-  }
-
-  #onDragValueChange(event: SliderDragValueChangeEvent): void {
-    this.#throttledSpeedChange(event);
-  }
-}
-
-export interface SpeedSliderProps extends SliderControllerProps {
-  /**
-   * The minimum playback rate.
-   */
-  min: number;
-  /**
-   * The maximum playback rate.
-   */
-  max: number;
-}
-
-export interface SpeedSliderState extends SliderState {}
-
-export interface SpeedSliderEvents
-  extends SliderEvents,
-    Pick<MediaRequestEvents, 'media-rate-change-request'> {}
-
-export interface SpeedSliderCSSVars extends SliderCSSVars {}

package/src/components/ui/sliders/time-slider/slider-chapters.ts

@@ -1,444 +0,0 @@
-import debounce from 'just-debounce-it';
-import {
-  Component,
-  computed,
-  createScope,
-  effect,
-  method,
-  onDispose,
-  peek,
-  prop,
-  scoped,
-  signal,
-  useState,
-  type ReadSignalRecord,
-  type Scope,
-} from 'maverick.js';
-import {
-  animationFrameThrottle,
-  EventsController,
-  listenEvent,
-  setAttribute,
-} 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 { watchActiveTextTrack } from '../../../../core/tracks/text/utils';
-import { round } from '../../../../utils/number';
-import type { SliderState } from '../slider/api/state';
-import { TimeSlider } from './time-slider';
-
-/**
- * Used to create predefined sections within a time slider interface based on the currently
- * active chapters text track.
- *
- * @docs {@link https://www.vidstack.io/docs/player/components/sliders/slider-chapters}
- */
-export class SliderChapters extends Component<SliderChaptersProps, {}, SliderChaptersCSSVars> {
-  static props: SliderChaptersProps = {
-    disabled: false,
-  };
-
-  #media!: MediaContext;
-  #sliderState!: ReadSignalRecord<SliderState>;
-  #updateScope?: Scope;
-
-  #titleRef: HTMLElement | null = null;
-  #refs: HTMLElement[] = [];
-
-  #$track = signal<TextTrack | null>(null);
-  #$cues = signal<VTTCue[]>([]);
-
-  #activeIndex = signal(-1);
-  #activePointerIndex = signal(-1);
-  #bufferedIndex = 0;
-
-  @prop
-  get cues() {
-    return this.#$cues();
-  }
-
-  @prop
-  get activeCue(): VTTCue | null {
-    return this.#$cues()[this.#activeIndex()] || null;
-  }
-
-  @prop
-  get activePointerCue(): VTTCue | null {
-    return this.#$cues()[this.#activePointerIndex()] || null;
-  }
-
-  protected override onSetup(): void {
-    this.#media = useMediaContext();
-    this.#sliderState = useState(TimeSlider.state);
-  }
-
-  protected override onAttach(el: HTMLElement): void {
-    watchActiveTextTrack(this.#media.textTracks, 'chapters', this.#setTrack.bind(this));
-    effect(this.#watchSource.bind(this));
-  }
-
-  protected override onConnect(): void {
-    onDispose(() => this.#reset.bind(this));
-  }
-
-  protected override onDestroy(): void {
-    this.#setTrack(null);
-  }
-
-  @method
-  setRefs(refs: HTMLElement[]) {
-    this.#refs = refs;
-    this.#updateScope?.dispose();
-    if (this.#refs.length === 1) {
-      const el = this.#refs[0];
-      el.style.width = '100%';
-      el.style.setProperty('--chapter-fill', 'var(--slider-fill)');
-      el.style.setProperty('--chapter-progress', 'var(--slider-progress)');
-    } else if (this.#refs.length > 0) {
-      scoped(() => this.#watch(), (this.#updateScope = createScope()));
-    }
-  }
-
-  #setTrack(track: TextTrack | null) {
-    if (peek(this.#$track) === track) return;
-    this.#reset();
-    this.#$track.set(track);
-  }
-
-  #reset() {
-    this.#refs = [];
-    this.#$cues.set([]);
-    this.#activeIndex.set(-1);
-    this.#activePointerIndex.set(-1);
-    this.#bufferedIndex = 0;
-    this.#updateScope?.dispose();
-  }
-
-  #watch() {
-    if (!this.#refs.length) return;
-
-    effect(this.#watchUpdates.bind(this));
-  }
-  #watchUpdates() {
-    const { hidden } = this.#sliderState;
-
-    if (hidden()) return;
-
-    effect(this.#watchContainerWidths.bind(this));
-    effect(this.#watchFillPercent.bind(this));
-    effect(this.#watchPointerPercent.bind(this));
-    effect(this.#watchBufferedPercent.bind(this));
-  }
-
-  #watchContainerWidths() {
-    const cues = this.#$cues();
-
-    if (!cues.length) return;
-
-    let cue: VTTCue,
-      { seekableStart, seekableEnd } = this.#media.$state,
-      startTime = seekableStart(),
-      endTime = seekableEnd() || cues[cues.length - 1].endTime,
-      duration = endTime - startTime,
-      remainingWidth = 100;
-
-    for (let i = 0; i < cues.length; i++) {
-      cue = cues[i];
-      if (this.#refs[i]) {
-        const width =
-          i === cues.length - 1
-            ? remainingWidth
-            : round(((cue.endTime - Math.max(startTime, cue.startTime)) / duration) * 100, 3);
-
-        this.#refs[i].style.width = width + '%';
-
-        remainingWidth -= width;
-      }
-    }
-  }
-
-  #watchFillPercent() {
-    let { liveEdge, seekableStart, seekableEnd } = this.#media.$state,
-      { fillPercent, value } = this.#sliderState,
-      cues = this.#$cues(),
-      isLiveEdge = liveEdge(),
-      prevActiveIndex = peek(this.#activeIndex),
-      currentChapter = cues[prevActiveIndex];
-
-    let currentActiveIndex = isLiveEdge
-      ? this.#$cues.length - 1
-      : this.#findActiveChapterIndex(
-          currentChapter
-            ? (currentChapter.startTime / seekableEnd()) * 100 <= peek(value)
-              ? prevActiveIndex
-              : 0
-            : 0,
-          fillPercent(),
-        );
-
-    if (isLiveEdge || !currentChapter) {
-      this.#updateFillPercents(0, cues.length, 100);
-    } else if (currentActiveIndex > prevActiveIndex) {
-      this.#updateFillPercents(prevActiveIndex, currentActiveIndex, 100);
-    } else if (currentActiveIndex < prevActiveIndex) {
-      this.#updateFillPercents(currentActiveIndex + 1, prevActiveIndex + 1, 0);
-    }
-
-    const percent = isLiveEdge
-      ? 100
-      : this.#calcPercent(
-          cues[currentActiveIndex],
-          fillPercent(),
-          seekableStart(),
-          this.#getEndTime(cues),
-        );
-
-    this.#updateFillPercent(this.#refs[currentActiveIndex], percent);
-
-    this.#activeIndex.set(currentActiveIndex);
-  }
-
-  #watchPointerPercent() {
-    let { hidden, pointerPercent } = this.#sliderState;
-
-    if (hidden()) {
-      this.#activePointerIndex.set(-1);
-      return;
-    }
-
-    const activeIndex = this.#findActiveChapterIndex(0, pointerPercent());
-    this.#activePointerIndex.set(activeIndex);
-  }
-
-  #updateFillPercents(start: number, end: number, percent: number) {
-    for (let i = start; i < end; i++) this.#updateFillPercent(this.#refs[i], percent);
-  }
-
-  #updateFillPercent(ref: HTMLElement | null, percent: number) {
-    if (!ref) return;
-
-    ref.style.setProperty('--chapter-fill', percent + '%');
-
-    setAttribute(ref, 'data-active', percent > 0 && percent < 100);
-    setAttribute(ref, 'data-ended', percent === 100);
-  }
-
-  #findActiveChapterIndex(startIndex: number, percent: number) {
-    let chapterPercent = 0,
-      cues = this.#$cues();
-
-    if (percent === 0) return 0;
-    else if (percent === 100) return cues.length - 1;
-
-    let { seekableStart } = this.#media.$state,
-      startTime = seekableStart(),
-      endTime = this.#getEndTime(cues);
-
-    for (let i = startIndex; i < cues.length; i++) {
-      chapterPercent = this.#calcPercent(cues[i], percent, startTime, endTime);
-      if (chapterPercent >= 0 && chapterPercent < 100) return i;
-    }
-
-    return 0;
-  }
-
-  #watchBufferedPercent() {
-    this.#updateBufferedPercent(this.#bufferedPercent());
-  }
-
-  #updateBufferedPercent = animationFrameThrottle((bufferedPercent: number) => {
-    let percent: number,
-      cues = this.#$cues(),
-      { seekableStart } = this.#media.$state,
-      startTime = seekableStart(),
-      endTime = this.#getEndTime(cues);
-
-    for (let i = this.#bufferedIndex; i < this.#refs.length; i++) {
-      percent = this.#calcPercent(cues[i], bufferedPercent, startTime, endTime);
-      this.#refs[i]?.style.setProperty('--chapter-progress', percent + '%');
-      if (percent < 100) {
-        this.#bufferedIndex = i;
-        break;
-      }
-    }
-  });
-
-  #bufferedPercent = computed(this.#calcMediaBufferedPercent.bind(this));
-  #calcMediaBufferedPercent() {
-    const { bufferedEnd, duration } = this.#media.$state;
-    return round(Math.min(bufferedEnd() / Math.max(duration(), 1), 1), 3) * 100;
-  }
-
-  #getEndTime(cues: VTTCue[]) {
-    const { seekableEnd } = this.#media.$state,
-      endTime = seekableEnd();
-    return Number.isFinite(endTime) ? endTime : cues[cues.length - 1]?.endTime || 0;
-  }
-
-  #calcPercent(cue: VTTCue | undefined, percent: number, startTime: number, endTime: number) {
-    if (!cue) return 0;
-
-    const cues = this.#$cues();
-
-    if (cues.length === 0) return 0;
-
-    const duration = endTime - startTime,
-      cueStartTime = Math.max(0, cue.startTime - startTime),
-      cueEndTime = Math.min(endTime, cue.endTime) - startTime;
-
-    const startRatio = cueStartTime / duration,
-      startPercent = startRatio * 100,
-      endPercent = Math.min(1, startRatio + (cueEndTime - cueStartTime) / duration) * 100;
-
-    return Math.max(
-      0,
-      round(
-        percent >= endPercent
-          ? 100
-          : ((percent - startPercent) / (endPercent - startPercent)) * 100,
-        3,
-      ),
-    );
-  }
-
-  #fillGaps(cues: ReadonlyArray<VTTCue>) {
-    let chapters: VTTCue[] = [],
-      { seekableStart, seekableEnd, duration } = this.#media.$state,
-      startTime = seekableStart(),
-      endTime = seekableEnd();
-
-    cues = cues.filter((cue) => cue.startTime <= endTime && cue.endTime >= startTime);
-
-    const firstCue = cues[0];
-
-    // Fill any time gaps where chapters are missing.
-    if (firstCue && firstCue.startTime > startTime) {
-      chapters.push(new window.VTTCue(startTime, firstCue.startTime, ''));
-    }
-
-    // Fill any time gaps where chapters are missing.
-    for (let i = 0; i < cues.length - 1; i++) {
-      const currentCue = cues[i],
-        nextCue = cues[i + 1];
-      chapters.push(currentCue);
-      if (nextCue) {
-        const timeDiff = nextCue.startTime - currentCue.endTime;
-        if (timeDiff > 0) {
-          chapters.push(new window.VTTCue(currentCue.endTime, currentCue.endTime + timeDiff, ''));
-        }
-      }
-    }
-
-    const lastCue = cues[cues.length - 1];
-    if (lastCue) {
-      chapters.push(lastCue);
-
-      // Fill gap at the end if the last chapter doesn't extend all the way.
-      const endTime = duration();
-      if (endTime >= 0 && endTime - lastCue.endTime > 1) {
-        chapters.push(new window.VTTCue(lastCue.endTime, duration(), ''));
-      }
-    }
-
-    return chapters;
-  }
-
-  #watchSource() {
-    const { source } = this.#media.$state;
-    source();
-    this.#onTrackChange();
-  }
-
-  #onTrackChange() {
-    // Might run the "load" track event after the component is destroyed.
-    if (!this.scope) return;
-
-    const { disabled } = this.$props;
-
-    if (disabled()) {
-      this.#$cues.set([]);
-      this.#activeIndex.set(0);
-      this.#bufferedIndex = 0;
-      return;
-    }
-
-    const track = this.#$track();
-
-    if (track) {
-      const onCuesChange = this.#onCuesChange.bind(this);
-
-      onCuesChange();
-
-      new EventsController(track).add('add-cue', onCuesChange).add('remove-cue', onCuesChange);
-
-      effect(this.#watchMediaDuration.bind(this));
-    }
-
-    this.#titleRef = this.#findChapterTitleRef();
-    if (this.#titleRef) effect(this.#onChapterTitleChange.bind(this));
-
-    return () => {
-      if (this.#titleRef) {
-        this.#titleRef.textContent = '';
-        this.#titleRef = null;
-      }
-    };
-  }
-
-  #watchMediaDuration() {
-    this.#media.$state.duration();
-    this.#onCuesChange();
-  }
-
-  #onCuesChange = debounce(
-    () => {
-      const track = peek(this.#$track);
-
-      if (!this.scope || !track || !track.cues.length) return;
-
-      this.#$cues.set(this.#fillGaps(track.cues));
-      this.#activeIndex.set(0);
-      this.#bufferedIndex = 0;
-    },
-    150,
-    true,
-  );
-
-  #onChapterTitleChange() {
-    const cue = this.activePointerCue || this.activeCue;
-    if (this.#titleRef) this.#titleRef.textContent = cue?.text || '';
-  }
-
-  #findParentSlider() {
-    let node = this.el;
-    while (node && node.getAttribute('role') !== 'slider') {
-      node = node.parentElement;
-    }
-    return node;
-  }
-
-  #findChapterTitleRef() {
-    const slider = this.#findParentSlider();
-    return slider ? slider.querySelector<HTMLElement>('[data-part="chapter-title"]') : null;
-  }
-}
-
-export interface SliderChaptersProps {
-  /**
-   * Whether chapters should be disabled.
-   */
-  disabled: boolean;
-}
-
-export interface SliderChaptersCSSVars {
-  /**
-   * The percentage of the chapter that is filled.
-   */
-  readonly 'chapter-fill': string;
-  /**
-   * The percentage of the chapter that has been buffered.
-   */
-  readonly 'chapter-progress': string;
-}