lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

delete unused files

Browse Source 
closebutton bindings work correct now.
This commit is contained in:
Lukas Heiligenbrunner
2020-06-01 19:09:32 +02:00
parent e0f5d62edf
commit d30cc41f7a
12 changed files with 139 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.js
View File

@ -10,6 +10,7 @@ class App extends React.Component {
// 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);
}
render() {
@ -20,17 +21,18 @@ class App extends React.Component {
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link" onClick={() => this.loadHomePage()} href="#">Home</a>
<a className="nav-link" onClick={() => this.loadHomePage()} href='# '>Home</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={() => this.loadRandomPage()} href="#">Random Video</a>
<a className="nav-link" onClick={() => this.loadRandomPage()} href="# ">Random Video</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={() => this.loadCategoriesPage()} href="#">Categories</a>
<a className="nav-link" onClick={() => this.loadCategoriesPage()} href="# ">Categories</a>
</li>
</ul>
</nav>
<MainBody showvideo={this.showVideo} page={this.state.page} videoelement={this.element}/>
<MainBody viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}} page={this.state.page}
videoelement={this.element}/>
</div>
);
}
@ -57,6 +59,13 @@ class App extends React.Component {
this.element = element;
}
hideVideo() {
this.setState({
page: "default"
});
this.element = null;
}
}
export default App;

24
src/HomePage.js
View File

@ -1,6 +1,6 @@
import React from "react";
import Preview from "./Preview";
import './css/video.css'
import "./css/HomePage.css"
class HomePage extends React.Component {
// stores all available movies
@ -40,12 +40,22 @@ class HomePage extends React.Component {
return (
<div>
<div><h1>Home page</h1></div>
{this.state.loadeditems.map(elem => (
<Preview
name={elem.movie_name}
movie_id={elem.movie_id}
showvideo={this.props.showvideo}/>
))}
<div className='sideinfo'>
beep beep
</div>
<div className='maincontent'>
{this.state.loadeditems.map(elem => (
<Preview
key={elem.movie_id}
name={elem.movie_name}
movie_id={elem.movie_id}
viewbinding={this.props.viewbinding}/>
))}
</div>
<div className='rightinfo'>
</div>
</div>
);
}

2
src/MainBody.js
View File

@ -10,7 +10,7 @@ class MainBody extends React.Component {
render() {
let page;
if (this.props.page === "default") {
page = <HomePage showvideo={this.props.showvideo}/>;
page = <HomePage viewbinding={this.props.viewbinding}/>;
} else if (this.props.page === "video") {
// show videoelement if neccessary
page = this.props.videoelement;

137
src/Player.js
View File

@ -7,24 +7,76 @@ class Player extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
sources: {
type: 'video',
sources: [
{
src: '',
type: 'video/mp4',
size: 1080,
}
],
poster: ''
}
};
this.state = {};
this.props = props;
}
options = {
controls: [
'play-large', // The large play button in the center
'play', // Play/pause playback
'progress', // The progress bar and scrubber for playback and buffering
'current-time', // The current time of playback
'duration', // The full duration of the media
'mute', // Toggle mute
'volume', // Volume control
'captions', // Toggle captions
'settings', // Settings menu
'airplay', // Airplay (currently Safari only)
'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
'fullscreen', // Toggle fullscreen
]
};
componentDidMount() {
this.fetchMovieData();
}
render() {
return (
<div>
<div className="row">
<div className="col-sm-2">
<div className="videoleftbanner">
<div className="likefield">Likes: {this.state.likes}</div>
</div>
</div>
<div className="col-sm-8">
<div className="videowrapper">
<div className='myvideo'>
{this.state.sources ? <PlyrComponent
sources={this.state.sources}
options={this.options}/> :
<div>not loaded yet</div>}
</div>
</div>
</div>
<div className="col-sm-2">
<div className="closebutton" onClick={() => {this.closebtn()}}>Close</div>
<div className="videorightbanner"></div>
</div>
</div>
<div className="row">
<div className="col-sm-5">
</div>
<div className="col-sm-2">
<button className='btn btn-primary' onClick={() => {this.likebtn()}}>Like it!</button>
<button className='btn btn-info' id="tagbutton">Tag it!</button>
</div>
<div className="col-sm-5">
</div>
</div>
</div>
);
}
fetchMovieData(){
const updateRequest = new FormData();
updateRequest.append('action', 'loadVideo');
updateRequest.append('movieid', this.props.movie_id);
@ -43,52 +95,33 @@ class Player extends React.Component {
}
],
poster: result.thumbnail
}
},
likes: result.likes
});
console.log(this.state);
});
}
render() {
return (
<div>
<div className="row">
<div className="col-sm-2">
<div className="videoleftbanner">
<div className="likefield">Likes: 10</div>
</div>
</div>
<div className="col-sm-8">
<div className="videowrapper">
<div className='myvideo'>
{this.state.sources.sources[0].src ? <PlyrComponent sources={this.state.sources}/> :
<div>not loaded yet</div>}
</div>
</div>
</div>
<div className="col-sm-2">
<div className="closebutton">Close</div>
<div className="videorightbanner"></div>
</div>
</div>
<div className="row">
<div className="col-sm-5">
/* Click Listener */
likebtn() {
const updateRequest = new FormData();
updateRequest.append('action', 'addLike');
updateRequest.append('movieid', this.props.movie_id);
</div>
<div className="col-sm-2">
<button id="likebtn">Like it!</button>
<button id="tagbutton">Tag it!</button>
fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
if(result.result === "success"){
this.fetchMovieData();
}else{
console.log("an error occured while liking");
console.log(result);
}
});
}
</div>
<div className="col-sm-5">
</div>
</div>
</div>
);
closebtn() {
this.props.viewbinding.hideVideo();
}
}

5
src/Preview.js
View File

@ -1,6 +1,5 @@
import React from "react";
import "./css/Preview.css"
import ReactDOM from "react-dom";
import Player from "./Player";
class Preview extends React.Component {
@ -51,9 +50,9 @@ class Preview extends React.Component {
}
itemClick() {
console.log("item clicked!"+this.state.name);
console.log("item clicked!" + this.state.name);
this.props.showvideo(<Player movie_id={this.props.movie_id}/>);
this.props.viewbinding.showVideo(<Player viewbinding={this.props.viewbinding} movie_id={this.props.movie_id}/>);
}
}

14
src/css/HomePage.css Normal file
View File

@ -0,0 +1,14 @@
.sideinfo{
width: 20%;
float: left;
}
.maincontent{
float: left;
width: 70%;
}
.rightinfo{
float: left;
width: 10%;
}

7
src/css/Preview.css
View File

@ -29,3 +29,10 @@
opacity: 1;
transition: opacity 0.5s;
}
/* todo check if neccessary*/
.previewcontainer {
margin-left: 10%;
width: 80%;
margin-right: 10%;
}

11
src/css/video.css
View File

@ -1,11 +0,0 @@
.hideit {
display: none;
}
.previewcontainer {
margin-left: 10%;
width: 80%;
margin-right: 10%;
}