Merge remote-tracking branch 'origin/develop' into webv2

webroot/js/components/auth-fediverse.js

@@ -115,7 +115,7 @@ export default class FediverseAuth extends Component {
     const message = verifying
       ? 'Paste in the code that was sent to your Fediverse account. If you did not receive a code, make sure you can accept direct messages.'
       : !authenticated
-      ? html`Receive a direct message from on the Fediverse to ${' '} link your
+      ? html`Receive a direct message on the Fediverse to ${' '} link your
           account to ${' '} <span class="font-bold">${username}</span>, or login
           as a previously linked chat user.`
       : html`<span

webroot/js/components/latencyCompensator.js

@@ -41,6 +41,7 @@ const MIN_LATENCY = 4 * 1000; // The absolute lowest we'll continue compensation
 const MAX_LATENCY = 15 * 1000; // The absolute highest we'll allow a target latency to be before we start compensating.
 const MAX_JUMP_LATENCY = 5 * 1000; // How much behind the max latency we need to be behind before we allow a jump.
 const MAX_JUMP_FREQUENCY = 20 * 1000; // How often we'll allow a time jump.
+const MAX_ACTIONABLE_LATENCY = 80 * 1000; // If latency is seen to be greater than this then something is wrong.
 const STARTUP_WAIT_TIME = 10 * 1000; // The amount of time after we start up that we'll allow monitoring to occur.
 
 class LatencyCompensator {
@@ -57,6 +58,7 @@ class LatencyCompensator {
     this.playbackRate = 1.0;
     this.lastJumpOccurred = null;
     this.startupTime = new Date();
+    this.clockSkewMs = 0;
 
     this.player.on('playing', this.handlePlaying.bind(this));
     this.player.on('error', this.handleError.bind(this));
@@ -67,6 +69,15 @@ class LatencyCompensator {
     this.player.on('canplay', this.handlePlaying.bind(this));
   }
 
+  // To keep our client clock in sync with the server clock to determine
+  // accurate latency the clock skew should be set here to be used in
+  // the calculation. Otherwise if somebody's client clock is significantly
+  // off it will have a very incorrect latency determination and make bad
+  // decisions.
+  setClockSkew(skewMs) {
+    this.clockSkewMs = skewMs;
+  }
+
   // This is run on a timer to check if we should be compensating for latency.
   check() {
     // We have an arbitrary delay at startup to allow the player to run
@@ -166,9 +177,21 @@ class LatencyCompensator {
       );
 
       const segmentTime = segment.dateTimeObject.getTime();
-      const now = new Date().getTime();
+      const now = new Date().getTime() + this.clockSkewMs;
       const latency = now - segmentTime;
 
+      // Since the calculation of latency is based on clock times, it's possible
+      // things can be reported incorrectly. So we use a sanity check here to
+      // simply bail if the latency is reported to so high we think the whole
+      // thing is wrong. We can't make decisions based on bad data, so give up.
+      // This can also occur if somebody pauses for a long time and hits play
+      // again but it's not really possible to know the difference between
+      // the two scenarios.
+      if (Math.abs(latency) > MAX_ACTIONABLE_LATENCY) {
+        this.timeout();
+        return;
+      }
+
       if (latency > maxLatencyThreshold) {
         // If the current latency exceeds the max jump amount then
         // force jump into the future, skipping all the video in between.
@@ -177,12 +200,13 @@ class LatencyCompensator {
           latency > maxLatencyThreshold + MAX_JUMP_LATENCY
         ) {
           const jumpAmount = latency / 1000 - segment.duration * 3;
-          console.log('jump amount', jumpAmount);
           const seekPosition = this.player.currentTime() + jumpAmount;
           console.log(
             'latency',
             latency / 1000,
-            'jumping to live from ',
+            'jumping',
+            jumpAmount,
+            'to live from ',
             this.player.currentTime(),
             ' to ',
             seekPosition
@@ -240,9 +264,9 @@ class LatencyCompensator {
         this.enabled,
         'running: ',
         this.running,
-        'timeout: ',
-        this.inTimeout,
-        'buffers: ',
+        'skew: ',
+        this.clockSkewMs,
+        'rebuffer events: ',
         this.bufferingCounter
       );
     } catch (err) {
@@ -340,10 +364,19 @@ class LatencyCompensator {
 
   handlePlaying() {
     clearTimeout(this.bufferingTimer);
-
     if (!this.enabled) {
       return;
     }
+
+    if (!this.shouldJumpToLive()) {
+      return;
+    }
+
+    // Seek to live immediately on starting playback to handle any long-pause
+    // scenarios or somebody starting far back from the live edge.
+    this.jumpingToLiveIgnoreBuffer = true;
+    this.player.liveTracker.seekToLiveEdge();
+    this.lastJumpOccurred = new Date();
   }
 
   handleEnded() {
@@ -369,6 +402,7 @@ class LatencyCompensator {
       this.disable();
       return;
     }
+
     console.log('timeout due to buffering');
     this.timeout();
 
@@ -402,7 +436,7 @@ function getCurrentlyPlayingSegment(tech) {
 
   var segment;
 
-  // Itinerate trough available segments and get first within which snapshot_time is
+  // Iterate trough available segments and get first within which snapshot_time is
   for (var i = 0, l = target_media.segments.length; i < l; i++) {
     // Note: segment.end may be undefined or is not properly set
     if (snapshot_time < target_media.segments[i].end) {

webroot/js/components/player.js

@@ -57,6 +57,8 @@ class OwncastPlayer {
     this.hasStartedPlayback = false;
     this.latencyCompensatorEnabled = false;
 
+    this.clockSkewMs = 0;
+
     // bind all the things because safari
     this.startPlayer = this.startPlayer.bind(this);
     this.handleReady = this.handleReady.bind(this);
@@ -92,6 +94,18 @@ class OwncastPlayer {
     this.vjsPlayer.ready(this.handleReady);
   }
 
+  setClockSkew(skewMs) {
+    this.clockSkewMs = skewMs;
+
+    if (this.playbackMetrics) {
+      this.playbackMetrics.setClockSkew(skewMs);
+    }
+
+    if (this.latencyCompensator) {
+      this.latencyCompensator.setClockSkew(skewMs);
+    }
+  }
+
   setupPlayerCallbacks(callbacks) {
     const { onReady, onPlaying, onEnded, onError } = callbacks;
 
@@ -116,6 +130,7 @@ class OwncastPlayer {
 
   setupPlaybackMetrics() {
     this.playbackMetrics = new PlaybackMetrics(this.vjsPlayer, videojs);
+    this.playbackMetrics.setClockSkew(this.clockSkewMs);
   }
 
   setupLatencyCompensator() {
@@ -139,6 +154,7 @@ class OwncastPlayer {
 
   startLatencyCompensator() {
     this.latencyCompensator = new LatencyCompensator(this.vjsPlayer);
+    this.playbackMetrics.setClockSkew(this.clockSkewMs);
     this.latencyCompensator.enable();
     this.latencyCompensatorEnabled = true;
     this.setLatencyCompensatorItemTitle('disable minimized latency');