created settings page

set html title
poll infos about current reindex
better hover effect of preview tiles
hide non existing infos in Player
fixed wrong tagging of lq resolutions

src/App.js

@@ -5,6 +5,7 @@ import RandomPage from "./RandomPage";
 
 // include bootstraps css
 import 'bootstrap/dist/css/bootstrap.min.css';
+import SettingsPage from "./SettingsPage";
 
 class App extends React.Component {
     constructor(props, context) {
@@ -26,6 +27,9 @@ class App extends React.Component {
         } else if (this.state.page === "random") {
             page = <RandomPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
             this.mypage = page;
+        } else if (this.state.page === "settings") {
+            page = <SettingsPage/>;
+            this.mypage = page;
         } else if (this.state.page === "video") {
             // show videoelement if neccessary
             page = this.videoelement;

src/Player.js

@@ -54,8 +54,12 @@ class Player extends React.Component {
                     <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>
+                    {this.state.quality != 0 ?
+                        <div className='sidebarinfo'><b>{this.state.quality}p</b> Quality!
+                        </div> : null}
+                    {this.state.length != 0 ?
+                        <div className='sidebarinfo'><b>{Math.round(this.state.length / 60)}</b> Minutes of length!
+                        </div> : null}
                     <hr/>
                     <div className='sidebartitle'>Tags:</div>
                     {this.state.tags.map((m) => (

src/RandomPage.js

@@ -23,7 +23,7 @@ class RandomPage extends React.Component {
             <div>
                 <div className='pageheader'>
                     <span className='pageheadertitle'>Random Videos</span>
-                    <span className='pageheadersubtitle'>6pc</span>
+                    <span className='pageheadersubtitle'>4pc</span>
                     <hr/>
                 </div>
                 <SideBar>

src/SettingsPage.js

@@ -0,0 +1,84 @@
+import React from "react";
+import "./css/DefaultPage.css"
+
+
+class SettingsPage extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            text: []
+        };
+    }
+
+    updateStatus = () => {
+        const updateRequest = new FormData();
+        fetch('/api/extractionData.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    if (result.contentAvailable === true) {
+                        console.log(result);
+                        this.setState({
+                            text: [...result.message.split("\n"),
+                                ...this.state.text]
+                        });
+                    } else {
+                        clearInterval(this.myinterval);
+                    }
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+    };
+
+    componentDidMount() {
+        if(this.myinterval){
+            clearInterval(this.myinterval);
+        }
+        this.myinterval = setInterval(this.updateStatus, 1000);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.myinterval);
+    }
+
+    render() {
+        return (
+            <div>
+                <div className='pageheader'>
+                    <span className='pageheadertitle'>Settings Page</span>
+                    <span className='pageheadersubtitle'>todo</span>
+                    <hr/>
+                </div>
+
+                <button onClick={() => {
+                    this.startReindex()
+                }}>Reindex Movies
+                </button>
+                <div>{this.state.text.map(m => (
+                    <div>{m}</div>
+                ))}</div>
+            </div>
+        );
+    }
+
+    startReindex() {
+        console.log("starting");
+        const updateRequest = new FormData();
+        // fetch all videos available
+        fetch('/api/extractvideopreviews.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    console.log("returned");
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+        if(this.myinterval){
+            clearInterval(this.myinterval);
+        }
+        this.myinterval = setInterval(this.updateStatus, 1000);
+        console.log("sent");
+    }
+}
+
+export default SettingsPage;

src/css/Preview.css

@@ -18,24 +18,23 @@
     max-width: 410px;
 }
 
-.previewbottom{
+.previewbottom {
     height: 20px;
 }
 
 .videopreview {
-    /*width: 250px;*/
     float: left;
     margin-left: 25px;
     margin-top: 25px;
     /*background-color: #7F7F7F;*/
     background-color: #a8c3ff;
     cursor: pointer;
-    opacity: 0.9;
-    border: 10px;
+    opacity: 0.85;
     border-radius: 20px;
 }
 
 .videopreview:hover {
     opacity: 1;
-    transition: opacity 0.5s;
+    box-shadow: rgba(2, 12, 27, 0.7) 0px 0px 0px 5px;
+    transition: all 300ms;
 }