From 72b0c279aa51a494ccf7159dbbc5393242a9f3b1 Mon Sep 17 00:00:00 2001
From: amtins <andre.martins@rts.ch>
Date: Fri, 15 Dec 2023 13:38:01 +0100
Subject: [PATCH] fix(time-tooltip): component overflow

---
 .../progress-control/time-tooltip.js          | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/js/control-bar/progress-control/time-tooltip.js b/src/js/control-bar/progress-control/time-tooltip.js
index 4485570441..1bab8daaa6 100644
--- a/src/js/control-bar/progress-control/time-tooltip.js
+++ b/src/js/control-bar/progress-control/time-tooltip.js
@@ -53,6 +53,38 @@ class TimeTooltip extends Component {
    */
   update(seekBarRect, seekBarPoint, content) {
     this.write(content);
+
+    const seekBarRectWidth = seekBarRect.width;
+    const position = seekBarRectWidth * seekBarPoint;
+    const timeTooltipWidth = parseFloat(Dom.computedStyle(this.el(), 'width'));
+    const timeTooltipPosition = position + timeTooltipWidth / 2;
+    const isSeekBarSmallerThanTimeTooltip = seekBarRectWidth < timeTooltipWidth;
+
+    // Keeps the component centered if were not reaching the far left/right
+    // of the seek bar or if the seek bar is smaller than the time tooltip
+    if (
+      timeTooltipPosition >= timeTooltipWidth &&
+      timeTooltipPosition <= seekBarRectWidth &&
+      this.el().style.length ||
+      isSeekBarSmallerThanTimeTooltip
+    ) {
+      this.el().style = '';
+      return;
+    }
+
+    // Avoid component right overflow
+    const isOverflowingRight = timeTooltipPosition >= seekBarRectWidth;
+
+    if (isOverflowingRight) {
+      this.el().style.transform = `translateX(calc(50% - ${Math.abs(seekBarRectWidth - timeTooltipPosition)}px))`;
+    }
+
+    // Avoid component left overflow
+    const isOverflowingLeft = timeTooltipPosition <= timeTooltipWidth;
+
+    if (isOverflowingLeft) {
+      this.el().style.transform = `translateX(calc(50% + ${Math.abs(timeTooltipPosition - timeTooltipWidth)}px))`;
+    }
   }
 
   /**