OpenMediaCenter/src/App.js

72 lines
2.1 KiB
JavaScript
Raw Normal View History

2020-05-31 11:47:57 +00:00
import React from 'react';
import MainBody from "./MainBody";
2020-05-31 18:24:35 +00:00
2020-05-31 11:47:57 +00:00
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends React.Component {
2020-05-31 18:24:35 +00:00
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);
this.hideVideo = this.hideVideo.bind(this);
2020-05-31 11:47:57 +00:00
}
render() {
return (
<div className="App">
<nav className="navbar navbar-expand-sm bg-primary navbar-dark">
<a className="navbar-brand" href="!#">Lukis Tube</a>
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" onClick={() => this.loadHomePage()} href='# '>Home</a>
2020-05-31 11:47:57 +00:00
</li>
<li className="nav-item">
<a className="nav-link" onClick={() => this.loadRandomPage()} href="# ">Random Video</a>
2020-05-31 11:47:57 +00:00
</li>
<li className="nav-item">
<a className="nav-link" onClick={() => this.loadCategoriesPage()} href="# ">Categories</a>
2020-05-31 11:47:57 +00:00
</li>
</ul>
</nav>
<MainBody viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}} page={this.state.page}
videoelement={this.element}/>
2020-05-31 11:47:57 +00:00
</div>
);
}
2020-05-31 18:24:35 +00:00
loadCategoriesPage() {
console.log("click categories");
this.setState({page: "categories"});
}
loadRandomPage() {
console.log("click random");
this.setState({page: "random"});
}
2020-05-31 11:47:57 +00:00
2020-05-31 18:24:35 +00:00
loadHomePage() {
console.log("click default");
this.setState({page: "default"});
2020-05-31 11:47:57 +00:00
}
showVideo(element) {
this.setState({
page: "video"
});
this.element = element;
}
hideVideo() {
this.setState({
page: "default"
});
this.element = null;
}
2020-05-31 11:47:57 +00:00
}
export default App;