correct load on scrolling and show video on click

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

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": {

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

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 (
+            <div className='myvideo'>
+                {this.state.sources ? <PlyrComponent sources={this.state.sources}/> : <div>loading</div>}
+            </div>
+        );
+    }
+}
+
+export default Player;

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,
+            name: null
-            url: null
         };
     }
 
@@ -20,9 +21,8 @@ class Preview extends React.Component {
     componentDidMount() {
         this.setState({
             previewpicture: null,
-            name: this.props.name,
+            name: this.props.name
-            url: this.props.url
+        });
-        })
 
         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;

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

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