@hanifhan1f/vidstack 1.12.13 → 1.12.18

package/src/foundation/observers/intersection-observer.ts

@@ -1,60 +0,0 @@
-import { onDispose, ViewController } from 'maverick.js';
-
-export class IntersectionObserverController extends ViewController {
-  #init: IntersectionObserverInit;
-  #observer: IntersectionObserver | undefined;
-
-  constructor(init: IntersectionObserverInit) {
-    super();
-    this.#init = init;
-  }
-
-  protected override onConnect(el: HTMLElement) {
-    this.#observer = new IntersectionObserver((entries) => {
-      this.#init.callback?.(entries, this.#observer!);
-    }, this.#init);
-
-    this.#observer.observe(el);
-
-    onDispose(this.#onDisconnect.bind(this));
-  }
-
-  /**
-   * Disconnect any active intersection observers.
-   */
-  #onDisconnect(): void {
-    this.#observer?.disconnect();
-    this.#observer = undefined;
-  }
-}
-
-export interface IntersectionObserverInit {
-  /**
-   * The element that is used as the viewport for checking visibility of the target. Must be the
-   * ancestor of the target. Defaults to the browser viewport if not specified or if `null`.
-   */
-  root?: Element | Document | null;
-  /**
-   * Margin around the root. Can have values similar to the CSS margin property, e.g.
-   * "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. This set
-   * of values serves to grow or shrink each side of the root element's bounding box before
-   * computing intersections. Defaults to all zeros.
-   */
-  rootMargin?: string;
-  /**
-   * Either a single number or an array of numbers which indicate at what percentage of the
-   * target's visibility the observer's callback should be executed. If you only want to detect
-   * when visibility passes the `50%` mark, you can use a value of `0.5`. If you want the callback
-   * to run every time visibility passes another `25%`, you would specify the array
-   * `[0, 0.25, 0.5, 0.75, 1]`.
-   *
-   * The default is `0` (meaning as soon as even one pixel is visible, the callback will be run).
-   * A value of `1.0` means that the threshold isn't considered passed until every pixel is
-   * visible.
-   */
-  threshold?: number | number[];
-  /**
-   * Invoked when an intersection event occurs.
-   */
-  callback?: IntersectionObserverCallback;
-}

package/src/foundation/observers/page-visibility.ts

@@ -1,105 +0,0 @@
-import { signal } from 'maverick.js';
-import { EventsController, listenEvent } from 'maverick.js/std';
-
-import { IS_SAFARI } from '../../utils/support';
-
-const PAGE_EVENTS = ['focus', 'blur', 'visibilitychange', 'pageshow', 'pagehide'] as const;
-
-declare global {
-  interface GlobalEventHandlersEventMap {
-    beforeunload: Event;
-    pageshow: Event;
-    pagehide: Event;
-    visibilitychange: Event;
-  }
-}
-
-export class PageVisibility {
-  #state = signal<PageState>(determinePageState());
-
-  #visibility = signal<DocumentVisibility>(__SERVER__ ? 'visible' : document.visibilityState);
-
-  #safariBeforeUnloadTimeout: any;
-
-  connect() {
-    const events = new EventsController(window),
-      handlePageEvent = this.#handlePageEvent.bind(this);
-
-    for (const eventType of PAGE_EVENTS) {
-      events.add(eventType, handlePageEvent);
-    }
-
-    /**
-     * Safari does not reliably fire the `pagehide` or `visibilitychange` events when closing a
-     * tab, so we have to use `beforeunload` with a timeout to check whether the default action
-     * was prevented.
-     *
-     * We only add this to Safari because adding it to Firefox would prevent the page from being
-     * eligible for `bfcache`.
-     *
-     * @see https://bugs.webkit.org/show_bug.cgi?id=151610
-     * @see https://bugs.webkit.org/show_bug.cgi?id=151234
-     */
-    if (IS_SAFARI) {
-      events.add('beforeunload', (event) => {
-        this.#safariBeforeUnloadTimeout = setTimeout(() => {
-          if (!(event.defaultPrevented || (event.returnValue as any).length > 0)) {
-            this.#state.set('hidden');
-            this.#visibility.set('hidden');
-          }
-        }, 0);
-      });
-    }
-  }
-
-  /**
-   * The current page state. Important to note we only account for a subset of page states, as
-   * the rest aren't valuable to the player at the moment.
-   *
-   * - **active:** A page is in the active state if it is visible and has input focus.
-   * - **passive:** A page is in the passive state if it is visible and does not have input focus.
-   * - **hidden:** A page is in the hidden state if it is not visible.
-   *
-   * @see https://developers.google.com/web/updates/2018/07/page-lifecycle-api#states
-   */
-  get pageState(): PageState {
-    return this.#state();
-  }
-
-  /**
-   * The current document visibility state.
-   *
-   * - **visible:** The page content may be at least partially visible. In practice, this means that
-   * the page is the foreground tab of a non-minimized window.
-   * - **hidden:** The page content is not visible to the user. In practice this means that the
-   * document is either a background tab or part of a minimized window, or the OS screen lock is
-   * active.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState
-   */
-  get visibility(): DocumentVisibility {
-    return this.#visibility();
-  }
-
-  #handlePageEvent(event: Event) {
-    if (IS_SAFARI) window.clearTimeout(this.#safariBeforeUnloadTimeout);
-    // The `blur` event can fire while the page is being unloaded, so we only need to update the
-    // state if the current state is "active".
-    if (event.type !== 'blur' || this.#state() === 'active') {
-      this.#state.set(determinePageState(event));
-      // The ternary condition is incase some browser implements other states such as `prerender`.
-      this.#visibility.set(document.visibilityState == 'hidden' ? 'hidden' : 'visible');
-    }
-  }
-}
-
-function determinePageState(event?: Event): PageState {
-  if (__SERVER__) return 'hidden';
-  if (event?.type === 'blur' || document.visibilityState === 'hidden') return 'hidden';
-  if (document.hasFocus()) return 'active';
-  return 'passive';
-}
-
-export type PageState = 'active' | 'passive' | 'hidden';
-
-export type DocumentVisibility = 'visible' | 'hidden';

package/src/foundation/orientation/controller.ts

@@ -1,139 +0,0 @@
-import { onDispose, peek, signal, ViewController } from 'maverick.js';
-import { listenEvent } from 'maverick.js/std';
-
-import { canOrientScreen } from '../../utils/support';
-import type { ScreenOrientationEvents } from './events';
-import type { ScreenOrientationLockType, ScreenOrientationType } from './types';
-
-export class ScreenOrientationController extends ViewController<{}, {}, ScreenOrientationEvents> {
-  #type = signal(this.#getScreenOrientation());
-  #locked = signal(false);
-  #currentLock: ScreenOrientationLockType | undefined;
-
-  /**
-   * The current screen orientation type.
-   *
-   * @signal
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation}
-   * @see https://w3c.github.io/screen-orientation/#screen-orientation-types-and-locks
-   */
-  get type(): ScreenOrientationType | undefined {
-    return this.#type();
-  }
-
-  /**
-   * Whether the screen orientation is currently locked.
-   *
-   * @signal
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation}
-   * @see https://w3c.github.io/screen-orientation/#screen-orientation-types-and-locks
-   */
-  get locked(): boolean {
-    return this.#locked();
-  }
-
-  /**
-   * Whether the viewport is in a portrait orientation.
-   *
-   * @signal
-   */
-  get portrait() {
-    return this.#type().startsWith('portrait');
-  }
-
-  /**
-   * Whether the viewport is in a landscape orientation.
-   *
-   * @signal
-   */
-  get landscape() {
-    return this.#type().startsWith('landscape');
-  }
-
-  /**
-   * Whether the native Screen Orientation API is available.
-   */
-  static readonly supported = canOrientScreen();
-
-  /**
-   * Whether the native Screen Orientation API is available.
-   */
-  get supported() {
-    return ScreenOrientationController.supported;
-  }
-
-  protected override onConnect() {
-    if (this.supported) {
-      listenEvent(screen.orientation, 'change', this.#onOrientationChange.bind(this));
-    } else {
-      const query = window.matchMedia('(orientation: landscape)');
-      query.onchange = this.#onOrientationChange.bind(this);
-      onDispose(() => (query.onchange = null));
-    }
-
-    onDispose(this.#onDisconnect.bind(this));
-  }
-
-  async #onDisconnect() {
-    if (this.supported && this.#locked()) await this.unlock();
-  }
-
-  #onOrientationChange(event: Event) {
-    this.#type.set(this.#getScreenOrientation()!);
-    this.dispatch('orientation-change', {
-      detail: {
-        orientation: peek(this.#type),
-        lock: this.#currentLock,
-      },
-      trigger: event,
-    });
-  }
-
-  /**
-   * Locks the orientation of the screen to the desired orientation type using the
-   * Screen Orientation API.
-   *
-   * @param lockType - The screen lock orientation type.
-   * @throws Error - If screen orientation API is unavailable.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation}
-   * @see {@link https://w3c.github.io/screen-orientation}
-   */
-  async lock(lockType: ScreenOrientationLockType): Promise<void> {
-    if (peek(this.#locked) || this.#currentLock === lockType) return;
-    this.#assertScreenOrientationAPI();
-    await (screen.orientation as any).lock(lockType);
-    this.#locked.set(true);
-    this.#currentLock = lockType;
-  }
-
-  /**
-   * Unlocks the orientation of the screen to it's default state using the Screen Orientation
-   * API. This method will throw an error if the API is unavailable.
-   *
-   * @throws Error - If screen orientation API is unavailable.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation}
-   * @see {@link https://w3c.github.io/screen-orientation}
-   */
-  async unlock(): Promise<void> {
-    if (!peek(this.#locked)) return;
-    this.#assertScreenOrientationAPI();
-    this.#currentLock = undefined;
-    await screen.orientation.unlock();
-    this.#locked.set(false);
-  }
-
-  #assertScreenOrientationAPI() {
-    if (this.supported) return;
-    throw Error(
-      __DEV__
-        ? '[vidstack] screen orientation API is not available'
-        : '[vidstack] no orientation API',
-    );
-  }
-
-  #getScreenOrientation(): ScreenOrientationType {
-    if (__SERVER__) return 'portrait-primary';
-    if (this.supported) return window.screen!.orientation!.type;
-    return window.innerWidth >= window.innerHeight ? 'landscape-primary' : 'portrait-primary';
-  }
-}

package/src/foundation/orientation/events.ts

@@ -1,20 +0,0 @@
-import type { DOMEvent } from 'maverick.js/std';
-
-import type { ScreenOrientationLockType, ScreenOrientationType } from './types';
-
-export interface ScreenOrientationEvents {
-  'orientation-change': ScreenOrientationChangeEvent;
-}
-
-export interface ScreenOrientationChangeEventDetail {
-  orientation: ScreenOrientationType;
-  lock?: ScreenOrientationLockType;
-}
-
-/**
- * Fired when the current screen orientation changes.
- *
- * @detail orientation
- */
-export interface ScreenOrientationChangeEvent
-  extends DOMEvent<ScreenOrientationChangeEventDetail> {}

package/src/foundation/orientation/types.ts

@@ -1,96 +0,0 @@
-export type ScreenOrientationType =
-  /**
-   * Landscape-primary is an orientation where the screen width is greater than the screen height.
-   * If the device's natural orientation is landscape, then it is in landscape-primary when held
-   * in that position. If the device's natural orientation is portrait, the user agent sets
-   * landscape-primary from the two options as shown in the screen orientation values table.
-   */
-  | 'landscape-primary'
-
-  /**
-   * Landscape-secondary is an orientation where the screen width is greater than the screen
-   * height. If the device's natural orientation is landscape, it is in landscape-secondary when
-   * rotated 180º from its natural orientation. If the device's natural orientation is portrait,
-   * the user agent sets landscape-secondary from the two options as shown in the screen
-   * orientation values table.
-   */
-  | 'landscape-secondary'
-
-  /**
-   * Portrait-primary is an orientation where the screen width is less than or equal to the screen
-   * height. If the device's natural orientation is portrait, then it is in portrait-primary when
-   * held in that position. If the device's natural orientation is landscape, the user agent sets
-   * portrait-primary from the two options as shown in the screen orientation values table.
-   */
-  | 'portrait-primary'
-
-  /**
-   * Portrait-secondary is an orientation where the screen width is less than or equal to the
-   * screen height. If the device's natural orientation is portrait, then it is in
-   * portrait-secondary when rotated 180º from its natural position. If the device's natural
-   * orientation is landscape, the user agent sets portrait-secondary from the two options as
-   * shown in the screen orientation values table.
-   */
-  | 'portrait-secondary';
-
-export type ScreenOrientationLockType =
-  /**
-   * Any is an orientation that means the screen can be locked to any one of portrait-primary,
-   * portrait-secondary, landscape-primary and landscape-secondary.
-   */
-  | 'any'
-
-  /**
-   * Landscape is an orientation where the screen width is greater than the screen height and
-   * depending on platform convention locking the screen to landscape can represent
-   * landscape-primary, landscape-secondary or both.
-   */
-  | 'landscape'
-
-  /**
-   * Landscape-primary is an orientation where the screen width is greater than the screen height.
-   * If the device's natural orientation is landscape, then it is in landscape-primary when held
-   * in that position. If the device's natural orientation is portrait, the user agent sets
-   * landscape-primary from the two options as shown in the screen orientation values table.
-   */
-  | 'landscape-primary'
-
-  /**
-   * Landscape-secondary is an orientation where the screen width is greater than the screen
-   * height. If the device's natural orientation is landscape, it is in landscape-secondary when
-   * rotated 180º from its natural orientation. If the device's natural orientation is portrait,
-   * the user agent sets landscape-secondary from the two options as shown in the screen
-   * orientation values table.
-   */
-  | 'landscape-secondary'
-
-  /**
-   * Natural is an orientation that refers to either portrait-primary or landscape-primary
-   * depending on the device's usual orientation. This orientation is usually provided by the
-   * underlying operating system.
-   */
-  | 'natural'
-
-  /**
-   * Portrait is an orientation where the screen width is less than or equal to the screen height
-   * and depending on platform convention locking the screen to portrait can represent
-   * portrait-primary, portrait-secondary or both.
-   */
-  | 'portrait'
-
-  /**
-   * Portrait-primary is an orientation where the screen width is less than or equal to the screen
-   * height. If the device's natural orientation is portrait, then it is in portrait-primary when
-   * held in that position. If the device's natural orientation is landscape, the user agent sets
-   * portrait-primary from the two options as shown in the screen orientation values table.
-   */
-  | 'portrait-primary'
-
-  /**
-   * Portrait-secondary is an orientation where the screen width is less than or equal to the
-   * screen height. If the device's natural orientation is portrait, then it is in
-   * portrait-secondary when rotated 180º from its natural position. If the device's natural
-   * orientation is landscape, the user agent sets portrait-secondary from the two options as
-   * shown in the screen orientation values table.
-   */
-  | 'portrait-secondary';

package/src/foundation/queue/queue.ts

@@ -1,41 +0,0 @@
-export class Queue<Items> {
-  #queue = new Map<keyof Items, any>();
-
-  /**
-   * Queue the given `item` under the given `key` to be processed at a later time by calling
-   * `serve(key)`.
-   */
-  enqueue<T extends keyof Items>(key: T, item: Items[T]) {
-    this.#queue.set(key, item);
-  }
-
-  /**
-   * Process item in queue for the given `key`.
-   */
-  serve<T extends keyof Items>(key: T): Items[T] | undefined {
-    const value = this.peek(key);
-    this.#queue.delete(key);
-    return value;
-  }
-
-  /**
-   * Peek at item in queue for the given `key`.
-   */
-  peek<T extends keyof Items>(key: T): Items[T] | undefined {
-    return this.#queue.get(key);
-  }
-
-  /**
-   * Removes queued item under the given `key`.
-   */
-  delete(key: keyof Items) {
-    this.#queue.delete(key);
-  }
-
-  /**
-   * Clear all items in the queue.
-   */
-  clear() {
-    this.#queue.clear();
-  }
-}

package/src/foundation/queue/request-queue.test.ts

@@ -1,139 +0,0 @@
-import { RequestQueue } from './request-queue';
-
-it('should return correct queue size', () => {
-  const q = new RequestQueue();
-
-  q.enqueue('a', () => {});
-  q.enqueue('b', () => {});
-
-  expect(q.size).to.equal(2);
-});
-
-it('should serve items in queue', async () => {
-  const q = new RequestQueue();
-
-  const itemA = vi.fn();
-  const itemB = vi.fn();
-
-  q.enqueue('a', itemA);
-  q.enqueue('b', itemB);
-
-  expect(itemA).not.toHaveBeenCalled();
-  expect(itemB).not.toHaveBeenCalled();
-
-  await q.serve('a');
-  expect(itemA).toHaveBeenCalledOnce();
-  expect(itemB).not.toHaveBeenCalled();
-  expect(q.size).to.equal(1);
-
-  await q.serve('b');
-  expect(itemB).toHaveBeenCalledOnce();
-  expect(q.size).to.equal(0);
-});
-
-it('should flush queue in-order', async () => {
-  const q = new RequestQueue();
-
-  let timestampA, timestampB, timestampC;
-
-  const itemA = () => {
-    timestampA = process.hrtime();
-  };
-  const itemB = () => {
-    timestampB = process.hrtime();
-  };
-  const itemC = () => {
-    timestampC = process.hrtime();
-  };
-
-  q.enqueue('a', itemA);
-  q.enqueue('b', itemB);
-  q.enqueue('c', itemC);
-
-  q.start();
-
-  expect(timestampA < timestampB && timestampA < timestampC).to.be.true;
-  expect(timestampB < timestampC).to.be.true;
-});
-
-it('should flush pending requests on start', async () => {
-  const q = new RequestQueue();
-
-  const itemA = vi.fn();
-  const itemB = vi.fn();
-
-  q.enqueue('a', itemA);
-  q.enqueue('b', itemB);
-
-  q.start();
-
-  expect(itemA).toHaveBeenCalledOnce();
-  expect(itemB).toHaveBeenCalledOnce();
-});
-
-it('should serve immediately once started', async () => {
-  const q = new RequestQueue();
-
-  q.start();
-
-  const itemA = vi.fn();
-  const itemB = vi.fn();
-
-  q.enqueue('a', itemA);
-  q.enqueue('b', itemB);
-
-  expect(itemA).toHaveBeenCalledOnce();
-  expect(itemB).toHaveBeenCalledOnce();
-});
-
-it('should not serve immediately once stopped', async () => {
-  const q = new RequestQueue();
-
-  q.start();
-  q.stop();
-
-  const itemA = vi.fn();
-  const itemB = vi.fn();
-
-  q.enqueue('a', itemA);
-  q.enqueue('b', itemB);
-
-  expect(itemA).not.toHaveBeenCalled();
-  expect(itemB).not.toHaveBeenCalled();
-});
-
-it('should release pending flush when started', async () => {
-  const q = new RequestQueue();
-
-  setTimeout(() => {
-    q.start();
-  });
-
-  await q.waitForFlush();
-});
-
-it('should release pending flush when destroyed', async () => {
-  const q = new RequestQueue();
-
-  setTimeout(() => {
-    q.reset();
-  });
-
-  await q.waitForFlush();
-});
-
-it('should clear queue when destroyed', async () => {
-  const q = new RequestQueue();
-
-  const itemA = vi.fn();
-  const itemB = vi.fn();
-
-  q.enqueue('a', itemA);
-  q.enqueue('b', itemB);
-
-  await q.reset();
-
-  expect(itemA).not.toHaveBeenCalled();
-  expect(itemB).not.toHaveBeenCalled();
-  expect(q.size).to.equal(0);
-});

package/src/foundation/queue/request-queue.ts

@@ -1,94 +0,0 @@
-import { deferredPromise } from 'maverick.js/std';
-
-export class RequestQueue {
-  #serving = false;
-  #pending = deferredPromise();
-  #queue = new Map<string | symbol, () => void | Promise<void>>();
-
-  /**
-   * The number of callbacks that are currently in queue.
-   */
-  get size(): number {
-    return this.#queue.size;
-  }
-
-  /**
-   * Whether items in the queue are being served immediately, otherwise they're queued to
-   * be processed later.
-   */
-  get isServing() {
-    return this.#serving;
-  }
-
-  /**
-   * Waits for the queue to be flushed (ie: start serving).
-   */
-  async waitForFlush() {
-    if (this.#serving) return;
-    await this.#pending.promise;
-  }
-
-  /**
-   * Queue the given `callback` to be invoked at a later time by either calling the `serve()` or
-   * `start()` methods. If the queue has started serving (i.e., `start()` was already called),
-   * then the callback will be invoked immediately.
-   *
-   * @param key - Uniquely identifies this callback so duplicates are ignored.
-   * @param callback - The function to call when this item in the queue is being served.
-   */
-  enqueue(key: string | symbol, callback: () => void) {
-    if (this.#serving) {
-      callback();
-      return;
-    }
-
-    // Delete the key so we can set it last so iteration order is correct.
-    this.#queue.delete(key);
-    this.#queue.set(key, callback);
-  }
-
-  /**
-   * Invokes the callback with the given `key` in the queue (if it exists).
-   */
-  serve(key: string | symbol) {
-    this.#queue.get(key)?.();
-    this.#queue.delete(key);
-  }
-
-  /**
-   * Flush all queued items and start serving future requests immediately until `stop()` is called.
-   */
-  start() {
-    this.#flush();
-    this.#serving = true;
-    if (this.#queue.size > 0) this.#flush();
-  }
-
-  /**
-   * Stop serving requests, they'll be queued until you begin processing again by calling `start()`.
-   */
-  stop() {
-    this.#serving = false;
-  }
-
-  /**
-   * Stop serving requests, empty the request queue, and release any promises waiting for the
-   * queue to flush.
-   */
-  reset() {
-    this.stop();
-    this.#queue.clear();
-    this.#release();
-  }
-
-  #flush() {
-    for (const key of this.#queue.keys()) this.serve(key);
-    this.#release();
-  }
-
-  #release() {
-    // Release anyone waiting.
-    this.#pending.resolve();
-    this.#pending = deferredPromise();
-  }
-}