Merge pull request #1672 from canalplus/feat/add-buffer-size-to-debug-v3

[v3] DEBUG_ELEMENT: Add buffer size estimate to debug buffer content graph

Author: peaBerberian

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

@@ -22,6 +22,7 @@ export default function createSegmentBufferGraph(
   const bufferGraphWrapper = createElement("div");
   const bufferTitle = createMetricTitle(title);
   const canvasElt = createGraphCanvas();
+  const bufferSizeElt = document.createElement("span");
   const currentRangeRepInfoElt = createElement("div");
   const loadingRangeRepInfoElt = createElement("div");
   const bufferGraph = new SegmentBufferGraph(canvasElt);
@@ -31,8 +32,11 @@ export default function createSegmentBufferGraph(
   });
   bufferGraphWrapper.appendChild(bufferTitle);
   bufferGraphWrapper.appendChild(canvasElt);
+  bufferGraphWrapper.appendChild(bufferSizeElt);
   bufferGraphWrapper.appendChild(currentRangeRepInfoElt);
   bufferGraphWrapper.appendChild(loadingRangeRepInfoElt);
+  bufferSizeElt.style.marginLeft = "5px";
+  bufferSizeElt.style.fontSize = "0.9em";
   bufferGraphWrapper.style.padding = "5px 0px";
   update();
   return bufferGraphWrapper;
@@ -49,10 +53,35 @@ export default function createSegmentBufferGraph(
     const inventory = instance.__priv_getSegmentBufferContent(bufferType);
     if (inventory === null) {
       bufferGraphWrapper.style.display = "none";
+      bufferSizeElt.innerHTML = "";
       currentRangeRepInfoElt.innerHTML = "";
       loadingRangeRepInfoElt.innerHTML = "";
     } else {
+      let sizeEstimate: number | undefined;
+      for (const segment of inventory) {
+        if (segment.chunkSize === undefined) {
+          sizeEstimate = undefined;
+          break;
+        } else if (sizeEstimate === undefined) {
+          sizeEstimate = segment.chunkSize;
+        } else {
+          sizeEstimate += segment.chunkSize;
+        }
+      }
       bufferGraphWrapper.style.display = "block";
+      if (sizeEstimate !== undefined) {
+        let sizeStr: string;
+        if (sizeEstimate > 2e6) {
+          sizeStr = (sizeEstimate / 1e6).toFixed(2) + "MB";
+        } else if (sizeEstimate > 2e3) {
+          sizeStr = (sizeEstimate / 1e3).toFixed(2) + "kB";
+        } else {
+          sizeStr = sizeEstimate + "B";
+        }
+        bufferSizeElt.innerHTML = sizeStr;
+      } else {
+        bufferSizeElt.innerHTML = "";
+      }
       const currentTime = instance.getPosition();
       const width = Math.min(parentElt.clientWidth - 150, 600);
       bufferGraph.update({