added readme improved style of prevew tiles

README.md

@@ -0,0 +1,39 @@
+# Open Media Center
+
+Github: This is only a clone of the main Repository.
+Feel free to contribute or open an issue here: https://gitlab.heili.eu/lukas/openmediacenter
+
+## What is this?
+Open Media Center is an open source solution for a mediacenter in your home network.
+It's based on Reactjs and  uses PHP for backend.
+It is optimized for general videos as well as for movies. 
+For grabbing movie data TMDB is used. 
+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)
+
+## Installation
+First of all clone the repository.
+
+`git clone https://gitlab.heili.eu/lukas/openmediacenter.git`
+
+Then build a production build via npm. 
+
+`npm run build`
+
+Afterwards you can copy the content of the generated `build` folder as well as the `api` folder to your webserver root. 
+
+You need also to setup a Database with the structure described in [SQL Style Reference](https://gitlab.heili.eu/lukas/openmediacenter/-/blob/master/database.sql). 
+The login data to this database needs to be specified in the `api/Database.php` file.
+ 
+## Usage
+To index Videos run on your server: `php extractvideopreviews.php`.
+
+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. 
+

api/TMDBMovie.php

@@ -6,7 +6,13 @@ class TMDBMovie
     private $baseurl = "https://api.themoviedb.org/3/";
     public $picturebase = "https://image.tmdb.org/t/p/w500";
 
-    public function searchMovie($moviename)
+    /**
+     * search for a specific movie
+     *
+     * @param string $moviename moviename
+     * @return object movie object or null if not found
+     */
+    public function searchMovie(string $moviename)
     {
         $reply = json_decode(file_get_contents($this->baseurl . "search/movie?api_key=" . $this->apikey . "&query=" . urlencode($moviename)));
         if ($reply->total_results == 0) {
@@ -15,19 +21,19 @@ class TMDBMovie
             return null;
         } else {
             return $reply->results[0];
-
-//            $image_base64 = base64_encode(file_get_contents($this->posterbase . $reply->results[0]->poster_path));
-//            $image = 'data:image/jpeg;base64,' . $image_base64;
-//            // Insert record
-//            $conn = Database::getInstance()->getConnection();
-//            $query = "insert into Movie(name,url,poster) values('" . pathinfo($i)['filename'] . "','/data/$i','" . $image . "')";
-//            if ($conn->query($query) === TRUE) {
-//                echo('{"data":"successfully created entry"}');
-//            } else {
-//                echo('{"data":"' . $conn->error . '"}');
-//            }
         }
     }
+
+    /**
+     * query all available genres from tmdb
+     *
+     * @return array of all available genres
+     */
+    public function getAllGenres()
+    {
+        $reply = json_decode(file_get_contents($this->baseurl . "genre/movie/list?api_key=" . $this->apikey));
+        return $reply->genres;
+    }
 }
 
 $temp = new TMDBMovie();

api/extractvideopreviews.php

@@ -27,9 +27,12 @@ foreach ($arr as $elem) {
             if (!mysqli_fetch_assoc($result)) {
                 // try to fetch data from TMDB
                 $poster = -1;
+                $genres = -1;
                 if (!is_null($dta = $tmdb->searchMovie($moviename))) {
                     $pic = file_get_contents($tmdb->picturebase . $dta->poster_path);
                     $poster = 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");
+
+                    $genres = $dta->genre_ids;
                 } else {
                     echo "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");
@@ -98,6 +101,16 @@ foreach ($arr as $elem) {
                             echo "failed to add default tag here.\n";
                         }
                     }
+
+                    // handle tmdb genres here!
+                    if($genres != -1){
+                        foreach ($genres as $genre) {
+                            // check if genre is already a tag in db
+                            echo $genre."\n\n";
+                        }
+                    }
+
+
                     $added++;
                     $all++;
                 } else {

src/Preview.js

@@ -45,6 +45,9 @@ class Preview extends React.Component {
                          src={this.state.previewpicture}
                          alt='Pic loading.'/>
                 </div>
+                <div className='previewbottom'>
+
+                </div>
             </div>
         );
     }

src/css/Preview.css

@@ -1,9 +1,10 @@
 .previewtitle {
-    height: 10%;
+    height: 20px;
     color: #3d3d3d;
     text-align: center;
     font-weight: bold;
     max-width: 266px;
+    font-size: smaller;
 }
 
 .previewpic {
@@ -12,14 +13,16 @@
 }
 
 .previewimage {
-    max-width: 100%;
+    max-height: 400px;
-    max-height: 100%;
+    min-width: 266px;
+    max-width: 410px;
+}
+
+.previewbottom{
+    height: 20px;
 }
 
 .videopreview {
-    height: 500px;
-    min-width: 266px;
-    max-width: 410px;
     /*width: 250px;*/
     float: left;
     margin-left: 25px;