feat(FEC-10015): support smart scrubber preview and timeline marker (#…

…359)

* Expose the new api's `registerManager`, `getManager` and `hasManager`
* Fix the `KPUIComponent`

Related to kaltura/playkit-js-ui#546, kaltura/playkit-js-timeline#1, kaltura/playkit-js-ima#178

Solves FEC-10015

docs/advertisement-layout-management.md

@@ -14,12 +14,13 @@ Ad break can be set as pre, mid and post rolls and each ad break can contain a s
 - [Play Ads After Time](#play-ads-after-time)
 - [Events](#events)
 - [Play Ad Now](#play-ad-now)
+- [Seekbar Cue Points](#seekbar-cue-points)
 
 ### Single Ad
 
 Here's a simple scheme sample which contains 4 ad breaks: 1 pre-roll, 2 mid-rolls and 1 post-roll:
 
-```ecmascript 6
+```js
 const config = {
   ...
   plugins: {
@@ -65,7 +66,7 @@ An ad break may contain a list of ads, also referred to as ad pod.
 
 Ad pod sample:
 
-```ecmascript 6
+```js
 const config = {
   ...
   plugins: {
@@ -108,7 +109,7 @@ An application may want to set a fallback vast url, so in case the primary ad re
 This mechanism called _Waterfalling_, is configurable easily using the ad layout config.  
 Here's a sample of a mid-roll with waterfalling:
 
-```ecmascript 6
+```js
 const config = {
   ...
   plugins: {
@@ -158,7 +159,7 @@ Each ad in the `ads` list gets the following options:
 All the options above work together, that means the application may use and mix them in the same `advertising` object.
 Here's a sample:
 
-```ecmascript 6
+```js
 const config = {
   ...
   plugins: {
@@ -208,7 +209,7 @@ const kalturaPlayer = KalturaPlayer.setup(config);
 An application may want to configure the player to play ads only from a specific time.  
 This can be achieved by `playAdsAfterTime` parameter. For example:
 
-```ecmascript 6
+```js
 const config = {
   ...
   plugins: {
@@ -241,7 +242,7 @@ In this sample, the player will skip the pre-roll, and will play the mid-roll on
 This option can be used also when `playback.startTime` is set, which by default causes the player to skip the ads scheduled before the start time.
 Although, An application may want to force the player to play these ads. This can be achieved also by `playAdsAfterTime` parameter. For example:
 
-```ecmascript 6
+```js
 const config = {
   ...
   playback: {
@@ -281,7 +282,7 @@ In addition to the current [ad events](./ads.md#ad-events) (`adbreakstart, adbre
 All the above features are supported not only by `advertising` config, but also by `playAdNow` api which gets an ad pod as a parameter.  
 The app may call it whenever it wants to play an ad pod.
 
-```ecmascript 6
+```js
 const config = {
   ...
   plugins: {
@@ -300,3 +301,55 @@ kalturaPlayer.ads.playAdNow(
     },
   ]);
 ```
+
+### Seekbar Cue Points
+
+To display cue points on the seekbar to indicates the ad break positions use `showAdBreakCuePoint` option, as following:
+```js
+const config = {
+  ...
+  plugins: {
+    ima: {}
+  },
+  advertising: {
+    showAdBreakCuePoint: true,
+    adBreaks: [{
+      position: 60,
+      ads: [{
+          url: [MID_ROLL_VAST_URL]
+        }]
+      }
+    ]
+  }
+  ...
+}
+```
+
+To customize the cue points style use `adBreakCuePointStyle` option. for example:
+```js
+const config = {
+  ...
+  plugins: {
+    ima: {}
+  },
+  advertising: {
+    showAdBreakCuePoint: true,
+    adBreakCuePointStyle: {
+     marker: {
+       width: 10,
+       color: 'rgb(255, 0, 0)' 
+      }   
+    },
+    adBreaks: [{
+      position: 60,
+      ads: [{
+          url: [MID_ROLL_VAST_URL]
+        }]
+      }
+    ]
+  }
+  ...
+}
+```
+
+All style options are listed [here](https://github.com/kaltura/playkit-js-timeline/blob/main/docs/types.md#cuepointoptionsobject).