@hanifhan1f/vidstack 1.12.13

package/src/foundation/orientation/controller.ts

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

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

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

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

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

@@ -0,0 +1,94 @@
+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();
+  }
+}

package/src/global/layouts/default.ts

@@ -0,0 +1,28 @@
+import type { DefaultLayoutProps } from '../../components/layouts/default/props';
+import type { VidstackPlayerLayoutLoader } from './loader';
+
+export class VidstackPlayerLayout implements VidstackPlayerLayoutLoader {
+  constructor(readonly props?: Partial<DefaultLayoutProps>) {}
+
+  readonly name = 'vidstack';
+
+  async load() {
+    await import('../../elements/bundles/player-layouts/default');
+    await import('../../elements/bundles/player-ui');
+  }
+
+  create() {
+    const layouts = [
+      document.createElement('media-audio-layout'),
+      document.createElement('media-video-layout'),
+    ];
+
+    if (this.props) {
+      for (const [prop, value] of Object.entries(this.props)) {
+        for (const el of layouts) el[prop] = value;
+      }
+    }
+
+    return layouts;
+  }
+}

package/src/global/layouts/loader.ts

@@ -0,0 +1,5 @@
+export interface VidstackPlayerLayoutLoader {
+  readonly name: string;
+  load(): void | Promise<void>;
+  create(): HTMLElement[] | Promise<HTMLElement[]>;
+}

package/src/global/layouts/plyr.ts

@@ -0,0 +1,24 @@
+import type { PlyrLayoutProps } from '../../components/layouts/plyr/props';
+import type { VidstackPlayerLayoutLoader } from './loader';
+
+export class PlyrLayout implements VidstackPlayerLayoutLoader {
+  constructor(readonly props?: Partial<PlyrLayoutProps>) {}
+
+  readonly name = 'plyr';
+
+  async load() {
+    await import('../../elements/bundles/player-layouts/plyr');
+  }
+
+  create() {
+    const layout = document.createElement('media-plyr-layout');
+
+    if (this.props) {
+      for (const [prop, value] of Object.entries(this.props)) {
+        layout[prop] = value;
+      }
+    }
+
+    return [layout];
+  }
+}