@hanifhan1f/vidstack 1.12.13

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

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

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

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

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

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

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

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

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

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