diff --git a/package.json b/package.json
index 786fa56..a01a5cb 100644
--- a/package.json
+++ b/package.json
@@ -7,12 +7,10 @@
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"bootstrap": "^4.5.0",
- "plyr": "^3.6.2",
- "plyr-react": "^2.2.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
- "react-plyr": "^2.2.0",
- "react-scripts": "3.4.1"
+ "react-scripts": "3.4.1",
+ "plyr-react": "2.2.0"
},
"scripts": {
"start": "react-scripts start",
diff --git a/src/App.js b/src/App.js
index cc4d2cd..2e244d1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,9 @@ class App extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {page: "default"};
+
+ // bind this to the method for being able to call methods such as this.setstate
+ this.showVideo = this.showVideo.bind(this);
}
render() {
@@ -17,17 +20,17 @@ class App extends React.Component {
-
+
);
}
@@ -46,6 +49,14 @@ class App extends React.Component {
console.log("click default");
this.setState({page: "default"});
}
+
+ showVideo(element) {
+ this.setState({
+ page: "video"
+ });
+
+ this.element = element;
+ }
}
export default App;
diff --git a/src/HomePage.js b/src/HomePage.js
index a3f756f..4a60c04 100644
--- a/src/HomePage.js
+++ b/src/HomePage.js
@@ -43,7 +43,8 @@ class HomePage extends React.Component {
{this.state.loadeditems.map(elem => (
+ movie_id={elem.movie_id}
+ showvideo={this.props.showvideo}/>
))}
);
diff --git a/src/MainBody.js b/src/MainBody.js
index 26ad816..a90e9ca 100644
--- a/src/MainBody.js
+++ b/src/MainBody.js
@@ -10,8 +10,11 @@ class MainBody extends React.Component {
render() {
let page;
if (this.props.page === "default") {
- page = ;
- }else {
+ page = ;
+ } else if (this.props.page === "video") {
+ // show videoelement if neccessary
+ page = this.props.videoelement;
+ } else {
page = unimplemented yet!
;
}
return (page);
diff --git a/src/Player.js b/src/Player.js
index 84ddf30..46bf2ba 100644
--- a/src/Player.js
+++ b/src/Player.js
@@ -8,7 +8,17 @@ class Player extends React.Component {
super(props, context);
this.state = {
- sources: null
+ sources: {
+ type: 'video',
+ sources: [
+ {
+ src: '',
+ type: 'video/mp4',
+ size: 1080,
+ }
+ ],
+ poster: ''
+ }
};
this.props = props;
@@ -22,7 +32,6 @@ class Player extends React.Component {
fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
- console.log(result);
this.setState({
sources: {
type: 'video',
@@ -33,7 +42,7 @@ class Player extends React.Component {
size: 1080,
}
],
- poster: result["thumbnail"]
+ poster: result.thumbnail
}
});
console.log(this.state);
@@ -43,8 +52,41 @@ class Player extends React.Component {
render() {
return (
-
- {this.state.sources ?
: loading
}
+
+
+
+
+
+
+ {this.state.sources.sources[0].src ?
:
+ not loaded yet
}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/Preview.js b/src/Preview.js
index 7d30f59..2b86e31 100644
--- a/src/Preview.js
+++ b/src/Preview.js
@@ -53,12 +53,7 @@ class Preview extends React.Component {
itemClick() {
console.log("item clicked!"+this.state.name);
- ReactDOM.render(
-
-
- ,
- document.getElementById('root')
- );
+ this.props.showvideo();
}
}