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/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1", "@testing-library/user-event": "^7.2.1",
"bootstrap": "^4.5.0", "bootstrap": "^4.5.0",
"plyr": "^3.6.2",
"plyr-react": "^2.2.0",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^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": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

View File

@ -7,6 +7,9 @@ class App extends React.Component {
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
this.state = {page: "default"}; 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() { render() {
@ -17,17 +20,17 @@ class App extends React.Component {
<ul className="navbar-nav"> <ul className="navbar-nav">
<li className="nav-item"> <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>
<li className="nav-item"> <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>
<li className="nav-item"> <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> </li>
</ul> </ul>
</nav> </nav>
<MainBody page={this.state.page}/> <MainBody showvideo={this.showVideo} page={this.state.page} videoelement={this.element}/>
</div> </div>
); );
} }
@ -46,6 +49,14 @@ class App extends React.Component {
console.log("click default"); console.log("click default");
this.setState({page: "default"}); this.setState({page: "default"});
} }
showVideo(element) {
this.setState({
page: "video"
});
this.element = element;
}
} }
export default App; export default App;

View File

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

View File

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

View File

@ -8,7 +8,17 @@ class Player extends React.Component {
super(props, context); super(props, context);
this.state = { this.state = {
sources: null sources: {
type: 'video',
sources: [
{
src: '',
type: 'video/mp4',
size: 1080,
}
],
poster: ''
}
}; };
this.props = props; this.props = props;
@ -22,7 +32,6 @@ class Player extends React.Component {
fetch('/php/videoload.php', {method: 'POST', body: updateRequest}) fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()) .then((response) => response.json())
.then((result) => { .then((result) => {
console.log(result);
this.setState({ this.setState({
sources: { sources: {
type: 'video', type: 'video',
@ -33,7 +42,7 @@ class Player extends React.Component {
size: 1080, size: 1080,
} }
], ],
poster: result["thumbnail"] poster: result.thumbnail
} }
}); });
console.log(this.state); console.log(this.state);
@ -43,8 +52,41 @@ class Player extends React.Component {
render() { render() {
return ( 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'> <div className='myvideo'>
{this.state.sources ? <PlyrComponent sources={this.state.sources}/> : <div>loading</div>} {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> </div>
); );
} }

View File

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