@zenvor/hls.js 1.0.0

package/src/utils/error-helper.ts

@@ -0,0 +1,95 @@
+import { ErrorDetails } from '../errors';
+import type { LoaderConfig, LoadPolicy, RetryConfig } from '../config';
+import type { ErrorData } from '../types/events';
+import type { LoaderResponse } from '../types/loader';
+
+export function isTimeoutError(error: ErrorData): boolean {
+  switch (error.details) {
+    case ErrorDetails.FRAG_LOAD_TIMEOUT:
+    case ErrorDetails.KEY_LOAD_TIMEOUT:
+    case ErrorDetails.LEVEL_LOAD_TIMEOUT:
+    case ErrorDetails.MANIFEST_LOAD_TIMEOUT:
+    case ErrorDetails.AUDIO_TRACK_LOAD_TIMEOUT:
+    case ErrorDetails.SUBTITLE_TRACK_LOAD_TIMEOUT:
+    case ErrorDetails.ASSET_LIST_LOAD_TIMEOUT:
+      return true;
+  }
+  return false;
+}
+
+export function isKeyError(error: ErrorData): boolean {
+  return error.details.startsWith('key');
+}
+
+export function isUnusableKeyError(error: ErrorData): boolean {
+  return isKeyError(error) && !!error.frag && !error.frag.decryptdata;
+}
+
+export function getRetryConfig(
+  loadPolicy: LoadPolicy,
+  error: ErrorData,
+): RetryConfig | null {
+  const isTimeout = isTimeoutError(error);
+  return loadPolicy.default[`${isTimeout ? 'timeout' : 'error'}Retry`];
+}
+
+export function getRetryDelay(
+  retryConfig: RetryConfig,
+  retryCount: number,
+): number {
+  // exponential backoff capped to max retry delay
+  const backoffFactor =
+    retryConfig.backoff === 'linear' ? 1 : Math.pow(2, retryCount);
+  return Math.min(
+    backoffFactor * retryConfig.retryDelayMs,
+    retryConfig.maxRetryDelayMs,
+  );
+}
+
+export function getLoaderConfigWithoutReties(
+  loderConfig: LoaderConfig,
+): LoaderConfig {
+  return {
+    ...loderConfig,
+    ...{
+      errorRetry: null,
+      timeoutRetry: null,
+    },
+  };
+}
+
+export function shouldRetry(
+  retryConfig: RetryConfig | null | undefined,
+  retryCount: number,
+  isTimeout: boolean,
+  loaderResponse?: LoaderResponse | undefined,
+): retryConfig is RetryConfig & boolean {
+  if (!retryConfig) {
+    return false;
+  }
+  const httpStatus = loaderResponse?.code;
+  const retry =
+    retryCount < retryConfig.maxNumRetry &&
+    (retryForHttpStatus(httpStatus) || !!isTimeout);
+  return retryConfig.shouldRetry
+    ? retryConfig.shouldRetry(
+        retryConfig,
+        retryCount,
+        isTimeout,
+        loaderResponse,
+        retry,
+      )
+    : retry;
+}
+
+export function retryForHttpStatus(httpStatus: number | undefined): boolean {
+  // Do not retry on status 4xx, status 0 (CORS error), or undefined (decrypt/gap/parse error)
+  return (
+    offlineHttpStatus(httpStatus) ||
+    (!!httpStatus && (httpStatus < 400 || httpStatus > 499))
+  );
+}
+
+export function offlineHttpStatus(httpStatus: number | undefined): boolean {
+  return httpStatus === 0 && navigator.onLine === false;
+}

package/src/utils/event-listener-helper.ts

@@ -0,0 +1,16 @@
+export function addEventListener(
+  el: EventTarget,
+  type: string,
+  listener: EventListenerOrEventListenerObject,
+) {
+  removeEventListener(el, type, listener);
+  el.addEventListener(type, listener);
+}
+
+export function removeEventListener(
+  el: EventTarget,
+  type: string,
+  listener: EventListenerOrEventListenerObject,
+) {
+  el.removeEventListener(type, listener);
+}

package/src/utils/ewma-bandwidth-estimator.ts

@@ -0,0 +1,97 @@
+/*
+ * EWMA Bandwidth Estimator
+ *  - heavily inspired from shaka-player
+ * Tracks bandwidth samples and estimates available bandwidth.
+ * Based on the minimum of two exponentially-weighted moving averages with
+ * different half-lives.
+ */
+
+import EWMA from '../utils/ewma';
+
+class EwmaBandWidthEstimator {
+  private defaultEstimate_: number;
+  private minWeight_: number;
+  private minDelayMs_: number;
+  private slow_: EWMA;
+  private fast_: EWMA;
+  private defaultTTFB_: number;
+  private ttfb_: EWMA;
+
+  constructor(
+    slow: number,
+    fast: number,
+    defaultEstimate: number,
+    defaultTTFB: number = 100,
+  ) {
+    this.defaultEstimate_ = defaultEstimate;
+    this.minWeight_ = 0.001;
+    this.minDelayMs_ = 50;
+    this.slow_ = new EWMA(slow);
+    this.fast_ = new EWMA(fast);
+    this.defaultTTFB_ = defaultTTFB;
+    this.ttfb_ = new EWMA(slow);
+  }
+
+  update(slow: number, fast: number) {
+    const { slow_, fast_, ttfb_ } = this;
+    if (slow_.halfLife !== slow) {
+      this.slow_ = new EWMA(slow, slow_.getEstimate(), slow_.getTotalWeight());
+    }
+    if (fast_.halfLife !== fast) {
+      this.fast_ = new EWMA(fast, fast_.getEstimate(), fast_.getTotalWeight());
+    }
+    if (ttfb_.halfLife !== slow) {
+      this.ttfb_ = new EWMA(slow, ttfb_.getEstimate(), ttfb_.getTotalWeight());
+    }
+  }
+
+  sample(durationMs: number, numBytes: number) {
+    durationMs = Math.max(durationMs, this.minDelayMs_);
+    const numBits = 8 * numBytes;
+    // weight is duration in seconds
+    const durationS = durationMs / 1000;
+    // value is bandwidth in bits/s
+    const bandwidthInBps = numBits / durationS;
+    this.fast_.sample(durationS, bandwidthInBps);
+    this.slow_.sample(durationS, bandwidthInBps);
+  }
+
+  sampleTTFB(ttfb: number) {
+    // weight is frequency curve applied to TTFB in seconds
+    // (longer times have less weight with expected input under 1 second)
+    const seconds = ttfb / 1000;
+    const weight = Math.sqrt(2) * Math.exp(-Math.pow(seconds, 2) / 2);
+    this.ttfb_.sample(weight, Math.max(ttfb, 5));
+  }
+
+  canEstimate(): boolean {
+    return this.fast_.getTotalWeight() >= this.minWeight_;
+  }
+
+  getEstimate(): number {
+    if (this.canEstimate()) {
+      // console.log('slow estimate:'+ Math.round(this.slow_.getEstimate()));
+      // console.log('fast estimate:'+ Math.round(this.fast_.getEstimate()));
+      // Take the minimum of these two estimates.  This should have the effect of
+      // adapting down quickly, but up more slowly.
+      return Math.min(this.fast_.getEstimate(), this.slow_.getEstimate());
+    } else {
+      return this.defaultEstimate_;
+    }
+  }
+
+  getEstimateTTFB(): number {
+    if (this.ttfb_.getTotalWeight() >= this.minWeight_) {
+      return this.ttfb_.getEstimate();
+    } else {
+      return this.defaultTTFB_;
+    }
+  }
+
+  get defaultEstimate(): number {
+    return this.defaultEstimate_;
+  }
+
+  destroy() {}
+}
+export default EwmaBandWidthEstimator;

package/src/utils/ewma.ts

@@ -0,0 +1,43 @@
+/*
+ * compute an Exponential Weighted moving average
+ * - https://en.wikipedia.org/wiki/Moving_average#Exponential_moving_average
+ *  - heavily inspired from shaka-player
+ */
+
+class EWMA {
+  public readonly halfLife: number;
+  private alpha_: number;
+  private estimate_: number;
+  private totalWeight_: number;
+
+  //  About half of the estimated value will be from the last |halfLife| samples by weight.
+  constructor(halfLife: number, estimate: number = 0, weight: number = 0) {
+    this.halfLife = halfLife;
+    // Larger values of alpha expire historical data more slowly.
+    this.alpha_ = halfLife ? Math.exp(Math.log(0.5) / halfLife) : 0;
+    this.estimate_ = estimate;
+    this.totalWeight_ = weight;
+  }
+
+  sample(weight: number, value: number) {
+    const adjAlpha = Math.pow(this.alpha_, weight);
+    this.estimate_ = value * (1 - adjAlpha) + adjAlpha * this.estimate_;
+    this.totalWeight_ += weight;
+  }
+
+  getTotalWeight(): number {
+    return this.totalWeight_;
+  }
+
+  getEstimate(): number {
+    if (this.alpha_) {
+      const zeroFactor = 1 - Math.pow(this.alpha_, this.totalWeight_);
+      if (zeroFactor) {
+        return this.estimate_ / zeroFactor;
+      }
+    }
+    return this.estimate_;
+  }
+}
+
+export default EWMA;

package/src/utils/fetch-loader.ts

@@ -0,0 +1,331 @@
+import ChunkCache from '../demux/chunk-cache';
+import { isPromise } from '../demux/transmuxer';
+import { LoadStats } from '../loader/load-stats';
+import type { HlsConfig } from '../config';
+import type {
+  Loader,
+  LoaderCallbacks,
+  LoaderConfiguration,
+  LoaderContext,
+  LoaderOnProgress,
+  LoaderResponse,
+  LoaderStats,
+} from '../types/loader';
+
+export function fetchSupported() {
+  if (
+    // @ts-ignore
+    self.fetch &&
+    self.AbortController &&
+    self.ReadableStream &&
+    self.Request
+  ) {
+    try {
+      new self.ReadableStream({}); // eslint-disable-line no-new
+      return true;
+    } catch (e) {
+      /* noop */
+    }
+  }
+  return false;
+}
+
+const BYTERANGE = /(\d+)-(\d+)\/(\d+)/;
+
+class FetchLoader implements Loader<LoaderContext> {
+  private fetchSetup: NonNullable<HlsConfig['fetchSetup']>;
+  private requestTimeout?: number;
+  private request: Promise<Request> | Request | null = null;
+  private response: Response | null = null;
+  private controller: AbortController;
+  public context: LoaderContext | null = null;
+  private config: LoaderConfiguration | null = null;
+  private callbacks: LoaderCallbacks<LoaderContext> | null = null;
+  public stats: LoaderStats;
+  private loader: Response | null = null;
+
+  constructor(config: HlsConfig) {
+    this.fetchSetup = config.fetchSetup || getRequest;
+    this.controller = new self.AbortController();
+    this.stats = new LoadStats();
+  }
+
+  destroy(): void {
+    this.loader =
+      this.callbacks =
+      this.context =
+      this.config =
+      this.request =
+        null;
+    this.abortInternal();
+    this.response = null;
+    // @ts-ignore
+    this.fetchSetup = this.controller = this.stats = null;
+  }
+
+  abortInternal(): void {
+    if (this.controller && !this.stats.loading.end) {
+      this.stats.aborted = true;
+      this.controller.abort();
+    }
+  }
+
+  abort(): void {
+    this.abortInternal();
+    if (this.callbacks?.onAbort) {
+      this.callbacks.onAbort(
+        this.stats,
+        this.context as LoaderContext,
+        this.response,
+      );
+    }
+  }
+
+  load(
+    context: LoaderContext,
+    config: LoaderConfiguration,
+    callbacks: LoaderCallbacks<LoaderContext>,
+  ): void {
+    const stats = this.stats;
+    if (stats.loading.start) {
+      throw new Error('Loader can only be used once.');
+    }
+    stats.loading.start = self.performance.now();
+
+    const initParams = getRequestParameters(context, this.controller.signal);
+    const isArrayBuffer = context.responseType === 'arraybuffer';
+    const LENGTH = isArrayBuffer ? 'byteLength' : 'length';
+    const { maxTimeToFirstByteMs, maxLoadTimeMs } = config.loadPolicy;
+
+    this.context = context;
+    this.config = config;
+    this.callbacks = callbacks;
+    this.request = this.fetchSetup(context, initParams);
+    self.clearTimeout(this.requestTimeout);
+    config.timeout =
+      maxTimeToFirstByteMs && Number.isFinite(maxTimeToFirstByteMs)
+        ? maxTimeToFirstByteMs
+        : maxLoadTimeMs;
+    this.requestTimeout = self.setTimeout(() => {
+      if (this.callbacks) {
+        this.abortInternal();
+        this.callbacks.onTimeout(stats, context, this.response);
+      }
+    }, config.timeout);
+
+    const fetchPromise = isPromise(this.request)
+      ? this.request.then(self.fetch)
+      : self.fetch(this.request);
+
+    fetchPromise
+      .then((response: Response): Promise<string | ArrayBuffer> => {
+        this.response = this.loader = response;
+
+        const first = Math.max(self.performance.now(), stats.loading.start);
+
+        self.clearTimeout(this.requestTimeout);
+        config.timeout = maxLoadTimeMs;
+        this.requestTimeout = self.setTimeout(
+          () => {
+            if (this.callbacks) {
+              this.abortInternal();
+              this.callbacks.onTimeout(stats, context, this.response);
+            }
+          },
+          maxLoadTimeMs - (first - stats.loading.start),
+        );
+
+        if (!response.ok) {
+          const { status, statusText } = response;
+          throw new FetchError(
+            statusText || 'fetch, bad network response',
+            status,
+            response,
+          );
+        }
+        stats.loading.first = first;
+
+        stats.total = getContentLength(response.headers) || stats.total;
+
+        const onProgress = this.callbacks?.onProgress;
+        if (onProgress && Number.isFinite(config.highWaterMark)) {
+          return this.loadProgressively(
+            response,
+            stats,
+            context,
+            config.highWaterMark,
+            onProgress,
+          );
+        }
+
+        if (isArrayBuffer) {
+          return response.arrayBuffer();
+        }
+        if (context.responseType === 'json') {
+          return response.json();
+        }
+        return response.text();
+      })
+      .then((responseData: string | ArrayBuffer) => {
+        const response = this.response;
+        if (!response) {
+          throw new Error('loader destroyed');
+        }
+        self.clearTimeout(this.requestTimeout);
+        stats.loading.end = Math.max(
+          self.performance.now(),
+          stats.loading.first,
+        );
+        const total = responseData[LENGTH];
+        if (total) {
+          stats.loaded = stats.total = total;
+        }
+
+        const loaderResponse: LoaderResponse = {
+          url: response.url,
+          data: responseData,
+          code: response.status,
+        };
+
+        const onProgress = this.callbacks?.onProgress;
+        if (onProgress && !Number.isFinite(config.highWaterMark)) {
+          onProgress(stats, context, responseData, response);
+        }
+
+        this.callbacks?.onSuccess(loaderResponse, stats, context, response);
+      })
+      .catch((error) => {
+        self.clearTimeout(this.requestTimeout);
+        if (stats.aborted) {
+          return;
+        }
+        // CORS errors result in an undefined code. Set it to 0 here to align with XHR's behavior
+        // when destroying, 'error' itself can be undefined
+        const code: number = !error ? 0 : error.code || 0;
+        const text: string = !error ? null : error.message;
+        this.callbacks?.onError(
+          { code, text },
+          context,
+          error ? error.details : null,
+          stats,
+        );
+      });
+  }
+
+  getCacheAge(): number | null {
+    let result: number | null = null;
+    if (this.response) {
+      const ageHeader = this.response.headers.get('age');
+      result = ageHeader ? parseFloat(ageHeader) : null;
+    }
+    return result;
+  }
+
+  getResponseHeader(name: string): string | null {
+    return this.response ? this.response.headers.get(name) : null;
+  }
+
+  private loadProgressively(
+    response: Response,
+    stats: LoaderStats,
+    context: LoaderContext,
+    highWaterMark: number = 0,
+    onProgress: LoaderOnProgress<LoaderContext>,
+  ): Promise<ArrayBuffer> {
+    const chunkCache = new ChunkCache();
+    const reader = (response.body as ReadableStream).getReader();
+
+    const pump = (): Promise<ArrayBuffer> => {
+      return reader
+        .read()
+        .then((data) => {
+          if (data.done) {
+            if (chunkCache.dataLength) {
+              onProgress(stats, context, chunkCache.flush().buffer, response);
+            }
+
+            return Promise.resolve(new ArrayBuffer(0));
+          }
+          const chunk: Uint8Array<ArrayBuffer> = data.value;
+          const len = chunk.length;
+          stats.loaded += len;
+          if (len < highWaterMark || chunkCache.dataLength) {
+            // The current chunk is too small to to be emitted or the cache already has data
+            // Push it to the cache
+            chunkCache.push(chunk);
+            if (chunkCache.dataLength >= highWaterMark) {
+              // flush in order to join the typed arrays
+              onProgress(stats, context, chunkCache.flush().buffer, response);
+            }
+          } else {
+            // If there's nothing cached already, and the chache is large enough
+            // just emit the progress event
+            onProgress(stats, context, chunk.buffer, response);
+          }
+          return pump();
+        })
+        .catch(() => {
+          /* aborted */
+          return Promise.reject();
+        });
+    };
+
+    return pump();
+  }
+}
+
+function getRequestParameters(context: LoaderContext, signal): any {
+  const initParams: any = {
+    method: 'GET',
+    mode: 'cors',
+    credentials: 'same-origin',
+    signal,
+    headers: new self.Headers(Object.assign({}, context.headers)),
+  };
+
+  if (context.rangeEnd) {
+    initParams.headers.set(
+      'Range',
+      'bytes=' + context.rangeStart + '-' + String(context.rangeEnd - 1),
+    );
+  }
+
+  return initParams;
+}
+
+function getByteRangeLength(byteRangeHeader: string): number | undefined {
+  const result = BYTERANGE.exec(byteRangeHeader);
+  if (result) {
+    return parseInt(result[2]) - parseInt(result[1]) + 1;
+  }
+}
+
+function getContentLength(headers: Headers): number | undefined {
+  const contentRange = headers.get('Content-Range');
+  if (contentRange) {
+    const byteRangeLength = getByteRangeLength(contentRange);
+    if (Number.isFinite(byteRangeLength)) {
+      return byteRangeLength;
+    }
+  }
+  const contentLength = headers.get('Content-Length');
+  if (contentLength) {
+    return parseInt(contentLength);
+  }
+}
+
+function getRequest(context: LoaderContext, initParams: any): Request {
+  return new self.Request(context.url, initParams);
+}
+
+class FetchError extends Error {
+  public code: number;
+  public details: any;
+  constructor(message: string, code: number, details: any) {
+    super(message);
+    this.code = code;
+    this.details = details;
+  }
+}
+
+export default FetchLoader;

package/src/utils/global.ts

@@ -0,0 +1,2 @@
+/** returns `undefined` is `self` is missing, e.g. in node */
+export const optionalSelf = typeof self !== 'undefined' ? self : undefined;

package/src/utils/hash.ts

@@ -0,0 +1,10 @@
+// From https://github.com/darkskyapp/string-hash
+export function hash(text: string) {
+  let hash = 5381;
+  let i = text.length;
+  while (i) {
+    hash = (hash * 33) ^ text.charCodeAt(--i);
+  }
+
+  return (hash >>> 0).toString();
+}

package/src/utils/hdr.ts

@@ -0,0 +1,67 @@
+import { type VideoRange, VideoRangeValues } from '../types/level';
+import type { VideoSelectionOption } from '../types/media-playlist';
+
+/**
+ * @returns Whether we can detect and validate HDR capability within the window context
+ */
+export function isHdrSupported() {
+  if (typeof matchMedia === 'function') {
+    const mediaQueryList = matchMedia('(dynamic-range: high)');
+    const badQuery = matchMedia('bad query');
+    if (mediaQueryList.media !== badQuery.media) {
+      return mediaQueryList.matches === true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Sanitizes inputs to return the active video selection options for HDR/SDR.
+ * When both inputs are null:
+ *
+ *    `{ preferHDR: false, allowedVideoRanges: [] }`
+ *
+ * When `currentVideoRange` non-null, maintain the active range:
+ *
+ *    `{ preferHDR: currentVideoRange !== 'SDR', allowedVideoRanges: [currentVideoRange] }`
+ *
+ * When VideoSelectionOption non-null:
+ *
+ *  - Allow all video ranges if `allowedVideoRanges` unspecified.
+ *  - If `preferHDR` is non-null use the value to filter `allowedVideoRanges`.
+ *  - Else check window for HDR support and set `preferHDR` to the result.
+ *
+ * @param currentVideoRange
+ * @param videoPreference
+ */
+export function getVideoSelectionOptions(
+  currentVideoRange: VideoRange | undefined,
+  videoPreference: VideoSelectionOption | undefined,
+) {
+  let preferHDR = false;
+  let allowedVideoRanges: Array<VideoRange> = [];
+
+  if (currentVideoRange) {
+    preferHDR = currentVideoRange !== 'SDR';
+    allowedVideoRanges = [currentVideoRange];
+  }
+
+  if (videoPreference) {
+    allowedVideoRanges =
+      videoPreference.allowedVideoRanges || VideoRangeValues.slice(0);
+    const allowAutoPreferHDR =
+      allowedVideoRanges.join('') !== 'SDR' && !videoPreference.videoCodec;
+    preferHDR =
+      videoPreference.preferHDR !== undefined
+        ? videoPreference.preferHDR
+        : allowAutoPreferHDR && isHdrSupported();
+    if (!preferHDR) {
+      allowedVideoRanges = ['SDR'];
+    }
+  }
+
+  return {
+    preferHDR,
+    allowedVideoRanges,
+  };
+}

package/src/utils/hex.ts

@@ -0,0 +1,32 @@
+/**
+ *  hex dump helper class
+ */
+
+export function arrayToHex(array: Uint8Array<ArrayBuffer> | number[]) {
+  let str = '';
+  for (let i = 0; i < array.length; i++) {
+    let h = array[i].toString(16);
+    if (h.length < 2) {
+      h = '0' + h;
+    }
+
+    str += h;
+  }
+  return str;
+}
+
+export function hexToArrayBuffer(str: string): ArrayBuffer {
+  return Uint8Array.from(
+    str
+      .replace(/^0x/, '')
+      .replace(/([\da-fA-F]{2}) ?/g, '0x$1 ')
+      .replace(/ +$/, '')
+      .split(' '),
+  ).buffer;
+}
+
+const Hex = {
+  hexDump: arrayToHex,
+};
+
+export default Hex;