@hanifhan1f/vidstack 1.12.13 → 1.12.14

package/src/providers/html/remote-playback.ts

@@ -1,94 +0,0 @@
-import { effect, signal } from 'maverick.js';
-import { EventsController, listenEvent } from 'maverick.js/std';
-
-import type { MediaContext } from '../../core/api/media-context';
-import { getAndroidVersion, IS_CHROME } from '../../utils/support';
-import type { MediaRemotePlaybackAdapter } from '../types';
-
-export abstract class HTMLRemotePlaybackAdapter implements MediaRemotePlaybackAdapter {
-  protected abstract readonly type: 'airplay' | 'google-cast';
-  protected abstract readonly canPrompt: boolean;
-
-  readonly #media: HTMLMediaElement;
-  readonly #ctx: MediaContext;
-
-  #state?: RemotePlaybackState;
-  #supported = signal(false);
-
-  get supported() {
-    return this.#supported();
-  }
-
-  constructor(media: HTMLMediaElement, ctx: MediaContext) {
-    this.#media = media;
-    this.#ctx = ctx;
-    this.#setup();
-  }
-
-  #setup() {
-    if (__SERVER__ || !this.#media?.remote || !this.canPrompt) return;
-
-    this.#media.remote
-      .watchAvailability((available) => {
-        this.#supported.set(available);
-      })
-      .catch(() => {
-        this.#supported.set(false);
-      });
-
-    effect(this.#watchSupported.bind(this));
-  }
-
-  #watchSupported() {
-    if (!this.#supported()) return;
-
-    const events = ['connecting', 'connect', 'disconnect'],
-      onStateChange = this.#onStateChange.bind(this);
-
-    onStateChange();
-    listenEvent(this.#media, 'playing', onStateChange);
-
-    const remoteEvents = new EventsController(this.#media.remote);
-    for (const type of events) {
-      // @ts-expect-error - video remote not typed
-      remoteEvents.add(type, onStateChange);
-    }
-  }
-
-  async prompt() {
-    if (!this.supported) throw Error('Not supported on this platform.');
-
-    if (this.type === 'airplay' && this.#media.webkitShowPlaybackTargetPicker) {
-      return this.#media.webkitShowPlaybackTargetPicker();
-    }
-
-    return this.#media.remote.prompt();
-  }
-
-  #onStateChange(event?: Event) {
-    const state = this.#media.remote.state;
-    if (state === this.#state) return;
-
-    const detail = { type: this.type, state } as const;
-    this.#ctx.notify('remote-playback-change', detail, event);
-
-    this.#state = state;
-  }
-}
-
-export class HTMLAirPlayAdapter extends HTMLRemotePlaybackAdapter {
-  override type = 'airplay' as const;
-
-  get canPrompt() {
-    return 'WebKitPlaybackTargetAvailabilityEvent' in window;
-  }
-}
-
-export class HTMLGoogleCastAdapter extends HTMLRemotePlaybackAdapter {
-  override type = 'google-cast' as const;
-
-  get canPrompt() {
-    // Google Cast is available natively on Chrome Android >=56
-    return IS_CHROME && getAndroidVersion() >= 56;
-  }
-}

package/src/providers/type-check.ts

@@ -1,61 +0,0 @@
-import type { AudioProvider } from './audio/provider';
-import type { DASHProvider } from './dash/provider';
-import type { GoogleCastProvider } from './google-cast/provider';
-import type { HLSProvider } from './hls/provider';
-import type { VideoProvider } from './video/provider';
-import type { VimeoProvider } from './vimeo/provider';
-import type { YouTubeProvider } from './youtube/provider';
-
-/** @see {@link https://www.vidstack.io/docs/player/providers/audio} */
-export function isAudioProvider(provider: any): provider is AudioProvider {
-  return provider?.$$PROVIDER_TYPE === 'AUDIO';
-}
-
-/** @see {@link https://www.vidstack.io/docs/player/providers/video} */
-export function isVideoProvider(provider: any): provider is VideoProvider {
-  return provider?.$$PROVIDER_TYPE === 'VIDEO';
-}
-
-/** @see {@link https://www.vidstack.io/docs/player/providers/hls} */
-export function isHLSProvider(provider: any): provider is HLSProvider {
-  return provider?.$$PROVIDER_TYPE === 'HLS';
-}
-
-export function isDASHProvider(provider: any): provider is DASHProvider {
-  return provider?.$$PROVIDER_TYPE === 'DASH';
-}
-
-/** @see {@link https://www.vidstack.io/docs/player/providers/youtube} */
-export function isYouTubeProvider(provider: any): provider is YouTubeProvider {
-  return provider?.$$PROVIDER_TYPE === 'YOUTUBE';
-}
-
-/** @see {@link https://www.vidstack.io/docs/player/providers/vimeo} */
-export function isVimeoProvider(provider: any): provider is VimeoProvider {
-  return provider?.$$PROVIDER_TYPE === 'VIMEO';
-}
-
-/** @see {@link https://www.vidstack.io/docs/player/providers/google-cast} */
-export function isGoogleCastProvider(provider: any): provider is GoogleCastProvider {
-  return provider?.$$PROVIDER_TYPE === 'GOOGLE_CAST';
-}
-
-/** @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement} */
-export function isHTMLAudioElement(element: unknown): element is HTMLAudioElement {
-  return !__SERVER__ && element instanceof HTMLAudioElement;
-}
-
-/** @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement} */
-export function isHTMLVideoElement(element: unknown): element is HTMLVideoElement {
-  return !__SERVER__ && element instanceof HTMLVideoElement;
-}
-
-/** @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement} */
-export function isHTMLMediaElement(element: unknown): element is HTMLMediaElement {
-  return isHTMLAudioElement(element) || isHTMLVideoElement(element);
-}
-
-/** @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement} */
-export function isHTMLIFrameElement(element: unknown): element is HTMLIFrameElement {
-  return !__SERVER__ && element instanceof HTMLIFrameElement;
-}

package/src/providers/types.ts

@@ -1,95 +0,0 @@
-import type { Scope } from 'maverick.js';
-
-import type { MediaContext } from '../core/api/media-context';
-import type { MediaState } from '../core/api/player-state';
-import type { Src } from '../core/api/src-types';
-import type { MediaType } from '../core/api/types';
-import type { FullscreenAdapter } from '../foundation/fullscreen/controller';
-import type { AudioProvider } from './audio/provider';
-import type { DASHProvider } from './dash/provider';
-import type { GoogleCastProvider } from './google-cast/provider';
-import type { HLSProvider } from './hls/provider';
-import type { VideoProvider } from './video/provider';
-import type { VimeoProvider } from './vimeo/provider';
-import type { YouTubeProvider } from './youtube/provider';
-
-export type AnyMediaProvider =
-  | ({ type: 'audio' } & AudioProvider)
-  | ({ type: 'video' } & VideoProvider)
-  | ({ type: 'hls' } & HLSProvider)
-  | ({ type: 'dash' } & DASHProvider)
-  | ({ type: 'youtube' } & YouTubeProvider)
-  | ({ type: 'vimeo' } & VimeoProvider)
-  | ({ type: 'google-cast' } & GoogleCastProvider);
-
-export interface MediaProviderLoader<Provider extends MediaProviderAdapter = MediaProviderAdapter> {
-  readonly name: string;
-  target: HTMLElement | null;
-  canPlay(src: Src): boolean;
-  mediaType(src?: Src): MediaType;
-  preconnect?(ctx: MediaContext): void;
-  load(ctx: MediaContext): Promise<Provider>;
-  loadPoster?(src: Src, ctx: MediaContext, abort: AbortController): Promise<string | null>;
-}
-
-export interface MediaProviderAdapter {
-  readonly scope: Scope;
-  readonly type: string;
-  readonly currentSrc: Src | null;
-  readonly audioGain?: AudioGainAdapter;
-  readonly fullscreen?: MediaFullscreenAdapter;
-  readonly pictureInPicture?: MediaPictureInPictureAdapter;
-  readonly airPlay?: MediaRemotePlaybackAdapter;
-  readonly canLiveSync?: boolean;
-  preconnect?(): void;
-  setup(): void;
-  destroy?(): void;
-  play(): Promise<void>;
-  pause(): Promise<void>;
-  setMuted(muted: boolean): void;
-  setCurrentTime(time: number): void;
-  setVolume(volume: number): void;
-  setPlaysInline?(inline: boolean): void;
-  setPlaybackRate?(rate: number): void;
-  loadSource(src: Src, preload: MediaState['preload']): Promise<void>;
-}
-
-export interface AudioGainAdapter {
-  readonly supported: boolean;
-  readonly currentGain: number | null;
-  setGain(gain: number): void;
-  removeGain(): void;
-}
-
-export interface MediaRemotePlaybackAdapter {
-  /**
-   * Whether requesting playback is supported.
-   */
-  readonly supported: boolean;
-  /**
-   * Request remote playback.
-   */
-  prompt(options?: unknown): Promise<void>;
-}
-
-export interface MediaFullscreenAdapter extends FullscreenAdapter {}
-
-export interface MediaPictureInPictureAdapter {
-  /**
-   * Whether picture-in-picture mode is active.
-   */
-  readonly active: boolean;
-  /**
-   * Whether picture-in-picture mode is supported. This does not mean that the operation is
-   * guaranteed to be successful, only that it can be attempted.
-   */
-  readonly supported: boolean;
-  /**
-   * Request to display the current provider in picture-in-picture mode.
-   */
-  enter(): Promise<void | PictureInPictureWindow>;
-  /**
-   * Request to display the current provider in inline by exiting picture-in-picture mode.
-   */
-  exit(): Promise<void>;
-}

package/src/providers/video/loader.ts

@@ -1,45 +0,0 @@
-import { isString } from 'maverick.js/std';
-
-import type { MediaContext } from '../../core/api/media-context';
-import type { Src } from '../../core/api/src-types';
-import type { MediaType } from '../../core/api/types';
-import { isVideoSrc } from '../../utils/mime';
-import { canPlayVideoType } from '../../utils/support';
-import type { MediaProviderLoader } from '../types';
-import type { VideoProvider } from './provider';
-
-export class VideoProviderLoader implements MediaProviderLoader<VideoProvider> {
-  readonly name: string = 'video';
-
-  target!: HTMLVideoElement;
-
-  canPlay(src: Src) {
-    if (!isVideoSrc(src)) return false;
-    // Let this pass through on the server, we can figure out which type to play client-side. The
-    // important thing is that the correct provider is loaded.
-    return (
-      __SERVER__ ||
-      !isString(src.src) ||
-      src.type === '?' ||
-      canPlayVideoType(this.target, src.type)
-    );
-  }
-
-  mediaType(): MediaType {
-    return 'video';
-  }
-
-  async load(ctx: MediaContext) {
-    if (__SERVER__) {
-      throw Error('[vidstack] can not load video provider server-side');
-    }
-
-    if (__DEV__ && !this.target) {
-      throw Error(
-        '[vidstack] `<video>` element was not found - did you forget to include media provider?',
-      );
-    }
-
-    return new (await import('./provider')).VideoProvider(this.target, ctx);
-  }
-}

package/src/providers/video/native-hls-text-tracks.ts

@@ -1,69 +0,0 @@
-import { onDispose } from 'maverick.js';
-
-import type { MediaContext } from '../../core/api/media-context';
-import { TextTrackSymbol } from '../../core/tracks/text/symbols';
-import { TextTrack as VdsTextTrack } from '../../core/tracks/text/text-track';
-
-/**
- * This is used to discover text tracks that were found by the native playback engine. For example,
- * Safari will load text tracks that were embedded in the HLS playlist.
- */
-export class NativeHLSTextTracks {
-  readonly #video: HTMLVideoElement;
-  readonly #ctx: MediaContext;
-
-  constructor(video: HTMLVideoElement, ctx: MediaContext) {
-    this.#video = video;
-    this.#ctx = ctx;
-
-    video.textTracks.onaddtrack = this.#onAddTrack.bind(this);
-
-    onDispose(this.#onDispose.bind(this));
-  }
-
-  #onAddTrack(event: TrackEvent) {
-    const nativeTrack = event.track;
-
-    // Skip tracks the `NativeTextRenderer` has added.
-    if (!nativeTrack || findTextTrackElement(this.#video, nativeTrack)) return;
-
-    const track = new VdsTextTrack({
-      id: nativeTrack.id,
-      kind: nativeTrack.kind,
-      label: nativeTrack.label ?? '',
-      language: nativeTrack.language,
-      type: 'vtt',
-    });
-
-    track[TextTrackSymbol.native] = { track: nativeTrack };
-    track[TextTrackSymbol.readyState] = 2;
-    track[TextTrackSymbol.nativeHLS] = true;
-
-    let lastIndex = 0;
-    const onCueChange = (event: Event) => {
-      if (!nativeTrack.cues) return;
-      for (let i = lastIndex; i < nativeTrack.cues.length; i++) {
-        track.addCue(nativeTrack.cues[i] as VTTCue, event);
-        lastIndex++;
-      }
-    };
-
-    onCueChange(event);
-    nativeTrack.oncuechange = onCueChange;
-
-    this.#ctx.textTracks.add(track, event);
-    track.setMode(nativeTrack.mode, event);
-  }
-
-  #onDispose() {
-    this.#video.textTracks.onaddtrack = null;
-    for (const track of this.#ctx.textTracks) {
-      const nativeTrack = track[TextTrackSymbol.native]?.track as TextTrack | undefined;
-      if (nativeTrack?.oncuechange) nativeTrack.oncuechange = null;
-    }
-  }
-}
-
-function findTextTrackElement(video: HTMLVideoElement, track) {
-  return Array.from(video.children).find((el) => (el as HTMLTrackElement).track === track);
-}

package/src/providers/video/picture-in-picture.ts

@@ -1,54 +0,0 @@
-import { EventsController, listenEvent } from 'maverick.js/std';
-
-import type { MediaContext } from '../../core/api/media-context';
-import { canUsePictureInPicture } from '../../utils/support';
-import type { MediaPictureInPictureAdapter } from '../types';
-
-declare global {
-  interface GlobalEventHandlersEventMap {
-    enterpictureinpicture: Event;
-    leavepictureinpicture: Event;
-  }
-}
-
-export class VideoPictureInPicture implements MediaPictureInPictureAdapter {
-  readonly #video: HTMLVideoElement;
-  readonly #media: MediaContext;
-
-  constructor(video: HTMLVideoElement, media: MediaContext) {
-    this.#video = video;
-    this.#media = media;
-
-    new EventsController(video)
-      .add('enterpictureinpicture', this.#onEnter.bind(this))
-      .add('leavepictureinpicture', this.#onExit.bind(this));
-  }
-
-  get active() {
-    return document.pictureInPictureElement === this.#video;
-  }
-
-  get supported() {
-    return canUsePictureInPicture(this.#video);
-  }
-
-  async enter() {
-    return this.#video.requestPictureInPicture();
-  }
-
-  exit() {
-    return document.exitPictureInPicture();
-  }
-
-  #onEnter(event: Event) {
-    this.#onChange(true, event);
-  }
-
-  #onExit(event: Event) {
-    this.#onChange(false, event);
-  }
-
-  #onChange = (active: boolean, event: Event) => {
-    this.#media.notify('picture-in-picture-change', active, event);
-  };
-}

package/src/providers/video/presentation/events.ts

@@ -1,12 +0,0 @@
-import type { DOMEvent } from 'maverick.js/std';
-
-export type VideoPresentationEvents = {
-  'video-presentation-change': VideoPresentationChangeEvent;
-};
-
-/**
- * Fired when the video presentation mode changes. Only available in Safari.
- *
- * @detail mode
- */
-export interface VideoPresentationChangeEvent extends DOMEvent<WebKitPresentationMode> {}

package/src/providers/video/presentation/video-presentation.ts

@@ -1,110 +0,0 @@
-import { DOMEvent, listenEvent } from 'maverick.js/std';
-
-import type { MediaContext } from '../../../core/api/media-context';
-import { canUseVideoPresentation } from '../../../utils/support';
-import type { MediaFullscreenAdapter, MediaPictureInPictureAdapter } from '../../types';
-
-declare global {
-  interface GlobalEventHandlersEventMap {
-    webkitpresentationmodechanged: Event;
-  }
-}
-
-export class VideoPresentation {
-  #video: HTMLVideoElement;
-  #media: MediaContext;
-  #mode: WebKitPresentationMode = 'inline';
-
-  get mode() {
-    return this.#mode;
-  }
-
-  constructor(video: HTMLVideoElement, media: MediaContext) {
-    this.#video = video;
-    this.#media = media;
-    listenEvent(video, 'webkitpresentationmodechanged', this.#onModeChange.bind(this));
-  }
-
-  get supported() {
-    return canUseVideoPresentation(this.#video);
-  }
-
-  async setPresentationMode(mode: WebKitPresentationMode) {
-    if (this.#mode === mode) return;
-    this.#video.webkitSetPresentationMode!(mode);
-  }
-
-  #onModeChange(event: Event) {
-    const prevMode = this.#mode;
-    this.#mode = this.#video.webkitPresentationMode!;
-
-    if (__DEV__) {
-      this.#media.logger
-        ?.infoGroup('presentation mode change')
-        .labelledLog('Mode', this.#mode)
-        .labelledLog('Event', event)
-        .dispatch();
-    }
-
-    this.#media.player?.dispatch(
-      new DOMEvent<string>('video-presentation-change', {
-        detail: this.#mode,
-        trigger: event,
-      }),
-    );
-
-    (['fullscreen', 'picture-in-picture'] as const).forEach((type) => {
-      if (this.#mode === type || prevMode === type) {
-        this.#media.notify(`${type}-change`, this.#mode === type, event);
-      }
-    });
-  }
-}
-
-export class FullscreenPresentationAdapter implements MediaFullscreenAdapter {
-  #presentation: VideoPresentation;
-
-  get active() {
-    return this.#presentation.mode === 'fullscreen';
-  }
-
-  get supported() {
-    return this.#presentation.supported;
-  }
-
-  constructor(presentation: VideoPresentation) {
-    this.#presentation = presentation;
-  }
-
-  async enter() {
-    this.#presentation.setPresentationMode('fullscreen');
-  }
-
-  async exit() {
-    this.#presentation.setPresentationMode('inline');
-  }
-}
-
-export class PIPPresentationAdapter implements MediaPictureInPictureAdapter {
-  #presentation: VideoPresentation;
-
-  get active() {
-    return this.#presentation.mode === 'picture-in-picture';
-  }
-
-  get supported() {
-    return this.#presentation.supported;
-  }
-
-  constructor(presentation: VideoPresentation) {
-    this.#presentation = presentation;
-  }
-
-  async enter() {
-    this.#presentation.setPresentationMode('picture-in-picture');
-  }
-
-  async exit() {
-    this.#presentation.setPresentationMode('inline');
-  }
-}

package/src/providers/video/provider.ts

@@ -1,91 +0,0 @@
-import { onDispose, scoped } from 'maverick.js';
-
-import type { MediaContext } from '../../core/api/media-context';
-import {
-  canPlayHLSNatively,
-  canUsePictureInPicture,
-  canUseVideoPresentation,
-} from '../../utils/support';
-import { HTMLMediaProvider } from '../html/provider';
-import { HTMLAirPlayAdapter } from '../html/remote-playback';
-import type {
-  MediaFullscreenAdapter,
-  MediaPictureInPictureAdapter,
-  MediaProviderAdapter,
-  MediaRemotePlaybackAdapter,
-} from '../types';
-import { NativeHLSTextTracks } from './native-hls-text-tracks';
-import { VideoPictureInPicture } from './picture-in-picture';
-import {
-  FullscreenPresentationAdapter,
-  PIPPresentationAdapter,
-  VideoPresentation,
-} from './presentation/video-presentation';
-
-/**
- * The video provider adapts the `<video>` element to enable loading videos via the HTML Media
- * Element API.
- *
- * @docs {@link https://www.vidstack.io/docs/player/providers/video}
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video}
- * @example
- * ```html
- * <media-player
- *   src="https://files.vidstack.io/720p.mp4"
- *   poster="https://files.vidstack.io/poster.png"
- * >
- *   <media-provider></media-provider>
- * </media-player>
- * ```
- */
-export class VideoProvider extends HTMLMediaProvider implements MediaProviderAdapter {
-  protected $$PROVIDER_TYPE = 'VIDEO';
-
-  override get type() {
-    return 'video';
-  }
-
-  airPlay?: MediaRemotePlaybackAdapter;
-  fullscreen?: MediaFullscreenAdapter;
-  pictureInPicture?: MediaPictureInPictureAdapter;
-
-  constructor(video: HTMLVideoElement, ctx: MediaContext) {
-    super(video, ctx);
-
-    scoped(() => {
-      this.airPlay = new HTMLAirPlayAdapter(video, ctx);
-
-      if (canUseVideoPresentation(video)) {
-        const presentation = new VideoPresentation(video, ctx);
-        this.fullscreen = new FullscreenPresentationAdapter(presentation);
-        this.pictureInPicture = new PIPPresentationAdapter(presentation);
-      } else if (canUsePictureInPicture(video)) {
-        this.pictureInPicture = new VideoPictureInPicture(video, ctx);
-      }
-    }, this.scope);
-  }
-
-  override setup(): void {
-    super.setup();
-
-    if (canPlayHLSNatively(this.video)) {
-      new NativeHLSTextTracks(this.video, this.ctx);
-    }
-
-    this.ctx.textRenderers.attachVideo(this.video);
-    onDispose(() => {
-      this.ctx.textRenderers.attachVideo(null);
-    });
-
-    if (this.type === 'video') this.ctx.notify('provider-setup', this);
-  }
-
-  /**
-   * The native HTML `<video>` element.
-   *
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement}
-   */
-  get video() {
-    return this.media as HTMLVideoElement;
-  }
-}