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

api/Tags.php

@@ -16,21 +16,6 @@ if (isset($_POST['action'])) {
             }
             echo json_encode($rows);
 
-            break;
-        case "getRandomTagPreview":
-            $id = $_POST['id'];
-
-            $query = "SELECT thumbnail from videos
-                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
-                        WHERE tag_id='$id' 
-                        ORDER BY RAND()
-                        LIMIT 1";
-
-            $result = $conn->query($query);
-            $r = mysqli_fetch_assoc($result);
-
-            echo $r['thumbnail'];
-
             break;
     }
 }

src/App.js

@@ -32,11 +32,13 @@ class App extends React.Component {
             page = <SettingsPage/>;
             this.mypage = page;
         } else if (this.state.page === "categories") {
-            page = <CategoryPage/>;
+            page = <CategoryPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
             this.mypage = page;
         } else if (this.state.page === "video") {
             // show videoelement if neccessary
             page = this.videoelement;
+
+            console.log(page);
         } else if (this.state.page === "lastpage") {
             // return back to last page
             page = this.mypage;
@@ -85,11 +87,11 @@ class App extends React.Component {
     }
 
     showVideo(element) {
+        this.videoelement = element;
+
         this.setState({
             page: "video"
         });
-
-        this.videoelement = element;
     }
 
     hideVideo() {

src/css/Preview.css

@@ -4,13 +4,6 @@
     text-align: center;
     font-weight: bold;
     max-width: 266px;
-}
-
-.tagpreviewtitle{
-    font-size: larger;
-}
-
-.videopreviewtitle{
     font-size: smaller;
 }
 
@@ -46,3 +39,16 @@
     box-shadow: rgba(2, 12, 27, 0.7) 0px 0px 0px 5px;
     transition: all 300ms;
 }
+
+.tagpreview {
+    text-transform: uppercase;
+    font-weight: bolder;
+    font-size: x-large;
+    text-align: center;
+    height: 150px;
+    width: 266px;
+}
+
+.tagpreviewtitle{
+    margin-top: 55px;
+}

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() {
+    fetchVideoData(tag) {
-        this.loadPreview();
+        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='videopreview tagpreview' onClick={() => this.itemClick()}>
-                <div className='previewtitle tagpreviewtitle'>{this.props.name}</div>
+                <div className='tagpreviewtitle'>
-                <div className='previewpic'>
+                    {this.props.name}
-                    <img className='previewimage'
-                         src={this.state.thumbnail}
-                         alt='Pic loading.'/>
-                </div>
-                <div className='previewbottom'>
-
                 </div>
             </div>
         );
     }
 
-    loadPreview() {
+    itemClick() {
-        const updateRequest = new FormData();
+        this.fetchVideoData(this.props.name);
-        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});
-            });
     }
 }
 

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;

src/pages/CategoryPage.js

@@ -30,24 +30,21 @@ class CategoryPage extends React.Component {
                     <hr/>
                 </div>
                 <SideBar>
-                    <div className='sidebartitle'>Infos:</div>
-                    <hr/>
                     <div className='sidebartitle'>Default Tags:</div>
-                    <Tag onClick={() => {
+                    <Tag>All</Tag>
-                        this.setState({tag: "All"});
-                        this.fetchVideoData("all");
-                    }}>All
-                    </Tag>
                     <Tag>FullHd</Tag>
                     <Tag>LowQuality</Tag>
                     <Tag>HD</Tag>
+                    <hr/>
+                    <button className='btn btn-success'>Add a new Tag!</button>
                 </SideBar>
                 <div id='categorycontent'>
                     {this.state.loadedtags ?
                         this.state.loadedtags.map((m) => (
                             <TagPreview
                                 name={m.tag_name}
-                                tag_id={m.tag_id}/>
+                                tag_id={m.tag_id}
+                                viewbinding={this.props.viewbinding}/>
                         )) :
                         "loading"
                     }

src/pages/HomePage.js

@@ -1,22 +1,16 @@
 import React from "react";
-import Preview from "../elements/Preview";
 import SideBar from "../elements/SideBar";
 import Tag from "../elements/Tag";
+import VideoContainer from "../elements/VideoContainer";
 
 import "../css/HomePage.css"
 import "../css/DefaultPage.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 = {
-            loadeditems: [],
             sideinfo: {
                 videonr: null,
                 fullhdvideonr: null,
@@ -25,12 +19,13 @@ class HomePage extends React.Component {
                 tagnr: null
             },
             tag: "All",
-            selectionnr: null
+            data: [],
+            selectionnr: 0
         };
     }
 
     componentDidMount() {
-        document.addEventListener('scroll', this.trackScrolling);
+        // document.addEventListener('scroll', this.trackScrolling);
         // initial get of all videos
         this.fetchVideoData("all");
         this.fetchStartData();
@@ -47,17 +42,19 @@ class HomePage extends React.Component {
         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) => {
-                    this.data = result;
                     this.setState({
-                        loadeditems: [],
+                        data: []
-                        selectionnr: this.data.length
+                    });
+                    this.setState({
+                        data: result,
+                        selectionnr: result.length
                     });
-                    this.loadindex = 0;
-                    this.loadPreviewBlock(16);
                 }))
             .catch(() => {
                 console.log("no connection to backend");
@@ -90,11 +87,6 @@ class HomePage extends React.Component {
             });
     }
 
-    componentWillUnmount() {
-        this.setState({});
-        document.removeEventListener('scroll', this.trackScrolling);
-    }
-
     render() {
         return (
             <div>
@@ -134,15 +126,10 @@ class HomePage extends React.Component {
                     }}>HD
                     </Tag>
                 </SideBar>
-                <div className='maincontent'>
+                {this.state.data.length !== 0 ?
-                    {this.state.loadeditems.map(elem => (
+                    <VideoContainer
-                        <Preview
+                        data={this.state.data}
-                            key={elem.movie_id}
+                        viewbinding={this.props.viewbinding}/> : null}
-                            name={elem.movie_name}
-                            movie_id={elem.movie_id}
-                            viewbinding={this.props.viewbinding}/>
-                    ))}
-                </div>
                 <div className='rightinfo'>
 
                 </div>
@@ -150,35 +137,6 @@ class HomePage extends React.Component {
             </div>
         );
     }
-
-    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 HomePage;