new seekbar option to prevent label overlap

src/scss/skin-modern/components/_seekbarlabel.scss

@@ -71,4 +71,13 @@
       }
     }
   }
+
+  // move arrow if the seekbar label was offset too
+  &[style*='transform'] {
+    .#{$prefix}-seekbar-label-inner {
+      &::after {
+        transform: translateX(calc(1px * var(--bmpui-seekbar-label-overflow-offset)));
+      }
+    }
+  }
 }

src/ts/components/seekbar.ts

@@ -16,6 +16,7 @@ import { i18n } from '../localization/i18n';
 import { BrowserUtils } from '../browserutils';
 import { TimelineMarkersHandler } from './timelinemarkershandler';
 import { getMinBufferLevel } from './seekbarbufferlevel';
+import {throttle} from '../throttle';
 
 /**
  * Configuration interface for the {@link SeekBar} component.
@@ -52,6 +53,11 @@ export interface SeekBarConfig extends ComponentConfig {
    * Used to enable/disable seek preview
    */
   enableSeekPreview?: boolean;
+
+  /**
+   * Prevent overflow of seekpreview
+   */
+  preventSeekPreviewOverflow?: boolean;
 }
 
 /**
@@ -134,6 +140,8 @@ export class SeekBar extends Component<SeekBarConfig> {
     onSeeked: new EventDispatcher<SeekBar, number>(),
   };
 
+  private uimanager: UIInstanceManager;
+
   constructor(config: SeekBarConfig = {}) {
     super(config);
 
@@ -151,6 +159,7 @@ export class SeekBar extends Component<SeekBarConfig> {
       tabIndex: 0,
       snappingRange: 1,
       enableSeekPreview: true,
+      preventSeekPreviewOverflow: false,
     }, this.config);
 
     this.label = this.config.label;
@@ -204,7 +213,7 @@ export class SeekBar extends Component<SeekBarConfig> {
 
   configure(player: PlayerAPI, uimanager: UIInstanceManager, configureSeek: boolean = true): void {
     super.configure(player, uimanager);
-
+    this.uimanager = uimanager;
     this.player = player;
 
     // Apply scaling transform to the backdrop bar to have all bars rendered similarly
@@ -991,6 +1000,33 @@ export class SeekBar extends Component<SeekBarConfig> {
     this.seekBarEvents.onSeek.dispatch(this);
   }
 
+  protected updateLabelPosition = throttle((seekPositionPercentage: number) => {
+    const labelDomElement = this.label.getDomElement();
+    labelDomElement.css({
+      'left': seekPositionPercentage + '%',
+      'transform': null,
+    });
+    if (this.config.preventSeekPreviewOverflow) {
+      const overflowMargin = 5;
+      const uiBounding =  this.uimanager.getUI().getDomElement().get(0).getBoundingClientRect();
+      const labelBounding = labelDomElement.get(0).getBoundingClientRect();
+      const labelRight = (labelBounding.right - labelBounding.width / 2 );
+      const labelLeft = (labelBounding.left - labelBounding.width / 2);
+      let preventOverflowOffset = 0;
+      if (labelRight + overflowMargin > uiBounding.right) {
+        preventOverflowOffset = labelRight - uiBounding.right + overflowMargin;
+      } else if (labelLeft - overflowMargin < uiBounding.left) {
+        preventOverflowOffset = labelLeft - uiBounding.left - overflowMargin;
+      }
+      if (preventOverflowOffset) {
+        labelDomElement.css({
+          transform: `translateX(${-preventOverflowOffset}px)`,
+        });
+        labelDomElement.get(0).style.setProperty(`--${this.prefixCss('seekbar-label-overflow-offset')}`, String(preventOverflowOffset));
+      }
+    }
+  }, 50)
+
   protected onSeekPreviewEvent(percentage: number, scrubbing: boolean) {
     let snappedMarker = this.timelineMarkersHandler && this.timelineMarkersHandler.getMarkerAtPosition(percentage);
 
@@ -1014,9 +1050,7 @@ export class SeekBar extends Component<SeekBarConfig> {
     }
 
     if (this.label) {
-      this.label.getDomElement().css({
-        'left': seekPositionPercentage + '%',
-      });
+      this.updateLabelPosition(seekPositionPercentage);
     }
 
     this.seekBarEvents.onSeekPreview.dispatch(this, {

src/ts/throttle.ts

@@ -0,0 +1,17 @@
+/**
+ * Returns a new function which will invocate the original no faster
+ * then every rateMs milliseconds.
+ */
+export function throttle(fn: Function, rateMs: number) {
+   let timerFlag : null | ReturnType<typeof setTimeout> = null;
+
+   return (...args: unknown[]) => {
+      if (timerFlag === null) {
+         fn(...args);
+         timerFlag = setTimeout(() => {
+            timerFlag = null;
+         }, rateMs);
+      }
+   };
+}
+