From 060348be9e612ea2d016c1b436985191d8c06fce Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Mon, 1 Jun 2020 20:46:28 +0200
Subject: [PATCH] added Random page for random videos

---
 src/App.js             |  3 +-
 src/HomePage.js        | 29 +++++++++++++-----
 src/MainBody.js        |  5 +++-
 src/Player.js          |  2 ++
 src/Preview.js         |  6 ++--
 src/RandomPage.js      | 67 ++++++++++++++++++++++++++++++++++++++++++
 src/css/RandomPage.css |  4 +++
 7 files changed, 105 insertions(+), 11 deletions(-)
 create mode 100644 src/RandomPage.js
 create mode 100644 src/css/RandomPage.css

diff --git a/src/App.js b/src/App.js
index 8963a22..68380bc 100644
--- a/src/App.js
+++ b/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">
diff --git a/src/HomePage.js b/src/HomePage.js
index 320c245..7836e01 100644
--- a/src/HomePage.js
+++ b/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((result) => {
-                this.data = result;
-                this.loadPreviewBlock(12);
+            .then((response) => response.json()
+                .then((result) => {
+                    this.data = result;
+                    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 => (
diff --git a/src/MainBody.js b/src/MainBody.js
index 7e85f79..e0e2935 100644
--- a/src/MainBody.js
+++ b/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 {
diff --git a/src/Player.js b/src/Player.js
index 1f3ad65..429daa8 100644
--- a/src/Player.js
+++ b/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();
     }
 }
diff --git a/src/Preview.js b/src/Preview.js
index 91bd18d..8028c33 100644
--- a/src/Preview.js
+++ b/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}/>);
     }
 }
 
diff --git a/src/RandomPage.js b/src/RandomPage.js
new file mode 100644
index 0000000..2f40a7f
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/css/RandomPage.css b/src/css/RandomPage.css
new file mode 100644
index 0000000..d8a06ac
--- /dev/null
+++ b/src/css/RandomPage.css
@@ -0,0 +1,4 @@
+.Shufflebutton{
+    width: 100%;
+    align-content: center;
+}
\ No newline at end of file