From 27cfe7df599fee59ce3c63de267c12eedd61a3c7 Mon Sep 17 00:00:00 2001 From: lukas Date: Sun, 31 May 2020 23:22:50 +0200 Subject: [PATCH] correct load on scrolling and show video on click --- package-lock.json | 17 +++++++++++++++ package.json | 2 ++ src/HomePage.js | 52 ++++++++++++++++++++++++++++++++------------- src/Player.js | 53 ++++++++++++++++++++++++++++++++++++++++++++++ src/Preview.js | 23 ++++++++++++++------ src/css/Player.css | 33 +++++++++++++++++++++++++++++ src/css/video.css | 32 ---------------------------- 7 files changed, 159 insertions(+), 53 deletions(-) create mode 100644 src/Player.js create mode 100644 src/css/Player.css diff --git a/package-lock.json b/package-lock.json index 35a77af..cae1c5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index cecd605..786fa56 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/HomePage.js b/src/HomePage.js index 66bdbb1..a3f756f 100644 --- a/src/HomePage.js +++ b/src/HomePage.js @@ -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 (

Home page

- {this.state.data ? this.loadPreviewBlock(12) :
not loaded yet
} + {this.state.loadeditems.map(elem => ( + + ))}
); } - loadPreview(index) { - return ( - - ); - } - 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); } } diff --git a/src/Player.js b/src/Player.js new file mode 100644 index 0000000..84ddf30 --- /dev/null +++ b/src/Player.js @@ -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 ( +
+ {this.state.sources ? :
loading
} +
+ ); + } +} + +export default Player; diff --git a/src/Preview.js b/src/Preview.js index 008f353..7d30f59 100644 --- a/src/Preview.js +++ b/src/Preview.js @@ -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 ( -
+
this.itemClick()}>
{this.state.name}
); } + + itemClick() { + console.log("item clicked!"+this.state.name); + + ReactDOM.render( + + + , + document.getElementById('root') + ); + } } export default Preview; diff --git a/src/css/Player.css b/src/css/Player.css new file mode 100644 index 0000000..0f5b83c --- /dev/null +++ b/src/css/Player.css @@ -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; + +} diff --git a/src/css/video.css b/src/css/video.css index 71c9313..818d8a6 100644 --- a/src/css/video.css +++ b/src/css/video.css @@ -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%;