first attempts to remember scroll position

OAuth2

See merge request lukas/openmediacenter!37

.gitlab-ci.yml

@@ -1,62 +1,78 @@
 image: node:14
 
 stages:
-  - prepare
   - build
   - test
   - packaging
   - deploy
 
-cache:
-  paths:
-    - node_modules/
-
 include:
   - template: Code-Quality.gitlab-ci.yml
 
 variables:
   SAST_DISABLE_DIND: "true"
 
-prepare:
+Minimize_Frontend:
-  stage: prepare
-  script:
-    - npm install --progress=false
-
-build:
   stage: build
+  before_script:
+    - yarn install --cache-folder .yarn
   script:
-    - npm run build
+    - yarn run build
   artifacts:
-    expire_in: 7 days
+    expire_in: 2 days
     paths:
       - build/
-  needs: ["prepare"]
+  cache:
+    key: ${CI_COMMIT_REF_SLUG}
+    paths:
+      - .yarn/
+      - node_modules/
 
-test:
+Build_Backend:
-  stage: test
+  image: golang:latest
+  stage: build
   script:
-    - CI=true npm run test
+    - 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
-  needs: ["prepare"]
+  cache:
+    key: ${CI_COMMIT_REF_SLUG}
+    paths:
+      - .yarn/
+      - node_modules/
+
+Backend_Tests:
+  image: golang:latest
+  stage: test
+  script:
+    - 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:
+      junit: ./apiGo/report.xml
 
 code_quality:
   tags:
     - dind
 
-coverage:
+Debian_Server:
-  stage: test
-  script:
-    - CI=true npm run coverage
-  artifacts:
-    reports:
-      cobertura:
-        - ./coverage/cobertura-coverage.xml
-  needs: ["prepare"]
-
-package_debian:
   stage: packaging
   image: debian
   script:
@@ -64,24 +80,29 @@ package_debian:
     - 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 -r ../api ./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: ["build"]
+  needs:
+      - Minimize_Frontend
+      - Build_Backend
 
-deploy_test1:
+Test_Server:
   stage: deploy
   image: luki42/alpineopenssh:latest
   needs:
-    - test
+    - Frontend_Tests
-    - package_debian
+    - Backend_Tests
+    - Debian_Server
   only:
     - master
   script:

README.md

@@ -8,7 +8,7 @@ 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.
 Transform your webserver into a mediaserver.
-It's based on Reactjs and PHP is used for backend.
+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. 
 With the help of tags you can organize your video gravity.

api/extractvideopreviews.php

@@ -1,18 +0,0 @@
-<?php
-require_once __DIR__ . '/src/Database.php';
-require_once __DIR__ . '/src/TMDBMovie.php';
-require_once __DIR__ . '/src/SSettings.php';
-require_once __DIR__ . '/src/VideoParser.php';
-
-// allow UTF8 characters
-setlocale(LC_ALL, 'en_US.UTF-8');
-set_time_limit(3600);
-
-$vp = new VideoParser();
-$vp->writeLog("starting extraction!!\n");
-
-$sett = new SSettings();
-
-// load video path from settings
-$scandir = __DIR__ . "/../" . $sett->getVideoPath();
-$vp->extractVideos($scandir);

api/settings.php

@@ -1,5 +0,0 @@
-<?php
-require_once __DIR__ . '/src/handlers/Settings.php';
-
-$sett = new Settings();
-$sett->handleAction();

api/src/Database.php

@@ -1,57 +0,0 @@
-<?php
-
-/**
- * Class Database
- *
- * Class with all neccessary stuff for the Database connections.
- */
-class Database {
-    private static $instance = null;
-    private $conn;
-
-    private $servername = "127.0.0.1";
-    private $username = "mediacenteruser";
-    private $password = "mediapassword";
-    private $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/src/SSettings.php

@@ -1,45 +0,0 @@
-<?php
-
-/**
- * Class SSettings
- * class handling all Settings used by php scripts
- */
-class SSettings {
-    private $database;
-
-    /**
-     * SSettings constructor.
-     */
-    public function __construct() {
-        $this->database = Database::getInstance();
-    }
-
-    /**
-     * get the videopath saved in db
-     * @return string videopath
-     */
-    public function getVideoPath() {
-        $query = "SELECT video_path from settings";
-
-        $result = $this->database->getConnection()->query($query);
-
-        $r = mysqli_fetch_assoc($result);
-        return $r['video_path'];
-    }
-
-    /**
-     * check if TMDB is enableds
-     * @return bool isenabled?
-     */
-    public function isTMDBGrabbingEnabled(): bool {
-        $query = "SELECT TMDB_grabbing from settings WHERE 1";
-
-        $result = $this->database->getConnection()->query($query);
-        if (!$result) {
-            return true; // if undefined in db --> default true
-        } else {
-            $r = mysqli_fetch_assoc($result);
-            return $r['TMDB_grabbing'] == '1';
-        }
-    }
-}

api/src/TMDBMovie.php

@@ -1,51 +0,0 @@
-<?php
-
-/**
- * Class TMDBMovie
- * class to handle all interactions with the tmdb api
- */
-class TMDBMovie {
-    public $picturebase = "https://image.tmdb.org/t/p/w500";
-    private $apikey = "9fd90530b11447f5646f8e6fb4733fb4";
-    private $baseurl = "https://api.themoviedb.org/3/";
-
-    /**
-     * search for a specific movie
-     *
-     * @param string $moviename moviename
-     * @return object movie object or null if not found
-     */
-    public function searchMovie(string $moviename, string $year = null) {
-        $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
-            return null;
-        } elseif ($year != null) {
-            // if year is defined check year
-            $regex = '/[0-9]{4}?/'; // matches year of string
-
-            for ($i = 0; $i < count($reply->results); $i++) {
-                $releasedate = $reply->results[$i]->release_date;
-
-                preg_match($regex, $releasedate, $matches);
-                if (count($matches) > 0) {
-                    $curryear = $matches[0];
-                    if ($curryear == $year)
-                        return $reply->results[$i];
-                }
-            }
-        } 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/src/VideoParser.php

@@ -1,332 +0,0 @@
-<?php
-require_once 'Database.php';
-require_once 'TMDBMovie.php';
-require_once 'SSettings.php';
-
-/**
- * Class VideoParser
- * handling the parsing of all videos of a folder and adding
- * all videos with tags and thumbnails to the database
- */
-class VideoParser {
-    /// ffmpeg installation binary
-    private string $ffmpeg = 'ffmpeg';
-    private TMDBMovie $tmdb;
-    /// initial load of all available movie genres
-    private array $tmdbgenres;
-    private string $videopath;
-
-    /// db connection instance
-    private mysqli $conn;
-
-    /// settings object instance
-    private SSettings $settings;
-
-    private bool $TMDBenabled;
-    /// videos added in this run
-    private int $added = 0;
-    /// all videos in this run
-    private int $all = 0;
-    /// failed videos in this run
-    private int $failed = 0;
-    /// deleted videos in this run
-    private int $deleted = 0;
-
-    /**
-     * VideoParser constructor.
-     */
-    public function __construct() {
-        $this->tmdb = new TMDBMovie();
-        $this->tmdbgenres = $this->tmdb->getAllGenres();
-        $this->conn = Database::getInstance()->getConnection();
-
-        $this->settings = new SSettings();
-        $this->TMDBenabled = $this->settings->isTMDBGrabbingEnabled();
-        $this->videopath = $this->settings->getVideoPath();
-    }
-
-    /**
-     * searches a folder for mp4 videos and adds them to video gravity
-     * @param $foldername string the folder where to search (relative to the webserver root)
-     */
-    public function extractVideos(string $foldername) {
-        echo("TMDB grabbing is " . ($this->TMDBenabled ? "" : "not") . " enabled \n");
-        $arr = scandir($foldername);
-
-        foreach ($arr as $elem) {
-            if ($elem == '.' || $elem == '..') continue;
-
-            $ext = pathinfo($elem, PATHINFO_EXTENSION);
-            if ($ext == "mp4") {
-                $this->processVideo($elem);
-            } else {
-                echo($elem . " does not contain a valid .mp4 extension! - skipping \n");
-                $this->writeLog($elem . " does not contain a valid .mp4 extension! - skipping \n");
-            }
-        }
-
-        // cleanup gravity
-        $this->cleanUpGravity();
-
-        // 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 = $this->conn->query($query);
-        if ($result->num_rows == 1) {
-            $row = $result->fetch_assoc();
-            $size = $row["Size"];
-        }
-
-        echo "Total gravity: " . $this->all . "\n";
-        $this->writeLog("Total gravity: " . $this->all . "\n");
-        echo "Size of Databse is: " . $size . "MB\n";
-        $this->writeLog("Size of Databse is: " . $size . "MB\n");
-        echo "added in this run: " . $this->added . "\n";
-        $this->writeLog("added in this run: " . $this->added . "\n");
-        echo "deleted in this run: " . $this->deleted . "\n";
-        $this->writeLog("deleted in this run: " . $this->deleted . "\n");
-        echo "errored in this run: " . $this->failed . "\n";
-        $this->writeLog("errored in this run: " . $this->failed . "\n");
-
-        $this->writeLog("-42"); // terminating characters to stop webui requesting infos
-    }
-
-    /**
-     * processes one mp4 video, extracts tags and adds it to the database
-     * @param $filename string filename of the video to process
-     */
-    private function processVideo(string $filename) {
-        $moviename = substr($filename, 0, -4);
-
-        $regex = '/\([0-9]{4}?\)/'; //match year pattern
-        preg_match($regex, $moviename, $matches);
-        preg_replace($regex, '', $moviename);
-        $year = null;
-        if (count($matches) > 0) {
-            $year = substr($matches[count($matches) - 1], 1, 4);
-            $moviename = substr($moviename, 0, -6);
-        }
-
-        $query = "SELECT * FROM videos WHERE movie_name = '" . mysqli_real_escape_string($this->conn, $moviename) . "'";
-        $result = $this->conn->query($query);
-
-        // insert if not available in db
-        if (!mysqli_fetch_assoc($result)) {
-            $genres = -1;
-            $insert_query = "";
-
-            // extract other video attributes
-            $video_attributes = $this->_get_video_attributes($filename);
-            $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
-            }
-
-            // extract poster from video
-            $backpic = shell_exec("$this->ffmpeg -hide_banner -loglevel panic -ss 00:04:00 -i \"../$this->videopath$filename\" -vframes 1 -q:v 2 -f singlejpeg pipe:1 2>/dev/null");
-            // convert video to base64
-            $backpic64 = 'data:image/jpeg;base64,' . base64_encode($backpic);
-
-            // set default insert query without tmdb poster
-            $insert_query = "INSERT INTO videos(movie_name,movie_url,thumbnail,quality,length) 
-                            VALUES ('" . mysqli_real_escape_string($this->conn, $moviename) . "',
-                            '" . mysqli_real_escape_string($this->conn, $this->videopath . $filename) . "',
-                            '$backpic64',
-                            '$width',
-                            '$duration')";
-
-            // check if tmdb grabbing is enabled
-            if ($this->TMDBenabled) {
-                // search in tmdb api
-                if (!is_null($dta = $this->tmdb->searchMovie($moviename, $year))) {
-                    $poster = file_get_contents($this->tmdb->picturebase . $dta->poster_path);
-
-                    // error handling for download error
-                    if ($poster) {
-                        $poster_base64 = 'data:image/jpeg;base64,' . base64_encode($poster);
-
-                        // override insert query if pic loaded correctly
-                        $insert_query = "INSERT INTO videos(movie_name,movie_url,poster,thumbnail,quality,length) 
-                            VALUES ('" . mysqli_real_escape_string($this->conn, $moviename) . "',
-                            '" . mysqli_real_escape_string($this->conn, $this->videopath . $filename) . "',
-                            '$backpic64',
-                            '$poster_base64',
-                            '$width',
-                            '$duration')";
-                    }
-                    // store genre ids for parsing later
-                    $genres = $dta->genre_ids;
-                } else {
-                    // nothing found with tmdb
-                    echo "my moviename: " . $moviename;
-                    $this->writeLog("nothing found with TMDB! -- $moviename\n");
-                }
-            }
-
-            if ($this->conn->query($insert_query) === TRUE) {
-                echo('successfully added ' . $filename . " to video gravity\n");
-                $this->writeLog('successfully added ' . $filename . " to video gravity\n");
-
-                // add this entry to the default tags
-                $last_id = $this->conn->insert_id;
-
-                $this->insertSizeTag($width, $last_id);
-
-                // 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($this->tmdbgenres, 'name', 'id')[$genreid];
-                        $tagid = $this->tagExists($tagname);
-
-                        $query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($last_id,$tagid)";
-                        if ($this->conn->query($query) !== TRUE) {
-                            echo "failed to add $genreid tag here.\n";
-                            $this->writeLog("failed to add $genreid tag here.\n");
-                        }
-                    }
-                }
-
-
-                $this->added++;
-                $this->all++;
-            } else {
-                echo('errored item: ' . $filename . "\n");
-                $this->writeLog('errored item: ' . $filename . "\n");
-                echo('{"data":"' . $this->conn->error . '"}\n');
-                $this->writeLog('{"data":"' . $this->conn->error . '"}\n');
-                $this->failed++;
-            }
-        } else {
-            $this->all++;
-        }
-    }
-
-    /**
-     * get all videoinfos of a video file
-     *
-     * @param $video string name including extension
-     * @return object all infos as object
-     */
-    private function _get_video_attributes(string $video) {
-        $command = "mediainfo \"../$this->videopath$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
-     */
-    public function writeLog(string $message) {
-        file_put_contents("/tmp/output.log", $message, FILE_APPEND);
-        flush();
-    }
-
-    /**
-     * insert the corresponding videosize tag to a specific videoid
-     * @param $width int video width
-     * @param $videoid int id of video
-     */
-    private function insertSizeTag(int $width, int $videoid) {
-        // full hd
-        if ($width >= 1900) {
-            $query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($videoid,2)";
-            if ($this->conn->query($query) !== TRUE) {
-                echo "failed to add default tag here.\n";
-                $this->writeLog("failed to add default tag here.\n");
-            }
-        }
-
-        // HD
-        if ($width >= 1250 && $width < 1900) {
-            $query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($videoid,4)";
-            if ($this->conn->query($query) !== TRUE) {
-                echo "failed to add default tag here.\n";
-                $this->writeLog("failed to add default tag here.\n");
-            }
-        }
-
-        // SD
-        if ($width < 1250 && $width > 0) {
-            $query = "INSERT INTO video_tags(video_id,tag_id) VALUES ($videoid,3)";
-            if ($this->conn->query($query) !== TRUE) {
-                echo "failed to add default tag here.\n";
-                $this->writeLog("failed to add default tag here.\n");
-            }
-        }
-    }
-
-    /**
-     * ckecks if tag exists -- if not creates it
-     * @param string $tagname the name of the tag
-     * @return integer the id of the inserted tag
-     */
-    private function tagExists(string $tagname) {
-        $query = "SELECT * FROM tags WHERE tag_name='$tagname'";
-
-        $result = $this->conn->query($query);
-        if ($result->num_rows == 0) {
-            // tag does not exist --> create it
-            $query = "INSERT INTO tags (tag_name) VALUES ('$tagname')";
-            if ($this->conn->query($query) !== TRUE) {
-                echo "failed to create $tagname tag in database\n";
-                $this->writeLog("failed to create $tagname tag in database\n");
-            }
-            return $this->conn->insert_id;
-        } else {
-            return $result->fetch_assoc()['tag_id'];
-        }
-    }
-
-    /**
-     * cleans up the video gravity and removes non existent videos
-     */
-    public function cleanUpGravity() {
-        // auto cleanup db entries
-        $query = "SELECT COUNT(*) as count FROM videos";
-        $result = $this->conn->query($query);
-        $r = mysqli_fetch_assoc($result);
-
-        if ($this->all < $r['count']) {
-            echo "\n\nshould be in gravity: " . $this->all . "\n";
-            $this->writeLog("should be in gravity: " . $this->all . "\n");
-            echo "really in gravity: " . $r['count'] . "\n";
-            $this->writeLog("really in gravity: " . $r['count'] . "\n");
-            echo "cleaning up gravity\n";
-            $this->writeLog("cleaning up gravity\n");
-
-            $query = "SELECT movie_id,movie_url FROM videos";
-            $result = $this->conn->query($query);
-
-            while ($r = mysqli_fetch_assoc($result)) {
-                $movie_id = $r['movie_id'];
-                $url = $r['movie_url'];
-
-                // todo ORDER BY movie_url and erase duplicates also
-                if (!file_exists("../$url")) {
-                    $query = "DELETE FROM videos WHERE movie_id=$movie_id";
-                    if ($this->conn->query($query) === TRUE) {
-                        echo("successfully deleted $url from video gravity\n");
-                        $this->writeLog("successfully deleted $url from video gravity\n");
-                        $this->deleted++;
-                    } else {
-                        echo "failed to delete $url from gravity: $this->conn->error \n";
-                        $this->writeLog("failed to delete $url from gravity: $this->conn->error \n");
-                    }
-                }
-            }
-        }
-    }
-}

api/src/handlers/RequestBase.php

@@ -1,50 +0,0 @@
-<?php
-require_once __DIR__ . '/../Database.php';
-
-abstract class RequestBase {
-    protected $conn;
-    private $actions = array();
-
-    /**
-     * adds a new action handler to the current api file
-     *
-     * @param $action string name of the action variable
-     * @param $callback Closure callback function to be called
-     */
-    function addActionHandler($action, $callback) {
-        $this->actions[$action] = $callback;
-    }
-
-    /**
-     * runs the correct handler
-     * should be called once within the api request
-     */
-    function handleAction() {
-        $this->conn = Database::getInstance()->getConnection();
-
-        if (isset($_POST['action'])) {
-            $this->initHandlers();
-
-            $action = $_POST['action'];
-
-            // call the right handler
-            $this->actions[$action]();
-        } else {
-            echo('{data:"error"}');
-        }
-    }
-
-    /**
-     * add the action handlers in this abstract method
-     */
-    abstract function initHandlers();
-
-    /**
-     * Send response message and exit script
-     * @param $message string the response message
-     */
-    function commitMessage($message) {
-        echo $message;
-        exit(0);
-    }
-}

api/src/handlers/Settings.php

@@ -1,160 +0,0 @@
-<?php
-require_once 'RequestBase.php';
-require_once __DIR__ . '/../VideoParser.php';
-
-/**
- * Class Settings
- * Backend for the Settings page
- */
-class Settings extends RequestBase {
-    function initHandlers() {
-        $this->getFromDB();
-        $this->saveToDB();
-        $this->reIndexHandling();
-    }
-
-    /**
-     * handle settings stuff to load from db
-     */
-    private function getFromDB() {
-        /**
-         * load currently set settings form db for init of settings page
-         */
-        $this->addActionHandler("loadGeneralSettings", function () {
-            // query settings and infotile values
-            $query = "
-                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 = '" . Database::getInstance()->getDatabaseName() . "'
-                           GROUP BY table_schema
-                       ) AS dbsize,
-                       (
-                           SELECT COUNT(*)
-                           FROM tags
-                       ) AS difftagnr,
-                       (
-                           SELECT COUNT(*)
-                           FROM video_tags
-                       ) AS tagsadded,
-                       settings.*
-                FROM settings
-                LIMIT 1
-                ";
-
-            $result = $this->conn->query($query);
-
-            $r = mysqli_fetch_assoc($result);
-            // booleans need to be set manually
-            $r['passwordEnabled'] = $r['password'] != "-1";
-            $r['TMDB_grabbing'] = ($r['TMDB_grabbing'] != '0');
-
-            echo json_encode($r);
-        });
-
-        /**
-         * load initial data for home page load to check if pwd is set
-         */
-        $this->addActionHandler("loadInitialData", function () {
-            $query = "SELECT * from settings";
-
-            $result = $this->conn->query($query);
-
-            $r = mysqli_fetch_assoc($result);
-
-            $r['passwordEnabled'] = $r['password'] != "-1";
-            unset($r['password']);
-            $r['DarkMode'] = (bool)($r['DarkMode'] != '0');
-            $this->commitMessage(json_encode($r));
-        });
-    }
-
-    /**
-     * handle setting stuff to save to db
-     */
-    private function saveToDB() {
-        /**
-         * save changed settings to db
-         */
-        $this->addActionHandler("saveGeneralSettings", function () {
-            $mediacentername = $_POST['mediacentername'];
-            $password = $_POST['password'];
-            $videopath = $_POST['videopath'];
-            $tvshowpath = $_POST['tvshowpath'];
-            $tmdbsupport = $_POST['tmdbsupport'];
-            $darkmodeenabled = $_POST['darkmodeenabled'];
-
-            $query = "UPDATE settings SET 
-                        video_path='$videopath',
-                        episode_path='$tvshowpath',
-                        password='$password',
-                        mediacenter_name='$mediacentername',
-                        TMDB_grabbing=$tmdbsupport, 
-                        DarkMode=$darkmodeenabled
-                    WHERE 1";
-
-            if ($this->conn->query($query) === true) {
-                $this->commitMessage('{"success": true}');
-            } else {
-                $this->commitMessage('{"success": true}');
-            }
-        });
-    }
-
-    /**
-     * methods for handling reindexing and cleanup of db gravity
-     */
-    private function reIndexHandling() {
-        $this->addActionHandler("startReindex", function () {
-            $indexrunning = false;
-            if (file_exists("/tmp/output.log")) {
-
-                $out = file_get_contents("/tmp/output.log");
-                if (substr($out, -strlen("-42")) == "-42") {
-                    unlink("/tmp/output.log");
-                } else {
-                    $indexrunning = true;
-                }
-            }
-
-            if (!$indexrunning) {
-                // start extraction of video previews in background
-
-                $cmd = 'php extractvideopreviews.php';
-                exec(sprintf("%s > %s 2>&1 & echo $! >> %s", $cmd, '/dev/zero', '/tmp/openmediacenterpid'));
-
-                $this->commitMessage('{"success": true}');
-            } else {
-                $this->commitMessage('{"success": false}');
-            }
-        });
-
-        $this->addActionHandler("cleanupGravity", function () {
-            $vp = new VideoParser();
-            $vp->cleanUpGravity();
-        });
-
-        $this->addActionHandler("getStatusMessage", function () {
-            $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;
-            }
-
-            $this->commitMessage(json_encode($return));
-        });
-    }
-}

api/src/handlers/Tags.php

@@ -1,68 +0,0 @@
-<?php
-require_once 'RequestBase.php';
-
-/**
- * Class Tags
- * backend to handle Tag database interactions
- */
-class Tags extends RequestBase {
-    function initHandlers() {
-        $this->addToDB();
-        $this->getFromDB();
-    }
-
-    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));
-        });
-    }
-}

api/src/handlers/Video.php

@@ -1,237 +0,0 @@
-<?php
-require_once __DIR__ . '/../SSettings.php';
-require_once 'RequestBase.php';
-
-/**
- * Class Video
- * backend for all interactions with videoloads and receiving of video infos
- */
-class Video extends RequestBase {
-    private $videopath;
-
-    public function __construct() {
-        $settings = new SSettings();
-        // load video path from settings
-        $this->videopath = $settings->getVideoPath();
-    }
-
-    function initHandlers() {
-        $this->getVideos();
-        $this->loadVideos();
-        $this->addToVideo();
-    }
-
-    /**
-     * function handles load of all videos and search for videos
-     */
-    private function getVideos() {
-        $this->addActionHandler("getMovies", function () {
-            $query = "SELECT movie_id,movie_name FROM videos ORDER BY create_date DESC, movie_name";
-            if (isset($_POST['tag'])) {
-                $tag = $_POST['tag'];
-                // if not all tags allowed filter for specific one
-                if (strtolower($_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, movie_name";
-                }
-            }
-            $result = $this->conn->query($query);
-            $rows = array();
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($rows, $r);
-            }
-
-            $this->commitMessage(json_encode($rows));
-        });
-
-        $this->addActionHandler("getRandomMovies", function () {
-            $return = new stdClass();
-            $query = "SELECT movie_id,movie_name FROM videos ORDER BY RAND() LIMIT " . $_POST['number'];
-            $result = $this->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 = $this->conn->query($query);
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($return->tags, $r);
-            }
-
-            $this->commitMessage(json_encode($return));
-        });
-
-        $this->addActionHandler("getSearchKeyWord", function () {
-            $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";
-            $result = $this->conn->query($query);
-            $rows = array();
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($rows, $r);
-            }
-
-            $this->commitMessage(json_encode($rows));
-        });
-    }
-
-    /**
-     * function to handle stuff for loading specific videos and startdata
-     */
-    private function loadVideos() {
-        $this->addActionHandler("loadVideo", function () {
-            $video_id = $_POST['movieid'];
-
-            $query = "  SELECT movie_name,movie_id,movie_url,thumbnail,poster,likes,quality,length 
-                        FROM videos WHERE movie_id=$video_id";
-
-            $result = $this->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"];
-            // todo drop video url from db -- maybe one with and one without extension
-            // extension hardcoded here!!!
-            $arr["movie_url"] = str_replace("?", "%3F", $this->videopath . $row["movie_name"] . ".mp4");
-            $arr["likes"] = (int)$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=$video_id
-                        GROUP BY t.tag_name";
-            $result = $this->conn->query($query);
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($arr['tags'], $r);
-            }
-
-            // get the random predict tags
-            $arr['suggesttag'] = array();
-            // select 5 random tags which are not selected for current video
-            $query = "SELECT * FROM tags
-                        WHERE tag_id NOT IN (
-                            SELECT video_tags.tag_id FROM video_tags
-                            WHERE video_id=$video_id)
-                        ORDER BY rand()
-                        LIMIT 5";
-            $result = $this->conn->query($query);
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($arr['suggesttag'], $r);
-            }
-
-            $this->commitMessage(json_encode($arr));
-        });
-
-        $this->addActionHandler("readThumbnail", function () {
-            $query = "SELECT thumbnail FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
-
-            $result = $this->conn->query($query);
-            $row = $result->fetch_assoc();
-
-            $this->commitMessage($row["thumbnail"]);
-        });
-
-        $this->addActionHandler("getStartData", function () {
-            $query = "SELECT COUNT(*) as nr FROM videos";
-            $result = $this->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 = $this->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 = $this->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 = $this->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 = $this->conn->query($query);
-            $r = mysqli_fetch_assoc($result);
-            $arr['sd'] = $r['nr'];
-
-            $query = "SELECT COUNT(*) as nr FROM tags";
-            $result = $this->conn->query($query);
-            $r = mysqli_fetch_assoc($result);
-            $arr['tags'] = $r['nr'];
-
-            $this->commitMessage(json_encode($arr));
-        });
-    }
-
-    /**
-     * function to handle api handlers for stuff to add to video or database
-     */
-    private function addToVideo() {
-        $this->addActionHandler("addLike", function () {
-            $movieid = $_POST['movieid'];
-
-            $query = "update videos set likes = likes + 1 where movie_id = '$movieid'";
-
-            if ($this->conn->query($query) === TRUE) {
-                $this->commitMessage('{"result":"success"}');
-            } else {
-                $this->commitMessage('{"result":"' . $this->conn->error . '"}');
-            }
-        });
-
-        $this->addActionHandler("deleteVideo", function () {
-            $movieid = $_POST['movieid'];
-
-            // delete video entry and corresponding tag infos
-            $query = "DELETE FROM videos WHERE movie_id=$movieid";
-
-            if ($this->conn->query($query) === TRUE) {
-                $this->commitMessage('{"result":"success"}');
-            } else {
-                $this->commitMessage('{"result":"' . $this->conn->error . '"}');
-            }
-        });
-    }
-}

api/tags.php

@@ -1,5 +0,0 @@
-<?php
-include_once __DIR__ . '/src/handlers/Tags.php';
-
-$tags = new Tags();
-$tags->handleAction();

api/video.php

@@ -1,5 +0,0 @@
-<?php
-include_once __DIR__ . '/src/handlers/Video.php';
-
-$video = new Video();
-$video->handleAction();

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,105 @@
+package api
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"log"
+	"net/http"
+	"openmediacenter/apiGo/api/oauth"
+)
+
+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", oauth.ValidateToken(videoHandler))
+	http.Handle(APIPREFIX+"/tags", oauth.ValidateToken(tagHandler))
+	http.Handle(APIPREFIX+"/settings", oauth.ValidateToken(settingsHandler))
+	http.Handle(APIPREFIX+"/actor", oauth.ValidateToken(actorHandler))
+
+	// initialize oauth service and add corresponding auth routes
+	oauth.InitOAuth()
+
+	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/oauth/Oauth.go

@@ -0,0 +1,67 @@
+package oauth
+
+import (
+	"gopkg.in/oauth2.v3/errors"
+	"gopkg.in/oauth2.v3/manage"
+	"gopkg.in/oauth2.v3/models"
+	"gopkg.in/oauth2.v3/server"
+	"gopkg.in/oauth2.v3/store"
+	"log"
+	"net/http"
+)
+
+var srv *server.Server
+
+func InitOAuth() {
+	manager := manage.NewDefaultManager()
+	// token store
+	manager.MustTokenStorage(store.NewMemoryTokenStore())
+
+	clientStore := store.NewClientStore()
+	// todo we need to check here if a password is enabled in db -- when yes set it here!
+	clientStore.Set("openmediacenter", &models.Client{
+		ID:     "openmediacenter",
+		Secret: "openmediacenter",
+		Domain: "http://localhost:8081",
+	})
+
+	manager.MapClientStorage(clientStore)
+	srv = server.NewServer(server.NewConfig(), manager)
+	srv.SetClientInfoHandler(server.ClientFormHandler)
+	manager.SetRefreshTokenCfg(manage.DefaultRefreshTokenCfg)
+
+	srv.SetInternalErrorHandler(func(err error) (re *errors.Response) {
+		log.Println("Internal Error:", err.Error())
+		return
+	})
+
+	srv.SetResponseErrorHandler(func(re *errors.Response) {
+		log.Println("Response Error:", re.Error.Error())
+	})
+
+	http.HandleFunc("/authorize", func(w http.ResponseWriter, r *http.Request) {
+		err := srv.HandleAuthorizeRequest(w, r)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusBadRequest)
+		}
+	})
+
+	http.HandleFunc("/token", func(w http.ResponseWriter, r *http.Request) {
+		err := srv.HandleTokenRequest(w, r)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	})
+}
+
+func ValidateToken(f http.HandlerFunc) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		_, err := srv.ValidationBearerToken(r)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusBadRequest)
+			return
+		}
+
+		f.ServeHTTP(w, r)
+	}
+}

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,9 @@
+module openmediacenter/apiGo
+
+go 1.16
+
+require (
+	github.com/go-session/session v3.1.2+incompatible
+	github.com/go-sql-driver/mysql v1.5.0
+	gopkg.in/oauth2.v3 v3.12.0
+)

apiGo/go.sum

@@ -0,0 +1,111 @@
+cloud.google.com/go v0.34.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMTw=
+github.com/ajg/form v1.5.1 h1:t9c7v8JUKu/XxOGBU0yjNpaMloxGEJhUkqFRq0ibGeU=
+github.com/ajg/form v1.5.1/go.mod h1:uL1WgH+h2mgNtvBq0339dVnzXdBETtL2LeUXaIv25UY=
+github.com/davecgh/go-spew v1.1.0 h1:ZDRjVQ15GmhC3fiQ8ni8+OwkZQO4DARzQgrnXU1Liz8=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dgrijalva/jwt-go v3.2.0+incompatible h1:7qlOGliEKZXTDg6OTjfoBKDXWrumCAMpl/TFQ4/5kLM=
+github.com/dgrijalva/jwt-go v3.2.0+incompatible/go.mod h1:E3ru+11k8xSBh+hMPgOLZmtrrCbhqsmaPHjLKYnJCaQ=
+github.com/fasthttp-contrib/websocket v0.0.0-20160511215533-1f3b11f56072/go.mod h1:duJ4Jxv5lDcvg4QuQr0oowTf7dz4/CR8NtyCooz9HL8=
+github.com/fatih/structs v1.1.0 h1:Q7juDM0QtcnhCpeyLGQKyg4TOIghuNXrkL32pHAUMxo=
+github.com/fatih/structs v1.1.0/go.mod h1:9NiDSp5zOcgEDl+j00MP/WkGVPOlPRLejGD8Ga6PJ7M=
+github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMoQvtojpjFo=
+github.com/gavv/httpexpect v2.0.0+incompatible h1:1X9kcRshkSKEjNJJxX9Y9mQ5BRfbxU5kORdjhlA1yX8=
+github.com/gavv/httpexpect v2.0.0+incompatible/go.mod h1:x+9tiU1YnrOvnB725RkpoLv1M62hOWzwo5OXotisrKc=
+github.com/go-session/session v3.1.2+incompatible h1:yStchEObKg4nk2F7JGE7KoFIrA/1Y078peagMWcrncg=
+github.com/go-session/session v3.1.2+incompatible/go.mod h1:8B3iivBQjrz/JtC68Np2T1yBBLxTan3mn/3OM0CyRt0=
+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=
+github.com/golang/protobuf v1.2.0/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
+github.com/google/go-querystring v1.0.0 h1:Xkwi/a1rcvNg1PPYe5vI8GbeBY/jrVuDX5ASuANWTrk=
+github.com/google/go-querystring v1.0.0/go.mod h1:odCYkC5MyYFN7vkCjXpyrEuKhc/BUO6wN/zVPAxq5ck=
+github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1 h1:EGx4pi6eqNxGaHF6qqu48+N2wcFQ5qg5FXgOdqsJ5d8=
+github.com/gopherjs/gopherjs v0.0.0-20181017120253-0766667cb4d1/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY=
+github.com/gorilla/websocket v1.4.1 h1:q7AeDBpnBk8AogcD4DSag/Ukw/KV+YhzLj2bP5HvKCM=
+github.com/gorilla/websocket v1.4.1/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+github.com/hpcloud/tail v1.0.0/go.mod h1:ab1qPbhIpdTxEkNHXyeSf5vhxWSCs/tWer42PpOxQnU=
+github.com/imkira/go-interpol v1.1.0 h1:KIiKr0VSG2CUW1hl1jpiyuzuJeKUUpC8iM1AIE7N1Vk=
+github.com/imkira/go-interpol v1.1.0/go.mod h1:z0h2/2T3XF8kyEPpRgJ3kmNv+C43p+I/CoI+jC3w2iA=
+github.com/jtolds/gls v4.20.0+incompatible h1:xdiiI2gbIgH/gLH7ADydsJ1uDOEzR8yvV7C0MuV77Wo=
+github.com/jtolds/gls v4.20.0+incompatible/go.mod h1:QJZ7F/aHp+rZTRtaJ1ow/lLfFfVYBRgL+9YlvaHOwJU=
+github.com/k0kubun/colorstring v0.0.0-20150214042306-9440f1994b88/go.mod h1:3w7q1U84EfirKl04SVQ/s7nPm1ZPhiXd34z40TNz36k=
+github.com/klauspost/compress v1.8.2 h1:Bx0qjetmNjdFXASH02NSAREKpiaDwkO1DRZ3dV2KCcs=
+github.com/klauspost/compress v1.8.2/go.mod h1:RyIbtBH6LamlWaDj8nUwkbUhJ87Yi3uG0guNDohfE1A=
+github.com/klauspost/cpuid v1.2.1 h1:vJi+O/nMdFt0vqm8NZBI6wzALWdA2X+egi0ogNyrC/w=
+github.com/klauspost/cpuid v1.2.1/go.mod h1:Pj4uuM528wm8OyEC2QMXAi2YiTZ96dNQPGgoMS4s3ek=
+github.com/mattn/go-colorable v0.1.4/go.mod h1:U0ppj6V5qS13XJ6of8GYAs25YV2eR4EVcfRqFIhoBtE=
+github.com/mattn/go-isatty v0.0.8/go.mod h1:Iq45c/XA43vh69/j3iqttzPXn0bhXyGjM0Hdxcsrc5s=
+github.com/moul/http2curl v1.0.0 h1:dRMWoAtb+ePxMlLkrCbAqh4TlPHXvoGUSQ323/9Zahs=
+github.com/moul/http2curl v1.0.0/go.mod h1:8UbvGypXm98wA/IqH45anm5Y2Z6ep6O31QGOAZ3H0fQ=
+github.com/onsi/ginkgo v1.6.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
+github.com/onsi/ginkgo v1.10.2/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
+github.com/onsi/gomega v1.7.0/go.mod h1:ex+gbHU/CVuBBDIJjb2X0qEXbFg53c61hWP/1CpauHY=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/sergi/go-diff v1.0.0 h1:Kpca3qRNrduNnOQeazBd0ysaKrUJiIuISHxogkT9RPQ=
+github.com/sergi/go-diff v1.0.0/go.mod h1:0CfEIISq7TuYL3j771MWULgwwjU+GofnZX9QAmXWZgo=
+github.com/smartystreets/assertions v0.0.0-20180927180507-b2de0cb4f26d h1:zE9ykElWQ6/NYmHa3jpm/yHnI4xSofP+UP6SpjHcSeM=
+github.com/smartystreets/assertions v0.0.0-20180927180507-b2de0cb4f26d/go.mod h1:OnSkiWE9lh6wB0YB77sQom3nweQdgAjqCqsofrRNTgc=
+github.com/smartystreets/goconvey v1.6.4 h1:fv0U8FUIMPNf1L9lnHLvLhgicrIVChEkdzIKYqbNC9s=
+github.com/smartystreets/goconvey v1.6.4/go.mod h1:syvi0/a8iFYH4r/RixwvyeAJjdLS9QV7WQ/tjFTllLA=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
+github.com/stretchr/testify v1.4.0 h1:2E4SXV/wtOkTonXsotYi4li6zVWxYlZuYNCXe9XRJyk=
+github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
+github.com/tidwall/btree v0.0.0-20170113224114-9876f1454cf0 h1:QnyrPZZvPmR0AtJCxxfCtI1qN+fYpKTKJ/5opWmZ34k=
+github.com/tidwall/btree v0.0.0-20170113224114-9876f1454cf0/go.mod h1:huei1BkDWJ3/sLXmO+bsCNELL+Bp2Kks9OLyQFkzvA8=
+github.com/tidwall/buntdb v1.1.0 h1:H6LzK59KiNjf1nHVPFrYj4Qnl8d8YLBsYamdL8N+Bao=
+github.com/tidwall/buntdb v1.1.0/go.mod h1:Y39xhcDW10WlyYXeLgGftXVbjtM0QP+/kpz8xl9cbzE=
+github.com/tidwall/gjson v1.3.2 h1:+7p3qQFaH3fOMXAJSrdZwGKcOO/lYdGS0HqGhPqDdTI=
+github.com/tidwall/gjson v1.3.2/go.mod h1:P256ACg0Mn+j1RXIDXoss50DeIABTYK1PULOJHhxOls=
+github.com/tidwall/grect v0.0.0-20161006141115-ba9a043346eb h1:5NSYaAdrnblKByzd7XByQEJVT8+9v0W/tIY0Oo4OwrE=
+github.com/tidwall/grect v0.0.0-20161006141115-ba9a043346eb/go.mod h1:lKYYLFIr9OIgdgrtgkZ9zgRxRdvPYsExnYBsEAd8W5M=
+github.com/tidwall/match v1.0.1 h1:PnKP62LPNxHKTwvHHZZzdOAOCtsJTjo6dZLCwpKm5xc=
+github.com/tidwall/match v1.0.1/go.mod h1:LujAq0jyVjBy028G1WhWfIzbpQfMO8bBZ6Tyb0+pL9E=
+github.com/tidwall/pretty v1.0.0 h1:HsD+QiTn7sK6flMKIvNmpqz1qrpP3Ps6jOKIKMooyg4=
+github.com/tidwall/pretty v1.0.0/go.mod h1:XNkn88O1ChpSDQmQeStsy+sBenx6DDtFZJxhVysOjyk=
+github.com/tidwall/rtree v0.0.0-20180113144539-6cd427091e0e h1:+NL1GDIUOKxVfbp2KoJQD9cTQ6dyP2co9q4yzmT9FZo=
+github.com/tidwall/rtree v0.0.0-20180113144539-6cd427091e0e/go.mod h1:/h+UnNGt0IhNNJLkGikcdcJqm66zGD/uJGMRxK/9+Ao=
+github.com/tidwall/tinyqueue v0.0.0-20180302190814-1e39f5511563 h1:Otn9S136ELckZ3KKDyCkxapfufrqDqwmGjcHfAyXRrE=
+github.com/tidwall/tinyqueue v0.0.0-20180302190814-1e39f5511563/go.mod h1:mLqSmt7Dv/CNneF2wfcChfN1rvapyQr01LGKnKex0DQ=
+github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
+github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
+github.com/valyala/fasthttp v1.6.0 h1:uWF8lgKmeaIewWVPwi4GRq2P6+R46IgYZdxWtM+GtEY=
+github.com/valyala/fasthttp v1.6.0/go.mod h1:FstJa9V+Pj9vQ7OJie2qMHdwemEDaDiSdBnvPM1Su9w=
+github.com/valyala/tcplisten v0.0.0-20161114210144-ceec8f93295a/go.mod h1:v3UYOV9WzVtRmSR+PDvWpU/qWl4Wa5LApYYX4ZtKbio=
+github.com/xeipuuv/gojsonpointer v0.0.0-20180127040702-4e3ac2762d5f h1:J9EGpcZtP0E/raorCMxlFGSTBrsSlaDGf3jU/qvAE2c=
+github.com/xeipuuv/gojsonpointer v0.0.0-20180127040702-4e3ac2762d5f/go.mod h1:N2zxlSyiKSe5eX1tZViRH5QA0qijqEDrYZiPEAiq3wU=
+github.com/xeipuuv/gojsonreference v0.0.0-20180127040603-bd5ef7bd5415 h1:EzJWgHovont7NscjpAxXsDA8S8BMYve8Y5+7cuRE7R0=
+github.com/xeipuuv/gojsonreference v0.0.0-20180127040603-bd5ef7bd5415/go.mod h1:GwrjFmJcFw6At/Gs6z4yjiIwzuJ1/+UwLxMQDVQXShQ=
+github.com/xeipuuv/gojsonschema v1.2.0 h1:LhYJRs+L4fBtjZUfuSZIKGeVu0QRy8e5Xi7D17UxZ74=
+github.com/xeipuuv/gojsonschema v1.2.0/go.mod h1:anYRn/JVcOK2ZgGU+IjEV4nwlhoK5sQluxsYJ78Id3Y=
+github.com/yalp/jsonpath v0.0.0-20180802001716-5cc68e5049a0 h1:6fRhSjgLCkTD3JnJxvaJ4Sj+TYblw757bqYgZaOq5ZY=
+github.com/yalp/jsonpath v0.0.0-20180802001716-5cc68e5049a0/go.mod h1:/LWChgwKmvncFJFHJ7Gvn9wZArjbV5/FppcK2fKk/tI=
+github.com/yudai/gojsondiff v1.0.0 h1:27cbfqXLVEJ1o8I6v3y9lg8Ydm53EKqHXAOMxEGlCOA=
+github.com/yudai/gojsondiff v1.0.0/go.mod h1:AY32+k2cwILAkW1fbgxQ5mUmMiZFgLIV+FBNExI05xg=
+github.com/yudai/golcs v0.0.0-20170316035057-ecda9a501e82 h1:BHyfKlQyqbsFN5p3IfnEUduWvb9is428/nNb5L3U01M=
+github.com/yudai/golcs v0.0.0-20170316035057-ecda9a501e82/go.mod h1:lgjkn3NuSvDfVJdfcVVdX+jpBxNmX4rDAzaS45IcYoM=
+github.com/yudai/pp v2.0.1+incompatible/go.mod h1:PuxR/8QJ7cyCkFp/aUDS+JY727OFEZkTdatxwunjIkc=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20180906233101-161cd47e91fd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20190108225652-1e06a53dbb7e/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20190311183353-d8887717615a/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/net v0.0.0-20190827160401-ba9fcec4b297 h1:k7pJ2yAPLPgbskkFdhRCsA77k2fySZ1zf2zCjvQCiIM=
+golang.org/x/net v0.0.0-20190827160401-ba9fcec4b297/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
+golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20181221193216-37e7f081c4d4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sys v0.0.0-20180909124046-d0be0721c37e/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20190222072716-a9d3bda3a223/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
+golang.org/x/tools v0.0.0-20190328211700-ab21143f2384/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
+google.golang.org/appengine v1.4.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7/EB5XEv4=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/fsnotify.v1 v1.4.7/go.mod h1:Tz8NjZHkW78fSQdbUxIjBTcgA1z1m8ZHf0WmKUhAMys=
+gopkg.in/oauth2.v3 v3.12.0 h1:yOffAPoolH/i2JxwmC+pgtnY3362iPahsDpLXfDFvNg=
+gopkg.in/oauth2.v3 v3.12.0/go.mod h1:XEYgKqWX095YiPT+Aw5y3tCn+7/FMnlTFKrupgSiJ3I=
+gopkg.in/tomb.v1 v1.0.0-20141024135613-dd632973f1e7/go.mod h1:dt/ZhP58zS4L8KSrWDmTeBkI65Dw0HsyUHuEVlX15mw=
+gopkg.in/yaml.v2 v2.2.1/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
+gopkg.in/yaml.v2 v2.2.2 h1:ZCJp+EgiOT7lHqUV2J862kp8Qj64Jo6az82+3Td9dZw=
+gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=

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,
@@ -30,15 +65,6 @@ create table if not exists video_tags
             on delete cascade
 );
 
-create table if not exists settings
-(
-    video_path       varchar(255)                          null,
-    episode_path     varchar(255)                          null,
-    password         varchar(32) default '-1'              null,
-    mediacenter_name varchar(32) default 'OpenMediaCenter' null,
-    TMDB_grabbing    tinyint           null,
-    DarkMode         tinyint default 0 null
-);
 
 INSERT IGNORE INTO tags (tag_id, tag_name)
 VALUES (2, 'fullhd');

deb/OpenMediaCenter/DEBIAN/control

@@ -1,5 +1,5 @@
 Package: OpenMediaCenter
-Depends: nginx, php-fpm, php-mysqli, mariadb-server
+Depends: nginx, mariadb-server, mediainfo
 Section: web
 Priority: optional
 Architecture: all

deb/OpenMediaCenter/DEBIAN/postinst

@@ -2,20 +2,6 @@
 # enable nginx site
 ln -sf /etc/nginx/sites-available/OpenMediaCenter.conf /etc/nginx/sites-enabled/OpenMediaCenter.conf
 
-# link general socket to current one
-phpsymlink="/var/run/php/php-fpm.sock";
-
-# create a gneral symlink to the php socket if not already existing
-if [ -L ${phpsymlink} ] ; then
-   if [ -e ${phpsymlink} ] ; then
-      echo "general php symlink already exists."
-   else
-      ln -sf /var/run/php/php*.*-fpm.sock /var/run/php/php-fpm.sock
-   fi
-else
-   ln -sf /var/run/php/php*.*-fpm.sock /var/run/php/php-fpm.sock
-fi
-
 # 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';"
@@ -31,6 +17,5 @@ chown -R www-data:www-data /var/www/openmediacenter
 # restart services
 systemctl restart nginx
 
-# trigger a movie reindex
+systemctl enable OpenMediaCenter.service
-php /var/www/openmediacenter/api/extractvideopreviews.php
+systemctl start OpenMediaCenter.service
-rm /tmp/output.log

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

@@ -2,12 +2,6 @@ server {
     listen 8080 default_server;
     listen [::]:8080 default_server;
 
-    location ~ \.php$ {
-        include snippets/fastcgi-php.conf;
-
-        fastcgi_pass unix:/var/run/php/php-fpm.sock;
-    }
-
     root /var/www/openmediacenter;
 
     index index.html;
@@ -16,6 +10,10 @@ server {
     error_log /var/log/nginx/openmediacenter.error.log;
 
     location / {
-        try_files $uri $uri/ =404;
+        try_files $uri /index.html;
+    }
+
+    location ~* ^/(api/|token) {
+        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,25 +1,31 @@
 {
   "name": "openmediacenter",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
+  "main": "public/electron.js",
+  "author": {
+    "email": "lukas.heiligenbrunner@gmail.com",
+    "name": "Lukas Heiligenbrunner",
+    "url": "https://heili.eu"
+  },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@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.11",
+    "@fortawesome/react-fontawesome": "^0.1.13",
     "bootstrap": "^4.5.3",
-    "plyr-react": "^2.2.0",
+    "plyr-react": "^3.0.7",
-    "react": "^16.14.0",
+    "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.1",
-    "react-scripts": "^3.4.4"
+    "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",
+    "test": "CI=true react-scripts test --reporters=jest-junit --verbose --silent --coverage --reporters=default"
-    "coverage": "react-scripts test --coverage --watchAll=false",
-    "eject": "react-scripts eject"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -31,10 +37,24 @@
       "text-summary"
     ]
   },
-  "proxy": "http://192.168.0.42:8080",
+  "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": [
@@ -49,11 +69,18 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^9.5.0",
+    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^7.2.1",
+    "@testing-library/user-event": "^12.6.0",
+    "@types/jest": "^26.0.19",
+    "@types/node": "^14.14.31",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
+    "@types/react-router": "5.1.12",
+    "@types/react-router-dom": "^5.1.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
-    "jest-junit": "^10.0.0"
+    "jest-junit": "^12.0.0",
+    "react-scripts": "4.0.3"
   }
 }

src/App.js

@@ -1,144 +0,0 @@
-import React from 'react';
-import HomePage from './pages/HomePage/HomePage';
-import RandomPage from './pages/RandomPage/RandomPage';
-import GlobalInfos from './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';
-
-/**
- * The main App handles the main tabs and which content to show
- */
-class App extends React.Component {
-    newElement = null;
-
-    constructor(props, context) {
-        super(props, context);
-        this.state = {
-            page: 'default',
-            generalSettingsLoaded: false,
-            passwordsupport: null,
-            mediacentername: 'OpenMediaCenter'
-        };
-
-        // bind this to the method for being able to call methods such as this.setstate
-        this.changeRootElement = this.changeRootElement.bind(this);
-        this.returnToLastElement = this.returnToLastElement.bind(this);
-    }
-
-    componentDidMount() {
-        const updateRequest = new FormData();
-        updateRequest.append('action', 'loadInitialData');
-
-        fetch('/api/settings.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json()
-                .then((result) => {
-                    // set theme
-                    GlobalInfos.enableDarkTheme(result.DarkMode);
-
-                    this.setState({
-                        generalSettingsLoaded: true,
-                        passwordsupport: result.passwordEnabled,
-                        mediacentername: result.mediacenter_name
-                    });
-                    // set tab title to received mediacenter name
-                    document.title = result.mediacenter_name;
-                }));
-    }
-
-    /**
-     * create a viewbinding to call APP functions from child elements
-     * @returns a set of callback functions
-     */
-    constructViewBinding() {
-        return {
-            changeRootElement: this.changeRootElement,
-            returnToLastElement: this.returnToLastElement
-        };
-    }
-
-    /**
-     * load the selected component into the main view
-     * @returns {JSX.Element} body element of selected page
-     */
-    MainBody() {
-        let page;
-        if (this.state.page === 'default') {
-            page = <HomePage viewbinding={this.constructViewBinding()}/>;
-            this.mypage = page;
-        } else if (this.state.page === 'random') {
-            page = <RandomPage viewbinding={this.constructViewBinding()}/>;
-            this.mypage = page;
-        } else if (this.state.page === 'settings') {
-            page = <SettingsPage/>;
-            this.mypage = page;
-        } else if (this.state.page === 'categories') {
-            page = <CategoryPage viewbinding={this.constructViewBinding()}/>;
-            this.mypage = page;
-        } else if (this.state.page === 'video') {
-            // show videoelement if neccessary
-            page = this.newElement;
-
-            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() {
-        const themeStyle = GlobalInfos.getThemeStyle();
-        // add the main theme to the page body
-        document.body.className = themeStyle.backgroundcolor;
-        return (
-            <div className={style.app}>
-                <div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
-                    <div className={style.navbrand}>{this.state.mediacentername}</div>
-
-                    <div className={[style.navitem, themeStyle.navitem, this.state.page === 'default' ? style.navitemselected : {}].join(' ')}
-                         onClick={() => this.setState({page: 'default'})}>Home
-                    </div>
-                    <div className={[style.navitem, themeStyle.navitem, this.state.page === 'random' ? style.navitemselected : {}].join(' ')}
-                         onClick={() => this.setState({page: 'random'})}>Random Video
-                    </div>
-                    <div className={[style.navitem, themeStyle.navitem, this.state.page === 'categories' ? style.navitemselected : {}].join(' ')}
-                         onClick={() => this.setState({page: 'categories'})}>Categories
-                    </div>
-                    <div className={[style.navitem, themeStyle.navitem, this.state.page === 'settings' ? style.navitemselected : {}].join(' ')}
-                         onClick={() => this.setState({page: 'settings'})}>Settings
-                    </div>
-                </div>
-                {this.state.generalSettingsLoaded ? this.MainBody() : 'loading'}
-            </div>
-        );
-    }
-
-    /**
-     * render a new root element into the main body
-     */
-    changeRootElement(element) {
-        this.newElement = element;
-
-        this.setState({
-            page: 'video'
-        });
-    }
-
-    /**
-     * return from page to the previous page before a change
-     */
-    returnToLastElement() {
-        this.setState({
-            page: 'lastpage'
-        });
-    }
-}
-
-export default App;

src/App.module.css

@@ -16,6 +16,7 @@
 
 .navitem:hover {
     opacity: 1;
+    text-decoration: none;
     transition: opacity .5s;
 }
 

src/App.test.js

@@ -18,71 +18,6 @@ describe('<App/>', function () {
         expect(wrapper.find('.navitem')).toHaveLength(4);
     });
 
-    it('simulate video view change ', function () {
-        const wrapper = shallow(<App/>);
-        wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
-
-        wrapper.instance().changeRootElement(<div id='testit'/>);
-
-        expect(wrapper.find('#testit')).toHaveLength(1);
-    });
-
-    it('test hide video again', function () {
-        const wrapper = shallow(<App/>);
-        wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
-
-        wrapper.instance().changeRootElement(<div id='testit'/>);
-
-        expect(wrapper.find('#testit')).toHaveLength(1);
-
-        wrapper.instance().returnToLastElement();
-
-        expect(wrapper.find('HomePage')).toHaveLength(1);
-    });
-
-    it('test fallback to last loaded page', function () {
-        const wrapper = shallow(<App/>);
-        wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
-
-        wrapper.find('.navitem').findWhere(t => t.text() === 'Random Video' && t.type() === 'div').simulate('click');
-
-        wrapper.instance().changeRootElement(<div id='testit'/>);
-
-        expect(wrapper.find('#testit')).toHaveLength(1);
-
-        wrapper.instance().returnToLastElement();
-
-        expect(wrapper.find('RandomPage')).toHaveLength(1);
-    });
-
-    it('test home click', function () {
-        const wrapper = shallow(<App/>);
-        wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
-
-        wrapper.setState({page: 'wrongvalue'});
-        expect(wrapper.find('HomePage')).toHaveLength(0);
-        wrapper.find('.navitem').findWhere(t => t.text() === 'Home' && t.type() === 'div').simulate('click');
-        expect(wrapper.find('HomePage')).toHaveLength(1);
-    });
-
-    it('test category click', function () {
-        const wrapper = shallow(<App/>);
-        wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
-
-        expect(wrapper.find('CategoryPage')).toHaveLength(0);
-        wrapper.find('.navitem').findWhere(t => t.text() === 'Categories' && t.type() === 'div').simulate('click');
-        expect(wrapper.find('CategoryPage')).toHaveLength(1);
-    });
-
-    it('test settings click', function () {
-        const wrapper = shallow(<App/>);
-        wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
-
-        expect(wrapper.find('SettingsPage')).toHaveLength(0);
-        wrapper.find('.navitem').findWhere(t => t.text() === 'Settings' && t.type() === 'div').simulate('click');
-        expect(wrapper.find('SettingsPage')).toHaveLength(1);
-    });
-
     it('test initial fetch from api', done => {
         global.fetch = global.prepareFetchApi({
             generalSettingsLoaded: true,

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

@@ -22,6 +22,14 @@
     background: white;
 }
 
+.navitem {
+    color: white;
+}
+
+.navitem:hover {
+    color: white;
+}
+
 .hrcolor {
     border-color: rgba(255, 255, 255, .1);
 }

src/AppLightTheme.module.css

@@ -2,6 +2,14 @@
  * The coloring elements for light theme
  */
 
+.navitem {
+    color: black;
+}
+
+.navitem:hover {
+    color: black;
+}
+
 .navitem::after {
     background: black;
 }

src/GlobalInfos.js

@@ -1,37 +0,0 @@
-import darktheme from './AppDarkTheme.module.css';
-import lighttheme from './AppLightTheme.module.css';
-
-/**
- * This class is available for all components in project
- * it contains general infos about app - like theme
- */
-class StaticInfos {
-    #darktheme = true;
-
-    /**
-     * check if the current theme is the dark theme
-     * @returns {boolean} is dark theme?
-     */
-    isDarkTheme() {
-        return this.#darktheme;
-    };
-
-    /**
-     * setter to enable or disable the dark or light theme
-     * @param enable enable the dark theme?
-     */
-    enableDarkTheme(enable = true) {
-        this.#darktheme = enable;
-    }
-
-    /**
-     * get the currently selected theme stylesheet
-     * @returns {*} the style object of the current active theme
-     */
-    getThemeStyle() {
-        return this.isDarkTheme() ? darktheme : lighttheme;
-    }
-}
-
-const GlobalInfos = new StaticInfos();
-export default GlobalInfos;

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,19 @@
+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()}/>);
+
+        wrapper.simulate('click');
+
+        expect(func).toBeCalledTimes(1);
+    });
+});

src/elements/ActorTile/ActorTile.tsx

@@ -0,0 +1,47 @@
+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>
+            );
+        }
+    }
+
+    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,157 +0,0 @@
-import React from 'react';
-import ReactDom from 'react-dom';
-import style from './AddTagPopup.module.css';
-import Tag from '../Tag/Tag';
-import {Line} from '../PageTitle/PageTitle';
-import GlobalInfos from '../../GlobalInfos';
-
-/**
- * component creates overlay to add a new tag to a video
- */
-class AddTagPopup extends React.Component {
-    /// instance of root element
-    element;
-
-    constructor(props, context) {
-        super(props, context);
-
-        this.state = {items: []};
-        this.handleClickOutside = this.handleClickOutside.bind(this);
-        this.keypress = this.keypress.bind(this);
-
-        this.props = props;
-    }
-
-    componentDidMount() {
-        document.addEventListener('click', this.handleClickOutside);
-        document.addEventListener('keyup', this.keypress);
-
-        // add element drag drop events
-        if (this.element != null) {
-            this.dragElement();
-        }
-
-        const updateRequest = new FormData();
-        updateRequest.append('action', 'getAllTags');
-
-        fetch('/api/tags.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json())
-            .then((result) => {
-                this.setState({
-                    items: result
-                });
-            });
-    }
-
-    componentWillUnmount() {
-        // remove the appended listeners
-        document.removeEventListener('click', this.handleClickOutside);
-        document.removeEventListener('keyup', this.keypress);
-    }
-
-    render() {
-        const themeStyle = GlobalInfos.getThemeStyle();
-        return (
-            <div className={[style.popup, themeStyle.thirdbackground].join(' ')} ref={el => this.element = el}>
-                <div className={[style.header, themeStyle.textcolor].join(' ')}>Add a Tag to this Video:</div>
-                <Line/>
-                <div className={style.content}>
-                    {this.state.items ?
-                        this.state.items.map((i) => (
-                            <Tag onclick={() => {
-                                this.addTag(i.tag_id, i.tag_name);
-                            }}>{i.tag_name}</Tag>
-                        )) : null}
-                </div>
-            </div>
-        );
-    }
-
-    /**
-     * Alert if clicked on outside of element
-     */
-    handleClickOutside(event) {
-        const domNode = ReactDom.findDOMNode(this);
-
-        if (!domNode || !domNode.contains(event.target)) {
-            this.props.onHide();
-        }
-    }
-
-    /**
-     * key event handling
-     * @param event keyevent
-     */
-    keypress(event) {
-        // hide if escape is pressed
-        if (event.key === 'Escape') {
-            this.props.onHide();
-        }
-    }
-
-    /**
-     * add a new tag to this video
-     * @param tagid tag id to add
-     * @param tagname tag name to add
-     */
-    addTag(tagid, tagname) {
-        console.log(this.props);
-        const updateRequest = new FormData();
-        updateRequest.append('action', 'addTag');
-        updateRequest.append('id', tagid);
-        updateRequest.append('movieid', this.props.movie_id);
-
-        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);
-                    } else {
-                        this.props.submit(tagid, tagname);
-                    }
-                    this.props.onHide();
-                }));
-    }
-
-    /**
-     * make the element drag and droppable
-     */
-    dragElement() {
-        let xOld = 0, yOld = 0;
-
-        const elmnt = this.element;
-        elmnt.firstChild.onmousedown = dragMouseDown;
-
-
-        function dragMouseDown(e) {
-            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) {
-            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:
-            elmnt.style.top = (elmnt.offsetTop - dy) + 'px';
-            elmnt.style.left = (elmnt.offsetLeft - dx) + 'px';
-        }
-
-        function closeDragElement() {
-            // stop moving when mouse button is released:
-            document.onmouseup = null;
-            document.onmousemove = null;
-        }
-    }
-}
-
-export default AddTagPopup;

src/elements/AddTagPopup/AddTagPopup.test.js

@@ -1,81 +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 tag insertion', function () {
-        const wrapper = shallow(<AddTagPopup/>);
-        wrapper.setState({
-            items: [{tag_id: 1, tag_name: 'test'}, {tag_id: 2, tag_name: '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/>);
-        wrapper.instance().addTag = jest.fn();
-
-        wrapper.setState({
-            items: [{tag_id: 1, tag_name: 'test'}]
-        }, () => {
-            wrapper.find('Tag').first().dive().simulate('click');
-            expect(wrapper.instance().addTag).toHaveBeenCalledTimes(1);
-        });
-    });
-
-    it('test addtag', done => {
-        const wrapper = shallow(<AddTagPopup/>);
-
-        global.fetch = prepareFetchApi({result: 'success'});
-
-        wrapper.setProps({
-            submit: jest.fn(() => {}),
-            onHide: jest.fn()
-        }, () => {
-            wrapper.instance().addTag(1, 'test');
-
-            expect(global.fetch).toHaveBeenCalledTimes(1);
-        });
-
-        process.nextTick(() => {
-            expect(wrapper.instance().props.submit).toHaveBeenCalledTimes(1);
-            expect(wrapper.instance().props.onHide).toHaveBeenCalledTimes(1);
-
-            global.fetch.mockClear();
-            done();
-        });
-    });
-
-    it('test failing addTag', done => {
-        const wrapper = shallow(<AddTagPopup/>);
-
-        global.fetch = prepareFetchApi({result: 'fail'});
-
-        wrapper.setProps({
-            submit: jest.fn(() => {}),
-            onHide: jest.fn()
-        }, () => {
-            wrapper.instance().addTag(1, 'test');
-
-            expect(global.fetch).toHaveBeenCalledTimes(1);
-        });
-
-        process.nextTick(() => {
-            expect(wrapper.instance().props.submit).toHaveBeenCalledTimes(0);
-            expect(wrapper.instance().props.onHide).toHaveBeenCalledTimes(1);
-
-            global.fetch.mockClear();
-            done();
-        });
-    });
-});

src/elements/FilterButton/FilterButton.test.js

@@ -0,0 +1,64 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import FilterButton from './FilterButton';
+import RandomPage from "../../pages/RandomPage/RandomPage";
+import {callAPI} from "../../utils/Api";
+
+describe('<FilterButton/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<FilterButton onFilterChange={() => {}}/>);
+        wrapper.unmount();
+    });
+
+    it('test initial render ', function () {
+        const wrapper = shallow(<FilterButton onFilterChange={() => {}}/>);
+        expect(wrapper.find('input')).toHaveLength(0);
+    });
+
+    it('test clicking', function () {
+        const wrapper = shallow(<FilterButton onFilterChange={() => {}}/>);
+        wrapper.simulate('click');
+
+        expect(wrapper.find('input')).toHaveLength(1);
+    });
+
+    it('test call of callback on textfield change', function () {
+        let val = '';
+        const func = jest.fn((vali => {val = vali}));
+
+        const wrapper = shallow(<FilterButton onFilterChange={func}/>);
+        wrapper.simulate('click');
+
+        wrapper.find('input').simulate('change', {target: {value: 'test'}});
+
+        expect(func).toHaveBeenCalledTimes(1);
+        expect(val).toBe('test')
+    });
+
+    it('test closing on x button click', function () {
+        const wrapper = shallow(<FilterButton onFilterChange={() => {}}/>);
+        wrapper.simulate('click');
+
+        expect(wrapper.find('input')).toHaveLength(1);
+
+        wrapper.find('Button').simulate('click');
+
+        expect(wrapper.find('input')).toHaveLength(0);
+    });
+
+    it('test shortkey press', function () {
+        let events = [];
+        document.addEventListener = jest.fn((event, cb) => {
+            events[event] = cb;
+        });
+
+        shallow(<RandomPage/>);
+
+        const wrapper = shallow(<FilterButton onFilterChange={() => {}}/>);
+        expect(wrapper.find('input')).toHaveLength(0);
+        // trigger the keypress event
+        events.keyup({key: 'f'});
+
+        expect(wrapper.find('input')).toHaveLength(1);
+    });
+});

src/elements/FilterButton/FilterButton.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import style from "../Popups/AddActorPopup/AddActorPopup.module.css";
+import {Button} from "../GPElements/Button";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faFilter, faTimes} from "@fortawesome/free-solid-svg-icons";
+import {addKeyHandler, removeKeyHandler} from "../../utils/ShortkeyHandler";
+
+interface props {
+    onFilterChange: (filter: string) => void
+}
+
+interface state {
+    filtervisible: boolean;
+    filter: string;
+}
+
+class FilterButton 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 = {
+            filtervisible: false,
+            filter: ''
+        }
+
+        this.keypress = this.keypress.bind(this);
+        this.enableFilterField = this.enableFilterField.bind(this);
+    }
+
+    componentWillUnmount(): void {
+        removeKeyHandler(this.keypress);
+    }
+
+    componentDidMount(): void {
+        addKeyHandler(this.keypress);
+    }
+
+    render(): JSX.Element {
+        if (this.state.filtervisible) {
+            return (
+                <>
+                    <input className={'form-control mr-sm-2 ' + style.searchinput}
+                           type='text' placeholder='Filter' value={this.state.filter}
+                           onChange={(e): void => {
+                               this.props.onFilterChange(e.target.value);
+                               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});
+                    }}/>
+                </>
+            );
+        } else {
+            return (<Button
+                title={<span>Filter <FontAwesomeIcon
+                    style={{
+                        verticalAlign: 'middle',
+                        lineHeight: '130px'
+                    }}
+                    icon={faFilter}
+                    size='1x'/></span>}
+                color={{backgroundColor: 'cornflowerblue', color: 'white'}}
+                onClick={this.enableFilterField}/>)
+        }
+    }
+
+    /**
+     * enable filterfield and focus into searchbar
+     */
+    private enableFilterField(): void {
+        this.setState({filtervisible: true}, () => {
+            // focus filterfield after state update
+            this.filterfield?.focus();
+        });
+    }
+
+    /**
+     * key event handling
+     * @param event keyevent
+     */
+    private keypress(event: KeyboardEvent): void {
+        // hide if escape is pressed
+        if (event.key === 'f') {
+            this.enableFilterField();
+        }
+    }
+}
+
+export default FilterButton;

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.tsx

@@ -2,14 +2,23 @@ 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 {
+class InfoHeaderItem extends React.Component<props> {
-    render() {
+    render(): JSX.Element {
         return (
-            <div onClick={() => {
+            <div onClick={(): void => {
                 // call clicklistener if defined
                 if (this.props.onClick != null) this.props.onClick();
             }} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}>

src/elements/NewTagPopup/NewTagPopup.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import Modal from 'react-bootstrap/Modal';
-import {Form} from 'react-bootstrap';
-
-/**
- * creates modal overlay to define a new Tag
- */
-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>
-            </>
-        );
-    }
-
-    /**
-     * store the filled in form to the backend
-     */
-    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.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import PageTitle from './PageTitle';
+import PageTitle, {Line} from './PageTitle';
 
 describe('<Preview/>', function () {
     it('renders without crashing ', function () {
@@ -29,3 +29,10 @@ describe('<Preview/>', function () {
     });
 });
 
+describe('<Line/>', () => {
+    it('renders without crashing', function () {
+        const wrapper = shallow(<Line/>);
+        wrapper.unmount();
+    });
+});
+

src/elements/PageTitle/PageTitle.tsx

@@ -1,12 +1,17 @@
 import React from 'react';
 import style from './PageTitle.module.css';
-import GlobalInfos from '../../GlobalInfos';
+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 {
+class PageTitle extends React.Component<props> {
-    render() {
+    render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
@@ -26,7 +31,7 @@ class PageTitle extends React.Component {
  * use this for horizontal lines to use the current active theming
  */
 export class Line extends React.Component {
-    render() {
+    render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <>

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,146 @@
+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 FilterButton from "../../FilterButton/FilterButton";
+
+interface props {
+    onHide: () => void;
+    movie_id: number;
+}
+
+interface state {
+    contentDefault: boolean;
+    actors: ActorType[];
+    filter: string;
+}
+
+/**
+ * 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: ''
+        };
+
+        this.tileClickHandler = this.tileClickHandler.bind(this);
+        this.filterSearch = this.filterSearch.bind(this);
+        this.parentSubmit = this.parentSubmit.bind(this);
+    }
+    componentDidMount(): void {
+        // 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}>
+                        <FilterButton onFilterChange={(filter): void => {
+                            this.setState({filter: filter})
+                        }}/>
+                    </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});
+        });
+    }
+
+    /**
+     * 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]);
+        }
+    }
+}
+
+export default AddActorPopup;

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

@@ -0,0 +1,3 @@
+.actionbar{
+    margin-bottom: 15px;
+}

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

@@ -0,0 +1,61 @@
+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: [{TagId: 1, TagName: 'test'}]
+        }, () => {
+            wrapper.find('Tag').first().dive().simulate('click');
+            expect(wrapper.instance().props.submit).toHaveBeenCalledTimes(1);
+            expect(wrapper.instance().props.onHide).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    it('test parent submit if one item left', function () {
+        const onhide = jest.fn();
+        const submit = jest.fn();
+
+        const wrapper = shallow(<AddTagPopup submit={submit} onHide={onhide}/>);
+
+        wrapper.setState({
+            items: [{TagId: 1, TagName: 'test'}]
+        }, () => {
+            wrapper.instance().parentSubmit();
+
+            expect(onhide).toHaveBeenCalledTimes(1);
+            expect(submit).toHaveBeenCalledTimes(1);
+
+            wrapper.setState({
+                items: [{TagId: 1, TagName: 'test'}, {TagId: 3, TagName: 'test3'}]
+            }, () => {
+                wrapper.instance().parentSubmit();
+
+                // expect no submit if there are more than 1 item left...
+                expect(onhide).toHaveBeenCalledTimes(1);
+                expect(submit).toHaveBeenCalledTimes(1);
+            })
+        });
+    });
+});

src/elements/Popups/AddTagPopup/AddTagPopup.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import Tag from '../../Tag/Tag';
+import PopupBase from '../PopupBase';
+import {APINode, callAPI} from '../../../utils/Api';
+import {TagType} from '../../../types/VideoTypes';
+import FilterButton from "../../FilterButton/FilterButton";
+import styles from './AddTagPopup.module.css'
+
+interface props {
+    onHide: () => void;
+    submit: (tagId: number, tagName: string) => void;
+}
+
+interface state {
+    items: TagType[];
+    filter: string;
+}
+
+/**
+ * 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: [], filter: ''};
+
+        this.tagFilter = this.tagFilter.bind(this);
+        this.parentSubmit = this.parentSubmit.bind(this);
+        this.onItemClick = this.onItemClick.bind(this);
+    }
+
+    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} ParentSubmit={this.parentSubmit}>
+                <div className={styles.actionbar}>
+                    <FilterButton onFilterChange={(filter): void => this.setState({filter: filter})}/>
+                </div>
+                {this.state.items ?
+                    this.state.items.filter(this.tagFilter).map((i) => (
+                        <Tag tagInfo={i}
+                             onclick={(): void => this.onItemClick(i)}/>
+                    )) : null}
+            </PopupBase>
+        );
+    }
+
+    private onItemClick(tag: TagType): void {
+        this.props.submit(tag.TagId, tag.TagName);
+        this.props.onHide();
+    }
+
+    private tagFilter(tag: TagType): boolean {
+        return tag.TagName.toLowerCase().includes(this.state.filter.toLowerCase());
+    }
+
+    private parentSubmit(): void {
+        // allow submit only if one item is left in selection
+        const filteredList = this.state.items.filter(this.tagFilter);
+
+        if (filteredList.length === 1) {
+            // simulate click if parent submit
+            this.onItemClick(filteredList[0]);
+        }
+    }
+}
+
+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

@@ -11,12 +11,7 @@ describe('<NewTagPopup/>', function () {
     });
 
     it('test storeseletion click event', done => {
-        const mockSuccessResponse = {};
+        global.fetch = prepareFetchApi({});
-        const mockJsonPromise = Promise.resolve(mockSuccessResponse);
-        const mockFetchPromise = Promise.resolve({
-            json: () => mockJsonPromise
-        });
-        global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
 
         const func = jest.fn();
 
@@ -27,7 +22,9 @@ describe('<NewTagPopup/>', function () {
             }
         });
 
-        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

@@ -1,8 +1,9 @@
 .popup {
     border: 3px #3574fe solid;
     border-radius: 18px;
-    height: 80%;
+    height: fit-content;
     left: 20%;
+    min-height: 80%;
     opacity: 0.95;
     position: absolute;
     top: 10%;
@@ -12,10 +13,27 @@
 
 .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 {
@@ -23,4 +41,5 @@
     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>
+        );
+    }
+
+    /**
+     * Alert if clicked 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,99 +0,0 @@
-import React from 'react';
-import style from './Preview.module.css';
-import Player from '../../pages/Player/Player';
-import {Spinner} from 'react-bootstrap';
-import GlobalInfos from '../../GlobalInfos';
-
-/**
- * Component for single preview tile
- * floating side by side
- */
-class Preview extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-
-        this.state = {
-            previewpicture: null,
-            name: null
-        };
-    }
-
-    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/video.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.text()
-                .then((result) => {
-                    this.setState({
-                        previewpicture: result
-                    });
-                }));
-    }
-
-    render() {
-        const themeStyle = GlobalInfos.getThemeStyle();
-        return (
-            <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}
-                 onClick={() => this.itemClick()}>
-                <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.state.name}</div>
-                <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>
-                <div className={style.previewbottom}>
-
-                </div>
-            </div>
-        );
-    }
-
-    /**
-     * handle the click event of a tile
-     */
-    itemClick() {
-        console.log('item clicked!' + this.state.name);
-
-        this.props.viewbinding.changeRootElement(
-            <Player
-                viewbinding={this.props.viewbinding}
-                movie_id={this.props.movie_id}/>);
-    }
-}
-
-/**
- * Component for a Tag-name tile (used in category page)
- */
-export class TagPreview extends React.Component {
-    render() {
-        const themeStyle = GlobalInfos.getThemeStyle();
-        return (
-            <div
-                className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}
-                onClick={() => this.itemClick()}>
-                <div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
-                    {this.props.name}
-                </div>
-            </div>
-        );
-    }
-
-    /**
-     * handle the click event of a Tag tile
-     */
-    itemClick() {
-        this.props.categorybinding(this.props.name);
-    }
-}
-
-export default Preview;

src/elements/Preview/Preview.tsx

@@ -0,0 +1,80 @@
+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 {APINode, callAPIPlain} from '../../utils/Api';
+
+interface PreviewProps {
+    name: string;
+    movie_id: number;
+    onClick?: () => void;
+}
+
+interface PreviewState {
+    previewpicture: string | null;
+}
+
+/**
+ * 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
+        };
+    }
+
+    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 (
+            <Link to={'/player/' + this.props.movie_id} onClick={this.props.onClick}>
+                <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
+                    <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
+                    <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>
+                    <div className={style.previewbottom}>
+
+                    </div>
+                </div>
+            </Link>
+
+        );
+    }
+}
+
+/**
+ * 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

@@ -5,35 +5,10 @@ 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: {
-                changeRootElement: () => {
-                    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);
@@ -42,7 +17,7 @@ describe('<Preview/>', function () {
         });
         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);
@@ -50,6 +25,8 @@ describe('<Preview/>', function () {
         process.nextTick(() => {
             // received picture should be rendered into wrapper
             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();
@@ -58,7 +35,7 @@ describe('<Preview/>', function () {
     });
 
     it('spinner loads correctly', function () {
-        const wrapper = shallow(<Preview/>);
+        const wrapper = shallow(<Preview movie_id={1}/>);
 
         // expect load animation to be visible
         expect(wrapper.find('.loadAnimation')).toHaveLength(1);
@@ -76,24 +53,5 @@ describe('<TagPreview/>', function () {
         const wrapper = shallow(<TagPreview name='test'/>);
         expect(wrapper.find('.tagpreviewtitle').text()).toBe('test');
     });
-
-
-    it('click event triggered', function () {
-        const func = jest.fn();
-
-        const wrapper = shallow(<TagPreview/>);
-        wrapper.setProps({
-            categorybinding: () => {
-                func();
-            }
-        });
-
-        // first call of fetch is getting of available tags
-        expect(func).toHaveBeenCalledTimes(0);
-        wrapper.find('.videopreview').simulate('click');
-
-        // now called 1 times
-        expect(func).toHaveBeenCalledTimes(1);
-    });
 });
 

src/elements/SideBar/SideBar.module.css

@@ -1,6 +1,9 @@
 .sideinfo {
     border: 2px #3574fe solid;
     border-radius: 20px;
+}
+
+.sideinfogeometry {
     float: left;
     margin-left: 15px;
     margin-top: 25px;

src/elements/SideBar/SideBar.tsx

@@ -1,14 +1,21 @@
 import React from 'react';
 import style from './SideBar.module.css';
-import GlobalInfos from '../../GlobalInfos';
+import GlobalInfos from '../../utils/GlobalInfos';
+
+interface SideBarProps {
+    hiddenFrame?: boolean;
+    width?: string;
+}
 
 /**
  * component for sidebar-info
  */
-class SideBar extends React.Component {
+class SideBar extends React.Component<SideBarProps> {
-    render() {
+    render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
-        return (<div className={style.sideinfo + ' ' + themeStyle.secbackground}>
+        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>);
     }
@@ -18,7 +25,7 @@ class SideBar extends React.Component {
  * The title of the sidebar
  */
 export class SideBarTitle extends React.Component {
-    render() {
+    render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <div className={style.sidebartitle + ' ' + themeStyle.subtextcolor}>{this.props.children}</div>
@@ -30,7 +37,7 @@ export class SideBarTitle extends React.Component {
  * An item of the sidebar
  */
 export class SideBarItem extends React.Component {
-    render() {
+    render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <div

src/elements/Tag/Tag.js

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import styles from './Tag.module.css';
-import CategoryPage from '../../pages/CategoryPage/CategoryPage';
-
-/**
- * A Component representing a single Category tag
- */
-class Tag extends React.Component {
-    render() {
-        return (
-            <button className={styles.tagbtn} onClick={() => this.TagClick()}
-                    data-testid='Test-Tag'>{this.props.children}</button>
-        );
-    }
-
-    /**
-     * click handling for a Tag
-     */
-    TagClick() {
-        if (this.props.onclick) {
-            this.props.onclick();
-            return;
-        }
-
-        const tag = this.props.children.toString().toLowerCase();
-
-        // call callback functin to switch to category page with specified tag
-        this.props.viewbinding.changeRootElement(
-            <CategoryPage
-                category={tag}
-                viewbinding={this.props.viewbinding}/>);
-    }
-}
-
-export default Tag;

src/elements/Tag/Tag.test.js

@@ -6,36 +6,20 @@ 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>);
+        const wrapper = shallow(<Tag tagInfo={{TagName: 'test', TagId: 1}}/>);
         expect(wrapper.children().text()).toBe('test');
     });
 
-    it('click event triggered and setvideo callback called', function () {
-        global.fetch = global.prepareFetchApi({});
-        const func = jest.fn();
-        const elem = {
-            changeRootElement: () => func()
-        };
-
-        const wrapper = shallow(<Tag
-            viewbinding={elem}>test</Tag>);
-
-        expect(func).toBeCalledTimes(0);
-
-        wrapper.simulate('click');
-
-        expect(func).toBeCalledTimes(1);
-    });
-
     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);

src/elements/Tag/Tag.tsx

@@ -0,0 +1,47 @@
+import React 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
+}
+
+/**
+ * A Component representing a single Category tag
+ */
+class Tag extends React.Component<props> {
+    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 (
+            <button className={styles.tagbtn} onClick={(): void => this.TagClick()}
+                    data-testid='Test-Tag'>{this.props.tagInfo.TagName}</button>
+        );
+    }
+
+    /**
+     * 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;
+        }
+    }
+}
+
+export default Tag;

src/elements/VideoContainer/VideoContainer.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import Preview from '../Preview/Preview';
-import style from './VideoContainer.module.css';
-
-/**
- * A videocontainer storing lots of Preview elements
- * includes scroll handling and loading of preview infos
- */
-class VideoContainer extends React.Component {
-    // stores current index of loaded elements
-    loadindex = 0;
-
-    constructor(props, context) {
-        super(props, context);
-
-        this.data = props.data;
-
-        this.state = {
-            loadeditems: [],
-            selectionnr: null
-        };
-    }
-
-    componentDidMount() {
-        document.addEventListener('scroll', this.trackScrolling);
-
-        this.loadPreviewBlock(16);
-    }
-
-    render() {
-        return (
-            <div className={style.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}
-                {this.props.children}
-            </div>
-        );
-    }
-
-    componentWillUnmount() {
-        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) {
-        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;
-    }
-
-    /**
-     * scroll event handler -> load new previews if on bottom
-     */
-    trackScrolling = () => {
-        // 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/elements/VideoContainer/VideoContainer.tsx

@@ -0,0 +1,114 @@
+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[];
+    onScrollPositionChange?: (scrollPos: number, loadedTiles: number) => void;
+    initialScrollPosition?: {scrollPos: number, loadedTiles: number};
+}
+
+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);
+
+        console.log(this.props.initialScrollPosition)
+        if(this.props.initialScrollPosition !== undefined){
+            this.loadPreviewBlock(this.props.initialScrollPosition.loadedTiles, () => {
+                if(this.props.initialScrollPosition !== undefined)
+                window.scrollTo(0, this.props.initialScrollPosition.scrollPos);
+            });
+        }else{
+            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}
+                    onClick={(): void => {
+                        if (this.props.onScrollPositionChange !== undefined)
+                            this.props.onScrollPositionChange(window.pageYOffset - document.documentElement.clientHeight, this.loadindex)
+                    }}/>
+                ))}
+                {/*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, callback? : () => void): 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
+            ]
+        }, callback);
+
+
+        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 (document.documentElement.clientHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
+            this.loadPreviewBlock(8);
+            if (this.props.onScrollPositionChange !== undefined)
+                this.props.onScrollPositionChange(document.documentElement.clientHeight + window.pageYOffset, this.loadindex)
+        }
+    };
+}
+
+export default VideoContainer;

src/index.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 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;
+}

src/pages/ActorPage/ActorPage.test.js

@@ -0,0 +1,27 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import {ActorPage} from './ActorPage';
+
+describe('<ActorPage/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<ActorPage match={{params: {id: 10}}}/>);
+        wrapper.unmount();
+    });
+
+    it('fetch infos', function () {
+        callAPIMock({
+            Videos: [{
+                MovieId: 0,
+                MovieName: 'test'
+            }], Info: {
+                Thumbnail: '',
+                Name: '',
+                ActorId: 0
+            }
+        });
+
+        const wrapper = shallow(<ActorPage match={{params: {id: 10}}}/>);
+
+        expect(wrapper.find('VideoContainer')).toHaveLength(1);
+    });
+});

src/pages/ActorPage/ActorPage.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import PageTitle from '../../elements/PageTitle/PageTitle';
+import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faUser} from '@fortawesome/free-solid-svg-icons';
+import style from './ActorPage.module.css';
+import VideoContainer from '../../elements/VideoContainer/VideoContainer';
+import {APINode, callAPI} from '../../utils/Api';
+import {ActorType} from '../../types/VideoTypes';
+import {Link, withRouter} from 'react-router-dom';
+import {RouteComponentProps} from 'react-router';
+import {Button} from '../../elements/GPElements/Button';
+import {ActorTypes, VideoTypes} from '../../types/ApiTypes';
+
+interface state {
+    data: VideoTypes.VideoUnloadedType[],
+    actor: ActorType
+}
+
+/**
+ * empty default props with id in url
+ */
+interface props extends RouteComponentProps<{ id: string }> {
+}
+
+
+/**
+ * info page about a specific actor and a list of all its videos
+ */
+export class ActorPage extends React.Component<props, state> {
+    constructor(props: props) {
+        super(props);
+
+        this.state = {data: [], actor: {ActorId: 0, Name: '', Thumbnail: ''}};
+    }
+
+    render(): JSX.Element {
+        return (
+            <>
+                <PageTitle title={this.state.actor.Name} subtitle={this.state.data ? this.state.data.length + ' videos' : null}>
+                    <span className={style.overviewbutton}>
+                        <Link to='/actors'>
+                            <Button onClick={(): void => {}} title='Go to Actor overview'/>
+                        </Link>
+                    </span>
+                </PageTitle>
+                <SideBar>
+                    <div className={style.pic}>
+                        <FontAwesomeIcon style={{color: 'white'}} icon={faUser} size='10x'/>
+                    </div>
+                    <SideBarTitle>Attention: This is an early preview!</SideBarTitle>
+                </SideBar>
+                {this.state.data.length !== 0 ?
+                    <VideoContainer
+                        data={this.state.data}/> :
+                    <div>No Data found!</div>}
+            </>
+        );
+    }
+
+    componentDidMount(): void {
+        this.getActorInfo();
+    }
+
+    /**
+     * request more actor info from backend
+     */
+    getActorInfo(): void {
+        callAPI(APINode.Actor, {
+            action: 'getActorInfo',
+            ActorId: parseInt(this.props.match.params.id)
+        }, (result: ActorTypes.videofetchresult) => {
+            this.setState({
+                data: result.Videos ? result.Videos : [],
+                actor: result.Info
+            });
+        });
+    }
+}
+
+export default withRouter(ActorPage);

src/pages/CategoryPage/CategoryPage.js

@@ -1,178 +0,0 @@
-import React from 'react';
-import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
-import Tag from '../../elements/Tag/Tag';
-import videocontainerstyle from '../../elements/VideoContainer/VideoContainer.module.css';
-
-import {TagPreview} from '../../elements/Preview/Preview';
-import NewTagPopup from '../../elements/NewTagPopup/NewTagPopup';
-import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
-import VideoContainer from '../../elements/VideoContainer/VideoContainer';
-
-/**
- * Component for Category Page
- * Contains a Tag Overview and loads specific Tag videos in VideoContainer
- */
-class CategoryPage extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-
-        this.state = {
-            loadedtags: [],
-            selected: null
-        };
-    }
-
-    componentDidMount() {
-        // check if predefined category is set
-        if (this.props.category) {
-            this.fetchVideoData(this.props.category);
-        } else {
-            this.loadTags();
-        }
-    }
-
-    /**
-     * render the Title and SideBar component for the Category page
-     * @returns {JSX.Element} corresponding jsx element for Title and Sidebar
-     */
-    renderSideBarATitle() {
-        return (
-            <>
-                <PageTitle
-                    title='Categories'
-                    subtitle={!this.state.selected ? this.state.loadedtags.length + ' different Tags' : this.state.selected}/>
-
-                <SideBar>
-                    <SideBarTitle>Default Tags:</SideBarTitle>
-                    <Tag viewbinding={{
-                        changeRootElement: (e) => {
-                            this.loadTag(e.props.category);
-                        }
-                    }}>All</Tag>
-                    <Tag viewbinding={{
-                        changeRootElement: (e) => {
-                            this.loadTag(e.props.category);
-                        }
-                    }}>FullHd</Tag>
-                    <Tag viewbinding={{
-                        changeRootElement: (e) => {
-                            this.loadTag(e.props.category);
-                        }
-                    }}>LowQuality</Tag>
-                    <Tag viewbinding={{
-                        changeRootElement: (e) => {
-                            this.loadTag(e.props.category);
-                        }
-                    }}>HD</Tag>
-                    <Line/>
-                    <button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
-                        this.setState({popupvisible: true});
-                    }}>Add a new Tag!
-                    </button>
-                </SideBar></>
-        );
-    }
-
-    render() {
-        return (
-            <>
-                {this.renderSideBarATitle()}
-
-                {this.state.selected ?
-                    <>
-                        {this.videodata ?
-                            <VideoContainer
-                                data={this.videodata}
-                                viewbinding={this.props.viewbinding}/> : null}
-                        <button data-testid='backbtn' className='btn btn-success'
-                                onClick={this.loadCategoryPageDefault}>Back
-                        </button>
-                    </> :
-                    <div className={videocontainerstyle.maincontent}>
-                        {this.state.loadedtags ?
-                            this.state.loadedtags.map((m) => (
-                                <TagPreview
-                                    key={m.tag_name}
-                                    name={m.tag_name}
-                                    tag_id={m.tag_id}
-                                    viewbinding={this.props.viewbinding}
-                                    categorybinding={this.loadTag}/>
-                            )) :
-                            'loading'}
-                    </div>
-                }
-
-                {this.state.popupvisible ?
-                    <NewTagPopup show={this.state.popupvisible}
-                                 onHide={() => {
-                                     this.setState({popupvisible: false});
-                                     this.loadTags();
-                                 }}/> :
-                    null
-                }
-
-            </>
-        );
-    }
-
-    /**
-     * load a specific tag into a new previewcontainer
-     * @param tagname
-     */
-    loadTag = (tagname) => {
-        this.fetchVideoData(tagname);
-    };
-
-    /**
-     * fetch data for a specific tag from backend
-     * @param tag tagname
-     */
-    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/video.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json()
-                .then((result) => {
-                    this.videodata = result;
-                    this.setState({selected: null}); // needed to trigger the state reload correctly
-                    this.setState({selected: tag});
-                }))
-            .catch(() => {
-                console.log('no connection to backend');
-            });
-    }
-
-    /**
-     * go back to the default category overview
-     */
-    loadCategoryPageDefault = () => {
-        this.setState({selected: null});
-        this.loadTags();
-    };
-
-    /**
-     * load all available tags from db.
-     */
-    loadTags() {
-        const updateRequest = new FormData();
-        updateRequest.append('action', 'getAllTags');
-
-        // fetch all videos available
-        fetch('/api/tags.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json()
-                .then((result) => {
-                    this.setState({loadedtags: result});
-                }))
-            .catch(() => {
-                console.log('no connection to backend');
-            });
-    }
-}
-
-export default CategoryPage;

src/pages/CategoryPage/CategoryPage.test.js

@@ -1,4 +1,4 @@
-import {mount, shallow} from 'enzyme';
+import {shallow} from 'enzyme';
 import React from 'react';
 import CategoryPage from './CategoryPage';
 
@@ -7,116 +7,4 @@ describe('<CategoryPage/>', function () {
         const wrapper = shallow(<CategoryPage/>);
         wrapper.unmount();
     });
-
-    it('test tag fetch call', done => {
-        global.fetch = global.prepareFetchApi(['first', 'second']);
-
-        const wrapper = shallow(<CategoryPage/>);
-
-        expect(global.fetch).toHaveBeenCalledTimes(1);
-
-        process.nextTick(() => {
-            //callback to close window should have called
-            expect(wrapper.state().loadedtags.length).toBe(2);
-
-            global.fetch.mockClear();
-            done();
-        });
-    });
-
-    it('test errored fetch call', done => {
-        global.fetch = global.prepareFetchApi({});
-
-        let message;
-        global.console.log = jest.fn((m) => {
-            message = m;
-        });
-
-        shallow(<CategoryPage/>);
-
-        expect(global.fetch).toHaveBeenCalledTimes(1);
-
-        process.nextTick(() => {
-            //callback to close window should have called
-            expect(message).toBe('no connection to backend');
-
-            global.fetch.mockClear();
-            done();
-        });
-    });
-
-    it('test new tag popup', function () {
-        const wrapper = mount(<CategoryPage/>);
-
-        expect(wrapper.find('NewTagPopup')).toHaveLength(0);
-        wrapper.find('[data-testid="btnaddtag"]').simulate('click');
-        // newtagpopup should be showing now
-        expect(wrapper.find('NewTagPopup')).toHaveLength(1);
-
-        // click close button in modal
-        wrapper.find('.modal-header').find('button').simulate('click');
-        expect(wrapper.find('NewTagPopup')).toHaveLength(0);
-    });
-
-    it('test setpage callback', done => {
-        global.fetch = global.prepareFetchApi([{}, {}]);
-
-        const wrapper = mount(<CategoryPage/>);
-
-        wrapper.setState({
-            loadedtags: [
-                {
-                    tag_name: 'testname',
-                    tag_id: 42
-                }
-            ]
-        });
-
-        wrapper.find('TagPreview').find('div').first().simulate('click');
-
-        process.nextTick(() => {
-            // expect callback to have loaded correct tag
-            expect(wrapper.state().selected).toBe('testname');
-
-            global.fetch.mockClear();
-            done();
-        });
-    });
-
-    it('test back to category view callback', function () {
-        const wrapper = shallow(<CategoryPage/>);
-
-        wrapper.setState({
-            selected: 'test'
-        });
-        expect(wrapper.state().selected).not.toBeNull();
-        wrapper.find('[data-testid="backbtn"]').simulate('click');
-        expect(wrapper.state().selected).toBeNull();
-    });
-
-    it('load categorypage with predefined tag', function () {
-        const func = jest.fn();
-        CategoryPage.prototype.fetchVideoData = func;
-
-        shallow(<CategoryPage category='fullhd'/>);
-
-        expect(func).toBeCalledTimes(1);
-    });
-
-    it('test sidebar tag clicks', function () {
-        const func = jest.fn();
-
-        const wrapper = mount(<CategoryPage category='fullhd'/>);
-        wrapper.instance().loadTag = func;
-
-        console.log(wrapper.debug());
-
-        expect(func).toBeCalledTimes(0);
-        wrapper.find('SideBar').find('Tag').forEach(e => {
-            e.simulate('click');
-        });
-
-        expect(func).toBeCalledTimes(4);
-
-    });
 });

src/pages/CategoryPage/CategoryPage.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Route, Switch} from 'react-router-dom';
+import {CategoryViewWR} from './CategoryView';
+import TagView from './TagView';
+
+/**
+ * Component for Category Page
+ * Contains a Tag Overview and loads specific Tag videos in VideoContainer
+ */
+class CategoryPage extends React.Component {
+    render(): JSX.Element {
+        return (
+            <Switch>
+                <Route path='/categories/:id'>
+                    <CategoryViewWR/>
+                </Route>
+                <Route path='/categories'>
+                    <TagView/>
+                </Route>
+            </Switch>
+        );
+    }
+}
+
+export default CategoryPage;

src/pages/CategoryPage/CategoryView.test.js

@@ -0,0 +1,74 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import {CategoryView} from './CategoryView';
+
+describe('<CategoryView/>', function () {
+    function instance() {
+        return shallow(<CategoryView match={{params: {id: 10}}} history={{push: jest.fn()}}/>);
+    }
+
+    it('renders without crashing ', function () {
+        const wrapper = instance();
+        wrapper.unmount();
+    });
+
+    it('test backbutton', function () {
+        const wrapper = instance();
+        const func = jest.fn();
+        wrapper.setProps({history: {push: func}});
+
+        expect(func).toHaveBeenCalledTimes(0);
+        wrapper.find('button').simulate('click');
+        expect(func).toHaveBeenCalledTimes(1);
+    });
+
+    it('test delete of tag', function () {
+        const wrapper = instance();
+        callAPIMock({result: 'success'});
+
+        // simulate button click
+        wrapper.find('Button').props().onClick();
+
+        expect(wrapper.instance().props.history.push).toHaveBeenCalledTimes(1);
+    });
+
+    it('test delete of non empty tag', function () {
+        const wrapper = instance();
+        callAPIMock({result: 'not empty tag'});
+
+        // simulate button click
+        wrapper.find('Button').props().onClick();
+
+        // expect SubmitPopup showing
+        expect(wrapper.find('SubmitPopup')).toHaveLength(1);
+
+        // mock deleteTag function
+        wrapper.instance().deleteTag = jest.fn((v) => {});
+
+        // simulate submit
+        wrapper.find('SubmitPopup').props().submit();
+
+        // expect deleteTag function to have been called with force parameter
+        expect(wrapper.instance().deleteTag).toHaveBeenCalledWith(true);
+    });
+
+    it('test cancel of ', function () {
+        const wrapper = instance();
+        callAPIMock({result: 'not empty tag'});
+
+        // simulate button click
+        wrapper.find('Button').props().onClick();
+
+        // expect SubmitPopup showing
+        expect(wrapper.find('SubmitPopup')).toHaveLength(1);
+
+        // mock deleteTag function
+        wrapper.instance().deleteTag = jest.fn((v) => {});
+
+        // simulate submit
+        wrapper.find('SubmitPopup').props().onHide();
+
+        // expect deleteTag function to have been called with force parameter
+        expect(wrapper.instance().deleteTag).toHaveBeenCalledTimes(0);
+    });
+});

src/pages/CategoryPage/CategoryView.tsx

@@ -0,0 +1,123 @@
+import {RouteComponentProps} from 'react-router';
+import React from 'react';
+import VideoContainer from '../../elements/VideoContainer/VideoContainer';
+import {APINode, callAPI} from '../../utils/Api';
+import {withRouter} from 'react-router-dom';
+import {VideoTypes} from '../../types/ApiTypes';
+import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
+import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
+import Tag from '../../elements/Tag/Tag';
+import {DefaultTags, GeneralSuccess} from '../../types/GeneralTypes';
+import {Button} from '../../elements/GPElements/Button';
+import SubmitPopup from '../../elements/Popups/SubmitPopup/SubmitPopup';
+
+interface CategoryViewProps extends RouteComponentProps<{ id: string }> {}
+
+interface CategoryViewState {
+    loaded: boolean;
+    submitForceDelete: boolean;
+}
+
+/**
+ * plain class (for unit testing only)
+ */
+export class CategoryView extends React.Component<CategoryViewProps, CategoryViewState> {
+    private videodata: VideoTypes.VideoUnloadedType[] = [];
+
+    constructor(props: CategoryViewProps) {
+        super(props);
+
+        this.state = {
+            loaded: false,
+            submitForceDelete: false
+        };
+    }
+
+    componentDidMount(): void {
+        this.fetchVideoData(parseInt(this.props.match.params.id));
+    }
+
+    componentDidUpdate(prevProps: Readonly<CategoryViewProps>, prevState: Readonly<CategoryViewState>): void {
+        // trigger video refresh if id changed
+        if (prevProps.match.params.id !== this.props.match.params.id) {
+            this.setState({loaded: false});
+            this.fetchVideoData(parseInt(this.props.match.params.id));
+        }
+    }
+
+    render(): JSX.Element {
+        return (
+            <>
+                <PageTitle
+                    title='Categories'
+                    subtitle={this.videodata.length + ' Videos'}/>
+
+                <SideBar>
+                    <SideBarTitle>Default Tags:</SideBarTitle>
+                    <Tag tagInfo={DefaultTags.all}/>
+                    <Tag tagInfo={DefaultTags.fullhd}/>
+                    <Tag tagInfo={DefaultTags.hd}/>
+                    <Tag tagInfo={DefaultTags.lowq}/>
+
+                    <Line/>
+                    <Button title='Delete Tag' onClick={(): void => {this.deleteTag(false);}} color={{backgroundColor: 'red'}}/>
+                </SideBar>
+                {this.state.loaded ?
+                    <VideoContainer
+                        data={this.videodata}/> : null}
+
+                <button data-testid='backbtn' className='btn btn-success'
+                        onClick={(): void => {
+                            this.props.history.push('/categories');
+                        }}>Back to Categories
+                </button>
+                {this.handlePopups()}
+            </>
+        );
+    }
+
+    private handlePopups(): JSX.Element {
+        if (this.state.submitForceDelete) {
+            return (<SubmitPopup
+                onHide={(): void => this.setState({submitForceDelete: false})}
+                submit={(): void => {this.deleteTag(true);}}/>);
+        } else {
+            return <></>;
+        }
+    }
+
+    /**
+     * fetch data for a specific tag from backend
+     * @param id tagid
+     */
+    private fetchVideoData(id: number): void {
+        callAPI<VideoTypes.VideoUnloadedType[]>(APINode.Video, {action: 'getMovies', tag: id}, result => {
+            this.videodata = result;
+            this.setState({loaded: true});
+        });
+    }
+
+    /**
+     * delete the current tag
+     */
+    private deleteTag(force: boolean): void {
+        callAPI<GeneralSuccess>(APINode.Tags, {
+            action: 'deleteTag',
+            TagId: parseInt(this.props.match.params.id),
+            Force: force
+        }, result => {
+            console.log(result.result);
+            if (result.result === 'success') {
+                this.props.history.push('/categories');
+            } else if (result.result === 'not empty tag') {
+                // show submisison tag to ask if really delete
+                this.setState({submitForceDelete: true});
+            }
+        });
+    }
+}
+
+/**
+ * export with react Router wrapped (default use)
+ */
+export const CategoryViewWR = withRouter(CategoryView);