fix: time tooltip truncated (#8527)

videojs · Apr 10, 2024 · 50f14bd · 50f14bd
1 parent caf6d30
commit 50f14bd
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/js/control-bar/progress-control/time-tooltip.js b/src/js/control-bar/progress-control/time-tooltip.js
@@ -66,15 +66,24 @@ class TimeTooltip extends Component {
     // of the player. We calculate any gap between the left edge of the player
     // and the left edge of the `SeekBar` and add the number of pixels in the
     // `SeekBar` before hitting the `seekBarPoint`
-    const spaceLeftOfPoint = (seekBarRect.left - playerRect.left) + seekBarPointPx;
+    let spaceLeftOfPoint = (seekBarRect.left - playerRect.left) + seekBarPointPx;
 
     // This is the space right of the `seekBarPoint` available within the bounds
     // of the player. We calculate the number of pixels from the `seekBarPoint`
     // to the right edge of the `SeekBar` and add to that any gap between the
     // right edge of the `SeekBar` and the player.
-    const spaceRightOfPoint = (seekBarRect.width - seekBarPointPx) +
+    let spaceRightOfPoint = (seekBarRect.width - seekBarPointPx) +
       (playerRect.right - seekBarRect.right);
 
+    // spaceRightOfPoint is always NaN for mouse time display
+    // because the seekbarRect does not have a right property. This causes
+    // the mouse tool tip to be truncated when it's close to the right edge of the player.
+    // In such cases, we ignore the `playerRect.right - seekBarRect.right` value when calculating.
+    // For the sake of consistency, we ignore seekBarRect.left - playerRect.left for the left edge.
+    if (!spaceRightOfPoint) {
+      spaceRightOfPoint = seekBarRect.width - seekBarPointPx;
+      spaceLeftOfPoint = seekBarPointPx;
+    }
     // This is the number of pixels by which the tooltip will need to be pulled
     // further to the right to center it over the `seekBarPoint`.
     let pullTooltipBy = tooltipRect.width / 2;