don't import internal type in the demo

Author: Florent-Bouisset

demo/full/scripts/components/BufferContentGraph.tsx

@@ -3,7 +3,7 @@ import type { IVideoRepresentation } from "../../../../src/public_types";
 import capitalizeFirstLetter from "../lib/capitalizeFirstLetter";
 import shuffleArray from "../lib/shuffleArray";
 import ToolTip from "./ToolTip";
-import { IBufferedChunkSnapshot } from "../../../../src/core/segment_sinks/segment_buffers_store";
+import { IBufferedData } from "../modules/player";
 
 const { useEffect, useMemo, useRef, useState } = React;
 
@@ -68,7 +68,7 @@ function paintCurrentPosition(
 interface IScaledBufferedData {
   scaledStart: number;
   scaledEnd: number;
-  bufferedInfos: IBufferedChunkSnapshot;
+  bufferedInfos: IBufferedData;
 }
 
 /**
@@ -80,7 +80,7 @@ interface IScaledBufferedData {
  * @returns {Array.<Object>}
  */
 function scaleSegments(
-  bufferedData: IBufferedChunkSnapshot[],
+  bufferedData: IBufferedData[],
   minimumPosition: number,
   maximumPosition: number,
 ): IScaledBufferedData[] {
@@ -123,7 +123,7 @@ export default function BufferContentGraph({
   type, // The type of buffer (e.g. "audio", "video" or "text")
 }: {
   currentTime: number | undefined;
-  data: IBufferedChunkSnapshot[];
+  data: IBufferedData[];
   minimumPosition: number | null | undefined;
   maximumPosition: number | null | undefined;
   seek: (pos: number) => void;
@@ -134,7 +134,7 @@ export default function BufferContentGraph({
   const [tipPosition, setTipPosition] = useState(0);
   const [tipText, setTipText] = useState("");
   const canvasEl = useRef<HTMLCanvasElement>(null);
-  const representationsIdEncountered = useRef<string[]>([]);
+  const representationsIdEncountered = useRef<(string | number)[]>([]);
   const usedMaximum = maximumPosition ?? 300;
   const usedMinimum = minimumPosition ?? 0;
   const duration = Math.max(usedMaximum - usedMinimum, 0);
@@ -148,11 +148,9 @@ export default function BufferContentGraph({
   const paintSegment = React.useCallback(
     (scaledSegment: IScaledBufferedData, canvasCtx: CanvasRenderingContext2D): void => {
       const representation = scaledSegment.bufferedInfos.infos.representation;
-      let indexOfRepr = representationsIdEncountered.current.indexOf(
-        representation.uniqueId,
-      );
+      let indexOfRepr = representationsIdEncountered.current.indexOf(representation.id);
       if (indexOfRepr < 0) {
-        representationsIdEncountered.current.push(representation.uniqueId);
+        representationsIdEncountered.current.push(representation.id);
         indexOfRepr = representationsIdEncountered.current.length - 1;
       }
       const colorIndex = indexOfRepr % COLORS.length;
@@ -255,7 +253,7 @@ export default function BufferContentGraph({
                 "\n" +
                 `height: ${rep.height ?? "?"}` +
                 "\n" +
-                `codec: ${representation.codecs?.join("-") ?? "?"}` +
+                `codec: ${representation.codec ?? representation.codecs?.join("-") ?? "?"}` +
                 "\n" +
                 `bitrate: ${representation.bitrate ?? "?"}` +
                 "\n";
@@ -267,7 +265,7 @@ export default function BufferContentGraph({
                 "\n" +
                 `audioDescription: ${String(adaptation.isAudioDescription) ?? false}` +
                 "\n" +
-                `codec: ${representation.codecs?.join("-") ?? "?"}` +
+                `codec: ${representation.codec ?? representation.codecs?.join("-") ?? "?"}` +
                 "\n" +
                 `bitrate: ${representation.bitrate ?? "?"}` +
                 "\n";

demo/full/scripts/controllers/charts/BufferContent.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import BufferContentGraph from "../../components/BufferContentGraph";
 import useModuleState from "../../lib/useModuleState";
-import type { IPlayerModule } from "../../modules/player/index";
-import type { IBufferedChunkSnapshot } from "../../../../../src/core/segment_sinks/segment_buffers_store";
+import type { IPlayerModule, IBufferedData } from "../../modules/player/index";
 
 export default function BufferContentChart({ player }: { player: IPlayerModule }) {
   const bufferedData = useModuleState(player, "bufferedData");
@@ -33,7 +32,7 @@ export default function BufferContentChart({ player }: { player: IPlayerModule }
           currentTime={currentTime}
           minimumPosition={minimumPosition}
           maximumPosition={maximumPosition}
-          data={bufferedData[type] as IBufferedChunkSnapshot[]}
+          data={bufferedData[type] as IBufferedData[]}
           seek={seek}
         />
       );

demo/full/scripts/modules/player/index.ts

@@ -41,7 +41,6 @@ import type {
   IVideoRepresentation,
   IVideoTrack,
 } from "../../../../../src/public_types";
-import type { IBufferedChunkSnapshot } from "../../../../../src/core/segment_sinks/segment_buffers_store";
 
 RxPlayer.addFeatures([
   DASH,
@@ -96,7 +95,7 @@ export interface IBufferedData {
       isAudioDescription?: boolean | undefined;
       isClosedCaption?: boolean | undefined;
     };
-    representation: IAudioRepresentation | IVideoRepresentation;
+    representation: (IAudioRepresentation | IVideoRepresentation) & { codecs?: string[] };
   };
 }
 
@@ -109,9 +108,9 @@ export interface IPlayerModuleState {
   availableVideoTracks: IAvailableVideoTrack[];
   bufferGap: number;
   bufferedData: null | {
-    audio: IBufferedChunkSnapshot[] | null;
-    video: IBufferedChunkSnapshot[] | null;
-    text: IBufferedChunkSnapshot[] | null;
+    audio: IBufferedData[] | null;
+    video: IBufferedData[] | null;
+    text: IBufferedData[] | null;
   };
   cannotLoadMetadata: boolean;
   currentTime: number | undefined;