Improve drift correction behavior (#60)

* Improve drift correction behavior

* Revert package-lock.json

* Fix lint errors

* Set trickplay speed to 2x, check that player is not buffering, add a flat additional catchup amount

* Add a log to indicate return to normal playback rate

package-lock.json

@@ -47763,4 +47763,4 @@
             "dev": true
         }
     }
-}
+}

packages/web-components/src/player-component/player.class.ts

@@ -664,16 +664,25 @@ export class PlayerWrapper {
         }, stallIntervalMs);
 
         // Install drift correction
-        const driftIntervalMs = 5000;
-        const MAX_LATENCY_WINDOW = 5000;
-        this._driftCorrectionTimer = window.setInterval(() => {
+        const driftIntervalMs = 10000; // in milliseconds
+        const MAX_LATENCY_WINDOW = 3; // in seconds
+        this._driftCorrectionTimer = window.setInterval(async () => {
             const video = this.player.getMediaElement() as HTMLMediaElement;
-            if (this.player.seekRange().end - MAX_LATENCY_WINDOW > video.currentTime && !video.paused && this.isLive) {
-                Logger.log(`Correcting drift, jumping forward ${this.player.seekRange().end - video.currentTime}`);
-                video.currentTime = this.player.seekRange().end;
+            if (this.player.getBufferedInfo().video[0].end - MAX_LATENCY_WINDOW > video.currentTime &&
+                !video.paused && this.isLive && !this.player.isBuffering()
+            ) {
+                // TODO: To account for the time that elapses during the trickplay portion, we need to add some additional trickplay duration
+                // in order to get latency as low as possible. The slower the trickplay speed, and the higher the latency, the higher this
+                // additional value will have to be. For now we use a flat value.
+                const additionalDur= 2000; // in milliseconds
+                const delta=this.player.getBufferedInfo().video[0].end - video.currentTime;
+                Logger.log(`Correcting drift, jumping forward ${delta}`);
+                video.playbackRate=2;
+                await new Promise(r => setTimeout(r, (delta*1000/video.playbackRate + additionalDur)));
+                Logger.log('Resetting to 1x playback rate...');
+                video.playbackRate=1;
             }
         }, driftIntervalMs);
-
         // Add bounding box drawer
         const options: ICanvasOptions = {
             height: this.video.clientHeight,