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

correct load on scrolling and show video on click

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
package-lock.json generated
View File

@ -9153,6 +9153,14 @@
"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": {
"version": "1.1.0",
"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",
"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": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",

2
package.json
View File

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

52
src/HomePage.js
View File

@ -3,16 +3,22 @@ import Preview from "./Preview";
import './css/video.css'
class HomePage extends React.Component {
// stores all available movies
data = null;
// stores current index of loaded elements
loadindex = 0;
constructor(props, context) {
super(props, context);
this.state = {
data: null
loadeditems: []
};
}
componentDidMount() {
// todo check if better here or in constructor
document.addEventListener('scroll', this.trackScrolling);
const updateRequest = new FormData();
updateRequest.append('action', 'getMovies');
@ -20,38 +26,54 @@ class HomePage extends React.Component {
fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
this.setState({data: result});
this.data = result;
this.loadPreviewBlock(12);
});
}
componentWillUnmount() {
this.setState({});
document.removeEventListener('scroll', this.trackScrolling);
}
render() {
return (
<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>
);
}
loadPreview(index) {
return (
<Preview
key={index}
name={this.state.data[index].movie_name}
movie_id={this.state.data[index].movie_id}/>
);
}
loadPreviewBlock(nr) {
console.log("loadpreviewblock called ...")
let ret = [];
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;

23
src/Preview.js
View File

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

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;
}

32
src/css/video.css
View File

@ -2,39 +2,7 @@
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 {
margin-left: 10%;