@hanifhan1f/vidstack 1.12.13 → 1.12.14

package/src/utils/network.ts

@@ -1,118 +0,0 @@
-import {
-  deferredPromise,
-  isBoolean,
-  isNull,
-  isString,
-  type DeferredPromise,
-} from 'maverick.js/std';
-
-import type { Src } from '../core/api/src-types';
-import { isAudioSrc, isVideoSrc } from './mime';
-
-export function appendParamsToURL(baseUrl: string, params: Record<string, any>) {
-  const url = new URL(baseUrl);
-
-  for (const key of Object.keys(params)) {
-    url.searchParams.set(key, params[key] + '');
-  }
-
-  return url.toString();
-}
-
-export function preconnect(
-  url: string,
-  rel: 'preconnect' | 'prefetch' | 'preload' = 'preconnect',
-): boolean {
-  if (__SERVER__) return false;
-
-  const exists = document.querySelector(`link[href="${url}"]`);
-  if (!isNull(exists)) return true;
-
-  const link = document.createElement('link');
-  link.rel = rel;
-  link.href = url;
-  link.crossOrigin = 'true';
-
-  document.head.append(link);
-  return true;
-}
-
-const pendingRequests: Record<string, DeferredPromise<void>> = {};
-export function loadScript(src: string): Promise<void> {
-  if (pendingRequests[src]) return pendingRequests[src].promise;
-
-  const promise = deferredPromise(),
-    exists = document.querySelector(`script[src="${src}"]`);
-
-  if (!isNull(exists)) {
-    promise.resolve();
-    return promise.promise;
-  }
-
-  pendingRequests[src] = promise;
-
-  const script = document.createElement('script');
-  script.src = src;
-
-  script.onload = () => {
-    promise.resolve();
-    delete pendingRequests[src];
-  };
-
-  script.onerror = () => {
-    promise.reject();
-    delete pendingRequests[src];
-  };
-
-  setTimeout(() => document.head.append(script), 0);
-  return promise.promise;
-}
-
-export function getRequestCredentials(crossOrigin?: string | null): RequestCredentials | undefined {
-  return crossOrigin === 'use-credentials'
-    ? 'include'
-    : isString(crossOrigin)
-      ? 'same-origin'
-      : undefined;
-}
-
-export type FileDownloadInfo = boolean | string | { url: string; filename: string } | null;
-
-export function getDownloadFile({
-  title,
-  src,
-  download,
-}: {
-  src: Src;
-  title: string;
-  download?: FileDownloadInfo;
-}) {
-  const url =
-    isBoolean(download) || download === ''
-      ? src.src
-      : isString(download)
-        ? download
-        : download?.url;
-
-  if (!isValidFileDownload({ url, src, download })) return null;
-
-  return {
-    url,
-    name:
-      (!isBoolean(download) && !isString(download) && download?.filename) ||
-      title.toLowerCase() ||
-      'media',
-  };
-}
-
-function isValidFileDownload({
-  url,
-  src,
-  download,
-}: {
-  url: unknown;
-  src: Src;
-  download?: FileDownloadInfo;
-}) {
-  return isString(url) && ((download && download !== true) || isAudioSrc(src) || isVideoSrc(src));
-}

package/src/utils/number.ts

@@ -1,25 +0,0 @@
-/**
- * Round a number to the given number of `decimalPlaces`.
- */
-export function round(num: number, decimalPlaces = 2): number {
-  return Number(num.toFixed(decimalPlaces));
-}
-
-/**
- * Get the number of decimal places in the given `num`.
- *
- * @example `1 -> 0`
- * @example `1.0 -> 0`
- * @example `1.1 -> 1`
- * @example `1.12 -> 2`
- */
-export function getNumberOfDecimalPlaces(num: number): number {
-  return String(num).split('.')[1]?.length ?? 0;
-}
-
-/**
- * Clamp a given `value` between a minimum and maximum value.
- */
-export function clampNumber(min: number, value: number, max: number): number {
-  return Math.max(min, Math.min(max, value));
-}

package/src/utils/promise.ts

@@ -1,12 +0,0 @@
-import { deferredPromise } from 'maverick.js/std';
-
-export function timedPromise<Resolved, Rejected>(callback: () => Rejected | void, ms = 3000) {
-  const promise = deferredPromise<Resolved, Rejected>();
-
-  setTimeout(() => {
-    const rejection = callback();
-    if (rejection) promise.reject(rejection);
-  }, ms);
-
-  return promise;
-}

package/src/utils/scroll.ts

@@ -1,19 +0,0 @@
-import { compute, type Options as ComputeScrollOptions } from 'compute-scroll-into-view';
-
-export interface ScrollIntoViewOptions extends ComputeScrollOptions, ScrollOptions {}
-
-export function scrollIntoView(el: HTMLElement, options: ScrollIntoViewOptions) {
-  const scrolls = compute(el, options);
-  for (const { el, top, left } of scrolls) {
-    el.scroll({ top, left, behavior: options.behavior });
-  }
-}
-
-export function scrollIntoCenter(el: HTMLElement, options: ScrollIntoViewOptions = {}) {
-  scrollIntoView(el, {
-    scrollMode: 'if-needed',
-    block: 'center',
-    inline: 'center',
-    ...options,
-  });
-}

package/src/utils/support.ts

@@ -1,163 +0,0 @@
-import { isFunction, isUndefined, waitTimeout } from 'maverick.js/std';
-
-export const UA = __SERVER__ ? '' : navigator?.userAgent.toLowerCase() || '';
-export const IS_IOS = !__SERVER__ && /iphone|ipad|ipod|ios|crios|fxios/i.test(UA);
-export const IS_IPHONE = !__SERVER__ && /(iphone|ipod)/gi.test(navigator?.platform || '');
-export const IS_CHROME = !__SERVER__ && !!window.chrome;
-export const IS_IOS_CHROME = !__SERVER__ && /crios/i.test(UA);
-export const IS_SAFARI = !__SERVER__ && (!!window.safari || IS_IOS);
-
-/**
- * Returns the current Android OS version. Defaults to `0` if unknown.
- */
-export function getAndroidVersion() {
-  const version = parseFloat(UA.match(/android\s([0-9\.]*)/)?.[1] ?? '0');
-  return !isNaN(version) ? version : 0;
-}
-
-/**
- * Checks whether the `IntersectionObserver` API is available.
- */
-export function canObserveIntersection(): boolean {
-  return !__SERVER__ && !isUndefined(window.IntersectionObserver);
-}
-
-/**
- * Checks if the ScreenOrientation API is available.
- *
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation}
- */
-export function canOrientScreen(): boolean {
-  return canRotateScreen() && isFunction(screen.orientation.unlock);
-}
-
-/**
- * Checks if the screen orientation can be changed.
- *
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation}
- */
-export function canRotateScreen(): boolean {
-  return (
-    !__SERVER__ &&
-    !isUndefined(window.screen.orientation) &&
-    !isUndefined((window.screen.orientation as any).lock)
-  );
-}
-
-/**
- * Reduced motion iOS & MacOS setting.
- *
- * @see {@link https://webkit.org/blog/7551/responsive-design-for-motion/}
- */
-export function isReducedMotionPreferred(): boolean {
-  return (
-    !__SERVER__ && 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches
-  );
-}
-
-export function canPlayAudioType(audio: HTMLAudioElement | null, type: string): boolean {
-  if (__SERVER__) return false;
-  if (!audio) audio = document.createElement('audio');
-  return audio.canPlayType(type).length > 0;
-}
-
-export function canPlayVideoType(video: HTMLVideoElement | null, type: string): boolean {
-  if (__SERVER__) return false;
-  if (!video) video = document.createElement('video');
-  return video.canPlayType(type).length > 0;
-}
-
-/**
- * Checks if the native HTML5 video player can play HLS.
- */
-export function canPlayHLSNatively(video?: HTMLVideoElement | null): boolean {
-  if (__SERVER__) return false;
-  if (!video) video = document.createElement('video');
-  return video.canPlayType('application/vnd.apple.mpegurl').length > 0;
-}
-
-/**
- * Checks if the native HTML5 video player can enter picture-in-picture (PIP) mode when using
- * the Chrome browser.
- *
- * @see {@link https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture}
- */
-export function canUsePictureInPicture(video: HTMLVideoElement | null): boolean {
-  if (__SERVER__) return false;
-  return !!document.pictureInPictureEnabled && !video?.disablePictureInPicture;
-}
-
-/**
- * Checks if the native HTML5 video player can use the presentation API in Safari.
- *
- * @see {@link https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1631913-webkitpresentationmode}
- */
-export function canUseVideoPresentation(video: HTMLVideoElement | null): boolean {
-  if (__SERVER__) return false;
-  return (
-    isFunction(video?.webkitSupportsPresentationMode) &&
-    isFunction(video?.webkitSetPresentationMode)
-  );
-}
-
-export async function canChangeVolume() {
-  const video = document.createElement('video');
-  video.volume = 0.5;
-  await waitTimeout(0);
-  return video.volume === 0.5;
-}
-
-/**
- * @see {@link https://github.com/video-dev/hls.js/blob/master/src/is-supported.ts}
- */
-export function getMediaSource(): typeof MediaSource | undefined {
-  return __SERVER__
-    ? undefined
-    : window?.ManagedMediaSource ?? window?.MediaSource ?? window?.WebKitMediaSource;
-}
-
-/**
- * @see {@link https://github.com/video-dev/hls.js/blob/master/src/is-supported.ts}
- */
-export function getSourceBuffer(): typeof SourceBuffer | undefined {
-  return __SERVER__ ? undefined : window?.SourceBuffer ?? window?.WebKitSourceBuffer;
-}
-
-/**
- * Whether `hls.js` is supported in this environment. Checks whether `MediaSource` or
- * `ManagedMediaSource` and a valid `SourceBuffer` API are available.
- *
- * @see {@link https://github.com/video-dev/hls.js/blob/master/src/is-supported.ts}
- */
-export function isHLSSupported(): boolean {
-  if (__SERVER__) return false;
-
-  const MediaSource = getMediaSource();
-
-  if (isUndefined(MediaSource)) return false;
-
-  const isTypeSupported =
-    MediaSource &&
-    isFunction(MediaSource.isTypeSupported) &&
-    MediaSource.isTypeSupported('video/mp4; codecs="avc1.42E01E,mp4a.40.2"');
-
-  const SourceBuffer = getSourceBuffer();
-
-  // If SourceBuffer is exposed ensure its API is valid because safari and old versions of Chrome
-  // do not expose SourceBuffer globally so checking SourceBuffer.prototype is impossible.
-  const isSourceBufferValid =
-    isUndefined(SourceBuffer) ||
-    (!isUndefined(SourceBuffer.prototype) &&
-      isFunction(SourceBuffer.prototype.appendBuffer) &&
-      isFunction(SourceBuffer.prototype.remove));
-
-  return !!isTypeSupported && !!isSourceBufferValid;
-}
-
-/**
- * Whether `dashjs` is supported in this environment. Checks whether `MediaSource` or
- * `ManagedMediaSource` and a valid `SourceBuffer` API are available.
- */
-export function isDASHSupported(): boolean {
-  return isHLSSupported();
-}

package/src/utils/time.test.ts

@@ -1,111 +0,0 @@
-import {
-  formatHtml5Duration,
-  formatSpokenTime,
-  formatTime,
-  padNumberWithZeroes,
-  parseTime,
-} from './time';
-
-describe(padNumberWithZeroes.name, function () {
-  it('should pad correctly', function () {
-    expect(padNumberWithZeroes(1, 0)).to.equal('1');
-    expect(padNumberWithZeroes(1, 1)).to.equal('1');
-    expect(padNumberWithZeroes(1, 2)).to.equal('01');
-    expect(padNumberWithZeroes(10, 2)).to.equal('10');
-    expect(padNumberWithZeroes(20, 2)).to.equal('20');
-    expect(padNumberWithZeroes(101, 2)).to.equal('101');
-    expect(padNumberWithZeroes(101, 4)).to.equal('0101');
-  });
-});
-
-describe(parseTime.name, function () {
-  it('parses hours correctly', function () {
-    expect(parseTime(3599).hours).to.equal(0);
-    expect(parseTime(3600).hours).to.equal(1);
-  });
-
-  it('parses minutes correctly', function () {
-    expect(parseTime(59).minutes).to.equal(0);
-    expect(parseTime(60).minutes).to.equal(1);
-    expect(parseTime(3599).minutes).to.equal(59);
-    expect(parseTime(3600).minutes).to.equal(0);
-    expect(parseTime(3659).minutes).to.equal(0);
-    expect(parseTime(3660).minutes).to.equal(1);
-  });
-
-  it('parses seconds correctly', function () {
-    expect(parseTime(0).seconds).to.equal(0);
-    expect(parseTime(1).seconds).to.equal(1);
-    expect(parseTime(59).seconds).to.equal(59);
-    expect(parseTime(60).seconds).to.equal(0);
-    expect(parseTime(61).seconds).to.equal(1);
-  });
-
-  it('parses decimals correctly', function () {
-    expect(parseTime(0).fraction).to.equal(0);
-    expect(parseTime(0.1).fraction).to.equal(0.1);
-    expect(parseTime(1.05).fraction).to.equal(0.05);
-    expect(parseTime(1.00256453).fraction).to.equal(0.00256);
-  });
-});
-
-describe(formatTime.name, function () {
-  it('adds a leading zero to seconds if seconds < 10', function () {
-    expect(formatTime(0)).to.equal('0:00');
-    expect(formatTime(1)).to.equal('0:01');
-    expect(formatTime(60)).to.equal('1:00');
-    expect(formatTime(61)).to.equal('1:01');
-  });
-
-  it('includes zero minutes if seconds < 60', function () {
-    expect(formatTime(59)).to.equal('0:59');
-  });
-
-  it('formats minutes correctly if seconds >= 60', function () {
-    expect(formatTime(60)).to.equal('1:00');
-    expect(formatTime(83)).to.equal('1:23');
-    expect(formatTime(754)).to.equal('12:34');
-  });
-
-  it('formats hours correctly if seconds >= 3600', function () {
-    expect(formatTime(3600)).to.equal('1:00:00');
-    expect(formatTime(5025)).to.equal('1:23:45');
-    expect(formatTime(45296)).to.equal('12:34:56');
-  });
-
-  it('it should pad hours', function () {
-    expect(formatTime(3600, { padHrs: true })).to.equal('01:00:00');
-  });
-
-  it('it should display hours', function () {
-    expect(formatTime(3500, { showHrs: true })).to.equal('0:58:20');
-    expect(formatTime(3500, { showHrs: true, padHrs: true })).to.equal('00:58:20');
-  });
-
-  it('it should display ms', function () {
-    expect(formatTime(2501.5, { showMs: true })).to.equal('41:41.5');
-  });
-});
-
-describe(formatSpokenTime.name, function () {
-  it('it should format spoken time correctly', function () {
-    expect(formatSpokenTime(0)).to.equal('0 sec');
-    expect(formatSpokenTime(59)).to.equal('59 sec');
-    expect(formatSpokenTime(60)).to.equal('1 min');
-    expect(formatSpokenTime(83)).to.equal('1 min 23 sec');
-    expect(formatSpokenTime(754)).to.equal('12 min 34 sec');
-    expect(formatSpokenTime(3600)).to.equal('1 hour');
-    expect(formatSpokenTime(5025)).to.equal('1 hour 23 min 45 sec');
-    expect(formatSpokenTime(45296)).to.equal('12 hour 34 min 56 sec');
-  });
-});
-
-describe(formatHtml5Duration.name, function () {
-  it('formats PT datetime format correctly', function () {
-    expect(formatHtml5Duration(0)).to.equal('PT0H0M0S');
-    expect(formatHtml5Duration(1)).to.equal('PT0H0M1S');
-    expect(formatHtml5Duration(60)).to.equal('PT0H1M0S');
-    expect(formatHtml5Duration(3600)).to.equal('PT1H0M0S');
-    expect(formatHtml5Duration(0.1)).to.equal('PT0H0M0.1S');
-  });
-});

package/src/utils/time.ts

@@ -1,123 +0,0 @@
-/**
- * 🤖 This section was generously ~stolen from~... err... donated by Furf. Cheers!
- *
- * @see https://github.snooguts.net/david-furfero/reddit-media-player/blob/main/src/lib/formatTime/index.ts
- */
-
-import { isNull } from 'maverick.js/std';
-
-/**
- * Casts a number to a string and pads it to match the given `expectedLength`.
- *
- * @param num - A number to pad.
- * @param expectedLength - The expected length of the numbers as a string.
- */
-export function padNumberWithZeroes(num: number, expectedLength: number): string {
-  const str = String(num);
-  const actualLength = str.length;
-  const shouldPad = actualLength < expectedLength;
-
-  if (shouldPad) {
-    const padLength = expectedLength - actualLength;
-    const padding = `0`.repeat(padLength);
-    return `${padding}${num}`;
-  }
-
-  return str;
-}
-
-export type TimeUnit = 'hours' | 'minutes' | 'seconds' | 'fraction';
-
-export type ParsedTime = {
-  [P in TimeUnit]: number;
-};
-
-/**
- * Parses the given `duration` into the following units of time: hours, minutes,
- * seconds, fraction (fraction of a second).
- *
- * @param duration - The length of time to parse in seconds.
- */
-export function parseTime(duration: number): ParsedTime {
-  const hours = Math.trunc(duration / 3600);
-  const minutes = Math.trunc((duration % 3600) / 60);
-  const seconds = Math.trunc(duration % 60);
-  const fraction = Number((duration - Math.trunc(duration)).toPrecision(3));
-  return {
-    hours,
-    minutes,
-    seconds,
-    fraction,
-  };
-}
-
-export interface FormatTimeOptions {
-  padHrs?: boolean | null;
-  padMins?: boolean | null;
-  showHrs?: boolean;
-  showMs?: boolean;
-}
-
-/**
- * Formats the given `duration` into a human readable form that can be displayed to the user.
- *
- * @param duration - The length of time to parse in seconds.
- * @param shouldPadHours - Whether to pad the hours to be length of 2.
- * @param shouldPadMinutes - Whether to pad the minutes to be length of 2.
- * @param shouldAlwaysShowHours - Whether to always show the hours unit.
- * @example `01:20 -> minutes:seconds`
- * @example `3:01:20 -> hours:minutes:seconds`
- * @example If `shouldPadHours` is `true` - `03:01:20`
- * @example If `shouldAlwaysShowHours` is `true` - `0:01:20`
- */
-export function formatTime(
-  duration: number,
-  { padHrs = null, padMins = null, showHrs = false, showMs = false }: FormatTimeOptions = {},
-): string {
-  const { hours, minutes, seconds, fraction } = parseTime(duration),
-    paddedHours = padHrs ? padNumberWithZeroes(hours, 2) : hours,
-    paddedMinutes =
-      padMins || (isNull(padMins) && duration >= 3600) ? padNumberWithZeroes(minutes, 2) : minutes,
-    paddedSeconds = padNumberWithZeroes(seconds, 2),
-    paddedMs = showMs && fraction > 0 ? `.${String(fraction).replace(/^0?\./, '')}` : '',
-    time = `${paddedMinutes}:${paddedSeconds}${paddedMs}`;
-
-  return hours > 0 || showHrs ? `${paddedHours}:${time}` : time;
-}
-
-/**
- * Formats the given `duration` into human spoken form.
- *
- * @param duration - The length of time to parse in seconds.
- * @example `2 hour 3 min 4 sec`
- */
-export function formatSpokenTime(duration: number): string {
-  const spokenParts: string[] = [];
-  const { hours, minutes, seconds } = parseTime(duration);
-
-  if (hours > 0) {
-    spokenParts.push(`${hours} hour`);
-  }
-
-  if (minutes > 0) {
-    spokenParts.push(`${minutes} min`);
-  }
-
-  if (seconds > 0 || spokenParts.length === 0) {
-    spokenParts.push(`${seconds} sec`);
-  }
-
-  return spokenParts.join(' ');
-}
-
-/**
- * Formats the given `duration` into a valid HTML5 duration as specified in the linked
- * spec below.
- *
- * @param duration - The length of time to parse in seconds.
- * @see {@link https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html#valid-duration-string}
- */
-export function formatHtml5Duration(duration: number): string {
-  const { hours, minutes, seconds, fraction } = parseTime(duration);
-  return `PT${hours}H${minutes}M${seconds + fraction}S`;
-}

package/tsconfig.build.json

@@ -1,9 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "declaration": true,
-    "declarationDir": "types",
-    "paths": {}
-  },
-  "exclude": ["src/**/*.test.ts", "src/test-utils"]
-}

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "jsx": "preserve",
-    "paths": {
-      "$test-utils": ["./src/test-utils/index.ts"]
-    },
-    "types": ["@types/node", "vitest/globals"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx"]
-}

package/types/components/aria/announcer.d.ts

@@ -1,27 +0,0 @@
-import { Component, State } from 'maverick.js';
-import { type DOMEvent } from 'maverick.js/std';
-/**
- * @docs {@link https://www.vidstack.io/docs/player/components/display/announcer}
- */
-export declare class MediaAnnouncer extends Component<MediaAnnouncerProps, MediaAnnouncerState, MediaAnnouncerEvents> {
-    #private;
-    static props: MediaAnnouncerProps;
-    static state: State<MediaAnnouncerState>;
-    protected onSetup(): void;
-    protected onAttach(el: HTMLElement): void;
-    protected onConnect(el: HTMLElement): void;
-}
-export interface MediaAnnouncerProps {
-    translations: Partial<MediaAnnouncerTranslations> | null;
-}
-export interface MediaAnnouncerState {
-    label: string | null;
-    busy: boolean;
-}
-export interface MediaAnnouncerEvents {
-    change: DOMEvent<string>;
-}
-export type MediaAnnouncerWord = 'Play' | 'Pause' | 'Enter Fullscreen' | 'Exit Fullscreen' | 'Enter PiP' | 'Exit PiP' | 'Closed-Captions On' | 'Closed-Captions Off' | 'Mute' | 'Volume' | 'Seek Forward' | 'Seek Backward';
-export type MediaAnnouncerTranslations = {
-    [word in MediaAnnouncerWord]: string;
-};

package/types/components/layouts/default/audio-layout.d.ts

@@ -1,15 +0,0 @@
-import { DefaultLayout } from './default-layout';
-import type { DefaultLayoutProps } from './props';
-/**
- * The audio layout is our production-ready UI that's displayed when the media view type is set to
- * 'audio'. It includes support for audio tracks, slider chapters, captions, live streams, and much
- * more out of the box.
- *
- * @attr data-match - Whether this layout is being used (query match).
- * @attr data-sm - The small layout is active
- * @attr data-lg - The large layout is active.
- * @attr data-size - The active layout size (sm or lg).
- */
-export declare class DefaultAudioLayout extends DefaultLayout {
-    static props: DefaultLayoutProps;
-}

package/types/components/layouts/default/context.d.ts

@@ -1,9 +0,0 @@
-import { type ReadSignalRecord, type WriteSignal } from 'maverick.js';
-import type { DefaultLayoutProps } from './props';
-export interface DefaultLayoutContext extends ReadSignalRecord<DefaultLayoutProps> {
-    menuPortal: WriteSignal<HTMLElement | null>;
-    userPrefersAnnouncements: WriteSignal<boolean>;
-    userPrefersKeyboardAnimations: WriteSignal<boolean>;
-}
-export declare const defaultLayoutContext: import("maverick.js").Context<DefaultLayoutContext>;
-export declare function useDefaultLayoutContext(): DefaultLayoutContext;

package/types/components/layouts/default/default-layout.d.ts

@@ -1,10 +0,0 @@
-import { Component } from 'maverick.js';
-import { type DefaultLayoutProps } from './props';
-export declare class DefaultLayout extends Component<DefaultLayoutProps> {
-    #private;
-    static props: DefaultLayoutProps;
-    get isMatch(): boolean;
-    get isSmallLayout(): boolean;
-    protected onSetup(): void;
-    protected onAttach(el: HTMLElement): void;
-}