Merge pull request #677 from bitmovin/feature/remove-seekbar-label-caret

Remove the caret from the `SeekbarLabel`
bitmovin · Jan 14, 2025 · c68eb5c · c68eb5c
2 parents f1a05ec + 0429da0
commit c68eb5c
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 46 deletions.
diff --git a/spec/components/labels/SeekbarLabel.spec.ts b/spec/components/labels/SeekbarLabel.spec.ts
@@ -109,7 +109,6 @@ describe('SeekBarLabel', () => {
     } as DOMRect;
 
     let containerGetDomElementMock: () => jest.Mocked<DOM>;
-    let caretGetDomElementMock: () => jest.Mocked<DOM>;
 
     beforeEach(() => {
       containerGetDomElementMock = jest
@@ -122,30 +121,7 @@ describe('SeekBarLabel', () => {
         }),
       });
 
-      caretGetDomElementMock = jest.fn().mockReturnValue(MockHelper.generateDOMMock());
-
       seekbarLabel["container"].getDomElement = containerGetDomElementMock;
-      seekbarLabel["caret"].getDomElement = caretGetDomElementMock;
-    });
-
-    it("when thumbnail within UI container bounds", () => {
-      const labelRect = {
-        x: 400,
-        y: 700,
-        width: 200,
-        height: 120,
-        top: 700,
-        right: 600,
-        bottom: 820,
-        left: 400,
-      } as DOMRect;
-
-      containerGetDomElementMock().get(0).parentElement!.getBoundingClientRect =
-        jest.fn().mockReturnValue(labelRect);
-
-      seekbarLabel.setPositionInBounds(100, uiContainerBoundingRect);
-
-      expect(caretGetDomElementMock().css).toHaveBeenCalledWith('transform', null);
     });
 
     it("when thumbnail would overflow UI container leftside", () => {

diff --git a/src/scss/components/labels/_seekbarlabel.scss b/src/scss/components/labels/_seekbarlabel.scss
@@ -26,20 +26,6 @@
     padding-right: 1em;
   }
 
-  // bottom arrow from http://www.cssarrowplease.com/
-  .#{$prefix}-seekbar-label-caret {
-    border: solid transparent;
-    border-color: transparent;
-    border-top-color: $color-primary;
-    border-width: .5em;
-    height: 0;
-    margin-left: -.5em;
-    pointer-events: none;
-    position: absolute;
-    top: 100%;
-    width: 0;
-  }
-
   .#{$prefix}-seekbar-label-inner {
     border: solid $color-primary .0625em;
     border-radius: .5em;

diff --git a/src/ts/components/seekbar/SeekBarLabel.ts b/src/ts/components/seekbar/SeekBarLabel.ts
@@ -37,7 +37,6 @@ export class SeekBarLabel extends Container<SeekBarLabelConfig> {
   private player: PlayerAPI;
   private uiManager: UIInstanceManager;
   private readonly container: Container<ContainerConfig>;
-  private readonly caret: Label<LabelConfig>;
 
   constructor(config: SeekBarLabelConfig = {}) {
     super(config);
@@ -58,11 +57,9 @@ export class SeekBarLabel extends Container<SeekBarLabelConfig> {
       cssClass: 'seekbar-label-inner',
     });
 
-    this.caret = new Label({ cssClasses: ['seekbar-label-caret'] });
-
     this.config = this.mergeConfig(config, {
       cssClass: 'ui-seekbar-label',
-      components: [this.container, this.caret],
+      components: [this.container],
       hidden: true,
     }, this.config);
   }
@@ -151,10 +148,6 @@ export class SeekBarLabel extends Container<SeekBarLabelConfig> {
 
     if (preventOverflowOffset !== 0) {
       this.getDomElement().css('left', seekPositionPx - preventOverflowOffset + 'px');
-
-      this.caret.getDomElement().css('transform', `translateX(${preventOverflowOffset}px)`);
-    } else {
-      this.caret.getDomElement().css('transform', null);
     }
   }