added lots of css to style site.

removed mainbody class and did switching stuff in app.js

api/videoload.php

@@ -38,13 +38,14 @@ if (isset($_POST['action'])) {
             echo(json_encode($rows));
             break;
         case "loadVideo":
-            $query = "SELECT movie_url,thumbnail,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
+            $query = "SELECT movie_name,movie_url,thumbnail,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
 
             $result = $conn->query($query);
             $row = $result->fetch_assoc();
 
             $arr = array();
             $arr["thumbnail"] = $row["thumbnail"];
+            $arr["movie_name"] = $row["movie_name"];
             $arr["movie_url"] = $row["movie_url"];
             $arr["likes"] = $row["likes"];
             $arr["quality"] = $row["quality"];
@@ -75,7 +76,6 @@ if (isset($_POST['action'])) {
             echo($row["thumbnail"]);
 
             break;
-
         case "getTags":
             $movieid = $_POST['movieid'];
 
@@ -104,6 +104,52 @@ if (isset($_POST['action'])) {
                 echo('{"result":"' . $conn->error . '"}');
             }
             break;
+        case "getStartData":
+            $query = "SELECT COUNT(*) as nr FROM videos";
+            $result = $conn->query($query);
+            $r = mysqli_fetch_assoc($result);
+
+            $arr = array();
+            $arr['total'] = $r['nr'];
+
+            $query = "SELECT COUNT(*) as nr FROM videos
+                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
+                        INNER JOIN tags t on vt.tag_id = t.tag_id";
+            $result = $conn->query($query);
+            $r = mysqli_fetch_assoc($result);
+            $arr['tagged'] = $r['nr'];
+
+            $query = "SELECT COUNT(*) as nr FROM videos
+                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
+                        INNER JOIN tags t on vt.tag_id = t.tag_id
+                        WHERE t.tag_name='hd'";
+            $result = $conn->query($query);
+            $r = mysqli_fetch_assoc($result);
+            $arr['hd'] = $r['nr'];
+
+            $query = "SELECT COUNT(*) as nr FROM videos
+                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
+                        INNER JOIN tags t on vt.tag_id = t.tag_id
+                        WHERE t.tag_name='fullhd'";
+            $result = $conn->query($query);
+            $r = mysqli_fetch_assoc($result);
+            $arr['fullhd'] = $r['nr'];
+
+            $query = "SELECT COUNT(*) as nr FROM videos
+                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
+                        INNER JOIN tags t on vt.tag_id = t.tag_id
+                        WHERE t.tag_name='lowquality'";
+            $result = $conn->query($query);
+            $r = mysqli_fetch_assoc($result);
+            $arr['sd'] = $r['nr'];
+
+            $query = "SELECT COUNT(*) as nr FROM tags";
+            $result = $conn->query($query);
+            $r = mysqli_fetch_assoc($result);
+            $arr['tags'] = $r['nr'];
+
+            echo(json_encode($arr));
+            break;
     }
 } else {
     echo('{"data":"error"}');

src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import MainBody from "./MainBody";
 import "./css/App.css"
+import HomePage from "./HomePage";
+import RandomPage from "./RandomPage";
 
 // include bootstraps css
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -15,6 +16,28 @@ class App extends React.Component {
         this.hideVideo = this.hideVideo.bind(this);
     }
 
+    videoelement = null;
+
+    MainBody() {
+        let page;
+        if (this.state.page === "default") {
+            page = <HomePage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
+            this.mypage = page;
+        } else if (this.state.page === "random") {
+            page = <RandomPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
+            this.mypage = page;
+        } else if (this.state.page === "video") {
+            // show videoelement if neccessary
+            page = this.videoelement;
+        } else if (this.state.page === "lastpage") {
+            // return back to last page
+            page = this.mypage;
+        } else {
+            page = <div>unimplemented yet!</div>;
+        }
+        return (page);
+    }
+
     render() {
         return (
             <div className="App">
@@ -42,8 +65,7 @@ class App extends React.Component {
                         </li>
                     </ul>
                 </nav>
-                <MainBody viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}} page={this.state.page}
+                {this.MainBody()}
-                          videoelement={this.element}/>
             </div>
         );
     }
@@ -68,7 +90,7 @@ class App extends React.Component {
             page: "video"
         });
 
-        this.element = element;
+        this.videoelement = element;
     }
 
     hideVideo() {

src/HomePage.js

@@ -1,6 +1,9 @@
 import React from "react";
 import Preview from "./Preview";
+import SideBar from "./SideBar";
+
 import "./css/HomePage.css"
+import "./css/DefaultPage.css"
 
 class HomePage extends React.Component {
     // stores all available movies
@@ -15,9 +18,10 @@ class HomePage extends React.Component {
             loadeditems: [],
             sideinfo: {
                 videonr: null,
+                fullhdvideonr: null,
                 hdvideonr: null,
                 sdvideonr: null,
-                categorynr: null
+                tagnr: null
             },
             tag: "all"
         };
@@ -27,6 +31,7 @@ class HomePage extends React.Component {
         document.addEventListener('scroll', this.trackScrolling);
         // initial get of all videos
         this.fetchVideoData("all");
+        this.fetchStartData();
     }
 
     // this function clears all preview elements an reloads gravity with tag
@@ -49,6 +54,28 @@ class HomePage extends React.Component {
             });
     }
 
+    fetchStartData() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getStartData');
+
+        // fetch all videos available
+        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    this.setState({
+                        sideinfo: {
+                            videonr: result['total'],
+                            fullhdvideonr: result['fullhd'],
+                            hdvideonr: result['hd'],
+                            sdvideonr: result['sd'],
+                            tagnr: result['tags']
+                        }});
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+    }
+
     componentWillUnmount() {
         this.setState({});
         document.removeEventListener('scroll', this.trackScrolling);
@@ -57,32 +84,26 @@ class HomePage extends React.Component {
     render() {
         return (
             <div>
-                <div><h1>Home page</h1></div>
+                <div className='pageheader'>
-                <div className='sideinfo'>
+                    <span className='pageheadertitle'>Home Page</span>
-                    Infos:
+                    <span className='pageheadersubtitle'>All Videos - {this.state.sideinfo.videonr}</span>
-                    <div>Total Number of Videos: {this.state.sideinfo.videonr}</div>
+                    <hr/>
-                    <div>HD Videos: {this.state.sideinfo.hdvideonr}</div>
-                    <div>SD Videos: {this.state.sideinfo.sdvideonr}</div>
-                    <div>Total Number of Categories: {this.state.sideinfo.categorynr}</div>
-
-                    <div>default tags:</div>
-                    <button className='btn btn-primary' onClick={() => {
-                        this.fetchVideoData("fullhd");
-                    }}>FullHd
-                    </button>
-                    <button className='btn btn-primary' onClick={() => {
-                        this.fetchVideoData("all");
-                    }}>All
-                    </button>
-                    <button className='btn btn-primary' onClick={() => {
-                        this.fetchVideoData("lowquality");
-                    }}>LowQuality
-                    </button>
-                    <button className='btn btn-primary' onClick={() => {
-                        this.fetchVideoData("hd");
-                    }}>HD
-                    </button>
                 </div>
+                <SideBar>
+                    <div className='sidebartitle'>Infos:</div>
+                    <hr/>
+                    <div className='sidebarinfo'><b>{this.state.sideinfo.videonr}</b> Videos Total!</div>
+                    <div className='sidebarinfo'><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</div>
+                    <div className='sidebarinfo'><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</div>
+                    <div className='sidebarinfo'><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</div>
+                    <div className='sidebarinfo'><b>{this.state.sideinfo.tagnr}</b> different Tags!</div>
+                    <hr/>
+                    <div className='sidebartitle'>Default Tags:</div>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
+                </SideBar>
                 <div className='maincontent'>
                     {this.state.loadeditems.map(elem => (
                         <Preview
@@ -122,7 +143,9 @@ class HomePage extends React.Component {
     }
 
     trackScrolling = () => {
-        if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
+        // 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(6);
         }
     }

src/MainBody.js

@@ -1,32 +0,0 @@
-import React from "react";
-import HomePage from "./HomePage";
-import RandomPage from "./RandomPage";
-
-class MainBody extends React.Component {
-    constructor(props) {
-        super(props);
-        this.props = props;
-    }
-
-    render() {
-        let page;
-        if (this.props.page === "default") {
-            page = <HomePage viewbinding={this.props.viewbinding}/>;
-            this.mypage = page;
-        } else if (this.props.page === "random"){
-            page = <RandomPage viewbinding={this.props.viewbinding}/>;
-            this.mypage = page;
-        }else if (this.props.page === "video") {
-            // show videoelement if neccessary
-            page = this.props.videoelement;
-        }else if (this.props.page === "lastpage") {
-            // return back to last page
-            page = this.mypage;
-        } else {
-            page = <div>unimplemented yet!</div>;
-        }
-        return (page);
-    }
-}
-
-export default MainBody;

src/Player.js

@@ -1,6 +1,7 @@
 import React from "react";
 import "./css/Player.css"
 import {PlyrComponent} from 'plyr-react';
+import SideBar from "./SideBar";
 
 
 class Player extends React.Component {
@@ -36,50 +37,38 @@ class Player extends React.Component {
     render() {
         return (
             <div id='videocontainer'>
-                <div className="row">
+                <div className='pageheader'>
-                    <div className="col-sm-2">
+                    <span className='pageheadertitle'>Watch</span>
-                        <div className="videoleftbanner">
+                    <span className='pageheadersubtitle'>{this.state.movie_name}</span>
-                            <div className="likefield">Likes: {this.state.likes}</div>
+                    <hr/>
-                            <div className="likefield">Quality: {this.state.quality}p</div>
-                            <div className="likefield">Length in Minutes: {this.state.length}</div>
                 </div>
-                    </div>
+                <SideBar>
-                    <div className="col-sm-8">
+                    <div className='sidebartitle'>Infos:</div>
+                    <hr/>
+                    <div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
+                    <div className='sidebarinfo'><b> {this.state.quality}p</b> Quality!</div>
+                    <div className='sidebarinfo'><b>{this.state.length}</b> Minutes of length!</div>
+                    <hr/>
+                    <div className='sidebartitle'>Tags:</div>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
+                </SideBar>
+
                 <div className="videowrapper">
-                            <div className='myvideo'>
+                    {/* video component is added here */}
                     {this.state.sources ? <PlyrComponent
+                            className='myvideo'
                             sources={this.state.sources}
                             options={this.options}/> :
                         <div>not loaded yet</div>}
+                    <div className='videoactions'>
+                        <button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
+                        <button className='btn btn-info' id="tagbutton">Give this Video a Tag</button>
                     </div>
                 </div>
-                    </div>
+                <button className="closebutton" onClick={() => this.closebtn()}>Close</button>
-                    <div className="col-sm-2">
-                        <div className="closebutton" onClick={() => {
-                            this.closebtn()
-                        }}>Close
-                        </div>
-                        <div className="videorightbanner"></div>
-                    </div>
-                </div>
-                <div className="row">
-                    <div className="col-sm-5">
-
-
-                    </div>
-                    <div className="col-sm-2">
-                        <button className='btn btn-primary' onClick={() => {
-                            this.likebtn()
-                        }}>Like it!
-                        </button>
-                        <button className='btn btn-info' id="tagbutton">Tag it!</button>
-
-                    </div>
-                    <div className="col-sm-5">
-
-
-                    </div>
-                </div>
             </div>
         );
     }
@@ -104,6 +93,7 @@ class Player extends React.Component {
                         ],
                         poster: result.thumbnail
                     },
+                    movie_name: result.movie_name,
                     likes: result.likes,
                     quality: result.quality,
                     length: result.length
@@ -131,8 +121,6 @@ class Player extends React.Component {
     }
 
     closebtn() {
-        // todo go back to correct page here!
-        // have a catch to <Route>
         this.props.viewbinding.hideVideo();
     }
 }

src/RandomPage.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Preview from "./Preview";
 import "./css/RandomPage.css"
+import SideBar from "./SideBar";
 
 class RandomPage extends React.Component {
     constructor(props, context) {
@@ -16,11 +17,21 @@ class RandomPage extends React.Component {
     }
 
     render() {
-        return (<div>
+        return (
-            <div><h1>Random Videos</h1></div>
+            <div>
-            <div className='sideinfo'>
+                <div className='pageheader'>
-                todo here.
+                    <span className='pageheadertitle'>Random Videos</span>
+                    <span className='pageheadersubtitle'>6pc</span>
+                    <hr/>
                 </div>
+                <SideBar>
+                    <div className='sidebartitle'>Visible Tags:</div>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
+                    <button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
+                </SideBar>
+
                 <div className='maincontent'>
                     {this.state.videos.map(elem => (
                         <Preview
@@ -29,18 +40,12 @@ class RandomPage extends React.Component {
                             movie_id={elem.movie_id}
                             viewbinding={this.props.viewbinding}/>
                     ))}
-            </div>
-            <div className='rightinfo'>
-                right
-            </div>
                     <div className='Shufflebutton'>
-                <button onClick={() => {
+                        <button onClick={() => this.shuffleclick()} className='btnshuffle'>Shuffle</button>
-                    this.shuffleclick()
-                }} className='btn btn-success'>Shuffle
-                </button>
                     </div>
-
+                </div>
-        </div>);
+            </div>
+        );
     }
 
     shuffleclick() {

src/SideBar.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./css/SideBar.css"
+
+class SideBar extends React.Component {
+    render() {
+        return (<div className='sideinfo'>
+            {this.props.children}
+        </div>);
+    }
+}
+
+export default SideBar;

src/css/App.css

@@ -1,6 +1,7 @@
 .nav-item {
     cursor: pointer;
 }
+
 .nav-link {
     color: rgba(255, 255, 255, .5);
     font-weight: bold;

src/css/DefaultPage.css

@@ -0,0 +1,18 @@
+.pageheader {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding-left: 22%;
+    padding-right: 12%;
+}
+
+.pageheadertitle {
+    font-size: 40pt;
+    font-weight: bold;
+}
+
+.pageheadersubtitle {
+    margin-left: 20px;
+    font-size: 23pt;
+    opacity: 0.6;
+}
+

src/css/HomePage.css

@@ -1,8 +1,3 @@
-.sideinfo{
-    width: 20%;
-    float: left;
-}
-
 .maincontent {
     float: left;
     width: 70%;

src/css/Player.css

@@ -1,25 +1,13 @@
 .closebutton {
     color: white;
-    height: 35px;
+    border: none;
-    width: 90px;
+    border-radius: 10px;
-    margin-right: 80px;
+    padding: 5px 15px 5px 15px;
-    float: right;
     background-color: #FF0000;
-    cursor: pointer;
+    margin-top: 25px;
+    margin-left: 25px;
 }
 
-.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;
@@ -29,5 +17,16 @@
     border-radius: 10px;
     text-align: center;
     color: white;
-
+}
+
+.videowrapper {
+    margin-left: 20px;
+    display: block;
+    float: left;
+    width: 60%;
+    margin-top: 25px;
+}
+
+.videoactions{
+    margin-top: 15px;
 }

src/css/Preview.css

@@ -1,7 +1,8 @@
 .previewtitle {
     height: 10%;
-    color: white;
+    color: #3d3d3d;
     text-align: center;
+    font-weight: bold;
 }
 
 .previewpic {
@@ -17,8 +18,10 @@
     height: 300px;
     width: 30%;
     float: left;
-    margin: 1%;
+    margin-left: 25px;
-    background-color: #7F7F7F;
+    margin-top: 25px;
+    /*background-color: #7F7F7F;*/
+    background-color: #a8c3ff;
     cursor: pointer;
     opacity: 0.9;
     border: 10px;
@@ -29,10 +32,3 @@
     opacity: 1;
     transition: opacity 0.5s;
 }
-
-/* todo check if neccessary*/
-.previewcontainer {
-    margin-left: 10%;
-    width: 80%;
-    margin-right: 10%;
-}

src/css/RandomPage.css

@@ -2,3 +2,20 @@
     width: 100%;
     align-content: center;
 }
+
+.btnshuffle{
+    background-color: #39a945;
+
+    color: white;
+    margin-top: 20px;
+    margin-left: 45%;
+    border: none;
+    border-radius: 10px;
+    padding: 15px 25px 15px 25px;
+    font-weight: bold;
+    font-size: larger;
+}
+
+.btnshuffle:focus{
+    outline: none;
+}

src/css/SideBar.css

@@ -0,0 +1,43 @@
+.sideinfo {
+    width: 20%;
+    float: left;
+    padding: 20px;
+    margin-top: 25px;
+    margin-left: 15px;
+    background-color: #b4c7fe;
+    border-radius: 20px;
+    border: 2px #3574fe solid;
+}
+
+.tagbtn {
+    color: white;
+    margin: 10px;
+    background-color: #3574fe;
+    border: none;
+    border-radius: 10px;
+    padding: 5px 15px 5px 15px;
+    /*font-weight: bold;*/
+    display: block;
+}
+
+.tagbtn:focus {
+    background-color: #004eff;
+    outline: none;
+}
+
+.tagbtn:hover {
+    background-color: #004eff;
+}
+
+.sidebartitle {
+    font-weight: bold;
+    font-size: larger;
+}
+
+.sidebarinfo {
+    margin-top: 5px;
+    background-color: #8ca3fc;
+    border-radius: 5px;
+    padding: 2px 10px 2px 15px;
+    width: 60%;
+}