rx-player 3.33.0 → 3.33.1

package/src/core/api/debug/modules/general_info.ts

@@ -1,213 +0,0 @@
-import { CancellationSignal } from "../../../../utils/task_canceller";
-import RxPlayer from "../../public_api";
-import { DEFAULT_REFRESH_INTERVAL } from "../constants";
-import {
-  createCompositeElement,
-  createElement,
-  createMetricTitle,
-  isExtendedMode,
-} from "../utils";
-
-export default function constructDebugGeneralInfo(
-  instance : RxPlayer,
-  parentElt : HTMLElement,
-  cancelSignal : CancellationSignal
-) : HTMLElement {
-  const generalInfoElt = createElement("div");
-  const adaptationsElt = createElement("div");
-  const representationsElt = createElement("div");
-  updateGeneralInfo();
-  const generalInfoItv = setInterval(() => {
-    updateGeneralInfo();
-  }, DEFAULT_REFRESH_INTERVAL);
-  cancelSignal.register(() => {
-    clearInterval(generalInfoItv);
-  });
-
-  return createCompositeElement("div", [
-    generalInfoElt,
-    adaptationsElt,
-    representationsElt,
-  ]);
-  function updateGeneralInfo() {
-    const videoElement = instance.getVideoElement();
-    if (videoElement === null) {
-      // disposed player. Clean-up everything
-      generalInfoElt.innerHTML = "";
-      adaptationsElt.innerHTML = "";
-      representationsElt.innerHTML = "";
-      clearInterval(generalInfoItv);
-      return;
-    } else {
-      const currentTime = instance.getPosition();
-      const bufferGap = instance.getVideoBufferGap();
-      const bufferGapStr = bufferGap === Infinity ? "0" : bufferGap.toFixed(2);
-      const valuesLine1 : Array<[string, string]> = [
-        ["ct", currentTime.toFixed(2)],
-        ["bg", bufferGapStr],
-        ["rs", String(videoElement.readyState)],
-        ["pr", String(videoElement.playbackRate)],
-        ["sp", String(instance.getPlaybackRate())],
-        ["pa", String(videoElement.paused ? 1 : 0)],
-        ["en", String(videoElement.ended ? 1 : 0)],
-        ["li", String(instance.isLive() ? 1 : 0)],
-        ["wba", String(instance.getWantedBufferAhead())],
-        ["st", `"${instance.getPlayerState()}"`],
-      ];
-
-      const valuesLine2 : Array<[string, string]> = [];
-      const ks = instance.getKeySystemConfiguration();
-      if (ks !== null) {
-        valuesLine2.push(["ks", ks.keySystem]);
-      }
-      const mbb = instance.getMaxBufferBehind();
-      if (mbb !== Infinity) {
-        valuesLine2.push(["mbb", String(mbb)]);
-      }
-      const mba = instance.getMaxBufferAhead();
-      if (mba !== Infinity) {
-        valuesLine2.push(["mba", String(mba)]);
-      }
-      const mia = instance.getMinAudioBitrate();
-      if (mia !== 0) {
-        valuesLine2.push(["mia", String(mia)]);
-      }
-      const miv = instance.getMinVideoBitrate();
-      if (miv !== 0) {
-        valuesLine2.push(["miv", String(miv)]);
-      }
-      const maa = instance.getMaxAudioBitrate();
-      if (maa !== Infinity) {
-        valuesLine2.push(["maa", String(maa)]);
-      }
-      const mav = instance.getMaxVideoBitrate();
-      if (mav !== Infinity) {
-        valuesLine2.push(["mav", String(mav)]);
-      }
-      const fab = instance.getManualAudioBitrate();
-      if (fab >= 0) {
-        valuesLine2.push(["fab", String(fab)]);
-      }
-      const fvb = instance.getManualVideoBitrate();
-      if (fvb >= 0) {
-        valuesLine2.push(["fvb", String(fvb)]);
-      }
-      const mbs = instance.getMaxVideoBufferSize();
-      if (mbs !== Infinity) {
-        valuesLine2.push(["mbs", String(mbs)]);
-      }
-      const minPos = instance.getMinimumPosition();
-      if (minPos !== null) {
-        valuesLine1.push(["mip", minPos.toFixed(2)]);
-        valuesLine2.push(["dmi", (currentTime - minPos).toFixed(2)]);
-      }
-      const maxPos = instance.getMaximumPosition();
-      if (maxPos !== null) {
-        valuesLine1.push(["map", maxPos.toFixed(2)]);
-        valuesLine2.push(["dma", (maxPos - currentTime).toFixed(2)]);
-      }
-      const valuesLine3 : Array<[string, string]> = [];
-      const error = instance.getError();
-      if (error !== null) {
-        valuesLine3.push(["er", `"${String(error)}"`]);
-      }
-      generalInfoElt.innerHTML = "";
-      for (const valueSet of [valuesLine1, valuesLine2, valuesLine3]) {
-        if (valueSet.length > 0) {
-          const lineInfoElt = createElement("div");
-          for (const value of valueSet) {
-            lineInfoElt.appendChild(createMetricTitle(value[0]));
-            lineInfoElt.appendChild(createElement("span", {
-              textContent: value[1] + " ",
-            }));
-          }
-          generalInfoElt.appendChild(lineInfoElt);
-        }
-      }
-      if (isExtendedMode(parentElt)) {
-        const url = instance.getUrl();
-        if (url !== undefined) {
-          const reducedUrl = url.length > 100 ?
-            url.substring(0, 99) + "…" :
-            url;
-
-          generalInfoElt.appendChild(createCompositeElement("div", [
-            createMetricTitle("url"),
-            createElement("span", {
-              textContent: reducedUrl,
-            }),
-          ]));
-        }
-      }
-    }
-    if (isExtendedMode(parentElt)) {
-      const videoId = instance.getAvailableVideoTracks().map(({ id, active }) =>
-        active ? `*${id}` : id);
-      const audioId = instance.getAvailableAudioTracks().map(({ id, active }) =>
-        active ? `*${id}` : id);
-      const textId = instance.getAvailableTextTracks().map(({ id, active }) =>
-        active ? `*${id}` : id);
-      adaptationsElt.innerHTML = "";
-      if (videoId.length > 0) {
-        let textContent = `${videoId.length}:${videoId.join(" ")} `;
-        if (textContent.length > 100) {
-          textContent = textContent.substring(0, 98) + "… ";
-        }
-        const videoAdaps = createCompositeElement("div", [
-          createMetricTitle("vt"),
-          createElement("span", { textContent }),
-        ]);
-        adaptationsElt.appendChild(videoAdaps);
-      }
-      if (audioId.length > 0) {
-        let textContent = `${audioId.length}:${audioId.join(" ")} `;
-        if (textContent.length > 100) {
-          textContent = textContent.substring(0, 98) + "… ";
-        }
-        const audioAdaps = createCompositeElement("div", [
-          createMetricTitle("at"),
-          createElement("span", { textContent }),
-        ]);
-        adaptationsElt.appendChild(audioAdaps);
-      }
-      if (textId.length > 0) {
-        let textContent = `${textId.length}:${textId.join(" ")} `;
-        if (textContent.length > 100) {
-          textContent = textContent.substring(0, 98) + "… ";
-        }
-        const textAdaps = createCompositeElement("div", [
-          createMetricTitle("tt"),
-          createElement("span", { textContent }),
-        ]);
-        adaptationsElt.appendChild(textAdaps);
-      }
-      const adaptations = instance.getCurrentAdaptations();
-      const videoBitratesStr = adaptations?.video?.representations.map((r) => {
-        return String(r.bitrate) +
-               (r.isSupported ? "" : " U!") +
-               (r.decipherable !== false ? "" : " E!");
-      }) ?? [];
-      const audioBitratesStr = adaptations?.video?.representations.map((r) => {
-        return String(r.bitrate) +
-               (r.isSupported ? "" : " U!") +
-               (r.decipherable !== false ? "" : " E!");
-      }) ?? [];
-      representationsElt.innerHTML = "";
-      if (videoBitratesStr.length > 0) {
-        representationsElt.appendChild(createMetricTitle("vb"));
-        representationsElt.appendChild(createElement("span", {
-          textContent: videoBitratesStr.join(" ") + " ",
-        }));
-      }
-      if (audioBitratesStr.length > 0) {
-        representationsElt.appendChild(createMetricTitle("ab"));
-        representationsElt.appendChild(createElement("span", {
-          textContent: audioBitratesStr.join(" ") + " ",
-        }));
-      }
-    } else {
-      adaptationsElt.innerHTML = "";
-      representationsElt.innerHTML = "";
-    }
-  }
-}

package/src/core/api/debug/modules/segment_buffer_content.ts

@@ -1,155 +0,0 @@
-import {
-  IAdaptation,
-  IPeriod,
-  IRepresentation,
-} from "../../../../public_types";
-import isNullOrUndefined from "../../../../utils/is_null_or_undefined";
-import { CancellationSignal } from "../../../../utils/task_canceller";
-import { IBufferType } from "../../../segment_buffers";
-import RxPlayer from "../../public_api";
-import SegmentBufferGraph from "../buffer_graph";
-import { DEFAULT_REFRESH_INTERVAL } from "../constants";
-import {
-  createElement,
-  createGraphCanvas,
-  createMetricTitle,
-  isExtendedMode,
-} from "../utils";
-
-export default function createSegmentBufferGraph(
-  instance : RxPlayer,
-  bufferType : IBufferType,
-  title : string,
-  parentElt : HTMLElement,
-  cancelSignal : CancellationSignal
-) : HTMLElement {
-  const bufferGraphWrapper = createElement("div");
-  const bufferTitle = createMetricTitle(title);
-  const canvasElt = createGraphCanvas();
-  const currentRangeRepInfoElt = createElement("div");
-  const loadingRangeRepInfoElt = createElement("div");
-  const bufferGraph = new SegmentBufferGraph(canvasElt);
-  const intervalId = setInterval(update, DEFAULT_REFRESH_INTERVAL);
-  cancelSignal.register(() => {
-    clearInterval(intervalId);
-  });
-  bufferGraphWrapper.appendChild(bufferTitle);
-  bufferGraphWrapper.appendChild(canvasElt);
-  bufferGraphWrapper.appendChild(currentRangeRepInfoElt);
-  bufferGraphWrapper.appendChild(loadingRangeRepInfoElt);
-  bufferGraphWrapper.style.padding = "5px 0px";
-  update();
-  return bufferGraphWrapper;
-
-  function update() {
-    if (instance.getVideoElement() === null) {
-      // disposed player. Clean-up everything
-      bufferGraphWrapper.style.display = "none";
-      bufferGraphWrapper.innerHTML = "";
-      clearInterval(intervalId);
-      return;
-    }
-    const showAllInfo = isExtendedMode(parentElt);
-    const inventory = instance.__priv_getSegmentBufferContent(bufferType);
-    if (inventory === null) {
-      bufferGraphWrapper.style.display = "none";
-      currentRangeRepInfoElt.innerHTML = "";
-      loadingRangeRepInfoElt.innerHTML = "";
-    } else {
-      bufferGraphWrapper.style.display = "block";
-      const currentTime = instance.getPosition();
-      const width = Math.min(parentElt.clientWidth - 150, 600);
-      bufferGraph.update({
-        currentTime,
-        minimumPosition: instance.getMinimumPosition() ?? undefined,
-        maximumPosition: instance.getMaximumPosition() ?? undefined,
-        inventory,
-        width,
-        height: 10,
-      });
-
-      if (!showAllInfo) {
-        currentRangeRepInfoElt.innerHTML = "";
-        loadingRangeRepInfoElt.innerHTML = "";
-        return;
-      }
-
-      currentRangeRepInfoElt.innerHTML = "";
-      for (let i = 0; i < inventory.length; i++) {
-        const rangeInfo = inventory[i];
-        const { bufferedStart, bufferedEnd, infos } = rangeInfo;
-        if (bufferedStart !== undefined && bufferedEnd !== undefined &&
-            currentTime >= bufferedStart && currentTime < bufferedEnd)
-        {
-          currentRangeRepInfoElt.appendChild(createMetricTitle("play"));
-          currentRangeRepInfoElt.appendChild(createElement("span", {
-            textContent: constructRepresentationInfo(infos),
-          }));
-          break;
-        }
-      }
-
-      loadingRangeRepInfoElt.innerHTML = "";
-      const rep = instance.getCurrentRepresentations()?.[bufferType];
-      const adap = instance.getCurrentAdaptations()?.[bufferType];
-      const manifest = instance.getManifest();
-      if (manifest !== null && !isNullOrUndefined(rep) && !isNullOrUndefined(adap)) {
-        const period = manifest.getPeriodForTime(currentTime);
-        if (period !== undefined) {
-          loadingRangeRepInfoElt.appendChild(createMetricTitle("load"));
-          loadingRangeRepInfoElt.appendChild(createElement("span", {
-            textContent: constructRepresentationInfo({
-              period,
-              adaptation: adap,
-              representation: rep,
-            }),
-          }));
-        }
-      }
-    }
-  }
-}
-
-function constructRepresentationInfo(
-  content : {
-    period : IPeriod;
-    adaptation : IAdaptation;
-    representation : IRepresentation;
-  }
-) : string {
-  const period = content.period;
-  const { language,
-          isAudioDescription,
-          isClosedCaption,
-          isTrickModeTrack,
-          isSignInterpreted,
-          type: bufferType } = content.adaptation;
-  const { id, height, width, bitrate, codec } = content.representation;
-  let representationInfo = `"${id}" `;
-  if (height !== undefined && width !== undefined) {
-    representationInfo += `${width}x${height} `;
-  }
-  if (bitrate !== undefined) {
-    representationInfo += `(${(bitrate / 1000).toFixed(0)}kbps) `;
-  }
-  if (codec !== undefined) {
-    representationInfo += `c:"${codec}" `;
-  }
-  if (language !== undefined) {
-    representationInfo += `l:"${language}" `;
-  }
-  if (bufferType === "video" && typeof isSignInterpreted === "boolean") {
-    representationInfo += `si:${isSignInterpreted ? 1 : 0} `;
-  }
-  if (bufferType === "video" && typeof isTrickModeTrack === "boolean") {
-    representationInfo += `tm:${isTrickModeTrack ? 1 : 0} `;
-  }
-  if (bufferType === "audio" && typeof isAudioDescription === "boolean") {
-    representationInfo += `ad:${isAudioDescription ? 1 : 0} `;
-  }
-  if (bufferType === "text" && typeof isClosedCaption === "boolean") {
-    representationInfo += `cc:${isClosedCaption ? 1 : 0} `;
-  }
-  representationInfo += `p:${period.start}-${period.end ?? "?"}`;
-  return representationInfo;
-}

package/src/core/api/debug/modules/segment_buffer_size.ts

@@ -1,48 +0,0 @@
-import { CancellationSignal } from "../../../../utils/task_canceller";
-import RxPlayer from "../../public_api";
-import BufferSizeGraph from "../buffer_size_graph";
-import { DEFAULT_REFRESH_INTERVAL } from "../constants";
-import {
-  createElement,
-  createGraphCanvas,
-  createMetricTitle,
-} from "../utils";
-
-export default function createSegmentBufferSizeGraph(
-  instance : RxPlayer,
-  parentElt : HTMLElement,
-  cancelSignal : CancellationSignal
-) : HTMLElement {
-  const bufferSizeGraphWrapperElt = createElement("div");
-  const bufferSizeTitle = createMetricTitle("bgap");
-  const canvasElt = createGraphCanvas();
-
-  const bufferSizeGraph = new BufferSizeGraph(canvasElt);
-  const intervalId = setInterval(addBufferSize, DEFAULT_REFRESH_INTERVAL);
-  cancelSignal.register(() => {
-    clearInterval(intervalId);
-  });
-  bufferSizeGraphWrapperElt.appendChild(bufferSizeTitle);
-  bufferSizeGraphWrapperElt.appendChild(canvasElt);
-  bufferSizeGraphWrapperElt.style.padding = "7px 0px";
-  addBufferSize();
-  return bufferSizeGraphWrapperElt;
-
-  function addBufferSize() {
-    if (instance.getVideoElement() === null) {
-      // disposed player. Clean-up everything
-      bufferSizeGraphWrapperElt.innerHTML = "";
-      clearInterval(intervalId);
-      return;
-    }
-    const bufferGap = instance.getVideoBufferGap();
-    if (bufferGap === Infinity) {
-      bufferSizeGraph.pushBufferSize(0);
-    } else {
-      bufferSizeGraph.pushBufferSize(bufferGap);
-    }
-    const width = Math.min(parentElt.clientWidth - 150, 600);
-    bufferSizeGraph.reRender(width, 10);
-  }
-}
-

package/src/core/api/debug/render.ts

@@ -1,40 +0,0 @@
-import { CancellationSignal } from "../../../utils/task_canceller";
-import RxPlayer from "../public_api";
-import constructDebugGeneralInfo from "./modules/general_info";
-import createSegmentBufferGraph from "./modules/segment_buffer_content";
-import createSegmentBufferSizeGraph from "./modules/segment_buffer_size";
-import { createCompositeElement, createElement } from "./utils";
-
-export default function renderDebugElement(
-  parentElt : HTMLElement,
-  instance : RxPlayer,
-  cancelSignal : CancellationSignal
-) : void {
-  const debugElementTitleElt = createElement("div", {
-    textContent: "RxPlayer Debug Information",
-  });
-  debugElementTitleElt.style.fontWeight = "bold";
-  debugElementTitleElt.style.borderBottom = "1px solid white";
-  debugElementTitleElt.style.marginBottom = "5px";
-  debugElementTitleElt.style.fontStyle = "italic";
-
-  const debugWrapperElt = createCompositeElement("div", [
-    debugElementTitleElt,
-    constructDebugGeneralInfo(instance, parentElt, cancelSignal),
-    createSegmentBufferGraph(instance, "video", "vbuf", parentElt, cancelSignal),
-    createSegmentBufferGraph(instance, "audio", "abuf", parentElt, cancelSignal),
-    createSegmentBufferGraph(instance, "text", "tbuf", parentElt, cancelSignal),
-    createSegmentBufferSizeGraph(instance, parentElt, cancelSignal),
-  ]);
-  debugWrapperElt.style.backgroundColor = "#00000099";
-  debugWrapperElt.style.padding = "7px";
-  debugWrapperElt.style.fontSize = "13px";
-  debugWrapperElt.style.fontFamily = "mono, monospace";
-  debugWrapperElt.style.color = "white";
-  debugWrapperElt.style.display = "inline-block";
-  debugWrapperElt.style.bottom = "0px";
-  parentElt.appendChild(debugWrapperElt);
-  cancelSignal.register(() => {
-    parentElt.removeChild(debugWrapperElt);
-  });
-}

package/src/core/api/debug/utils.ts

@@ -1,103 +0,0 @@
-/**
- * Create an HTML element.
- * @param {string} elementName - The element's name, like `"div"` for example.
- * @param {Object} [options={}] - Optional attributes for the element.
- * @param {string} [options.textContent] - Inner text for that element.
- * @param {string} [options.className] - Value for a `class` attribute
- * associated to this element.
- * @param {string} [options.href] - Value for a `href` attribute
- * associated to this element.
- * @returns {HTMLElement}
- */
-export function createElement(
-  elementName : "input",
-  opts? : CreateElementOptions | undefined
-) : HTMLInputElement;
-export function createElement(
-  elementName : "button",
-  opts? : CreateElementOptions | undefined
-) : HTMLButtonElement;
-export function createElement(
-  elementName : "a",
-  opts? : CreateElementOptions | undefined
-) : HTMLLinkElement;
-export function createElement(
-  elementName : "canvas",
-  opts? : CreateElementOptions | undefined
-) : HTMLCanvasElement;
-export function createElement(
-  elementName : string,
-  opts? : CreateElementOptions | undefined
-) : HTMLElement;
-export function createElement(
-  elementName : string,
-  {
-    textContent,
-    className,
-  } : CreateElementOptions | undefined = {}
-) : HTMLElement {
-  const elt = document.createElement(elementName);
-  if (className !== undefined) {
-    elt.className = className;
-  }
-  if (textContent !== undefined) {
-    elt.textContent = textContent;
-  }
-  return elt;
-}
-
-interface CreateElementOptions {
-  textContent? : string | undefined;
-  className? : string | undefined;
-}
-
-/**
- * Create an HTML element which may contain mutiple HTML sub-elements.
- * @param {string} rootElementName - The element's name, like `"div"` for
- * example.
- * @param {Array.<string|HTMLElement>} parts - The HTML sub-elements, in order.
- * Those can also just be strings, in which case only text nodes (and no actual
- * HTMLElement) will be added at this place.
- * @param {Object} [options={}] - Optional attributes for the element.
- * @param {string} [options.className] - Value for a `class` attribute
- * associated to this element.
- * @returns {HTMLElement}
- */
-export function createCompositeElement(
-  rootElementName : string,
-  parts : Array<HTMLElement | string>,
-  { className } : { className? : string } | undefined = {}
-) : HTMLElement {
-  const elt = document.createElement(rootElementName);
-  if (className !== undefined) {
-    elt.className = className;
-  }
-  for (const subElt of parts) {
-    if (typeof subElt === "string") {
-      elt.appendChild(document.createTextNode(subElt));
-    } else {
-      elt.appendChild(subElt);
-    }
-  }
-  return elt;
-}
-
-export function isExtendedMode(parentElt : HTMLElement) : boolean {
-  return parentElt.clientHeight > 400;
-}
-
-export function createMetricTitle(title : string) : HTMLElement {
-  const elt = createElement("span", {
-    textContent: title + "/",
-  });
-  elt.style.fontWeight = "bold";
-  return elt;
-}
-
-export function createGraphCanvas() : HTMLCanvasElement {
-  const canvasElt = createElement("canvas");
-  canvasElt.style.border = "1px solid white";
-  canvasElt.style.height = "15px";
-  canvasElt.style.marginLeft = "2px";
-  return canvasElt;
-}

package/src/core/api/index.ts

@@ -1,27 +0,0 @@
-/**
- * Copyright 2015 CANAL+ Group
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import PlaybackObserver from "./playback_observer";
-import Player from "./public_api";
-export { PlaybackObserver };
-export {
-  IPlaybackObservation,
-  IPlaybackObserverEventType,
-  IReadOnlyPlaybackObserver,
-  IFreezingStatus,
-  IRebufferingStatus,
-} from "./playback_observer";
-export default Player;