@hanifhan1f/vidstack 1.12.13 → 1.12.14

package/src/utils/dom.ts

@@ -1,458 +0,0 @@
-import {
-  autoUpdate,
-  computePosition,
-  flip,
-  shift,
-  type ComputePositionConfig,
-  type Placement,
-} from '@floating-ui/dom';
-import {
-  computed,
-  effect,
-  getScope,
-  onDispose,
-  scoped,
-  signal,
-  type ReadSignal,
-} from 'maverick.js';
-import {
-  animationFrameThrottle,
-  EventsController,
-  isDOMNode,
-  isFunction,
-  isKeyboardClick,
-  isTouchEvent,
-  listenEvent,
-  setAttribute,
-  setStyle,
-  toggleClass,
-} from 'maverick.js/std';
-
-import { round } from './number';
-
-export interface EventTargetLike {
-  addEventListener(type: string, handler: (...args: any[]) => void): void;
-  removeEventListener(type: string, handler: (...args: any[]) => void): void;
-}
-
-export function isEventInside(el: HTMLElement, event: Event) {
-  const target = event.composedPath()[0];
-  return isDOMNode(target) && el.contains(target);
-}
-
-const rafJobs = new Set<() => void>();
-
-if (!__SERVER__) {
-  function processJobs() {
-    for (const job of rafJobs) {
-      try {
-        job();
-      } catch (e) {
-        if (__DEV__) console.error(`[vidstack] failed job:\n\n${e}`);
-      }
-    }
-
-    window.requestAnimationFrame(processJobs);
-  }
-
-  processJobs();
-}
-
-export function scheduleRafJob(job: () => void) {
-  rafJobs.add(job);
-  return () => rafJobs.delete(job);
-}
-
-export function setAttributeIfEmpty(target: Element, name: string, value: string) {
-  if (!target.hasAttribute(name)) target.setAttribute(name, value);
-}
-
-export function setARIALabel(target: Element, $label: string | null | ReadSignal<string | null>) {
-  if (target.hasAttribute('aria-label') || target.hasAttribute('data-no-label')) return;
-
-  if (!isFunction($label)) {
-    setAttribute(target, 'aria-label', $label);
-    return;
-  }
-
-  function updateAriaDescription() {
-    setAttribute(target, 'aria-label', ($label as ReadSignal<string | null>)());
-  }
-
-  if (__SERVER__) updateAriaDescription();
-  else effect(updateAriaDescription);
-}
-
-export function hasParentElement(node: Element | null, test: (node: Element) => boolean) {
-  if (!node) {
-    return false;
-  } else if (test(node)) {
-    return true;
-  }
-
-  return hasParentElement(node.parentElement, test);
-}
-
-export function isElementVisible(el: HTMLElement) {
-  const style = getComputedStyle(el);
-  return style.display !== 'none' && parseInt(style.opacity) > 0;
-}
-
-export function checkVisibility(el: HTMLElement | null) {
-  return (
-    !!el &&
-    ('checkVisibility' in el
-      ? el.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true })
-      : isElementVisible(el))
-  );
-}
-
-export function observeVisibility(el: HTMLElement, callback: (isVisible: boolean) => void) {
-  return scheduleRafJob(() => callback(checkVisibility(el)));
-}
-
-export function isElementParent(
-  owner: Element,
-  node: Element | null,
-  test?: (node: Element) => boolean,
-) {
-  while (node) {
-    if (node === owner) {
-      return true;
-    } else if (test?.(node)) {
-      break;
-    } else {
-      node = node.parentElement;
-    }
-  }
-
-  return false;
-}
-
-export function onPress(
-  target: EventTarget,
-  handler: (event: PointerEvent | KeyboardEvent) => void,
-) {
-  return new EventsController(target)
-    .add('pointerup', (event) => {
-      if (event.button === 0 && !event.defaultPrevented) handler(event);
-    })
-    .add('keydown', (event) => {
-      if (isKeyboardClick(event)) handler(event);
-    });
-}
-
-export function isTouchPinchEvent(event: Event) {
-  return isTouchEvent(event) && (event.touches.length > 1 || event.changedTouches.length > 1);
-}
-
-export function requestScopedAnimationFrame(callback: () => void) {
-  if (__SERVER__) return callback();
-
-  let scope = getScope(),
-    id = window.requestAnimationFrame(() => {
-      scoped(callback, scope);
-      id = -1;
-    });
-
-  return () => void window.cancelAnimationFrame(id);
-}
-
-export function repaint(el: HTMLElement) {
-  el.style.display = 'none';
-  el.offsetHeight;
-  el.style.removeProperty('display');
-}
-
-export function cloneTemplate<T extends HTMLElement>(
-  template: HTMLTemplateElement,
-  length: number,
-  onCreate?: (el: T, index: number) => void,
-) {
-  let current: HTMLElement,
-    prev: HTMLElement = template,
-    parent = template.parentElement!,
-    content = template.content.firstElementChild,
-    elements: T[] = [];
-
-  // Simple patch for Vue since it incorrectly appends template.
-  if (!content && template.firstElementChild) {
-    template.innerHTML = template.firstElementChild.outerHTML;
-    template.firstElementChild.remove();
-    content = template.content.firstElementChild;
-  }
-
-  if (__DEV__ && content?.nodeType !== 1) {
-    throw Error('[vidstack] template must contain root element');
-  }
-
-  for (let i = 0; i < length; i++) {
-    current = document.importNode(content!, true) as HTMLElement;
-    onCreate?.(current as T, i);
-    parent.insertBefore(current, prev.nextSibling);
-    elements.push(current as T);
-    prev = current;
-  }
-
-  onDispose(() => {
-    for (let i = 0; i < elements.length; i++) elements[i].remove();
-  });
-
-  return elements;
-}
-
-export function createTemplate(content: string) {
-  const template = document.createElement('template');
-  template.innerHTML = content;
-  return template.content;
-}
-
-export function cloneTemplateContent<T>(content: DocumentFragment): T {
-  const fragment = content.cloneNode(true);
-  return (fragment as Element).firstElementChild as T;
-}
-
-export function autoPlacement(
-  el: HTMLElement | null,
-  trigger: HTMLElement | null,
-  placement: string,
-  {
-    offsetVarName,
-    xOffset,
-    yOffset,
-    ...options
-  }: Partial<ComputePositionConfig> & {
-    offsetVarName: string;
-    xOffset: number;
-    yOffset: number;
-  },
-) {
-  if (!el) return;
-
-  const floatingPlacement = placement.replace(' ', '-').replace('-center', '') as Placement;
-
-  setStyle(el, 'visibility', !trigger ? 'hidden' : null);
-  if (!trigger) return;
-
-  let isTop = placement.includes('top');
-
-  const negateX = (x: string) => (placement.includes('left') ? `calc(-1 * ${x})` : x),
-    negateY = (y: string) => (isTop ? `calc(-1 * ${y})` : y);
-
-  return autoUpdate(trigger, el, () => {
-    computePosition(trigger, el, {
-      placement: floatingPlacement,
-      middleware: [
-        ...(options.middleware ?? []),
-        flip({ fallbackAxisSideDirection: 'start', crossAxis: false }),
-        shift(),
-      ],
-      ...options,
-    }).then(({ x, y, middlewareData }) => {
-      const hasFlipped = !!middlewareData.flip?.index;
-      isTop = placement.includes(hasFlipped ? 'bottom' : 'top');
-
-      el.setAttribute(
-        'data-placement',
-        hasFlipped
-          ? placement.startsWith('top')
-            ? placement.replace('top', 'bottom')
-            : placement.replace('bottom', 'top')
-          : placement,
-      );
-
-      Object.assign(el.style, {
-        top: `calc(${y + 'px'} + ${negateY(
-          yOffset ? yOffset + 'px' : `var(--${offsetVarName}-y-offset, 0px)`,
-        )})`,
-        left: `calc(${x + 'px'} + ${negateX(
-          xOffset ? xOffset + 'px' : `var(--${offsetVarName}-x-offset, 0px)`,
-        )})`,
-      });
-    });
-  });
-}
-
-export function hasAnimation(el: HTMLElement): boolean {
-  const styles = getComputedStyle(el);
-  return styles.animationName !== 'none';
-}
-
-export function createSlot(name: string) {
-  const slot = document.createElement('slot');
-  slot.name = name;
-  return slot;
-}
-
-export function useTransitionActive($el: ReadSignal<Element | null | undefined>) {
-  const $active = signal(false);
-
-  effect(() => {
-    const el = $el();
-    if (!el) return;
-    new EventsController(el)
-      .add('transitionstart', () => $active.set(true))
-      .add('transitionend', () => $active.set(false));
-  });
-
-  return $active;
-}
-
-export function useResizeObserver(
-  $el: ReadSignal<Element | null | undefined>,
-  onResize: () => void,
-) {
-  function onElementChange() {
-    const el = $el();
-    if (!el) return;
-
-    onResize();
-
-    const observer = new ResizeObserver(animationFrameThrottle(onResize));
-    observer.observe(el);
-    return () => observer.disconnect();
-  }
-
-  effect(onElementChange);
-}
-
-export function useSafeTriangle(
-  $root: ReadSignal<Element | null | undefined>,
-  $trigger: ReadSignal<Element | null | undefined>,
-  $popper: ReadSignal<Element | null | undefined>,
-) {
-  effect(() => {
-    const root = $root(),
-      trigger = $trigger(),
-      popper = $popper();
-
-    if (!root || !trigger || !popper) return;
-
-    const $isActive = useMouseEnter($root);
-
-    effect(() => {
-      if (!$isActive()) return;
-      useRectCSSVars($root, $popper, 'safe');
-      listenEvent(trigger, 'mousemove', (event) => {
-        setStyle(root as HTMLElement, '--safe-cursor-x', `${event.clientX}px`);
-        setStyle(root as HTMLElement, '--safe-cursor-y', `${event.clientY}px`);
-      });
-    });
-  });
-}
-
-export function useRectCSSVars(
-  $root: ReadSignal<Element | null | undefined>,
-  $el: ReadSignal<Element | null | undefined>,
-  prefix: string,
-) {
-  useResizeObserver($el, () => {
-    const root = $root(),
-      el = $el();
-
-    if (root && el) setRectCSSVars(root, el, prefix);
-  });
-}
-
-export function setRectCSSVars(root: Element, el: Element, prefix: string) {
-  const rect = el.getBoundingClientRect();
-
-  for (const side of ['top', 'left', 'bottom', 'right']) {
-    setStyle(root as HTMLElement, `--${prefix}-${side}`, `${round(rect[side], 3)}px`);
-  }
-}
-
-export function useActive($el: ReadSignal<Element | null | undefined>) {
-  const $isMouseEnter = useMouseEnter($el),
-    $isFocusedIn = useFocusIn($el);
-
-  let prevMouseEnter = false;
-
-  return computed(() => {
-    const isMouseEnter = $isMouseEnter();
-    if (prevMouseEnter && !isMouseEnter) return false;
-    prevMouseEnter = isMouseEnter;
-    return isMouseEnter || $isFocusedIn();
-  });
-}
-
-export function useMouseEnter($el: ReadSignal<Element | null | undefined>) {
-  const $isMouseEnter = signal(false);
-
-  effect(() => {
-    const el = $el();
-
-    if (!el) {
-      $isMouseEnter.set(false);
-      return;
-    }
-
-    new EventsController(el)
-      .add('mouseenter', () => $isMouseEnter.set(true))
-      .add('mouseleave', () => $isMouseEnter.set(false));
-  });
-
-  return $isMouseEnter;
-}
-
-export function useFocusIn($el: ReadSignal<Element | null | undefined>) {
-  const $isFocusIn = signal(false);
-
-  effect(() => {
-    const el = $el();
-
-    if (!el) {
-      $isFocusIn.set(false);
-      return;
-    }
-
-    new EventsController(el)
-      .add('focusin', () => $isFocusIn.set(true))
-      .add('focusout', () => $isFocusIn.set(false));
-  });
-
-  return $isFocusIn;
-}
-
-export function isHTMLElement(el: any): el is HTMLElement {
-  return el instanceof HTMLElement;
-}
-
-export function useColorSchemePreference() {
-  const colorScheme = signal<'light' | 'dark'>('dark');
-
-  if (__SERVER__) return colorScheme;
-
-  const media = window.matchMedia('(prefers-color-scheme: light)');
-
-  function onChange() {
-    colorScheme.set(media.matches ? 'light' : 'dark');
-  }
-
-  onChange();
-  listenEvent(media, 'change', onChange);
-
-  return colorScheme;
-}
-
-export function watchColorScheme(
-  el: HTMLElement,
-  colorScheme: ReadSignal<'light' | 'dark' | 'system' | 'default'>,
-) {
-  effect(() => {
-    const scheme = colorScheme();
-
-    if (scheme === 'system') {
-      const preference = useColorSchemePreference();
-      effect(() => updateColorScheme(preference()));
-      return;
-    }
-
-    updateColorScheme(scheme);
-  });
-
-  function updateColorScheme(scheme: string) {
-    toggleClass(el, 'light', scheme === 'light');
-    toggleClass(el, 'dark', scheme === 'dark');
-  }
-}

package/src/utils/error.ts

@@ -1,11 +0,0 @@
-export function coerceToError(error: unknown) {
-  return error instanceof Error
-    ? error
-    : Error(typeof error === 'string' ? error : JSON.stringify(error));
-}
-
-export function assert(condition: any, message?: string | false): asserts condition {
-  if (!condition) {
-    throw Error(message || 'Assertion failed.');
-  }
-}

package/src/utils/language.ts

@@ -1,16 +0,0 @@
-/**
- * Gets the language name corresponding to the provided language code.
- *
- * @param {string} langCode - The language code (e.g.,"en", "en-us", "es-es", "fr-fr").
- * @returns {string} The localized language name based on the user's preferred languages,
- *                   or `null` if the language code is not recognized.
- */
-export function getLangName(langCode: string) {
-  try {
-    const displayNames = new Intl.DisplayNames(navigator.languages, { type: 'language' });
-    const languageName = displayNames.of(langCode);
-    return languageName ?? null;
-  } catch (err) {
-    return null;
-  }
-}

package/src/utils/manifest.ts

@@ -1,61 +0,0 @@
-import type { MediaStreamType } from '../core/api/types';
-
-export function resolveStreamTypeFromDASHManifest(
-  manifestSrc: string,
-  requestInit?: RequestInit,
-): Promise<MediaStreamType> {
-  return fetch(manifestSrc, requestInit)
-    .then((res) => res.text())
-    .then((manifest) => {
-      return /type="static"/.test(manifest) ? 'on-demand' : 'live';
-    });
-}
-
-export function resolveStreamTypeFromHLSManifest(
-  manifestSrc: string,
-  requestInit?: RequestInit,
-): Promise<MediaStreamType> {
-  return fetch(manifestSrc, requestInit)
-    .then((res) => res.text())
-    .then((manifest) => {
-      const renditionURI = resolveHLSRenditionURI(manifest);
-      if (renditionURI) {
-        return resolveStreamTypeFromHLSManifest(
-          /^https?:/.test(renditionURI) ? renditionURI : new URL(renditionURI, manifestSrc).href,
-          requestInit,
-        );
-      }
-
-      const streamType = /EXT-X-PLAYLIST-TYPE:\s*VOD/.test(manifest) ? 'on-demand' : 'live';
-
-      if (
-        streamType === 'live' &&
-        resolveTargetDuration(manifest) >= 10 &&
-        (/#EXT-X-DVR-ENABLED:\s*true/.test(manifest) || manifest.includes('#EXT-X-DISCONTINUITY'))
-      ) {
-        return 'live:dvr';
-      }
-
-      return streamType;
-    });
-}
-
-function resolveHLSRenditionURI(manifest: string) {
-  const matches = manifest.match(/#EXT-X-STREAM-INF:[^\n]+(\n[^\n]+)*/g);
-  return matches ? matches[0].split('\n')[1].trim() : null;
-}
-
-function resolveTargetDuration(manifest: string): number {
-  const lines = manifest.split('\n');
-
-  for (const line of lines) {
-    if (line.startsWith('#EXT-X-TARGETDURATION')) {
-      const duration = parseFloat(line.split(':')[1]);
-      if (!isNaN(duration)) {
-        return duration;
-      }
-    }
-  }
-
-  return -1;
-}

package/src/utils/mime.ts

@@ -1,101 +0,0 @@
-import { isString } from 'maverick.js/std';
-
-import type { Src } from '../core/api/src-types';
-import { canPlayHLSNatively } from './support';
-
-// https://github.com/cookpete/react-player/blob/master/src/patterns.js#L16
-export const AUDIO_EXTENSIONS =
-  /\.(m4a|m4b|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx|flac)($|\?)/i;
-
-// TODO: We'll need to extend this later.
-export const AUDIO_TYPES = new Set<string>([
-  'audio/mpeg',
-  'audio/ogg',
-  'audio/3gp',
-  'audio/mp3',
-  'audio/webm',
-  'audio/flac',
-  'audio/m4a',
-  'audio/m4b',
-  'audio/mp4a',
-  'audio/mp4',
-]);
-
-// https://github.com/cookpete/react-player/blob/master/src/patterns.js#L16
-export const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)(#t=[,\d+]+)?($|\?)/i;
-
-// TODO: We'll need to extend this later.
-export const VIDEO_TYPES = new Set<string>([
-  'video/mp4',
-  'video/webm',
-  'video/3gp',
-  'video/ogg',
-  'video/avi',
-  'video/mpeg',
-]);
-
-export const HLS_VIDEO_EXTENSIONS = /\.(m3u8)($|\?)/i;
-export const DASH_VIDEO_EXTENSIONS = /\.(mpd)($|\?)/i;
-
-// Taken from video.js
-export const HLS_VIDEO_TYPES = new Set<string>([
-  // Apple sanctioned
-  'application/vnd.apple.mpegurl',
-  // Apple sanctioned for backwards compatibility
-  'audio/mpegurl',
-  // Very common
-  'audio/x-mpegurl',
-  // Very common
-  'application/x-mpegurl',
-  // Included for completeness
-  'video/x-mpegurl',
-  'video/mpegurl',
-  'application/mpegurl',
-]);
-
-export const DASH_VIDEO_TYPES = new Set<string>(['application/dash+xml']);
-
-export function isAudioSrc({ src, type }: Src): boolean {
-  return isString(src)
-    ? AUDIO_EXTENSIONS.test(src) ||
-        AUDIO_TYPES.has(type) ||
-        (src.startsWith('blob:') && type === 'audio/object')
-    : type === 'audio/object';
-}
-
-export function isVideoSrc(src: Src): boolean {
-  return isString(src.src)
-    ? VIDEO_EXTENSIONS.test(src.src) ||
-        VIDEO_TYPES.has(src.type) ||
-        (src.src.startsWith('blob:') && src.type === 'video/object') ||
-        (isHLSSrc(src) && (__SERVER__ || canPlayHLSNatively()))
-    : src.type === 'video/object';
-}
-
-export function isHLSSrc({ src, type }: Src): boolean {
-  return (isString(src) && HLS_VIDEO_EXTENSIONS.test(src)) || HLS_VIDEO_TYPES.has(type);
-}
-
-export function isDASHSrc({ src, type }: Src): boolean {
-  return (isString(src) && DASH_VIDEO_EXTENSIONS.test(src)) || DASH_VIDEO_TYPES.has(type);
-}
-
-export function canGoogleCastSrc(src: Src): boolean {
-  return isString(src.src) && (isAudioSrc(src) || isVideoSrc(src) || isHLSSrc(src));
-}
-
-export function isMediaStream(src: unknown): src is MediaStream {
-  return (
-    !__SERVER__ && typeof window.MediaStream !== 'undefined' && src instanceof window.MediaStream
-  );
-}
-
-// export function isMediaSource(src: unknown): src is MediaSource {
-//   const MediaSource = getMediaSource();
-//   return !!MediaSource && src instanceof MediaSource;
-// }
-
-// export function isBlob(src: unknown): src is Blob {
-//   // We can't use `instanceof Blob` because it might be polyfilled.
-//   return src?.constructor.name === 'Blob';
-// }