show a span on tag hover to delete it maybe

# Conflicts:
#	api/src/handlers/Tags.php
#	src/elements/ActorTile/ActorTile.tsx
#	src/elements/Preview/Preview.tsx
#	src/elements/Tag/Tag.tsx
#	src/pages/Player/Player.tsx

.codeclimate.yml

@@ -0,0 +1,65 @@
+version: "2"
+plugins:
+  csslint:
+    enabled: true
+  coffeelint:
+    enabled: true
+  duplication:
+    enabled: true
+    config:
+      languages:
+        - ruby
+        - javascript
+        - python
+        - php
+  eslint:
+    enabled: true
+    channel: __ESLINT_CHANNEL__
+  fixme:
+    enabled: true
+  rubocop:
+    enabled: true
+exclude_patterns:
+  - config/
+  - db/
+  - dist/
+  - features/
+  - "**/node_modules/"
+  - script/
+  - "**/spec/"
+  - "**/test/"
+  - "**/tests/"
+  - Tests/
+  - "**/vendor/"
+  - "**/*_test.go"
+  - "**/*.d.ts"
+  - "**/*.min.js"
+  - "**/*.min.css"
+  - "**/__tests__/"
+  - "**/__mocks__/"
+  - "**/*.test.js"
+checks:
+  argument-count:
+    config:
+      threshold: 5
+  complex-logic:
+    config:
+      threshold: 4
+  file-lines:
+    config:
+      threshold: 350
+  method-complexity:
+    config:
+      threshold: 5
+  method-count:
+    config:
+      threshold: 20
+  method-lines:
+    config:
+      threshold: 60
+  nested-control-flow:
+    config:
+      threshold: 4
+  return-statements:
+    config:
+      threshold: 4

.gitlab-ci.yml

@@ -1,34 +1,116 @@
-image: node:latest
+image: node:14
 
 stages:
-  - test
-  - coverage
   - build
+  - test
+  - packaging
+  - deploy
 
-cache:
-  paths:
-    - node_modules/
+include:
+  - template: Code-Quality.gitlab-ci.yml
 
-test:
-  stage: test
+variables:
+  SAST_DISABLE_DIND: "true"
+
+Minimize_Frontend:
+  stage: build
+  before_script:
+    - yarn install --cache-folder .yarn
   script:
-    - npm install
-    - CI=true npm run test
+    - yarn run build
+  artifacts:
+    expire_in: 2 days
+    paths:
+      - build/
+  cache:
+    key: ${CI_COMMIT_REF_SLUG}
+    paths:
+      - .yarn/
+      - node_modules/
+
+Build_Backend:
+  image: golang:latest
+  stage: build
+  script:
+    - cd apiGo
+    - go build -v -o openmediacenter
+    - env GOOS=windows GOARCH=amd64 go build -v -o openmediacenter.exe
+  artifacts:
+    expire_in: 2 days
+    paths:
+      - "./apiGo/openmediacenter*"
+
+Frontend_Tests:
+  stage: test
+  before_script:
+    - yarn install --cache-folder .yarn
+  script:
+    - yarn run test
   artifacts:
     reports:
       junit:
         - ./junit.xml
+  cache:
+    key: ${CI_COMMIT_REF_SLUG}
+    paths:
+      - .yarn/
+      - node_modules/
 
-coverage:
-  stage: coverage
+Backend_Tests:
+  image: golang:latest
+  stage: test
   script:
-    - CI=true npm run coverage
+    - cd apiGo
+    - go get -u github.com/jstemmer/go-junit-report
+    - go test -v ./... 2>&1 | go-junit-report -set-exit-code > report.xml
   artifacts:
+    when: always
     reports:
-      cobertura:
-        - ./coverage/cobertura-coverage.xml
+      junit: ./apiGo/report.xml
 
-build:
-  stage: build
+code_quality:
+  tags:
+    - dind
+
+Debian_Server:
+  stage: packaging
+  image: debian
   script:
-    - npm run build
+    - vers=$(grep -Po '"version":.*?[^\\]",' package.json | grep -Po '[0-9]+\.[0-9]+\.[0-9]+') # parse the version out of package .json
+    - cd deb
+    - mkdir -p "./OpenMediaCenter/var/www/openmediacenter/videos/"
+    - mkdir -p "./OpenMediaCenter/tmp/"
+    - mkdir -p "./OpenMediaCenter/usr/bin/"
+    - cp -r ../build/* ./OpenMediaCenter/var/www/openmediacenter/
+    - cp ../apiGo/openmediacenter ./OpenMediaCenter/usr/bin/
+    - cp ../database.sql ./OpenMediaCenter/tmp/openmediacenter.sql
+    - 'echo "Version: ${vers}" >> ./OpenMediaCenter/DEBIAN/control'
+    - chmod -R 0775 *
+    - dpkg-deb --build OpenMediaCenter
+    - mv OpenMediaCenter.deb OpenMediaCenter-${vers}_amd64.deb
+  artifacts:
+    expire_in: 7 days
+    paths:
+      - deb/OpenMediaCenter-*.deb
+  needs:
+      - Minimize_Frontend
+      - Build_Backend
+
+Test_Server:
+  stage: deploy
+  image: luki42/alpineopenssh:latest
+  needs:
+    - Frontend_Tests
+    - Backend_Tests
+    - Debian_Server
+  only:
+    - master
+  script:
+    - eval $(ssh-agent -s)
+    - ssh-add <(echo "$SSH_PRIVATE_KEY")
+    - mkdir -p ~/.ssh
+    - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
+    - scp deb/OpenMediaCenter-*.deb root@192.168.0.42:/tmp/
+    - ssh root@192.168.0.42 "DEBIAN_FRONTEND=noninteractive apt-get --reinstall  -y -qq install /tmp/OpenMediaCenter-*.deb && rm /tmp/OpenMediaCenter-*.deb"
+  allow_failure: true
+

README.md

@@ -7,14 +7,19 @@ Feel free to contribute or open an issue here: https://gitlab.heili.eu/lukas/ope
 
 ## 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.
+Transform your webserver into a mediaserver.
+It's based on Reactjs and golang is used 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.
+With the help of tags you can organize your video gravity.
 
-Here you can see an example main page:
+Here you can see an example main page in light mode:
 
-![Image of OpenMediaCenter](https://i.ibb.co/2PC3fmk/Screenshot-20200604-163448.png)
+![Image of OpenMediaCenter](https://i.ibb.co/pnDjgNT/Screenshot-20200812-172945.png)
+
+and in dark mode:
+
+![](https://i.ibb.co/xzhdsbJ/Screenshot-20200812-172926.png)
 
 ## Installation
 First of all clone the repository.
@@ -31,9 +36,9 @@ You need also to setup a Database with the structure described in [SQL Style Ref
 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 your servers global ip (:
 
-Now you can access your MediaCenter via the servers global ip (:
+At the settings tab you can set the correct videopath on server and click reindex afterwards. 
 
 ## Contact
 Any contribution is appreciated. 

api/Database.php

@@ -1,61 +0,0 @@
-<?php
-
-/**
- * Class Database
- *
- * Class with all neccessary stuff for the Database connections.
- */
-class Database
-{
-    private static ?Database $instance = null;
-    private mysqli $conn;
-
-    private string $servername = "192.168.0.30";
-    private string $username = "root";
-    private string $password = "1qayxsw2";
-    private string $dbname = "mediacenter";
-
-    // The db connection is established in the private constructor.
-    private function __construct()
-    {
-        // Create connection
-        $this->conn = new mysqli($this->servername, $this->username, $this->password, $this->dbname);
-
-        if ($this->conn->connect_errno) {
-            echo "connecton failed... nr: " . $this->conn->connect_errno . " -- " . $this->conn->connect_error;
-        }
-    }
-
-    /**
-     * get an instance of this database class
-     * (only possible way to retrieve an object)
-     *
-     * @return Database dbobject
-     */
-    public static function getInstance()
-    {
-        if (!self::$instance) {
-            self::$instance = new Database();
-        }
-
-        return self::$instance;
-    }
-
-    /**
-     * get a connection instance of the database
-     *
-     * @return mysqli mysqli instance
-     */
-    public function getConnection()
-    {
-        return $this->conn;
-    }
-
-    /**
-     * get name of current active database
-     * @return string name
-     */
-    public function getDatabaseName(){
-        return $this->dbname;
-    }
-}

api/TMDBMovie.php

@@ -1,37 +0,0 @@
-<?php
-
-class TMDBMovie
-{
-    private $apikey = "9fd90530b11447f5646f8e6fb4733fb4";
-    private $baseurl = "https://api.themoviedb.org/3/";
-    public $picturebase = "https://image.tmdb.org/t/p/w500";
-
-    /**
-     * 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) {
-            // no results found
-            // todo maybe parse first pictures somehow
-            return null;
-        } else {
-            return $reply->results[0];
-        }
-    }
-
-    /**
-     * 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;
-    }
-}

api/Tags.php

@@ -1,31 +0,0 @@
-<?php
-require 'Database.php';
-
-$conn = Database::getInstance()->getConnection();
-
-if (isset($_POST['action'])) {
-    $action = $_POST['action'];
-    switch ($action) {
-        case "getAllTags":
-            $query = "SELECT tag_name,tag_id from tags";
-
-            $result = $conn->query($query);
-            $rows = array();
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($rows, $r);
-            }
-            echo json_encode($rows);
-
-            break;
-
-        case "createTag":
-            $query = "INSERT INTO tags (tag_name) VALUES ('" . $_POST['tagname'] . "')";
-
-            if ($conn->query($query) === TRUE) {
-                echo('{"result":"success"}');
-            } else {
-                echo('{"result":"' . $conn->error . '"}');
-            }
-            break;
-    }
-}

api/extractionData.php

@@ -1,18 +0,0 @@
-<?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

@@ -1,265 +0,0 @@
-<?php
-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();
-// initial load of all available movie genres
-$tmdbgenres = $tmdb->getAllGenres();
-
-$conn = Database::getInstance()->getConnection();
-
-$scandir = "../videos/prn/";
-$arr = scandir($scandir);
-
-$all = 0;
-$added = 0;
-$deleted = 0;
-$failed = 0;
-
-foreach ($arr as $elem) {
-    if ($elem != "." && $elem != "..") {
-        if (strpos($elem, '.mp4') !== false) {
-            $moviename = substr($elem, 0, -4);
-
-            $query = "SELECT * FROM videos WHERE movie_name = '" . mysqli_real_escape_string($conn, $moviename) . "'";
-            $result = $conn->query($query);
-
-            // insert if not available in db
-            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");
-
-                    // error handling for download error
-                    if (!$pic) {
-                        $pic = $poster;
-                        $poster = -1;
-                        echo "Failed to load Picture from TMDB!  \n";
-                    }
-
-                    $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");
-                }
-
-                //convert video to base64
-                $image_base64 = base64_encode($pic);
-                // add base64 fileinfo
-                $image = 'data:image/jpeg;base64,' . $image_base64;
-
-                // extract other video attributes
-                $video_attributes = _get_video_attributes($elem);
-                $duration = 0;
-                $size = 0;
-                $width = 0;
-
-                if ($video_attributes) {
-                    $duration = $video_attributes->media->track[0]->Duration; // in seconds
-                    $size = $video_attributes->media->track[0]->FileSize; // in Bytes
-                    $width = $video_attributes->media->track[1]->Width; // width
-                }
-
-
-                if ($poster != -1) {
-                    $poster_base64 = 'data:image/jpeg;base64,' . base64_encode($poster);
-
-                    $query = "INSERT INTO videos(movie_name,movie_url,poster,thumbnail,quality,length) 
-                            VALUES ('" . mysqli_real_escape_string($conn, $moviename) . "',
-                            '" . mysqli_real_escape_string($conn, 'videos/prn/' . $elem) . "',
-                            '$poster_base64',
-                            '$image',
-                            '$width',
-                            '$duration')";
-                } else {
-                    $query = "INSERT INTO videos(movie_name,movie_url,thumbnail,quality,length) 
-                            VALUES ('" . mysqli_real_escape_string($conn, $moviename) . "',
-                            '" . mysqli_real_escape_string($conn, 'videos/prn/' . $elem) . "',
-                            '$image',
-                            '$width',
-                            '$duration')";
-                }
-
-
-                if ($conn->query($query) === TRUE) {
-                    echo('successfully added ' . $elem . " to video gravity\n");
-                    writeLog('successfully added ' . $elem . " to video gravity\n");
-
-                    // add this entry to the default tags
-                    $last_id = $conn->insert_id;
-
-                    // full hd
-                    if ($width >= 1900) {
-                        $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");
-                        }
-                    }
-
-                    // HD
-                    if ($width >= 1250 && $width < 1900) {
-                        $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");
-                        }
-                    }
-
-                    // SD
-                    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) {
-                        // transform genre ids in valid names
-                        foreach ($genres as $genreid) {
-                            // check if genre is already a tag in db if not insert it
-                            $tagname = array_column($tmdbgenres, 'name', 'id')[$genreid];
-                            $tagid = tagExists($tagname);
-
-                            $query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($last_id,$tagid)";
-                            if ($conn->query($query) !== TRUE) {
-                                echo "failed to add $genreid tag here.\n";
-                                writeLog("failed to add $genreid tag here.\n");
-                            }
-                        }
-                    }
-
-
-                    $added++;
-                    $all++;
-                } else {
-                    echo('errored item: ' . $elem . "\n");
-                    writeLog('errored item: ' . $elem . "\n");
-                    echo('{"data":"' . $conn->error . '"}\n');
-                    writeLog('{"data":"' . $conn->error . '"}\n');
-                    $failed++;
-                }
-            } else {
-                $all++;
-            }
-        } else {
-            echo($elem . " does not contain a .mp4 extension! - skipping \n");
-            writeLog($elem . " does not contain a .mp4 extension! - skipping \n");
-        }
-    }
-}
-
-// auto cleanup db entries
-$query = "SELECT COUNT(*) as count FROM videos";
-$result = $conn->query($query);
-$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);
-
-    while ($r = mysqli_fetch_assoc($result)) {
-        if (!file_exists("../" . $r['movie_url'])) {
-            $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");
-            }
-        }
-    }
-}
-
-// calculate size of databse here
-$size = -1;
-$query = "SELECT table_schema AS \"Database\", 
-                        ROUND(SUM(data_length + index_length) / 1024 / 1024, 3) AS \"Size\" 
-                        FROM information_schema.TABLES 
-                        WHERE TABLE_SCHEMA='" . Database::getInstance()->getDatabaseName() . "'
-                        GROUP BY table_schema;";
-$result = $conn->query($query);
-if ($result->num_rows == 1) {
-    $row = $result->fetch_assoc();
-    $size = $row["Size"];
-}
-
-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"); // terminating characters to stop webui requesting infos
-
-/**
- * get all videoinfos of a video file
- *
- * @param $video string name including extension
- * @return object all infos as object
- */
-function _get_video_attributes($video)
-{
-    $command = "mediainfo \"../videos/prn/$video\" --Output=JSON";
-    $output = shell_exec($command);
-    return json_decode($output);
-}
-
-/**
- * write a line to the output log file
- *
- * @param string $message message to write
- */
-function writeLog(string $message)
-{
-    file_put_contents("/tmp/output.log", $message, FILE_APPEND);
-    flush();
-}
-
-/**
- * ckecks if tag exists -- if not creates it
- * @param string $tagname the name of the tag
- * @return integer the id of the inserted tag
- */
-function tagExists(string $tagname)
-{
-    global $conn;
-
-    $query = "SELECT * FROM tags WHERE tag_name='$tagname'";
-
-    $result = $conn->query($query);
-    if ($result->num_rows == 0) {
-        // tag does not exist --> create it
-        $query = "INSERT INTO tags (tag_name) VALUES ('$tagname')";
-        if ($conn->query($query) !== TRUE) {
-            echo "failed to create $tagname tag in database\n";
-            writeLog("failed to create $tagname tag in database\n");
-        }
-        return $conn->insert_id;
-    } else {
-        return $result->fetch_assoc()['tag_id'];
-    }
-}

api/src/handlers/Tags.php

@@ -0,0 +1,84 @@
+<?php
+require_once 'RequestBase.php';
+
+/**
+ * Class Tags
+ * backend to handle Tag database interactions
+ */
+class Tags extends RequestBase {
+    function initHandlers() {
+        $this->addToDB();
+        $this->getFromDB();
+        $this->delete();
+    }
+
+    private function addToDB() {
+        /**
+         * creates a new tag
+         * query requirements:
+         * * tagname -- name of the new tag
+         */
+        $this->addActionHandler("createTag", function () {
+            // skip tag create if already existing
+            $query = "INSERT IGNORE INTO tags (tag_name) VALUES ('" . $_POST['tagname'] . "')";
+
+            if ($this->conn->query($query) === TRUE) {
+                $this->commitMessage('{"result":"success"}');
+            } else {
+                $this->commitMessage('{"result":"' . $this->conn->error . '"}');
+            }
+        });
+
+        /**
+         * adds a new tag to an existing video
+         *
+         * query requirements:
+         * * movieid  -- the id of the video to add the tag to
+         * * id -- the tag id which tag to add
+         */
+        $this->addActionHandler("addTag", function () {
+            $movieid = $_POST['movieid'];
+            $tagid = $_POST['id'];
+
+            // skip tag add if already assigned
+            $query = "INSERT IGNORE INTO video_tags(tag_id, video_id) VALUES ('$tagid','$movieid')";
+
+            if ($this->conn->query($query) === TRUE) {
+                $this->commitMessage('{"result":"success"}');
+            } else {
+                $this->commitMessage('{"result":"' . $this->conn->error . '"}');
+            }
+        });
+    }
+
+    private function getFromDB() {
+        /**
+         * returns all available tags from database
+         */
+        $this->addActionHandler("getAllTags", function () {
+            $query = "SELECT tag_name,tag_id from tags";
+            $result = $this->conn->query($query);
+
+            $rows = array();
+            while ($r = mysqli_fetch_assoc($result)) {
+                array_push($rows, $r);
+            }
+            $this->commitMessage(json_encode($rows));
+        });
+    }
+
+    private function delete() {
+        /**
+         * delete a Tag from a video
+         */
+        $this->addActionHandler("deleteVideoTag", function () {
+            $movieid = $_POST['video_id'];
+            $tagid = $_POST['tag_id'];
+
+            // skip tag add if already assigned
+            $query = "DELETE FROM video_tags WHERE tag_id=$tagid AND video_id=$movieid";
+
+            $this->commitMessage($this->conn->query($query) ? '{"result":"success"}' : '{"result":"' . $this->conn->error . '"}');
+        });
+    }
+}

api/videoload.php

@@ -1,232 +0,0 @@
-<?php
-require 'Database.php';
-
-$conn = Database::getInstance()->getConnection();
-
-//$_POST['action'] = "getRandomMovies";$_POST['number'] =6;
-if (isset($_POST['action'])) {
-    $action = $_POST['action'];
-    switch ($action) {
-        case "getMovies":
-            $query = "SELECT movie_id,movie_name FROM videos ORDER BY likes DESC, create_date DESC, movie_name ASC";
-            if (isset($_POST['tag'])) {
-                $tag = $_POST['tag'];
-                if ($_POST['tag'] != "all") {
-                    $query = "SELECT movie_id,movie_name FROM videos 
-                            INNER JOIN video_tags vt on videos.movie_id = vt.video_id
-                            INNER JOIN tags t on vt.tag_id = t.tag_id
-                            WHERE t.tag_name = '$tag'
-                            ORDER BY likes DESC, create_date ASC, movie_name ASC";
-                }
-            }
-            $result = $conn->query($query);
-            $rows = array();
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($rows, $r);
-            }
-
-            echo(json_encode($rows));
-            break;
-        case "getRandomMovies":
-            $return = new stdClass();
-            $query = "SELECT movie_id,movie_name FROM videos ORDER BY RAND() LIMIT " . $_POST['number'];
-            $result = $conn->query($query);
-            $return->rows = array();
-
-            // get tags of random videos
-            $ids = [];
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($return->rows, $r);
-                array_push($ids, "video_tags.video_id=" . $r['movie_id']);
-            }
-
-            $idstring = implode(" OR ", $ids);
-
-            $return->tags = array();
-            $query = "SELECT t.tag_name FROM video_tags 
-                        INNER JOIN tags t on video_tags.tag_id = t.tag_id
-                        WHERE $idstring
-                        GROUP BY t.tag_name";
-            $result = $conn->query($query);
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($return->tags, $r);
-            }
-
-            echo(json_encode($return));
-            break;
-        case "getSearchKeyWord":
-            $search = $_POST['keyword'];
-
-            $query = "SELECT movie_id,movie_name FROM videos 
-                        WHERE movie_name LIKE '%$search%'
-                        ORDER BY likes DESC, create_date DESC, movie_name ASC";
-            $result = $conn->query($query);
-            $rows = array();
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($rows, $r);
-            }
-
-            echo(json_encode($rows));
-
-            break;
-        case "loadVideo":
-            $query = "SELECT movie_name,movie_id,movie_url,thumbnail,poster,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
-
-            $result = $conn->query($query);
-            $row = $result->fetch_assoc();
-
-            $arr = array();
-            if ($row["poster"] == null) {
-                $arr["thumbnail"] = $row["thumbnail"];
-            } else {
-                $arr["thumbnail"] = $row["poster"];
-            }
-
-            $arr["movie_id"] = $row["movie_id"];
-            $arr["movie_name"] = $row["movie_name"];
-            $arr["movie_url"] = str_replace("?","%3F",$row["movie_url"]);
-            $arr["likes"] = $row["likes"];
-            $arr["quality"] = $row["quality"];
-            $arr["length"] = $row["length"];
-
-            // load tags of this video
-            $arr['tags'] = array();
-            $query = "SELECT t.tag_name FROM video_tags 
-                        INNER JOIN tags t on video_tags.tag_id = t.tag_id
-                        WHERE video_tags.video_id=" . $_POST['movieid'] . "
-                        GROUP BY t.tag_name";
-            $result = $conn->query($query);
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($arr['tags'], $r);
-            }
-
-            echo(json_encode($arr));
-
-            break;
-        case "getDbSize":
-            $query = "SELECT table_schema AS \"Database\", 
-                        ROUND(SUM(data_length + index_length) / 1024 / 1024, 2) AS \"Size\" 
-                        FROM information_schema.TABLES 
-                        WHERE TABLE_SCHEMA='hub'
-                        GROUP BY table_schema;";
-            $result = $conn->query($query);
-
-            if ($result->num_rows == 1) {
-                $row = $result->fetch_assoc();
-                echo '{"data":"' . $row["Size"] . 'MB"}';
-            }
-
-            break;
-        case "readThumbnail":
-            $query = "SELECT thumbnail FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
-
-            $result = $conn->query($query);
-            $row = $result->fetch_assoc();
-
-            echo($row["thumbnail"]);
-
-            break;
-        case "getTags":
-            // todo add this to loadVideo maybe
-            $movieid = $_POST['movieid'];
-
-            $query = "SELECT tag_name FROM video_tags 
-                        INNER JOIN tags t on video_tags.tag_id = t.tag_id 
-                        WHERE video_id='$movieid'";
-
-            $result = $conn->query($query);
-
-            $rows = array();
-            $rows['tags'] = array();
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($rows['tags'], $r['tag_name']);
-            }
-
-            echo(json_encode($rows));
-            break;
-        case "addLike":
-            $movieid = $_POST['movieid'];
-
-            $query = "update videos set likes = likes + 1 where movie_id = '$movieid'";
-
-            if ($conn->query($query) === TRUE) {
-                echo('{"result":"success"}');
-            } else {
-                echo('{"result":"' . $conn->error . '"}');
-            }
-            break;
-        case "getStartData":
-            $query = "SELECT COUNT(*) as nr FROM videos";
-            $result = $conn->query($query);
-            $r = mysqli_fetch_assoc($result);
-
-            $arr = array();
-            $arr['total'] = $r['nr'];
-
-            $query = "SELECT COUNT(*) as nr FROM videos
-                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
-                        INNER JOIN tags t on vt.tag_id = t.tag_id";
-            $result = $conn->query($query);
-            $r = mysqli_fetch_assoc($result);
-            $arr['tagged'] = $r['nr'];
-
-            $query = "SELECT COUNT(*) as nr FROM videos
-                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
-                        INNER JOIN tags t on vt.tag_id = t.tag_id
-                        WHERE t.tag_name='hd'";
-            $result = $conn->query($query);
-            $r = mysqli_fetch_assoc($result);
-            $arr['hd'] = $r['nr'];
-
-            $query = "SELECT COUNT(*) as nr FROM videos
-                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
-                        INNER JOIN tags t on vt.tag_id = t.tag_id
-                        WHERE t.tag_name='fullhd'";
-            $result = $conn->query($query);
-            $r = mysqli_fetch_assoc($result);
-            $arr['fullhd'] = $r['nr'];
-
-            $query = "SELECT COUNT(*) as nr FROM videos
-                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
-                        INNER JOIN tags t on vt.tag_id = t.tag_id
-                        WHERE t.tag_name='lowquality'";
-            $result = $conn->query($query);
-            $r = mysqli_fetch_assoc($result);
-            $arr['sd'] = $r['nr'];
-
-            $query = "SELECT COUNT(*) as nr FROM tags";
-            $result = $conn->query($query);
-            $r = mysqli_fetch_assoc($result);
-            $arr['tags'] = $r['nr'];
-
-            echo(json_encode($arr));
-            break;
-
-        case "getAllTags":
-            $query = "SELECT tag_name,tag_id from tags";
-            $result = $conn->query($query);
-
-            $rows = array();
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($rows, $r);
-            }
-            echo(json_encode($rows));
-            break;
-        case "addTag":
-            $movieid = $_POST['movieid'];
-            $tagid = $_POST['id'];
-
-            $query = "INSERT INTO video_tags(tag_id, video_id) VALUES ('$tagid','$movieid')";
-
-            if ($conn->query($query) === TRUE) {
-                echo('{"result":"success"}');
-            } else {
-                echo('{"result":"' . $conn->error . '"}');
-            }
-            break;
-    }
-} else {
-    echo('{data:"error"}');
-}
-return;
-

apiGo/api/Actors.go

@@ -0,0 +1,72 @@
+package api
+
+import (
+	"fmt"
+	"openmediacenter/apiGo/api/types"
+	"openmediacenter/apiGo/database"
+)
+
+func AddActorsHandlers() {
+	saveActorsToDB()
+	getActorsFromDB()
+}
+
+func getActorsFromDB() {
+	AddHandler("getAllActors", ActorNode, nil, func() []byte {
+		query := "SELECT actor_id, name, thumbnail FROM actors"
+		return jsonify(readActorsFromResultset(database.Query(query)))
+	})
+
+	var gaov struct {
+		MovieId int
+	}
+	AddHandler("getActorsOfVideo", ActorNode, &gaov, func() []byte {
+		query := fmt.Sprintf(`SELECT a.actor_id, name, thumbnail FROM actors_videos
+									JOIN actors a on actors_videos.actor_id = a.actor_id
+									WHERE actors_videos.video_id=%d`, gaov.MovieId)
+
+		return jsonify(readActorsFromResultset(database.Query(query)))
+	})
+
+	var gai struct {
+		ActorId int
+	}
+	AddHandler("getActorInfo", ActorNode, &gai, func() []byte {
+		query := fmt.Sprintf(`SELECT movie_id, movie_name FROM actors_videos
+										JOIN videos v on v.movie_id = actors_videos.video_id
+										WHERE actors_videos.actor_id=%d`, gai.ActorId)
+		videos := readVideosFromResultset(database.Query(query))
+
+		query = fmt.Sprintf("SELECT actor_id, name, thumbnail FROM actors WHERE actor_id=%d", gai.ActorId)
+		actor := readActorsFromResultset(database.Query(query))[0]
+
+		var result = struct {
+			Videos []types.VideoUnloadedType
+			Info   types.Actor
+		}{
+			Videos: videos,
+			Info:   actor,
+		}
+
+		return jsonify(result)
+	})
+}
+
+func saveActorsToDB() {
+	var ca struct {
+		ActorName string
+	}
+	AddHandler("createActor", ActorNode, &ca, func() []byte {
+		query := "INSERT IGNORE INTO actors (name) VALUES (?)"
+		return database.SuccessQuery(query, ca.ActorName)
+	})
+
+	var aatv struct {
+		ActorId int
+		MovieId int
+	}
+	AddHandler("addActorToVideo", ActorNode, &aatv, func() []byte {
+		query := fmt.Sprintf("INSERT IGNORE INTO actors_videos (actor_id, video_id) VALUES (%d,%d)", aatv.ActorId, aatv.MovieId)
+		return database.SuccessQuery(query)
+	})
+}

apiGo/api/ApiBase.go

@@ -0,0 +1,101 @@
+package api
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"log"
+	"net/http"
+)
+
+const APIPREFIX = "/api"
+
+const (
+	VideoNode    = iota
+	TagNode      = iota
+	SettingsNode = iota
+	ActorNode    = iota
+)
+
+type actionStruct struct {
+	Action string
+}
+
+type Handler struct {
+	action    string
+	handler   func() []byte
+	arguments interface{}
+	apiNode   int
+}
+
+var handlers []Handler
+
+func AddHandler(action string, apiNode int, n interface{}, h func() []byte) {
+	// append new handler to the handlers
+	handlers = append(handlers, Handler{action, h, n, apiNode})
+}
+
+func ServerInit(port uint16) {
+	http.Handle(APIPREFIX+"/video", http.HandlerFunc(videoHandler))
+	http.Handle(APIPREFIX+"/tags", http.HandlerFunc(tagHandler))
+	http.Handle(APIPREFIX+"/settings", http.HandlerFunc(settingsHandler))
+	http.Handle(APIPREFIX+"/actor", http.HandlerFunc(actorHandler))
+
+	fmt.Printf("OpenMediacenter server up and running on port %d\n", port)
+	log.Fatal(http.ListenAndServe(fmt.Sprintf(":%d", port), nil))
+}
+
+func handleAPICall(action string, requestBody string, apiNode int) []byte {
+	for i := range handlers {
+		if handlers[i].action == action && handlers[i].apiNode == apiNode {
+			// call the handler and return
+
+			if handlers[i].arguments != nil {
+				// decode the arguments to the corresponding arguments object
+				err := json.Unmarshal([]byte(requestBody), &handlers[i].arguments)
+				if err != nil {
+					fmt.Printf("failed to decode arguments of action %s :: %s\n", action, requestBody)
+				}
+			}
+
+			return handlers[i].handler()
+		}
+	}
+	fmt.Printf("no handler found for Action: %d/%s\n", apiNode, action)
+	return nil
+}
+
+func actorHandler(rw http.ResponseWriter, req *http.Request) {
+	handlefunc(rw, req, ActorNode)
+}
+
+func videoHandler(rw http.ResponseWriter, req *http.Request) {
+	handlefunc(rw, req, VideoNode)
+}
+
+func tagHandler(rw http.ResponseWriter, req *http.Request) {
+	handlefunc(rw, req, TagNode)
+}
+
+func settingsHandler(rw http.ResponseWriter, req *http.Request) {
+	handlefunc(rw, req, SettingsNode)
+}
+
+func handlefunc(rw http.ResponseWriter, req *http.Request, node int) {
+	// only allow post requests
+	if req.Method != "POST" {
+		return
+	}
+
+	buf := new(bytes.Buffer)
+	buf.ReadFrom(req.Body)
+	body := buf.String()
+
+	var t actionStruct
+	err := json.Unmarshal([]byte(body), &t)
+	if err != nil {
+		fmt.Println("failed to read action from request! :: " + body)
+	}
+
+	rw.Write(handleAPICall(t.Action, body, node))
+}

apiGo/api/ApiBase_test.go

@@ -0,0 +1,66 @@
+package api
+
+import (
+	"testing"
+)
+
+func cleanUp() {
+	handlers = nil
+}
+
+func TestAddHandler(t *testing.T) {
+	cleanUp()
+
+	AddHandler("test", ActorNode, nil, func() []byte {
+		return nil
+	})
+	if len(handlers) != 1 {
+		t.Errorf("Handler insertion failed, got: %d handlers, want: %d.", len(handlers), 1)
+	}
+}
+
+func TestCallOfHandler(t *testing.T) {
+	cleanUp()
+
+	i := 0
+	AddHandler("test", ActorNode, nil, func() []byte {
+		i++
+		return nil
+	})
+
+	// simulate the call of the api
+	handleAPICall("test", "", ActorNode)
+
+	if i != 1 {
+		t.Errorf("Unexpected number of Lambda calls : %d/1", i)
+	}
+}
+
+func TestDecodingOfArguments(t *testing.T) {
+	cleanUp()
+
+	var myvar struct {
+		Test    string
+		TestInt int
+	}
+	AddHandler("test", ActorNode, &myvar, func() []byte {
+		return nil
+	})
+
+	// simulate the call of the api
+	handleAPICall("test", `{"Test":"myString","TestInt":42}`, ActorNode)
+
+	if myvar.TestInt != 42 || myvar.Test != "myString" {
+		t.Errorf("Wrong parsing of argument parameters : %d/42 - %s/myString", myvar.TestInt, myvar.Test)
+	}
+}
+
+func TestNoHandlerCovers(t *testing.T) {
+	cleanUp()
+
+	ret := handleAPICall("test", "", ActorNode)
+
+	if ret != nil {
+		t.Error("Expect nil return within unhandled api action")
+	}
+}

apiGo/api/Helpers.go

@@ -0,0 +1,71 @@
+package api
+
+import (
+	"database/sql"
+	"encoding/json"
+	"fmt"
+	"openmediacenter/apiGo/api/types"
+)
+
+// MovieId - MovieName : pay attention to the order!
+func readVideosFromResultset(rows *sql.Rows) []types.VideoUnloadedType {
+	result := []types.VideoUnloadedType{}
+	for rows.Next() {
+		var vid types.VideoUnloadedType
+		err := rows.Scan(&vid.MovieId, &vid.MovieName)
+		if err != nil {
+			panic(err.Error()) // proper error handling instead of panic in your app
+		}
+		result = append(result, vid)
+	}
+	rows.Close()
+
+	return result
+}
+
+// TagID - TagName : pay attention to the order!
+func readTagsFromResultset(rows *sql.Rows) []types.Tag {
+	// initialize with empty array!
+	result := []types.Tag{}
+	for rows.Next() {
+		var tag types.Tag
+		err := rows.Scan(&tag.TagId, &tag.TagName)
+		if err != nil {
+			panic(err.Error()) // proper error handling instead of panic in your app
+		}
+		result = append(result, tag)
+	}
+	rows.Close()
+
+	return result
+}
+
+// ActorId - ActorName - Thumbnail : pay attention to the order!
+func readActorsFromResultset(rows *sql.Rows) []types.Actor {
+	var result []types.Actor
+	for rows.Next() {
+		var actor types.Actor
+		var thumbnail []byte
+
+		err := rows.Scan(&actor.ActorId, &actor.Name, &thumbnail)
+		if len(thumbnail) != 0 {
+			actor.Thumbnail = string(thumbnail)
+		}
+		if err != nil {
+			panic(err.Error()) // proper error handling instead of panic in your app
+		}
+		result = append(result, actor)
+	}
+	rows.Close()
+
+	return result
+}
+
+func jsonify(v interface{}) []byte {
+	// jsonify results
+	str, err := json.Marshal(v)
+	if err != nil {
+		fmt.Println("Error while Jsonifying return object: " + err.Error())
+	}
+	return str
+}

apiGo/api/Settings.go

@@ -0,0 +1,94 @@
+package api
+
+import (
+	"encoding/json"
+	"fmt"
+	"openmediacenter/apiGo/api/types"
+	"openmediacenter/apiGo/database"
+	"openmediacenter/apiGo/videoparser"
+)
+
+func AddSettingsHandlers() {
+	saveSettingsToDB()
+	getSettingsFromDB()
+	reIndexHandling()
+}
+
+func getSettingsFromDB() {
+	AddHandler("loadInitialData", SettingsNode, nil, func() []byte {
+		query := "SELECT DarkMode, password, mediacenter_name, video_path from settings"
+
+		type InitialDataType struct {
+			DarkMode         int
+			Pasword          int
+			Mediacenter_name string
+			VideoPath        string
+		}
+
+		result := InitialDataType{}
+
+		err := database.QueryRow(query).Scan(&result.DarkMode, &result.Pasword, &result.Mediacenter_name, &result.VideoPath)
+		if err != nil {
+			fmt.Println("error while parsing db data: " + err.Error())
+		}
+
+		type InitialDataTypeResponse struct {
+			DarkMode         bool
+			Pasword          bool
+			Mediacenter_name string
+			VideoPath        string
+		}
+
+		res := InitialDataTypeResponse{
+			DarkMode:         result.DarkMode != 0,
+			Pasword:          result.Pasword != -1,
+			Mediacenter_name: result.Mediacenter_name,
+			VideoPath:        result.VideoPath,
+		}
+
+		str, _ := json.Marshal(res)
+		return str
+	})
+
+	AddHandler("loadGeneralSettings", SettingsNode, nil, func() []byte {
+		result := database.GetSettings()
+		return jsonify(result)
+	})
+}
+
+func saveSettingsToDB() {
+	var sgs struct {
+		Settings types.SettingsType
+	}
+	AddHandler("saveGeneralSettings", SettingsNode, &sgs, func() []byte {
+		query := `
+					UPDATE settings SET 
+                        video_path=?,
+                        episode_path=?,
+                        password=?,
+                        mediacenter_name=?,
+                        TMDB_grabbing=?, 
+                        DarkMode=?
+                    WHERE 1`
+		return database.SuccessQuery(query,
+			sgs.Settings.VideoPath, sgs.Settings.EpisodePath, sgs.Settings.Password,
+			sgs.Settings.MediacenterName, sgs.Settings.TMDBGrabbing, sgs.Settings.DarkMode)
+	})
+}
+
+// methods for handling reindexing and cleanup of db gravity
+func reIndexHandling() {
+	AddHandler("startReindex", SettingsNode, nil, func() []byte {
+		videoparser.StartReindex()
+		return database.ManualSuccessResponse(nil)
+	})
+
+	AddHandler("cleanupGravity", SettingsNode, nil, func() []byte {
+		videoparser.StartCleanup()
+		return nil
+	})
+
+	AddHandler("getStatusMessage", SettingsNode, nil, func() []byte {
+		return jsonify(videoparser.GetStatusMessage())
+	})
+}

apiGo/api/Tags.go

@@ -0,0 +1,74 @@
+package api
+
+import (
+	"fmt"
+	"openmediacenter/apiGo/database"
+	"regexp"
+)
+
+func AddTagHandlers() {
+	getFromDB()
+	addToDB()
+	deleteFromDB()
+}
+
+func deleteFromDB() {
+	var dT struct {
+		TagId int
+		Force bool
+	}
+	AddHandler("deleteTag", TagNode, &dT, func() []byte {
+		// delete key constraints first
+		if dT.Force {
+			query := fmt.Sprintf("DELETE FROM video_tags WHERE tag_id=%d", dT.TagId)
+			err := database.Edit(query)
+
+			// respond only if result not successful
+			if err != nil {
+				return database.ManualSuccessResponse(err)
+			}
+		}
+
+		query := fmt.Sprintf("DELETE FROM tags WHERE tag_id=%d", dT.TagId)
+		err := database.Edit(query)
+
+		if err == nil {
+			// return if successful
+			return database.ManualSuccessResponse(err)
+		} else {
+			// check with regex if its the key constraint error
+			r, _ := regexp.Compile("^.*a foreign key constraint fails.*$")
+			if r.MatchString(err.Error()) {
+				return []byte(`{"result":"not empty tag"}`)
+			} else {
+				return database.ManualSuccessResponse(err)
+			}
+		}
+	})
+}
+
+func getFromDB() {
+	AddHandler("getAllTags", TagNode, nil, func() []byte {
+		query := "SELECT tag_id,tag_name from tags"
+		return jsonify(readTagsFromResultset(database.Query(query)))
+	})
+}
+
+func addToDB() {
+	var ct struct {
+		TagName string
+	}
+	AddHandler("createTag", TagNode, &ct, func() []byte {
+		query := "INSERT IGNORE INTO tags (tag_name) VALUES (?)"
+		return database.SuccessQuery(query, ct.TagName)
+	})
+
+	var at struct {
+		MovieId int
+		TagId   int
+	}
+	AddHandler("addTag", TagNode, &at, func() []byte {
+		query := "INSERT IGNORE INTO video_tags(tag_id, video_id) VALUES (?,?)"
+		return database.SuccessQuery(query, at.TagId, at.MovieId)
+	})
+}

apiGo/api/Video.go

@@ -0,0 +1,233 @@
+package api
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/url"
+	"openmediacenter/apiGo/api/types"
+	"openmediacenter/apiGo/database"
+	"strconv"
+)
+
+func AddVideoHandlers() {
+	getVideoHandlers()
+	loadVideosHandlers()
+	addToVideoHandlers()
+}
+
+func getVideoHandlers() {
+	var mrq struct {
+		Tag int
+	}
+	AddHandler("getMovies", VideoNode, &mrq, func() []byte {
+		var query string
+		// 1 is the id of the ALL tag
+		if mrq.Tag != 1 {
+			query = fmt.Sprintf(`SELECT movie_id,movie_name FROM videos
+					INNER JOIN video_tags vt on videos.movie_id = vt.video_id
+					INNER JOIN tags t on vt.tag_id = t.tag_id
+					WHERE t.tag_id = '%d'
+					ORDER BY likes DESC, create_date, movie_name`, mrq.Tag)
+		} else {
+			query = "SELECT movie_id,movie_name FROM videos ORDER BY create_date DESC, movie_name"
+		}
+
+		result := readVideosFromResultset(database.Query(query))
+		// jsonify results
+		str, _ := json.Marshal(result)
+		return str
+	})
+
+	var rtn struct {
+		Movieid int
+	}
+	AddHandler("readThumbnail", VideoNode, &rtn, func() []byte {
+		var pic []byte
+
+		query := fmt.Sprintf("SELECT thumbnail FROM videos WHERE movie_id='%d'", rtn.Movieid)
+
+		err := database.QueryRow(query).Scan(&pic)
+		if err != nil {
+			fmt.Printf("the thumbnail of movie id %d couldn't be found", rtn.Movieid)
+			return nil
+		}
+
+		return pic
+	})
+
+	var grm struct {
+		Number int
+	}
+	AddHandler("getRandomMovies", VideoNode, &grm, func() []byte {
+		var result struct {
+			Tags   []types.Tag
+			Videos []types.VideoUnloadedType
+		}
+
+		query := fmt.Sprintf("SELECT movie_id,movie_name FROM videos ORDER BY RAND() LIMIT %d", grm.Number)
+		result.Videos = readVideosFromResultset(database.Query(query))
+
+		var ids string
+		for i := range result.Videos {
+			ids += "video_tags.video_id=" + strconv.Itoa(result.Videos[i].MovieId)
+
+			if i < len(result.Videos)-1 {
+				ids += " OR "
+			}
+		}
+
+		// add the corresponding tags
+		query = fmt.Sprintf(`SELECT t.tag_name,t.tag_id FROM video_tags
+									INNER JOIN tags t on video_tags.tag_id = t.tag_id
+									WHERE %s
+									GROUP BY t.tag_id`, ids)
+
+		rows := database.Query(query)
+
+		for rows.Next() {
+			var tag types.Tag
+			err := rows.Scan(&tag.TagName, &tag.TagId)
+			if err != nil {
+				panic(err.Error()) // proper error handling instead of panic in your app
+			}
+			// append to final array
+			result.Tags = append(result.Tags, tag)
+		}
+
+		// jsonify results
+		str, _ := json.Marshal(result)
+		return str
+	})
+
+	var gsk struct {
+		KeyWord string
+	}
+	AddHandler("getSearchKeyWord", VideoNode, &gsk, func() []byte {
+		query := fmt.Sprintf(`SELECT movie_id,movie_name FROM videos 
+					WHERE movie_name LIKE '%%%s%%'
+					ORDER BY likes DESC, create_date DESC, movie_name`, gsk.KeyWord)
+
+		result := readVideosFromResultset(database.Query(query))
+		// jsonify results
+		str, _ := json.Marshal(result)
+		return str
+	})
+}
+
+// function to handle stuff for loading specific videos and startdata
+func loadVideosHandlers() {
+	var lv struct {
+		MovieId int
+	}
+	AddHandler("loadVideo", VideoNode, &lv, func() []byte {
+		query := fmt.Sprintf(`SELECT movie_name,movie_url,movie_id,thumbnail,poster,likes,quality,length 
+										FROM videos WHERE movie_id=%d`, lv.MovieId)
+
+		var res types.FullVideoType
+		var poster []byte
+		var thumbnail []byte
+
+		err := database.QueryRow(query).Scan(&res.MovieName, &res.MovieUrl, &res.MovieId, &thumbnail, &poster, &res.Likes, &res.Quality, &res.Length)
+		if err != nil {
+			fmt.Printf("error getting full data list of videoid - %d", lv.MovieId)
+			fmt.Println(err.Error())
+			return nil
+		}
+
+		// we ned to urlencode the movieurl
+		res.MovieUrl = url.PathEscape(res.MovieUrl)
+
+		// we need to stringify the pic byte array
+		res.Poster = string(poster)
+
+		// if poster in db is empty we use the thumbnail
+		if res.Poster == "" {
+			res.Poster = string(thumbnail)
+		}
+
+		// now add the tags of this video
+		query = fmt.Sprintf(`SELECT t.tag_id, t.tag_name FROM video_tags 
+					INNER JOIN tags t on video_tags.tag_id = t.tag_id
+					WHERE video_tags.video_id=%d
+					GROUP BY t.tag_id`, lv.MovieId)
+
+		res.Tags = readTagsFromResultset(database.Query(query))
+
+		query = fmt.Sprintf(`SELECT * FROM tags
+					WHERE tag_id NOT IN (
+						SELECT video_tags.tag_id FROM video_tags
+					WHERE video_id=%d)
+					ORDER BY rand()
+					LIMIT 5`, lv.MovieId)
+
+		res.SuggestedTag = readTagsFromResultset(database.Query(query))
+
+		// query the actors corresponding to video
+		query = fmt.Sprintf(`SELECT a.actor_id, name, thumbnail FROM actors_videos
+					JOIN actors a on actors_videos.actor_id = a.actor_id
+					WHERE actors_videos.video_id=%d`, lv.MovieId)
+
+		res.Actors = readActorsFromResultset(database.Query(query))
+
+		// jsonify results
+		str, _ := json.Marshal(res)
+		return str
+	})
+
+	AddHandler("getStartData", VideoNode, nil, func() []byte {
+		var result types.StartData
+		// query settings and infotile values
+		query := `
+					SELECT (
+						SELECT COUNT(*) FROM videos
+					) AS videonr,
+					(
+						SELECT COUNT(*) FROM videos
+                        INNER JOIN video_tags vt on videos.movie_id = vt.video_id
+                        INNER JOIN tags t on vt.tag_id = t.tag_id
+					) AS tagged,
+					(
+						SELECT COUNT(*) FROM video_tags as vt
+                        INNER JOIN tags t on vt.tag_id = t.tag_id
+                        WHERE t.tag_name='hd'
+					) AS hd,
+					(
+						SELECT COUNT(*) FROM video_tags as vt
+                        INNER JOIN tags t on vt.tag_id = t.tag_id
+                        WHERE t.tag_name='fullhd'
+					) AS fullhd,
+					(
+						SELECT COUNT(*) FROM video_tags as vt
+                        INNER JOIN tags t on vt.tag_id = t.tag_id
+                        WHERE t.tag_name='lowquality'
+					) AS lq,
+					(
+						SELECT COUNT(*) as nr FROM tags
+					) as tags 
+					LIMIT 1`
+
+		_ = database.QueryRow(query).Scan(&result.VideoNr, &result.Tagged, &result.HDNr, &result.FullHdNr, &result.SDNr, &result.DifferentTags)
+
+		// jsonify results
+		str, _ := json.Marshal(result)
+		return str
+	})
+}
+
+func addToVideoHandlers() {
+	var al struct {
+		MovieId int
+	}
+	AddHandler("addLike", VideoNode, &al, func() []byte {
+		query := fmt.Sprintf("update videos set likes = likes + 1 where movie_id = %d", al.MovieId)
+		return database.SuccessQuery(query)
+	})
+
+	var dv struct {
+		MovieId int
+	}
+	AddHandler("deleteVideo", VideoNode, &dv, func() []byte {
+		query := fmt.Sprintf("DELETE FROM videos WHERE movie_id=%d", dv.MovieId)
+		return database.SuccessQuery(query)
+	})
+}

apiGo/api/types/Types.go

@@ -0,0 +1,56 @@
+package types
+
+type VideoUnloadedType struct {
+	MovieId   int
+	MovieName string
+}
+
+type FullVideoType struct {
+	MovieName    string
+	MovieId      int
+	MovieUrl     string
+	Poster       string
+	Likes        int
+	Quality      int
+	Length       int
+	Tags         []Tag
+	SuggestedTag []Tag
+	Actors       []Actor
+}
+
+type Tag struct {
+	TagName string
+	TagId   int
+}
+
+type Actor struct {
+	ActorId   int
+	Name      string
+	Thumbnail string
+}
+
+type StartData struct {
+	VideoNr       int
+	FullHdNr      int
+	HDNr          int
+	SDNr          int
+	DifferentTags int
+	Tagged        int
+}
+
+type SettingsType struct {
+	VideoPath       string
+	EpisodePath     string
+	MediacenterName string
+	Password        string
+	PasswordEnabled bool
+	TMDBGrabbing    bool
+	DarkMode        bool
+
+	VideoNr       int
+	DBSize        float32
+	DifferentTags int
+	TagsAdded     int
+
+	PathPrefix string
+}

apiGo/database/Database.go

@@ -0,0 +1,136 @@
+package database
+
+import (
+	"database/sql"
+	"fmt"
+	_ "github.com/go-sql-driver/mysql"
+	"openmediacenter/apiGo/api/types"
+)
+
+var db *sql.DB
+var DBName string
+
+// store the command line parameter for Videoprefix
+var SettingsVideoPrefix = ""
+
+type DatabaseConfig struct {
+	DBHost     string
+	DBPort     int
+	DBUser     string
+	DBPassword string
+	DBName     string
+}
+
+func InitDB(dbconf *DatabaseConfig) {
+	DBName = dbconf.DBName
+
+	// Open up our database connection.
+	var err error
+	db, err = sql.Open("mysql", fmt.Sprintf("%s:%s@tcp(%s:%d)/%s", dbconf.DBUser, dbconf.DBPassword, dbconf.DBHost, dbconf.DBPort, dbconf.DBName))
+
+	// if there is an error opening the connection, handle it
+	if err != nil {
+		fmt.Printf("Error while connecting to database! - %s\n", err.Error())
+	}
+
+	if db != nil {
+		ping := db.Ping()
+		if ping != nil {
+			fmt.Printf("Error while connecting to database! - %s\n", ping.Error())
+		}
+	}
+}
+
+func Query(query string, args ...interface{}) *sql.Rows {
+	// perform a db.Query insert
+	res, err := db.Query(query, args...)
+
+	// if there is an error inserting, handle it
+	if err != nil {
+		fmt.Printf("Error while requesting data! - %s\n", err.Error())
+	}
+
+	return res
+}
+
+func QueryRow(SQL string, args ...interface{}) *sql.Row {
+	return db.QueryRow(SQL, args...)
+}
+
+// edit something in the DB  and give only an error response
+func Edit(query string, args ...interface{}) error {
+	_, err := db.Exec(query, args...)
+	return err
+}
+
+// insert/edit a query and return last insert id
+func Insert(query string, args ...interface{}) (error, int64) {
+	resp, err := db.Exec(query, args...)
+	var id int64 = 0
+	if err == nil {
+		id, err = resp.LastInsertId()
+	}
+
+	return err, id
+}
+
+func SuccessQuery(query string, args ...interface{}) []byte {
+	return ManualSuccessResponse(Edit(query, args...))
+}
+
+func ManualSuccessResponse(err error) []byte {
+	if err == nil {
+		return []byte(`{"result":"success"}`)
+	} else {
+		return []byte(fmt.Sprintf(`{"result":"%s"}`, err.Error()))
+	}
+}
+
+func Close() {
+	db.Close()
+}
+
+func GetSettings() types.SettingsType {
+	var result types.SettingsType
+
+	// query settings and infotile values
+	query := fmt.Sprintf(`
+                SELECT (
+                           SELECT COUNT(*)
+                           FROM videos
+                       ) AS videonr,
+                       (
+                           SELECT ROUND(SUM(data_length + index_length) / 1024 / 1024, 2) AS Size
+                           FROM information_schema.TABLES
+                           WHERE TABLE_SCHEMA = '%s'
+                           GROUP BY table_schema
+                       ) AS dbsize,
+                       (
+                           SELECT COUNT(*)
+                           FROM tags
+                       ) AS difftagnr,
+                       (
+                           SELECT COUNT(*)
+                           FROM video_tags
+                       ) AS tagsadded,
+                       video_path, episode_path, password, mediacenter_name, TMDB_grabbing, DarkMode
+                FROM settings
+                LIMIT 1`, DBName)
+
+	var DarkMode int
+	var TMDBGrabbing int
+
+	err := QueryRow(query).Scan(&result.VideoNr, &result.DBSize, &result.DifferentTags, &result.TagsAdded,
+		&result.VideoPath, &result.EpisodePath, &result.Password, &result.MediacenterName, &TMDBGrabbing, &DarkMode)
+
+	if err != nil {
+		fmt.Println(err.Error())
+	}
+
+	result.TMDBGrabbing = TMDBGrabbing != 0
+	result.PasswordEnabled = result.Password != "-1"
+	result.DarkMode = DarkMode != 0
+	result.PathPrefix = SettingsVideoPrefix
+
+	return result
+}

apiGo/go.mod

@@ -0,0 +1,5 @@
+module openmediacenter/apiGo
+
+go 1.16
+
+require github.com/go-sql-driver/mysql v1.5.0

apiGo/go.sum

@@ -0,0 +1,2 @@
+github.com/go-sql-driver/mysql v1.5.0 h1:ozyZYNQW3x3HtqT1jira07DN2PArx2v7/mN66gGcHOs=
+github.com/go-sql-driver/mysql v1.5.0/go.mod h1:DCzpHaOWr8IXmIStZouvnhqoel9Qv2LBy8hT2VhHyBg=

apiGo/main.go

@@ -0,0 +1,53 @@
+package main
+
+import (
+	"flag"
+	"fmt"
+	"openmediacenter/apiGo/api"
+	"openmediacenter/apiGo/database"
+)
+
+func main() {
+	fmt.Println("init OpenMediaCenter server")
+
+	db, verbose, pathPrefix := handleCommandLineArguments()
+	// todo some verbosity logger or sth
+
+	fmt.Printf("Use verbose output: %t\n", verbose)
+	fmt.Printf("Videopath prefix: %s\n", *pathPrefix)
+
+	// set pathprefix in database settings object
+	database.SettingsVideoPrefix = *pathPrefix
+
+	database.InitDB(db)
+	defer database.Close()
+
+	api.AddVideoHandlers()
+	api.AddSettingsHandlers()
+	api.AddTagHandlers()
+	api.AddActorsHandlers()
+
+	api.ServerInit(8081)
+}
+
+func handleCommandLineArguments() (*database.DatabaseConfig, bool, *string) {
+	dbhostPtr := flag.String("DBHost", "127.0.0.1", "database host name")
+	dbPortPtr := flag.Int("DBPort", 3306, "database port")
+	dbUserPtr := flag.String("DBUser", "mediacenteruser", "database username")
+	dbPassPtr := flag.String("DBPassword", "mediapassword", "database username")
+	dbNamePtr := flag.String("DBName", "mediacenter", "database name")
+
+	verbosePtr := flag.Bool("v", true, "Verbose log output")
+
+	pathPrefix := flag.String("ReindexPrefix", "/var/www/openmediacenter", "Prefix path for videos to reindex")
+
+	flag.Parse()
+
+	return &database.DatabaseConfig{
+		DBHost:     *dbhostPtr,
+		DBPort:     *dbPortPtr,
+		DBUser:     *dbUserPtr,
+		DBPassword: *dbPassPtr,
+		DBName:     *dbNamePtr,
+	}, *verbosePtr, pathPrefix
+}

apiGo/videoparser/CleanUp.go

@@ -0,0 +1 @@
+package videoparser

apiGo/videoparser/ReIndex.go

@@ -0,0 +1,294 @@
+package videoparser
+
+import (
+	"database/sql"
+	"encoding/base64"
+	"encoding/json"
+	"fmt"
+	"openmediacenter/apiGo/api/types"
+	"openmediacenter/apiGo/database"
+	"openmediacenter/apiGo/videoparser/tmdb"
+	"os/exec"
+	"regexp"
+	"strconv"
+)
+
+var mSettings types.SettingsType
+var mExtDepsAvailable *ExtDependencySupport
+
+// default Tag ids
+const (
+	FullHd     = 2
+	Hd         = 4
+	LowQuality = 3
+)
+
+type ExtDependencySupport struct {
+	FFMpeg    bool
+	MediaInfo bool
+}
+
+type VideoAttributes struct {
+	Duration float32
+	FileSize uint
+	Width    uint
+}
+
+func ReIndexVideos(path []string, sett types.SettingsType) {
+	mSettings = sett
+	// check if the extern dependencies are available
+	mExtDepsAvailable = checkExtDependencySupport()
+	fmt.Printf("FFMPEG support: %t\n", mExtDepsAvailable.FFMpeg)
+	fmt.Printf("MediaInfo support: %t\n", mExtDepsAvailable.MediaInfo)
+
+	for _, s := range path {
+		processVideo(s)
+	}
+
+	AppendMessageBuffer("reindex finished successfully!")
+
+	contentAvailable = false
+	fmt.Println("Reindexing finished!")
+}
+
+func processVideo(fileNameOrig string) {
+	fmt.Printf("Processing %s video-", fileNameOrig)
+
+	// match the file extension
+	r, _ := regexp.Compile(`\.[a-zA-Z0-9]+$`)
+	fileName := r.ReplaceAllString(fileNameOrig, "")
+
+	year, fileName := matchYear(fileName)
+
+	// now we should look if this video already exists in db
+	query := "SELECT * FROM videos WHERE movie_name = ?"
+	err := database.QueryRow(query, fileName).Scan()
+	if err == sql.ErrNoRows {
+		fmt.Printf("The Video %s does't exist! Adding it to database.\n", fileName)
+
+		addVideo(fileName, fileNameOrig, year)
+	} else {
+		fmt.Println(" :existing!")
+	}
+}
+
+// add a video to the database
+func addVideo(videoName string, fileName string, year int) {
+	var ppic *string
+	var poster *string
+	var tmdbData *tmdb.VideoTMDB
+	var err error
+
+	// initialize defaults
+	vidAtr := &VideoAttributes{
+		Duration: 0,
+		FileSize: 0,
+		Width:    0,
+	}
+
+	if mExtDepsAvailable.FFMpeg {
+		ppic, err = parseFFmpegPic(fileName)
+		if err != nil {
+			fmt.Printf("FFmpeg error occured: %s\n", err.Error())
+		} else {
+			fmt.Println("successfully extracted thumbnail!!")
+		}
+	}
+
+	if mExtDepsAvailable.MediaInfo {
+		atr := getVideoAttributes(fileName)
+		if atr != nil {
+			vidAtr = atr
+		}
+	}
+
+	// if TMDB grabbing is enabled serach in api for video...
+	if mSettings.TMDBGrabbing {
+		tmdbData = tmdb.SearchVideo(videoName, year)
+		if tmdbData != nil {
+			// reassign parsed pic as poster
+			poster = ppic
+			// and tmdb pic as thumbnail
+			ppic = &tmdbData.Thumbnail
+		}
+	}
+
+	query := `INSERT INTO videos(movie_name,movie_url,poster,thumbnail,quality,length) VALUES (?,?,?,?,?,?)`
+	err, insertId := database.Insert(query, videoName, fileName, poster, ppic, vidAtr.Width, vidAtr.Duration)
+	if err != nil {
+		fmt.Printf("Failed to insert video into db: %s\n", err.Error())
+		return
+	}
+
+	// add default tags
+	if vidAtr.Width != 0 {
+		insertSizeTag(vidAtr.Width, uint(insertId))
+	}
+
+	// add tmdb tags
+	if mSettings.TMDBGrabbing && tmdbData != nil {
+		insertTMDBTags(tmdbData.GenreIds, insertId)
+	}
+
+	AppendMessageBuffer(fmt.Sprintf("%s - added!", videoName))
+}
+
+func matchYear(fileName string) (int, string) {
+	r, _ := regexp.Compile(`\([0-9]{4}?\)`)
+	years := r.FindAllString(fileName, -1)
+	if len(years) == 0 {
+		return -1, fileName
+	}
+
+	year, err := strconv.Atoi(years[len(years)-1])
+
+	if err != nil {
+		return -1, fileName
+	}
+
+	// cut out year from filename
+	return year, r.ReplaceAllString(fileName, "")
+}
+
+// parse the thumbail picture from video file
+func parseFFmpegPic(fileName string) (*string, error) {
+	app := "ffmpeg"
+
+	cmd := exec.Command(app,
+		"-hide_banner",
+		"-loglevel", "panic",
+		"-ss", "00:04:00",
+		"-i", mSettings.VideoPath+fileName,
+		"-vframes", "1",
+		"-q:v", "2",
+		"-f", "singlejpeg",
+		"pipe:1")
+
+	stdout, err := cmd.Output()
+
+	if err != nil {
+		fmt.Println(err.Error())
+		fmt.Println(string(err.(*exec.ExitError).Stderr))
+		return nil, err
+	}
+
+	backpic64 := "data:image/jpeg;base64," + base64.StdEncoding.EncodeToString(stdout)
+
+	return &backpic64, nil
+}
+
+func getVideoAttributes(fileName string) *VideoAttributes {
+	app := "mediainfo"
+
+	arg0 := mSettings.VideoPath + fileName
+	arg1 := "--Output=JSON"
+
+	cmd := exec.Command(app, arg1, "-f", arg0)
+	stdout, err := cmd.Output()
+
+	var t struct {
+		Media struct {
+			Track []struct {
+				Duration string
+				FileSize string
+				Width    string
+			}
+		}
+	}
+	err = json.Unmarshal(stdout, &t)
+
+	if err != nil {
+		fmt.Println(err.Error())
+		return nil
+	}
+
+	duration, err := strconv.ParseFloat(t.Media.Track[0].Duration, 32)
+	filesize, err := strconv.Atoi(t.Media.Track[0].FileSize)
+	width, err := strconv.Atoi(t.Media.Track[1].Width)
+
+	ret := VideoAttributes{
+		Duration: float32(duration),
+		FileSize: uint(filesize),
+		Width:    uint(width),
+	}
+
+	return &ret
+}
+
+func AppendMessageBuffer(message string) {
+	messageBuffer = append(messageBuffer, message)
+}
+
+// ext dependency support check
+func checkExtDependencySupport() *ExtDependencySupport {
+	var extDepsAvailable ExtDependencySupport
+
+	extDepsAvailable.FFMpeg = commandExists("ffmpeg")
+	extDepsAvailable.MediaInfo = commandExists("mediainfo")
+
+	return &extDepsAvailable
+}
+
+// check if a specific system command is available
+func commandExists(cmd string) bool {
+	_, err := exec.LookPath(cmd)
+	return err == nil
+}
+
+// insert the default size tags to corresponding video
+func insertSizeTag(width uint, videoId uint) {
+	var tagType uint
+
+	if width >= 1080 {
+		tagType = FullHd
+	} else if width >= 720 {
+		tagType = Hd
+	} else {
+		tagType = LowQuality
+	}
+
+	query := fmt.Sprintf("INSERT INTO video_tags(video_id,tag_id) VALUES (%d,%d)", videoId, tagType)
+	err := database.Edit(query)
+	if err != nil {
+		fmt.Printf("Eror occured while adding default Tag: %s\n", err.Error())
+	}
+}
+
+// insert id array of tmdb geners to database
+func insertTMDBTags(ids []int, videoId int64) {
+	genres := tmdb.GetGenres()
+
+	for _, id := range ids {
+		var idGenre *tmdb.TMDBGenre
+		for _, genre := range *genres {
+			if genre.Id == id {
+				idGenre = &genre
+				break
+			}
+		}
+		// skip tag if name couldn't be found
+		if idGenre == nil {
+			continue
+		}
+
+		// now we check if the tag we want to add already exists
+		tagId := createTagToDB(idGenre.Name)
+
+		// now we add the tag
+		query := fmt.Sprintf("INSERT INTO video_tags(video_id,tag_id) VALUES (%d,%d)", videoId, tagId)
+		_ = database.Edit(query)
+	}
+}
+
+// returns id of tag or creates it if not existing
+func createTagToDB(tagName string) int64 {
+	query := fmt.Sprintf("SELECT tag_id FROM tags WHERE tag_name = %s", tagName)
+	var id int64
+	err := database.QueryRow(query).Scan(&id)
+	if err == sql.ErrNoRows {
+		// tag doesn't exist -- add it
+		query = fmt.Sprintf("INSERT INTO tags (tag_name) VALUES (%s)", tagName)
+		err, id = database.Insert(query)
+	}
+	return id
+}

apiGo/videoparser/VideoParser.go

@@ -0,0 +1,70 @@
+package videoparser
+
+import (
+	"fmt"
+	"openmediacenter/apiGo/database"
+	"os"
+	"path/filepath"
+	"strings"
+)
+
+var messageBuffer []string
+var contentAvailable = false
+
+type StatusMessage struct {
+	Messages         []string
+	ContentAvailable bool
+}
+
+func StartReindex() bool {
+	messageBuffer = []string{}
+	contentAvailable = true
+
+	fmt.Println("starting reindex..")
+
+	mSettings := database.GetSettings()
+	// add the path prefix to videopath
+	mSettings.VideoPath = mSettings.PathPrefix + mSettings.VideoPath
+
+	// check if path even exists
+	if _, err := os.Stat(mSettings.VideoPath); os.IsNotExist(err) {
+		fmt.Println("Reindex path doesn't exist!")
+		return false
+	}
+
+	var files []string
+	err := filepath.Walk(mSettings.VideoPath, func(path string, info os.FileInfo, err error) error {
+		if err != nil {
+			fmt.Println(err.Error())
+			return err
+		}
+
+		if !info.IsDir() && strings.HasSuffix(info.Name(), ".mp4") {
+			files = append(files, info.Name())
+		}
+		return nil
+	})
+
+	if err != nil {
+		fmt.Println(err.Error())
+	}
+	// start reindex process
+	AppendMessageBuffer("Starting Reindexing!")
+	go ReIndexVideos(files, mSettings)
+	return true
+}
+
+func GetStatusMessage() *StatusMessage {
+	msg := StatusMessage{
+		Messages:         messageBuffer,
+		ContentAvailable: contentAvailable,
+	}
+
+	messageBuffer = []string{}
+
+	return &msg
+}
+
+func StartCleanup() {
+	// todo start cleanup
+}

apiGo/videoparser/tmdb/TMDBApi.go

@@ -0,0 +1,144 @@
+package tmdb
+
+import (
+	"encoding/base64"
+	"encoding/json"
+	"fmt"
+	"io/ioutil"
+	"net/http"
+	"regexp"
+)
+
+const apiKey = "9fd90530b11447f5646f8e6fb4733fb4"
+const baseUrl = "https://api.themoviedb.org/3/"
+const pictureBase = "https://image.tmdb.org/t/p/w500"
+
+type VideoTMDB struct {
+	Thumbnail string
+	Overview  string
+	Title     string
+	GenreIds  []int
+}
+
+type tmdbVidResult struct {
+	Poster_path       string
+	Adult             bool
+	Overview          string
+	Release_date      string
+	Genre_ids         []int
+	Id                int
+	Original_title    string
+	Original_language string
+	Title             string
+	Backdrop_path     string
+	Popularity        int
+	Vote_count        int
+	Video             bool
+	Vote_average      int
+}
+
+type TMDBGenre struct {
+	Id   int
+	Name string
+}
+
+func SearchVideo(MovieName string, year int) *VideoTMDB {
+	url := fmt.Sprintf("%ssearch/movie?api_key=%s&query=%s", baseUrl, apiKey, MovieName)
+	resp, err := http.Get(url)
+	if err != nil {
+		fmt.Println(err.Error())
+		return nil
+	}
+
+	body, err := ioutil.ReadAll(resp.Body)
+	if err != nil {
+		fmt.Println(err.Error())
+		return nil
+	}
+
+	var t struct {
+		Results []tmdbVidResult
+	}
+	err = json.Unmarshal(body, &t)
+
+	fmt.Println(len(t.Results))
+
+	var tmdbVid tmdbVidResult
+	if year != -1 {
+		for _, result := range t.Results {
+			r, _ := regexp.Compile(fmt.Sprintf(`^%d-[0-9]{2}?-[0-9]{2}?$`, year))
+			if r.MatchString(result.Release_date) {
+				tmdbVid = result
+				// continue parsing
+				goto cont
+			}
+		}
+		// if there is no match use first one
+		tmdbVid = t.Results[0]
+	} else {
+		tmdbVid = t.Results[0]
+	}
+
+	// continue label
+cont:
+
+	thumbnail := fetchPoster(tmdbVid)
+
+	result := VideoTMDB{
+		Thumbnail: *thumbnail,
+		Overview:  tmdbVid.Overview,
+		Title:     tmdbVid.Title,
+		GenreIds:  tmdbVid.Genre_ids,
+	}
+
+	return &result
+}
+
+func fetchPoster(vid tmdbVidResult) *string {
+	url := fmt.Sprintf("%s%s", pictureBase, vid.Poster_path)
+
+	resp, err := http.Get(url)
+	if err != nil {
+		fmt.Println(err.Error())
+		return nil
+	}
+
+	body, err := ioutil.ReadAll(resp.Body)
+	if err != nil {
+		fmt.Println(err.Error())
+		return nil
+	}
+
+	backpic64 := "data:image/jpeg;base64," + base64.StdEncoding.EncodeToString(body)
+	return &backpic64
+}
+
+var tmdbGenres *[]TMDBGenre
+
+func fetchGenres() *[]TMDBGenre {
+	url := fmt.Sprintf("%sgenre/movie/list?api_key=%s", baseUrl, apiKey)
+	resp, err := http.Get(url)
+	if err != nil {
+		fmt.Println(err.Error())
+		return nil
+	}
+
+	body, err := ioutil.ReadAll(resp.Body)
+	if err != nil {
+		fmt.Println(err.Error())
+		return nil
+	}
+
+	var t []TMDBGenre
+	err = json.Unmarshal(body, &t)
+
+	return &t
+}
+
+func GetGenres() *[]TMDBGenre {
+	// if generes are nil fetch them once
+	if tmdbGenres == nil {
+		tmdbGenres = fetchGenres()
+	}
+	return tmdbGenres
+}

database.sql

@@ -1,3 +1,22 @@
+create table if not exists actors
+(
+    actor_id  int auto_increment
+        primary key,
+    name      varchar(50) null,
+    thumbnail mediumblob  null
+)
+    comment 'informations about different actors';
+
+create table if not exists settings
+(
+    video_path       varchar(255)      null,
+    episode_path     varchar(255)      null,
+    password         varchar(32)       null,
+    mediacenter_name varchar(32)       null,
+    TMDB_grabbing    tinyint           null,
+    DarkMode         tinyint default 0 null
+);
+
 create table if not exists tags
 (
     tag_id   int auto_increment
@@ -12,13 +31,29 @@ create table if not exists videos
     movie_name  varchar(200)                       null,
     movie_url   varchar(250)                       null,
     thumbnail   mediumblob                         null,
-    poster      mediumblob                         null,
     likes       int      default 0                 null,
+    create_date datetime default CURRENT_TIMESTAMP null,
     quality     int                                null,
     length      int                                null comment 'in seconds',
-    create_date datetime default CURRENT_TIMESTAMP null
+    poster      mediumblob                         null
 );
 
+create table if not exists actors_videos
+(
+    actor_id int null,
+    video_id int null,
+    constraint actors_videos_actors_id_fk
+        foreign key (actor_id) references actors (actor_id),
+    constraint actors_videos_videos_movie_id_fk
+        foreign key (video_id) references videos (movie_id)
+);
+
+create index actors_videos_actor_id_index
+    on actors_videos (actor_id);
+
+create index actors_videos_video_id_index
+    on actors_videos (video_id);
+
 create table if not exists video_tags
 (
     tag_id   int null,
@@ -27,11 +62,16 @@ create table if not exists video_tags
         foreign key (tag_id) references tags (tag_id),
     constraint video_tags_videos_movie_id_fk
         foreign key (video_id) references videos (movie_id)
+            on delete cascade
 );
 
-INSERT INTO tags (tag_id, tag_name)
+
+INSERT IGNORE INTO tags (tag_id, tag_name)
 VALUES (2, 'fullhd');
-INSERT INTO tags (tag_id, tag_name)
+INSERT IGNORE INTO tags (tag_id, tag_name)
 VALUES (3, 'lowquality');
-INSERT INTO tags (tag_id, tag_name)
+INSERT IGNORE INTO tags (tag_id, tag_name)
 VALUES (4, 'hd');
+
+INSERT IGNORE INTO settings (video_path, episode_path, password, mediacenter_name)
+VALUES ('./videos/', './tvshows/', -1, 'OpenMediaCenter');

deb/OpenMediaCenter/DEBIAN/control

@@ -0,0 +1,9 @@
+Package: OpenMediaCenter
+Depends: nginx, mariadb-server, mediainfo
+Section: web
+Priority: optional
+Architecture: all
+Essential: no
+Installed-Size: 1024
+Maintainer: heili.eu
+Description: OpenMediaCenter

deb/OpenMediaCenter/DEBIAN/postinst

@@ -0,0 +1,21 @@
+#!/bin/bash
+# enable nginx site
+ln -sf /etc/nginx/sites-available/OpenMediaCenter.conf /etc/nginx/sites-enabled/OpenMediaCenter.conf
+
+# setup database
+mysql -uroot -pPASS -e "CREATE DATABASE IF NOT EXISTS mediacenter;"
+mysql -uroot -pPASS -e "CREATE USER IF NOT EXISTS 'mediacenteruser'@'localhost' IDENTIFIED BY 'mediapassword';"
+mysql -uroot -pPASS -e "GRANT ALL PRIVILEGES ON mediacenter . * TO 'mediacenteruser'@'localhost';"
+mysql -u mediacenteruser -pmediapassword mediacenter < /tmp/openmediacenter.sql
+
+# removed unused sql style file
+rm /tmp/openmediacenter.sql
+
+# correct user rights
+chown -R www-data:www-data /var/www/openmediacenter
+
+# restart services
+systemctl restart nginx
+
+systemctl enable OpenMediaCenter.service
+systemctl start OpenMediaCenter.service

deb/OpenMediaCenter/DEBIAN/preinst

@@ -0,0 +1,4 @@
+#!/bin/bash
+#preset db password
+debconf-set-selections <<< 'mariadb-server-10.0 mysql-server/root_password password PASS'
+debconf-set-selections <<< 'mariadb-server-10.0 mysql-server/root_password_again password PASS'

deb/OpenMediaCenter/etc/nginx/sites-available/OpenMediaCenter.conf

@@ -0,0 +1,19 @@
+server {
+    listen 8080 default_server;
+    listen [::]:8080 default_server;
+
+    root /var/www/openmediacenter;
+
+    index index.html;
+
+    access_log /var/log/nginx/openmediacenter.access.log;
+    error_log /var/log/nginx/openmediacenter.error.log;
+
+    location / {
+        try_files $uri /index.html;
+    }
+
+    location /api/ {
+        proxy_pass http://127.0.0.1:8081;
+    }
+}

deb/OpenMediaCenter/lib/systemd/system/OpenMediaCenter.service

@@ -0,0 +1,12 @@
+[Unit]
+Description=OpenMediaCenter start job
+After=network.target
+
+[Service]
+Type=simple
+ExecStart=openmediacenter
+Restart=always
+User=root
+
+[Install]
+WantedBy=default.target

declaration.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package.json

@@ -1,21 +1,31 @@
 {
   "name": "openmediacenter",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": true,
+  "main": "public/electron.js",
+  "author": {
+    "email": "lukas.heiligenbrunner@gmail.com",
+    "name": "Lukas Heiligenbrunner",
+    "url": "https://heili.eu"
+  },
   "dependencies": {
-    "bootstrap": "^4.5.0",
-    "plyr-react": "^2.2.0",
-    "react": "^16.13.1",
-    "react-bootstrap": "^1.0.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1"
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/react-fontawesome": "^0.1.13",
+    "bootstrap": "^4.5.3",
+    "plyr-react": "^3.0.7",
+    "react": "^17.0.1",
+    "react-bootstrap": "^1.4.0",
+    "react-dom": "^17.0.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "typescript": "^4.1.3"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --reporters=jest-junit --reporters=default",
-    "coverage": "react-scripts test --coverage --watchAll=false",
-    "eject": "react-scripts eject"
+    "test": "CI=true react-scripts test --reporters=jest-junit --verbose --silent --coverage --reporters=default"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -27,10 +37,24 @@
       "text-summary"
     ]
   },
-  "proxy": "http://192.168.0.248",
+  "proxy": "http://127.0.0.1:8081",
   "homepage": "/",
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.ts?(x)"
+        ],
+        "rules": {
+          "@typescript-eslint/no-explicit-any": "error",
+          "@typescript-eslint/explicit-function-return-type": "error"
+        }
+      }
+    ]
   },
   "browserslist": {
     "production": [
@@ -45,11 +69,18 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.6.0",
+    "@types/jest": "^26.0.19",
+    "@types/node": "^12.19.9",
+    "@types/react": "^16.14.2",
+    "@types/react-dom": "^16.9.10",
+    "@types/react-router": "5.1.8",
+    "@types/react-router-dom": "^5.1.6",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "jest-junit": "^10.0.0"
+    "enzyme-adapter-react-16": "^1.15.5",
+    "jest-junit": "^12.0.0",
+    "react-scripts": "4.0.1"
   }
 }

src/App.js

@@ -1,105 +0,0 @@
-import React from 'react';
-import "./css/App.css"
-import HomePage from "./pages/HomePage/HomePage";
-import RandomPage from "./pages/RandomPage/RandomPage";
-
-// include bootstraps css
-import 'bootstrap/dist/css/bootstrap.min.css';
-import SettingsPage from "./pages/SettingsPage/SettingsPage";
-import CategoryPage from "./pages/CategoryPage/CategoryPage";
-
-class App extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-        this.state = {page: "default"};
-
-        // bind this to the method for being able to call methods such as this.setstate
-        this.showVideo = this.showVideo.bind(this);
-        this.hideVideo = this.hideVideo.bind(this);
-    }
-
-    videoelement = null;
-
-    MainBody() {
-        let page;
-        if (this.state.page === "default") {
-            page = <HomePage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
-            this.mypage = page;
-        } 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 === "categories") {
-            page = <CategoryPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
-            this.mypage = page;
-        } else if (this.state.page === "video") {
-            // show videoelement if neccessary
-            page = this.videoelement;
-
-            console.log(page);
-        } else if (this.state.page === "lastpage") {
-            // return back to last page
-            page = this.mypage;
-        } else {
-            page = <div>unimplemented yet!</div>;
-        }
-        return (page);
-    }
-
-    render() {
-        return (
-            <div className="App">
-                <nav className="navbar navbar-expand-sm bg-primary navbar-dark">
-                    <div className="navbar-brand">OpenMediaCenter</div>
-
-                    <ul className="navbar-nav">
-                        <li className="nav-item">
-                            <div className="nav-link"
-                                 style={this.state.page === "default" ? {color: "rgba(255,255,255,.75"} : {}}
-                                 onClick={() => this.setState({page: "default"})}>Home
-                            </div>
-                        </li>
-                        <li className="nav-item">
-                            <div className="nav-link"
-                                 style={this.state.page === "random" ? {color: "rgba(255,255,255,.75"} : {}}
-                                 onClick={() => this.setState({page: "random"})}>Random Video
-                            </div>
-                        </li>
-                        <li className="nav-item">
-                            <div className="nav-link"
-                                 style={this.state.page === "categories" ? {color: "rgba(255,255,255,.75"} : {}}
-                                 onClick={() => this.setState({page: "categories"})}>Categories
-                            </div>
-                        </li>
-                        <li className="nav-item">
-                            <div className="nav-link"
-                                 style={this.state.page === "settings" ? {color: "rgba(255,255,255,.75"} : {}}
-                                 onClick={() => this.setState({page: "settings"})}>Settings
-                            </div>
-                        </li>
-                    </ul>
-                </nav>
-                {this.MainBody()}
-            </div>
-        );
-    }
-
-    showVideo(element) {
-        this.videoelement = element;
-
-        this.setState({
-            page: "video"
-        });
-    }
-
-    hideVideo() {
-        this.setState({
-            page: "lastpage"
-        });
-        this.element = null;
-    }
-}
-
-export default App;

src/App.module.css

@@ -0,0 +1,58 @@
+.app {
+    user-select: none;
+}
+
+.navitem {
+    cursor: pointer;
+    float: left;
+
+    font-size: large;
+    font-weight: bold;
+
+    margin-left: 20px;
+    opacity: 0.6;
+    text-transform: capitalize;
+}
+
+.navitem:hover {
+    opacity: 1;
+    text-decoration: none;
+    transition: opacity .5s;
+}
+
+.navitem::after {
+    content: '';
+    display: block;
+    height: 2px;
+    transition: width .3s;
+    width: 0;
+}
+
+.navitem:hover::after {
+    width: 100%;
+}
+
+
+.navitemselected {
+    opacity: 0.85;
+}
+
+.navcontainer {
+    border-style: dotted;
+    border-width: 0 0 2px 0;
+
+    padding-bottom: 40px;
+    padding-top: 20px;
+    width: 100%;
+}
+
+.navbrand {
+    float: left;
+    font-size: large;
+    font-weight: bold;
+    margin-left: 20px;
+    margin-right: 20px;
+    text-transform: capitalize;
+}
+
+

src/App.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import App from './App';
-import {shallow} from 'enzyme'
+import {shallow} from 'enzyme';
 
 describe('<App/>', function () {
     it('renders without crashing ', function () {
@@ -10,11 +10,34 @@ describe('<App/>', function () {
 
     it('renders title', () => {
         const wrapper = shallow(<App/>);
-        expect(wrapper.find('.navbar-brand').text()).toBe('OpenMediaCenter');
+        expect(wrapper.find('.navbrand').text()).toBe('OpenMediaCenter');
     });
 
     it('are navlinks correct', function () {
         const wrapper = shallow(<App/>);
-        expect(wrapper.find('nav').find('li')).toHaveLength(4);
+        expect(wrapper.find('.navitem')).toHaveLength(4);
+    });
+
+    it('test initial fetch from api', done => {
+        global.fetch = global.prepareFetchApi({
+            generalSettingsLoaded: true,
+            passwordsupport: true,
+            mediacentername: 'testname'
+        });
+
+        const wrapper = shallow(<App/>);
+
+
+        const func = jest.fn();
+        wrapper.instance().setState = func;
+
+        expect(global.fetch).toBeCalledTimes(1);
+
+        process.nextTick(() => {
+            expect(func).toBeCalledTimes(1);
+
+            global.fetch.mockClear();
+            done();
+        });
     });
 });

src/App.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import HomePage from './pages/HomePage/HomePage';
+import RandomPage from './pages/RandomPage/RandomPage';
+import GlobalInfos from './utils/GlobalInfos';
+
+// include bootstraps css
+import 'bootstrap/dist/css/bootstrap.min.css';
+import style from './App.module.css';
+
+import SettingsPage from './pages/SettingsPage/SettingsPage';
+import CategoryPage from './pages/CategoryPage/CategoryPage';
+import {APINode, callAPI} from './utils/Api';
+import {NoBackendConnectionPopup} from './elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup';
+
+import {BrowserRouter as Router, NavLink, Route, Switch} from 'react-router-dom';
+import Player from './pages/Player/Player';
+import ActorOverviewPage from './pages/ActorOverviewPage/ActorOverviewPage';
+import ActorPage from './pages/ActorPage/ActorPage';
+import {SettingsTypes} from './types/ApiTypes';
+
+interface state {
+    generalSettingsLoaded: boolean;
+    passwordsupport: boolean;
+    mediacentername: string;
+    onapierror: boolean;
+}
+
+/**
+ * The main App handles the main tabs and which content to show
+ */
+class App extends React.Component<{}, state> {
+    constructor(props: {}) {
+        super(props);
+        this.state = {
+            generalSettingsLoaded: false,
+            passwordsupport: false,
+            mediacentername: 'OpenMediaCenter',
+            onapierror: false
+        };
+    }
+
+    initialAPICall(): void {
+        // this is the first api call so if it fails we know there is no connection to backend
+        callAPI(APINode.Settings, {action: 'loadInitialData'}, (result: SettingsTypes.initialApiCallData) => {
+            // set theme
+            GlobalInfos.enableDarkTheme(result.DarkMode);
+
+            GlobalInfos.setVideoPath(result.VideoPath);
+
+            this.setState({
+                generalSettingsLoaded: true,
+                passwordsupport: result.Password,
+                mediacentername: result.Mediacenter_name,
+                onapierror: false
+            });
+            // set tab title to received mediacenter name
+            document.title = result.Mediacenter_name;
+        }, error => {
+            this.setState({onapierror: true});
+        });
+    }
+
+    componentDidMount(): void {
+        this.initialAPICall();
+    }
+
+
+    render(): JSX.Element {
+        const themeStyle = GlobalInfos.getThemeStyle();
+        // add the main theme to the page body
+        document.body.className = themeStyle.backgroundcolor;
+
+        return (
+            <Router>
+                <div className={style.app}>
+                    <div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
+                        <div className={style.navbrand}>{this.state.mediacentername}</div>
+                        <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/'} activeStyle={{opacity: '0.85'}}>Home</NavLink>
+                        <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/random'} activeStyle={{opacity: '0.85'}}>Random
+                            Video</NavLink>
+
+                        <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/categories'} activeStyle={{opacity: '0.85'}}>Categories</NavLink>
+                        <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/settings'} activeStyle={{opacity: '0.85'}}>Settings</NavLink>
+                    </div>
+                    {this.routing()}
+                </div>
+                {this.state.onapierror ? this.ApiError() : null}
+            </Router>
+        );
+    }
+
+    routing(): JSX.Element {
+        return (
+            <Switch>
+                <Route path="/random">
+                    <RandomPage/>
+                </Route>
+                <Route path="/categories">
+                    <CategoryPage/>
+                </Route>
+                <Route path="/settings">
+                    <SettingsPage/>
+                </Route>
+                <Route exact path="/player/:id">
+                    <Player/>
+                </Route>
+                <Route exact path="/actors">
+                    <ActorOverviewPage/>
+                </Route>
+                <Route path="/actors/:id">
+                    <ActorPage/>
+                </Route>
+                <Route path="/">
+                    <HomePage/>
+                </Route>
+            </Switch>
+        );
+    }
+
+    ApiError(): JSX.Element {
+        // on api error show popup and retry and show again if failing..
+        return (<NoBackendConnectionPopup onHide={(): void => this.initialAPICall()}/>);
+    }
+}
+
+export default App;

src/AppDarkTheme.module.css

@@ -0,0 +1,48 @@
+/**
+ * The coloring elements for dark theme
+ */
+
+.backgroundcolor {
+    background-color: #141520;
+}
+
+.textcolor {
+    color: white;
+}
+
+.subtextcolor {
+    color: #dedad6;
+}
+
+.lighttextcolor {
+    color: #d5d5d5;
+}
+
+.navitem::after {
+    background: white;
+}
+
+.navitem {
+    color: white;
+}
+
+.navitem:hover {
+    color: white;
+}
+
+.hrcolor {
+    border-color: rgba(255, 255, 255, .1);
+}
+
+.secbackground {
+    background-color: #3c3d48;
+}
+
+.thirdbackground {
+    background-color: #141520;
+}
+
+.preview:hover {
+    box-shadow: rgba(255, 255, 255, 0.7) 0 0 0 5px;
+}
+

src/AppLightTheme.module.css

@@ -0,0 +1,47 @@
+/**
+ * The coloring elements for light theme
+ */
+
+.navitem {
+    color: black;
+}
+
+.navitem:hover {
+    color: black;
+}
+
+.navitem::after {
+    background: black;
+}
+
+.backgroundcolor {
+    background-color: white;
+}
+
+.textcolor {
+    color: black;
+}
+
+.subtextcolor {
+    color: #212529;
+}
+
+.lighttextcolor {
+    color: #3d3d3d;
+}
+
+.hrcolor {
+    border-color: rgba(0, 0, 0, 0.1);
+}
+
+.secbackground {
+    background-color: #a8c3ff;
+}
+
+.thirdbackground {
+    background-color: #8ca3fc;
+}
+
+.preview:hover {
+    box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
+}

src/css/App.css

@@ -1,12 +0,0 @@
-.nav-item {
-    cursor: pointer;
-}
-
-.nav-link {
-    color: rgba(255, 255, 255, .5);
-    font-weight: bold;
-}
-
-.nav-link:hover {
-    color: rgba(255, 255, 255, 1);
-}

src/css/index.css

@@ -1,8 +0,0 @@
-body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}

src/elements/ActorTile/ActorTile.module.css

@@ -0,0 +1,29 @@
+.actortile {
+    background-color: #179017;
+    border-radius: 10px;
+    cursor: pointer;
+    float: left;
+    height: 200px;
+    margin: 3px;
+    transition: opacity ease 0.5s;
+
+    width: 130px;
+}
+
+.actortile:hover {
+    opacity: 0.7;
+    transition: opacity ease 0.5s;
+}
+
+.actortile_thumbnail {
+    color: #c6c6c6;
+    height: 160px;
+    margin-top: 10px;
+    text-align: center;
+}
+
+.actortile_name {
+    color: white;
+    text-align: center;
+    /*todo dynamic text coloring dependent on theme*/
+}

src/elements/ActorTile/ActorTile.test.js

@@ -0,0 +1,23 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import ActorTile from './ActorTile';
+
+describe('<ActorTile/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<ActorTile actor={{Thumbnail: '-1', Name: 'testname', id: 3}}/>);
+        wrapper.unmount();
+    });
+
+    it('simulate click with custom handler', function () {
+        const func = jest.fn((_) => {});
+        const wrapper = shallow(<ActorTile actor={{Thumbnail: '-1', Name: 'testname', id: 3}} onClick={() => func()}/>);
+
+        const func1 = jest.fn();
+        prepareViewBinding(func1);
+
+        wrapper.simulate('click');
+
+        expect(func1).toBeCalledTimes(0);
+        expect(func).toBeCalledTimes(1);
+    });
+});

src/elements/ActorTile/ActorTile.tsx

@@ -0,0 +1,51 @@
+import style from './ActorTile.module.css';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faUser} from '@fortawesome/free-solid-svg-icons';
+import React from 'react';
+import {Link} from 'react-router-dom';
+import {ActorType} from '../../types/VideoTypes';
+
+interface props {
+    actor: ActorType;
+    onClick?: (actor: ActorType) => void
+}
+
+class ActorTile extends React.Component<props> {
+    constructor(props: props) {
+        super(props);
+
+        this.state = {};
+    }
+
+    render(): JSX.Element {
+        if (this.props.onClick) {
+            return this.renderActorTile(this.props.onClick);
+        } else {
+            return (
+                <Link to={{pathname: '/actors/' + this.props.actor.ActorId}}>
+                    {this.renderActorTile(() => {
+                    })}
+                </Link>
+            );
+        }
+    }
+
+    /**
+     * render the Actor Tile with its pic
+     * @param customclickhandler a custom click handler to be called onclick instead of Link
+     */
+    private renderActorTile(customclickhandler: (actor: ActorType) => void): JSX.Element {
+        return (
+            <div className={style.actortile} onClick={(): void => customclickhandler(this.props.actor)}>
+                <div className={style.actortile_thumbnail}>
+                    {this.props.actor.Thumbnail === '' ? <FontAwesomeIcon style={{
+                        lineHeight: '130px'
+                    }} icon={faUser} size='5x'/> : 'dfdf' /* todo render picture provided here! */}
+                </div>
+                <div className={style.actortile_name}>{this.props.actor.Name}</div>
+            </div>
+        );
+    }
+}
+
+export default ActorTile;

src/elements/AddTagPopup/AddTagPopup.js

@@ -1,89 +0,0 @@
-import React from "react";
-import Modal from 'react-bootstrap/Modal'
-import Dropdown from "react-bootstrap/Dropdown";
-import DropdownButton from "react-bootstrap/DropdownButton";
-
-class AddTagPopup extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-
-        this.state = {
-            selection: {
-                name: "nothing selected",
-                id: -1
-            },
-            items: []
-        };
-
-        this.props = props;
-    }
-
-    componentDidMount() {
-        const updateRequest = new FormData();
-        updateRequest.append('action', 'getAllTags');
-
-        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json())
-            .then((result) => {
-                this.setState({
-                    items: result
-                });
-            });
-    }
-
-    render() {
-        return (
-            <>
-                <Modal
-                    show={this.props.show}
-                    onHide={this.props.onHide}
-                    size="lg"
-                    aria-labelledby="contained-modal-title-vcenter"
-                    centered>
-                    <Modal.Header closeButton>
-                        <Modal.Title id="contained-modal-title-vcenter">
-                            Add to Tag
-                        </Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body>
-                        <h4>Select a Tag:</h4>
-                        <DropdownButton id="dropdown-basic-button" title={this.state.selection.name}>
-                            {this.state.items ?
-                                this.state.items.map((i) => (
-                                    <Dropdown.Item key={i.tag_name} onClick={() => {
-                                        this.setState({selection: {name: i.tag_name, id: i.tag_id}})
-                                    }}>{i.tag_name}</Dropdown.Item>
-                                )) :
-                                <Dropdown.Item>loading tags...</Dropdown.Item>}
-                        </DropdownButton>
-                    </Modal.Body>
-                    <Modal.Footer>
-                        <button className='btn btn-primary' onClick={() => {
-                            this.storeselection();
-                        }}>Add
-                        </button>
-                    </Modal.Footer>
-                </Modal>
-            </>
-        );
-    }
-
-    storeselection() {
-        const updateRequest = new FormData();
-        updateRequest.append('action', 'addTag');
-        updateRequest.append('id', this.state.selection.id);
-        updateRequest.append('movieid', this.props.movie_id);
-
-        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json()
-                .then((result) => {
-                    if (result.result !== "success") {
-                        console.log("error occured while writing to db -- todo error handling");
-                        console.log(result.result);
-                    }
-                    this.props.onHide();
-                }));
-    }
-}
-
-export default AddTagPopup;

src/elements/AddTagPopup/AddTagPopup.test.js

@@ -1,60 +0,0 @@
-import React from "react";
-
-import {shallow} from 'enzyme'
-import "@testing-library/jest-dom"
-
-import AddTagPopup from "./AddTagPopup";
-
-describe('<AddTagPopup/>', function () {
-    it('renders without crashing ', function () {
-        const wrapper = shallow(<AddTagPopup/>);
-        wrapper.unmount();
-    });
-
-    it('test dropdown insertion', function () {
-        const wrapper = shallow(<AddTagPopup/>);
-        wrapper.setState({items: ["test1", "test2", "test3"]});
-        expect(wrapper.find('DropdownItem')).toHaveLength(3);
-    });
-
-    it('test storeseletion click event', done => {
-        const mockSuccessResponse = {};
-        const mockJsonPromise = Promise.resolve(mockSuccessResponse);
-        const mockFetchPromise = Promise.resolve({
-            json: () => mockJsonPromise,
-        });
-        global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
-
-        const func = jest.fn();
-
-        const wrapper = shallow(<AddTagPopup/>);
-        wrapper.setProps({
-            onHide: () => {
-                func()
-            }
-        });
-
-        wrapper.setState({
-            items: ["test1", "test2", "test3"],
-            selection: {
-                name: "test1",
-                id: 42
-            }
-        });
-
-        // first call of fetch is getting of available tags
-        expect(global.fetch).toHaveBeenCalledTimes(1);
-        wrapper.find('ModalFooter').find('button').simulate('click');
-
-        // now called 2 times
-        expect(global.fetch).toHaveBeenCalledTimes(2);
-
-        process.nextTick(() => {
-            //callback to close window should have called
-            expect(func).toHaveBeenCalledTimes(1);
-
-            global.fetch.mockClear();
-            done();
-        });
-    });
-});

src/elements/GPElements/Button.module.css

@@ -0,0 +1,8 @@
+.button {
+    background-color: green;
+    border-radius: 5px;
+    border-width: 0;
+    color: white;
+    margin-right: 15px;
+    padding: 6px;
+}

src/elements/GPElements/Button.test.js

@@ -0,0 +1,32 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import {Button} from './Button';
+
+function prepareFetchApi(response) {
+    const mockJsonPromise = Promise.resolve(response);
+    const mockFetchPromise = Promise.resolve({
+        json: () => mockJsonPromise
+    });
+    return (jest.fn().mockImplementation(() => mockFetchPromise));
+}
+
+describe('<Button/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<Button onClick={() => {}} title='test'/>);
+        wrapper.unmount();
+    });
+
+    it('renders title', function () {
+        const wrapper = shallow(<Button onClick={() => {}} title='test1'/>);
+        expect(wrapper.text()).toBe('test1');
+    });
+
+    it('test onclick handling', () => {
+        const func = jest.fn();
+        const wrapper = shallow(<Button onClick={func} title='test1'/>);
+
+        wrapper.find('button').simulate('click');
+
+        expect(func).toHaveBeenCalledTimes(1);
+    });
+});

src/elements/GPElements/Button.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import style from './Button.module.css';
+
+interface ButtonProps {
+    title: string | JSX.Element;
+    onClick?: () => void;
+    color?: React.CSSProperties;
+}
+
+export function Button(props: ButtonProps): JSX.Element {
+    return (
+        <button className={style.button} style={props.color} onClick={props.onClick}>
+            {props.title}
+        </button>
+    );
+}

src/elements/InfoHeaderItem/InfoHeaderItem.module.css

@@ -0,0 +1,58 @@
+/* styling for tile */
+.infoheaderitem {
+    background-color: lightblue;
+    border-radius: 5px;
+    flex: calc(25% - 10px);
+    margin: 5px;
+}
+
+/* On screens that are 1317px wide or less, go from four columns to two columns */
+@media screen and (max-width: 1317px) {
+    .infoheaderitem {
+        flex: calc(50% - 10px);
+    }
+}
+
+/* change opacity of icon when hovering whole tile */
+.infoheaderitem:hover .icon {
+    opacity: 0.75;
+    transition: opacity linear 0.4s;
+}
+
+/* change cursor on hover */
+.infoheaderitem:hover {
+    cursor: pointer;
+}
+
+.icon {
+    float: left;
+    height: 130px;
+    margin-left: 5px;
+    margin-right: 17px;
+    margin-top: 20px;
+    opacity: 0.5;
+    text-align: center;
+
+    width: 30%;
+}
+
+/* big main text in tile */
+.maintext {
+    font-size: x-large;
+    font-weight: bold;
+    margin-top: 30px;
+}
+
+/* small subtext in tile */
+.subtext {
+    font-size: large;
+    margin-top: 5px;
+    opacity: 0.7;
+}
+
+.loadAnimation {
+    display: inline-block;
+    line-height: 145px;
+    margin-left: calc(25% - 15px);
+    vertical-align: middle;
+}

src/elements/InfoHeaderItem/InfoHeaderItem.test.js

@@ -0,0 +1,43 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import InfoHeaderItem from './InfoHeaderItem';
+
+describe('<InfoHeaderItem/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<InfoHeaderItem/>);
+        wrapper.unmount();
+    });
+
+    it('renders correct text', function () {
+        const wrapper = shallow(<InfoHeaderItem text='mytext'/>);
+        expect(wrapper.find('.maintext').text()).toBe('mytext');
+    });
+
+    it('renders correct subtext', function () {
+        const wrapper = shallow(<InfoHeaderItem text='mimi' subtext='testtext'/>);
+        expect(wrapper.find('.subtext').text()).toBe('testtext');
+    });
+
+    it('test no subtext if no text defined', function () {
+        const wrapper = shallow(<InfoHeaderItem subtext='testi'/>);
+        expect(wrapper.find('.subtext')).toHaveLength(0);
+    });
+
+    it('test custom click handler', function () {
+        const func = jest.fn();
+        const wrapper = shallow(<InfoHeaderItem onClick={() => func()}/>);
+        expect(func).toBeCalledTimes(0);
+        wrapper.simulate('click');
+        expect(func).toBeCalledTimes(1);
+    });
+
+    it('test insertion of loading spinner', function () {
+        const wrapper = shallow(<InfoHeaderItem text={null}/>);
+        expect(wrapper.find('Spinner').length).toBe(1);
+    });
+
+    it('test loading spinner if undefined', function () {
+        const wrapper = shallow(<InfoHeaderItem/>);
+        expect(wrapper.find('Spinner').length).toBe(1);
+    });
+});

src/elements/InfoHeaderItem/InfoHeaderItem.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import style from './InfoHeaderItem.module.css';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {Spinner} from 'react-bootstrap';
+import {IconDefinition} from '@fortawesome/fontawesome-common-types';
+
+interface props {
+    onClick?: () => void
+    backColor: string
+    icon: IconDefinition
+    text: string | number
+    subtext: string | number
+}
+
+/**
+ * a component to display one of the short quickinfo tiles on dashboard
+ */
+class InfoHeaderItem extends React.Component<props> {
+    render(): JSX.Element {
+        return (
+            <div onClick={(): void => {
+                // call clicklistener if defined
+                if (this.props.onClick != null) this.props.onClick();
+            }} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}>
+                <div className={style.icon}>
+                    <FontAwesomeIcon style={{
+                        verticalAlign: 'middle',
+                        lineHeight: '130px'
+                    }} icon={this.props.icon} size='5x'/>
+                </div>
+                {this.props.text !== null && this.props.text !== undefined ?
+                    <>
+                        <div className={style.maintext}>{this.props.text}</div>
+                        <div className={style.subtext}>{this.props.subtext}</div>
+                    </>
+                    : <span className={style.loadAnimation}><Spinner animation='border'/></span>
+                }
+            </div>
+        );
+    }
+}
+
+export default InfoHeaderItem;

src/elements/NewTagPopup/NewTagPopup.js

@@ -1,65 +0,0 @@
-import React from "react";
-import Modal from 'react-bootstrap/Modal'
-import {Form} from "react-bootstrap";
-
-class NewTagPopup extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-
-        this.props = props;
-    }
-
-    render() {
-        return (
-            <>
-                <Modal
-                    show={this.props.show}
-                    onHide={this.props.onHide}
-                    size="lg"
-                    aria-labelledby="contained-modal-title-vcenter"
-                    centered>
-                    <Modal.Header closeButton>
-                        <Modal.Title id="contained-modal-title-vcenter">
-                            Create a new Tag!
-                        </Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body>
-                        <Form.Group>
-                            <Form.Label>Tag Name:</Form.Label>
-                            <Form.Control id='namefield' type="text" placeholder="Enter Tag name" onChange={(v) => {
-                                this.value = v.target.value
-                            }}/>
-                            <Form.Text className="text-muted">
-                                This Tag will automatically show up on category page.
-                            </Form.Text>
-                        </Form.Group>
-                    </Modal.Body>
-                    <Modal.Footer>
-                        <button className='btn btn-primary' onClick={() => {
-                            this.storeselection();
-                        }}>Add
-                        </button>
-                    </Modal.Footer>
-                </Modal>
-            </>
-        );
-    }
-
-    storeselection() {
-        const updateRequest = new FormData();
-        updateRequest.append('action', 'createTag');
-        updateRequest.append('tagname', this.value);
-
-        fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json())
-            .then((result) => {
-                if (result.result !== "success") {
-                    console.log("error occured while writing to db -- todo error handling");
-                    console.log(result.result);
-                }
-                this.props.onHide();
-            });
-    }
-}
-
-export default NewTagPopup;

src/elements/PageTitle/PageTitle.module.css

@@ -1,8 +1,5 @@
 .pageheader {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    padding-left: 22%;
-    padding-right: 12%;
+    padding: 20px 12% 20px 22%;
 }
 
 .pageheadertitle {
@@ -11,8 +8,7 @@
 }
 
 .pageheadersubtitle {
-    margin-left: 20px;
     font-size: 23pt;
+    margin-left: 20px;
     opacity: 0.6;
 }
-

src/elements/PageTitle/PageTitle.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import PageTitle, {Line} from './PageTitle';
+
+describe('<Preview/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<PageTitle/>);
+        wrapper.unmount();
+    });
+
+    it('renders childs correctly', function () {
+        const wrapper = shallow(<PageTitle>heyimachild</PageTitle>);
+
+        const children = wrapper.children();
+        expect(children.at(children.length - 2).text()).toBe('heyimachild');
+    });
+
+    it('renders pagetitle prop', function () {
+        const wrapper = shallow(<PageTitle title='testtitle'/>);
+
+        expect(wrapper.find('.pageheader').text()).toBe('testtitle<Line />');
+    });
+
+    it('renders subtitle prop', function () {
+        const wrapper = shallow(<PageTitle subtitle='testsubtitle'/>);
+
+        expect(wrapper.find('.pageheadersubtitle').text()).toBe('testsubtitle');
+    });
+});
+
+describe('<Line/>', () => {
+    it('renders without crashing', function () {
+        const wrapper = shallow(<Line/>);
+        wrapper.unmount();
+    });
+});
+

src/elements/PageTitle/PageTitle.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import style from './PageTitle.module.css';
+import GlobalInfos from '../../utils/GlobalInfos';
+
+interface props {
+    title: string;
+    subtitle: string | number | null;
+}
+
+/**
+ * Component for generating PageTitle with bottom Line
+ */
+class PageTitle extends React.Component<props> {
+    render(): JSX.Element {
+        const themeStyle = GlobalInfos.getThemeStyle();
+        return (
+            <div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
+                <span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
+                <span className={style.pageheadersubtitle + ' ' + themeStyle.textcolor}>{this.props.subtitle}</span>
+                <>
+                    {this.props.children}
+                </>
+                <Line/>
+            </div>
+        );
+    }
+}
+
+/**
+ * class to override default <hr> color and styling
+ * use this for horizontal lines to use the current active theming
+ */
+export class Line extends React.Component {
+    render(): JSX.Element {
+        const themeStyle = GlobalInfos.getThemeStyle();
+        return (
+            <>
+                <hr className={themeStyle.hrcolor}/>
+            </>
+        );
+    }
+}
+
+export default PageTitle;

src/elements/Popups/AddActorPopup/AddActorPopup.module.css

@@ -0,0 +1,19 @@
+.newactorbutton {
+    background-color: green;
+    border-radius: 5px;
+    border-width: 0;
+    color: white;
+    margin-right: 15px;
+    margin-top: 12px;
+    padding: 6px;
+    width: 140px;
+}
+
+.searchinput {
+    float: left;
+    width: 120px;
+}
+
+.searchbar {
+    margin-bottom: 13px;
+}

src/elements/Popups/AddActorPopup/AddActorPopup.test.js

@@ -0,0 +1,89 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import AddActorPopup from './AddActorPopup';
+import {callAPI} from '../../../utils/Api';
+
+describe('<AddActorPopup/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<AddActorPopup/>);
+        wrapper.unmount();
+    });
+
+    it('simulate change to other page', function () {
+        const wrapper = shallow(<AddActorPopup/>);
+
+        expect(wrapper.find('NewActorPopupContent')).toHaveLength(0);
+        wrapper.find('PopupBase').props().banner.props.onClick();
+
+        // check if new content is showing
+        expect(wrapper.find('NewActorPopupContent')).toHaveLength(1);
+    });
+
+    it('hide new actor page', function () {
+        const wrapper = shallow(<AddActorPopup/>);
+        wrapper.find('PopupBase').props().banner.props.onClick();
+
+        // call onhide event listener manually
+        wrapper.find('NewActorPopupContent').props().onHide();
+
+        // expect other page to be hidden again
+        expect(wrapper.find('NewActorPopupContent')).toHaveLength(0);
+    });
+
+    it('test api call and insertion of actor tiles', function () {
+        global.callAPIMock([{Id: 1, Name: 'test'}, {Id: 2, Name: 'test2'}]);
+
+        const wrapper = shallow(<AddActorPopup/>);
+
+        expect(wrapper.find('ActorTile')).toHaveLength(2);
+    });
+
+    it('simulate actortile click', function () {
+        const func = jest.fn();
+        const wrapper = shallow(<AddActorPopup onHide={() => {func();}} movie_id={1}/>);
+
+        global.callAPIMock({result: 'success'});
+
+        wrapper.setState({actors: [{ActorId: 1, Name: 'test'}]}, () => {
+            wrapper.find('ActorTile').dive().simulate('click');
+
+            expect(callAPI).toHaveBeenCalledTimes(1);
+
+            expect(func).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    it('test failing actortile click', function () {
+        const func = jest.fn();
+        const wrapper = shallow(<AddActorPopup onHide={() => {func();}}/>);
+
+        global.callAPIMock({result: 'nosuccess'});
+
+        wrapper.setState({actors: [{ActorId: 1, Name: 'test'}]}, () => {
+            wrapper.find('ActorTile').dive().simulate('click');
+
+            expect(callAPI).toHaveBeenCalledTimes(1);
+
+            // hide funtion should not have been called on error!
+            expect(func).toHaveBeenCalledTimes(0);
+        });
+    });
+
+    it('test no actor on loading', function () {
+        const wrapper = shallow(<AddActorPopup/>);
+
+        expect(wrapper.find('PopupBase').find('ActorTile')).toHaveLength(0);
+    });
+
+    it('test Enter submit if only one element left', function () {
+        const wrapper = shallow(<AddActorPopup/>);
+
+        callAPIMock({});
+
+        wrapper.setState({actors: [{Name: 'test', ActorId: 1}]});
+
+        wrapper.find('PopupBase').props().ParentSubmit();
+
+        expect(callAPI).toHaveBeenCalledTimes(1);
+    });
+});

src/elements/Popups/AddActorPopup/AddActorPopup.tsx

@@ -0,0 +1,201 @@
+import PopupBase from '../PopupBase';
+import React from 'react';
+import ActorTile from '../../ActorTile/ActorTile';
+import style from './AddActorPopup.module.css';
+import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
+import {APINode, callAPI} from '../../../utils/Api';
+import {ActorType} from '../../../types/VideoTypes';
+import {GeneralSuccess} from '../../../types/GeneralTypes';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faFilter, faTimes} from '@fortawesome/free-solid-svg-icons';
+import {Button} from '../../GPElements/Button';
+import {addKeyHandler, removeKeyHandler} from '../../../utils/ShortkeyHandler';
+
+interface props {
+    onHide: () => void;
+    movie_id: number;
+}
+
+interface state {
+    contentDefault: boolean;
+    actors: ActorType[];
+    filter: string;
+    filtervisible: boolean;
+}
+
+/**
+ * Popup for Adding a new Actor to a Video
+ */
+class AddActorPopup extends React.Component<props, state> {
+    // filterfield anchor, needed to focus after filter btn click
+    private filterfield: HTMLInputElement | null | undefined;
+
+    constructor(props: props) {
+        super(props);
+
+        this.state = {
+            contentDefault: true,
+            actors: [],
+            filter: '',
+            filtervisible: false
+        };
+
+        this.tileClickHandler = this.tileClickHandler.bind(this);
+        this.filterSearch = this.filterSearch.bind(this);
+        this.parentSubmit = this.parentSubmit.bind(this);
+        this.keypress = this.keypress.bind(this);
+    }
+
+    componentWillUnmount(): void {
+        removeKeyHandler(this.keypress);
+    }
+
+    componentDidMount(): void {
+        addKeyHandler(this.keypress);
+
+        // fetch the available actors
+        this.loadActors();
+    }
+
+    render(): JSX.Element {
+        return (
+            <>
+                {/* todo render actor tiles here and add search field*/}
+                <PopupBase title='Add new Actor to Video' onHide={this.props.onHide} banner={
+                    <button
+                        className={style.newactorbutton}
+                        onClick={(): void => {
+                            this.setState({contentDefault: false});
+                        }}>Create new Actor</button>} ParentSubmit={this.parentSubmit}>
+                    {this.resolvePage()}
+                </PopupBase>
+            </>
+        );
+    }
+
+    /**
+     * selector for current showing popup page
+     * @returns {JSX.Element}
+     */
+    resolvePage(): JSX.Element {
+        if (this.state.contentDefault) return (this.getContent());
+        else return (<NewActorPopupContent onHide={(): void => {
+            this.loadActors();
+            this.setState({contentDefault: true});
+        }}/>);
+    }
+
+    /**
+     * returns content for the newActor popup
+     * @returns {JSX.Element}
+     */
+    getContent(): JSX.Element {
+        if (this.state.actors.length !== 0) {
+            return (
+                <>
+                    <div className={style.searchbar}>
+                        {
+                            this.state.filtervisible ?
+                                <>
+                                    <input className={'form-control mr-sm-2 ' + style.searchinput}
+                                           type='text' placeholder='Filter' value={this.state.filter}
+                                           onChange={(e): void => {
+                                               this.setState({filter: e.target.value});
+                                           }}
+                                           ref={(input): void => {this.filterfield = input;}}/>
+                                    <Button title={<FontAwesomeIcon style={{
+                                        verticalAlign: 'middle',
+                                        lineHeight: '130px'
+                                    }} icon={faTimes} size='1x'/>} color={{backgroundColor: 'red'}} onClick={(): void => {
+                                        this.setState({filter: '', filtervisible: false});
+                                    }}/>
+                                </> :
+                                <Button
+                                    title={<span>Filter <FontAwesomeIcon style={{
+                                        verticalAlign: 'middle',
+                                        lineHeight: '130px'
+                                    }} icon={faFilter} size='1x'/></span>}
+                                    color={{backgroundColor: 'cornflowerblue', color: 'white'}}
+                                    onClick={(): void => this.enableFilterField()}/>
+                        }
+                    </div>
+                    {this.state.actors.filter(this.filterSearch).map((el) => (<ActorTile actor={el} onClick={this.tileClickHandler}/>))}
+                </>
+            );
+        } else {
+            return (<div>somekind of loading</div>);
+        }
+    }
+
+    /**
+     * event handling for ActorTile Click
+     */
+    tileClickHandler(actor: ActorType): void {
+        // fetch the available actors
+        callAPI<GeneralSuccess>(APINode.Actor, {
+            action: 'addActorToVideo',
+            ActorId: actor.ActorId,
+            MovieId: this.props.movie_id
+        }, result => {
+            if (result.result === 'success') {
+                // return back to player page
+                this.props.onHide();
+            } else {
+                console.error('an error occured while fetching actors: ' + result);
+            }
+        });
+    }
+
+    /**
+     * load the actors from backend and set state
+     */
+    loadActors(): void {
+        callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, result => {
+            this.setState({actors: result});
+        });
+    }
+
+    /**
+     * enable filterfield and focus into searchbar
+     */
+    private enableFilterField(): void {
+        this.setState({filtervisible: true}, () => {
+            // focus filterfield after state update
+            this.filterfield?.focus();
+        });
+    }
+
+    /**
+     * filter the actor array for search matches
+     * @param actor
+     */
+    private filterSearch(actor: ActorType): boolean {
+        return actor.Name.toLowerCase().includes(this.state.filter.toLowerCase());
+    }
+
+    /**
+     * handle a Popupbase parent submit action
+     */
+    private parentSubmit(): void {
+        // allow submit only if one item is left in selection
+        const filteredList = this.state.actors.filter(this.filterSearch);
+
+        if (filteredList.length === 1) {
+            // simulate click if parent submit
+            this.tileClickHandler(filteredList[0]);
+        }
+    }
+
+    /**
+     * key event handling
+     * @param event keyevent
+     */
+    private keypress(event: KeyboardEvent): void {
+        // hide if escape is pressed
+        if (event.key === 'f') {
+            this.enableFilterField();
+        }
+    }
+}
+
+export default AddActorPopup;

src/elements/Popups/AddTagPopup/AddTagPopup.module.css

@@ -0,0 +1,26 @@
+.popup {
+    border: 3px #3574fe solid;
+    border-radius: 18px;
+    height: 80%;
+    left: 20%;
+    opacity: 0.95;
+    position: absolute;
+    top: 10%;
+    width: 60%;
+    z-index: 2;
+}
+
+.header {
+    cursor: move;
+    font-size: x-large;
+    margin-left: 15px;
+    margin-top: 10px;
+    opacity: 1;
+}
+
+.content {
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 10px;
+    opacity: 1;
+}

src/elements/Popups/AddTagPopup/AddTagPopup.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {shallow} from 'enzyme';
+import '@testing-library/jest-dom';
+
+import AddTagPopup from './AddTagPopup';
+
+describe('<AddTagPopup/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<AddTagPopup/>);
+        wrapper.unmount();
+    });
+
+    it('test tag insertion', function () {
+        const wrapper = shallow(<AddTagPopup/>);
+        wrapper.setState({
+            items: [{TagId: 1, TagName: 'test'}, {TagId: 2, TagName: 'ee'}]
+        }, () => {
+            expect(wrapper.find('Tag')).toHaveLength(2);
+            expect(wrapper.find('Tag').first().dive().text()).toBe('test');
+        });
+    });
+
+    it('test tag click', function () {
+        const wrapper = shallow(<AddTagPopup submit={jest.fn()} onHide={jest.fn()}/>);
+
+        wrapper.setState({
+            items: [{tag_id: 1, tag_name: 'test'}]
+        }, () => {
+            wrapper.find('Tag').first().dive().simulate('click');
+            expect(wrapper.instance().props.submit).toHaveBeenCalledTimes(1);
+            expect(wrapper.instance().props.onHide).toHaveBeenCalledTimes(1);
+        });
+    });
+});

src/elements/Popups/AddTagPopup/AddTagPopup.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import Tag from '../../Tag/Tag';
+import PopupBase from '../PopupBase';
+import {APINode, callAPI} from '../../../utils/Api';
+import {TagType} from '../../../types/VideoTypes';
+
+interface props {
+    onHide: () => void;
+    submit: (tagId: number, tagName: string) => void;
+    movie_id: number;
+}
+
+interface state {
+    items: TagType[];
+}
+
+/**
+ * component creates overlay to add a new tag to a video
+ */
+class AddTagPopup extends React.Component<props, state> {
+    constructor(props: props) {
+        super(props);
+
+        this.state = {items: []};
+    }
+
+    componentDidMount(): void {
+        callAPI(APINode.Tags, {action: 'getAllTags'}, (result: TagType[]) => {
+            this.setState({
+                items: result
+            });
+        });
+    }
+
+    render(): JSX.Element {
+        return (
+            <PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide}>
+                {this.state.items ?
+                    this.state.items.map((i) => (
+                        <Tag tagInfo={i}
+                             onclick={(): void => {
+                                 this.props.submit(i.TagId, i.TagName);
+                                 this.props.onHide();
+                             }}/>
+                    )) : null}
+            </PopupBase>
+        );
+    }
+}
+
+export default AddTagPopup;

src/elements/Popups/NewActorPopup/NewActorPopup.module.css

@@ -0,0 +1,8 @@
+.savebtn {
+    background-color: greenyellow;
+    border: 0;
+    border-radius: 4px;
+    float: right;
+    margin-top: 30px;
+    padding: 3px;
+}

src/elements/Popups/NewActorPopup/NewActorPopup.test.js

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import {shallow} from 'enzyme';
+import '@testing-library/jest-dom';
+import NewActorPopup, {NewActorPopupContent} from './NewActorPopup';
+import {callAPI} from '../../../utils/Api';
+
+describe('<NewActorPopup/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<NewActorPopup/>);
+        wrapper.unmount();
+    });
+});
+
+describe('<NewActorPopupContent/>', () => {
+    it('renders without crashing', function () {
+        const wrapper = shallow(<NewActorPopupContent/>);
+        wrapper.unmount();
+    });
+
+    it('simulate button click', function () {
+        global.callAPIMock({});
+
+        const func = jest.fn();
+        const wrapper = shallow(<NewActorPopupContent onHide={() => {func();}}/>);
+
+        // manually set typed in actorname
+        wrapper.instance().value = 'testactorname';
+
+        global.fetch = prepareFetchApi({});
+
+        expect(callAPI).toBeCalledTimes(0);
+        wrapper.find('button').simulate('click');
+
+        // fetch should have been called once now
+        expect(callAPI).toBeCalledTimes(1);
+
+        expect(func).toHaveBeenCalledTimes(1);
+    });
+
+    it('test not allowing request if textfield is empty', function () {
+        const wrapper = shallow(<NewActorPopupContent/>);
+
+        global.fetch = prepareFetchApi({});
+
+        expect(global.fetch).toBeCalledTimes(0);
+        wrapper.find('button').simulate('click');
+
+        // fetch should not be called now
+        expect(global.fetch).toBeCalledTimes(0);
+    });
+
+    it('test input change', function () {
+        const wrapper = shallow(<NewActorPopupContent/>);
+
+        wrapper.find('input').simulate('change', {target: {value: 'testinput'}});
+
+        expect(wrapper.instance().value).toBe('testinput');
+    });
+});

src/elements/Popups/NewActorPopup/NewActorPopup.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import PopupBase from '../PopupBase';
+import style from './NewActorPopup.module.css';
+import {APINode, callAPI} from '../../../utils/Api';
+import {GeneralSuccess} from '../../../types/GeneralTypes';
+
+interface NewActorPopupProps {
+    onHide: () => void;
+}
+
+/**
+ * creates modal overlay to define a new Tag
+ */
+class NewActorPopup extends React.Component<NewActorPopupProps> {
+    render(): JSX.Element {
+        return (
+            <PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px'>
+                <NewActorPopupContent onHide={this.props.onHide}/>
+            </PopupBase>
+        );
+    }
+}
+
+export class NewActorPopupContent extends React.Component<NewActorPopupProps> {
+    value: string | undefined;
+
+    render(): JSX.Element {
+        return (
+            <>
+                <div>
+                    <input type='text' placeholder='Actor Name' onChange={(v): void => {
+                        this.value = v.target.value;
+                    }}/></div>
+                <button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button>
+            </>
+        );
+    }
+
+    /**
+     * store the filled in form to the backend
+     */
+    storeselection(): void {
+        // check if user typed in name
+        if (this.value === '' || this.value === undefined) return;
+
+        callAPI(APINode.Actor, {action: 'createActor', actorname: this.value}, (result: GeneralSuccess) => {
+            if (result.result !== 'success') {
+                console.log('error occured while writing to db -- todo error handling');
+                console.log(result.result);
+            }
+            this.props.onHide();
+        });
+    }
+}
+
+export default NewActorPopup;

src/elements/Popups/NewTagPopup/NewTagPopup.module.css

@@ -0,0 +1,8 @@
+.savebtn {
+    background-color: greenyellow;
+    border: 0;
+    border-radius: 4px;
+    float: right;
+    margin-top: 30px;
+    padding: 3px;
+}

src/elements/Popups/NewTagPopup/NewTagPopup.test.js

@@ -1,8 +1,8 @@
-import React from "react";
+import React from 'react';
 
-import {shallow} from 'enzyme'
-import "@testing-library/jest-dom"
-import NewTagPopup from "./NewTagPopup";
+import {shallow} from 'enzyme';
+import '@testing-library/jest-dom';
+import NewTagPopup from './NewTagPopup';
 
 describe('<NewTagPopup/>', function () {
     it('renders without crashing ', function () {
@@ -11,23 +11,20 @@ describe('<NewTagPopup/>', function () {
     });
 
     it('test storeseletion click event', done => {
-        const mockSuccessResponse = {};
-        const mockJsonPromise = Promise.resolve(mockSuccessResponse);
-        const mockFetchPromise = Promise.resolve({
-            json: () => mockJsonPromise,
-        });
-        global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
+        global.fetch = prepareFetchApi({});
 
         const func = jest.fn();
 
         const wrapper = shallow(<NewTagPopup/>);
         wrapper.setProps({
             onHide: () => {
-                func()
+                func();
             }
         });
 
-        wrapper.find('ModalFooter').find('button').simulate('click');
+        wrapper.instance().value = 'testvalue';
+
+        wrapper.find('button').simulate('click');
         expect(global.fetch).toHaveBeenCalledTimes(1);
 
         process.nextTick(() => {
@@ -38,4 +35,12 @@ describe('<NewTagPopup/>', function () {
             done();
         });
     });
+
+    it('simulate textfield change', function () {
+        const wrapper = shallow(<NewTagPopup/>);
+
+        wrapper.find('input').simulate('change', {target: {value: 'testvalue'}});
+
+        expect(wrapper.instance().value).toBe('testvalue');
+    });
 });

src/elements/Popups/NewTagPopup/NewTagPopup.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PopupBase from '../PopupBase';
+import style from './NewTagPopup.module.css';
+import {APINode, callAPI} from '../../../utils/Api';
+import {GeneralSuccess} from '../../../types/GeneralTypes';
+
+interface props {
+    onHide: () => void
+}
+
+/**
+ * creates modal overlay to define a new Tag
+ */
+class NewTagPopup extends React.Component<props> {
+    private value: string = '';
+
+    render(): JSX.Element {
+        return (
+            <PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px' ParentSubmit={(): void => this.storeselection()}>
+                <div><input type='text' placeholder='Tagname' onChange={(v): void => {
+                    this.value = v.target.value;
+                }}/></div>
+                <button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button>
+            </PopupBase>
+        );
+    }
+
+    /**
+     * store the filled in form to the backend
+     */
+    storeselection(): void {
+        callAPI(APINode.Tags, {action: 'createTag', TagName: this.value}, (result: GeneralSuccess) => {
+            if (result.result !== 'success') {
+                console.log('error occured while writing to db -- todo error handling');
+                console.log(result.result);
+            }
+            this.props.onHide();
+        });
+    }
+}
+
+export default NewTagPopup;

src/elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup.test.js

@@ -0,0 +1,29 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import {NoBackendConnectionPopup} from './NoBackendConnectionPopup';
+import {getBackendDomain} from '../../../utils/Api';
+
+describe('<NoBackendConnectionPopup/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<NoBackendConnectionPopup onHide={() => {}}/>);
+        wrapper.unmount();
+    });
+
+    it('hides on refresh click', function () {
+        const func = jest.fn();
+        const wrapper = shallow(<NoBackendConnectionPopup onHide={func}/>);
+
+        expect(func).toBeCalledTimes(0);
+        wrapper.find('button').simulate('click');
+
+        expect(func).toBeCalledTimes(1);
+    });
+
+    it('simulate change of textfield', function () {
+        const wrapper = shallow(<NoBackendConnectionPopup onHide={() => {}}/>);
+
+        wrapper.find('input').simulate('change', {target: {value: 'testvalue'}});
+
+        expect(getBackendDomain()).toBe('testvalue');
+    });
+});

src/elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PopupBase from '../PopupBase';
+import style from '../NewActorPopup/NewActorPopup.module.css';
+import {setCustomBackendDomain} from '../../../utils/Api';
+
+interface NBCProps {
+    onHide: (_: void) => void
+}
+
+export function NoBackendConnectionPopup(props: NBCProps): JSX.Element {
+    return (
+        <PopupBase title='No connection to backend API!' onHide={props.onHide} height='200px' width='600px'>
+            <div>
+                <input type='text' placeholder='http://192.168.0.2' onChange={(v): void => {
+                    setCustomBackendDomain(v.target.value);
+                }}/></div>
+            <button className={style.savebtn} onClick={(): void => props.onHide()}>Refresh</button>
+        </PopupBase>
+    );
+}

src/elements/Popups/PopupBase.module.css

@@ -0,0 +1,45 @@
+.popup {
+    border: 3px #3574fe solid;
+    border-radius: 18px;
+    height: fit-content;
+    left: 20%;
+    min-height: 80%;
+    opacity: 0.95;
+    position: absolute;
+    top: 10%;
+    width: 60%;
+    z-index: 2;
+}
+
+.header {
+    cursor: move;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+}
+
+.title {
+    float: left;
+    font-size: x-large;
+    margin-left: 15px;
+    margin-top: 10px;
+    opacity: 1;
+    width: 60%;
+}
+
+.banner {
+    display: flex;
+    flex-direction: row;
+    float: left;
+    justify-content: flex-end;
+    width: 40%;
+}
+
+.content {
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 10px;
+    opacity: 1;
+    overflow: auto;
+}

src/elements/Popups/PopupBase.test.js

@@ -0,0 +1,41 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import PopupBase from './PopupBase';
+
+describe('<PopupBase/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<PopupBase/>);
+        wrapper.unmount();
+    });
+
+    let events;
+
+    function mockKeyPress() {
+        events = [];
+        document.addEventListener = jest.fn((event, cb) => {
+            events[event] = cb;
+        });
+    }
+
+    it('simulate keypress', function () {
+        mockKeyPress();
+        const func = jest.fn();
+        shallow(<PopupBase onHide={() => func()}/>);
+
+        // trigger the keypress event
+        events.keyup({key: 'Escape'});
+
+        expect(func).toBeCalledTimes(1);
+    });
+
+    it('test an Enter sumit', function () {
+        mockKeyPress();
+        const func = jest.fn();
+        shallow(<PopupBase ParentSubmit={() => func()}/>);
+
+        // trigger the keypress event
+        events.keyup({key: 'Enter'});
+
+        expect(func).toBeCalledTimes(1);
+    });
+});

src/elements/Popups/PopupBase.tsx

@@ -0,0 +1,141 @@
+import GlobalInfos from '../../utils/GlobalInfos';
+import style from './PopupBase.module.css';
+import {Line} from '../PageTitle/PageTitle';
+import React, {RefObject} from 'react';
+import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
+
+interface props {
+    width?: string;
+    height?: string;
+    banner?: JSX.Element;
+    title: string;
+    onHide: () => void;
+    ParentSubmit?: () => void;
+}
+
+/**
+ * wrapper class for generic types of popups
+ */
+class PopupBase extends React.Component<props> {
+    private wrapperRef: RefObject<HTMLDivElement>;
+    private framedimensions: { minHeight: string | undefined; width: string | undefined; height: string | undefined };
+
+    constructor(props: props) {
+        super(props);
+
+        this.state = {items: []};
+
+        this.wrapperRef = React.createRef();
+
+        this.handleClickOutside = this.handleClickOutside.bind(this);
+        this.keypress = this.keypress.bind(this);
+
+        // parse style props
+        this.framedimensions = {
+            width: (this.props.width ? this.props.width : undefined),
+            height: (this.props.height ? this.props.height : undefined),
+            minHeight: (this.props.height ? this.props.height : undefined)
+        };
+    }
+
+    componentDidMount(): void {
+        document.addEventListener('mousedown', this.handleClickOutside);
+        addKeyHandler(this.keypress);
+
+        // add element drag drop events
+        if (this.wrapperRef != null) {
+            this.dragElement();
+        }
+    }
+
+    componentWillUnmount(): void {
+        // remove the appended listeners
+        document.removeEventListener('mousedown', this.handleClickOutside);
+        removeKeyHandler(this.keypress);
+    }
+
+    render(): JSX.Element {
+        const themeStyle = GlobalInfos.getThemeStyle();
+        return (
+            <div style={this.framedimensions} className={[style.popup, themeStyle.thirdbackground].join(' ')} ref={this.wrapperRef}>
+                <div className={style.header}>
+                    <div className={[style.title, themeStyle.textcolor].join(' ')}>{this.props.title}</div>
+                    <div className={style.banner}>{this.props.banner}</div>
+                </div>
+
+                <Line/>
+                <div className={style.content}>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+
+    /**
+     * handle click on outside of element
+     */
+    handleClickOutside(event: MouseEvent): void {
+        if (this.wrapperRef && this.wrapperRef.current && !this.wrapperRef.current.contains(event.target as Node)) {
+            this.props.onHide();
+        }
+    }
+
+    /**
+     * key event handling
+     * @param event keyevent
+     */
+    keypress(event: KeyboardEvent): void {
+        // hide if escape is pressed
+        if (event.key === 'Escape') {
+            this.props.onHide();
+        } else if (event.key === 'Enter') {
+            // call a parentsubmit if defined
+            if (this.props.ParentSubmit) this.props.ParentSubmit();
+        }
+    }
+
+    /**
+     * make the element drag and droppable
+     */
+    dragElement(): void {
+        let xOld = 0, yOld = 0;
+
+        const elmnt = this.wrapperRef.current;
+        if (elmnt === null) return;
+        if (elmnt.firstChild === null) return;
+
+        (elmnt.firstChild as HTMLDivElement).onmousedown = dragMouseDown;
+
+
+        function dragMouseDown(e: MouseEvent): void {
+            e.preventDefault();
+            // get the mouse cursor position at startup:
+            xOld = e.clientX;
+            yOld = e.clientY;
+            document.onmouseup = closeDragElement;
+            // call a function whenever the cursor moves:
+            document.onmousemove = elementDrag;
+        }
+
+        function elementDrag(e: MouseEvent): void {
+            e.preventDefault();
+            // calculate the new cursor position:
+            const dx = xOld - e.clientX;
+            const dy = yOld - e.clientY;
+            xOld = e.clientX;
+            yOld = e.clientY;
+            // set the element's new position:
+            if (elmnt === null) return;
+            elmnt.style.top = (elmnt.offsetTop - dy) + 'px';
+            elmnt.style.left = (elmnt.offsetLeft - dx) + 'px';
+        }
+
+        function closeDragElement(): void {
+            // stop moving when mouse button is released:
+            document.onmouseup = null;
+            document.onmousemove = null;
+        }
+    }
+}
+
+export default PopupBase;

src/elements/Popups/SubmitPopup/SubmitPopup.test.js

@@ -0,0 +1,28 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import SubmitPopup from './SubmitPopup';
+
+describe('<SubmitPopup/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<SubmitPopup/>);
+        wrapper.unmount();
+    });
+
+    it('test submit click', function () {
+        const func = jest.fn();
+        const wrapper = shallow(<SubmitPopup submit={() => func()}/>);
+
+        wrapper.find('Button').findWhere(p => p.props().title === 'Submit').simulate('click');
+
+        expect(func).toHaveBeenCalledTimes(1);
+    });
+
+    it('test cancel click', function () {
+        const func = jest.fn();
+        const wrapper = shallow(<SubmitPopup onHide={() => func()}/>);
+
+        wrapper.find('Button').findWhere(p => p.props().title === 'Cancel').simulate('click');
+
+        expect(func).toHaveBeenCalledTimes(1);
+    });
+});

src/elements/Popups/SubmitPopup/SubmitPopup.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PopupBase from '../PopupBase';
+import {Button} from '../../GPElements/Button';
+
+interface props {
+    onHide: (_: void) => void;
+    submit: (_: void) => void;
+}
+
+export default function SubmitPopup(props: props): JSX.Element {
+    return (
+        <PopupBase title='Are you sure?' onHide={props.onHide} height='160px' width='300px'>
+            <Button title='Submit' color={{backgroundColor: 'green'}} onClick={(): void => props.submit()}/>
+            <Button title='Cancel' color={{backgroundColor: 'red'}} onClick={(): void => props.onHide()}/>
+        </PopupBase>
+    );
+
+}

src/elements/Preview/Preview.js

@@ -1,112 +0,0 @@
-import React from "react";
-import "./Preview.css";
-import Player from "../../pages/Player/Player";
-import VideoContainer from "../VideoContainer/VideoContainer";
-
-class Preview extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-        this.props = props;
-
-        this.state = {
-            previewpicture: null,
-            name: null
-        };
-    }
-
-    componentWillUnmount() {
-        this.setState({});
-    }
-
-    componentDidMount() {
-        this.setState({
-            previewpicture: null,
-            name: this.props.name
-        });
-
-        const updateRequest = new FormData();
-        updateRequest.append('action', 'readThumbnail');
-        updateRequest.append('movieid', this.props.movie_id);
-
-        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.text()
-                .then((result) => {
-                    this.setState(prevState => ({
-                        ...prevState.previewpicture, previewpicture: result
-                    }));
-                }));
-    }
-
-    render() {
-        return (
-            <div className='videopreview' onClick={() => this.itemClick()}>
-                <div className='previewtitle'>{this.state.name}</div>
-                <div className='previewpic'>
-                    <img className='previewimage'
-                         src={this.state.previewpicture}
-                         alt='Pic loading.'/>
-                </div>
-                <div className='previewbottom'>
-
-                </div>
-            </div>
-        );
-    }
-
-    itemClick() {
-        console.log("item clicked!" + this.state.name);
-
-        this.props.viewbinding.showVideo(<Player
-            viewbinding={this.props.viewbinding}
-            movie_id={this.props.movie_id}/>);
-    }
-}
-
-export class TagPreview extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-
-        this.props = props;
-    }
-
-    fetchVideoData(tag) {
-        console.log(tag);
-        const updateRequest = new FormData();
-        updateRequest.append('action', 'getMovies');
-        updateRequest.append('tag', tag);
-
-        console.log("fetching data");
-
-        // fetch all videos available
-        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json()
-                .then((result) => {
-                    console.log(result);
-                    this.props.categorybinding(
-                        <VideoContainer
-                            data={result}
-                            viewbinding={this.props.viewbinding}/>, tag
-                    );
-                }))
-            .catch(() => {
-                console.log("no connection to backend");
-            });
-    }
-
-
-    render() {
-        return (
-            <div className='videopreview tagpreview' onClick={() => this.itemClick()}>
-                <div className='tagpreviewtitle'>
-                    {this.props.name}
-                </div>
-            </div>
-        );
-    }
-
-    itemClick() {
-        this.fetchVideoData(this.props.name);
-    }
-}
-
-export default Preview;

src/elements/Preview/Preview.module.css

@@ -1,22 +1,53 @@
 .previewtitle {
-    height: 20px;
-    color: #3d3d3d;
-    text-align: center;
-    font-weight: bold;
-    max-width: 266px;
     font-size: smaller;
+    font-weight: bold;
+    height: 20px;
+    max-width: 266px;
+    text-align: center;
+}
+
+.videopreview:hover .quickactions {
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 50%;
+
+    color: lightgrey;
+    display: block;
+
+    height: 35px;
+    opacity: 0.7;
+    padding-top: 5px;
+
+    position: absolute;
+
+    right: 5px;
+    text-align: center;
+    top: 5px;
+    width: 35px;
+}
+
+.quickactions {
+    display: none;
 }
 
 .previewpic {
     height: 80%;
+    min-height: 150px;
+    min-width: 266px;
     overflow: hidden;
+    text-align: center;
+}
+
+.loadAnimation {
+    display: inline-block;
+    line-height: 150px;
+    vertical-align: middle;
 }
 
 .previewimage {
-    min-height: 150px;
     max-height: 400px;
-    min-width: 266px;
     max-width: 410px;
+    min-height: 150px;
+    min-width: 266px;
 }
 
 .previewbottom {
@@ -24,28 +55,26 @@
 }
 
 .videopreview {
+    border-radius: 20px;
+    cursor: pointer;
     float: left;
     margin-left: 25px;
     margin-top: 25px;
-    /*background-color: #7F7F7F;*/
-    background-color: #a8c3ff;
-    cursor: pointer;
     opacity: 0.85;
-    border-radius: 20px;
+    position: relative;
 }
 
 .videopreview:hover {
     opacity: 1;
-    box-shadow: rgba(2, 12, 27, 0.7) 0px 0px 0px 5px;
     transition: all 300ms;
 }
 
 .tagpreview {
-    text-transform: uppercase;
-    font-weight: bolder;
     font-size: x-large;
-    text-align: center;
+    font-weight: bolder;
     height: 150px;
+    text-align: center;
+    text-transform: uppercase;
     width: 266px;
 }
 

src/elements/Preview/Preview.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import style from './Preview.module.css';
+import {Spinner} from 'react-bootstrap';
+import {Link} from 'react-router-dom';
+import GlobalInfos from '../../utils/GlobalInfos';
+import {faEllipsisV} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import QuickActionPop from '../QuickActionPop/QuickActionPop';
+import {APINode, callAPIPlain} from '../../utils/Api';
+
+interface PreviewProps {
+    name: string;
+    movie_id: number;
+}
+
+interface PreviewState {
+    previewpicture: string | null;
+    optionsvisible: boolean;
+}
+
+/**
+ * Component for single preview tile
+ * floating side by side
+ */
+class Preview extends React.Component<PreviewProps, PreviewState> {
+    constructor(props: PreviewProps) {
+        super(props);
+
+        this.state = {
+            previewpicture: null,
+            optionsvisible: false
+        };
+    }
+
+    componentDidMount(): void {
+        callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movie_id}, (result) => {
+            this.setState({
+                previewpicture: result
+            });
+        });
+    }
+
+    render(): JSX.Element {
+        const themeStyle = GlobalInfos.getThemeStyle();
+        return (
+            <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
+                <div className={style.quickactions} onClick={(): void => this.setState({optionsvisible: true})}>
+                    <FontAwesomeIcon style={{
+                        verticalAlign: 'middle',
+                        fontSize: '25px'
+                    }} icon={faEllipsisV} size='1x'/>
+                </div>
+                {this.popupvisible()}
+                <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
+                <Link to={'/player/' + this.props.movie_id}>
+                    <div className={style.previewpic}>
+                        {this.state.previewpicture !== null ?
+                            <img className={style.previewimage}
+                                 src={this.state.previewpicture}
+                                 alt='Pic loading.'/> :
+                            <span className={style.loadAnimation}><Spinner animation='border'/></span>}
+
+                    </div>
+                </Link>
+                <div className={style.previewbottom}>
+
+                </div>
+            </div>
+        );
+    }
+
+
+    popupvisible(): JSX.Element {
+        if (this.state.optionsvisible)
+            return (<QuickActionPop position={{x: 50, y: 50}} onHide={(): void => this.setState({optionsvisible: false})}>heeyyho</QuickActionPop>);
+        else
+            return <></>;
+    }
+}
+
+/**
+ * Component for a Tag-name tile (used in category page)
+ */
+export class TagPreview extends React.Component<{ name: string }> {
+    render(): JSX.Element {
+        const themeStyle = GlobalInfos.getThemeStyle();
+        return (
+            <div
+                className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
+                <div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
+                    {this.props.name}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Preview;

src/elements/Preview/Previw.test.js

@@ -1,61 +1,45 @@
 import React from 'react';
-import {shallow} from 'enzyme'
+import {shallow} from 'enzyme';
 
-import Preview, {TagPreview} from "./Preview";
+import Preview, {TagPreview} from './Preview';
 
 describe('<Preview/>', function () {
     it('renders without crashing ', function () {
-        const wrapper = shallow(<Preview/>);
+        const wrapper = shallow(<Preview movie_id={1}/>);
         wrapper.unmount();
     });
 
-    // check if preview title renders correctly
-    it('renders title', () => {
-        const wrapper = shallow(<Preview name='test'/>);
-        expect(wrapper.find('.previewtitle').text()).toBe('test');
-    });
-
-
-    it('click event triggered', () => {
-        const func = jest.fn();
-
-        const wrapper = shallow(<Preview/>);
-        wrapper.setProps({
-            viewbinding: {
-                showVideo: () => {
-                    func()
-                }
-            }
-        });
-
-        wrapper.find('.videopreview').simulate('click');
-
-        //callback to open player should have called
-        expect(func).toHaveBeenCalledTimes(1);
-    });
-
     it('picture rendered correctly', done => {
         const mockSuccessResponse = 'testsrc';
         const mockJsonPromise = Promise.resolve(mockSuccessResponse);
         const mockFetchPromise = Promise.resolve({
-            text: () => mockJsonPromise,
+            text: () => mockJsonPromise
         });
         global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
 
-        const wrapper = shallow(<Preview/>);
+        const wrapper = shallow(<Preview name='test' movie_id={1}/>);
 
         // now called 1 times
         expect(global.fetch).toHaveBeenCalledTimes(1);
 
         process.nextTick(() => {
             // received picture should be rendered into wrapper
-            expect(wrapper.find(".previewimage").props().src).not.toBeNull();
+            expect(wrapper.find('.previewimage').props().src).not.toBeNull();
+            // check if preview title renders correctly
+            expect(wrapper.find('.previewtitle').text()).toBe('test');
 
             global.fetch.mockClear();
             done();
         });
 
     });
+
+    it('spinner loads correctly', function () {
+        const wrapper = shallow(<Preview movie_id={1}/>);
+
+        // expect load animation to be visible
+        expect(wrapper.find('.loadAnimation')).toHaveLength(1);
+    });
 });
 
 describe('<TagPreview/>', function () {
@@ -69,39 +53,5 @@ describe('<TagPreview/>', function () {
         const wrapper = shallow(<TagPreview name='test'/>);
         expect(wrapper.find('.tagpreviewtitle').text()).toBe('test');
     });
-
-
-    it('click event triggered', done => {
-        const mockSuccessResponse = {};
-        const mockJsonPromise = Promise.resolve(mockSuccessResponse);
-        const mockFetchPromise = Promise.resolve({
-            json: () => mockJsonPromise,
-        });
-        global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
-
-        const func = jest.fn();
-
-        const wrapper = shallow(<TagPreview/>);
-        wrapper.setProps({
-            categorybinding: () => {
-                func()
-            }
-        });
-
-        // first call of fetch is getting of available tags
-        expect(global.fetch).toHaveBeenCalledTimes(0);
-        wrapper.find('.videopreview').simulate('click');
-
-        // now called 1 times
-        expect(global.fetch).toHaveBeenCalledTimes(1);
-
-        process.nextTick(() => {
-            //callback to close window should have called
-            expect(func).toHaveBeenCalledTimes(1);
-
-            global.fetch.mockClear();
-            done();
-        });
-    });
 });
 

src/elements/QuickActionPop/QuickActionPop.tsx

@@ -0,0 +1,59 @@
+import React, {RefObject} from 'react';
+import style from './QuickActionPopup.module.css';
+
+interface props {
+    position: {
+        x: number,
+        y: number
+    },
+    onHide: () => void
+}
+
+class QuickActionPop extends React.Component<props> {
+    private readonly wrapperRef: RefObject<HTMLDivElement>;
+
+    constructor(props: props) {
+        super(props);
+
+        this.wrapperRef = React.createRef();
+
+        this.handleClickOutside = this.handleClickOutside.bind(this);
+    }
+
+
+    componentDidMount(): void {
+        document.addEventListener('mousedown', this.handleClickOutside);
+    }
+
+    componentWillUnmount(): void {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+
+    render(): JSX.Element {
+        return (
+            <div ref={this.wrapperRef} className={style.quickaction} style={{top: this.props.position.y, left: this.props.position.x}}>
+                {this.props.children}
+            </div>
+        );
+    }
+
+    /**
+     * trigger hide if we click outside the div
+     */
+    handleClickOutside(event: MouseEvent): void {
+        if (this.wrapperRef && this.wrapperRef.current && !this.wrapperRef.current.contains(event.target as Node)) {
+            this.props.onHide();
+        }
+    }
+}
+
+interface Itemprops {
+    title: string;
+    onClick: () => void
+}
+
+export const ContextItem = (props: Itemprops): JSX.Element => (
+    <div onClick={props.onClick} className={style.ContextItem}>{props.title}</div>
+);
+
+export default QuickActionPop;

src/elements/QuickActionPop/QuickActionPopup.module.css

@@ -0,0 +1,17 @@
+.quickaction {
+    background-color: white;
+    height: 120px;
+    position: absolute;
+    width: 90px;
+    z-index: 2;
+}
+
+.ContextItem {
+    height: 40px;
+    padding-top: 10px;
+    text-align: center;
+}
+
+.ContextItem:hover {
+    background-color: lightgray;
+}

src/elements/SideBar/SideBar.js

@@ -1,12 +0,0 @@
-import React from "react";
-import "./SideBar.css"
-
-class SideBar extends React.Component {
-    render() {
-        return (<div className='sideinfo'>
-            {this.props.children}
-        </div>);
-    }
-}
-
-export default SideBar;

src/elements/SideBar/SideBar.module.css

@@ -1,24 +1,25 @@
 .sideinfo {
-    width: 20%;
-    float: left;
-    padding: 20px;
-    margin-top: 25px;
-    margin-left: 15px;
-    background-color: #b4c7fe;
-    border-radius: 20px;
     border: 2px #3574fe solid;
+    border-radius: 20px;
+}
+
+.sideinfogeometry {
+    float: left;
+    margin-left: 15px;
+    margin-top: 25px;
     overflow: hidden;
+    padding: 20px;
+    width: 20%;
 }
 
 .sidebartitle {
-    font-weight: bold;
     font-size: larger;
+    font-weight: bold;
 }
 
 .sidebarinfo {
-    margin-top: 5px;
-    background-color: #8ca3fc;
     border-radius: 5px;
+    margin-top: 5px;
     padding: 2px 10px 2px 15px;
     width: 220px;
 }

src/elements/SideBar/SideBar.test.js

@@ -1,8 +1,8 @@
-import React from "react";
-import SideBar from "./SideBar";
+import React from 'react';
+import SideBar, {SideBarItem, SideBarTitle} from './SideBar';
 
-import "@testing-library/jest-dom"
-import {shallow} from "enzyme";
+import '@testing-library/jest-dom';
+import {shallow} from 'enzyme';
 
 describe('<SideBar/>', function () {
     it('renders without crashing ', function () {
@@ -12,6 +12,16 @@ describe('<SideBar/>', function () {
 
     it('renders childs correctly', function () {
         const wrapper = shallow(<SideBar>test</SideBar>);
-        expect(wrapper.children().text()).toBe("test");
+        expect(wrapper.children().text()).toBe('test');
+    });
+
+    it('sidebar Item renders without crashing', function () {
+        const wrapper = shallow(<SideBarItem>Test</SideBarItem>);
+        expect(wrapper.children().text()).toBe('Test');
+    });
+
+    it('renderes sidebartitle correctly', function () {
+        const wrapper = shallow(<SideBarTitle>Test</SideBarTitle>);
+        expect(wrapper.children().text()).toBe('Test');
     });
 });

src/elements/SideBar/SideBar.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import style from './SideBar.module.css';
+import GlobalInfos from '../../utils/GlobalInfos';
+
+interface SideBarProps {
+    hiddenFrame?: boolean;
+    width?: string;
+}
+
+/**
+ * component for sidebar-info
+ */
+class SideBar extends React.Component<SideBarProps> {
+    render(): JSX.Element {
+        const themeStyle = GlobalInfos.getThemeStyle();
+        const classnn = style.sideinfogeometry + ' ' + (this.props.hiddenFrame === undefined ? style.sideinfo + ' ' + themeStyle.secbackground : '');
+
+        return (<div className={classnn} style={{width: this.props.width}}>
+            {this.props.children}
+        </div>);
+    }
+}
+
+/**
+ * The title of the sidebar
+ */
+export class SideBarTitle extends React.Component {
+    render(): JSX.Element {
+        const themeStyle = GlobalInfos.getThemeStyle();
+        return (
+            <div className={style.sidebartitle + ' ' + themeStyle.subtextcolor}>{this.props.children}</div>
+        );
+    }
+}
+
+/**
+ * An item of the sidebar
+ */
+export class SideBarItem extends React.Component {
+    render(): JSX.Element {
+        const themeStyle = GlobalInfos.getThemeStyle();
+        return (
+            <div
+                className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>{this.props.children}</div>
+        );
+    }
+}
+
+export default SideBar;

src/elements/Tag/Tag.css

@@ -1,19 +0,0 @@
-.tagbtn {
-    color: white;
-    margin: 10px;
-    background-color: #3574fe;
-    border: none;
-    border-radius: 10px;
-    padding: 5px 15px 5px 15px;
-    /*font-weight: bold;*/
-    display: block;
-}
-
-.tagbtn:focus {
-    background-color: #004eff;
-    outline: none;
-}
-
-.tagbtn:hover {
-    background-color: #004eff;
-}

src/elements/Tag/Tag.js

@@ -1,21 +0,0 @@
-import React from "react";
-
-import "./Tag.css"
-
-class Tag extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-
-        this.props = props;
-    }
-
-    render() {
-        // todo onclick events correctlyy
-        return (
-            <button className='tagbtn' onClick={this.props.onClick}
-                    data-testid="Test-Tag">{this.props.children}</button>
-        );
-    }
-}
-
-export default Tag;

src/elements/Tag/Tag.module.css

@@ -0,0 +1,37 @@
+.btnnostyle {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+}
+
+.tagbtnContainer {
+    background-color: #3574fe;
+    border-radius: 10px;
+    color: white;
+    margin-left: 10px;
+    margin-top: 15px;
+    width: 50px;
+    /*font-weight: bold;*/
+    padding: 5px 15px 5px 15px;
+}
+
+.tagbtnContainer:focus {
+    background-color: #004eff;
+    outline: none;
+}
+
+.tagbtnContainer:hover {
+    background-color: #004eff;
+}
+
+.deletebtn{
+    display: none;
+}
+
+.tagbtnContainer:hover .deletebtn {
+    display: inline;
+}

src/elements/Tag/Tag.test.js

@@ -1,17 +1,31 @@
-import React from "react";
-import Tag from './Tag'
+import React from 'react';
+import Tag from './Tag';
 
-import "@testing-library/jest-dom"
-import {shallow} from 'enzyme'
+import '@testing-library/jest-dom';
+import {shallow} from 'enzyme';
 
 describe('<Tag/>', function () {
     it('renders without crashing ', function () {
-        const wrapper = shallow(<Tag>test</Tag>);
+        const wrapper = shallow(<Tag tagInfo={{TagName: 'testname', TagId: 1}}/>);
         wrapper.unmount();
     });
 
     it('renders childs correctly', function () {
-        const wrapper = shallow(<Tag>test</Tag>);
-        expect(wrapper.children().text()).toBe("test");
+        const wrapper = shallow(<Tag tagInfo={{TagName: 'test', TagId: 1}}/>);
+        expect(wrapper.children().text()).toBe('test');
+    });
+
+    it('test custom onclick function', function () {
+        const func = jest.fn();
+
+        const wrapper = shallow(<Tag
+            tagInfo={{TagName: 'test', TagId: 1}}
+            onclick={() => {func();}}>test</Tag>);
+
+        expect(func).toBeCalledTimes(0);
+
+        wrapper.simulate('click');
+
+        expect(func).toBeCalledTimes(1);
     });
 });

src/elements/Tag/Tag.tsx

@@ -0,0 +1,81 @@
+import React, {SyntheticEvent} from 'react';
+
+import styles from './Tag.module.css';
+import {Link} from 'react-router-dom';
+import {TagType} from '../../types/VideoTypes';
+
+interface props {
+    onclick?: (_: string) => void;
+    tagInfo: TagType;
+    onContextMenu?: (pos: {x: number, y: number}) => void
+}
+
+interface state {
+    contextVisible: boolean
+}
+
+/**
+ * A Component representing a single Category tag
+ */
+class Tag extends React.Component<props, state> {
+    constructor(props: Readonly<props> | props) {
+        super(props);
+
+        this.state = {
+            contextVisible: false
+        };
+
+        this.contextmenu = this.contextmenu.bind(this);
+    }
+
+    render(): JSX.Element {
+        if (this.props.onclick) {
+            return this.renderButton();
+        } else {
+            return (
+                <Link to={'/categories/' + this.props.tagInfo.TagId}>
+                    {this.renderButton()}
+                </Link>
+            );
+        }
+    }
+
+    renderButton(): JSX.Element {
+        return (
+            <span className={styles.tagbtnContainer}>
+                <button className={styles.btnnostyle}
+                        onClick={(): void => this.TagClick()}
+                        onContextMenu={this.contextmenu}
+                        data-testid='Test-Tag'>{this.props.tagInfo.TagName}</button>
+                <span className={styles.deletebtn}>X</span>
+            </span>
+        );
+    }
+
+    /**
+     * click handling for a Tag
+     */
+    TagClick(): void {
+        if (this.props.onclick) {
+            // call custom onclick handling
+            this.props.onclick(this.props.tagInfo.TagName); // todo check if param is neccessary
+            return;
+        }
+    }
+
+    /**
+     * handle a custom contextmenu for this item
+     * @param e
+     * @private
+     */
+    private contextmenu(e: SyntheticEvent): void {
+        if (!this.props.onContextMenu) return;
+
+        const event = e as unknown as PointerEvent;
+        event.preventDefault();
+        this.props.onContextMenu({x: event.clientX, y: event.clientY});
+        // this.setState({contextVisible: true});
+    }
+}
+
+export default Tag;

src/elements/VideoContainer/VideoContainer.js

@@ -1,77 +0,0 @@
-import React from "react";
-import Preview from "../Preview/Preview";
-
-class VideoContainer extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-
-        this.data = props.data;
-
-        this.state = {
-            loadeditems: [],
-            selectionnr: null
-        };
-    }
-
-    // stores current index of loaded elements
-    loadindex = 0;
-
-    componentDidMount() {
-        document.addEventListener('scroll', this.trackScrolling);
-
-        this.loadPreviewBlock(12);
-    }
-
-    render() {
-        return (
-            <div className='maincontent'>
-                {this.state.loadeditems.map(elem => (
-                    <Preview
-                        key={elem.movie_id}
-                        name={elem.movie_name}
-                        movie_id={elem.movie_id}
-                        viewbinding={this.props.viewbinding}/>
-                ))}
-                {/*todo css for no items to show*/}
-                {this.state.loadeditems.length === 0 ?
-                    "no items to show!" : null}
-            </div>
-        );
-    }
-
-    componentWillUnmount() {
-        this.setState({});
-        document.removeEventListener('scroll', this.trackScrolling);
-    }
-
-    loadPreviewBlock(nr) {
-        console.log("loadpreviewblock called ...")
-        let ret = [];
-        for (let i = 0; i < nr; i++) {
-            // only add if not end
-            if (this.data.length > this.loadindex + i) {
-                ret.push(this.data[this.loadindex + i]);
-            }
-        }
-
-        this.setState({
-            loadeditems: [
-                ...this.state.loadeditems,
-                ...ret
-            ]
-        });
-
-
-        this.loadindex += nr;
-    }
-
-    trackScrolling = () => {
-        // comparison if current scroll position is on bottom
-        // 200 stands for bottom offset to trigger load
-        if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
-            this.loadPreviewBlock(8);
-        }
-    }
-}
-
-export default VideoContainer;

src/elements/VideoContainer/VideoContainer.module.css

@@ -0,0 +1,4 @@
+.maincontent {
+    float: left;
+    width: 70%;
+}

src/elements/VideoContainer/VideoContainer.test.js

@@ -1,6 +1,6 @@
-import {shallow} from "enzyme";
-import React from "react";
-import VideoContainer from "./VideoContainer";
+import {shallow} from 'enzyme';
+import React from 'react';
+import VideoContainer from './VideoContainer';
 
 describe('<VideoContainer/>', function () {
     it('renders without crashing ', function () {
@@ -8,11 +8,11 @@ describe('<VideoContainer/>', function () {
         wrapper.unmount();
     });
 
-    it('inserts tiles correctly', () => {
+    it('inserts tiles correctly if enough available', () => {
         const wrapper = shallow(<VideoContainer data={[
-            {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}
+            {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}
         ]}/>);
-        expect(wrapper.find('Preview')).toHaveLength(12);
+        expect(wrapper.find('Preview')).toHaveLength(16);
     });
 
     it('inserts tiles correctly if not enough available', () => {
@@ -25,6 +25,6 @@ describe('<VideoContainer/>', function () {
     it('no items available', () => {
         const wrapper = shallow(<VideoContainer data={[]}/>);
         expect(wrapper.find('Preview')).toHaveLength(0);
-        expect(wrapper.find(".maincontent").text()).toBe("no items to show!");
+        expect(wrapper.find('.maincontent').text()).toBe('no items to show!');
     });
 });

src/elements/VideoContainer/VideoContainer.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import Preview from '../Preview/Preview';
+import style from './VideoContainer.module.css';
+import {VideoTypes} from '../../types/ApiTypes';
+
+interface props {
+    data: VideoTypes.VideoUnloadedType[]
+}
+
+interface state {
+    loadeditems: VideoTypes.VideoUnloadedType[];
+    selectionnr: number;
+}
+
+/**
+ * A videocontainer storing lots of Preview elements
+ * includes scroll handling and loading of preview infos
+ */
+class VideoContainer extends React.Component<props, state> {
+    // stores current index of loaded elements
+    loadindex: number = 0;
+
+    constructor(props: props) {
+        super(props);
+
+        this.state = {
+            loadeditems: [],
+            selectionnr: 0
+        };
+    }
+
+    componentDidMount(): void {
+        document.addEventListener('scroll', this.trackScrolling);
+
+        this.loadPreviewBlock(16);
+    }
+
+    render(): JSX.Element {
+        return (
+            <div className={style.maincontent}>
+                {this.state.loadeditems.map(elem => (
+                    <Preview
+                        key={elem.MovieId}
+                        name={elem.MovieName}
+                        movie_id={elem.MovieId}/>
+                ))}
+                {/*todo css for no items to show*/}
+                {this.state.loadeditems.length === 0 ?
+                    'no items to show!' : null}
+                {this.props.children}
+            </div>
+        );
+    }
+
+    componentWillUnmount(): void {
+        this.setState({});
+        // unbind scroll listener when unmounting component
+        document.removeEventListener('scroll', this.trackScrolling);
+    }
+
+    /**
+     * load previews to the container
+     * @param nr number of previews to load
+     */
+    loadPreviewBlock(nr: number): void {
+        console.log('loadpreviewblock called ...');
+        let ret = [];
+        for (let i = 0; i < nr; i++) {
+            // only add if not end
+            if (this.props.data.length > this.loadindex + i) {
+                ret.push(this.props.data[this.loadindex + i]);
+            }
+        }
+
+        this.setState({
+            loadeditems: [
+                ...this.state.loadeditems,
+                ...ret
+            ]
+        });
+
+
+        this.loadindex += nr;
+    }
+
+    /**
+     * scroll event handler -> load new previews if on bottom
+     */
+    trackScrolling = (): void => {
+        // comparison if current scroll position is on bottom --> 200 is bottom offset to trigger load
+        if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
+            this.loadPreviewBlock(8);
+        }
+    };
+}
+
+export default VideoContainer;

src/index.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './css/index.css';
 import App from './App';
 
+// don't allow console logs within production env
+global.console.log = process.env.NODE_ENV !== 'development' ? (s: string | number | boolean): void => {} : global.console.log;
+
 ReactDOM.render(
     <React.StrictMode>
         <App/>

src/pages/ActorOverviewPage/ActorOverviewPage.module.css

@@ -0,0 +1,6 @@
+.container {
+    float: left;
+    margin-right: 20px;
+    padding-left: 20px;
+    width: 70%;
+}

src/pages/ActorOverviewPage/ActorOverviewPage.test.js

@@ -0,0 +1,43 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import ActorOverviewPage from './ActorOverviewPage';
+
+describe('<ActorOverviewPage/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<ActorOverviewPage/>);
+        wrapper.unmount();
+    });
+
+    it('test inerstion of actor tiles', function () {
+        const wrapper = shallow(<ActorOverviewPage/>);
+
+        wrapper.setState({
+            actors: [{
+                thumbnail: '',
+                name: 'testname',
+                actor_id: 42
+            }]
+        });
+
+        expect(wrapper.find('ActorTile')).toHaveLength(1);
+    });
+
+    it('test newtagpopup visibility', function () {
+        const wrapper = shallow(<ActorOverviewPage/>);
+
+        expect(wrapper.find('NewActorPopup')).toHaveLength(0);
+
+        wrapper.find('SideBar').find('Button').simulate('click');
+
+        expect(wrapper.find('NewActorPopup')).toHaveLength(1);
+    });
+
+    it('test popup hiding', function () {
+        const wrapper = shallow(<ActorOverviewPage/>);
+        wrapper.setState({NActorPopupVisible: true});
+
+        wrapper.find('NewActorPopup').props().onHide();
+
+        expect(wrapper.find('NewActorPopup')).toHaveLength(0);
+    });
+});

src/pages/ActorOverviewPage/ActorOverviewPage.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {APINode, callAPI} from '../../utils/Api';
+import {ActorType} from '../../types/VideoTypes';
+import ActorTile from '../../elements/ActorTile/ActorTile';
+import PageTitle from '../../elements/PageTitle/PageTitle';
+import SideBar from '../../elements/SideBar/SideBar';
+import style from './ActorOverviewPage.module.css';
+import {Button} from '../../elements/GPElements/Button';
+import NewActorPopup from '../../elements/Popups/NewActorPopup/NewActorPopup';
+
+interface props {
+}
+
+interface state {
+    actors: ActorType[];
+    NActorPopupVisible: boolean
+}
+
+class ActorOverviewPage extends React.Component<props, state> {
+    constructor(props: props) {
+        super(props);
+
+        this.state = {
+            actors: [],
+            NActorPopupVisible: false
+        };
+    }
+
+    componentDidMount(): void {
+        this.fetchAvailableActors();
+    }
+
+    render(): JSX.Element {
+        return (
+            <>
+                <PageTitle title='Actors' subtitle={this.state.actors.length + ' Actors'}/>
+                <SideBar>
+                    <Button title='Add Actor' onClick={(): void => this.setState({NActorPopupVisible: true})}/>
+                </SideBar>
+                <div className={style.container}>
+                    {this.state.actors.map((el) => (<ActorTile key={el.ActorId} actor={el}/>))}
+                </div>
+                {this.state.NActorPopupVisible ?
+                    <NewActorPopup onHide={(): void => {
+                        this.setState({NActorPopupVisible: false});
+                        this.fetchAvailableActors(); // refetch actors
+                    }}/> : null}
+            </>
+        );
+    }
+
+    fetchAvailableActors(): void {
+        callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, result => {
+            this.setState({actors: result});
+        });
+    }
+}
+
+export default ActorOverviewPage;

src/pages/ActorPage/ActorPage.module.css

@@ -0,0 +1,9 @@
+.pic {
+    margin-bottom: 25px;
+    text-align: center;
+}
+
+.overviewbutton {
+    float: right;
+    margin-top: 25px;
+}