@hanifhan1f/vidstack 1.12.13

package/src/utils/network.ts

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

@@ -0,0 +1,25 @@
+/**
+ * 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

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

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

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

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

@@ -0,0 +1,123 @@
+/**
+ * 🤖 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`;
+}