@playkit-js/hotspots 3.1.7 → 3.1.8-canary.0-b1a4e2c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/hotspots",
-  "version": "3.1.7",
+  "version": "3.1.8-canary.0-b1a4e2c",
   "private": false,
   "bugs": {
     "url": "https://github.com/kaltura/playkit-js-hotspots/issues"
@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@playkit-js/kaltura-player-js": "canary",
+    "@playkit-js/ui-managers": "1.4.3-canary.0-b33eab0",
     "conventional-github-releaser": "3.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
@@ -82,7 +83,8 @@
   "kaltura": {
     "name": "playkit-js-hotspots",
     "dependencies": {
-      "playkit-kaltura-cuepoints": "3.0.6"
+      "playkit-kaltura-cuepoints": "3.0.6",
+      "@playkit-js/ui-managers": "1.4.1"
     }
   }
 }

package/src/hotspots-plugin.tsx

@@ -1,5 +1,7 @@
 import {h, ComponentChildren} from 'preact';
-import {ContribServices, FloatingItem, FloatingItemProps, FloatingUIModes, FloatingPositions, CuePoint, TimedMetadataEvent} from '@playkit-js/common';
+import {FloatingItem, FloatingManager, FloatingItemProps} from '@playkit-js/ui-managers';
+
+import {ContribServices, CuePoint, TimedMetadataEvent} from '@playkit-js/common';
 import {RawLayoutHotspot, LayoutHotspot, Canvas, RawFloatingCuepoint, Layout} from './utils/hotspot';
 import HotspotWrapper from './components/HotspotWrapper';
 import {ScaleCalculation, scaleVideo} from './utils/scale-video';
@@ -29,7 +31,6 @@ export class HotspotsPlugin extends KalturaPlayer.core.BasePlugin {
   static defaultConfig: HotspotsPluginConfig = {};
 
   private _player: KalturaPlayerTypes.Player;
-  private _contribServices: ContribServices;
   private _hotspots: LayoutHotspot[] = [];
   private _floatingItem: FloatingItem | null = null;
   private _canvas: Canvas | null = null;
@@ -37,19 +38,18 @@ export class HotspotsPlugin extends KalturaPlayer.core.BasePlugin {
   constructor(name: string, player: KalturaPlayerTypes.Player, config: HotspotsPluginConfig) {
     super(name, player, config);
     this._player = player;
-    this._contribServices = ContribServices.get({kalturaPlayer: this._player});
   }
 
   static isValid(): boolean {
     return true;
   }
 
-  get cuePointManager() {
-    return this._player.getService('kalturaCuepoints') as any;
+  private get floatingManager(): FloatingManager {
+    return (this.player.getService('floatingManager') as FloatingManager) || {};
   }
 
-  getUIComponents(): any[] {
-    return this._contribServices.register();
+  get cuePointManager() {
+    return this._player.getService('kalturaCuepoints') as any;
   }
 
   loadMedia(): void {
@@ -142,10 +142,10 @@ export class HotspotsPlugin extends KalturaPlayer.core.BasePlugin {
   };
 
   private _addHotspotsContainer(): void {
-    this._floatingItem = this._contribServices.floatingManager.add({
+    this._floatingItem = this.floatingManager.add({
       label: 'Hotspots',
-      mode: FloatingUIModes.MediaLoaded,
-      position: FloatingPositions.VideoArea,
+      mode: 'MediaLoaded',
+      position: 'VideoArea',
       renderContent: this._renderRoot
     });
   }
@@ -199,7 +199,7 @@ export class HotspotsPlugin extends KalturaPlayer.core.BasePlugin {
     this._hotspots = [];
     this._canvas = null;
     if (this._floatingItem) {
-      this._contribServices.floatingManager.remove(this._floatingItem);
+      this.floatingManager.remove(this._floatingItem);
       this._floatingItem = null;
     }
   }