bigscreen-player 7.1.5 → 7.2.0

package/dist/esm/{main-ef5f7b81.js → main-70e914fd.js}

@@ -1,16 +1,19 @@
+/**
+ * Provides an enumeration of possible media states.
+ */
 const MediaState = {
-  /** Media is stopped and is not attempting to start. */
-  STOPPED: 0,
-  /** Media is paused. */
-  PAUSED: 1,
-  /** Media is playing successfully. */
-  PLAYING: 2,
-  /** Media is waiting for data (buffering). */
-  WAITING: 4,
-  /** Media has ended. */
-  ENDED: 5,
-  /** Media has thrown a fatal error. */
-  FATAL_ERROR: 6,
+    /** Media is stopped and is not attempting to start. */
+    STOPPED: 0,
+    /** Media is paused. */
+    PAUSED: 1,
+    /** Media is playing successfully. */
+    PLAYING: 2,
+    /** Media is waiting for data (buffering). */
+    WAITING: 4,
+    /** Media has ended. */
+    ENDED: 5,
+    /** Media has thrown a fatal error. */
+    FATAL_ERROR: 6,
 };
 
 /**
@@ -19,12 +22,12 @@ const MediaState = {
  * @enum {string}
  */
 const WindowTypes = {
-  /** Media with a duration */
-  STATIC: "staticWindow",
-  /** Media with a start time but without a duration until an indeterminate time in the future */
-  GROWING: "growingWindow",
-  /** Media with a rewind window that progresses through a media timeline */
-  SLIDING: "slidingWindow",
+    /** Media with a duration */
+    STATIC: "staticWindow",
+    /** Media with a start time but without a duration until an indeterminate time in the future */
+    GROWING: "growingWindow",
+    /** Media with a rewind window that progresses through a media timeline */
+    SLIDING: "slidingWindow",
 };
 
 function PluginData(args) {
@@ -224,9 +227,9 @@ let plugins = [];
 function callOnAllPlugins(funcKey, evt) {
   const clonedEvent = Utils.deepClone(evt);
 
-  for (const i in plugins) {
-    if (plugins[i][funcKey]) {
-      plugins[i][funcKey](clonedEvent);
+  for (const plugin in plugins) {
+    if (plugins[plugin][funcKey]) {
+      plugins[plugin][funcKey](clonedEvent);
     }
   }
 }
@@ -240,9 +243,9 @@ var Plugins = {
     if (!plugin && plugins.length > 0) {
       plugins = [];
     } else {
-      for (let i = plugins.length - 1; i >= 0; i--) {
-        if (plugins[i] === plugin) {
-          plugins.splice(i, 1);
+      for (let index = plugins.length - 1; index >= 0; index--) {
+        if (plugins[index] === plugin) {
+          plugins.splice(index, 1);
         }
       }
     }
@@ -266,25 +269,26 @@ var Plugins = {
     onSubtitlesTransformError: (evt) => callOnAllPlugins("onSubtitlesTransformError", evt),
     onSubtitlesRenderError: (evt) => callOnAllPlugins("onSubtitlesRenderError", evt),
     onSubtitlesDynamicLoadError: (evt) => callOnAllPlugins("onSubtitlesDynamicLoadError", evt),
+    onQuotaExceeded: (evt) => callOnAllPlugins("onQuotaExceeded", evt),
   },
 };
 
 const TransferFormat = {
-  DASH: "dash",
-  HLS: "hls",
+    DASH: "dash",
+    HLS: "hls",
 };
 
 const LiveSupport = {
-  NONE: "none",
-  PLAYABLE: "playable",
-  RESTARTABLE: "restartable",
-  SEEKABLE: "seekable",
+    NONE: "none",
+    PLAYABLE: "playable",
+    RESTARTABLE: "restartable",
+    SEEKABLE: "seekable",
 };
 
 const PlaybackStrategy = {
-  MSE: "msestrategy",
-  NATIVE: "nativestrategy",
-  BASIC: "basicstrategy",
+    MSE: "msestrategy",
+    NATIVE: "nativestrategy",
+    BASIC: "basicstrategy",
 };
 
 function AllowedMediaTransitions(mediaplayer) {
@@ -334,543 +338,674 @@ function AllowedMediaTransitions(mediaplayer) {
   }
 }
 
-const updateCallbacks = [];
-let chronicle = [];
-let firstTimeElement, compressTime;
-
-const TYPES = {
-  APICALL: "apicall",
-  ERROR: "error",
-  EVENT: "event",
-  INFO: "info",
-  KEYVALUE: "keyvalue",
-  TIME: "time",
-  WARNING: "warning",
-};
-
-function init$2() {
-  clear();
-}
-
-function clear() {
-  firstTimeElement = true;
-  compressTime = false;
-  chronicle = [];
-}
-
-function registerForUpdates(callback) {
-  updateCallbacks.push(callback);
-}
-
-function unregisterForUpdates(callback) {
-  const indexOf = updateCallbacks.indexOf(callback);
-
-  if (indexOf !== -1) {
-    updateCallbacks.splice(indexOf, 1);
-  }
-}
-
-function info(message) {
-  pushToChronicle({ type: TYPES.INFO, message });
-}
-
-/** @param {Error} err */
-function error(err) {
-  pushToChronicle({ type: TYPES.ERROR, error: err });
-}
-
-function warn(warning) {
-  pushToChronicle({ type: TYPES.WARNING, warning });
-}
-
-function event(event) {
-  pushToChronicle({ type: TYPES.EVENT, event });
-}
-
-function apicall(callType) {
-  pushToChronicle({ type: TYPES.APICALL, calltype: callType });
-}
-
-function time(time) {
-  if (firstTimeElement) {
-    pushToChronicle({ type: TYPES.TIME, currentTime: time });
-    firstTimeElement = false;
-  } else if (!compressTime) {
-    pushToChronicle({ type: TYPES.TIME, currentTime: time });
-    compressTime = true;
-  } else {
-    const lastElement = chronicle.pop();
-
-    lastElement.currentTime = time;
-    pushToChronicle(lastElement);
-  }
-}
-
-function keyValue(obj) {
-  pushToChronicle({ type: TYPES.KEYVALUE, keyvalue: obj });
-}
-
-function retrieve() {
-  return [...chronicle]
-}
-
-function timestamp(obj) {
-  obj.timestamp = Date.now();
-}
-
-function pushToChronicle(obj) {
-  if (obj.type !== TYPES.TIME) {
-    firstTimeElement = true;
-    compressTime = false;
-  }
-
-  timestamp(obj);
-  chronicle.push(obj);
-  updates();
-}
-
-function updates() {
-  updateCallbacks.forEach((callback) => callback(retrieve()));
-}
-
-function tearDown$1() {
-  clear();
+function getValues(obj) {
+    const values = [];
+    for (const key in obj) {
+        if (!Object.prototype.hasOwnProperty.call(obj, key)) {
+            continue;
+        }
+        values.push(obj[key]);
+    }
+    return values;
 }
 
-var Chronicle = {
-  TYPES,
-  init: init$2,
-  clear,
-  tearDown: tearDown$1,
-  apicall,
-  error,
-  event,
-  info,
-  keyValue,
-  time,
-  warn,
-  verbose: info,
-  retrieve,
-  registerForUpdates,
-  unregisterForUpdates,
-};
-
-let view;
-
-function init$1(newView) {
-  view = newView;
+var EntryCategory;
+(function (EntryCategory) {
+    EntryCategory["METRIC"] = "metric";
+    EntryCategory["MESSAGE"] = "message";
+    EntryCategory["TRACE"] = "trace";
+})(EntryCategory || (EntryCategory = {}));
+const isMessage = (entry) => entry.category === EntryCategory.MESSAGE;
+const isMetric = (entry) => entry.category === EntryCategory.METRIC;
+const isTrace = (entry) => entry.category === EntryCategory.TRACE;
+function isValid(data) {
+    const type = typeof data;
+    return (type === "boolean" ||
+        type === "number" ||
+        type === "string" ||
+        (type === "object" && Array.isArray(data) && data.every((element) => isValid(element))));
 }
-
-function update(logs) {
-  view.render({ static: parseStaticFields(logs), dynamic: parseDynamicFields(logs) });
+function isEqual(left, right) {
+    if (Array.isArray(left) && Array.isArray(right)) {
+        return left.length === right.length && left.every((element, index) => isEqual(element, right[index]));
+    }
+    return left === right;
 }
-
-function isStaticLog(log) {
-  return log.type === Chronicle.TYPES.KEYVALUE
+function sortEntries(someEntry, otherEntry) {
+    return someEntry.sessionTime === otherEntry.sessionTime
+        ? someEntry.currentElementTime - otherEntry.currentElementTime
+        : someEntry.sessionTime - otherEntry.sessionTime;
 }
-
-function parseStaticFields(logs) {
-  const latestStaticFields = [];
-  const staticFields = logs.filter((log) => isStaticLog(log));
-
-  const uniqueKeys = findUniqueKeys(staticFields);
-  uniqueKeys.forEach((key) => {
-    const matchingStaticLogs = staticFields.filter((log) => log.keyvalue.key === key);
-
-    latestStaticFields.push(matchingStaticLogs.pop());
-  });
-
-  return latestStaticFields.map((field) => ({
-    key: sanitiseKeyString(field.keyvalue.key),
-    value: sanitiseValueString(field.keyvalue.value),
-  }))
+function concatArrays(someArray, otherArray) {
+    return [...someArray, ...otherArray];
 }
-
-function parseByType(log) {
-  const dateString = new Date(log.timestamp).toISOString();
-
-  switch (log.type) {
-    case Chronicle.TYPES.INFO: {
-      return `${dateString} - Info: ${log.message}`
-    }
-    case Chronicle.TYPES.TIME: {
-      return `${dateString} - Video time: ${parseFloat(log.currentTime).toFixed(2)}`
+const METRIC_ENTRY_THRESHOLD = 100;
+class Chronicle {
+    constructor() {
+        this.sessionStartTime = Date.now();
+        this.currentElementTime = 0;
+        this.messages = [];
+        this.metrics = {};
+        this.traces = [];
+        this.listeners = { update: [], timeupdate: [] };
+    }
+    triggerUpdate(entry) {
+        this.listeners.update.forEach((callback) => callback(entry));
+    }
+    triggerTimeUpdate(seconds) {
+        this.listeners.timeupdate.forEach((callback) => callback(seconds));
+    }
+    timestamp(entry) {
+        return Object.assign(Object.assign({}, entry), { currentElementTime: this.currentElementTime, sessionTime: this.getSessionTime() });
+    }
+    pushMessage(message) {
+        const entry = this.timestamp(message);
+        this.messages.push(entry);
+        this.triggerUpdate(entry);
+    }
+    getCurrentElementTime() {
+        return this.currentElementTime;
+    }
+    setCurrentElementTime(seconds) {
+        this.currentElementTime = seconds;
+        this.triggerTimeUpdate(seconds);
+    }
+    getSessionTime() {
+        return Date.now() - this.sessionStartTime;
+    }
+    on(type, listener) {
+        this.listeners[type].push(listener);
+    }
+    off(type, listener) {
+        const index = this.listeners[type].indexOf(listener);
+        if (index === -1) {
+            return;
+        }
+        this.listeners[type].splice(index, 1);
     }
-    case Chronicle.TYPES.EVENT: {
-      return `${dateString} - Event: ${convertToReadableEvent(log.event.state)}`
+    retrieve() {
+        const metrics = getValues(this.metrics).reduce(concatArrays, []);
+        return [...this.traces, ...metrics, ...this.messages].sort(sortEntries);
     }
-    case Chronicle.TYPES.ERROR: {
-      return `${dateString} - ${log.error.name ?? "Error"}: ${log.error.message}`
+    size() {
+        return (this.messages.length +
+            this.traces.length +
+            getValues(this.metrics).reduce((sumSoFar, metricsForKey) => sumSoFar + metricsForKey.length, 0));
     }
-    case Chronicle.TYPES.APICALL: {
-      return `${dateString} - Api call: ${log.calltype}`
+    appendMetric(kind, data) {
+        if (!isValid(data)) {
+            throw new TypeError(`A metric value can only be a primitive type, or an array of any depth containing primitive types. Got ${typeof data}`);
+        }
+        const latest = this.getLatestMetric(kind);
+        if (latest && isEqual(latest.data, data)) {
+            return;
+        }
+        if (this.metrics[kind] == null) {
+            this.metrics[kind] = [];
+        }
+        const metricsForKey = this.metrics[kind];
+        if (metricsForKey.length + 1 === METRIC_ENTRY_THRESHOLD) {
+            this.trace("error", new Error(`Metric ${kind} exceeded ${METRIC_ENTRY_THRESHOLD}. Consider a more selective sample, or not storing history.`));
+        }
+        const metric = this.timestamp({ kind, data, category: EntryCategory.METRIC });
+        metricsForKey.push(metric);
+        this.triggerUpdate(metric);
+    }
+    setMetric(kind, data) {
+        this.metrics[kind] = [];
+        this.appendMetric(kind, data);
+    }
+    getLatestMetric(kind) {
+        var _a;
+        if (!((_a = this.metrics[kind]) === null || _a === void 0 ? void 0 : _a.length)) {
+            return null;
+        }
+        const metricsForKey = this.metrics[kind];
+        return metricsForKey[metricsForKey.length - 1];
     }
-    case Chronicle.TYPES.WARNING: {
-      return `${dateString} - Warning: ${log.warning}`
+    debug(message) {
+        this.pushMessage({ category: EntryCategory.MESSAGE, kind: "debug", data: message });
     }
-    default: {
-      return `${dateString} - Unknown log format`
+    info(message) {
+        this.pushMessage({ category: EntryCategory.MESSAGE, kind: "info", data: message });
     }
-  }
-}
-
-function parseDynamicFields(logs) {
-  return logs.filter((log) => !isStaticLog(log)).map((log) => parseByType(log))
-}
-
-function findUniqueKeys(logs) {
-  const uniqueKeys = [];
-
-  logs.forEach((log) => {
-    if (uniqueKeys.indexOf(log.keyvalue.key) === -1) {
-      uniqueKeys.push(log.keyvalue.key);
+    trace(kind, data) {
+        const entry = this.timestamp({ kind, data, category: EntryCategory.TRACE });
+        this.traces.push(entry);
+        this.triggerUpdate(entry);
     }
-  });
-
-  return uniqueKeys
-}
-
-function sanitiseKeyString(key) {
-  return key.replace(/([A-Z])/g, " $1").toLowerCase()
-}
-
-function sanitiseValueString(value) {
-  if (value instanceof Date) {
-    const hours = zeroPadTimeUnits(value.getHours()) + value.getHours();
-    const mins = zeroPadTimeUnits(value.getMinutes()) + value.getMinutes();
-    const secs = zeroPadTimeUnits(value.getSeconds()) + value.getSeconds();
-
-    return `${hours}:${mins}:${secs}`
-  }
-
-  return value
-}
-
-function zeroPadTimeUnits(unit) {
-  return unit < 10 ? "0" : ""
-}
-
-function convertToReadableEvent(type) {
-  for (const key in MediaState) {
-    if (MediaState[key] === type) {
-      return key
+    warn(message) {
+        this.pushMessage({ category: EntryCategory.MESSAGE, kind: "warning", data: message });
     }
-  }
-
-  return type
 }
 
-var DebugPresenter = {
-  init: init$1,
-  update,
-};
-
 function addClass(el, className) {
-  if (el.classList) {
-    el.classList.add(className);
-  } else {
-    el.className += " " + className;
-  }
+    if (el.classList) {
+        el.classList.add(className);
+    }
+    else {
+        el.className += ` ${className}`;
+    }
 }
-
 function removeClass(el, className) {
-  if (el.classList) {
-    el.classList.remove(className);
-  } else {
-    el.className = el.className.replace(new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " ");
-  }
+    if (el.classList) {
+        el.classList.remove(className);
+    }
+    else {
+        el.className = el.className.replace(new RegExp(`(^|\\b)${className.split(" ").join("|")}(\\b|$)`, "gi"), " ");
+    }
 }
-
 function hasClass(el, className) {
-  if (el.classList) {
-    return el.classList.contains(className)
-  } else {
-    return new RegExp("(^| )" + className + "( |$)", "gi").test(el.className)
-  }
+    return el.classList ? el.classList.contains(className) : new RegExp(`(^| )${className}( |$)`, "gi").test(el.className);
 }
-
-function isRGBATuple(rgbaString) {
-  return new RegExp("^#([A-Fa-f0-9]{8})$").test(rgbaString)
+function isRGBA(rgbaString) {
+    return new RegExp("^#([A-Fa-f0-9]{8})$").test(rgbaString);
 }
-
 /**
  *  Checks that the string is an RGBA tuple and returns a RGB Tripple.
  *  A string that isn't an RGBA tuple will be returned to the caller.
- * @param {String} rgbaString
  */
 function rgbaToRGB(rgbaString) {
-  if (isRGBATuple(rgbaString)) {
-    rgbaString = rgbaString.slice(0, 7);
-  }
-  return rgbaString
+    return isRGBA(rgbaString) ? rgbaString.slice(0, 7) : rgbaString;
 }
-
 /**
  * Safely removes an element from the DOM, simply doing
  * nothing if the node is detached (Has no parent).
- * @param {Element} el The Element to remove
+ * @param el The Element to remove
  */
 function safeRemoveElement(el) {
-  if (el.parentNode) {
-    el.parentNode.removeChild(el);
-  }
+    if (el && el.parentNode) {
+        el.parentNode.removeChild(el);
+    }
 }
-
 var DOMHelpers = {
-  addClass: addClass,
-  removeClass: removeClass,
-  hasClass: hasClass,
-  rgbaToRGB: rgbaToRGB,
-  isRGBA: isRGBATuple,
-  safeRemoveElement: safeRemoveElement,
+    addClass,
+    removeClass,
+    hasClass,
+    rgbaToRGB,
+    isRGBA,
+    safeRemoveElement,
 };
 
-let appElement, logBox, logContainer, staticContainer, staticBox;
-
+let appElement;
+let logBox;
+let logContainer;
+let staticContainer;
+let staticBox;
 function init() {
-  logBox = document.createElement("div");
-  logContainer = document.createElement("span");
-  staticBox = document.createElement("div");
-  staticContainer = document.createElement("span");
-
-  if (appElement === undefined) {
-    appElement = document.body;
-  }
-
-  logBox.id = "logBox";
-  logBox.style.position = "absolute";
-  logBox.style.width = "63%";
-  logBox.style.left = "5%";
-  logBox.style.top = "15%";
-  logBox.style.bottom = "25%";
-  logBox.style.backgroundColor = "#1D1D1D";
-  logBox.style.opacity = 0.9;
-  logBox.style.overflow = "hidden";
-
-  staticBox.id = "staticBox";
-  staticBox.style.position = "absolute";
-  staticBox.style.width = "30%";
-  staticBox.style.right = "1%";
-  staticBox.style.top = "15%";
-  staticBox.style.bottom = "25%";
-  staticBox.style.backgroundColor = "#1D1D1D";
-  staticBox.style.opacity = 0.9;
-  staticBox.style.overflow = "hidden";
-
-  logContainer.id = "logContainer";
-  logContainer.style.color = "#ffffff";
-  logContainer.style.fontSize = "11pt";
-  logContainer.style.position = "absolute";
-  logContainer.style.bottom = "1%";
-  logContainer.style.left = "1%";
-  logContainer.style.wordWrap = "break-word";
-  logContainer.style.whiteSpace = "pre-line";
-
-  staticContainer.id = "staticContainer";
-  staticContainer.style.color = "#ffffff";
-  staticContainer.style.fontSize = "11pt";
-  staticContainer.style.wordWrap = "break-word";
-  staticContainer.style.left = "1%";
-  staticContainer.style.whiteSpace = "pre-line";
-
-  logBox.appendChild(logContainer);
-  staticBox.appendChild(staticContainer);
-  appElement.appendChild(logBox);
-  appElement.appendChild(staticBox);
+    logBox = document.createElement("div");
+    logContainer = document.createElement("span");
+    staticBox = document.createElement("div");
+    staticContainer = document.createElement("span");
+    if (appElement === undefined) {
+        appElement = document.body;
+    }
+    logBox.id = "logBox";
+    logBox.style.position = "absolute";
+    logBox.style.width = "63%";
+    logBox.style.left = "5%";
+    logBox.style.top = "15%";
+    logBox.style.bottom = "25%";
+    logBox.style.backgroundColor = "#1D1D1D";
+    logBox.style.opacity = "0.9";
+    logBox.style.overflow = "hidden";
+    staticBox.id = "staticBox";
+    staticBox.style.position = "absolute";
+    staticBox.style.width = "30%";
+    staticBox.style.right = "1%";
+    staticBox.style.top = "15%";
+    staticBox.style.bottom = "25%";
+    staticBox.style.backgroundColor = "#1D1D1D";
+    staticBox.style.opacity = "0.9";
+    staticBox.style.overflow = "hidden";
+    logContainer.id = "logContainer";
+    logContainer.style.color = "#ffffff";
+    logContainer.style.fontSize = "11pt";
+    logContainer.style.position = "absolute";
+    logContainer.style.bottom = "1%";
+    logContainer.style.left = "1%";
+    logContainer.style.wordWrap = "break-word";
+    logContainer.style.whiteSpace = "pre-line";
+    staticContainer.id = "staticContainer";
+    staticContainer.style.color = "#ffffff";
+    staticContainer.style.fontSize = "11pt";
+    staticContainer.style.wordWrap = "break-word";
+    staticContainer.style.left = "1%";
+    staticContainer.style.whiteSpace = "pre-line";
+    logBox.appendChild(logContainer);
+    staticBox.appendChild(staticContainer);
+    appElement.appendChild(logBox);
+    appElement.appendChild(staticBox);
 }
-
 function setRootElement(root) {
-  if (root) {
-    appElement = root;
-  }
+    if (root) {
+        appElement = root;
+    }
 }
-
-function render(logData) {
-  const LINES_TO_DISPLAY = 29;
-  let dynamicLogs = logData.dynamic;
-
-  if (dynamicLogs.length === 0) {
-    logContainer.textContent = "";
-  }
-
-  dynamicLogs = dynamicLogs.slice(-LINES_TO_DISPLAY);
-  logContainer.textContent = dynamicLogs.join("\n");
-
-  logData.static.forEach(updateStaticElements);
+function renderDynamicLogs(dynamic) {
+    if (logContainer)
+        logContainer.textContent = dynamic.join("\n");
 }
-
-function updateStaticElements(log) {
-  const existingElement = document.getElementById(log.key);
-  const text = log.key + ": " + log.value;
-
-  if (existingElement) {
-    if (text !== existingElement.textContent) {
-      existingElement.textContent = text;
-    }
-  } else {
-    createNewStaticElement(log.key, log.value);
-  }
+function renderStaticLogs(staticLogs) {
+    staticLogs.forEach((entry) => renderStaticLog(entry));
 }
-
-function createNewStaticElement(key, value) {
-  const staticLog = document.createElement("div");
-
-  staticLog.id = key;
-  staticLog.style.paddingBottom = "1%";
-  staticLog.style.borderBottom = "1px solid white";
-  staticLog.textContent = key + ": " + value;
-
-  staticContainer.appendChild(staticLog);
+function render({ dynamic: dynamicLogs, static: staticLogs }) {
+    renderDynamicLogs(dynamicLogs);
+    renderStaticLogs(staticLogs);
+}
+function renderStaticLog(entry) {
+    const { id, key, value } = entry;
+    const existingElement = document.querySelector(`#${id}`);
+    const text = `${key}: ${value}`;
+    if (existingElement == null) {
+        createNewStaticElement(entry);
+        return;
+    }
+    if (existingElement.textContent === text) {
+        return;
+    }
+    existingElement.textContent = text;
+}
+function createNewStaticElement({ id, key, value }) {
+    const staticLog = document.createElement("div");
+    staticLog.id = id;
+    staticLog.style.paddingBottom = "1%";
+    staticLog.style.borderBottom = "1px solid white";
+    staticLog.textContent = `${key}: ${value}`;
+    staticContainer === null || staticContainer === void 0 ? void 0 : staticContainer.appendChild(staticLog);
 }
-
 function tearDown() {
-  DOMHelpers.safeRemoveElement(logBox);
-  DOMHelpers.safeRemoveElement(staticBox);
-
-  appElement = undefined;
-  staticContainer = undefined;
-  logContainer = undefined;
-  logBox = undefined;
+    DOMHelpers.safeRemoveElement(logBox);
+    DOMHelpers.safeRemoveElement(staticBox);
+    appElement = undefined;
+    staticContainer = undefined;
+    logContainer = undefined;
+    logBox = undefined;
 }
-
 var DebugView = {
-  init: init,
-  setRootElement: setRootElement,
-  render: render,
-  tearDown: tearDown,
+    init,
+    setRootElement,
+    render,
+    tearDown,
 };
 
-function DebugTool() {
-  const presenter = DebugPresenter;
+const invertedMediaState = {
+    0: "STOPPED",
+    1: "PAUSED",
+    2: "PLAYING",
+    4: "WAITING",
+    5: "ENDED",
+    6: "FATAL_ERROR",
+};
+const DYNAMIC_ENTRY_LIMIT = 29;
+function zeroPadHMS(time) {
+    return `${time < 10 ? "0" : ""}${time}`;
+}
+function zeroPadMs(milliseconds) {
+    return `${milliseconds < 100 ? "0" : ""}${milliseconds < 10 ? "0" : ""}${milliseconds}`;
+}
+function formatDate(value) {
+    const hours = value.getUTCHours();
+    const mins = value.getUTCMinutes();
+    const secs = value.getUTCSeconds();
+    return `${zeroPadHMS(hours)}:${zeroPadHMS(mins)}:${zeroPadHMS(secs)}`;
+}
+class DebugViewController {
+    constructor() {
+        this.isVisible = false;
+        this.shouldRender = false;
+        this.filters = [];
+        this.dynamicEntries = [];
+        this.latestMetricByKey = {};
+    }
+    isMerged(metric) {
+        const { kind } = metric;
+        const mediaStateMetrics = ["ended", "paused", "ready-state", "seeking"];
+        return mediaStateMetrics.includes(kind);
+    }
+    mergeMediaState(entry) {
+        const prevData = this.latestMetricByKey["media-element-state"] == null
+            ? {}
+            : this.latestMetricByKey["media-element-state"].data;
+        const { kind, data } = entry;
+        return Object.assign(Object.assign({}, entry), { category: "union", kind: "media-element-state", data: Object.assign(Object.assign({}, prevData), { [kind]: data }) });
+    }
+    cacheEntry(entry) {
+        const { category } = entry;
+        switch (category) {
+            case EntryCategory.METRIC:
+                return this.cacheStaticEntry(this.isMerged(entry) ? this.mergeMediaState(entry) : entry);
+            case EntryCategory.MESSAGE:
+            case EntryCategory.TRACE:
+                this.cacheDynamicEntry(entry);
+                if (this.dynamicEntries.length >= DYNAMIC_ENTRY_LIMIT) {
+                    this.dynamicEntries = this.dynamicEntries.slice(-DYNAMIC_ENTRY_LIMIT);
+                }
+                break;
+        }
+    }
+    cacheStaticEntry(entry) {
+        var _a;
+        const latestSessionTimeSoFar = (_a = this.latestMetricByKey[entry.kind]) === null || _a === void 0 ? void 0 : _a.sessionTime;
+        if (typeof latestSessionTimeSoFar === "number" && latestSessionTimeSoFar > entry.sessionTime) {
+            return;
+        }
+        this.latestMetricByKey[entry.kind] = entry;
+    }
+    cacheDynamicEntry(entry) {
+        if (entry.category === "time") {
+            this.cacheTimestamp(entry);
+            return;
+        }
+        this.dynamicEntries.push(entry);
+    }
+    cacheTimestamp(entry) {
+        const lastDynamicEntry = this.dynamicEntries[this.dynamicEntries.length - 1];
+        if (lastDynamicEntry == null || lastDynamicEntry.category !== "time") {
+            this.dynamicEntries.push(entry);
+            return;
+        }
+        this.dynamicEntries[this.dynamicEntries.length - 1] = entry;
+    }
+    serialiseDynamicEntry(entry) {
+        let formattedData;
+        const { category } = entry;
+        switch (category) {
+            case EntryCategory.MESSAGE:
+                formattedData = this.serialiseMessage(entry);
+                break;
+            case "time":
+                formattedData = this.serialiseTime(entry);
+                break;
+            case EntryCategory.TRACE:
+                formattedData = this.serialiseTrace(entry);
+                break;
+        }
+        const sessionTime = new Date(entry.sessionTime);
+        const formatedSessionTime = `${formatDate(sessionTime)}.${zeroPadMs(sessionTime.getUTCMilliseconds())}`;
+        return `${formatedSessionTime} - ${formattedData}`;
+    }
+    serialiseMessage(message) {
+        const { kind, data } = message;
+        switch (kind) {
+            case "debug":
+                return `Debug: ${data}`;
+            case "info":
+                return `Info: ${data}`;
+            case "warning":
+                return `Warning: ${data}`;
+        }
+    }
+    serialiseTime(time) {
+        const { currentElementTime } = time;
+        return `Video time: ${currentElementTime.toFixed(2)}`;
+    }
+    serialiseTrace(trace) {
+        var _a;
+        const { currentElementTime, kind, data } = trace;
+        switch (kind) {
+            case "apicall": {
+                const { functionName, functionArgs } = data;
+                const argsPart = functionArgs.length === 0 ? "" : ` with args [${functionArgs.join(", ")}]`;
+                return `Called '${functionName}${argsPart}'`;
+            }
+            case "buffered-ranges": {
+                const buffered = data.buffered.map(([start, end]) => `${start.toFixed(2)} - ${end.toFixed(2)}`).join(", ");
+                return `Buffered ${data.kind}: [${buffered}] at current time ${currentElementTime.toFixed(2)}`;
+            }
+            case "error":
+                return `${(_a = data.name) !== null && _a !== void 0 ? _a : "Error"}: ${data.message}`;
+            case "event": {
+                const { eventType, eventTarget } = data;
+                return `Event: '${eventType}' from ${eventTarget}`;
+            }
+            case "gap": {
+                const { from, to } = data;
+                return `Gap from ${from} to ${to}`;
+            }
+            case "session-start":
+                return `Playback session started at ${new Date(data).toISOString().replace("T", " ")}`;
+            case "session-end":
+                return `Playback session ended at ${new Date(data).toISOString().replace("T", " ")}`;
+            case "quota-exceeded": {
+                const { bufferLevel, time } = data;
+                return `Quota exceeded with buffer level ${bufferLevel} at chunk start time ${time}`;
+            }
+            case "state-change":
+                return `Event: ${invertedMediaState[data]}`;
+        }
+    }
+    serialiseStaticEntry(entry) {
+        const { kind } = entry;
+        const parsedKey = kind.replace(/-/g, " ");
+        const parsedValue = this.serialiseMetric(entry);
+        return { id: kind, key: parsedKey, value: parsedValue };
+    }
+    serialiseMetric({ kind, data }) {
+        if (typeof data !== "object") {
+            return data;
+        }
+        if (kind === "media-element-state") {
+            const parts = [];
+            const isWaiting = typeof data["ready-state"] === "number" && data["ready-state"] <= 2;
+            if (!isWaiting && !data.paused && !data.seeking) {
+                parts.push("playing");
+            }
+            if (isWaiting) {
+                parts.push("waiting");
+            }
+            if (data.paused) {
+                parts.push("paused");
+            }
+            if (data.seeking) {
+                parts.push("seeking");
+            }
+            if (data.ended) {
+                parts.push("ended");
+            }
+            return parts.join(", ");
+        }
+        if (kind === "seekable-range") {
+            const [start, end] = data;
+            return `${formatDate(new Date(start))} - ${formatDate(new Date(end))}`;
+        }
+        if (kind === "representation-audio" || kind === "representation-video") {
+            const [qualityIndex, bitrate] = data;
+            return `${qualityIndex} (${bitrate} kbps)`;
+        }
+        return data.join(", ");
+    }
+    render() {
+        DebugView.render({
+            static: getValues(this.latestMetricByKey).map((entry) => this.serialiseStaticEntry(entry)),
+            dynamic: this.dynamicEntries.map((entry) => this.serialiseDynamicEntry(entry)),
+        });
+    }
+    setFilters(filters) {
+        this.filters = filters;
+    }
+    addTime({ currentElementTime, sessionTime }) {
+        this.cacheTimestamp({ currentElementTime, sessionTime, category: "time" });
+        this.shouldRender = true;
+    }
+    addEntries(entries) {
+        for (const entry of entries) {
+            if (!this.filters.every((filter) => filter(entry))) {
+                continue;
+            }
+            this.cacheEntry(entry);
+        }
+        this.shouldRender = true;
+    }
+    hideView() {
+        clearInterval(this.renderInterval);
+        DebugView.tearDown();
+        this.isVisible = false;
+    }
+    showView() {
+        DebugView.setRootElement(this.rootElement);
+        DebugView.init();
+        this.renderInterval = setInterval(() => {
+            if (this.shouldRender) {
+                this.render();
+                this.shouldRender = false;
+            }
+        }, 250);
+        this.isVisible = true;
+    }
+    setRootElement(el) {
+        DebugView.setRootElement(el);
+    }
+}
 
-  const LOG_LEVELS = {
+const LogLevels = {
     ERROR: 0,
     WARN: 1,
     INFO: 2,
-    VERBOSE: 3,
-  };
-
-  let visible = false;
-  let logLevel = LOG_LEVELS.INFO;
-  let staticFieldValues = {};
-
-  let rootElement, view;
-
-  function toggleVisibility() {
-    if (visible) {
-      hide();
-    } else {
-      show();
+    DEBUG: 3,
+};
+function shouldDisplayEntry(entry) {
+    return (!isTrace(entry) ||
+        entry.kind !== "event" ||
+        entry.data.eventTarget !== "MediaElement" ||
+        ["paused", "playing", "seeking", "seeked", "waiting"].includes(entry.data.eventType));
+}
+function DebugTool() {
+    let chronicle = new Chronicle();
+    let currentLogLevel = LogLevels.INFO;
+    let viewController = new DebugViewController();
+    function init() {
+        chronicle = new Chronicle();
+        viewController = new DebugViewController();
+        setLogLevel(LogLevels.INFO);
+        chronicle.trace("session-start", Date.now());
+    }
+    function tearDown() {
+        if (viewController.isVisible) {
+            hide();
+        }
+        chronicle.trace("session-end", Date.now());
     }
-  }
-
-  function setLogLevel(newLogLevel) {
-    if (newLogLevel !== undefined) {
-      logLevel = newLogLevel;
+    function getDebugLogs() {
+        return chronicle.retrieve();
     }
-  }
-
-  function show() {
-    view = DebugView;
-    view.setRootElement(rootElement);
-    view.init();
-    presenter.init(view);
-    presenter.update(Chronicle.retrieve());
-    Chronicle.registerForUpdates(presenter.update);
-    visible = true;
-  }
-
-  function hide() {
-    view.tearDown();
-    Chronicle.unregisterForUpdates(presenter.update);
-    visible = false;
-  }
-
-  function info(log) {
-    if (logLevel >= LOG_LEVELS.INFO) {
-      Chronicle.info(log);
+    function setLogLevel(newLogLevel) {
+        if (typeof newLogLevel !== "number") {
+            return;
+        }
+        if (newLogLevel === LogLevels.DEBUG) {
+            viewController.setFilters([]);
+        }
+        else {
+            viewController.setFilters([shouldDisplayEntry]);
+        }
+        currentLogLevel = newLogLevel;
     }
-  }
-
-  function event(log) {
-    if (logLevel >= LOG_LEVELS.INFO) {
-      Chronicle.event(log);
+    function setRootElement(element) {
+        viewController.setRootElement(element);
     }
-  }
-
-  function time(log) {
-    if (logLevel >= LOG_LEVELS.INFO) {
-      Chronicle.time(log);
+    function updateElementTime(seconds) {
+        chronicle.setCurrentElementTime(seconds);
     }
-  }
-
-  function error(log) {
-    if (logLevel < LOG_LEVELS.ERROR) {
-      return
+    function apicall(functionName, functionArgs = []) {
+        chronicle.trace("apicall", { functionName, functionArgs });
     }
-
-    const error = typeof log === "object" && log.message ? log : new Error(log);
-
-    Chronicle.error(error);
-  }
-
-  function warn(log) {
-    if (logLevel < LOG_LEVELS.WARN) {
-      return
+    function buffered(kind, buffered) {
+        chronicle.trace("buffered-ranges", { kind, buffered });
     }
-
-    Chronicle.warn(log);
-  }
-
-  function verbose(log) {
-    if (logLevel >= LOG_LEVELS.VERBOSE) {
-      Chronicle.verbose(log);
+    function debug(...parts) {
+        if (currentLogLevel < LogLevels.DEBUG) {
+            return;
+        }
+        chronicle.debug(parts.join(" "));
     }
-  }
-
-  function updateKeyValue(message) {
-    const staticFieldValue = staticFieldValues[message.key];
-
-    if (staticFieldValue) {
-      const entry = Chronicle.retrieve()[staticFieldValue.index];
-
-      if (entry) {
-        entry.keyvalue = message;
-      }
-    } else {
-      staticFieldValues[message.key] = { value: message.value, index: Chronicle.retrieve().length };
-      Chronicle.keyValue(message);
+    function error(...parts) {
+        if (currentLogLevel < LogLevels.ERROR) {
+            return;
+        }
+        const data = parts.length < 2 ? parts[0] : parts.join(" ");
+        chronicle.trace("error", typeof data === "object" && "message" in data ? { name: data.name, message: data.message } : { message: data });
     }
-  }
-
-  function setRootElement(element) {
-    rootElement = element;
-  }
-
-  function tearDown() {
-    staticFieldValues = {};
-    if (visible) {
-      hide();
+    function event(eventType, eventTarget = "unknown") {
+        chronicle.trace("event", { eventTarget, eventType });
     }
-  }
-
-  return {
-    logLevels: LOG_LEVELS,
-    error,
-    event,
-    info,
-    setLogLevel,
-    setRootElement,
-    tearDown,
-    time,
-    toggleVisibility,
-    verbose,
-    warn,
-    apicall: Chronicle.apicall,
-    keyValue: updateKeyValue,
-  }
+    function gap(from, to) {
+        chronicle.trace("gap", { from, to });
+    }
+    function quotaExceeded(bufferLevel, time) {
+        chronicle.trace("quota-exceeded", { bufferLevel, time });
+    }
+    function info(...parts) {
+        if (currentLogLevel < LogLevels.INFO) {
+            return;
+        }
+        chronicle.info(parts.join(" "));
+    }
+    function statechange(value) {
+        chronicle.trace("state-change", value);
+    }
+    function warn(...parts) {
+        if (currentLogLevel < LogLevels.WARN) {
+            return;
+        }
+        chronicle.warn(parts.join(" "));
+    }
+    function dynamicMetric(kind, data) {
+        chronicle.appendMetric(kind, data);
+    }
+    function staticMetric(kind, data) {
+        chronicle.setMetric(kind, data);
+    }
+    function handleHistoryUpdate(change) {
+        viewController.addEntries([change]);
+    }
+    function handleTimeUpdate(seconds) {
+        viewController.addTime({ currentElementTime: seconds, sessionTime: chronicle.getSessionTime() });
+    }
+    function hide() {
+        viewController.hideView();
+        chronicle.off("update", handleHistoryUpdate);
+        chronicle.off("timeupdate", handleTimeUpdate);
+    }
+    function show() {
+        viewController.showView();
+        viewController.addEntries(chronicle.retrieve());
+        viewController.addTime({
+            currentElementTime: chronicle.getCurrentElementTime(),
+            sessionTime: chronicle.getSessionTime(),
+        });
+        chronicle.on("update", handleHistoryUpdate);
+        chronicle.on("timeupdate", handleTimeUpdate);
+    }
+    function toggleVisibility() {
+        const toggle = viewController.isVisible ? hide : show;
+        toggle();
+    }
+    return {
+        logLevels: LogLevels,
+        init,
+        tearDown,
+        getDebugLogs,
+        setLogLevel,
+        updateElementTime,
+        apicall,
+        buffered,
+        debug,
+        error,
+        event,
+        gap,
+        quotaExceeded,
+        info,
+        statechange,
+        warn,
+        dynamicMetric,
+        staticMetric,
+        hide,
+        show,
+        setRootElement,
+        toggleVisibility,
+    };
 }
-
 const DebugToolInstance = DebugTool();
 
 function LiveGlitchCurtain(parentElement) {
@@ -943,14 +1078,14 @@ function LegacyPlayerAdapter(mediaSources, windowType, playbackElement, isUHD, p
 
   function eventHandler(event) {
     const handleEvent = {
-      playing: onPlaying,
-      paused: onPaused,
-      buffering: onBuffering,
+      "playing": onPlaying,
+      "paused": onPaused,
+      "buffering": onBuffering,
       "seek-attempted": onSeekAttempted,
       "seek-finished": onSeekFinished,
-      status: onTimeUpdate,
-      complete: onEnded,
-      error: onError,
+      "status": onTimeUpdate,
+      "complete": onEnded,
+      "error": onError,
     };
 
     if (handleEvent.hasOwnProperty(event.type)) {
@@ -987,6 +1122,8 @@ function LegacyPlayerAdapter(mediaSources, windowType, playbackElement, isUHD, p
   }
 
   function onTimeUpdate(event) {
+    DebugToolInstance.updateElementTime(event.currentTime);
+
     isPaused = false;
 
     // Note: Multiple consecutive CDN failover logic
@@ -999,6 +1136,7 @@ function LegacyPlayerAdapter(mediaSources, windowType, playbackElement, isUHD, p
     // Must publish this time update before checkSeekSucceded - which could cause a pause event
     // This is a device specific event ordering issue.
     publishTimeUpdate();
+
     if ((handleErrorOnExitingSeek || delayPauseOnExitSeek) && exitingSeek) {
       checkSeekSucceeded(event.seekableRange.start, event.currentTime);
     }
@@ -1146,13 +1284,10 @@ function LegacyPlayerAdapter(mediaSources, windowType, playbackElement, isUHD, p
 
       if (!isPlaybackFromLivePoint && typeof mediaPlayer.beginPlaybackFrom === "function") {
         currentTime = startTime;
-        DebugToolInstance.keyValue({ key: "initial-playback-time", value: startTime + timeCorrection });
         mediaPlayer.beginPlaybackFrom(startTime + timeCorrection || 0);
       } else {
         mediaPlayer.beginPlayback();
       }
-
-      DebugToolInstance.keyValue({ key: "strategy", value: getStrategy() });
     },
     play: () => {
       isPaused = false;
@@ -5189,7 +5324,9 @@ function hasFiniteSeekableRange(seekableRange) {
   let hasRange = true;
   try {
     hasRange = seekableRange.end !== Infinity;
-  } catch (e) {}
+  } catch (_error) {
+    /* empty */
+  }
   return hasRange
 }
 
@@ -5231,7 +5368,7 @@ function autoResumeAtStartOfRange(
   resume
 ) {
   const resumeTimeOut = Math.max(0, currentTime - seekableRange.start - AUTO_RESUME_WINDOW_START_CUSHION_SECONDS);
-  DebugToolInstance.keyValue({ key: "autoresume", value: resumeTimeOut });
+  DebugToolInstance.dynamicMetric("auto-resume", resumeTimeOut);
   const autoResumeTimer = setTimeout(() => {
     removeEventCallback(undefined, detectIfUnpaused);
     resume();
@@ -5248,9 +5385,9 @@ function autoResumeAtStartOfRange(
 }
 
 var DynamicWindowUtils = {
-  autoResumeAtStartOfRange: autoResumeAtStartOfRange,
-  canPause: canPause,
-  canSeek: canSeek,
+  autoResumeAtStartOfRange,
+  canPause,
+  canSeek,
 };
 
 function RestartableLivePlayer(mediaPlayer, windowType, mediaSources) {
@@ -5512,8 +5649,8 @@ function NativeStrategy(mediaSources, windowType, mediaKind, playbackElement, is
 NativeStrategy.getLiveSupport = () => window.bigscreenPlayer.liveSupport;
 
 const MediaKinds = {
-  AUDIO: "audio",
-  VIDEO: "video",
+    AUDIO: "audio",
+    VIDEO: "video",
 };
 
 function BasicStrategy(mediaSources, windowType, mediaKind, playbackElement) {
@@ -5546,14 +5683,16 @@ function BasicStrategy(mediaSources, windowType, mediaKind, playbackElement) {
   }
 
   function load(_mimeType, startTime) {
-    if (!mediaElement) {
+    if (mediaElement == null) {
       setUpMediaElement(startTime);
       setUpMediaListeners();
-    } else {
-      mediaElement.src = mediaSources.currentSource();
-      setStartTime(startTime);
-      mediaElement.load();
+
+      return
     }
+
+    mediaElement.src = mediaSources.currentSource();
+    setStartTime(startTime);
+    mediaElement.load();
   }
 
   function setUpMediaElement(startTime) {
@@ -5623,6 +5762,8 @@ function BasicStrategy(mediaSources, windowType, mediaKind, playbackElement) {
   }
 
   function onTimeUpdate() {
+    DebugToolInstance.updateElementTime(mediaElement.currentTime);
+
     publishTimeUpdate();
   }
 
@@ -5795,7 +5936,7 @@ BasicStrategy.getLiveSupport = () => LiveSupport.SEEKABLE;
 function StrategyPicker() {
   return new Promise((resolve, reject) => {
     if (window.bigscreenPlayer.playbackStrategy === PlaybackStrategy.MSE) {
-      return import('./msestrategy-f3c61ef4.js')
+      return import('./msestrategy-41492b38.js')
         .then(({ default: MSEStrategy }) => resolve(MSEStrategy))
         .catch(() => {
           reject({ error: "strategyDynamicLoadError" });
@@ -6213,9 +6354,9 @@ function getLiveSupport$1() {
 PlayerComponent.getLiveSupport = getLiveSupport$1;
 
 const PauseTriggers = {
-  USER: 1,
-  APP: 2,
-  DEVICE: 3,
+    USER: 1,
+    APP: 2,
+    DEVICE: 3,
 };
 
 function DeferExceptions(cb) {
@@ -6244,7 +6385,7 @@ function CallCallbacks(callbacks, data) {
   }
 }
 
-var version = "7.1.5";
+var Version = "7.2.0";
 
 var sourceList;
 var source;
@@ -6564,7 +6705,7 @@ var mockFunctions = {
     return
   },
   getFrameworkVersion: function () {
-    return version
+    return Version
   },
   tearDown: function () {
     manifestError = false;
@@ -7483,11 +7624,11 @@ function MediaSources() {
   }
 
   function updateDebugOutput() {
-    DebugToolInstance.keyValue({ key: "available cdns", value: availableCdns() });
-    DebugToolInstance.keyValue({ key: "url", value: stripQueryParamsAndHash(getCurrentUrl()) });
+    DebugToolInstance.dynamicMetric("cdns-available", availableCdns());
+    DebugToolInstance.dynamicMetric("current-url", stripQueryParamsAndHash(getCurrentUrl()));
 
-    DebugToolInstance.keyValue({ key: "available subtitle cdns", value: availableSubtitlesCdns() });
-    DebugToolInstance.keyValue({ key: "subtitles url", value: stripQueryParamsAndHash(getCurrentSubtitlesUrl()) });
+    DebugToolInstance.dynamicMetric("subtitle-cdns-available", availableSubtitlesCdns());
+    DebugToolInstance.dynamicMetric("subtitle-current-url", stripQueryParamsAndHash(getCurrentSubtitlesUrl()));
   }
 
   function tearDown() {
@@ -7636,7 +7777,7 @@ function Subtitles(mediaPlayer, autoStart, playbackElement, defaultStyleOpts, me
 
   if (available()) {
     if (useLegacySubs) {
-      import('./legacysubtitles-fc6e0bc6.js')
+      import('./legacysubtitles-33f2dd7e.js')
         .then(({ default: LegacySubtitles }) => {
           subtitlesContainer = LegacySubtitles(mediaPlayer, autoStart, playbackElement, mediaSources, defaultStyleOpts);
           callback(subtitlesEnabled);
@@ -7645,7 +7786,7 @@ function Subtitles(mediaPlayer, autoStart, playbackElement, defaultStyleOpts, me
           Plugins.interface.onSubtitlesDynamicLoadError();
         });
     } else {
-      import('./imscsubtitles-abbf8ed4.js')
+      import('./imscsubtitles-92685a59.js')
         .then(({ default: IMSCSubtitles }) => {
           subtitlesContainer = IMSCSubtitles(mediaPlayer, autoStart, playbackElement, mediaSources, defaultStyleOpts);
           callback(subtitlesEnabled);
@@ -7767,7 +7908,6 @@ function BigscreenPlayer() {
 
   function mediaStateUpdateCallback(evt) {
     if (evt.timeUpdate) {
-      DebugToolInstance.time(evt.data.currentTime);
       CallCallbacks(timeUpdateCallbacks, {
         currentTime: evt.data.currentTime,
         endOfStream,
@@ -7796,18 +7936,20 @@ function BigscreenPlayer() {
       }
 
       stateObject.endOfStream = endOfStream;
-      DebugToolInstance.event(stateObject);
+      DebugToolInstance.statechange(evt.data.state);
 
       CallCallbacks(stateChangeCallbacks, stateObject);
     }
 
     if (evt.data.seekableRange) {
-      DebugToolInstance.keyValue({ key: "seekableRangeStart", value: deviceTimeToDate(evt.data.seekableRange.start) });
-      DebugToolInstance.keyValue({ key: "seekableRangeEnd", value: deviceTimeToDate(evt.data.seekableRange.end) });
+      DebugToolInstance.staticMetric("seekable-range", [
+        deviceTimeToDate(evt.data.seekableRange.start).getTime(),
+        deviceTimeToDate(evt.data.seekableRange.end).getTime(),
+      ]);
     }
 
     if (evt.data.duration) {
-      DebugToolInstance.keyValue({ key: "duration", value: evt.data.duration });
+      DebugToolInstance.dynamicMetric("duration", evt.data.duration);
     }
 
     if (playerComponent && readyHelper) {
@@ -7914,10 +8056,19 @@ function BigscreenPlayer() {
      */
     init: (newPlaybackElement, bigscreenPlayerData, newWindowType, enableSubtitles, callbacks = {}) => {
       playbackElement = newPlaybackElement;
-      Chronicle.init();
       resizer = Resizer();
+      DebugToolInstance.init();
       DebugToolInstance.setRootElement(playbackElement);
-      DebugToolInstance.keyValue({ key: "framework-version", value: version });
+      DebugToolInstance.staticMetric("version", Version);
+
+      if (typeof bigscreenPlayerData.initialPlaybackTime === "number") {
+        DebugToolInstance.staticMetric("initial-playback-time", bigscreenPlayerData.initialPlaybackTime);
+      }
+
+      if (typeof window.bigscreenPlayer?.playbackStrategy === "string") {
+        DebugToolInstance.staticMetric("strategy", window.bigscreenPlayer && window.bigscreenPlayer.playbackStrategy);
+      }
+
       windowType = newWindowType;
       serverDate = bigscreenPlayerData.serverDate;
 
@@ -7973,7 +8124,6 @@ function BigscreenPlayer() {
       resizer = undefined;
       this.unregisterPlugin();
       DebugToolInstance.tearDown();
-      Chronicle.tearDown();
     },
 
     /**
@@ -8049,7 +8199,7 @@ function BigscreenPlayer() {
      * @param {Number} time - In seconds
      */
     setCurrentTime(time) {
-      DebugToolInstance.apicall("setCurrentTime");
+      DebugToolInstance.apicall("setCurrentTime", [time]);
       if (playerComponent) {
         // this flag must be set before calling into playerComponent.setCurrentTime - as this synchronously fires a WAITING event (when native strategy).
         isSeeking = true;
@@ -8359,7 +8509,7 @@ function BigscreenPlayer() {
      * @function
      * @return The runtime version of the library.
      */
-    getFrameworkVersion: () => version,
+    getFrameworkVersion: () => Version,
 
     /**
      * @function
@@ -8384,8 +8534,8 @@ function BigscreenPlayer() {
      * @function
      * @param logLevel -  log level to display @see getLogLevels
      */
-    setLogLevel: DebugToolInstance.setLogLevel,
-    getDebugLogs: () => Chronicle.retrieve(),
+    setLogLevel: (level) => DebugToolInstance.setLogLevel(level),
+    getDebugLogs: () => DebugToolInstance.getDebugLogs(),
   }
 }
 
@@ -8400,21 +8550,24 @@ function getLiveSupport() {
 
 BigscreenPlayer.getLiveSupport = getLiveSupport;
 
-BigscreenPlayer.version = version;
+BigscreenPlayer.version = Version;
 
+/**
+ * Provides an enumeration of on-screen transport control positions, which can be combined as flags.
+ */
 const TransportControlPosition = {
-  /** No transport controls are visible. */
-  NONE: 0,
-  /** The basic transport controls are visible. */
-  CONTROLS_ONLY: 1,
-  /** The transport controls are visible with an expanded info area. */
-  CONTROLS_WITH_INFO: 2,
-  /** The left-hand onwards navigation carousel is visible. */
-  LEFT_CAROUSEL: 4,
-  /** The bottom-right onwards navigation carousel is visible. */
-  BOTTOM_CAROUSEL: 8,
-  /** The whole screen is obscured by a navigation menu. */
-  FULLSCREEN: 16,
+    /** No transport controls are visible. */
+    NONE: 0,
+    /** The basic transport controls are visible. */
+    CONTROLS_ONLY: 1,
+    /** The transport controls are visible with an expanded info area. */
+    CONTROLS_WITH_INFO: 2,
+    /** The left-hand onwards navigation carousel is visible. */
+    LEFT_CAROUSEL: 4,
+    /** The bottom-right onwards navigation carousel is visible. */
+    BOTTOM_CAROUSEL: 8,
+    /** The whole screen is obscured by a navigation menu. */
+    FULLSCREEN: 16,
 };
 
-export { BigscreenPlayer as B, DOMHelpers as D, LoadUrl as L, MediaState as M, Plugins as P, TransportControlPosition as T, Utils as U, WindowTypes as W, DebugToolInstance as a, LiveSupport as b, MediaKinds as c, TimeUtils as d, DynamicWindowUtils as e, findSegmentTemplate as f, MockBigscreenPlayer as g, PauseTriggers as h, PlaybackStrategy as i, TransferFormat as j };
+export { BigscreenPlayer as B, DOMHelpers as D, EntryCategory as E, LoadUrl as L, MediaState as M, Plugins as P, TransportControlPosition as T, Utils as U, WindowTypes as W, DebugToolInstance as a, LiveSupport as b, MediaKinds as c, TimeUtils as d, DynamicWindowUtils as e, findSegmentTemplate as f, MockBigscreenPlayer as g, PauseTriggers as h, PlaybackStrategy as i, TransferFormat as j, isMessage as k, isMetric as l, isTrace as m };