@hanifhan1f/vidstack 1.12.13

package/src/foundation/logger/controller.ts

@@ -0,0 +1,71 @@
+import { onDispose, ViewController } from 'maverick.js';
+import { DOMEvent } from 'maverick.js/std';
+
+import type { LogEventDetail } from './events';
+import { GroupedLog } from './grouped-log';
+import type { LogLevel } from './log-level';
+
+export class LoggerController extends ViewController {
+  #logger = new Logger();
+
+  protected override onConnect(el: HTMLElement) {
+    this.#logger.setTarget(el);
+    onDispose(this.#onDisconnect.bind(this));
+  }
+
+  #onDisconnect() {
+    this.#logger.setTarget(null);
+  }
+}
+
+export class Logger {
+  #target: EventTarget | null = null;
+
+  error(...data: any[]): boolean {
+    return this.dispatch('error', ...data);
+  }
+
+  warn(...data: any[]): boolean {
+    return this.dispatch('warn', ...data);
+  }
+
+  info(...data: any[]): boolean {
+    return this.dispatch('info', ...data);
+  }
+
+  debug(...data: any[]): boolean {
+    return this.dispatch('debug', ...data);
+  }
+
+  errorGroup(title: string): GroupedLog {
+    return new GroupedLog(this, 'error', title);
+  }
+
+  warnGroup(title: string): GroupedLog {
+    return new GroupedLog(this, 'warn', title);
+  }
+
+  infoGroup(title: string): GroupedLog {
+    return new GroupedLog(this, 'info', title);
+  }
+
+  debugGroup(title: string): GroupedLog {
+    return new GroupedLog(this, 'debug', title);
+  }
+
+  setTarget(newTarget: EventTarget | null): void {
+    this.#target = newTarget;
+  }
+
+  dispatch(level: LogLevel, ...data: any[]): boolean {
+    return (
+      this.#target?.dispatchEvent(
+        new DOMEvent<LogEventDetail>('vds-log', {
+          bubbles: true,
+          composed: true,
+          detail: { level, data },
+        }),
+      ) || false
+    );
+  }
+}

package/src/foundation/logger/events.ts

@@ -0,0 +1,29 @@
+import type { DOMEvent } from 'maverick.js/std';
+
+import type { LogLevel } from './log-level';
+
+declare global {
+  interface HTMLElementEventMap extends LoggerEvents {}
+}
+
+export interface LoggerEvents {
+  'vds-log': LogEvent;
+}
+
+export interface LogEventDetail {
+  /**
+   * The log level.
+   */
+  level: LogLevel;
+  /**
+   * Data to be logged.
+   */
+  data?: any[];
+}
+
+/**
+ * @bubbles
+ * @composed
+ * @detail log
+ */
+export interface LogEvent extends DOMEvent<LogEventDetail> {}

package/src/foundation/logger/grouped-log.ts

@@ -0,0 +1,44 @@
+import type { Logger } from './controller';
+import type { LogLevel } from './log-level';
+
+export const GROUPED_LOG = Symbol(__DEV__ ? 'GROUPED_LOG' : 0);
+
+export class GroupedLog {
+  readonly [GROUPED_LOG] = true;
+  readonly logs: ({ label?: string; data: any[] } | GroupedLog)[] = [];
+
+  constructor(
+    readonly logger: Logger,
+    readonly level: LogLevel,
+    readonly title: string,
+    readonly root?: GroupedLog,
+    readonly parent?: GroupedLog,
+  ) {}
+
+  log(...data: any[]): GroupedLog {
+    this.logs.push({ data });
+    return this;
+  }
+
+  labelledLog(label: string, ...data: any[]): GroupedLog {
+    this.logs.push({ label, data });
+    return this;
+  }
+
+  groupStart(title: string): GroupedLog {
+    return new GroupedLog(this.logger, this.level, title, this.root ?? this, this);
+  }
+
+  groupEnd(): GroupedLog {
+    this.parent?.logs.push(this);
+    return this.parent ?? this;
+  }
+
+  dispatch(): boolean {
+    return this.logger.dispatch(this.level, this.root ?? this);
+  }
+}
+
+export function isGroupedLog(data: any): data is GroupedLog {
+  return !!data?.[GROUPED_LOG];
+}

package/src/foundation/logger/log-level.ts

@@ -0,0 +1,17 @@
+export type LogLevel = 'silent' | 'error' | 'warn' | 'info' | 'debug';
+
+export const LogLevelValue = Object.freeze({
+  silent: 0,
+  error: 1,
+  warn: 2,
+  info: 3,
+  debug: 4,
+});
+
+export const LogLevelColor = Object.freeze({
+  silent: 'white',
+  error: 'hsl(6, 58%, 50%)',
+  warn: 'hsl(51, 58%, 50%)',
+  info: 'hsl(219, 58%, 50%)',
+  debug: 'hsl(280, 58%, 50%)',
+});

package/src/foundation/logger/log-printer.ts

@@ -0,0 +1,119 @@
+import { onDispose, ViewController } from 'maverick.js';
+import type { MaverickElement } from 'maverick.js/element';
+import { isString, isUndefined } from 'maverick.js/std';
+
+import { getLogColor, saveLogColor } from './colors';
+import { isGroupedLog, type GroupedLog } from './grouped-log';
+import { LogLevelColor, LogLevelValue, type LogLevel } from './log-level';
+import { ms } from './ms';
+
+export class LogPrinter extends ViewController {
+  #level: LogLevel = __DEV__ ? 'warn' : 'silent';
+  #lastLogged: number | undefined;
+
+  /**
+   * The current log level.
+   */
+  get logLevel(): LogLevel {
+    return __DEV__ ? this.#level : 'silent';
+  }
+
+  set logLevel(level) {
+    if (__DEV__) this.#level = level;
+  }
+
+  protected override onConnect() {
+    this.listen('vds-log', (event) => {
+      event.stopPropagation();
+
+      const element =
+          (event as { path?: Element[] }).path?.[0] ??
+          (event.target instanceof ViewController ? event.target.el : (event.target as Element)),
+        eventTargetName =
+          (element as MaverickElement as any)?.$$COMPONENT_NAME
+            ?.replace(/^_/, '')
+            .replace(/Instance$/, '') ??
+          element?.tagName.toLowerCase() ??
+          'unknown';
+
+      const { level = 'warn', data } = event.detail ?? {};
+
+      if (LogLevelValue[this.#level] < LogLevelValue[level]) {
+        return;
+      }
+
+      saveLogColor(eventTargetName);
+
+      const hint =
+        data?.length === 1 && isGroupedLog(data[0])
+          ? data[0].title
+          : isString(data?.[0])
+            ? data![0]
+            : '';
+
+      console.groupCollapsed(
+        `%c${level.toUpperCase()}%c ${eventTargetName}%c ${hint.slice(0, 50)}${
+          hint.length > 50 ? '...' : ''
+        }`,
+        `background: ${LogLevelColor[level]}; color: white; padding: 1.5px 2.2px; border-radius: 2px; font-size: 11px;`,
+        `color: ${getLogColor(eventTargetName)}; padding: 4px 0px; font-size: 11px;`,
+        'color: gray; font-size: 11px; padding-left: 4px;',
+      );
+
+      if (data?.length === 1 && isGroupedLog(data[0])) {
+        if (element) data[0].logs.unshift({ label: 'Element', data: [element] });
+        printGroup(level, data![0]);
+      } else if (data) {
+        print(level, ...data);
+      }
+
+      this.#printTimeDiff();
+      printStackTrace();
+
+      console.groupEnd();
+    });
+
+    onDispose(() => {
+      this.#lastLogged = undefined;
+    });
+  }
+
+  #printTimeDiff() {
+    labelledPrint('Time since last log', this.#calcLastLogTimeDiff());
+  }
+
+  #calcLastLogTimeDiff() {
+    const time = performance.now();
+    const diff = time - (this.#lastLogged ?? (this.#lastLogged = performance.now()));
+    this.#lastLogged = time;
+    return ms(diff);
+  }
+}
+
+function print(level: LogLevel, ...data: any[]) {
+  console[level as 'info'](...data);
+}
+
+function labelledPrint(label: string, ...data: any[]) {
+  console.log(`%c${label}:`, 'color: gray', ...data);
+}
+
+function printStackTrace() {
+  console.groupCollapsed('%cStack Trace', 'color: gray');
+  console.trace();
+  console.groupEnd();
+}
+
+function printGroup(level: LogLevel, groupedLog: GroupedLog) {
+  for (const log of groupedLog.logs) {
+    if (isGroupedLog(log)) {
+      console.groupCollapsed(groupedLog.title);
+      printGroup(level, log);
+      console.groupEnd();
+    } else if ('label' in log && !isUndefined(log.label)) {
+      labelledPrint(log.label, ...log.data);
+    } else {
+      print(level, ...log.data);
+    }
+  }
+}

package/src/foundation/logger/ms.ts

@@ -0,0 +1,31 @@
+import { round } from '../../utils/number';
+
+const s = 1000;
+const m = s * 60;
+const h = m * 60;
+const d = h * 24;
+
+/**
+ * @see https://github.com/vercel/ms
+ */
+export function ms(val: number): string {
+  const msAbs = Math.abs(val);
+
+  if (msAbs >= d) {
+    return Math.round(val / d) + 'd';
+  }
+
+  if (msAbs >= h) {
+    return Math.round(val / h) + 'h';
+  }
+
+  if (msAbs >= m) {
+    return Math.round(val / m) + 'm';
+  }
+
+  if (msAbs >= s) {
+    return Math.round(val / s) + 's';
+  }
+
+  return round(val, 2) + 'ms';
+}

package/src/foundation/observers/focus-visible.ts

@@ -0,0 +1,74 @@
+import { effect, signal, ViewController } from 'maverick.js';
+import { EventsController, listenEvent, setAttribute } from 'maverick.js/std';
+
+export let $keyboard = signal(false);
+
+if (!__SERVER__) {
+  listenEvent(document, 'pointerdown', () => {
+    $keyboard.set(false);
+  });
+
+  listenEvent(document, 'keydown', (e) => {
+    if (e.metaKey || e.altKey || e.ctrlKey) return;
+    $keyboard.set(true);
+  });
+}
+
+export class FocusVisibleController extends ViewController {
+  #focused = signal(false);
+
+  protected override onConnect(el: HTMLElement) {
+    effect(() => {
+      const events = new EventsController(el);
+
+      if (!$keyboard()) {
+        this.#focused.set(false);
+        updateFocusAttr(el, false);
+
+        events
+          .add('pointerenter', this.#onPointerEnter.bind(this))
+          .add('pointerleave', this.#onPointerLeave.bind(this));
+
+        return;
+      }
+
+      const active = document.activeElement === el;
+      this.#focused.set(active);
+      updateFocusAttr(el, active);
+
+      events.add('focus', this.#onFocus.bind(this)).add('blur', this.#onBlur.bind(this));
+    });
+  }
+
+  focused(): boolean {
+    return this.#focused();
+  }
+
+  #onFocus() {
+    this.#focused.set(true);
+    updateFocusAttr(this.el!, true);
+  }
+
+  #onBlur() {
+    this.#focused.set(false);
+    updateFocusAttr(this.el!, false);
+  }
+
+  #onPointerEnter() {
+    updateHoverAttr(this.el!, true);
+  }
+
+  #onPointerLeave() {
+    updateHoverAttr(this.el!, false);
+  }
+}
+
+function updateFocusAttr(el: Element, isFocused: boolean) {
+  setAttribute(el, 'data-focus', isFocused);
+  setAttribute(el, 'data-hocus', isFocused);
+}
+
+function updateHoverAttr(el: Element, isHovering: boolean) {
+  setAttribute(el, 'data-hocus', isHovering);
+  setAttribute(el, 'data-hover', isHovering);
+}

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

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

@@ -0,0 +1,105 @@
+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/observers/raf-loop.ts

@@ -0,0 +1,29 @@
+import { isNumber, isUndefined } from 'maverick.js/std';
+
+export class RAFLoop {
+  #id: number | undefined;
+  #callback: () => void;
+
+  constructor(callback: () => void) {
+    this.#callback = callback;
+  }
+
+  start() {
+    // Time updates are already in progress.
+    if (!isUndefined(this.#id)) return;
+    this.#loop();
+  }
+
+  stop() {
+    if (isNumber(this.#id)) window.cancelAnimationFrame(this.#id);
+    this.#id = undefined;
+  }
+
+  #loop() {
+    this.#id = window.requestAnimationFrame(() => {
+      if (isUndefined(this.#id)) return;
+      this.#callback();
+      this.#loop();
+    });
+  }
+}