@hanifhan1f/vidstack 1.12.13 → 1.12.14

package/src/foundation/list/list.ts

@@ -1,127 +0,0 @@
-import { DOMEvent, EventsTarget } from 'maverick.js/std';
-
-import { ListSymbol } from './symbols';
-
-export interface ListItem {
-  id: string;
-}
-
-export class List<Item extends ListItem, Events extends ListEvents>
-  extends EventsTarget<Events>
-  implements Iterable<Item>
-{
-  [index: number]: Item | undefined;
-
-  protected items: Item[] = [];
-
-  /** @internal */
-  protected [ListSymbol.readonly] = false;
-  /** @internal */
-  protected [ListSymbol.onReset]?(trigger?: Event): void;
-  /** @internal */
-  protected [ListSymbol.onRemove]?(item: Item, trigger?: Event): void;
-
-  get length() {
-    return this.items.length;
-  }
-
-  get readonly() {
-    return this[ListSymbol.readonly];
-  }
-
-  /**
-   * Returns the index of the first occurrence of the given item, or -1 if it is not present.
-   */
-  indexOf(item: Item) {
-    return this.items.indexOf(item);
-  }
-
-  /**
-   * Returns an item matching the given `id`, or `null` if not present.
-   */
-  getById(id: string): Item | null {
-    if (id === '') return null;
-    return this.items.find((item) => item.id === id) ?? null;
-  }
-
-  /**
-   * Transform list to an array.
-   */
-  toArray(): Item[] {
-    return [...this.items];
-  }
-
-  [Symbol.iterator]() {
-    return this.items.values();
-  }
-
-  /** @internal */
-  [ListSymbol.add](item: Item, trigger?: Event): void {
-    const index = this.items.length;
-
-    if (!('' + index in this)) {
-      Object.defineProperty(this, index, {
-        get() {
-          return this.items[index];
-        },
-      });
-    }
-
-    if (this.items.includes(item as Item)) return;
-
-    this.items.push(item as Item);
-    this.dispatchEvent(new DOMEvent<any>('add', { detail: item, trigger }));
-  }
-
-  /** @internal */
-  [ListSymbol.remove](item: Item, trigger?: Event): void {
-    const index = this.items.indexOf(item);
-    if (index >= 0) {
-      this[ListSymbol.onRemove]?.(item, trigger);
-      this.items.splice(index, 1);
-      this.dispatchEvent(new DOMEvent<any>('remove', { detail: item, trigger }));
-    }
-  }
-
-  /** @internal */
-  [ListSymbol.reset](trigger?: Event): void {
-    for (const item of [...this.items]) this[ListSymbol.remove](item, trigger);
-    this.items = [];
-    this[ListSymbol.setReadonly](false, trigger);
-    this[ListSymbol.onReset]?.();
-  }
-
-  /** @internal */
-  [ListSymbol.setReadonly](readonly: boolean, trigger?: Event) {
-    if (this[ListSymbol.readonly] === readonly) return;
-    this[ListSymbol.readonly] = readonly;
-    this.dispatchEvent(new DOMEvent<any>('readonly-change', { detail: readonly, trigger }));
-  }
-}
-
-export interface ListEvents<Item extends ListItem = ListItem> {
-  add: ListAddEvent<Item>;
-  remove: ListRemoveEvent<Item>;
-  'readonly-change': ListReadonlyChangeEvent;
-}
-
-/**
- * Fired when an item has been added to the list.
- *
- * @detail item
- */
-export interface ListAddEvent<Item extends ListItem> extends DOMEvent<Item> {}
-
-/**
- * Fired when an item has been removed from the list.
- *
- * @detail item
- */
-export interface ListRemoveEvent<Item extends ListItem> extends DOMEvent<Item> {}
-
-/**
- * Fired when the readonly state of the list has changed.
- *
- * @detail isReadonly
- */
-export interface ListReadonlyChangeEvent extends DOMEvent<boolean> {}

package/src/foundation/list/select-list.ts

@@ -1,86 +0,0 @@
-import { DOMEvent } from 'maverick.js/std';
-
-import { List, type ListEvents, type ListItem } from './list';
-import { ListSymbol } from './symbols';
-
-const SELECTED = Symbol(__DEV__ ? 'SELECTED' : 0);
-
-export interface SelectListItem extends ListItem {
-  selected: boolean;
-}
-
-export class SelectList<
-  Item extends SelectListItem,
-  Events extends SelectListEvents<Item>,
-> extends List<Item, Events> {
-  get selected() {
-    return this.items.find((item) => item.selected) ?? null;
-  }
-
-  get selectedIndex() {
-    return this.items.findIndex((item) => item.selected);
-  }
-
-  /** @internal */
-  protected override [ListSymbol.onRemove](item: Item, trigger?: Event): void {
-    this[ListSymbol.select](item, false, trigger);
-  }
-
-  /** @internal */
-  protected [ListSymbol.onUserSelect]?(): void;
-
-  /** @internal */
-  override [ListSymbol.add](item: Omit<Item, 'selected'>, trigger?: Event) {
-    item[SELECTED] = false;
-    Object.defineProperty(item, 'selected', {
-      get() {
-        return this[SELECTED]!;
-      },
-      set: (selected: boolean) => {
-        if (this.readonly) return;
-        this[ListSymbol.onUserSelect]?.();
-        this[ListSymbol.select](item as Item, selected);
-      },
-    });
-
-    super[ListSymbol.add](item as Item, trigger);
-  }
-
-  /** @internal */
-  [ListSymbol.select](item: Item | undefined, selected: boolean, trigger?: Event) {
-    if (selected === item?.[SELECTED]) return;
-
-    const prev = this.selected;
-    if (item) item[SELECTED] = selected;
-
-    const changed = !selected ? prev === item : prev !== item;
-    if (changed) {
-      if (prev) prev[SELECTED] = false;
-      this.dispatchEvent(
-        new DOMEvent<SelectListChangeEventDetail<Item>>('change', {
-          detail: {
-            prev,
-            current: this.selected,
-          },
-          trigger,
-        }),
-      );
-    }
-  }
-}
-
-export interface SelectListEvents<Item extends SelectListItem = SelectListItem>
-  extends ListEvents<Item> {
-  change: SelectListChangeEvent<Item>;
-}
-
-/**
- * @detail change
- */
-export interface SelectListChangeEvent<Item extends SelectListItem>
-  extends DOMEvent<SelectListChangeEventDetail<Item>> {}
-
-export interface SelectListChangeEventDetail<Item extends SelectListItem> {
-  prev: Item | null;
-  current: Item | null;
-}

package/src/foundation/list/symbols.ts

@@ -1,22 +0,0 @@
-const ADD = Symbol(__DEV__ ? 'LIST_ADD' : 0),
-  REMOVE = Symbol(__DEV__ ? 'LIST_REMOVE' : 0),
-  RESET = Symbol(__DEV__ ? 'LIST_RESET' : 0),
-  SELECT = Symbol(__DEV__ ? 'LIST_SELECT' : 0),
-  READONLY = Symbol(__DEV__ ? 'LIST_READONLY' : 0),
-  SET_READONLY = Symbol(__DEV__ ? 'LIST_SET_READONLY' : 0),
-  ON_RESET = Symbol(__DEV__ ? 'LIST_ON_RESET' : 0),
-  ON_REMOVE = Symbol(__DEV__ ? 'LIST_ON_REMOVE' : 0),
-  ON_USER_SELECT = Symbol(__DEV__ ? 'LIST_ON_USER_SELECT' : 0);
-
-/** @internal */
-export const ListSymbol = {
-  add: ADD,
-  remove: REMOVE,
-  reset: RESET,
-  select: SELECT,
-  readonly: READONLY,
-  setReadonly: SET_READONLY,
-  onReset: ON_RESET,
-  onRemove: ON_REMOVE,
-  onUserSelect: ON_USER_SELECT,
-} as const;

package/src/foundation/logger/colors.ts

@@ -1,33 +0,0 @@
-const LOCAL_STORAGE_KEY = '@vidstack/log-colors';
-
-const savedColors = init();
-
-export function getLogColor(key: string): string | undefined {
-  return savedColors.get(key);
-}
-
-export function saveLogColor(key: string, { color = generateColor(), overwrite = false } = {}) {
-  if (!__DEV__) return;
-  if (!savedColors.has(key) || overwrite) {
-    savedColors.set(key, color);
-    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(Object.entries(savedColors)));
-  }
-}
-
-function generateColor() {
-  return `hsl(${Math.random() * 360}, 55%, 70%)`;
-}
-
-function init(): Map<string, string> {
-  if (!__DEV__) return new Map();
-
-  let colors;
-
-  try {
-    colors = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)!);
-  } catch {
-    // no-op
-  }
-
-  return new Map(Object.entries(colors ?? {}));
-}

package/src/foundation/logger/controller.ts

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

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

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

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

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

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

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