@hanifhan1f/vidstack 1.12.13

package/src/providers/dash/lib-loader.ts

@@ -0,0 +1,202 @@
+import { DOMEvent, isFunction, isString, isUndefined } from 'maverick.js/std';
+
+import type { MediaContext } from '../../core/api/media-context';
+import { coerceToError } from '../../utils/error';
+import { loadScript } from '../../utils/network';
+import type {
+  DASHConstructor,
+  DASHConstructorLoader,
+  DASHLibrary,
+  DASHNamespace,
+  DASHNamespaceLoader,
+} from './types';
+
+interface LoadDASHConstructorCallbacks {
+  onLoadStart?: () => void;
+  onLoaded?: (ctor: DASHConstructor) => void;
+  onLoadError?: (err: Error) => void;
+}
+
+export class DASHLibLoader {
+  #lib: DASHLibrary;
+  #ctx: MediaContext;
+  #callback: (ctor: DASHConstructor) => void;
+
+  constructor(lib: DASHLibrary, ctx: MediaContext, callback: (ctor: DASHConstructor) => void) {
+    this.#lib = lib;
+    this.#ctx = ctx;
+    this.#callback = callback;
+    this.#startLoading();
+  }
+
+  async #startLoading() {
+    if (__DEV__) this.#ctx.logger?.info('🏗️ Loading DASH Library');
+
+    const callbacks: LoadDASHConstructorCallbacks = {
+      onLoadStart: this.#onLoadStart.bind(this),
+      onLoaded: this.#onLoaded.bind(this),
+      onLoadError: this.#onLoadError.bind(this),
+    };
+
+    // If not a string it'll return undefined.
+    let ctor = await loadDASHScript(this.#lib, callbacks);
+
+    // If it's not a remote source, it must of been passed in directly as a static/dynamic import.
+    if (isUndefined(ctor) && !isString(this.#lib)) ctor = await importDASH(this.#lib, callbacks);
+
+    // We failed loading the constructor.
+    if (!ctor) return null;
+
+    // Not supported.
+    if (!window.dashjs.supportsMediaSource()) {
+      const message = '[vidstack] `dash.js` is not supported in this environment';
+      if (__DEV__) this.#ctx.logger?.error(message);
+      this.#ctx.player.dispatch(new DOMEvent<void>('dash-unsupported'));
+      this.#ctx.notify('error', { message, code: 4 });
+      return null;
+    }
+
+    return ctor;
+  }
+
+  #onLoadStart() {
+    if (__DEV__) {
+      this.#ctx.logger
+        ?.infoGroup('Starting to load `dash.js`')
+        .labelledLog('URL', this.#lib)
+        .dispatch();
+    }
+
+    this.#ctx.player.dispatch(new DOMEvent<void>('dash-lib-load-start'));
+  }
+
+  #onLoaded(ctor: DASHConstructor) {
+    if (__DEV__) {
+      this.#ctx.logger
+        ?.infoGroup('Loaded `dash.js`')
+        .labelledLog('Library', this.#lib)
+        .labelledLog('Constructor', ctor)
+        .dispatch();
+    }
+
+    this.#ctx.player.dispatch(
+      new DOMEvent<DASHConstructor>('dash-lib-loaded', {
+        detail: ctor,
+      }),
+    );
+
+    this.#callback(ctor);
+  }
+
+  #onLoadError(e: any) {
+    const error = coerceToError(e);
+
+    if (__DEV__) {
+      this.#ctx.logger
+        ?.errorGroup('[vidstack] Failed to load `dash.js`')
+        .labelledLog('Library', this.#lib)
+        .labelledLog('Error', e)
+        .dispatch();
+    }
+
+    this.#ctx.player.dispatch(
+      new DOMEvent<any>('dash-lib-load-error', {
+        detail: error,
+      }),
+    );
+
+    this.#ctx.notify('error', {
+      message: error.message,
+      code: 4,
+      error,
+    });
+  }
+}
+
+async function importDASH(
+  loader: DASHConstructor | DASHConstructorLoader | DASHNamespace | DASHNamespaceLoader | undefined,
+  callbacks: LoadDASHConstructorCallbacks = {},
+) {
+  if (isUndefined(loader)) return undefined;
+
+  callbacks.onLoadStart?.();
+
+  if (isDASHConstructor(loader)) {
+    callbacks.onLoaded?.(loader);
+    return loader;
+  }
+
+  if (isDASHNamespace(loader)) {
+    const ctor = loader.MediaPlayer;
+    callbacks.onLoaded?.(ctor);
+    return ctor;
+  }
+
+  try {
+    const ctor = (await loader())?.default;
+
+    if (isDASHNamespace(ctor)) {
+      callbacks.onLoaded?.(ctor.MediaPlayer);
+      return ctor.MediaPlayer;
+    }
+
+    if (ctor) {
+      callbacks.onLoaded?.(ctor);
+    } else {
+      throw Error(
+        __DEV__
+          ? '[vidstack] failed importing `dash.js`. Dynamic import returned invalid object.'
+          : '',
+      );
+    }
+
+    return ctor;
+  } catch (err) {
+    callbacks.onLoadError?.(err as Error);
+  }
+
+  return undefined;
+}
+
+/**
+ * Loads `dash.js` from the remote source given via `library` into the window namespace. This
+ * is because `dash.js` in {currentYear} still doesn't provide a ESM export. This method will
+ * return `undefined` if it fails to load the script. Listen to `dash-lib-load-error` to be
+ * notified of any failures.
+ */
+async function loadDASHScript(
+  src: unknown,
+  callbacks: LoadDASHConstructorCallbacks = {},
+): Promise<DASHConstructor | undefined> {
+  if (!isString(src)) return undefined;
+
+  callbacks.onLoadStart?.();
+
+  try {
+    await loadScript(src);
+
+    if (!isFunction((window as any).dashjs.MediaPlayer)) {
+      throw Error(
+        __DEV__
+          ? '[vidstack] failed loading `dash.js`. Could not find a valid `Dash` constructor on window'
+          : '',
+      );
+    }
+
+    const ctor = window.dashjs.MediaPlayer;
+    callbacks.onLoaded?.(ctor);
+    return ctor;
+  } catch (err) {
+    callbacks.onLoadError?.(err as Error);
+  }
+
+  return undefined;
+}
+
+function isDASHConstructor(value: any): value is DASHConstructor {
+  return value && value.prototype && value.prototype !== Function;
+}
+
+function isDASHNamespace(value: any): value is DASHNamespace {
+  return value && 'MediaPlayer' in value;
+}

package/src/providers/dash/loader.ts

@@ -0,0 +1,33 @@
+import type { Src } from '../../core/api/src-types';
+import { isDASHSrc } from '../../utils/mime';
+import { isDASHSupported } from '../../utils/support';
+import type { MediaProviderLoader } from '../types';
+import { VideoProviderLoader } from '../video/loader';
+import { DASHProvider } from './provider';
+
+export class DASHProviderLoader
+  extends VideoProviderLoader
+  implements MediaProviderLoader<DASHProvider>
+{
+  static supported = isDASHSupported();
+
+  override readonly name = 'dash';
+
+  override canPlay(src: Src) {
+    return DASHProviderLoader.supported && isDASHSrc(src);
+  }
+
+  override async load(context) {
+    if (__SERVER__) {
+      throw Error('[vidstack] can not load dash 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')).DASHProvider(this.target, context);
+  }
+}

package/src/providers/dash/provider.ts

@@ -0,0 +1,135 @@
+import { peek, type Dispose } from 'maverick.js';
+import { isString } from 'maverick.js/std';
+
+import type { Src } from '../../core/api/src-types';
+import { preconnect } from '../../utils/network';
+import { isDASHSupported } from '../../utils/support';
+import type { MediaProviderAdapter } from '../types';
+import { VideoProvider } from '../video/provider';
+import { DASHController } from './dash';
+import { DASHLibLoader } from './lib-loader';
+import type { DASHConstructor, DASHInstanceCallback, DASHLibrary } from './types';
+
+const JS_DELIVR_CDN = 'https://cdn.jsdelivr.net';
+
+/**
+ * The DASH provider introduces support for DASH streaming via the popular `dash.js`
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/providers/dash}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video}
+ * @see {@link https://cdn.dashjs.org/latest/jsdoc/index.html}
+ * @example
+ * ```html
+ * <media-player
+ *   src="https://files.vidstack.io/dash/manifest.mpd"
+ *   poster="https://files.vidstack.io/poster.png"
+ * >
+ *   <media-provider></media-provider>
+ * </media-player>
+ * ```
+ */
+export class DASHProvider extends VideoProvider implements MediaProviderAdapter {
+  protected override $$PROVIDER_TYPE = 'DASH';
+
+  #ctor: DASHConstructor | null = null;
+  readonly #controller = new DASHController(this.video, this.ctx);
+
+  /**
+   * The `dash.js` constructor.
+   */
+  get ctor() {
+    return this.#ctor;
+  }
+
+  /**
+   * The current `dash.js` instance.
+   */
+  get instance() {
+    return this.#controller.instance;
+  }
+
+  /**
+   * Whether `dash.js` is supported in this environment.
+   */
+  static supported = isDASHSupported();
+
+  override get type() {
+    return 'dash';
+  }
+
+  get canLiveSync() {
+    return true;
+  }
+
+  #library: DASHLibrary = `${JS_DELIVR_CDN}/npm/dashjs@4.7.4/dist/dash${
+    __DEV__ ? '.all.debug.js' : '.all.min.js'
+  }`;
+
+  /**
+   * The `dash.js` configuration object.
+   *
+   * @see {@link https://cdn.dashjs.org/latest/jsdoc/module-Settings.html}
+   */
+  get config() {
+    return this.#controller.config;
+  }
+
+  set config(config) {
+    this.#controller.config = config;
+  }
+
+  /**
+   * The `dash.js` constructor (supports dynamic imports) or a URL of where it can be found.
+   *
+   * @defaultValue `https://cdn.jsdelivr.net/npm/dashjs@4.7.4/dist/dash.all.min.js`
+   */
+  get library() {
+    return this.#library;
+  }
+
+  set library(library) {
+    this.#library = library;
+  }
+
+  preconnect(): void {
+    if (!isString(this.#library)) return;
+    preconnect(this.#library);
+  }
+
+  override setup() {
+    super.setup();
+    new DASHLibLoader(this.#library, this.ctx, (ctor) => {
+      this.#ctor = ctor;
+      this.#controller.setup(ctor);
+      this.ctx.notify('provider-setup', this);
+      const src = peek(this.ctx.$state.source);
+      if (src) this.loadSource(src);
+    });
+  }
+
+  override async loadSource(src: Src, preload?: HTMLMediaElement['preload']) {
+    if (!isString(src.src)) {
+      this.removeSource();
+      return;
+    }
+
+    this.media.preload = preload || '';
+    this.appendSource(src as Src<string>, 'application/x-mpegurl');
+    this.#controller.loadSource(src);
+    this.currentSrc = src as Src<string>;
+  }
+
+  /**
+   * The given callback is invoked when a new `dash.js` instance is created and right before it's
+   * attached to media.
+   */
+  onInstance(callback: DASHInstanceCallback): Dispose {
+    const instance = this.#controller.instance;
+    if (instance) callback(instance);
+    return this.#controller.onInstance(callback);
+  }
+
+  destroy() {
+    this.#controller.destroy();
+  }
+}

package/src/providers/dash/types.ts

@@ -0,0 +1,21 @@
+import type DASH from 'dashjs';
+
+import type { DASHProviderEvents } from './events';
+
+export { type DASHProviderEvents };
+
+export type DASHConstructor = typeof DASH.MediaPlayer;
+export type DASHConstructorLoader = () => Promise<{ default: DASHConstructor } | undefined>;
+
+export type DASHNamespace = typeof DASH;
+export type DASHNamespaceLoader = () => Promise<{ default: typeof DASH } | undefined>;
+
+export type DASHLibrary =
+  | DASHConstructor
+  | DASHConstructorLoader
+  | DASHNamespace
+  | DASHNamespaceLoader
+  | string
+  | undefined;
+
+export type DASHInstanceCallback = (player: DASH.MediaPlayerClass) => void;

package/src/providers/embed/EmbedProvider.ts

@@ -0,0 +1,84 @@
+import { effect, peek, signal } from 'maverick.js';
+import { isString, listenEvent } from 'maverick.js/std';
+
+import { appendParamsToURL } from '../../utils/network';
+
+export abstract class EmbedProvider<Message> {
+  #iframe: HTMLIFrameElement;
+
+  protected abstract getOrigin(): string;
+  protected abstract buildParams(): Record<string, any>;
+  protected abstract onMessage(message: Message, event: MessageEvent): void;
+  protected abstract onLoad(): void;
+
+  protected src = signal('');
+
+  /**
+   * Defines which referrer is sent when fetching the resource.
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy}
+   */
+  referrerPolicy: ReferrerPolicy | null = null;
+
+  get iframe() {
+    return this.#iframe;
+  }
+
+  constructor(iframe: HTMLIFrameElement) {
+    this.#iframe = iframe;
+
+    iframe.setAttribute('frameBorder', '0');
+    iframe.setAttribute('aria-hidden', 'true');
+
+    iframe.setAttribute(
+      'allow',
+      'autoplay; fullscreen; encrypted-media; picture-in-picture; accelerometer; gyroscope',
+    );
+
+    if (this.referrerPolicy !== null) {
+      iframe.setAttribute('referrerpolicy', this.referrerPolicy);
+    }
+  }
+
+  setup() {
+    listenEvent(window, 'message' as any, this.#onWindowMessage.bind(this) as any);
+    listenEvent(this.#iframe, 'load', this.onLoad.bind(this));
+    effect(this.#watchSrc.bind(this));
+  }
+
+  #watchSrc() {
+    const src = this.src();
+
+    if (!src.length) {
+      this.#iframe.setAttribute('src', '');
+      return;
+    }
+
+    const params = peek(() => this.buildParams());
+    this.#iframe.setAttribute('src', appendParamsToURL(src, params));
+  }
+
+  postMessage(message: any, target?: string) {
+    if (__SERVER__) return;
+    this.#iframe.contentWindow?.postMessage(JSON.stringify(message), target ?? '*');
+  }
+
+  #onWindowMessage(event: MessageEvent) {
+    const origin = this.getOrigin(),
+      isOriginMatch =
+        (event.source === null || event.source === this.#iframe?.contentWindow) &&
+        (!isString(origin) || origin === event.origin);
+
+    if (!isOriginMatch) return;
+
+    try {
+      const message = JSON.parse(event.data);
+      if (message) this.onMessage(message, event);
+      return;
+    } catch (e) {
+      // no-op
+    }
+
+    if (event.data) this.onMessage(event.data, event);
+  }
+}

package/src/providers/google-cast/events.ts

@@ -0,0 +1,53 @@
+import type { DOMEvent } from 'maverick.js/std';
+
+import type { MediaPlayer } from '../../components/player';
+
+export interface GoogleCastEvents {
+  'google-cast-load-start': GoogleCastLoadStartEvent;
+  'google-cast-loaded': GoogleCastLoadedEvent;
+  'google-cast-prompt-open': GoogleCastPromptEvent;
+  'google-cast-prompt-close': GoogleCastPromptEvent;
+  'google-cast-prompt-error': GoogleCastPromptErrorEvent;
+}
+
+export interface GoogleCastEvent<DetailType = unknown> extends DOMEvent<DetailType> {
+  target: MediaPlayer;
+}
+
+/**
+ * Fired when the Google Cast framework starts loading.
+ */
+export interface GoogleCastLoadStartEvent extends GoogleCastEvent<void> {}
+
+/**
+ * Fired when the Google Cast framework has loaded.
+ */
+export interface GoogleCastLoadedEvent extends GoogleCastEvent<void> {}
+
+/**
+ * Fired when the Google Cast prompt is opened/closed.
+ */
+export interface GoogleCastPromptEvent extends GoogleCastEvent<void> {}
+
+export interface GoogleCastPromptError extends Error {
+  code: GoogleCastPromptErrorCode;
+}
+
+export type GoogleCastPromptErrorCode =
+  | 'CAST_NOT_AVAILABLE'
+  | 'CANCEL'
+  | 'TIMEOUT'
+  | 'API_NOT_INITIALIZED'
+  | 'INVALID_PARAMETER'
+  | 'EXTENSION_NOT_COMPATIBLE'
+  | 'EXTENSION_MISSING'
+  | 'RECEIVER_UNAVAILABLE'
+  | 'SESSION_ERROR'
+  | 'CHANNEL_ERROR'
+  | 'NO_DEVICES_AVAILABLE'
+  | 'LOAD_MEDIA_FAILED';
+
+/**
+ * Fired when requesting Google Cast has failed.
+ */
+export interface GoogleCastPromptErrorEvent extends GoogleCastEvent<GoogleCastPromptError> {}

package/src/providers/google-cast/loader.ts

@@ -0,0 +1,174 @@
+import { peek } from 'maverick.js';
+import type { DOMEvent } 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 { canGoogleCastSrc } from '../../utils/mime';
+import { loadScript } from '../../utils/network';
+import { IS_CHROME, IS_IOS } from '../../utils/support';
+import type { MediaProviderLoader } from '../types';
+import type { GoogleCastPromptError, GoogleCastPromptErrorCode } from './events';
+import type { GoogleCastProvider } from './provider';
+import type { GoogleCastOptions } from './types';
+import {
+  getCastContext,
+  getCastErrorMessage,
+  getCastFrameworkURL,
+  getCastSession,
+  getDefaultCastOptions,
+  hasLoadedCastFramework,
+  isCastAvailable,
+  isCastConnected,
+} from './utils';
+
+export class GoogleCastLoader implements MediaProviderLoader<GoogleCastProvider> {
+  readonly name = 'google-cast';
+
+  target!: HTMLElement;
+
+  #player?: cast.framework.RemotePlayer;
+
+  /**
+   * @see {@link https://developers.google.com/cast/docs/reference/web_sender/cast.framework.CastContext}
+   */
+  get cast() {
+    return getCastContext();
+  }
+
+  mediaType(): MediaType {
+    return 'video';
+  }
+
+  canPlay(src: Src) {
+    // Casting is not supported on iOS.
+    return IS_CHROME && !IS_IOS && canGoogleCastSrc(src);
+  }
+
+  async prompt(ctx: MediaContext) {
+    let loadEvent: DOMEvent | undefined,
+      openEvent: DOMEvent | undefined,
+      errorEvent: DOMEvent | undefined;
+
+    try {
+      loadEvent = await this.#loadCastFramework(ctx);
+
+      // Not working as expected.
+      // const State = window.cast.framework.CastState;
+      // if (this.cast.getCastState() === State.NO_DEVICES_AVAILABLE) {
+      //   throw this.#createError(State.NO_DEVICES_AVAILABLE, 'No cast devices found.');
+      // }
+
+      if (!this.#player) {
+        this.#player = new cast.framework.RemotePlayer();
+        new cast.framework.RemotePlayerController(this.#player);
+      }
+
+      openEvent = ctx.player.createEvent('google-cast-prompt-open', {
+        trigger: loadEvent,
+      });
+
+      ctx.player.dispatchEvent(openEvent);
+
+      this.#notifyRemoteStateChange(ctx, 'connecting', openEvent);
+
+      await this.#showPrompt(peek(ctx.$props.googleCast));
+
+      ctx.$state.remotePlaybackInfo.set({
+        deviceName: getCastSession()?.getCastDevice().friendlyName,
+      });
+
+      if (isCastConnected()) this.#notifyRemoteStateChange(ctx, 'connected', openEvent);
+    } catch (code) {
+      const error =
+        code instanceof Error
+          ? (code as GoogleCastPromptError)
+          : this.#createError(
+              (code + '').toUpperCase() as GoogleCastPromptErrorCode,
+              'Prompt failed.',
+            );
+
+      errorEvent = ctx.player.createEvent('google-cast-prompt-error', {
+        detail: error,
+        trigger: openEvent ?? loadEvent,
+        cancelable: true,
+      });
+
+      ctx.player.dispatch(errorEvent);
+
+      this.#notifyRemoteStateChange(
+        ctx,
+        isCastConnected() ? 'connected' : 'disconnected',
+        errorEvent,
+      );
+
+      throw error;
+    } finally {
+      ctx.player.dispatch('google-cast-prompt-close', {
+        trigger: errorEvent ?? openEvent ?? loadEvent,
+      });
+    }
+  }
+
+  async load(ctx: MediaContext) {
+    if (__SERVER__) {
+      throw Error('[vidstack] can not load google cast provider server-side');
+    }
+
+    if (!this.#player) {
+      throw Error('[vidstack] google cast player was not initialized');
+    }
+
+    return new (await import('./provider')).GoogleCastProvider(this.#player, ctx);
+  }
+
+  async #loadCastFramework(ctx: MediaContext) {
+    if (hasLoadedCastFramework()) return;
+
+    const loadStartEvent = ctx.player.createEvent('google-cast-load-start');
+    ctx.player.dispatch(loadStartEvent);
+
+    await loadScript(getCastFrameworkURL());
+    await customElements.whenDefined('google-cast-launcher');
+
+    const loadedEvent = ctx.player.createEvent('google-cast-loaded', { trigger: loadStartEvent });
+    ctx.player.dispatch(loadedEvent);
+
+    if (!isCastAvailable()) {
+      throw this.#createError('CAST_NOT_AVAILABLE', 'Google Cast not available on this platform.');
+    }
+
+    return loadedEvent;
+  }
+
+  async #showPrompt(options: GoogleCastOptions) {
+    this.#setOptions(options);
+
+    const errorCode = await this.cast!.requestSession();
+
+    if (errorCode) {
+      throw this.#createError(
+        errorCode.toUpperCase() as GoogleCastPromptErrorCode,
+        getCastErrorMessage(errorCode),
+      );
+    }
+  }
+
+  #setOptions(options?: GoogleCastOptions) {
+    this.cast?.setOptions({
+      ...getDefaultCastOptions(),
+      ...options,
+    });
+  }
+
+  #notifyRemoteStateChange(ctx: MediaContext, state: RemotePlaybackState, trigger?: Event) {
+    const detail = { type: 'google-cast', state } as const;
+    ctx.notify('remote-playback-change', detail, trigger);
+  }
+
+  #createError(code: GoogleCastPromptErrorCode, message: string): GoogleCastPromptError {
+    const error = Error(message) as GoogleCastPromptError;
+    error.code = code;
+    return error;
+  }
+}