added a videocontainer where previews can be stored in - usefull for category page

src/elements/Preview.js

@@ -1,6 +1,7 @@
 import React from "react";
 import "../css/Preview.css";
 import Player from "../pages/Player";
+import VideoContainer from "./VideoContainer";
 
 class Preview extends React.Component {
     constructor(props, context) {
@@ -66,43 +67,45 @@ export class TagPreview extends React.Component {
         super(props, context);
 
         this.props = props;
-
-        this.state = {
-            thumbnail: null
-        };
     }
 
-    componentDidMount() {
-        this.loadPreview();
+    fetchVideoData(tag) {
+        console.log(tag);
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getMovies');
+        updateRequest.append('tag', tag);
+
+        console.log("fetching data");
+
+        // fetch all videos available
+        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    console.log(result);
+                    this.props.viewbinding.showVideo(
+                        <VideoContainer
+                            data={result}
+                            viewbinding={this.props.viewbinding}/>
+                    );
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
     }
 
 
     render() {
         return (
-            <div className='videopreview' onClick={() => this.itemClick()}>
-                <div className='previewtitle tagpreviewtitle'>{this.props.name}</div>
-                <div className='previewpic'>
-                    <img className='previewimage'
-                         src={this.state.thumbnail}
-                         alt='Pic loading.'/>
-                </div>
-                <div className='previewbottom'>
-
+            <div className='videopreview tagpreview' onClick={() => this.itemClick()}>
+                <div className='tagpreviewtitle'>
+                    {this.props.name}
                 </div>
             </div>
         );
     }
 
-    loadPreview() {
-        const updateRequest = new FormData();
-        updateRequest.append('action', 'getRandomTagPreview');
-        updateRequest.append('id', this.props.tag_id);
-
-        fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.text())
-            .then((result) => {
-                this.setState({thumbnail: result});
-            });
+    itemClick() {
+        this.fetchVideoData(this.props.name);
     }
 }
 

src/elements/VideoContainer.js

@@ -0,0 +1,73 @@
+import React from "react";
+import Preview from "./Preview";
+
+class VideoContainer extends React.Component {
+    constructor(props: P, context: any) {
+        super(props, context);
+
+        this.data = props.data;
+
+        this.state = {
+            loadeditems: [],
+            selectionnr: null
+        };
+    }
+    // stores current index of loaded elements
+    loadindex = 0;
+
+    componentDidMount() {
+        document.addEventListener('scroll', this.trackScrolling);
+
+        this.loadPreviewBlock(12);
+    }
+
+    render() {
+        return (
+            <div className='maincontent'>
+                {this.state.loadeditems.map(elem => (
+                    <Preview
+                        key={elem.movie_id}
+                        name={elem.movie_name}
+                        movie_id={elem.movie_id}
+                        viewbinding={this.props.viewbinding}/>
+                ))}
+            </div>
+        );
+    }
+
+    componentWillUnmount() {
+        this.setState({});
+        document.removeEventListener('scroll', this.trackScrolling);
+    }
+
+    loadPreviewBlock(nr) {
+        console.log("loadpreviewblock called ...")
+        let ret = [];
+        for (let i = 0; i < nr; 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 = () => {
+        // comparison if current scroll position is on bottom
+        // 200 stands for bottom offset to trigger load
+        if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
+            this.loadPreviewBlock(8);
+        }
+    }
+}
+
+export default VideoContainer;