feat: register UI events (#109)

Register the UI event enums inside kaltura player to include them in the player enums.

.babelrc

@@ -7,7 +7,8 @@
   ],
   "plugins": [
     "transform-flow-strip-types",
-    "transform-class-properties"
+    "transform-class-properties",
+    "transform-object-rest-spread"
   ],
   "env": {
     "test": {

docs/events.md

@@ -13,37 +13,58 @@ The player event system uses an event target-like API to register, unregister an
 
 ## Player Event Types  
 
-Player events consist of two event types:
-
+### 1. Core Events
+Player core events consist of two event types: 
 * **HTML5 Video Events** - These are various events sent by the browser when handling media that is embedded using the `<video>` element. The player runs on top of the HTML video element, which may trigger the events. Information about these types of events can be found [here](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events).
 * **Player Custom Events** - These are **special** events that indicate a change in the state of the player that **does not exist in the HTML5 video event list** and that are related to the integral behavior of the player. These can include ads, switching to fullscreen, and tracks events.
 
+#### Accessing Core Event Enums
+A core event enum can be access in the following way:
+```js
+player.Event.Core.EVENT_NAME
+```
+
+#### Core Events List
+The full core events list can be found [here](https://github.com/kaltura/playkit-js/blob/master/src/event/event-type.js).
+
+### 2. UI Events
+Player UI events are events which triggers due to user interaction with the player UI.
+
+#### Accessing UI Event Enums
+A UI event enum can be access in the following way:
+```js
+player.Event.UI.EVENT_NAME
+```
+
+#### UI Events List
+The full UI events list can be found [here](https://github.com/kaltura/playkit-js-ui/blob/master/docs/events.md).
+
 ## Registering to Player Events
 
-You can listen to player events by adding an event listener to the player object.
+You can listen to player events by adding an event listener to the player object, for example:
 
 ```javascript
-player.addEventListener(player.Event.TRACKS_CHANGED, event => {
+player.addEventListener(player.Event.Core.TRACKS_CHANGED, event => {
   const payload = event.payload;
   // Do something with the payload
 });
 ```
 
-> **A full list of player events can be found [here](https://github.com/kaltura/playkit-js/blob/master/src/event/events.js)**.
 ## Dispatching Events From the Player
 
 To dispatch an event from the player instance, type the following code:
 
 #### Dispatch Your Own Custom Event
 ```javascript
-player.dispatchEvent(new FakeEvent('myEventName', {
-  ... // Fill your payload
+player.dispatchEvent(new FakeEvent('myCustomEventName', {
+  myCustomPayloadProp1: 'Hello',
+  myCustomPayloadProp2: 'World'
 }));
 ```
 
 #### Dispatch An Existing Player Event
 ```javascript
-player.dispatchEvent(new FakeEvent(player.Event.SEEKED, null}));
+player.dispatchEvent(new FakeEvent(player.Event.Core.SEEKED));
 ```
 
 ## Player Readiness  
@@ -56,7 +77,3 @@ player.ready().then(() => {
   var tracks = player.getTracks();
 });
 ```
-
-## Events List
-
-The full events list, which updates from time to time, can be found [here](https://github.com/kaltura/playkit-js/blob/master/src/event/event-type.js).

package.json

@@ -77,6 +77,7 @@
     "webpack-dev-server": "latest"
   },
   "dependencies": {
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-polyfill": "^6.23.0",
     "hls.js": "^0.8.9",
     "js-logger": "^1.3.0",

src/kaltura-player.js

@@ -1,6 +1,6 @@
 // @flow
-import {Error, FakeEvent, loadPlayer, Utils} from 'playkit-js'
-import {UIManager} from 'playkit-js-ui'
+import {Error, EventType as CoreEventType, FakeEvent, loadPlayer, Utils} from 'playkit-js'
+import {EventType as UIEventType, UIManager} from 'playkit-js-ui'
 import {Provider} from 'playkit-js-providers'
 import getLogger from './common/utils/logger'
 import {addKalturaParams} from './common/utils/kaltura-params'
@@ -32,6 +32,7 @@ export default class KalturaPlayer {
       configure: config => this.configure(config),
       setMedia: mediaConfig => this.setMedia(mediaConfig)
     });
+    Object.defineProperty(this._player, 'Event', this.Event);
     return this._player;
   }
 
@@ -74,4 +75,16 @@ export default class KalturaPlayer {
     evaluatePluginsConfig(playerConfig);
     this._player.configure(playerConfig);
   }
+
+  get Event(): Object {
+    return {
+      get: () => ({
+        Core: CoreEventType,
+        UI: UIEventType,
+        // For backward compatibility
+        ...CoreEventType
+      }),
+      set: undefined
+    };
+  }
 }

yarn.lock

@@ -476,6 +476,10 @@ babel-plugin-syntax-flow@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
 
+babel-plugin-syntax-object-rest-spread@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+
 babel-plugin-transform-class-properties@^6.22.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
@@ -660,6 +664,13 @@ babel-plugin-transform-flow-strip-types@^6.22.0:
     babel-plugin-syntax-flow "^6.18.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-object-rest-spread@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.26.0"
+
 babel-plugin-transform-regenerator@^6.24.1:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"