@playkit-js/hotspots 3.1.13 → 3.2.0-canary.0-dd7c4af

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/hotspots",
-  "version": "3.1.13",
+  "version": "3.2.0-canary.0-dd7c4af",
   "private": false,
   "bugs": {
     "url": "https://github.com/kaltura/playkit-js-hotspots/issues"

package/src/components/Hotspot.tsx

@@ -2,6 +2,7 @@ import {h, Component} from 'preact';
 import {A11yWrapper} from '@playkit-js/common';
 import {LayoutHotspot} from '../utils/hotspot';
 import {AnalyticsEvents} from '../utils/analyticsEvents';
+import {HotspotsEvents} from '../events/events';
 
 const defaultContainerStyles = {
   position: 'absolute',
@@ -33,6 +34,7 @@ type Props = {
   pauseVideo(): void;
   seekTo(time: number): void;
   sendAnalytics(event: AnalyticsEvents): void;
+  dispatcher(name: string, payload?: any): void
 };
 
 type State = {
@@ -65,7 +67,7 @@ export default class Hotspot extends Component<Props, State> {
   };
 
   componentDidMount() {
-    const {hotspot} = this.props;
+    const {hotspot, dispatcher} = this.props;
 
     if (!hotspot || !hotspot.onClick) {
       this.setState({
@@ -78,6 +80,9 @@ export default class Hotspot extends Component<Props, State> {
       isReady: true,
       disableClick: !this.isClickable()
     });
+
+    const {id, label} = hotspot;
+    dispatcher(HotspotsEvents.HOTSPOT_DISPLAYED, {id, label});
   }
 
   isClickable = (): boolean => {
@@ -101,9 +106,12 @@ export default class Hotspot extends Component<Props, State> {
   };
 
   handleClick = () => {
-    const {hotspot} = this.props;
+    const {hotspot, dispatcher} = this.props;
     const {disableClick} = this.state;
 
+    const {id, label} = hotspot;
+    dispatcher(HotspotsEvents.HOTSPOT_CLICK, {id, label});
+
     if (!hotspot.onClick || disableClick) {
       return;
     }

package/src/components/HotspotWrapper.tsx

@@ -18,6 +18,7 @@ export interface Props {
   pauseVideo(): void;
   seekTo(time: number): void;
   sendAnalytics(event: AnalyticsEvents): void;
+  dispatcher(name: string, payload?: any): void
 }
 
 export default class HotspotWrapper extends Component<Props> {
@@ -30,9 +31,9 @@ export default class HotspotWrapper extends Component<Props> {
       return null;
     }
 
-    const {seekTo, pauseVideo, sendAnalytics} = this.props;
+    const {seekTo, pauseVideo, sendAnalytics, dispatcher} = this.props;
     return visualHotspot.map(hotspotData => (
-      <Hotspot pauseVideo={pauseVideo} seekTo={seekTo} key={hotspotData.id} visible={true} hotspot={hotspotData} sendAnalytics={sendAnalytics} />
+      <Hotspot dispatcher={dispatcher} pauseVideo={pauseVideo} seekTo={seekTo} key={hotspotData.id} visible={true} hotspot={hotspotData} sendAnalytics={sendAnalytics} />
     ));
   };
 

package/src/events/events.ts

@@ -0,0 +1,4 @@
+export const HotspotsEvents = {
+  HOTSPOT_CLICK: 'hotspot_click',
+  HOTSPOT_DISPLAYED:  'hotspot_displayed',
+}

package/src/hotspots-plugin.tsx

@@ -142,6 +142,7 @@ export class HotspotsPlugin extends KalturaPlayer.core.BasePlugin {
   };
 
   private _addHotspotsContainer(): void {
+    // TODO - fire on click
     this._floatingItem = this.floatingManager.add({
       label: 'Hotspots',
       mode: 'MediaLoaded',
@@ -189,8 +190,7 @@ export class HotspotsPlugin extends KalturaPlayer.core.BasePlugin {
       this._hotspots = this._recalculateCuepointLayout(this._hotspots);
     }
     return (
-      // TODO: add 'sendAnalytics' method
-      <HotspotWrapper key={'hotspotWrapper'} hotspots={this._hotspots} pauseVideo={this._pauseVideo} seekTo={this._seekTo} sendAnalytics={() => {}} />
+      <HotspotWrapper  dispatcher={(eventType, payload) => this.dispatchEvent(eventType, payload)} key={'hotspotWrapper'} hotspots={this._hotspots} pauseVideo={this._pauseVideo} seekTo={this._seekTo} sendAnalytics={() => {}} />
     );
   };
 

package/src/index.ts

@@ -8,6 +8,7 @@ const NAME = __NAME__;
 
 export {HotspotsPlugin as Plugin};
 export {VERSION, NAME};
+export {HotspotsEvents} from './events/events';
 
 const pluginName: string = 'playkit-js-hotspots';
 KalturaPlayer.core.registerPlugin(pluginName, HotspotsPlugin);