keep thumbnail at edge of container (with a bit of margin) for less j…

…umpy behavior; move the arrow too
bitmovin · Feb 28, 2024 · 913d3f0 · 913d3f0
1 parent ecb8ce5
commit 913d3f0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/scss/skin-modern/components/_seekbarlabel.scss b/src/scss/skin-modern/components/_seekbarlabel.scss
@@ -76,7 +76,7 @@
   &[style*="transform"] {
     .#{$prefix}-seekbar-label-inner {
       &::after {
-        content: unset;
+        transform: translateX(calc(1px * var(--bmpui-seekbar-label-overflow-offset)));
       }
     }
   }

diff --git a/src/ts/components/seekbar.ts b/src/ts/components/seekbar.ts
@@ -1022,23 +1022,28 @@ export class SeekBar extends Component<SeekBarConfig> {
     }
 
     if (this.label) {
-      this.label.getDomElement().css({
+      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 = this.label.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 ((labelBounding.right - labelBounding.width / 2 ) > uiBounding.right) {
-          preventOverflowOffset = -(labelBounding.width / 2);
-        } else if ((labelBounding.left - labelBounding.width / 2) < uiBounding.left) {
-          preventOverflowOffset = +(labelBounding.width / 2);
+        if (labelRight + overflowMargin > uiBounding.right) {
+          preventOverflowOffset = labelRight - uiBounding.right + overflowMargin;
+        } else if (labelLeft - overflowMargin < uiBounding.left) {
+          preventOverflowOffset = labelLeft - uiBounding.left - overflowMargin;
         }
         if (preventOverflowOffset) {
-          this.label.getDomElement().css({
-            transform: `translateX(${preventOverflowOffset}px)`,
+          labelDomElement.css({
+            transform: `translateX(${-preventOverflowOffset}px)`
           });
+          labelDomElement.get(0).style.setProperty(`--${this.prefixCss('seekbar-label-overflow-offset')}`, String(preventOverflowOffset));
         }
       }
     }