OpenMediaCenter/src/App.js

106 lines
3.8 KiB
JavaScript
Raw Normal View History

2020-05-31 11:47:57 +00:00
import React from 'react';
2020-06-01 20:11:56 +00:00
import "./css/App.css"
import HomePage from "./pages/HomePage";
import RandomPage from "./pages/RandomPage";
2020-05-31 18:24:35 +00:00
2020-06-01 18:46:28 +00:00
// include bootstraps css
2020-05-31 11:47:57 +00:00
import 'bootstrap/dist/css/bootstrap.min.css';
import SettingsPage from "./pages/SettingsPage";
import CategoryPage from "./pages/CategoryPage";
2020-05-31 11:47:57 +00:00
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
}
videoelement = null;
MainBody() {
let page;
if (this.state.page === "default") {
page = <HomePage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
this.mypage = page;
} else if (this.state.page === "random") {
page = <RandomPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
this.mypage = page;
} else if (this.state.page === "settings") {
page = <SettingsPage/>;
this.mypage = page;
} else if (this.state.page === "categories") {
page = <CategoryPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
this.mypage = page;
} else if (this.state.page === "video") {
// show videoelement if neccessary
page = this.videoelement;
console.log(page);
} else if (this.state.page === "lastpage") {
// return back to last page
page = this.mypage;
} else {
page = <div>unimplemented yet!</div>;
}
return (page);
}
2020-05-31 11:47:57 +00:00
render() {
return (
<div className="App">
<nav className="navbar navbar-expand-sm bg-primary navbar-dark">
2020-06-01 19:36:55 +00:00
<div className="navbar-brand">OpenMediaCenter</div>
2020-05-31 11:47:57 +00:00
<ul className="navbar-nav">
<li className="nav-item">
2020-06-01 20:11:56 +00:00
<div className="nav-link"
style={this.state.page === "default" ? {color: "rgba(255,255,255,.75"} : {}}
onClick={() => this.setState({page: "default"})}>Home
2020-06-01 20:11:56 +00:00
</div>
2020-05-31 11:47:57 +00:00
</li>
<li className="nav-item">
2020-06-01 20:11:56 +00:00
<div className="nav-link"
style={this.state.page === "random" ? {color: "rgba(255,255,255,.75"} : {}}
onClick={() => this.setState({page: "random"})}>Random Video
2020-06-01 20:11:56 +00:00
</div>
2020-05-31 11:47:57 +00:00
</li>
<li className="nav-item">
2020-06-01 20:11:56 +00:00
<div className="nav-link"
style={this.state.page === "categories" ? {color: "rgba(255,255,255,.75"} : {}}
onClick={() => this.setState({page: "categories"})}>Categories
</div>
</li>
<li className="nav-item">
<div className="nav-link"
style={this.state.page === "settings" ? {color: "rgba(255,255,255,.75"} : {}}
onClick={() => this.setState({page: "settings"})}>Settings
2020-06-01 20:11:56 +00:00
</div>
2020-05-31 11:47:57 +00:00
</li>
</ul>
</nav>
{this.MainBody()}
2020-05-31 11:47:57 +00:00
</div>
);
}
showVideo(element) {
this.videoelement = element;
this.setState({
page: "video"
});
}
hideVideo() {
this.setState({
page: "lastpage"
});
this.element = null;
}
2020-05-31 11:47:57 +00:00
}
export default App;