Added NextJS implementation of shaka player.

.gitignore

@@ -1,6 +1,7 @@
 # Created by .ignore support plugin (hsz.mobi)
 .git/
 .idea/
+.next/
 yarn.lock
 node_modules/
 /nbproject/private/

nextjs-shaka-player/README.md

@@ -0,0 +1,11 @@
+# shaka player implementation with NextJS
+
+This simple project contains basic implementation of shaka player with NextJS. Since NextJS has built-in support for SSR, and shaka player doesnt support it, you need to load shaka player with - 
+
+```js
+import dynamic from 'next/dynamic';
+```
+
+With it you can import JavaScript modules (inc. React Components) dynamically and work with them. They also work with SSR. You can think of dynamic imports as another way to split your code into manageable chunks.
+
+`containers/Tutorial.js` loads shaka player with video from props. We are loading this container dynamically in our index page so that shaka player is loaded without any issue with SSR.

nextjs-shaka-player/containers/Tutorial.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+const shaka = require('shaka-player/dist/shaka-player.ui.js');
+
+class Tutorial extends React.PureComponent{
+
+    constructor(props){
+
+        super(props);
+
+        this.video = React.createRef();
+        this.videoContainer = React.createRef();
+    }
+
+    componentDidMount(){
+
+        var manifestUri = this.props.manifestUrl;
+        var licenseServer = this.props.licenseServer;
+
+        let video = this.video.current;
+        let videoContainer = this.videoContainer.current;
+
+        var player = new shaka.Player(video);
+
+        const ui = new shaka.ui.Overlay(player, videoContainer, video);
+        const controls = ui.getControls();
+
+        console.log(Object.keys(shaka.ui));
+
+        player.configure({
+            drm: {
+              servers: { 'com.widevine.alpha': licenseServer }
+            }
+          });
+
+
+        const onError = (error) => {
+            // Log the error.
+            console.error('Error code', error.code, 'object', error);
+        }
+
+        player.load(manifestUri).then(function() {
+            // This runs if the asynchronous load is successful.
+            console.log('The video has now been loaded!');
+          }).catch(onError);  // onError is executed if the asynchronous load fails.
+    }
+
+    render(){
+
+        return(
+            <div className="shadow-lg mx-auto max-w-full" ref={this.videoContainer} style={{"width": "800px"}}>
+            <video id="video" ref={this.video} className="w-full h-full"
+            poster={this.props.posterUrl}></video>
+            </div>
+        );
+
+    }
+}
+
+Tutorial.propTypes = {
+    licenseServer: PropTypes.string,
+    manifestUrl: PropTypes.string,
+    posterUrl: PropTypes.string
+}
+
+export default Tutorial;