docs(FEV-1027): create documentation for dual screen plugin (#27)

README.md

@@ -1,2 +1,108 @@
-# playkit-js-dual-screen
-Dual Screen Plugin for the Kaltura Player JS
+# PlayKit JS Dual Screen - Dual Screen plugin for the [PlayKit JS Player]
+
+PlayKit JS Dual Screen is written in [ECMAScript6], statically analysed using [Typescript] and transpiled in ECMAScript5 using [Babel].
+
+[typescript]: https://www.typescriptlang.org/
+[ecmascript6]: https://github.com/ericdouglas/ES6-Learning#articles--tutorials
+[babel]: https://babeljs.io
+
+## Getting Started
+
+### Prerequisites
+
+The plugin requires [Kaltura Player] to be loaded first.
+
+[kaltura player]: https://github.com/kaltura/kaltura-player-js
+
+### Installing
+
+First, clone and run [yarn] to install dependencies:
+
+[yarn]: https://yarnpkg.com/lang/en/
+
+```
+git clone https://github.com/kaltura/playkit-js-dual-screen.git
+cd playkit-js-dual-screen
+yarn install
+```
+
+### Building
+
+Then, build the player
+
+```javascript
+yarn run build
+```
+
+### Embed the library in your test page
+
+Finally, add the bundle as a script tag in your page, and initialize the player
+
+```html
+<script type="text/javascript" src="/PATH/TO/FILE/kaltura-player.js"></script>
+<!--Kaltura player-->
+<script type="text/javascript" src="/PATH/TO/FILE/playkit-dual-screen.js"></script>
+<!--PlayKit dual screen plugin-->
+<div id="player-placeholder" style="height:360px; width:640px">
+  <script type="text/javascript">
+    var playerContainer = document.querySelector("#player-placeholder");
+    var config = {
+     ...
+     targetId: 'player-placeholder',
+     plugins: {
+       dualscreen: {
+       }
+     }
+     ...
+    };
+    var player = KalturaPlayer.setup(config);
+    player.loadMedia(...);
+  </script>
+</div>
+```
+
+## Documentation
+
+- **[Configuration](docs/configuration.md)**
+
+## Running the tests
+
+Tests can be run locally via [Karma], which will run on Chrome, Firefox and Safari
+
+[karma]: https://karma-runner.github.io/1.0/index.html
+
+```
+yarn run test
+```
+
+You can test individual browsers:
+
+```
+yarn run test:chrome
+yarn run test:firefox
+yarn run test:safari
+```
+
+### And coding style tests
+
+We use ESLint [recommended set](http://eslint.org/docs/rules/) with some additions for enforcing [Flow] types and other rules.
+
+See [ESLint config](.eslintrc.json) for full configuration.
+
+We also use [.editorconfig](.editorconfig) to maintain consistent coding styles and settings, please make sure you comply with the styling.
+
+## Compatibility
+
+TBD
+
+## Contributing
+
+Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.
+
+## Versioning
+
+We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/kaltura/playkit-js-dual-screen/tags).
+
+## License
+
+This project is licensed under the AGPL-3.0 License - see the [LICENSE.md](LICENSE.md) file for details

docs/configuration.md

@@ -0,0 +1,34 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+### Table of Contents
+
+-   [DualScreenConfigObject][1]
+    -   [Parameters][2]
+
+
+## DualScreenConfigObject
+
+Defines the configuration of the dual screen. Except `childSizePercentage`, the configuration only defines the appearance when the player loads. After that, the user can adjust and change it. 
+
+Type: [Object][4]
+
+### Parameters
+
+-   `position` **(`"bottom-left"` \| `"bottom-right"` \| `"top-left"` \| `"top-right"`)** The position where the child player will be displayed (optional, default `"bottom-right"`)
+-   `layout` **(`"PIP"` \| `"SingleMedia"` \| `"SideBySide"`)** The layout of the parent and child players (optional, default `"PIP"`)
+-   `inverse` **[boolean][5]** When set to true, the Parent and Secondary players will swap positions (optional, default `false`)
+-   `childSizePercentage` **[number][6]** Relevant only for PIP layout - Sets the height of the child player as percentage of the parent player height (optional, default `30`)
+
+
+
+[1]: #dualscreenconfigobject
+
+[2]: #parameters
+
+[3]: #eventtype
+
+[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number