feat: align playkit env convention (#160)

Add index.js file
Export version and name from index.js
Add UIOptions type
Update namespace to playkit.ui

README.md

@@ -50,11 +50,12 @@ Finally, add the bundle as a script tag in your page, and initialize the player
 ```html
 <script type="text/javascript" src="/PATH/TO/FILE/playkit.js"></script>
 <script type="text/javascript" src="/PATH/TO/FILE/playkit-ui.js"></script>
-<div id="videoContainer" style="height:360px;width:640px">
+<div id="player-placeholder" style="height:360px;width:640px">
 <script type="text/javascript">
-var config = {...};
-var player = Playkit.loadPlayer("videoContainer", config);
-var uiManager = new PlaykitJsUi(player, {targetId: "videoContainer"});
+var playerConfig = {...};
+var uiConfig = {targetId: "player-placeholder"};
+var player = playkit.core.loadPlayer(playerConfig);
+var uiManager = new playkit.ui.UIManager(player, uiConfig);
 uiManager.buildDefaultUI();
 player.play();
 </script>

flow-typed/types/ui-options.js

@@ -0,0 +1,6 @@
+// @flow
+declare type UIOptionsObject = {
+  targetId: string,
+  forceTouchUI?: boolean,
+  logLevel?: string,
+};

karma.conf.js

@@ -1,6 +1,8 @@
 let webpackConfig = require('./webpack.config.js');
 //Need to remove externals otherwise they won't be included in test
 delete webpackConfig.externals;
+// Need to define inline source maps when using karma
+webpackConfig.devtool = 'inline-source-map';
 
 const isWindows = /^win/.test(process.platform);
 const isMacOS = /^darwin/.test(process.platform);

src/playkit-js-ui.js → src/index.js

@@ -1,5 +1,8 @@
 // @flow
-import UIManager from './ui-manager';
+import UIManager from './ui-manager'
+
+declare var __VERSION__: string;
+declare var __NAME__: string;
 
 export {h} from 'preact';
 
@@ -27,4 +30,5 @@ export {OverlayPortal} from './components/overlay-portal';
 export {KeyboardControl} from './components/keyboard';
 export {ErrorOverlay} from './components/error-overlay';
 
-export default UIManager;
+export {UIManager};
+export {__VERSION__ as VERSION, __NAME__ as NAME};

src/ui-manager.js

@@ -27,9 +27,6 @@ import errorUI from './ui-presets/error';
 
 import './styles/style.scss';
 
-declare var __VERSION__: string;
-declare var __NAME__: string;
-
 type UIPreset = {
   template: (props: Object) => any;
   condition?: (state: Object) => boolean;
@@ -40,16 +37,16 @@ type UIPreset = {
  *
  * @class UIManager
  */
-class UIManager {
+export default class UIManager {
   player: Player;
-  config: Object;
+  config: UIOptionsObject;
   targetId: string;
   store: any;
 
   /**
    * Creates an instance of UIManager.
    * @param {Player} player - player instance
-   * @param {Object} config - player config
+   * @param {UIOptionsObject} config - ui config
    * @memberof UIManager
    */
   constructor(player: Player, config: Object) {
@@ -76,8 +73,7 @@ class UIManager {
   setConfig(config: Object, componentAlias?: string): void {
     if (componentAlias) {
       this.store.dispatch(actions.updateComponentConfig(componentAlias, config));
-    }
-    else {
+    } else {
       this.store.dispatch(actions.updateConfig({targetId: this.targetId, ...config}));
     }
   }
@@ -174,9 +170,4 @@ class UIManager {
   setLogLevel(level: Object, name?: string) {
     setLogLevel(level, name);
   }
-
 }
-
-export default UIManager;
-export {__VERSION__ as VERSION, __NAME__ as NAME};
-