Feature/time and duration api (#4485)

* Return NaN in case of an error in getContinuousBufferTimeForTargetTime * Adjust implementation of Mediaplayer.time() to return current playback time for live * Add function timeInDvrWindow() to return playback time relative to the start of the DVR window * Add reworked timing API functionality as documented in https://dashif.org/dash.js/pages/advanced/timing-apis.html * Add new seekToPresentationTime function and corresponding functional tests * Fix bug in ControlBar.js * Add missing methods to index.d.ts
Dash-Industry-Forum · May 22, 2024 · 9c9b089 · 9c9b089
1 parent 912c14c
commit 9c9b089
Show file tree

Hide file tree

Showing 21 changed files with 629 additions and 232 deletions.
diff --git a/contrib/akamai/controlbar/ControlBar.js b/contrib/akamai/controlbar/ControlBar.js
@@ -178,7 +178,7 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
     };
 
     var _onPlayStart = function (/*e*/) {
-        setTime(displayUTCTimeCodes ? self.player.timeAsUTC() : self.player.time());
+        setTime(displayUTCTimeCodes ? self.player.timeAsUtc() : self.player.timeInDvrWindow());
         updateDuration();
         togglePlayPauseBtnState();
         if (seekbarBufferInterval) {
@@ -189,13 +189,13 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
     var _onPlayTimeUpdate = function (/*e*/) {
         updateDuration();
         if (!seeking) {
-            setTime(displayUTCTimeCodes ? player.timeAsUTC() : player.time());
+            setTime(displayUTCTimeCodes ? player.timeAsUtc() : player.timeInDvrWindow());
             if (seekbarPlay) {
-                seekbarPlay.style.width = (player.time() / player.duration() * 100) + '%';
+                seekbarPlay.style.width = Math.max((player.timeInDvrWindow() / player.duration() * 100), 0) + '%';
             }
 
             if (seekbar.getAttribute('type') === 'range') {
-                seekbar.value = player.time();
+                seekbar.value = player.timeInDvrWindow();
             }
 
         }
@@ -384,7 +384,7 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
             return;
         }
         if (self.player.isDynamic() && self.player.duration()) {
-            var liveDelay = self.player.duration() - value;
+            var liveDelay = Math.max(self.player.duration() - value, 0);
             var targetLiveDelay = self.player.getTargetLiveDelay();
 
             if (liveDelay < targetLiveDelay + liveThresholdSecs) {
@@ -401,7 +401,7 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
     var updateDuration = function () {
         var duration = self.player.duration();
         if (duration !== parseFloat(seekbar.max)) { //check if duration changes for live streams..
-            setDuration(displayUTCTimeCodes ? self.player.durationAsUTC() : duration);
+            setDuration(displayUTCTimeCodes ? self.player.getDvrWindow().endAsUtc : duration);
             seekbar.max = duration;
         }
     };
@@ -597,7 +597,7 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
     };
 
     // Match up the current dashjs text tracks against native video element tracks by ensuring they have matching properties
-    var _matchTrackWithNativeTrack = function(track, nativeTrack) {
+    var _matchTrackWithNativeTrack = function (track, nativeTrack) {
         let label = track.id !== undefined ? track.id.toString() : track.lang;
 
         return !!(
@@ -619,7 +619,8 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
                 trackMode = nativeTrack.mode;
                 break;
             }
-        };
+        }
+        ;
 
         return (trackMode === undefined) ? 'showing' : trackMode;
     };
@@ -689,7 +690,7 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
 
     var _onBufferLevelUpdated = function () {
         if (seekbarBuffer) {
-            seekbarBuffer.style.width = ((player.time() + getBufferLevel()) / player.duration() * 100) + '%';
+            seekbarBuffer.style.width = ((player.timeInDvrWindow() + getBufferLevel()) / player.duration() * 100) + '%';
         }
     };
 
@@ -838,7 +839,7 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
                 // Other tracks will just have their text
                 item.textContent = arr[i];
             }
-            
+
             item.onmouseover = function (/*e*/) {
                 if (this.selected !== true) {
                     this.classList.add('menu-item-over');

diff --git a/index.d.ts b/index.d.ts
@@ -259,7 +259,13 @@ declare namespace dashjs {
 
         getRepresentationCount(adaptation: object): number;
 
-        getBitrateListForAdaptation(realAdaptation: object): { bandwidth: number, width: number, height: number, scanType: string | null, id: string | null };
+        getBitrateListForAdaptation(realAdaptation: object): {
+            bandwidth: number,
+            width: number,
+            height: number,
+            scanType: string | null,
+            id: string | null
+        };
 
         getSelectionPriority(realAdaptation: object): number;
 
@@ -1258,7 +1264,7 @@ declare namespace dashjs {
                 }
             },
             cmcd?: {
-                applyParametersFromMpd?:boolean,
+                applyParametersFromMpd?: boolean,
                 enabled?: boolean,
                 sid?: string | null,
                 cid?: string | null,
@@ -1401,6 +1407,8 @@ declare namespace dashjs {
 
         seek(value: number): void;
 
+        seekToPresentationTime(value: number): void;
+
         seekToOriginalLive(): void;
 
         setPlaybackRate(value: number): void;
@@ -1417,17 +1425,17 @@ declare namespace dashjs {
 
         time(streamId?: string): number;
 
-        duration(): number;
+        timeInDvrWindow(): number;
 
-        timeAsUTC(): number;
+        getDvrWindow(): object;
 
-        durationAsUTC(): number;
+        duration(): number;
 
-        getActiveStream(): Stream | null;
+        timeAsUtc(): number;
 
-        getDVRWindowSize(): number;
+        getActiveStream(): Stream | null;
 
-        getDVRSeekOffset(value: number): number;
+        getDvrSeekOffset(value: number): number;
 
         getTargetLiveDelay(): number;
 
@@ -1875,6 +1883,7 @@ declare namespace dashjs {
         type: MediaPlayerEvents['DVB_FONT_DOWNLOAD_FAILED'];
         font: FontInfo;
     }
+
     export interface DynamicToStaticEvent extends Event {
         type: MediaPlayerEvents['DYNAMIC_TO_STATIC'];
     }
@@ -3381,7 +3390,9 @@ declare namespace dashjs {
     }
 
     export class LicenseRequest {
-        constructor(url: string, method: string, responseType: string, headers: { [key: string]: string }, withCredentials: boolean, messageType: string, sessionId: string, data: ArrayBuffer)
+        constructor(url: string, method: string, responseType: string, headers: {
+            [key: string]: string
+        }, withCredentials: boolean, messageType: string, sessionId: string, data: ArrayBuffer)
 
         url: string;
         method: string;
@@ -4062,7 +4073,15 @@ declare namespace dashjs {
     }
 
     export interface TTMLParser {
-        parse(data: string, offsetTime: number, startTimeSegment: number, endTimeSegment: number, images: any[]): { start: number, end: number, type: string, cueID: string, isd: any, images: any[], embeddedImages: any[] }[];
+        parse(data: string, offsetTime: number, startTimeSegment: number, endTimeSegment: number, images: any[]): {
+            start: number,
+            end: number,
+            type: string,
+            cueID: string,
+            isd: any,
+            images: any[],
+            embeddedImages: any[]
+        }[];
     }
 
     export interface URLUtils {

diff --git a/samples/live-streaming/availability-time-offset.html b/samples/live-streaming/availability-time-offset.html
@@ -33,7 +33,7 @@
                     document.querySelector('#sec').innerHTML = (seconds < 10 ? '0' : '') + seconds;
                     var minutes = d.getMinutes();
                     document.querySelector('#min').innerHTML = (minutes < 10 ? '0' : '') + minutes + ':';
-                    document.querySelector('#videoDelay').innerHTML = Math.round((d.getTime() / 1000) - Number(player.timeAsUTC()));
+                    document.querySelector('#videoDelay').innerHTML = Math.round((d.getTime() / 1000) - Number(player.timeAsUtc()));
                     document.querySelector('#videoBuffer').innerHTML = player.getBufferLength() + 's';
                 }
             }, 1000);

diff --git a/samples/live-streaming/live-delay-comparison-custom-manifest.html b/samples/live-streaming/live-delay-comparison-custom-manifest.html
@@ -22,7 +22,7 @@
                     document.querySelector('#sec').innerHTML = (seconds < 10 ? '0' : '') + seconds;
                     var minutes = d.getMinutes();
                     document.querySelector('#min').innerHTML = (minutes < 10 ? '0' : '') + minutes + ':';
-                    document.querySelector('#videoDelay').innerHTML = Math.round((d.getTime() / 1000) - Number(player.timeAsUTC()));
+                    document.querySelector('#videoDelay').innerHTML = Math.round((d.getTime() / 1000) - Number(player.timeAsUtc()));
                     document.querySelector('#videoBuffer').innerHTML = player.getBufferLength() + 's';
                 }
             }, 1000);

diff --git a/samples/live-streaming/live-delay-comparison-using-fragmentCount.html b/samples/live-streaming/live-delay-comparison-using-fragmentCount.html
@@ -57,7 +57,7 @@
                 document.querySelector('#min').innerHTML = (minutes < 10 ? '0' : '') + minutes + ':';
                 for (var i = 1; i < 7; i++) {
                     var p = eval('player' + i);
-                    document.querySelector('#video' + i + 'delay').innerHTML = Math.round((d.getTime() / 1000) - Number(p.timeAsUTC()));
+                    document.querySelector('#video' + i + 'delay').innerHTML = Math.round((d.getTime() / 1000) - Number(p.timeAsUtc()));
                     document.querySelector('#video' + i + 'buffer').innerHTML = p.getBufferLength() + 's';
                 }
 

diff --git a/samples/live-streaming/live-delay-comparison-using-setLiveDelay.html b/samples/live-streaming/live-delay-comparison-using-setLiveDelay.html
@@ -57,7 +57,7 @@
                 document.querySelector('#min').innerHTML = (minutes < 10 ? '0' : '') + minutes + ':';
                 for (var i = 1; i < 7; i++) {
                     var p = eval('player' + i);
-                    document.querySelector('#video' + i + 'delay').innerHTML = Math.round((d.getTime() / 1000) - Number(p.timeAsUTC()));
+                    document.querySelector('#video' + i + 'delay').innerHTML = Math.round((d.getTime() / 1000) - Number(p.timeAsUtc()));
                     document.querySelector('#video' + i + 'buffer').innerHTML = p.getBufferLength() + 's';
                 }
 

diff --git a/samples/live-streaming/synchronized-live-playback.html b/samples/live-streaming/synchronized-live-playback.html
@@ -46,7 +46,7 @@
                 document.querySelector('#min').innerHTML = (minutes < 10 ? '0' : '') + minutes + ':';
                 for (var i = 1; i < 3; i++) {
                     var p = eval('player' + i);
-                    document.querySelector('#video' + i + 'delay').innerHTML = Math.round((d.getTime() / 1000) - Number(p.timeAsUTC()));
+                    document.querySelector('#video' + i + 'delay').innerHTML = Math.round((d.getTime() / 1000) - Number(p.timeAsUtc()));
                     document.querySelector('#video' + i + 'buffer').innerHTML = p.getBufferLength() + 's';
                 }