bitmovin-player-ui 3.75.0 → 3.76.0

package/dist/js/framework/components/seekbar.d.ts

@@ -93,7 +93,9 @@ export declare class SeekBar extends Component<SeekBarConfig> {
     private label;
     private seekBarMarkersContainer;
     private timelineMarkersHandler;
+    private uiBoundingRect;
     private player;
+    private uiManager;
     protected seekBarType: SeekBarType;
     protected isUiShown: boolean;
     /**
@@ -206,7 +208,8 @@ export declare class SeekBar extends Component<SeekBarConfig> {
      */
     getLabel(): SeekBarLabel | null;
     protected onSeekEvent(): void;
-    protected onSeekPreviewEvent(percentage: number, scrubbing: boolean): void;
+    private updateLabelPosition;
+    protected onSeekPreviewEvent(percentage: number, targetOffsetPx: number, scrubbing: boolean): void;
     protected onSeekedEvent(percentage: number): void;
     /**
      * Gets the event that is fired when a scrubbing seek operation is started.

package/dist/js/framework/components/seekbar.js

@@ -92,6 +92,12 @@ var SeekBar = exports.SeekBar = /** @class */ (function (_super) {
                 _this.player.seek(targetPlaybackPosition, 'ui');
             }
         };
+        _this.updateLabelPosition = function (pixelPosition) {
+            if (!_this.uiBoundingRect) {
+                _this.uiBoundingRect = _this.uiManager.getUI().getDomElement().get(0).getBoundingClientRect();
+            }
+            _this.label.setPositionInBounds(pixelPosition, _this.uiBoundingRect);
+        };
         var keyStepIncrements = _this.config.keyStepIncrements || {
             leftRight: 1,
             upDown: 5,
@@ -154,6 +160,7 @@ var SeekBar = exports.SeekBar = /** @class */ (function (_super) {
         if (configureSeek === void 0) { configureSeek = true; }
         _super.prototype.configure.call(this, player, uimanager);
         this.player = player;
+        this.uiManager = uimanager;
         // Apply scaling transform to the backdrop bar to have all bars rendered similarly
         // (the call must be up here to be executed for the volume slider as well)
         this.setPosition(this.seekBarBackdrop, 100);
@@ -354,6 +361,7 @@ var SeekBar = exports.SeekBar = /** @class */ (function (_super) {
         // is positioned absolutely and must therefore be updated when the size of the seekbar changes.
         player.on(player.exports.PlayerEvent.PlayerResized, function () {
             _this.refreshPlaybackPosition();
+            _this.uiBoundingRect = _this.uiManager.getUI().getDomElement().get(0).getBoundingClientRect();
         });
         // Additionally, when this code is called, the seekbar is not part of the UI yet and therefore does not have a size,
         // resulting in a wrong initial position of the marker. Refreshing it once the UI is configured solved this issue.
@@ -551,10 +559,12 @@ var SeekBar = exports.SeekBar = /** @class */ (function (_super) {
             if (_this.player.vr != null) {
                 e.stopPropagation();
             }
-            var targetPercentage = 100 * _this.getOffset(e);
+            var offset = _this.getOffset(e);
+            var targetPercentage = 100 * offset;
+            var seekPositionPx = offset * _this.seekBar.width();
             _this.setSeekPosition(targetPercentage);
             _this.setPlaybackPosition(targetPercentage);
-            _this.onSeekPreviewEvent(targetPercentage, true);
+            _this.onSeekPreviewEvent(targetPercentage, seekPositionPx, true);
         };
         var mouseTouchUpHandler = function (e) {
             var _a;
@@ -599,9 +609,11 @@ var SeekBar = exports.SeekBar = /** @class */ (function (_super) {
             if (seeking) {
                 mouseTouchMoveHandler(e);
             }
-            var position = 100 * _this.getOffset(e);
-            _this.setSeekPosition(position);
-            _this.onSeekPreviewEvent(position, false);
+            var offset = _this.getOffset(e);
+            var seekPositionPercentage = 100 * offset;
+            var seekPositionPx = offset * _this.seekBar.width();
+            _this.setSeekPosition(seekPositionPercentage);
+            _this.onSeekPreviewEvent(seekPositionPercentage, seekPositionPx, false);
             if (_this.hasLabel() && _this.getLabel().isHidden()) {
                 _this.getLabel().show();
             }
@@ -815,7 +827,7 @@ var SeekBar = exports.SeekBar = /** @class */ (function (_super) {
     SeekBar.prototype.onSeekEvent = function () {
         this.seekBarEvents.onSeek.dispatch(this);
     };
-    SeekBar.prototype.onSeekPreviewEvent = function (percentage, scrubbing) {
+    SeekBar.prototype.onSeekPreviewEvent = function (percentage, targetOffsetPx, scrubbing) {
         var snappedMarker = this.timelineMarkersHandler && this.timelineMarkersHandler.getMarkerAtPosition(percentage);
         var seekPositionPercentage = percentage;
         if (snappedMarker) {
@@ -837,9 +849,7 @@ var SeekBar = exports.SeekBar = /** @class */ (function (_super) {
             }
         }
         if (this.label) {
-            this.label.getDomElement().css({
-                'left': seekPositionPercentage + '%',
-            });
+            this.updateLabelPosition(targetOffsetPx);
         }
         this.seekBarEvents.onSeekPreview.dispatch(this, {
             scrubbing: scrubbing,

package/dist/js/framework/components/seekbarlabel.d.ts

@@ -22,9 +22,12 @@ export declare class SeekBarLabel extends Container<SeekBarLabelConfig> {
     private appliedMarkerCssClasses;
     private player;
     private uiManager;
+    private readonly container;
+    private readonly caret;
     constructor(config?: SeekBarLabelConfig);
     configure(player: PlayerAPI, uimanager: UIInstanceManager): void;
     private handleSeekPreview;
+    setPositionInBounds(seekPositionPx: number, bounds: DOMRect): void;
     /**
      * Sets arbitrary text on the label.
      * @param text the text to show on the label

package/dist/js/framework/components/seekbarlabel.js

@@ -78,18 +78,20 @@ var SeekBarLabel = /** @class */ (function (_super) {
         _this.titleLabel = new label_1.Label({ cssClasses: ['seekbar-label-title'] });
         _this.thumbnail = new component_1.Component({ cssClasses: ['seekbar-thumbnail'], role: 'img' });
         _this.thumbnailImageLoader = new imageloader_1.ImageLoader();
+        _this.container = new container_1.Container({
+            components: [
+                _this.thumbnail,
+                new container_1.Container({
+                    components: [_this.titleLabel, _this.timeLabel],
+                    cssClass: 'seekbar-label-metadata',
+                }),
+            ],
+            cssClass: 'seekbar-label-inner',
+        });
+        _this.caret = new label_1.Label({ cssClasses: ['seekbar-label-caret'] });
         _this.config = _this.mergeConfig(config, {
             cssClass: 'ui-seekbar-label',
-            components: [new container_1.Container({
-                    components: [
-                        _this.thumbnail,
-                        new container_1.Container({
-                            components: [_this.titleLabel, _this.timeLabel],
-                            cssClass: 'seekbar-label-metadata',
-                        })
-                    ],
-                    cssClass: 'seekbar-label-inner',
-                })],
+            components: [_this.container, _this.caret],
             hidden: true,
         }, _this.config);
         return _this;
@@ -111,6 +113,25 @@ var SeekBarLabel = /** @class */ (function (_super) {
         uimanager.getConfig().events.onUpdated.subscribe(init);
         init();
     };
+    SeekBarLabel.prototype.setPositionInBounds = function (seekPositionPx, bounds) {
+        this.getDomElement().css('left', seekPositionPx + 'px');
+        // Check parent container as it has a padding that needs to be considered
+        var labelBounding = this.container.getDomElement().get(0).parentElement.getBoundingClientRect();
+        var preventOverflowOffset = 0;
+        if (labelBounding.right > bounds.right) {
+            preventOverflowOffset = labelBounding.right - bounds.right;
+        }
+        else if (labelBounding.left < bounds.left) {
+            preventOverflowOffset = labelBounding.left - bounds.left;
+        }
+        if (preventOverflowOffset !== 0) {
+            this.getDomElement().css('left', seekPositionPx - preventOverflowOffset + 'px');
+            this.caret.getDomElement().css('transform', "translateX(".concat(preventOverflowOffset, "px)"));
+        }
+        else {
+            this.caret.getDomElement().css('transform', null);
+        }
+    };
     /**
      * Sets arbitrary text on the label.
      * @param text the text to show on the label

package/dist/js/framework/main.js

@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClickOverlay = exports.VolumeControlButton = exports.TitleBar = exports.SubtitleSelectBox = exports.SubtitleOverlay = exports.SeekBarLabel = exports.RecommendationOverlay = exports.ErrorMessageOverlay = exports.Component = exports.CastToggleButton = exports.CastStatusOverlay = exports.AudioTrackSelectBox = exports.AudioQualitySelectBox = exports.Label = exports.Container = exports.UIContainer = exports.Watermark = exports.VRToggleButton = exports.VolumeToggleButton = exports.VideoQualitySelectBox = exports.ToggleButton = exports.SettingsToggleButton = exports.SettingsPanel = exports.ItemSelectionList = exports.SelectBox = exports.SeekBar = exports.PlaybackToggleButton = exports.PlaybackTimeLabelMode = exports.PlaybackTimeLabel = exports.HugePlaybackToggleButton = exports.FullscreenToggleButton = exports.ControlBar = exports.Button = exports.ListOrientation = exports.ListNavigationGroup = exports.RootNavigationGroup = exports.NavigationGroup = exports.SpatialNavigation = exports.I18n = exports.i18n = exports.ErrorUtils = exports.StorageUtils = exports.BrowserUtils = exports.UIUtils = exports.PlayerUtils = exports.StringUtils = exports.ArrayUtils = exports.DemoFactory = exports.UIFactory = exports.version = void 0;
 exports.ListSelector = exports.QuickSeekButton = exports.ReplayButton = exports.SettingsPanelItem = exports.SubtitleSettingsPanelPage = exports.SettingsPanelPageOpenButton = exports.SettingsPanelPageBackButton = exports.SettingsPanelPage = exports.AudioTrackListBox = exports.SubtitleListBox = exports.ListBox = exports.SubtitleSettingsResetButton = exports.WindowOpacitySelectBox = exports.WindowColorSelectBox = exports.SubtitleSettingsLabel = exports.SubtitleSettingSelectBox = exports.FontSizeSelectBox = exports.FontOpacitySelectBox = exports.FontFamilySelectBox = exports.FontColorSelectBox = exports.CharacterEdgeSelectBox = exports.BackgroundOpacitySelectBox = exports.BackgroundColorSelectBox = exports.Spacer = exports.PictureInPictureToggleButton = exports.VolumeSlider = exports.AirPlayToggleButton = exports.MetadataLabelContent = exports.MetadataLabel = exports.CloseButton = exports.PlaybackToggleOverlay = exports.CastUIContainer = exports.BufferingOverlay = exports.HugeReplayButton = exports.PlaybackSpeedSelectBox = exports.AdClickOverlay = exports.AdMessageLabel = exports.AdSkipButton = void 0;
-exports.version = '3.75.0';
+exports.version = '3.76.0';
 // Management
 __exportStar(require("./uimanager"), exports);
 __exportStar(require("./uiconfig"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitmovin-player-ui",
-  "version": "3.75.0",
+  "version": "3.76.0",
   "description": "Bitmovin Player UI Framework",
   "main": "./dist/js/framework/main.js",
   "types": "./dist/js/framework/main.d.ts",

package/spec/components/seekbar.spec.ts

@@ -114,7 +114,7 @@ describe('SeekBar', () => {
 
         jest.spyOn(playerMock, 'getSeekableRange').mockImplementation(() => ({start: 26, end: 30}));
 
-        seekbar['onSeekPreviewEvent'](40, true)
+        seekbar['onSeekPreviewEvent'](40, 100, true);
 
         playerMock.eventEmitter.fireSegmentRequestFinished();
 
@@ -127,19 +127,19 @@ describe('SeekBar', () => {
       it('will update the scrubber location after a successful segment request download and the user is not scrubbing', () => {
         jest.spyOn(playerMock, 'getSeekableRange').mockImplementation(() => ({start: 26, end: 30}));
 
-        seekbar['onSeekPreviewEvent'](18, false)
+        seekbar['onSeekPreviewEvent'](18, 100, false);
 
         playerMock.eventEmitter.fireSegmentRequestFinished();
 
         expect(setPlaybackPositionSpy).toHaveBeenLastCalledWith(18);
-        expect(setBufferPositionSpy).toHaveBeenLastCalledWith(18)
+        expect(setBufferPositionSpy).toHaveBeenLastCalledWith(18);
       });
     });
   });
 
   describe('group playback', () => {
     beforeEach(() => {
-      jest.spyOn(playerMock, 'getDuration').mockReturnValue(0)
+      jest.spyOn(playerMock, 'getDuration').mockReturnValue(0);
       seekbar.configure(playerMock, uiInstanceManagerMock);
     });
 

package/spec/components/seekbarlabel.spec.ts

@@ -2,6 +2,7 @@ import { MockHelper, TestingPlayerAPI } from '../helper/MockHelper';
 import { UIInstanceManager } from '../../src/ts/uimanager';
 import { SeekBarLabel } from '../../src/ts/components/seekbarlabel';
 import { SeekPreviewEventArgs } from '../../src/ts/components/seekbar';
+import { DOM } from '../../src/ts/dom';
 
 let playerMock: TestingPlayerAPI;
 let uiInstanceManagerMock: UIInstanceManager;
@@ -94,4 +95,97 @@ describe('SeekBarLabel', () => {
       });
     });
   });
+
+  describe("calculates correct values for thumbnail positioning", () => {
+    const uiContainerBoundingRect = {
+      x: 200,
+      y: 150,
+      width: 1600,
+      height: 900,
+      top: 150,
+      right: 1800,
+      bottom: 1050,
+      left: 200,
+    } as DOMRect;
+
+    let containerGetDomElementMock: () => jest.Mocked<DOM>;
+    let caretGetDomElementMock: () => jest.Mocked<DOM>;
+
+    beforeEach(() => {
+      containerGetDomElementMock = jest
+        .fn()
+        .mockReturnValue(MockHelper.generateDOMMock());
+
+      containerGetDomElementMock().get = jest.fn().mockReturnValue({
+        parentElement: jest.fn().mockReturnValue({
+          getBoundingClientRect: jest.fn(),
+        }),
+      });
+
+      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", () => {
+      const labelRect = {
+        x: 180,
+        y: 700,
+        width: 200,
+        height: 120,
+        top: 700,
+        right: 380,
+        bottom: 820,
+        left: 180,
+      } as DOMRect;
+
+      containerGetDomElementMock().get(0).parentElement!.getBoundingClientRect =
+        jest.fn().mockReturnValue(labelRect);
+
+      seekbarLabel.setPositionInBounds(100, uiContainerBoundingRect);
+
+      expect(seekbarLabel.getDomElement().css).toHaveBeenCalledWith('left', '120px');
+    });
+
+    it("when thumbnail would overflow UI container rightside", () => {
+      const labelRect = {
+        x: 1650,
+        y: 700,
+        width: 200,
+        height: 120,
+        top: 700,
+        right: 1850,
+        bottom: 820,
+        left: 1650,
+      } as DOMRect;
+
+      containerGetDomElementMock().get(0).parentElement!.getBoundingClientRect =
+        jest.fn().mockReturnValue(labelRect);
+
+      seekbarLabel.setPositionInBounds(100, uiContainerBoundingRect);
+
+      expect(seekbarLabel.getDomElement().css).toHaveBeenCalledWith('left', '50px');
+    });
+  });
 });

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

@@ -21,27 +21,28 @@
 
   > .#{$prefix}-container-wrapper {
     @extend %center-on-left-edge;
+
+    padding-left: 1em;
+    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-bottom: .2em solid $color-primary;
 
-    // bottom arrow from http://www.cssarrowplease.com/
-    &::after {
-      border: solid transparent;
-      border-color: transparent;
-      border-top-color: $color-primary;
-      border-width: .5em;
-      content: ' ';
-      height: 0;
-      left: 50%;
-      margin-left: -.5em;
-      pointer-events: none;
-      position: absolute;
-      top: 100%;
-      width: 0;
-    }
-
     > .#{$prefix}-container-wrapper {
       position: relative;
 

package/src/ts/components/seekbar.ts

@@ -114,7 +114,10 @@ export class SeekBar extends Component<SeekBarConfig> {
   private seekBarMarkersContainer: DOM;
   private timelineMarkersHandler: TimelineMarkersHandler;
 
+  private uiBoundingRect: DOMRect;
+
   private player: PlayerAPI;
+  private uiManager: UIInstanceManager;
 
   protected seekBarType: SeekBarType;
 
@@ -220,6 +223,7 @@ export class SeekBar extends Component<SeekBarConfig> {
     super.configure(player, uimanager);
 
     this.player = player;
+    this.uiManager = uimanager;
 
     // Apply scaling transform to the backdrop bar to have all bars rendered similarly
     // (the call must be up here to be executed for the volume slider as well)
@@ -453,6 +457,7 @@ export class SeekBar extends Component<SeekBarConfig> {
     // is positioned absolutely and must therefore be updated when the size of the seekbar changes.
     player.on(player.exports.PlayerEvent.PlayerResized, () => {
       this.refreshPlaybackPosition();
+      this.uiBoundingRect = this.uiManager.getUI().getDomElement().get(0).getBoundingClientRect();
     });
     // Additionally, when this code is called, the seekbar is not part of the UI yet and therefore does not have a size,
     // resulting in a wrong initial position of the marker. Refreshing it once the UI is configured solved this issue.
@@ -716,10 +721,13 @@ export class SeekBar extends Component<SeekBarConfig> {
         e.stopPropagation();
       }
 
-      let targetPercentage = 100 * this.getOffset(e);
+      const offset = this.getOffset(e);
+      const targetPercentage = 100 * offset;
+      const seekPositionPx = offset * this.seekBar.width();
+
       this.setSeekPosition(targetPercentage);
       this.setPlaybackPosition(targetPercentage);
-      this.onSeekPreviewEvent(targetPercentage, true);
+      this.onSeekPreviewEvent(targetPercentage, seekPositionPx, true);
     };
 
     let mouseTouchUpHandler = (e: MouseEvent | TouchEvent) => {
@@ -777,10 +785,12 @@ export class SeekBar extends Component<SeekBarConfig> {
         mouseTouchMoveHandler(e);
       }
 
-      let position = 100 * this.getOffset(e);
-      this.setSeekPosition(position);
+      const offset = this.getOffset(e);
+      const seekPositionPercentage = 100 * offset;
+      const seekPositionPx = offset * this.seekBar.width();
 
-      this.onSeekPreviewEvent(position, false);
+      this.setSeekPosition(seekPositionPercentage);
+      this.onSeekPreviewEvent(seekPositionPercentage, seekPositionPx, false);
 
       if (this.hasLabel() && this.getLabel().isHidden()) {
         this.getLabel().show();
@@ -1020,7 +1030,15 @@ export class SeekBar extends Component<SeekBarConfig> {
     this.seekBarEvents.onSeek.dispatch(this);
   }
 
-  protected onSeekPreviewEvent(percentage: number, scrubbing: boolean) {
+  private updateLabelPosition = (pixelPosition: number) => {
+    if (!this.uiBoundingRect) {
+      this.uiBoundingRect = this.uiManager.getUI().getDomElement().get(0).getBoundingClientRect();
+    }
+
+    this.label.setPositionInBounds(pixelPosition, this.uiBoundingRect);
+  };
+
+  protected onSeekPreviewEvent(percentage: number, targetOffsetPx: number, scrubbing: boolean) {
     let snappedMarker = this.timelineMarkersHandler && this.timelineMarkersHandler.getMarkerAtPosition(percentage);
 
     let seekPositionPercentage = percentage;
@@ -1043,9 +1061,7 @@ export class SeekBar extends Component<SeekBarConfig> {
     }
 
     if (this.label) {
-      this.label.getDomElement().css({
-        'left': seekPositionPercentage + '%',
-      });
+      this.updateLabelPosition(targetOffsetPx);
     }
 
     this.seekBarEvents.onSeekPreview.dispatch(this, {

package/src/ts/components/seekbarlabel.ts

@@ -36,6 +36,8 @@ export class SeekBarLabel extends Container<SeekBarLabelConfig> {
   private appliedMarkerCssClasses: string[] = [];
   private player: PlayerAPI;
   private uiManager: UIInstanceManager;
+  private readonly container: Container<ContainerConfig>;
+  private readonly caret: Label<LabelConfig>;
 
   constructor(config: SeekBarLabelConfig = {}) {
     super(config);
@@ -45,17 +47,22 @@ export class SeekBarLabel extends Container<SeekBarLabelConfig> {
     this.thumbnail = new Component({ cssClasses: ['seekbar-thumbnail'], role: 'img' });
     this.thumbnailImageLoader = new ImageLoader();
 
+    this.container = new Container({
+      components: [
+        this.thumbnail,
+        new Container({
+          components: [this.titleLabel, this.timeLabel],
+          cssClass: 'seekbar-label-metadata',
+        }),
+      ],
+      cssClass: 'seekbar-label-inner',
+    });
+
+    this.caret = new Label({ cssClasses: ['seekbar-label-caret'] });
+
     this.config = this.mergeConfig(config, {
       cssClass: 'ui-seekbar-label',
-      components: [new Container({
-        components: [
-          this.thumbnail,
-          new Container({
-            components: [this.titleLabel, this.timeLabel],
-            cssClass: 'seekbar-label-metadata',
-          })],
-        cssClass: 'seekbar-label-inner',
-      })],
+      components: [this.container, this.caret],
       hidden: true,
     }, this.config);
   }
@@ -129,6 +136,28 @@ export class SeekBarLabel extends Container<SeekBarLabelConfig> {
     }
   };
 
+  public setPositionInBounds(seekPositionPx: number, bounds: DOMRect) {
+    this.getDomElement().css('left', seekPositionPx + 'px');
+
+    // Check parent container as it has a padding that needs to be considered
+    const labelBounding = this.container.getDomElement().get(0).parentElement.getBoundingClientRect();
+
+    let preventOverflowOffset = 0;
+    if (labelBounding.right > bounds.right) {
+      preventOverflowOffset = labelBounding.right - bounds.right;
+    } else if (labelBounding.left < bounds.left) {
+      preventOverflowOffset = labelBounding.left - bounds.left;
+    }
+
+    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);
+    }
+  }
+
   /**
    * Sets arbitrary text on the label.
    * @param text the text to show on the label