Merge pull request #10 from Astrid88/feat/just-shaka-player

Feat/just shaka player

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "hls.js": "^0.12.4",
+    "mux": "0.0.2",
+    "mux.js": "^5.1.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-leaf-carousel": "^1.2.2",
@@ -12,8 +15,8 @@
     "react-scripts": "3.1.1",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
-    "superagent": "^5.1.0",
-    "vimond-replay": "^1.9.7"
+    "shaka-player": "^2.5.4",
+    "superagent": "^5.1.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/VideoPlayer/VideoPlayerContainer.js

@@ -1,48 +1,69 @@
 import React, { Component } from 'react'
+import mux from 'mux'
 import { connect } from 'react-redux'
-import { Replay } from 'vimond-replay';
-import 'vimond-replay/index.css';
-import CompoundVideoStreamer from 'vimond-replay/video-streamer/compound';
+import Hls from "hls.js"
+
+import shaka from 'shaka-player'
 
 class VideoPlayerContainer extends Component {
 
     id = parseInt(this.props.match.params.id)
     type = this.props.match.params.type
+    streamUrl = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
     componentDidMount() {
+        // Install built-in polyfills to patch browser incompatibilities.
+        shaka.polyfill.installAll();
 
-    }
-    replayOptions = {
-        videoStreamer: {
-            hlsjs: {
-                customConfiguration: {
-                    capLevelToPlayerSize: true,
-                    maxBufferLength: 45
-                }
-            },
-            shaka: {
-                customConfiguration: {
-                    streaming: {
-                        bufferingGoal: 120
-                    }
-                }
-            }
+        // Check to see if the browser supports the basic APIs Shaka needs.
+        if (shaka.Player.isBrowserSupported()) {
+            // Everything looks good!
+            this.initPlayer();
+        } else {
+            // This browser does not have the minimum set of APIs we need.
+            console.error('Browser not supported!');
         }
-    };
-
-    render() {
-        return (
-            <div>
-                <Replay
-                    source={{
-                        streamUrl: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
-                        contentType: 'application/x-mpegurl',
-                    }}
-                >
-                    <CompoundVideoStreamer />
-                </Replay>
-            </div>
-        )
     }
+
+    initPlayer(){
+		var player = new shaka.Player(this.refs.video);
+		// Listen for error events.
+		player.addEventListener('error', this.onErrorEvent);
+
+		// Try to load a manifest.
+		// This is an asynchronous process.
+		player.load(this.streamUrl).then(function() {
+			// This runs if the asynchronous load is successful.
+			console.log('The video has now been loaded!');
+		}).catch(this.onError);  // onError is executed if the asynchronous load fails.
+	}
+
+	onErrorEvent(event) {
+		// Extract the shaka.util.Error object from the event.
+		this.onError(event.detail);
+	}
+
+	onError(error) {
+		// Log the error.
+		console.error('Error code', error.code, 'object', error);
+	}
+
+	componentWillUnmount() {
+		// unmount stuff
+		// kill stream hogging...:)
+	}
+
+	render() {
+   		return (
+	    	<div>
+		    	<h2>Player</h2>
+		    	<video ref="video"
+	           	width="640"
+	       			poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
+	           	controls autoPlay>
+	       		</video>
+	    	</div>
+	    );
+  	}
 }
 
 function mapStateToProps(state) {