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

README.md

@@ -12,7 +12,7 @@ For organizing videos tags are used.
 
 Here you can see an example main page:
 
-![Image of OpenMediaCenter](https://i.ibb.co/pZMj9GL/Screenshot-20200604-163448.png)
+![Image of OpenMediaCenter](https://i.ibb.co/2PC3fmk/Screenshot-20200604-163448.png)
 
 ## Installation
 First of all clone the repository.
@@ -35,5 +35,5 @@ Now you can access your MediaCenter via the servers global ip (:
 
 ## Contact
 Any contribution is appreciated. 
-Feel free to contact me (lukas.heiligenbrunner@gmail.com), open an issue or request a new featur. 
+Feel free to contact me (lukas.heiligenbrunner@gmail.com), open an issue or request a new feature. 
 

api/Database.php

@@ -8,7 +8,7 @@ class Database
     private string $servername = "192.168.0.30";
     private string $username = "root";
     private string $password = "1qayxsw2";
-    private string $dbname = "mediacenter";
+    private string $dbname = "hub";
 
     // The db connection is established in the private constructor.
     private function __construct()

api/extractionData.php

@@ -0,0 +1,18 @@
+<?php
+$return = new stdClass();
+if (file_exists("/tmp/output.log")) {
+    $out = file_get_contents("/tmp/output.log");
+    // clear log file
+    file_put_contents("/tmp/output.log", "");
+    $return->message = $out;
+    $return->contentAvailable = true;
+
+    if (substr($out, -strlen("-42")) == "-42") {
+        unlink("/tmp/output.log");
+    }
+} else {
+    $return->contentAvailable = false;
+}
+
+
+echo json_encode($return);

api/extractvideopreviews.php

@@ -2,6 +2,8 @@
 require 'Database.php';
 require 'TMDBMovie.php';
 
+writeLog("starting extraction!\n");
+
 $ffmpeg = 'ffmpeg'; //or: /usr/bin/ffmpeg , or /usr/local/bin/ffmpeg - depends on your installation (type which ffmpeg into a console to find the install path)
 $tmdb = new TMDBMovie();
 
@@ -35,6 +37,7 @@ foreach ($arr as $elem) {
                     $genres = $dta->genre_ids;
                 } else {
                     echo "nothing found with TMDB!\n";
+                    writeLog("nothing found with TMDB!\n");
                     $pic = shell_exec("ffmpeg -hide_banner -loglevel panic -ss 00:04:00 -i \"../videos/prn/$elem\" -vframes 1 -q:v 2 -f singlejpeg pipe:1 2>/dev/null");
                 }
 
@@ -78,6 +81,7 @@ foreach ($arr as $elem) {
 
                 if ($conn->query($query) === TRUE) {
                     echo('successfully added ' . $elem . " to video gravity\n");
+                    writeLog('successfully added ' . $elem . " to video gravity\n");
                     $last_id = $conn->insert_id;
 
                     // full hd
@@ -85,6 +89,7 @@ foreach ($arr as $elem) {
                         $query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($last_id,2)";
                         if ($conn->query($query) !== TRUE) {
                             echo "failed to add default tag here.\n";
+                            writeLog("failed to add default tag here.\n");
                         }
                     }
 
@@ -92,21 +97,23 @@ foreach ($arr as $elem) {
                         $query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($last_id,4)";
                         if ($conn->query($query) !== TRUE) {
                             echo "failed to add default tag here.\n";
+                            writeLog("failed to add default tag here.\n");
                         }
                     }
 
-                    if ($width < 1250) {
+                    if ($width < 1250 && $width > 0) {
                         $query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($last_id,3)";
                         if ($conn->query($query) !== TRUE) {
                             echo "failed to add default tag here.\n";
+                            writeLog("failed to add default tag here.\n");
                         }
                     }
 
                     // handle tmdb genres here!
-                    if($genres != -1){
+                    if ($genres != -1) {
                         foreach ($genres as $genre) {
                             // check if genre is already a tag in db
-                            echo $genre."\n\n";
+//                            echo $genre."\n\n";
                         }
                     }
 
@@ -115,7 +122,9 @@ foreach ($arr as $elem) {
                     $all++;
                 } else {
                     echo('errored item: ' . $elem . "\n");
+                    writeLog('errored item: ' . $elem . "\n");
                     echo('{"data":"' . $conn->error . '"}\n');
+                    writeLog('{"data":"' . $conn->error . '"}\n');
                     $failed++;
                 }
             } else {
@@ -123,6 +132,7 @@ foreach ($arr as $elem) {
             }
         } else {
             echo($elem . " does not contain a .mp4 extension! - skipping \n");
+            writeLog($elem . " does not contain a .mp4 extension! - skipping \n");
         }
     }
 }
@@ -133,8 +143,11 @@ $r = mysqli_fetch_assoc($result);
 
 if ($all < $r['count']) {
     echo "should be in gravity: " . $all . "\n";
+    writeLog("should be in gravity: " . $all . "\n");
     echo "really in gravity: " . $r['count'] . "\n";
+    writeLog("really in gravity: " . $r['count'] . "\n");
     echo "cleaning up gravity\n";
+    writeLog("cleaning up gravity\n");
 
     $query = "SELECT movie_id,movie_url FROM videos";
     $result = $conn->query($query);
@@ -144,9 +157,11 @@ if ($all < $r['count']) {
             $query = "DELETE FROM videos WHERE movie_id='" . $r['movie_id'] . "'";
             if ($conn->query($query) === TRUE) {
                 echo('successfully deleted ' . $r['movie_url'] . " from video gravity\n");
+                writeLog('successfully deleted ' . $r['movie_url'] . " from video gravity\n");
                 $deleted++;
             } else {
                 echo "failed to delete " . $r['movie_url'] . " from gravity: " . $conn->error . "\n";
+                writeLog("failed to delete " . $r['movie_url'] . " from gravity: " . $conn->error . "\n");
             }
         }
     }
@@ -166,10 +181,16 @@ if ($result->num_rows == 1) {
 }
 
 echo "Total gravity: " . $all . "\n";
+writeLog("Total gravity: " . $all . "\n");
 echo "Size of Databse is: " . $size . "MB\n";
+writeLog("Size of Databse is: " . $size . "MB\n");
 echo "added in this run: " . $added . "\n";
+writeLog("added in this run: " . $added . "\n");
 echo "deleted in this run: " . $deleted . "\n";
+writeLog("deleted in this run: " . $deleted . "\n");
 echo "errored in this run: " . $failed . "\n";
+writeLog("errored in this run: " . $failed . "\n");
+writeLog("-42");
 
 function _get_video_attributes($video)
 {
@@ -177,3 +198,9 @@ function _get_video_attributes($video)
     $output = shell_exec($command);
     return json_decode($output);
 }
+
+function writeLog(string $message)
+{
+    file_put_contents("/tmp/output.log", $message, FILE_APPEND);
+    flush();
+}

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="A Application to run a Mediacenter in your local network"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>OpenMediaCenter</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

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>
+                    {this.state.quality != 0 ?
-                    <div className='sidebarinfo'><b>{this.state.length}</b> Minutes of length!</div>
+                        <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;
+    opacity: 0.85;
-    border: 10px;
     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;
 }