@hanifhan1f/vidstack 1.12.13

package/src/components/provider/provider.ts

@@ -0,0 +1,184 @@
+import { Component, method, onDispose, peek, signal, State, tick } from 'maverick.js';
+import { animationFrameThrottle, isString, setStyle } from 'maverick.js/std';
+import type { CaptionsFileFormat } from 'media-captions';
+
+import { useMediaContext, type MediaContext } from '../../core/api/media-context';
+import type { Src } from '../../core/api/src-types';
+import { TextTrack, type TextTrackInit } from '../../core/tracks/text/text-track';
+import type { MediaProviderLoader } from '../../providers/types';
+import { SourceSelection } from './source-select';
+import { Tracks } from './tracks';
+
+export interface MediaProviderProps {
+  /** @internal */
+  loaders: MediaProviderLoader[];
+}
+
+export interface MediaProviderState {
+  loader: MediaProviderLoader | null;
+}
+
+/**
+ * Used to render the current provider.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/media/provider}
+ */
+export class MediaProvider extends Component<MediaProviderProps, MediaProviderState> {
+  static props: MediaProviderProps = {
+    loaders: [],
+  };
+
+  static state = new State<MediaProviderState>({
+    loader: null,
+  });
+
+  #media!: MediaContext;
+  #sources!: SourceSelection;
+  #domSources = signal<Src[]>([]);
+  #domTracks = signal<TextTrackInit[]>([]);
+
+  #loader: MediaProviderLoader | null = null;
+
+  protected override onSetup() {
+    this.#media = useMediaContext();
+    this.#sources = new SourceSelection(
+      this.#domSources,
+      this.#media,
+      this.$state.loader,
+      this.$props.loaders(),
+    );
+  }
+
+  protected override onAttach(el: HTMLElement) {
+    el.setAttribute('data-media-provider', '');
+  }
+
+  protected override onConnect(el: HTMLElement) {
+    this.#sources.connect();
+    new Tracks(this.#domTracks, this.#media);
+
+    const resize = new ResizeObserver(animationFrameThrottle(this.#onResize.bind(this)));
+    resize.observe(el);
+
+    const mutations = new MutationObserver(this.#onMutation.bind(this));
+    mutations.observe(el, { attributes: true, childList: true });
+
+    this.#onResize();
+    this.#onMutation();
+
+    onDispose(() => {
+      resize.disconnect();
+      mutations.disconnect();
+    });
+  }
+
+  #loadRafId = -1;
+
+  @method
+  load(target: HTMLElement | null | undefined) {
+    // Hide underlying provider element from screen readers.
+    target?.setAttribute('aria-hidden', 'true');
+
+    // Use a RAF here to prevent hot reloads resetting provider.
+    window.cancelAnimationFrame(this.#loadRafId);
+    this.#loadRafId = requestAnimationFrame(() => this.#runLoader(target));
+    onDispose(() => {
+      window.cancelAnimationFrame(this.#loadRafId);
+    });
+  }
+
+  #runLoader(target: HTMLElement | null | undefined) {
+    if (!this.scope) return;
+
+    const loader = this.$state.loader(),
+      { $provider } = this.#media;
+
+    if (this.#loader === loader && loader?.target === target && peek($provider)) return;
+
+    this.#destroyProvider();
+    this.#loader = loader;
+    if (loader) loader.target = target || null;
+
+    if (!loader || !target) return;
+
+    loader.load(this.#media).then((provider) => {
+      if (!this.scope) return;
+
+      // The src/loader might've changed by the time we load the provider.
+      if (peek(this.$state.loader) !== loader) return;
+
+      this.#media.notify('provider-change', provider);
+    });
+  }
+
+  protected override onDestroy() {
+    this.#loader = null;
+    this.#destroyProvider();
+  }
+
+  #destroyProvider() {
+    this.#media?.notify('provider-change', null);
+  }
+
+  #onResize() {
+    if (!this.el) return;
+
+    const { player, $state } = this.#media,
+      width = this.el.offsetWidth,
+      height = this.el.offsetHeight;
+
+    if (!player) return;
+
+    $state.mediaWidth.set(width);
+    $state.mediaHeight.set(height);
+
+    if (player.el) {
+      setStyle(player.el, '--media-width', width + 'px');
+      setStyle(player.el, '--media-height', height + 'px');
+    }
+  }
+
+  #onMutation() {
+    const sources: Src[] = [],
+      tracks: TextTrackInit[] = [],
+      children = this.el!.children;
+
+    for (const el of children) {
+      if (el.hasAttribute('data-vds')) continue;
+
+      if (el instanceof HTMLSourceElement) {
+        const src = {
+          id: el.id,
+          src: el.src,
+          type: el.type,
+        };
+
+        // <source src="..." type="..." data-width="1920" data-height="1080" ... />
+        for (const prop of ['id', 'src', 'width', 'height', 'bitrate', 'codec']) {
+          const value = el.getAttribute(`data-${prop}`);
+          if (isString(value)) src[prop] = /id|src|codec/.test(prop) ? value : Number(value);
+        }
+
+        sources.push(src);
+      } else if (el instanceof HTMLTrackElement) {
+        const track = {
+          src: el.src,
+          kind: el.track.kind,
+          language: el.srclang,
+          label: el.label,
+          default: el.default,
+          type: el.getAttribute('data-type') as CaptionsFileFormat,
+        };
+
+        tracks.push({
+          id: el.id || TextTrack.createId(track),
+          ...track,
+        });
+      }
+    }
+
+    this.#domSources.set(sources);
+    this.#domTracks.set(tracks);
+    tick();
+  }
+}

package/src/components/provider/source-select.ts

@@ -0,0 +1,378 @@
+import {
+  computed,
+  effect,
+  peek,
+  scoped,
+  tick,
+  type ReadSignal,
+  type WriteSignal,
+} from 'maverick.js';
+import { DOMEvent, isArray, isString, noop } from 'maverick.js/std';
+
+import type { MediaContext } from '../../core/api/media-context';
+import type { MediaPlayerProps } from '../../core/api/player-props';
+import { isVideoQualitySrc, type Src } from '../../core/api/src-types';
+import { AudioProviderLoader } from '../../providers/audio/loader';
+import { DASHProviderLoader } from '../../providers/dash/loader';
+import { HLSProviderLoader } from '../../providers/hls/loader';
+import type { MediaProviderLoader } from '../../providers/types';
+import { VideoProviderLoader } from '../../providers/video/loader';
+import { VimeoProviderLoader } from '../../providers/vimeo/loader';
+import { YouTubeProviderLoader } from '../../providers/youtube/loader';
+import {
+  resolveStreamTypeFromDASHManifest,
+  resolveStreamTypeFromHLSManifest,
+} from '../../utils/manifest';
+import { isDASHSrc, isHLSSrc } from '../../utils/mime';
+import { getRequestCredentials, preconnect } from '../../utils/network';
+import { isHLSSupported } from '../../utils/support';
+
+let warned = __DEV__ ? new Set<any>() : undefined;
+
+const sourceTypes = new Map<string, string>();
+
+export class SourceSelection {
+  #initialize = false;
+  #loaders: ReadSignal<MediaProviderLoader[]>;
+  #domSources: ReadSignal<Src[]>;
+  #media: MediaContext;
+  #loader: WriteSignal<MediaProviderLoader | null>;
+
+  constructor(
+    domSources: ReadSignal<Src[]>,
+    media: MediaContext,
+    loader: WriteSignal<MediaProviderLoader | null>,
+    customLoaders: MediaProviderLoader[] = [],
+  ) {
+    this.#domSources = domSources;
+    this.#media = media;
+    this.#loader = loader;
+
+    const DASH_LOADER = new DASHProviderLoader(),
+      HLS_LOADER = new HLSProviderLoader(),
+      VIDEO_LOADER = new VideoProviderLoader(),
+      AUDIO_LOADER = new AudioProviderLoader(),
+      YOUTUBE_LOADER = new YouTubeProviderLoader(),
+      VIMEO_LOADER = new VimeoProviderLoader(),
+      EMBED_LOADERS = [YOUTUBE_LOADER, VIMEO_LOADER];
+
+    this.#loaders = computed<MediaProviderLoader[]>(() => {
+      const remoteLoader = media.$state.remotePlaybackLoader();
+
+      const loaders = media.$props.preferNativeHLS()
+        ? [VIDEO_LOADER, AUDIO_LOADER, DASH_LOADER, HLS_LOADER, ...EMBED_LOADERS, ...customLoaders]
+        : [HLS_LOADER, VIDEO_LOADER, AUDIO_LOADER, DASH_LOADER, ...EMBED_LOADERS, ...customLoaders];
+
+      return remoteLoader ? [remoteLoader, ...loaders] : loaders;
+    });
+
+    const { $state } = media;
+    $state.sources.set(normalizeSrc(media.$props.src()));
+
+    // Initialize.
+    for (const src of $state.sources()) {
+      const loader = this.#loaders().find((loader) => loader.canPlay(src));
+      if (!loader) continue;
+
+      const mediaType = loader.mediaType(src);
+      media.$state.source.set(src);
+      media.$state.mediaType.set(mediaType);
+      media.$state.inferredViewType.set(mediaType);
+
+      this.#loader.set(loader);
+      this.#initialize = true;
+      break;
+    }
+  }
+
+  connect() {
+    const loader = this.#loader();
+    if (this.#initialize) {
+      this.#notifySourceChange(this.#media.$state.source(), loader);
+      this.#notifyLoaderChange(loader);
+      this.#initialize = false;
+    }
+
+    effect(this.#onSourcesChange.bind(this));
+    effect(this.#onSourceChange.bind(this));
+    effect(this.#onSetup.bind(this));
+    effect(this.#onLoadSource.bind(this));
+    effect(this.#onLoadPoster.bind(this));
+  }
+
+  #onSourcesChange() {
+    this.#media.notify('sources-change', [
+      ...normalizeSrc(this.#media.$props.src()),
+      ...this.#domSources(),
+    ]);
+  }
+
+  #onSourceChange() {
+    const { $state } = this.#media;
+
+    // Read sources off store here because it's normalized above.
+    const sources = $state.sources(),
+      currentSource = peek($state.source),
+      newSource = this.#findNewSource(currentSource, sources),
+      noMatch = sources[0]?.src && !newSource.src && !newSource.type;
+
+    if (__DEV__ && noMatch && !warned!.has(newSource.src) && !peek(this.#loader)) {
+      const source = sources[0];
+      console.warn(
+        '[vidstack] could not find a loader for any of the given media sources,' +
+          ' consider providing `type`:' +
+          `\n\n--- HTML ---\n\n<media-provider>\n  <source src="${source.src}" type="video/mp4" />\n</media-provider>"` +
+          `\n\n--- React ---\n\n<MediaPlayer src={{ src: "${source.src}", type: "video/mp4" }}>` +
+          '\n\n---\n\nFalling back to fetching source headers...',
+      );
+      warned!.add(newSource.src);
+    }
+
+    if (noMatch) {
+      const { crossOrigin } = $state,
+        credentials = getRequestCredentials(crossOrigin()),
+        abort = new AbortController();
+
+      Promise.all(
+        sources.map((source) =>
+          isString(source.src) && source.type === '?'
+            ? fetch(source.src, {
+                method: 'HEAD',
+                credentials,
+                signal: abort.signal,
+              })
+                .then((res) => {
+                  source.type = res.headers.get('content-type') || '??';
+                  sourceTypes.set(source.src as string, source.type);
+                  return source;
+                })
+                .catch(() => source)
+            : source,
+        ),
+      ).then((sources) => {
+        if (abort.signal.aborted) return;
+
+        const newSource = this.#findNewSource(peek($state.source), sources);
+
+        tick();
+
+        if (!newSource.src) {
+          this.#media.notify('error', {
+            message: 'Failed to load resource.',
+            code: 4,
+          });
+        }
+      });
+
+      return () => abort.abort();
+    }
+
+    tick();
+  }
+
+  #findNewSource(currentSource: Src, sources: Src[]) {
+    let newSource: Src = { src: '', type: '' },
+      newLoader: MediaProviderLoader | null = null,
+      triggerEvent: DOMEvent = new DOMEvent('sources-change', { detail: { sources } }),
+      loaders = this.#loaders(),
+      { started, paused, currentTime, quality, savedState } = this.#media.$state;
+
+    for (const src of sources) {
+      const loader = loaders.find((loader) => loader.canPlay(src));
+      if (loader) {
+        newSource = src;
+        newLoader = loader;
+        break;
+      }
+    }
+
+    if (isVideoQualitySrc(newSource)) {
+      const currentQuality = quality(),
+        sourceQuality = sources.find((s) => s.src === currentQuality?.src)!;
+
+      if (peek(started)) {
+        savedState.set({
+          paused: peek(paused),
+          currentTime: peek(currentTime),
+        });
+      } else {
+        savedState.set(null);
+      }
+
+      if (sourceQuality) {
+        newSource = sourceQuality;
+        triggerEvent = new DOMEvent('quality-change', {
+          detail: { quality: currentQuality },
+        });
+      }
+    }
+
+    if (!isSameSrc(currentSource, newSource)) {
+      this.#notifySourceChange(newSource, newLoader, triggerEvent);
+    }
+
+    if (newLoader !== peek(this.#loader)) {
+      this.#notifyLoaderChange(newLoader, triggerEvent);
+    }
+
+    return newSource;
+  }
+
+  #notifySourceChange(src: Src, loader: MediaProviderLoader | null, trigger?: Event) {
+    this.#media.notify('source-change', src, trigger);
+    this.#media.notify('media-type-change', loader?.mediaType(src) || 'unknown', trigger);
+  }
+
+  #notifyLoaderChange(loader: MediaProviderLoader | null, trigger?: Event) {
+    this.#media.$providerSetup.set(false);
+    this.#media.notify('provider-change', null, trigger);
+    loader && peek(() => loader!.preconnect?.(this.#media));
+    this.#loader.set(loader);
+    this.#media.notify('provider-loader-change', loader, trigger);
+  }
+
+  #onSetup() {
+    const provider = this.#media.$provider();
+
+    if (!provider || peek(this.#media.$providerSetup)) return;
+
+    if (this.#media.$state.canLoad()) {
+      scoped(() => provider.setup(), provider.scope);
+      this.#media.$providerSetup.set(true);
+      return;
+    }
+
+    peek(() => provider.preconnect?.());
+  }
+
+  #onLoadSource() {
+    if (!this.#media.$providerSetup()) return;
+
+    const provider = this.#media.$provider(),
+      source = this.#media.$state.source(),
+      crossOrigin = peek(this.#media.$state.crossOrigin),
+      preferNativeHLS = peek(this.#media.$props.preferNativeHLS);
+
+    if (isSameSrc(provider?.currentSrc, source)) {
+      return;
+    }
+
+    if (this.#media.$state.canLoad()) {
+      const abort = new AbortController();
+
+      if (isHLSSrc(source)) {
+        // Determined using `HLSProvider` if `hls.js` supported.
+        if (preferNativeHLS || !isHLSSupported()) {
+          resolveStreamTypeFromHLSManifest(source.src as string, {
+            credentials: getRequestCredentials(crossOrigin),
+            signal: abort.signal,
+          })
+            .then((streamType) => {
+              this.#media.notify('stream-type-change', streamType);
+            })
+            .catch(noop);
+        }
+      } else if (isDASHSrc(source)) {
+        resolveStreamTypeFromDASHManifest(source.src as string, {
+          credentials: getRequestCredentials(crossOrigin),
+          signal: abort.signal,
+        })
+          .then((streamType) => {
+            this.#media.notify('stream-type-change', streamType);
+          })
+          .catch(noop);
+      } else {
+        this.#media.notify('stream-type-change', 'on-demand');
+      }
+
+      peek(() => {
+        const preload = peek(this.#media.$state.preload);
+        return provider?.loadSource(source, preload).catch((error) => {
+          if (__DEV__) {
+            this.#media.logger
+              ?.errorGroup('[vidstack] failed to load source')
+              .labelledLog('Error', error)
+              .labelledLog('Source', source)
+              .labelledLog('Provider', provider)
+              .labelledLog('Media Context', { ...this.#media })
+              .dispatch();
+          }
+        });
+      });
+
+      return () => abort.abort();
+    }
+
+    try {
+      isString(source.src) && preconnect(new URL(source.src).origin);
+    } catch (error) {
+      if (__DEV__) {
+        this.#media.logger
+          ?.infoGroup(`Failed to preconnect to source: ${source.src}`)
+          .labelledLog('Error', error)
+          .dispatch();
+      }
+    }
+  }
+
+  #onLoadPoster() {
+    const loader = this.#loader(),
+      { providedPoster, source, canLoadPoster } = this.#media.$state;
+
+    if (!loader || !loader.loadPoster || !source() || !canLoadPoster() || providedPoster()) return;
+
+    const abort = new AbortController(),
+      trigger = new DOMEvent('source-change', { detail: source });
+
+    loader
+      .loadPoster(source(), this.#media, abort)
+      .then((url) => {
+        this.#media.notify('poster-change', url || '', trigger);
+      })
+      .catch(() => {
+        this.#media.notify('poster-change', '', trigger);
+      });
+
+    return () => {
+      abort.abort();
+    };
+  }
+}
+
+function normalizeSrc(src: MediaPlayerProps['src']): Src[] {
+  return (isArray(src) ? src : [src]).map((src) => {
+    if (isString(src)) {
+      return { src, type: inferType(src) };
+    } else {
+      return { ...src, type: inferType(src.src, src.type) };
+    }
+  });
+}
+
+function inferType(src: unknown, type?: string) {
+  if (isString(type) && type.length) {
+    return type;
+  } else if (isString(src) && sourceTypes.has(src)) {
+    return sourceTypes.get(src)!;
+  } else if (!type && isHLSSrc({ src, type: '' })) {
+    return 'application/x-mpegurl';
+  } else if (!type && isDASHSrc({ src, type: '' })) {
+    return 'application/dash+xml';
+  } else if (!isString(src) || src.startsWith('blob:')) {
+    return 'video/object';
+  } else if (src.includes('youtube') || src.includes('youtu.be')) {
+    return 'video/youtube';
+  } else if (
+    src.includes('vimeo') &&
+    !src.includes('progressive_redirect') &&
+    !src.includes('.m3u8')
+  ) {
+    return 'video/vimeo';
+  }
+
+  return '?';
+}
+
+export function isSameSrc(a: Src | undefined | null, b: Src | undefined | null) {
+  return a?.src === b?.src && a?.type === b?.type;
+}

package/src/components/provider/tracks.ts

@@ -0,0 +1,37 @@
+import { effect, type ReadSignal } from 'maverick.js';
+
+import type { MediaContext } from '../../core/api/media-context';
+import { TextTrack, type TextTrackInit } from '../../core/tracks/text/text-track';
+
+export class Tracks {
+  #domTracks: ReadSignal<TextTrackInit[]>;
+  #media: MediaContext;
+  #prevTracks: (TextTrack | TextTrackInit)[] = [];
+
+  constructor(domTracks: ReadSignal<TextTrackInit[]>, media: MediaContext) {
+    this.#domTracks = domTracks;
+    this.#media = media;
+    effect(this.#onTracksChange.bind(this));
+  }
+
+  #onTracksChange() {
+    const newTracks = this.#domTracks();
+
+    for (const oldTrack of this.#prevTracks) {
+      if (!newTracks.some((t) => t.id === oldTrack.id)) {
+        const track = oldTrack.id && this.#media.textTracks.getById(oldTrack.id);
+        if (track) this.#media.textTracks.remove(track);
+      }
+    }
+
+    for (const newTrack of newTracks) {
+      const id = newTrack.id || TextTrack.createId(newTrack);
+      if (!this.#media.textTracks.getById(id)) {
+        newTrack.id = id;
+        this.#media.textTracks.add(newTrack);
+      }
+    }
+
+    this.#prevTracks = newTracks;
+  }
+}

package/src/components/ui/buttons/airplay-button.ts

@@ -0,0 +1,74 @@
+import { Component } 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 { setARIALabel } from '../../../utils/dom';
+import {
+  ToggleButtonController,
+  type ToggleButtonControllerProps,
+} from './toggle-button-controller';
+
+export interface AirPlayButtonProps extends ToggleButtonControllerProps {}
+
+export interface AirPlayButtonEvents extends Pick<MediaRequestEvents, 'media-airplay-request'> {}
+
+/**
+ * A button for requesting remote playback via Apple AirPlay.
+ *
+ * @attr data-active - Whether AirPlay is connected.
+ * @attr data-supported - Whether AirPlay is available.
+ * @attr data-state - Current connection state.
+ * @see {@link https://www.apple.com/au/airplay}
+ * @docs {@link https://www.vidstack.io/docs/player/components/buttons/airplay-button}
+ */
+export class AirPlayButton extends Component<AirPlayButtonProps, {}, AirPlayButtonEvents> {
+  static props: AirPlayButtonProps = ToggleButtonController.props;
+
+  #media!: MediaContext;
+
+  constructor() {
+    super();
+    new ToggleButtonController({
+      isPresssed: this.#isPressed.bind(this),
+      onPress: this.#onPress.bind(this),
+    });
+  }
+
+  protected override onSetup(): void {
+    this.#media = useMediaContext();
+
+    const { canAirPlay, isAirPlayConnected } = this.#media.$state;
+    this.setAttributes({
+      'data-active': isAirPlayConnected,
+      'data-supported': canAirPlay,
+      'data-state': this.#getState.bind(this),
+      'aria-hidden': $ariaBool(() => !canAirPlay()),
+    });
+  }
+
+  protected override onAttach(el: HTMLElement): void {
+    el.setAttribute('data-media-tooltip', 'airplay');
+    setARIALabel(el, this.#getDefaultLabel.bind(this));
+  }
+
+  #onPress(event: Event) {
+    const remote = this.#media.remote;
+    remote.requestAirPlay(event);
+  }
+
+  #isPressed() {
+    const { remotePlaybackType, remotePlaybackState } = this.#media.$state;
+    return remotePlaybackType() === 'airplay' && remotePlaybackState() !== 'disconnected';
+  }
+
+  #getState() {
+    const { remotePlaybackType, remotePlaybackState } = this.#media.$state;
+    return remotePlaybackType() === 'airplay' && remotePlaybackState();
+  }
+
+  #getDefaultLabel() {
+    const { remotePlaybackState } = this.#media.$state;
+    return `AirPlay ${remotePlaybackState()}`;
+  }
+}