Add video fragment response headers to the debug view

docs/tutorials/00-getting-started.md

@@ -78,6 +78,9 @@ The full set of options for BigscreenPlayer is:
 const optionalData = {
   initialPlaybackTime: 0, // Time (in seconds) to begin playback from
   enableSubtitles: false,
+  debug: {
+    fragmentResponseHeaders: [], // video fragment response headers to output in the debug tool
+  },
   media: {
     type: "application/dash+xml",
     kind: MediaKinds.VIDEO, // Can be VIDEO, or AUDIO

src/bigscreenplayer.js

@@ -109,7 +109,7 @@ function BigscreenPlayer() {
     }
   }
 
-  function bigscreenPlayerDataLoaded({ media, enableSubtitles, subtitlesAlwaysOnTop, enableAudioDescribed }) {
+  function bigscreenPlayerDataLoaded({ media, enableSubtitles, subtitlesAlwaysOnTop, enableAudioDescribed, debug }) {
     abortSignal.throwIfAborted(AbortStages.DATA_LOADED)
 
     const initialPresentationTime =
@@ -122,7 +122,7 @@ function BigscreenPlayer() {
 
     playerComponent = PlayerComponent(
       playbackElement,
-      { media, enableAudioDescribed, initialPlaybackTime: initialPresentationTime },
+      { media, enableAudioDescribed, initialPlaybackTime: initialPresentationTime, debug },
       mediaSources,
       mediaStateUpdateCallback,
       _callbacks.playerError,

src/playbackstrategy/msestrategy.js

@@ -22,7 +22,8 @@ function MSEStrategy(
   playbackElement,
   _isUHD = false,
   customPlayerSettings = {},
-  audioDescribedOpts = {}
+  audioDescribedOpts = {},
+  debugSettings = {}
 ) {
   const audioDescribed = { callback: undefined, enable: false, ...audioDescribedOpts }
 
@@ -114,6 +115,7 @@ function MSEStrategy(
     METRIC_CHANGED: "metricChanged",
     STREAM_INITIALIZED: "streamInitialized",
     FRAGMENT_CONTENT_LENGTH_MISMATCH: "fragmentContentLengthMismatch",
+    FRAGMENT_LOADED: "fragmentLoadingCompleted",
     QUOTA_EXCEEDED: "quotaExceeded",
     TEXT_TRACKS_ADDED: "allTextTracksAdded",
     CURRENT_TRACK_CHANGED: "currentTrackChanged",
@@ -524,6 +526,19 @@ function MSEStrategy(
     }
   }
 
+  function onFragmentLoaded() {
+    if (debugSettings?.fragmentResponseHeaders) {
+      debugSettings.fragmentResponseHeaders.forEach((responseHeader) => {
+        const responseHeaderValue = mediaPlayer
+          .getDashMetrics()
+          .getLatestFragmentRequestHeaderValueByID("video", responseHeader)
+        if (responseHeaderValue) {
+          DebugTool.staticMetric(responseHeader.toLowerCase(), responseHeaderValue)
+        }
+      })
+    }
+  }
+
   function onFragmentContentLengthMismatch(event) {
     DebugTool.info(`Fragment Content Length Mismatch: ${event.responseUrl} (${event.mediaType})`)
     DebugTool.info(`Header Length ${event.headerLength}`)
@@ -705,6 +720,7 @@ function MSEStrategy(
     mediaPlayer.on(DashJSEvents.SERVICE_LOCATION_AVAILABLE, onServiceLocationAvailable)
     mediaPlayer.on(DashJSEvents.URL_RESOLUTION_FAILED, onURLResolutionFailed)
     mediaPlayer.on(DashJSEvents.FRAGMENT_CONTENT_LENGTH_MISMATCH, onFragmentContentLengthMismatch)
+    mediaPlayer.on(DashJSEvents.FRAGMENT_LOADED, onFragmentLoaded)
     mediaPlayer.on(DashJSEvents.GAP_JUMP, onGapJump)
     mediaPlayer.on(DashJSEvents.GAP_JUMP_TO_END, onGapJump)
     mediaPlayer.on(DashJSEvents.QUOTA_EXCEEDED, onQuotaExceeded)

src/playercomponent.js

@@ -70,7 +70,8 @@ function PlayerComponent(
         {
           enable: bigscreenPlayerData.enableAudioDescribed,
           callback: audioDescribedCallback,
-        }
+        },
+        bigscreenPlayerData?.debug
       )
 
       playbackStrategy.addEventCallback(this, eventCallback)

src/playercomponent.test.js

@@ -151,7 +151,8 @@ describe("Player Component", () => {
         playbackElement,
         undefined,
         undefined,
-        { callback: audioDescribedCallback, enable: false }
+        { callback: audioDescribedCallback, enable: false },
+        undefined
       )
       expect(mockPlaybackStrategyClass).toHaveBeenCalledTimes(1)
 

src/types.ts

@@ -53,12 +53,17 @@ export type MediaDescriptor = {
   subtitlesRequestTimeout?: number
 }
 
+export type DebugSettings = {
+  fragmentResponseHeaders?: string[]
+}
+
 export type InitData = {
   media: MediaDescriptor
   enableSubtitles?: boolean
   subtitlesAlwaysOnTop?: boolean
   enableAudioDescribed?: boolean
   initialPlaybackTime?: number | PlaybackTime
+  debug?: DebugSettings
 }
 
 export type InitCallbacks = {