embedd video correctly

hide video when user clicks to home page again
This commit is contained in:
Lukas Heiligenbrunner 2020-06-01 17:58:48 +02:00
parent 27cfe7df59
commit e0f5d62edf
6 changed files with 72 additions and 22 deletions

View File

@ -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",

View File

@ -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 {
<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 page={this.state.page}/>
<MainBody showvideo={this.showVideo} page={this.state.page} videoelement={this.element}/>
</div>
);
}
@ -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;

View File

@ -43,7 +43,8 @@ class HomePage extends React.Component {
{this.state.loadeditems.map(elem => (
<Preview
name={elem.movie_name}
movie_id={elem.movie_id}/>
movie_id={elem.movie_id}
showvideo={this.props.showvideo}/>
))}
</div>
);

View File

@ -10,8 +10,11 @@ class MainBody extends React.Component {
render() {
let page;
if (this.props.page === "default") {
page = <HomePage/>;
}else {
page = <HomePage showvideo={this.props.showvideo}/>;
} else if (this.props.page === "video") {
// show videoelement if neccessary
page = this.props.videoelement;
} else {
page = <div>unimplemented yet!</div>;
}
return (page);

View File

@ -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 (
<div className='myvideo'>
{this.state.sources ? <PlyrComponent sources={this.state.sources}/> : <div>loading</div>}
<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">
</div>
<div className="col-sm-2">
<button id="likebtn">Like it!</button>
<button id="tagbutton">Tag it!</button>
</div>
<div className="col-sm-5">
</div>
</div>
</div>
);
}

View File

@ -53,12 +53,7 @@ class Preview extends React.Component {
itemClick() {
console.log("item clicked!"+this.state.name);
ReactDOM.render(
<React.StrictMode>
<Player movie_id={this.props.movie_id}/>
</React.StrictMode>,
document.getElementById('root')
);
this.props.showvideo(<Player movie_id={this.props.movie_id}/>);
}
}