correct load on scrolling and show video on click

This commit is contained in:
lukas 2020-05-31 23:22:50 +02:00
parent c7071491e3
commit 27cfe7df59
7 changed files with 159 additions and 53 deletions

17
package-lock.json generated
View File

@ -9153,6 +9153,14 @@
"url-polyfill": "^1.1.8" "url-polyfill": "^1.1.8"
} }
}, },
"plyr-react": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/plyr-react/-/plyr-react-2.2.0.tgz",
"integrity": "sha512-nA0cdJf6ER73CRc+XRy+DeXPltuuOomoVtSwrljhQW1JT0trH2w97kE+OQ+O+bXafOKDGgN10PR4BNnLNTowmQ==",
"requires": {
"plyr": "^3.5.6"
}
},
"pn": { "pn": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz", "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
@ -10661,6 +10669,15 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
}, },
"react-plyr": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/react-plyr/-/react-plyr-2.2.0.tgz",
"integrity": "sha512-05oBKvCC9F2VMP7BNhh3x7xeK6PNUMYBPPWIip5sDRuey4HmpghfLQyOfsbNKTssR6kkxRSi2X9neYmfr91NuA==",
"requires": {
"plyr": "^3.5.2",
"prop-types": "^15.7.2"
}
},
"react-scripts": { "react-scripts": {
"version": "3.4.1", "version": "3.4.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",

View File

@ -8,8 +8,10 @@
"@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": "^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"
}, },
"scripts": { "scripts": {

View File

@ -3,16 +3,22 @@ import Preview from "./Preview";
import './css/video.css' import './css/video.css'
class HomePage extends React.Component { class HomePage extends React.Component {
// stores all available movies
data = null;
// stores current index of loaded elements
loadindex = 0;
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
this.state = { this.state = {
data: null loadeditems: []
}; };
} }
componentDidMount() { componentDidMount() {
// todo check if better here or in constructor document.addEventListener('scroll', this.trackScrolling);
const updateRequest = new FormData(); const updateRequest = new FormData();
updateRequest.append('action', 'getMovies'); updateRequest.append('action', 'getMovies');
@ -20,38 +26,54 @@ class HomePage 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) => {
this.setState({data: result}); this.data = result;
this.loadPreviewBlock(12);
}); });
} }
componentWillUnmount() { componentWillUnmount() {
this.setState({}); this.setState({});
document.removeEventListener('scroll', this.trackScrolling);
} }
render() { render() {
return ( return (
<div> <div>
<div><h1>Home page</h1></div> <div><h1>Home page</h1></div>
{this.state.data ? this.loadPreviewBlock(12) : <div>not loaded yet</div>} {this.state.loadeditems.map(elem => (
<Preview
name={elem.movie_name}
movie_id={elem.movie_id}/>
))}
</div> </div>
); );
} }
loadPreview(index) {
return (
<Preview
key={index}
name={this.state.data[index].movie_name}
movie_id={this.state.data[index].movie_id}/>
);
}
loadPreviewBlock(nr) { loadPreviewBlock(nr) {
console.log("loadpreviewblock called ...")
let ret = []; let ret = [];
for (let i = 0; i < nr; i++) { for (let i = 0; i < nr; i++) {
ret.push(this.loadPreview(i)); // only add if not end
if (this.data.length > this.loadindex + i) {
ret.push(this.data[this.loadindex + i]);
}
}
this.setState({
loadeditems: [
...this.state.loadeditems,
...ret
]
});
this.loadindex += nr;
}
trackScrolling = (e) => {
if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
this.loadPreviewBlock(6);
} }
return (ret);
} }
} }

53
src/Player.js Normal file
View File

@ -0,0 +1,53 @@
import React from "react";
import "./css/Player.css"
import {PlyrComponent} from 'plyr-react';
class Player extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
sources: null
};
this.props = props;
}
componentDidMount() {
const updateRequest = new FormData();
updateRequest.append('action', 'loadVideo');
updateRequest.append('movieid', this.props.movie_id);
fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
console.log(result);
this.setState({
sources: {
type: 'video',
sources: [
{
src: result.movie_url,
type: 'video/mp4',
size: 1080,
}
],
poster: result["thumbnail"]
}
});
console.log(this.state);
});
}
render() {
return (
<div className='myvideo'>
{this.state.sources ? <PlyrComponent sources={this.state.sources}/> : <div>loading</div>}
</div>
);
}
}
export default Player;

View File

@ -1,5 +1,7 @@
import React from "react"; import React from "react";
import "./css/Preview.css" import "./css/Preview.css"
import ReactDOM from "react-dom";
import Player from "./Player";
class Preview extends React.Component { class Preview extends React.Component {
constructor(props, context) { constructor(props, context) {
@ -8,8 +10,7 @@ class Preview extends React.Component {
this.state = { this.state = {
previewpicture: null, previewpicture: null,
name: null, name: null
url: null
}; };
} }
@ -20,9 +21,8 @@ class Preview extends React.Component {
componentDidMount() { componentDidMount() {
this.setState({ this.setState({
previewpicture: null, previewpicture: null,
name: this.props.name, name: this.props.name
url: this.props.url });
})
const updateRequest = new FormData(); const updateRequest = new FormData();
updateRequest.append('action', 'readThumbnail'); updateRequest.append('action', 'readThumbnail');
@ -39,7 +39,7 @@ class Preview extends React.Component {
render() { render() {
return ( return (
<div className='videopreview'> <div className='videopreview' onClick={() => this.itemClick()}>
<div className='previewtitle'>{this.state.name}</div> <div className='previewtitle'>{this.state.name}</div>
<div className='previewpic'> <div className='previewpic'>
<img className='previewimage' <img className='previewimage'
@ -49,6 +49,17 @@ class Preview extends React.Component {
</div> </div>
); );
} }
itemClick() {
console.log("item clicked!"+this.state.name);
ReactDOM.render(
<React.StrictMode>
<Player movie_id={this.props.movie_id}/>
</React.StrictMode>,
document.getElementById('root')
);
}
} }
export default Preview; export default Preview;

33
src/css/Player.css Normal file
View File

@ -0,0 +1,33 @@
.closebutton {
color: white;
height: 35px;
width: 90px;
margin-right: 80px;
float: right;
background-color: #FF0000;
cursor: pointer;
}
.myvideo {
width: 100%;
float: left;
}
.videoleftbanner{
float: left;
width: 100%;
height: 100%;
background-color: #e5e5ff;
border-radius: 40px;
}
.likefield{
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
height: 30px;
background-color: #9e5353;
border-radius: 10px;
text-align: center;
color: white;
}

View File

@ -2,39 +2,7 @@
display: none; display: none;
} }
.closebutton {
color: white;
height: 35px;
width: 90px;
margin-right: 80px;
float: right;
background-color: #FF0000;
cursor: pointer;
}
.myvideo {
width: 100%;
float: left;
}
.videoleftbanner{
float: left;
width: 100%;
height: 100%;
background-color: #e5e5ff;
border-radius: 40px;
}
.likefield{
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
height: 30px;
background-color: #9e5353;
border-radius: 10px;
text-align: center;
color: white;
}
.previewcontainer { .previewcontainer {
margin-left: 10%; margin-left: 10%;