fix(SUP-46685): Multiple Chapters in Quiz Break the Timeline

**Issue:**
Timing issue: in some cases the delay in the setTimeOut in SeekBar.tsx
file is not enough, and the bottomBarClientRect in BottomBar.tsx being
updated too late, just after the set time out scope is being executed.
This affects the seekBar width, which creates a problem with position
the cue-points on the seekBar.

**Fix:**
Add an event that will update the seekBar every time the
bottomBarClientRect is being updated. The seekBar.tsx will always get
the most updated width.

solved-[SUP-46685](https://kaltura.atlassian.net/browse/SUP-46685)

[SUP-46685]:
https://kaltura.atlassian.net/browse/SUP-46685?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: yambenari24

src/components/bottom-bar/bottom-bar.tsx

@@ -10,6 +10,7 @@ import {withEventManager} from '../../event';
 import {withPlayer} from '../player';
 import {filterControlsByPriority} from './bottom-bar-utils';
 import {BottomBarRegistryManager, bottomBarRegistryManager} from './bottom-bar-registry-manager';
+import {BottomBarClientRectEvent} from '../../event/events/bottom-bar-client-rect-event';
 
 const LOWER_PRIORITY_CONTROLS: string[][] = [
   ['PictureInPicture'],
@@ -99,6 +100,8 @@ class BottomBar extends Component<any, any> {
     const currentControlsWidth = this._getControlsWidth(resizeObserverEntry.target as HTMLElement);
     this._maxControlsWidth = Math.max(this._maxControlsWidth, currentControlsWidth);
     if (barWidth !== this.currentBarWidth) {
+      const {player} = this.props;
+      player.dispatchEvent(new BottomBarClientRectEvent());
       this.currentBarWidth = barWidth;
       const currCrlWidth = this.props.guiClientRect.width <= PLAYER_BREAK_POINTS.SMALL ? CRL_WIDTH + CRL_MARGIN / 2 : CRL_WIDTH + CRL_MARGIN;
       const lowerPriorityControls = LOWER_PRIORITY_CONTROLS.filter(c => this.state.activeControls[c[0]]);

src/components/seekbar/seekbar.tsx

@@ -98,6 +98,11 @@ class SeekBar extends Component<any, any> {
     }
   ];
 
+  handleUpdateSeekBarClientRect = () => {
+    const clientRect = this._seekBarElement.getBoundingClientRect();
+    this.props.updateSeekbarClientRect(clientRect);
+  };
+
   /**
    * on component mount, bind mouseup and mousemove events to top player element
    *
@@ -108,14 +113,7 @@ class SeekBar extends Component<any, any> {
     const {player, eventManager} = this.props;
     const clientRect = this._seekBarElement.getBoundingClientRect();
     this.props.updateSeekbarClientRect(clientRect);
-    eventManager.listen(player, EventType.GUI_RESIZE, () => {
-      this.setState({resizing: true});
-      setTimeout(() => {
-        const clientRect = this._seekBarElement.getBoundingClientRect();
-        this.props.updateSeekbarClientRect(clientRect);
-        this.setState({resizing: false});
-      }, Number(style.defaultTransitionTime));
-    });
+
     const smallSizes = [PLAYER_SIZE.TINY, PLAYER_SIZE.EXTRA_SMALL, PLAYER_SIZE.SMALL];
     eventManager.listenOnce(player, player.Event.UI.USER_CLICKED_PLAY, () => {
       eventManager.listenOnce(player, player.Event.Core.FIRST_PLAY, () => {
@@ -124,6 +122,8 @@ class SeekBar extends Component<any, any> {
         }
       });
     });
+
+    eventManager.listen(player, EventType.BOTTOM_BAR_CLIENT_RECT_CHANGED, this.handleUpdateSeekBarClientRect);
     document.addEventListener('mouseup', this.onPlayerMouseUp);
     document.addEventListener('mousemove', this.onPlayerMouseMove);
     this.props.registerKeyboardEvents(this._keyboardEventHandlers);
@@ -519,8 +519,7 @@ class SeekBar extends Component<any, any> {
       <div
         className={this.props.hidePreview ? [style.framePreview, style.hideFramePreview].join(' ') : style.framePreview}
         style={this._getFramePreviewStyle()}
-        ref={c => (c ? (this._framePreviewElement = c) : undefined)}
-      >
+        ref={c => (c ? (this._framePreviewElement = c) : undefined)}>
         <SeekBarPreview virtualTime={this.props.virtualTime} />
       </div>
     );
@@ -591,8 +590,7 @@ class SeekBar extends Component<any, any> {
         onTouchStart={this.onSeekbarTouchStart}
         onTouchMove={this.onSeekbarTouchMove}
         onTouchEnd={this.onSeekbarTouchEnd}
-        onKeyDown={this.onKeyDown}
-      >
+        onKeyDown={this.onKeyDown}>
         <div className={style.progressBar}>
           <PlayerArea name={'SeekBar'} shouldUpdate={true}>
             {this.renderFramePreview()}

src/event/event-type.ts

@@ -37,7 +37,8 @@ const EventType = {
   USER_SELECTED_CAPTIONS_FONT_STYLE: `${namespace}-userselectedcaptionsfontstyle`,
   USER_SELECTED_CAPTIONS_FONT_OPACITY: `${namespace}-userselectedcaptionsfontopacity`,
   USER_SELECTED_CAPTIONS_BACKGROUND_COLOR: `${namespace}-userselectedcaptionsbackgroundcolor`,
-  USER_SELECTED_CAPTIONS_BACKGROUND_OPACITY: `${namespace}-userselectedcaptionsbackgroundopacity`
+  USER_SELECTED_CAPTIONS_BACKGROUND_OPACITY: `${namespace}-userselectedcaptionsbackgroundopacity`,
+  BOTTOM_BAR_CLIENT_RECT_CHANGED: `${namespace}-bottombarclientrectchanged`
 } as const;
 
 export {EventType};

src/event/events/bottom-bar-client-rect-event.ts

@@ -0,0 +1,20 @@
+import {FakeEvent} from '@playkit-js/playkit-js';
+import {EventType} from '../event-type';
+
+/**
+ * BottomBarClientRectEvent event
+ *
+ * @class BottomBarClientRectEvent
+ * @extends {FakeEvent}
+ */
+class BottomBarClientRectEvent extends FakeEvent {
+  /**
+   * @constructor
+   *
+   */
+  constructor() {
+    super(EventType.BOTTOM_BAR_CLIENT_RECT_CHANGED);
+  }
+}
+
+export {BottomBarClientRectEvent};