added Random page for random videos

src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import MainBody from "./MainBody";
 
+// include bootstraps css
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 class App extends React.Component {
@@ -17,7 +18,7 @@ class App extends React.Component {
         return (
             <div className="App">
                 <nav className="navbar navbar-expand-sm bg-primary navbar-dark">
-                    <a className="navbar-brand" href="!#">Lukis Tube</a>
+                    <a className="navbar-brand" href="# ">Lukis Tube</a>
 
                     <ul className="navbar-nav">
                         <li className="nav-item">

src/HomePage.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import Preview from "./Preview";
 import "./css/HomePage.css"
 
@@ -12,7 +12,13 @@ class HomePage extends React.Component {
         super(props, context);
 
         this.state = {
-            loadeditems: []
+            loadeditems: [],
+            sideinfo: {
+                videonr: null,
+                hdvideonr: null,
+                sdvideonr: null,
+                categorynr: null
+            }
         };
     }
 
@@ -24,11 +30,16 @@ class HomePage extends React.Component {
 
         // fetch all videos available
         fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json())
+            .then((response) => response.json()
-            .then((result) => {
+                .then((result) => {
-                this.data = result;
+                    this.data = result;
-                this.loadPreviewBlock(12);
+                    this.loadPreviewBlock(12);
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
             });
+
+
     }
 
     componentWillUnmount() {
@@ -41,7 +52,11 @@ class HomePage extends React.Component {
             <div>
                 <div><h1>Home page</h1></div>
                 <div className='sideinfo'>
-                    beep beep
+                    Infos:
+                    <div>Total Number of Videos: {this.state.sideinfo.videonr}</div>
+                    <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>
                 <div className='maincontent'>
                     {this.state.loadeditems.map(elem => (

src/MainBody.js

@@ -1,5 +1,6 @@
 import React from "react";
 import HomePage from "./HomePage";
+import RandomPage from "./RandomPage";
 
 class MainBody extends React.Component {
     constructor(props) {
@@ -11,7 +12,9 @@ class MainBody extends React.Component {
         let page;
         if (this.props.page === "default") {
             page = <HomePage viewbinding={this.props.viewbinding}/>;
-        } else if (this.props.page === "video") {
+        } else if (this.props.page === "random"){
+            page = <RandomPage viewbinding={this.props.viewbinding}/>;
+        }else if (this.props.page === "video") {
             // show videoelement if neccessary
             page = this.props.videoelement;
         } else {

src/Player.js

@@ -121,6 +121,8 @@ class Player extends React.Component {
     }
 
     closebtn() {
+        // todo go back to correct page here!
+        // have a catch to <Route>
         this.props.viewbinding.hideVideo();
     }
 }

src/Preview.js

@@ -43,7 +43,7 @@ class Preview extends React.Component {
                 <div className='previewpic'>
                     <img className='previewimage'
                          src={this.state.previewpicture}
-                         alt='no thumbnail found'/>
+                         alt='Pic loading.'/>
                 </div>
             </div>
         );
@@ -52,7 +52,9 @@ class Preview extends React.Component {
     itemClick() {
         console.log("item clicked!" + this.state.name);
 
-        this.props.viewbinding.showVideo(<Player viewbinding={this.props.viewbinding} movie_id={this.props.movie_id}/>);
+        this.props.viewbinding.showVideo(<Player
+            viewbinding={this.props.viewbinding}
+            movie_id={this.props.movie_id}/>);
     }
 }
 

src/RandomPage.js

@@ -0,0 +1,67 @@
+import React from "react";
+import Preview from "./Preview";
+import "./css/RandomPage.css"
+
+class RandomPage extends React.Component {
+    constructor(props: P, context: any) {
+        super(props, context);
+
+        this.state = {
+            videos: []
+        };
+    }
+
+    componentDidMount() {
+        this.loadShuffledvideos(6);
+    }
+
+    render() {
+        return (<div>
+            <div><h1>Random Videos</h1></div>
+            <div className='sideinfo'>
+                todo here.
+            </div>
+            <div className='maincontent'>
+                {this.state.videos.map(elem => (
+                    <Preview
+                        key={elem.movie_id}
+                        name={elem.movie_name}
+                        movie_id={elem.movie_id}
+                        viewbinding={this.props.viewbinding}/>
+                ))}
+            </div>
+            <div className='rightinfo'>
+                right
+            </div>
+            <div className='Shufflebutton'>
+                <button onClick={() => {
+                    this.shuffleclick()
+                }} className='btn btn-success'>Shuffle
+                </button>
+            </div>
+
+        </div>);
+    }
+
+    shuffleclick() {
+        this.loadShuffledvideos(6);
+    }
+
+    loadShuffledvideos(nr) {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getRandomMovies');
+        updateRequest.append('number', nr);
+
+        // fetch all videos available
+        fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    this.setState({videos: result});
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+    }
+}
+
+export default RandomPage;

src/css/RandomPage.css

@@ -0,0 +1,4 @@
+.Shufflebutton{
+    width: 100%;
+    align-content: center;
+}