new preview style

Optional include of webpage into golang binary

Closes #40

See merge request lukas/openmediacenter!44

.eslintrc.js

@@ -0,0 +1,292 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+module.exports = {
+    env: {
+        es6: true
+    },
+
+    parserOptions: {
+        sourceType: 'module'
+    },
+
+    extends: [
+        'plugin:prettier/recommended', // https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
+        'prettier'
+    ],
+
+    plugins: ['eslint-comments', 'react', 'react-hooks', 'jest'],
+
+    settings: {
+        react: {
+            version: 'detect'
+        }
+    },
+
+    ignorePatterns: ['node_modules/', '**/*.js'],
+
+    overrides: [
+        {
+            files: ['*.ts', '*.tsx'],
+            parser: '@typescript-eslint/parser',
+            plugins: ['@typescript-eslint/eslint-plugin'],
+            rules: {
+                '@typescript-eslint/no-unused-vars': ['error', {argsIgnorePattern: '^_'}],
+                'no-unused-vars': 'off'
+            }
+        }
+    ],
+
+    // Map from global var to bool specifying if it can be redefined
+    globals: {
+        jest: true,
+        __DEV__: true,
+        __dirname: false,
+        __fbBatchedBridgeConfig: false,
+        AbortController: false,
+        alert: false,
+        cancelAnimationFrame: false,
+        cancelIdleCallback: false,
+        clearImmediate: true,
+        clearInterval: false,
+        clearTimeout: false,
+        console: false,
+        document: false,
+        ErrorUtils: false,
+        escape: false,
+        Event: false,
+        EventTarget: false,
+        exports: false,
+        fetch: false,
+        FileReader: false,
+        FormData: false,
+        global: false,
+        Headers: false,
+        Intl: false,
+        Map: true,
+        module: false,
+        navigator: false,
+        process: false,
+        Promise: true,
+        requestAnimationFrame: true,
+        requestIdleCallback: true,
+        require: false,
+        Set: true,
+        setImmediate: true,
+        setInterval: false,
+        setTimeout: false,
+        URL: false,
+        URLSearchParams: false,
+        WebSocket: true,
+        window: false,
+        XMLHttpRequest: false,
+        JSX: true,
+        KeyboardEvent: true,
+        MouseEvent: true,
+        Node: true,
+        HTMLDivElement: true,
+        HTMLInputElement: true
+    },
+
+    rules: {
+        "@typescript-eslint/no-explicit-any": "error",
+        "@typescript-eslint/explicit-function-return-type": "error",
+
+        // General
+        'comma-dangle': [1, 'never'], // allow or disallow trailing commas
+        'no-cond-assign': 1, // disallow assignment in conditional expressions
+        'no-console': 0, // disallow use of console (off by default in the node environment)
+        'no-const-assign': 2, // disallow assignment to const-declared variables
+        'no-constant-condition': 0, // disallow use of constant expressions in conditions
+        'no-control-regex': 1, // disallow control characters in regular expressions
+        'no-debugger': 1, // disallow use of debugger
+        'no-dupe-class-members': 2, // Disallow duplicate name in class members
+        'no-dupe-keys': 2, // disallow duplicate keys when creating object literals
+        'no-empty': 0, // disallow empty statements
+        'no-ex-assign': 1, // disallow assigning to the exception in a catch block
+        'no-extra-boolean-cast': 1, // disallow double-negation boolean casts in a boolean context
+        'no-extra-parens': 0, // disallow unnecessary parentheses (off by default)
+        'no-extra-semi': 1, // disallow unnecessary semicolons
+        'no-func-assign': 1, // disallow overwriting functions written as function declarations
+        'no-inner-declarations': 0, // disallow function or variable declarations in nested blocks
+        'no-invalid-regexp': 1, // disallow invalid regular expression strings in the RegExp constructor
+        'no-negated-in-lhs': 1, // disallow negation of the left operand of an in expression
+        'no-obj-calls': 1, // disallow the use of object properties of the global object (Math and JSON) as functions
+        'no-regex-spaces': 1, // disallow multiple spaces in a regular expression literal
+        'no-reserved-keys': 0, // disallow reserved words being used as object literal keys (off by default)
+        'no-sparse-arrays': 1, // disallow sparse arrays
+        'no-unreachable': 2, // disallow unreachable statements after a return, throw, continue, or break statement
+        'use-isnan': 1, // disallow comparisons with the value NaN
+        'valid-jsdoc': 0, // Ensure JSDoc comments are valid (off by default)
+        'valid-typeof': 1, // Ensure that the results of typeof are compared against a valid string
+
+        // Best Practices
+        // These are rules designed to prevent you from making mistakes. They either prescribe a better way of doing something or help you avoid footguns.
+
+        'block-scoped-var': 0, // treat var statements as if they were block scoped (off by default)
+        complexity: 0, // specify the maximum cyclomatic complexity allowed in a program (off by default)
+        'consistent-return': 0, // require return statements to either always or never specify values
+        curly: 1, // specify curly brace conventions for all control statements
+        'default-case': 0, // require default case in switch statements (off by default)
+        'dot-notation': 1, // encourages use of dot notation whenever possible
+        eqeqeq: [1, 'allow-null'], // require the use of === and !==
+        'guard-for-in': 0, // make sure for-in loops have an if statement (off by default)
+        'no-alert': 1, // disallow the use of alert, confirm, and prompt
+        'no-caller': 1, // disallow use of arguments.caller or arguments.callee
+        'no-div-regex': 1, // disallow division operators explicitly at beginning of regular expression (off by default)
+        'no-else-return': 0, // disallow else after a return in an if (off by default)
+        'no-eq-null': 0, // disallow comparisons to null without a type-checking operator (off by default)
+        'no-eval': 2, // disallow use of eval()
+        'no-extend-native': 1, // disallow adding to native types
+        'no-extra-bind': 1, // disallow unnecessary function binding
+        'no-fallthrough': 1, // disallow fallthrough of case statements
+        'no-floating-decimal': 1, // disallow the use of leading or trailing decimal points in numeric literals (off by default)
+        'no-implied-eval': 1, // disallow use of eval()-like methods
+        'no-labels': 1, // disallow use of labeled statements
+        'no-iterator': 1, // disallow usage of __iterator__ property
+        'no-lone-blocks': 1, // disallow unnecessary nested blocks
+        'no-loop-func': 0, // disallow creation of functions within loops
+        'no-multi-str': 0, // disallow use of multiline strings
+        'no-native-reassign': 0, // disallow reassignments of native objects
+        'no-new': 1, // disallow use of new operator when not part of the assignment or comparison
+        'no-new-func': 2, // disallow use of new operator for Function object
+        'no-new-wrappers': 1, // disallows creating new instances of String,Number, and Boolean
+        'no-octal': 1, // disallow use of octal literals
+        'no-octal-escape': 1, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251";
+        'no-proto': 1, // disallow usage of __proto__ property
+        'no-redeclare': 0, // disallow declaring the same variable more then once
+        'no-return-assign': 1, // disallow use of assignment in return statement
+        'no-script-url': 1, // disallow use of javascript: urls.
+        'no-self-compare': 1, // disallow comparisons where both sides are exactly the same (off by default)
+        'no-sequences': 1, // disallow use of comma operator
+        'no-unused-expressions': 0, // disallow usage of expressions in statement position
+        'no-useless-escape': 1, // disallow escapes that don't have any effect in literals
+        'no-void': 1, // disallow use of void operator (off by default)
+        'no-warning-comments': 0, // disallow usage of configurable warning terms in comments": 1,                        // e.g. TODO or FIXME (off by default)
+        'no-with': 1, // disallow use of the with statement
+        radix: 1, // require use of the second argument for parseInt() (off by default)
+        'semi-spacing': 1, // require a space after a semi-colon
+        'vars-on-top': 0, // requires to declare all vars on top of their containing scope (off by default)
+        'wrap-iife': 0, // require immediate function invocation to be wrapped in parentheses (off by default)
+        yoda: 1, // require or disallow Yoda conditions
+
+        // Variables
+        // These rules have to do with variable declarations.
+
+        'no-catch-shadow': 1, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment)
+        'no-delete-var': 1, // disallow deletion of variables
+        'no-label-var': 1, // disallow labels that share a name with a variable
+        'no-shadow': 1, // disallow declaration of variables already declared in the outer scope
+        'no-shadow-restricted-names': 1, // disallow shadowing of names such as arguments
+        'no-undef': 2, // disallow use of undeclared variables unless mentioned in a /*global */ block
+        'no-undefined': 0, // disallow use of undefined variable (off by default)
+        'no-undef-init': 1, // disallow use of undefined when initializing variables
+        'no-unused-vars': [1, {vars: 'all', args: 'none', ignoreRestSiblings: true}], // disallow declaration of variables that are not used in the code
+        'no-use-before-define': 0, // disallow use of variables before they are defined
+
+        // Node.js
+        // These rules are specific to JavaScript running on Node.js.
+
+        'handle-callback-err': 1, // enforces error handling in callbacks (off by default) (on by default in the node environment)
+        'no-mixed-requires': 1, // disallow mixing regular variable and require declarations (off by default) (on by default in the node environment)
+        'no-new-require': 1, // disallow use of new operator with the require function (off by default) (on by default in the node environment)
+        'no-path-concat': 1, // disallow string concatenation with __dirname and __filename (off by default) (on by default in the node environment)
+        'no-process-exit': 0, // disallow process.exit() (on by default in the node environment)
+        'no-restricted-modules': 1, // restrict usage of specified node modules (off by default)
+        'no-sync': 0, // disallow use of synchronous methods (off by default)
+
+        // ESLint Comments Plugin
+        // The following rules are made available via `eslint-plugin-eslint-comments`
+        'eslint-comments/no-aggregating-enable': 1, // disallows eslint-enable comments for multiple eslint-disable comments
+        'eslint-comments/no-unlimited-disable': 1, // disallows eslint-disable comments without rule names
+        'eslint-comments/no-unused-disable': 1, // disallow disables that don't cover any errors
+        'eslint-comments/no-unused-enable': 1, // // disallow enables that don't enable anything or enable rules that weren't disabled
+
+        // Stylistic Issues
+        // These rules are purely matters of style and are quite subjective.
+
+        'key-spacing': 0,
+        'keyword-spacing': 1, // enforce spacing before and after keywords
+        'jsx-quotes': [1, 'prefer-single'], // enforces the usage of double quotes for all JSX attribute values which doesn’t contain a double quote
+        'comma-spacing': 0,
+        'no-multi-spaces': 0,
+        'brace-style': 0, // enforce one true brace style (off by default)
+        camelcase: 1, // require camel case names
+        'consistent-this': 1, // enforces consistent naming when capturing the current execution context (off by default)
+        'eol-last': 1, // enforce newline at the end of file, with no multiple empty lines
+        'func-names': 0, // require function expressions to have a name (off by default)
+        'func-style': 0, // enforces use of function declarations or expressions (off by default)
+        'new-cap': 0, // require a capital letter for constructors
+        'new-parens': 1, // disallow the omission of parentheses when invoking a constructor with no arguments
+        'no-nested-ternary': 0, // disallow nested ternary expressions (off by default)
+        'no-array-constructor': 1, // disallow use of the Array constructor
+        'no-empty-character-class': 1, // disallow the use of empty character classes in regular expressions
+        'no-lonely-if': 0, // disallow if as the only statement in an else block (off by default)
+        'no-new-object': 1, // disallow use of the Object constructor
+        'no-spaced-func': 1, // disallow space between function identifier and application
+        'no-ternary': 0, // disallow the use of ternary operators (off by default)
+        'no-trailing-spaces': 1, // disallow trailing whitespace at the end of lines
+        'no-underscore-dangle': 0, // disallow dangling underscores in identifiers
+        'no-mixed-spaces-and-tabs': 1, // disallow mixed spaces and tabs for indentation
+        quotes: [1, 'single', 'avoid-escape'], // specify whether double or single quotes should be used
+        'quote-props': 0, // require quotes around object literal property names (off by default)
+        semi: 1, // require or disallow use of semicolons instead of ASI
+        'sort-vars': 0, // sort variables within the same declaration block (off by default)
+        'space-in-brackets': 0, // require or disallow spaces inside brackets (off by default)
+        'space-in-parens': 0, // require or disallow spaces inside parentheses (off by default)
+        'space-infix-ops': 1, // require spaces around operators
+        'space-unary-ops': [1, {words: true, nonwords: false}], // require or disallow spaces before/after unary operators (words on by default, nonwords off by default)
+        'max-nested-callbacks': 0, // specify the maximum depth callbacks can be nested (off by default)
+        'one-var': 0, // allow just one var statement per function (off by default)
+        'wrap-regex': 0, // require regex literals to be wrapped in parentheses (off by default)
+
+        // Legacy
+        // The following rules are included for compatibility with JSHint and JSLint. While the names of the rules may not match up with the JSHint/JSLint counterpart, the functionality is the same.
+
+        'max-depth': 0, // specify the maximum depth that blocks can be nested (off by default)
+        'max-len': 0, // specify the maximum length of a line in your program (off by default)
+        'max-params': 0, // limits the number of parameters that can be used in the function declaration. (off by default)
+        'max-statements': 0, // specify the maximum number of statement allowed in a function (off by default)
+        'no-bitwise': 1, // disallow use of bitwise operators (off by default)
+        'no-plusplus': 0, // disallow use of unary operators, ++ and -- (off by default)
+
+        // React Plugin
+        // The following rules are made available via `eslint-plugin-react`.
+
+        'react/display-name': 0,
+        'react/jsx-boolean-value': 0,
+        'react/jsx-no-comment-textnodes': 2,
+        'react/jsx-no-duplicate-props': 2,
+        'react/jsx-no-undef': 2,
+        'react/jsx-sort-props': 0,
+        'react/jsx-uses-react': 1,
+        'react/jsx-uses-vars': 1,
+        'react/no-did-mount-set-state': 1,
+        'react/no-did-update-set-state': 1,
+        'react/no-multi-comp': 0,
+        'react/no-string-refs': 1,
+        'react/no-unknown-property': 0,
+        'react/prop-types': 0,
+        'react/react-in-jsx-scope': 1,
+        'react/self-closing-comp': 1,
+        'react/wrap-multilines': 0,
+
+        // React-Hooks Plugin
+        // The following rules are made available via `eslint-plugin-react-hooks`
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'error',
+
+        // Jest Plugin
+        // The following rules are made available via `eslint-plugin-jest`.
+        'jest/no-disabled-tests': 1,
+        'jest/no-focused-tests': 1,
+        'jest/no-identical-title': 1,
+        'jest/valid-expect': 1
+    }
+};

.gitlab-ci.yml

@@ -1,52 +1,90 @@
 image: node:14
 
 stages:
-  - prepare
+  - build_frontend
-  - build
+  - build_backend
   - test
   - packaging
   - deploy
 
-cache:
+Minimize_Frontend:
-  key: ${CI_COMMIT_REF_SLUG}
+  stage: build_frontend
-  paths:
+  before_script:
-    - .npm/
+    - yarn install --cache-folder .yarn
-    - node_modules/
-
-include:
-  - template: Code-Quality.gitlab-ci.yml
-
-variables:
-  SAST_DISABLE_DIND: "true"
-
-Node_dependencies:
-  stage: prepare
   script:
-    - npm ci --cache .npm --prefer-offline
+    - yarn run build
-
+    - rm build/*/*/*.map
-Minimize:
-  stage: build
-  script:
-    - npm run build
   artifacts:
-    expire_in: 7 days
+    expire_in: 2 days
     paths:
       - build/
-  needs: ["Node_dependencies"]
+  cache:
+    key: ${CI_COMMIT_REF_SLUG}
+    paths:
+      - .yarn/
+      - node_modules/
+
+Build_Backend:
+  image: golang:latest
+  stage: build_backend
+  script:
+    - cd apiGo
+    - go build -v -o openmediacenter
+    - cp -r ../build/ ./static/
+    - go build -v -tags static -o openmediacenter_full
+    - env GOOS=windows GOARCH=amd64 go build -v -tags static -o openmediacenter.exe
+  needs:
+    - Minimize_Frontend
+  artifacts:
+    expire_in: 2 days
+    paths:
+      - "./apiGo/openmediacenter*"
 
 Frontend_Tests:
   stage: test
+  before_script:
+    - yarn install --cache-folder .yarn
   script:
-    - npm run test
+    - yarn run test
+  needs: []
   artifacts:
     reports:
       junit:
         - ./junit.xml
-  needs: ["Node_dependencies"]
+  cache:
+    key: ${CI_COMMIT_REF_SLUG}
+    paths:
+      - .yarn/
+      - node_modules/
 
-code_quality:
+Backend_Tests:
-  tags:
+  image: golang:latest
-    - dind
+  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
+  needs: []
+  artifacts:
+    when: always
+    reports:
+      junit: ./apiGo/report.xml
+
+lint:
+  stage: test
+  before_script:
+    - yarn install --cache-folder .yarn
+  script:
+    - yarn run lint
+  cache:
+    key: ${CI_COMMIT_REF_SLUG}
+    paths:
+      - .yarn/
+      - ./node_modules/
+  artifacts:
+    reports:
+      codequality: gl-codequality.json
+  needs: []
 
 Debian_Server:
   stage: packaging
@@ -56,29 +94,34 @@ Debian_Server:
     - 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: ["Minimize"]
+  needs:
+      - Minimize_Frontend
+      - Build_Backend
 
 Test_Server:
   stage: deploy
-  image: luki42/alpineopenssh:latest
+  image: luki42/ssh:latest
   needs:
     - Frontend_Tests
+    - Backend_Tests
     - Debian_Server
   only:
     - master
   script:
     - eval $(ssh-agent -s)
-    - ssh-add <(echo "$SSH_PRIVATE_KEY")
+    - echo "$SSH_PRIVATE_KEY" | ssh-add -
     - mkdir -p ~/.ssh
     - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
     - scp deb/OpenMediaCenter-*.deb root@192.168.0.42:/tmp/

.prettierrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+    bracketSpacing: false,
+    jsxBracketSameLine: true,
+    singleQuote: true,
+    tabWidth: 4,
+    trailingComma: 'none',
+    printWidth: 135,
+    semi: true,
+    jsxSingleQuote: true
+};

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.
@@ -22,24 +22,30 @@ and in dark mode:
 ![](https://i.ibb.co/xzhdsbJ/Screenshot-20200812-172926.png)
 
 ## Installation
-First of all clone the repository.
 
-`git clone https://gitlab.heili.eu/lukas/openmediacenter.git`
+Download the latest release .deb file from the Releases page and install it via `apt install ./OpenMediaCenter-0.1.x_amd64.deb`
 
-Then build a production build via npm. 
+Now you could optionally check if the service is up and running: `systemctl status OpenMediaCenter`
-
-`npm run build`
-
-Afterwards you can copy the content of the generated `build` folder as well as the `api` folder to your webserver root. 
-
-You need also to setup a Database with the structure described in [SQL Style Reference](https://gitlab.heili.eu/lukas/openmediacenter/-/blob/master/database.sql). 
-The login data to this database needs to be specified in the `api/Database.php` file.
- 
 ## Usage
-Now you can access your MediaCenter via your servers global ip (:
+Now you can access your MediaCenter via your servers global ip on port 8080 (:
 
 At the settings tab you can set the correct videopath on server and click reindex afterwards. 
 
+
+## Development
+
+Build and start the go backend:
+
+`go build`
+
+Start frontend dev server:
+
+`npm start`
+
+### Environent Variables:
+
+`REACT_APP_CUST_BACK_DOMAIN` :: Set a custom movie domain
+
 ## Contact
 Any contribution is appreciated. 
 Feel free to contact me (lukas.heiligenbrunner@gmail.com), open an issue or request a new feature. 

api/actor.php

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

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/Actor.php

@@ -1,75 +0,0 @@
-<?php
-require_once __DIR__ . '/../SSettings.php';
-require_once 'RequestBase.php';
-
-class Actor extends RequestBase {
-
-    function initHandlers() {
-        $this->databaseAdds();
-        $this->databaseRequests();
-    }
-
-    function databaseAdds() {
-        $this->addActionHandler("createActor", function () {
-            // skip tag create if already existing
-            $actorname = $_POST["actorname"];
-
-            $query = "INSERT IGNORE INTO actors (name) VALUES ('$actorname')";
-
-            if ($this->conn->query($query) === TRUE) {
-                $this->commitMessage('{"result":"success"}');
-            } else {
-                $this->commitMessage('{"result":"' . $this->conn->error . '"}');
-            }
-        });
-
-        $this->addActionHandler("addActorToVideo", function () {
-            // skip tag create if already existing
-            $actorid = $_POST["actorid"];
-            $videoid = $_POST["videoid"];
-
-            $query = "INSERT IGNORE INTO actors_videos (actor_id, video_id) VALUES ($actorid,$videoid)";
-
-            if ($this->conn->query($query) === TRUE) {
-                $this->commitMessage('{"result":"success"}');
-            } else {
-                $this->commitMessage('{"result":"' . $this->conn->error . '"}');
-            }
-        });
-    }
-
-    function databaseRequests() {
-        $this->addActionHandler("getAllActors", function () {
-            // query the actors corresponding to video
-            $query = "SELECT * FROM actors";
-            $result = $this->conn->query($query);
-            $this->commitMessage(json_encode(mysqli_fetch_all($result, MYSQLI_ASSOC)));
-        });
-
-        $this->addActionHandler("getActorsOfVideo", function () {
-            // query the actors corresponding to video
-            $video_id = $_POST["videoid"];
-
-            $query = "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=$video_id";
-            $result = $this->conn->query($query);
-            $this->commitMessage(json_encode(mysqli_fetch_all($result, MYSQLI_ASSOC)));
-        });
-
-        $this->addActionHandler("getActorInfo", function (){
-            $actorid = $_POST["actorid"];
-
-            $query = "SELECT movie_id, movie_name FROM actors_videos
-                        JOIN videos v on v.movie_id = actors_videos.video_id
-                        WHERE actors_videos.actor_id=$actorid";
-            $result = $this->conn->query($query);
-
-            $actorinfo = $this->conn->query("SELECT name, thumbnail, actor_id FROM actors WHERE actor_id=$actorid");
-
-            $reply = array("videos" => mysqli_fetch_all($result, MYSQLI_ASSOC), "info" => mysqli_fetch_assoc($actorinfo));
-
-            $this->commitMessage(json_encode($reply));
-        });
-    }
-}

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 {
-            $this->commitMessage('{"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('{"result": "success"}');
-            } else {
-                $this->commitMessage('{"result": "success"}');
-            }
-        });
-    }
-
-    /**
-     * 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('{"result": "success"}');
-            } else {
-                $this->commitMessage('{"result": "success"}');
-            }
-        });
-
-        $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,101 +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();
-        $this->delete();
-    }
-
-    private function addToDB() {
-        /**
-         * creates a new tag
-         * query requirements:
-         * * tagname -- name of the new tag
-         */
-        $this->addActionHandler("createTag", function () {
-            // skip tag create if already existing
-            $query = "INSERT IGNORE INTO tags (tag_name) VALUES ('" . $_POST['tagname'] . "')";
-
-            if ($this->conn->query($query) === TRUE) {
-                $this->commitMessage('{"result":"success"}');
-            } else {
-                $this->commitMessage('{"result":"' . $this->conn->error . '"}');
-            }
-        });
-
-        /**
-         * adds a new tag to an existing video
-         *
-         * query requirements:
-         * * movieid  -- the id of the video to add the tag to
-         * * id -- the tag id which tag to add
-         */
-        $this->addActionHandler("addTag", function () {
-            $movieid = $_POST['movieid'];
-            $tagid = $_POST['id'];
-
-            // skip tag add if already assigned
-            $query = "INSERT IGNORE INTO video_tags(tag_id, video_id) VALUES ('$tagid','$movieid')";
-
-            if ($this->conn->query($query) === TRUE) {
-                $this->commitMessage('{"result":"success"}');
-            } else {
-                $this->commitMessage('{"result":"' . $this->conn->error . '"}');
-            }
-        });
-    }
-
-    private function getFromDB() {
-        /**
-         * returns all available tags from database
-         */
-        $this->addActionHandler("getAllTags", function () {
-            $query = "SELECT tag_name,tag_id from tags";
-            $result = $this->conn->query($query);
-
-            $rows = array();
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($rows, $r);
-            }
-            $this->commitMessage(json_encode($rows));
-        });
-    }
-
-    private function delete() {
-        /**
-         * delete a Tag with specified id
-         */
-        $this->addActionHandler("deleteTag", function () {
-            $tag_id = $_POST['tagId'];
-            $force = $_POST['force'];
-
-            // delete key constraints first
-            if ($force === "true") {
-                $query = "DELETE FROM video_tags WHERE tag_id=$tag_id";
-
-                if ($this->conn->query($query) !== TRUE) {
-                    $this->commitMessage('{"result":"' . $this->conn->error . '"}');
-                }
-            }
-
-            $query = "DELETE FROM tags WHERE tag_id=$tag_id";
-
-            if ($this->conn->query($query) === TRUE) {
-                $this->commitMessage('{"result":"success"}');
-            } else {
-                // check if error is a constraint error
-                if (preg_match('/^.*a foreign key constraint fails.*$/i', $this->conn->error)) {
-                    $this->commitMessage('{"result":"not empty tag"}');
-                } else {
-                    $this->commitMessage('{"result":"' . $this->conn->eror . '"}');
-                }
-            }
-        });
-    }
-}

api/src/handlers/Video.php

@@ -1,245 +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_id = '$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,t.tag_id FROM video_tags 
-                        INNER JOIN tags t on video_tags.tag_id = t.tag_id
-                        WHERE $idstring
-                        GROUP BY t.tag_id";
-            $result = $this->conn->query($query);
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($return->tags, array('tag_name' => $r['tag_name'], 'tag_id' => $r['tag_id']));
-            }
-
-            $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'];
-
-            // todo join with actor db and add actors of 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, t.tag_id 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_id";
-            $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);
-            }
-
-            // query the actors corresponding to video
-            $query = "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=$video_id";
-            $result = $this->conn->query($query);
-            $arr['actors'] = mysqli_fetch_all($result, MYSQLI_ASSOC);
-
-            $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,109 @@
+package api
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"openmediacenter/apiGo/api/oauth"
+)
+
+const APIPREFIX = "/api"
+
+const (
+	VideoNode    = iota
+	TagNode      = iota
+	SettingsNode = iota
+	ActorNode    = iota
+	InitNode     = 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() {
+	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))
+
+	// initialization api calls to check if password is neccessaray
+	http.Handle(APIPREFIX+"/init", http.HandlerFunc(initHandler))
+
+	// initialize oauth service and add corresponding auth routes
+	oauth.InitOAuth()
+}
+
+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 initHandler(rw http.ResponseWriter, req *http.Request) {
+	handlefunc(rw, req, InitNode)
+}
+
+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/Init.go

@@ -0,0 +1,39 @@
+package api
+
+import (
+	"encoding/json"
+	"openmediacenter/apiGo/database/settings"
+	"regexp"
+	"strings"
+)
+
+func AddInitHandlers() {
+	passwordNeeded()
+}
+
+func passwordNeeded() {
+	AddHandler("loadInitialData", InitNode, nil, func() []byte {
+		sett := settings.LoadSettings()
+
+		type InitialDataTypeResponse struct {
+			DarkMode        bool
+			Pasword         bool
+			MediacenterName string
+			VideoPath       string
+		}
+
+		regexMatchUrl := regexp.MustCompile("^http(|s):\\/\\/([0-9]){1,3}\\.([0-9]){1,3}\\.([0-9]){1,3}\\.([0-9]){1,3}:[0-9]{1,5}")
+		videoUrl := regexMatchUrl.FindString(sett.VideoPath)
+		serverVideoPath := strings.TrimPrefix(sett.VideoPath, videoUrl)
+
+		res := InitialDataTypeResponse{
+			DarkMode:        sett.DarkMode,
+			Pasword:         sett.Pasword != "-1",
+			MediacenterName: sett.Mediacenter_name,
+			VideoPath:       serverVideoPath,
+		}
+
+		str, _ := json.Marshal(res)
+		return str
+	})
+}

apiGo/api/Settings.go

@@ -0,0 +1,57 @@
+package api
+
+import (
+	"openmediacenter/apiGo/api/types"
+	"openmediacenter/apiGo/database"
+	"openmediacenter/apiGo/videoparser"
+)
+
+func AddSettingsHandlers() {
+	saveSettingsToDB()
+	getSettingsFromDB()
+	reIndexHandling()
+}
+
+func getSettingsFromDB() {
+	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,246 @@
+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 {
+		// delete tag constraints
+		query := fmt.Sprintf("DELETE FROM video_tags WHERE video_id=%d", dv.MovieId)
+		err := database.Edit(query)
+
+		// delete actor constraints
+		query = fmt.Sprintf("DELETE FROM actors_videos WHERE video_id=%d", dv.MovieId)
+		err = database.Edit(query)
+
+		// respond only if result not successful
+		if err != nil {
+			return database.ManualSuccessResponse(err)
+		}
+
+		query = fmt.Sprintf("DELETE FROM videos WHERE movie_id=%d", dv.MovieId)
+		return database.SuccessQuery(query)
+	})
+}

apiGo/api/oauth/CustomClientStore.go

@@ -0,0 +1,57 @@
+package oauth
+
+import (
+	"gopkg.in/oauth2.v3"
+	"openmediacenter/apiGo/database/settings"
+)
+
+type CustomClientStore struct {
+	oauth2.ClientStore
+}
+
+type CustomClientInfo struct {
+	oauth2.ClientInfo
+	ID     string
+	Secret string
+	Domain string
+	UserID string
+}
+
+func NewCustomStore() oauth2.ClientStore {
+	s := new(CustomClientStore)
+	return s
+}
+
+func (a *CustomClientStore) GetByID(id string) (oauth2.ClientInfo, error) {
+	password := settings.GetPassword()
+	// if password not set assign default password
+	if password == nil {
+		defaultpassword := "openmediacenter"
+		password = &defaultpassword
+	}
+
+	clientinfo := CustomClientInfo{
+		ID:     "openmediacenter",
+		Secret: *password,
+		Domain: "http://localhost:8081",
+		UserID: "openmediacenter",
+	}
+
+	return &clientinfo, nil
+}
+
+func (a *CustomClientInfo) GetID() string {
+	return a.ID
+}
+
+func (a *CustomClientInfo) GetSecret() string {
+	return a.Secret
+}
+
+func (a *CustomClientInfo) GetDomain() string {
+	return a.Domain
+}
+
+func (a *CustomClientInfo) GetUserID() string {
+	return a.UserID
+}

apiGo/api/oauth/Oauth.go

@@ -0,0 +1,61 @@
+package oauth
+
+import (
+	"gopkg.in/oauth2.v3/errors"
+	"gopkg.in/oauth2.v3/manage"
+	"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())
+
+	// create new secretstore
+	clientStore := NewCustomStore()
+	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/database/settings/DBSettings.go

@@ -0,0 +1,49 @@
+package settings
+
+import (
+	"fmt"
+	"openmediacenter/apiGo/database"
+)
+
+func GetPassword() *string {
+	pwd := LoadSettings().Pasword
+	if pwd == "-1" {
+		return nil
+	} else {
+		return &pwd
+	}
+}
+
+type SettingsType struct {
+	DarkMode         bool
+	Pasword          string
+	Mediacenter_name string
+	VideoPath        string
+}
+
+func LoadSettings() *SettingsType {
+	query := "SELECT DarkMode, password, mediacenter_name, video_path from settings"
+
+	type RawSettingsType struct {
+		DarkMode         int
+		Pasword          string
+		Mediacenter_name string
+		VideoPath        string
+	}
+
+	result := RawSettingsType{}
+
+	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())
+	}
+
+	res := SettingsType{
+		DarkMode:         result.DarkMode != 0,
+		Pasword:          result.Pasword,
+		Mediacenter_name: result.Mediacenter_name,
+		VideoPath:        result.VideoPath,
+	}
+
+	return &res
+}

apiGo/go.mod

@@ -0,0 +1,8 @@
+module openmediacenter/apiGo
+
+go 1.16
+
+require (
+	github.com/go-sql-driver/mysql v1.5.0
+	gopkg.in/oauth2.v3 v3.12.0
+)

apiGo/go.sum

@@ -0,0 +1,110 @@
+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/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,64 @@
+package main
+
+import (
+	"flag"
+	"fmt"
+	"log"
+	"net/http"
+	"openmediacenter/apiGo/api"
+	"openmediacenter/apiGo/database"
+	"openmediacenter/apiGo/static"
+)
+
+func main() {
+	fmt.Println("init OpenMediaCenter server")
+	port := 8081
+
+	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.AddInitHandlers()
+
+	// add the static files
+	static.ServeStaticFiles()
+
+	api.ServerInit()
+
+	fmt.Printf("OpenMediacenter server up and running on port %d\n", port)
+	log.Fatal(http.ListenAndServe(fmt.Sprintf(":%d", port), nil))
+}
+
+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/static/StaticServe.go

@@ -0,0 +1,89 @@
+// +build static
+
+package static
+
+import (
+	"embed"
+	"fmt"
+	"io/fs"
+	"net/http"
+	"net/http/httputil"
+	"net/url"
+	"openmediacenter/apiGo/database/settings"
+	"regexp"
+	"strings"
+)
+
+//go:embed build
+var staticFiles embed.FS
+
+func ServeStaticFiles() {
+	// http.FS can be used to create a http Filesystem
+	subfs, _ := fs.Sub(staticFiles, "build")
+	staticFS := http.FS(subfs)
+	fs := http.FileServer(staticFS)
+
+	// Serve static files
+	http.Handle("/", validatePrefix(fs))
+
+	// we need to proxy the videopath to somewhere in a standalone binary
+	proxyVideoURL()
+}
+
+type handler struct {
+	proxy *httputil.ReverseProxy
+}
+
+func (h handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	h.proxy.ServeHTTP(w, r)
+}
+
+func proxyVideoURL() {
+	conf := settings.LoadSettings()
+
+	// match base url
+	regexMatchUrl := regexp.MustCompile("^http(|s):\\/\\/([0-9]){1,3}\\.([0-9]){1,3}\\.([0-9]){1,3}\\.([0-9]){1,3}:[0-9]{1,5}")
+
+	var videoUrl *url.URL
+	if regexMatchUrl.MatchString(conf.VideoPath) {
+		fmt.Println("matches string...")
+		var err error
+		videoUrl, err = url.Parse(regexMatchUrl.FindString(conf.VideoPath))
+		if err != nil {
+			panic(err)
+		}
+	} else {
+		videoUrl, _ = url.Parse("http://127.0.0.1:8081")
+	}
+
+	director := func(req *http.Request) {
+		req.URL.Scheme = videoUrl.Scheme
+		req.URL.Host = videoUrl.Host
+	}
+
+	serverVideoPath := strings.TrimPrefix(conf.VideoPath, regexMatchUrl.FindString(conf.VideoPath))
+
+	reverseProxy := &httputil.ReverseProxy{Director: director}
+	handler := handler{proxy: reverseProxy}
+	http.Handle(serverVideoPath, handler)
+}
+
+// ValidatePrefix check if requested path is a file -- if not proceed with index.html
+func validatePrefix(h http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		regex := regexp.MustCompile("\\..*$")
+		matchFile := regex.MatchString(r.URL.Path)
+
+		if matchFile {
+			h.ServeHTTP(w, r)
+		} else {
+			r2 := new(http.Request)
+			*r2 = *r
+			r2.URL = new(url.URL)
+			*r2.URL = *r.URL
+			r2.URL.Path = "/"
+			r2.URL.RawPath = "/"
+			h.ServeHTTP(w, r2)
+		}
+	})
+}

apiGo/static/StaticServe_apionly.go

@@ -0,0 +1,6 @@
+// +build !static
+
+package static
+
+// add nothing on no static build
+func ServeStaticFiles() {}

apiGo/videoparser/CleanUp.go

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

apiGo/videoparser/ReIndex.go

@@ -0,0 +1,337 @@
+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"
+	"strings"
+)
+
+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)
+
+	// filter out those urls which are already existing in db
+	nonExisting := filterExisting(path)
+
+	fmt.Printf("There are %d videos not existing in db.\n", len(*nonExisting))
+
+	for _, s := range *nonExisting {
+		processVideo(s)
+	}
+
+	AppendMessageBuffer("reindex finished successfully!")
+
+	contentAvailable = false
+	fmt.Println("Reindexing finished!")
+}
+
+// filter those entries from array which are already existing!
+func filterExisting(paths []string) *[]string {
+	var nameStr string
+
+	// build the query string with files on disk
+	for i, s := range paths {
+		// escape ' in url name
+		s = strings.Replace(s, "'", "\\'", -1)
+		nameStr += "SELECT '" + s + "' "
+
+		// if first index add as url
+		if i == 0 {
+			nameStr += "AS url "
+		}
+
+		// if not last index add union all
+		if i != len(paths)-1 {
+			nameStr += "UNION ALL "
+		}
+	}
+
+	query := fmt.Sprintf("SELECT * FROM (%s) urls WHERE urls.url NOT IN(SELECT movie_url FROM videos)", nameStr)
+	rows := database.Query(query)
+
+	var resultarr []string
+	// parse the result rows into a array
+	for rows.Next() {
+		var url string
+		err := rows.Scan(&url)
+		if err != nil {
+			continue
+		}
+		resultarr = append(resultarr, url)
+	}
+	rows.Close()
+
+	return &resultarr
+}
+
+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, "")
+
+	// match the year and cut year from name
+	year, fileName := matchYear(fileName)
+
+	fmt.Printf("The Video %s doesn't exist! Adding it to database.\n", fileName)
+	addVideo(fileName, fileNameOrig, year)
+}
+
+// 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
+	}
+	yearStr := years[len(years)-1]
+	// get last year occurance and cut first and last char
+	year, err := strconv.Atoi(yearStr[1 : len(yearStr)-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
+	}
+
+	strEncPic := base64.StdEncoding.EncodeToString(stdout)
+	if strEncPic == "" {
+		return nil, nil
+	}
+	backpic64 := fmt.Sprintf("data:image/jpeg;base64,%s", strEncPic)
+
+	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,151 @@
+package tmdb
+
+import (
+	"encoding/base64"
+	"encoding/json"
+	"fmt"
+	"io/ioutil"
+	"net/http"
+	"net/url"
+	"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 {
+	fmt.Printf("Searching TMDB for: Moviename: %s, year:%d \n", MovieName, year)
+	queryURL := fmt.Sprintf("%ssearch/movie?api_key=%s&query=%s", baseUrl, apiKey, url.QueryEscape(MovieName))
+	resp, err := http.Get(queryURL)
+	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))
+
+	// if there was no match with tmdb return 0
+	if len(t.Results) == 0 {
+		return nil
+	}
+
+	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

@@ -48,10 +48,10 @@ create table if not exists actors_videos
         foreign key (video_id) references videos (movie_id)
 );
 
-create index actors_videos_actor_id_index
+create index if not exists actors_videos_actor_id_index
     on actors_videos (actor_id);
 
-create index actors_videos_video_id_index
+create index if not exists actors_videos_video_id_index
     on actors_videos (video_id);
 
 create table if not exists video_tags

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 restart OpenMediaCenter.service
-rm /tmp/output.log

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

@@ -13,9 +13,7 @@ server {
         try_files $uri /index.html;
     }
 
-    location ~ \.php$ {
+    location ~* ^/(api/|token) {
-        include snippets/fastcgi-php.conf;
+        proxy_pass http://127.0.0.1:8081;
-
-        fastcgi_pass unix:/var/run/php/php-fpm.sock;
     }
 }

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

package.json

@@ -1,8 +1,7 @@
 {
   "name": "openmediacenter",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
-  "main": "public/electron.js",
   "author": {
     "email": "lukas.heiligenbrunner@gmail.com",
     "name": "Lukas Heiligenbrunner",
@@ -24,8 +23,9 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "CI=false react-scripts build",
-    "test": "CI=true react-scripts test --reporters=jest-junit --verbose --silent --coverage --reporters=default"
+    "test": "CI=true react-scripts test --reporters=jest-junit --verbose --silent --coverage --reporters=default",
+    "lint": "eslint --format gitlab src/"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -37,25 +37,8 @@
       "text-summary"
     ]
   },
-  "proxy": "http://192.168.0.209",
+  "proxy": "http://127.0.0.1:8081",
   "homepage": "/",
-  "eslintConfig": {
-    "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": [
       ">0.2%",
@@ -72,15 +55,27 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
-    "@types/react-router-dom": "^5.1.6",
-    "@types/react-router": "5.1.8",
     "@types/jest": "^26.0.19",
-    "@types/node": "^12.19.9",
+    "@types/node": "^14.14.31",
-    "@types/react": "^16.14.2",
+    "@types/react": "^17.0.2",
-    "@types/react-dom": "^16.9.10",
+    "@types/react-dom": "^17.0.1",
+    "@types/react-router": "5.1.12",
+    "@types/react-router-dom": "^5.1.6",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
+    "eslint": "^7.22.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-formatter-gitlab": "^2.2.0",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-jest": "^24.3.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest-junit": "^12.0.0",
-    "react-scripts": "4.0.1"
+    "prettier": "^2.2.1",
+    "prettier-config": "^1.0.0",
+    "react-scripts": "4.0.3"
   }
 }

src/App.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import App from './App';
 import {shallow} from 'enzyme';
+import GlobalInfos from "./utils/GlobalInfos";
 
 describe('<App/>', function () {
     it('renders without crashing ', function () {
@@ -10,34 +11,37 @@ describe('<App/>', function () {
 
     it('renders title', () => {
         const wrapper = shallow(<App/>);
+        wrapper.setState({password: false});
         expect(wrapper.find('.navbrand').text()).toBe('OpenMediaCenter');
     });
 
     it('are navlinks correct', function () {
         const wrapper = shallow(<App/>);
+        wrapper.setState({password: false});
         expect(wrapper.find('.navitem')).toHaveLength(4);
     });
 
     it('test initial fetch from api', done => {
-        global.fetch = global.prepareFetchApi({
+        callAPIMock({
-            generalSettingsLoaded: true,
+            MediacenterName: 'testname'
-            passwordsupport: true,
+        })
-            mediacentername: 'testname'
+
-        });
+        GlobalInfos.enableDarkTheme = jest.fn((r) => {})
 
         const wrapper = shallow(<App/>);
 
-
-        const func = jest.fn();
-        wrapper.instance().setState = func;
-
-        expect(global.fetch).toBeCalledTimes(1);
-
         process.nextTick(() => {
-            expect(func).toBeCalledTimes(1);
+            expect(document.title).toBe('testname');
 
             global.fetch.mockClear();
             done();
         });
     });
+
+    it('test render of password page', function () {
+        const wrapper = shallow(<App/>);
+        wrapper.setState({password: true});
+
+        expect(wrapper.find('AuthenticationPage')).toHaveLength(1);
+    });
 });

src/App.tsx

@@ -9,20 +9,18 @@ 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 {APINode, apiTokenValid, callApiUnsafe, refreshAPIToken} 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';
+import AuthenticationPage from './pages/AuthenticationPage/AuthenticationPage';
 
 interface state {
-    generalSettingsLoaded: boolean;
+    password: boolean | null; // null if uninitialized - true if pwd needed false if not needed
-    passwordsupport: boolean;
     mediacentername: string;
-    onapierror: boolean;
 }
 
 /**
@@ -31,30 +29,62 @@ interface state {
 class App extends React.Component<{}, state> {
     constructor(props: {}) {
         super(props);
+
+        let pwdneeded: boolean | null = null;
+
+        if (apiTokenValid()) {
+            pwdneeded = false;
+        } else {
+            refreshAPIToken((err) => {
+                if (err === 'invalid_client') {
+                    this.setState({password: true});
+                } else if (err === '') {
+                    this.setState({password: false});
+                } else {
+                    console.log('unimplemented token error: ' + err);
+                }
+            });
+        }
+
         this.state = {
-            generalSettingsLoaded: false,
-            passwordsupport: false,
             mediacentername: 'OpenMediaCenter',
-            onapierror: false
+            password: pwdneeded
+        };
+
+        // force an update on theme change
+        GlobalInfos.onThemeChange(() => {
+            this.forceUpdate();
+        });
+
+        // set the hook to load passwordfield on global func call
+        GlobalInfos.loadPasswordPage = (callback?: () => void): void => {
+            // try refreshing the token
+            refreshAPIToken((err) => {
+                if (err !== '') {
+                    this.setState({password: true});
+                } else {
+                    // call callback if request was successful
+                    if (callback) {
+                        callback();
+                    }
+                }
+            }, true);
         };
     }
 
     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) => {
+        callApiUnsafe(APINode.Init, {action: 'loadInitialData'}, (result: SettingsTypes.initialApiCallData) => {
             // set theme
             GlobalInfos.enableDarkTheme(result.DarkMode);
 
+            GlobalInfos.setVideoPath(result.VideoPath);
+
             this.setState({
-                generalSettingsLoaded: true,
+                mediacentername: result.MediacenterName
-                passwordsupport: result.passwordEnabled,
-                mediacentername: result.mediacenter_name,
-                onapierror: false
             });
             // set tab title to received mediacenter name
-            document.title = result.mediacenter_name;
+            document.title = result.MediacenterName;
-        }, error => {
-            this.setState({onapierror: true});
         });
     }
 
@@ -62,63 +92,85 @@ class App extends React.Component<{}, state> {
         this.initialAPICall();
     }
 
-
     render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         // add the main theme to the page body
         document.body.className = themeStyle.backgroundcolor;
 
-        return (
+        if (this.state.password === true) {
-            <Router>
+            // render authentication page if auth is neccessary
-                <div className={style.app}>
+            return <AuthenticationPage onSuccessLogin={(): void => this.setState({password: false})} />;
-                    <div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
+        } else if (this.state.password === false) {
-                        <div className={style.navbrand}>{this.state.mediacentername}</div>
+            return (
-                        <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/'} activeStyle={{opacity: '0.85'}}>Home</NavLink>
+                <Router>
-                        <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/random'} activeStyle={{opacity: '0.85'}}>Random
+                    <div className={style.app}>
-                            Video</NavLink>
+                        <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
-                        <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/settings'} activeStyle={{opacity: '0.85'}}>Settings</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.routing()}
+                </Router>
-                </div>
+            );
-                {this.state.onapierror ? this.ApiError() : null}
+        } else {
-            </Router>
+            return <>still loading...</>;
-        );
+        }
     }
 
     routing(): JSX.Element {
         return (
             <Switch>
-                <Route path="/random">
+                <Route path='/random'>
-                    <RandomPage/>
+                    <RandomPage />
                 </Route>
-                <Route path="/categories">
+                <Route path='/categories'>
-                    <CategoryPage/>
+                    <CategoryPage />
                 </Route>
-                <Route path="/settings">
+                <Route path='/settings'>
-                    <SettingsPage/>
+                    <SettingsPage />
                 </Route>
-                <Route exact path="/player/:id">
+                <Route exact path='/player/:id'>
-                    <Player/>
+                    <Player />
                 </Route>
-                <Route exact path="/actors">
+                <Route exact path='/actors'>
-                    <ActorOverviewPage/>
+                    <ActorOverviewPage />
                 </Route>
-                <Route path="/actors/:id">
+                <Route path='/actors/:id'>
-                    <ActorPage/>
+                    <ActorPage />
                 </Route>
-                <Route path="/">
+                <Route path='/'>
-                    <HomePage/>
+                    <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/elements/ActorTile/ActorTile.test.js

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

src/elements/ActorTile/ActorTile.tsx

@@ -5,13 +5,13 @@ import React from 'react';
 import {Link} from 'react-router-dom';
 import {ActorType} from '../../types/VideoTypes';
 
-interface props {
+interface Props {
     actor: ActorType;
-    onClick?: (actor: ActorType) => void
+    onClick?: (actor: ActorType) => void;
 }
 
-class ActorTile extends React.Component<props> {
+class ActorTile extends React.Component<Props> {
-    constructor(props: props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {};
@@ -21,12 +21,7 @@ class ActorTile extends React.Component<props> {
         if (this.props.onClick) {
             return this.renderActorTile(this.props.onClick);
         } else {
-            return (
+            return <Link to={{pathname: '/actors/' + this.props.actor.ActorId}}>{this.renderActorTile(() => {})}</Link>;
-                <Link to={{pathname: '/actors/' + this.props.actor.actor_id}}>
-                    {this.renderActorTile(() => {
-                    })}
-                </Link>
-            );
         }
     }
 
@@ -34,11 +29,21 @@ class ActorTile extends React.Component<props> {
         return (
             <div className={style.actortile} onClick={(): void => customclickhandler(this.props.actor)}>
                 <div className={style.actortile_thumbnail}>
-                    {this.props.actor.thumbnail === null ? <FontAwesomeIcon style={{
+                    {
-                        lineHeight: '130px'
+                        this.props.actor.Thumbnail === '' ? (
-                    }} icon={faUser} size='5x'/> : 'dfdf' /* todo render picture provided here! */}
+                            <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 className={style.actortile_name}>{this.props.actor.Name}</div>
             </div>
         );
     }

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,121 @@
+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/InfoHeaderItem/InfoHeaderItem.tsx

@@ -5,11 +5,11 @@ import {Spinner} from 'react-bootstrap';
 import {IconDefinition} from '@fortawesome/fontawesome-common-types';
 
 interface props {
-    onClick?: () => void
+    onClick?: () => void;
-    backColor: string
+    backColor: string;
-    icon: IconDefinition
+    icon: IconDefinition;
-    text: string | number
+    text: string | number;
-    subtext: string | number
+    subtext: string | number;
 }
 
 /**
@@ -18,23 +18,35 @@ interface props {
 class InfoHeaderItem extends React.Component<props> {
     render(): JSX.Element {
         return (
-            <div onClick={(): void => {
+            <div
-                // call clicklistener if defined
+                onClick={(): void => {
-                if (this.props.onClick != null) this.props.onClick();
+                    // call clicklistener if defined
-            }} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}>
+                    if (this.props.onClick != null) {
+                        this.props.onClick();
+                    }
+                }}
+                className={style.infoheaderitem}
+                style={{backgroundColor: this.props.backColor}}>
                 <div className={style.icon}>
-                    <FontAwesomeIcon style={{
+                    <FontAwesomeIcon
-                        verticalAlign: 'middle',
+                        style={{
-                        lineHeight: '130px'
+                            verticalAlign: 'middle',
-                    }} icon={this.props.icon} size='5x'/>
+                            lineHeight: '130px'
+                        }}
+                        icon={this.props.icon}
+                        size='5x'
+                    />
                 </div>
-                {this.props.text !== null && this.props.text !== undefined ?
+                {this.props.text !== null && this.props.text !== undefined ? (
                     <>
                         <div className={style.maintext}>{this.props.text}</div>
                         <div className={style.subtext}>{this.props.subtext}</div>
                     </>
-                    : <span className={style.loadAnimation}><Spinner animation='border'/></span>
+                ) : (
-                }
+                    <span className={style.loadAnimation}>
+                        <Spinner animation='border' />
+                    </span>
+                )}
             </div>
         );
     }

src/elements/PageTitle/PageTitle.tsx

@@ -17,10 +17,8 @@ class PageTitle extends React.Component<props> {
             <div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
                 <span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
                 <span className={style.pageheadersubtitle + ' ' + themeStyle.textcolor}>{this.props.subtitle}</span>
-                <>
+                <>{this.props.children}</>
-                    {this.props.children}
+                <Line />
-                </>
-                <Line/>
             </div>
         );
     }
@@ -35,7 +33,7 @@ export class Line extends React.Component {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <>
-                <hr className={themeStyle.hrcolor}/>
+                <hr className={themeStyle.hrcolor} />
             </>
         );
     }

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

@@ -31,7 +31,7 @@ describe('<AddActorPopup/>', function () {
     });
 
     it('test api call and insertion of actor tiles', function () {
-        global.callAPIMock([{id: 1, name: 'test'}, {id: 2, name: 'test2'}]);
+        global.callAPIMock([{Id: 1, Name: 'test'}, {Id: 2, Name: 'test2'}]);
 
         const wrapper = shallow(<AddActorPopup/>);
 
@@ -40,11 +40,11 @@ describe('<AddActorPopup/>', function () {
 
     it('simulate actortile click', function () {
         const func = jest.fn();
-        const wrapper = shallow(<AddActorPopup onHide={() => {func();}} movie_id={1}/>);
+        const wrapper = shallow(<AddActorPopup onHide={() => {func();}} movieId={1}/>);
 
         global.callAPIMock({result: 'success'});
 
-        wrapper.setState({actors: [{actor_id: 1, name: 'test'}]}, () => {
+        wrapper.setState({actors: [{ActorId: 1, Name: 'test'}]}, () => {
             wrapper.find('ActorTile').dive().simulate('click');
 
             expect(callAPI).toHaveBeenCalledTimes(1);
@@ -59,7 +59,7 @@ describe('<AddActorPopup/>', function () {
 
         global.callAPIMock({result: 'nosuccess'});
 
-        wrapper.setState({actors: [{actor_id: 1, name: 'test'}]}, () => {
+        wrapper.setState({actors: [{ActorId: 1, Name: 'test'}]}, () => {
             wrapper.find('ActorTile').dive().simulate('click');
 
             expect(callAPI).toHaveBeenCalledTimes(1);
@@ -80,7 +80,7 @@ describe('<AddActorPopup/>', function () {
 
         callAPIMock({});
 
-        wrapper.setState({actors: [{name: 'test', actor_id: 1}]});
+        wrapper.setState({actors: [{Name: 'test', ActorId: 1}]});
 
         wrapper.find('PopupBase').props().ParentSubmit();
 

src/elements/Popups/AddActorPopup/AddActorPopup.tsx

@@ -6,53 +6,40 @@ import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
 import {APINode, callAPI} from '../../../utils/Api';
 import {ActorType} from '../../../types/VideoTypes';
 import {GeneralSuccess} from '../../../types/GeneralTypes';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import FilterButton from '../../FilterButton/FilterButton';
-import {faFilter, faTimes} from '@fortawesome/free-solid-svg-icons';
-import {Button} from '../../GPElements/Button';
-import {addKeyHandler, removeKeyHandler} from '../../../utils/ShortkeyHandler';
 
-interface props {
+interface Props {
     onHide: () => void;
-    movie_id: number;
+    movieId: number;
 }
 
 interface state {
     contentDefault: boolean;
     actors: ActorType[];
     filter: string;
-    filtervisible: boolean;
 }
 
 /**
  * Popup for Adding a new Actor to a Video
  */
-class AddActorPopup extends React.Component<props, state> {
+class AddActorPopup extends React.Component<Props, state> {
     // filterfield anchor, needed to focus after filter btn click
     private filterfield: HTMLInputElement | null | undefined;
 
-    constructor(props: props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
             contentDefault: true,
             actors: [],
-            filter: '',
+            filter: ''
-            filtervisible: false
         };
 
         this.tileClickHandler = this.tileClickHandler.bind(this);
         this.filterSearch = this.filterSearch.bind(this);
         this.parentSubmit = this.parentSubmit.bind(this);
-        this.keypress = this.keypress.bind(this);
     }
-
-    componentWillUnmount(): void {
-        removeKeyHandler(this.keypress);
-    }
-
     componentDidMount(): void {
-        addKeyHandler(this.keypress);
-
         // fetch the available actors
         this.loadActors();
     }
@@ -61,12 +48,19 @@ class AddActorPopup extends React.Component<props, state> {
         return (
             <>
                 {/* todo render actor tiles here and add search field*/}
-                <PopupBase title='Add new Actor to Video' onHide={this.props.onHide} banner={
+                <PopupBase
-                    <button
+                    title='Add new Actor to Video'
-                        className={style.newactorbutton}
+                    onHide={this.props.onHide}
-                        onClick={(): void => {
+                    banner={
-                            this.setState({contentDefault: false});
+                        <button
-                        }}>Create new Actor</button>} ParentSubmit={this.parentSubmit}>
+                            className={style.newactorbutton}
+                            onClick={(): void => {
+                                this.setState({contentDefault: false});
+                            }}>
+                            Create new Actor
+                        </button>
+                    }
+                    ParentSubmit={this.parentSubmit}>
                     {this.resolvePage()}
                 </PopupBase>
             </>
@@ -78,11 +72,18 @@ class AddActorPopup extends React.Component<props, state> {
      * @returns {JSX.Element}
      */
     resolvePage(): JSX.Element {
-        if (this.state.contentDefault) return (this.getContent());
+        if (this.state.contentDefault) {
-        else return (<NewActorPopupContent onHide={(): void => {
+            return this.getContent();
-            this.loadActors();
+        } else {
-            this.setState({contentDefault: true});
+            return (
-        }}/>);
+                <NewActorPopupContent
+                    onHide={(): void => {
+                        this.loadActors();
+                        this.setState({contentDefault: true});
+                    }}
+                />
+            );
+        }
     }
 
     /**
@@ -94,36 +95,19 @@ class AddActorPopup extends React.Component<props, state> {
             return (
                 <>
                     <div className={style.searchbar}>
-                        {
+                        <FilterButton
-                            this.state.filtervisible ?
+                            onFilterChange={(filter): void => {
-                                <>
+                                this.setState({filter: filter});
-                                    <input className={'form-control mr-sm-2 ' + style.searchinput}
+                            }}
-                                           type='text' placeholder='Filter' value={this.state.filter}
+                        />
-                                           onChange={(e): void => {
-                                               this.setState({filter: e.target.value});
-                                           }}
-                                           ref={(input): void => {this.filterfield = input;}}/>
-                                    <Button title={<FontAwesomeIcon style={{
-                                        verticalAlign: 'middle',
-                                        lineHeight: '130px'
-                                    }} icon={faTimes} size='1x'/>} color={{backgroundColor: 'red'}} onClick={(): void => {
-                                        this.setState({filter: '', filtervisible: false});
-                                    }}/>
-                                </> :
-                                <Button
-                                    title={<span>Filter <FontAwesomeIcon style={{
-                                        verticalAlign: 'middle',
-                                        lineHeight: '130px'
-                                    }} icon={faFilter} size='1x'/></span>}
-                                    color={{backgroundColor: 'cornflowerblue', color: 'white'}}
-                                    onClick={(): void => this.enableFilterField()}/>
-                        }
                     </div>
-                    {this.state.actors.filter(this.filterSearch).map((el) => (<ActorTile actor={el} onClick={this.tileClickHandler}/>))}
+                    {this.state.actors.filter(this.filterSearch).map((el) => (
+                        <ActorTile actor={el} onClick={this.tileClickHandler} />
+                    ))}
                 </>
             );
         } else {
-            return (<div>somekind of loading</div>);
+            return <div>somekind of loading</div>;
         }
     }
 
@@ -132,45 +116,39 @@ class AddActorPopup extends React.Component<props, state> {
      */
     tileClickHandler(actor: ActorType): void {
         // fetch the available actors
-        callAPI<GeneralSuccess>(APINode.Actor, {
+        callAPI<GeneralSuccess>(
-            action: 'addActorToVideo',
+            APINode.Actor,
-            actorid: actor.actor_id,
+            {
-            videoid: this.props.movie_id
+                action: 'addActorToVideo',
-        }, result => {
+                ActorId: actor.ActorId,
-            if (result.result === 'success') {
+                MovieId: this.props.movieId
-                // return back to player page
+            },
-                this.props.onHide();
+            (result) => {
-            } else {
+                if (result.result === 'success') {
-                console.error('an error occured while fetching actors: ' + result);
+                    // 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 => {
+        callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, (result) => {
             this.setState({actors: result});
         });
     }
 
-    /**
-     * enable filterfield and focus into searchbar
-     */
-    private enableFilterField(): void {
-        this.setState({filtervisible: true}, () => {
-            // focus filterfield after state update
-            this.filterfield?.focus();
-        });
-    }
-
     /**
      * filter the actor array for search matches
      * @param actor
      */
     private filterSearch(actor: ActorType): boolean {
-        return actor.name.toLowerCase().includes(this.state.filter.toLowerCase());
+        return actor.Name.toLowerCase().includes(this.state.filter.toLowerCase());
     }
 
     /**
@@ -185,17 +163,6 @@ class AddActorPopup extends React.Component<props, state> {
             this.tileClickHandler(filteredList[0]);
         }
     }
-
-    /**
-     * key event handling
-     * @param event keyevent
-     */
-    private keypress(event: KeyboardEvent): void {
-        // hide if escape is pressed
-        if (event.key === 'f') {
-            this.enableFilterField();
-        }
-    }
 }
 
 export default AddActorPopup;

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

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

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

@@ -14,7 +14,7 @@ describe('<AddTagPopup/>', function () {
     it('test tag insertion', function () {
         const wrapper = shallow(<AddTagPopup/>);
         wrapper.setState({
-            items: [{tag_id: 1, tag_name: 'test'}, {tag_id: 2, tag_name: 'ee'}]
+            items: [{TagId: 1, TagName: 'test'}, {TagId: 2, TagName: 'ee'}]
         }, () => {
             expect(wrapper.find('Tag')).toHaveLength(2);
             expect(wrapper.find('Tag').first().dive().text()).toBe('test');
@@ -25,11 +25,37 @@ describe('<AddTagPopup/>', function () {
         const wrapper = shallow(<AddTagPopup submit={jest.fn()} onHide={jest.fn()}/>);
 
         wrapper.setState({
-            items: [{tag_id: 1, tag_name: 'test'}]
+            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

@@ -3,25 +3,31 @@ 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 {
+interface Props {
     onHide: () => void;
     submit: (tagId: number, tagName: string) => void;
-    movie_id: number;
 }
 
 interface state {
     items: TagType[];
+    filter: string;
 }
 
 /**
  * component creates overlay to add a new tag to a video
  */
-class AddTagPopup extends React.Component<props, state> {
+class AddTagPopup extends React.Component<Props, state> {
-    constructor(props: props) {
+    constructor(props: Props) {
         super(props);
 
-        this.state = {items: []};
+        this.state = {items: [], filter: ''};
+
+        this.tagFilter = this.tagFilter.bind(this);
+        this.parentSubmit = this.parentSubmit.bind(this);
+        this.onItemClick = this.onItemClick.bind(this);
     }
 
     componentDidMount(): void {
@@ -34,18 +40,35 @@ class AddTagPopup extends React.Component<props, state> {
 
     render(): JSX.Element {
         return (
-            <PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide}>
+            <PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide} ParentSubmit={this.parentSubmit}>
-                {this.state.items ?
+                <div className={styles.actionbar}>
-                    this.state.items.map((i) => (
+                    <FilterButton onFilterChange={(filter): void => this.setState({filter: filter})} />
-                        <Tag tagInfo={i}
+                </div>
-                             onclick={(): void => {
+                {this.state.items
-                                 this.props.submit(i.tag_id, i.tag_name);
+                    ? this.state.items.filter(this.tagFilter).map((i) => <Tag tagInfo={i} onclick={(): void => this.onItemClick(i)} />)
-                                 this.props.onHide();
+                    : null}
-                             }}/>
-                    )) : 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.tsx

@@ -15,7 +15,7 @@ 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}/>
+                <NewActorPopupContent onHide={this.props.onHide} />
             </PopupBase>
         );
     }
@@ -28,10 +28,17 @@ export class NewActorPopupContent extends React.Component<NewActorPopupProps> {
         return (
             <>
                 <div>
-                    <input type='text' placeholder='Actor Name' onChange={(v): void => {
+                    <input
-                        this.value = v.target.value;
+                        type='text'
-                    }}/></div>
+                        placeholder='Actor Name'
-                <button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button>
+                        onChange={(v): void => {
+                            this.value = v.target.value;
+                        }}
+                    />
+                </div>
+                <button className={style.savebtn} onClick={(): void => this.storeselection()}>
+                    Save
+                </button>
             </>
         );
     }
@@ -41,7 +48,9 @@ export class NewActorPopupContent extends React.Component<NewActorPopupProps> {
      */
     storeselection(): void {
         // check if user typed in name
-        if (this.value === '' || this.value === undefined) return;
+        if (this.value === '' || this.value === undefined) {
+            return;
+        }
 
         callAPI(APINode.Actor, {action: 'createActor', actorname: this.value}, (result: GeneralSuccess) => {
             if (result.result !== 'success') {

src/elements/Popups/NewTagPopup/NewTagPopup.tsx

@@ -5,7 +5,7 @@ import {APINode, callAPI} from '../../../utils/Api';
 import {GeneralSuccess} from '../../../types/GeneralTypes';
 
 interface props {
-    onHide: () => void
+    onHide: () => void;
 }
 
 /**
@@ -16,11 +16,24 @@ class NewTagPopup extends React.Component<props> {
 
     render(): JSX.Element {
         return (
-            <PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px' ParentSubmit={(): void => this.storeselection()}>
+            <PopupBase
-                <div><input type='text' placeholder='Tagname' onChange={(v): void => {
+                title='Add new Tag'
-                    this.value = v.target.value;
+                onHide={this.props.onHide}
-                }}/></div>
+                height='200px'
-                <button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button>
+                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>
         );
     }
@@ -29,7 +42,7 @@ class NewTagPopup extends React.Component<props> {
      * store the filled in form to the backend
      */
     storeselection(): void {
-        callAPI(APINode.Tags, {action: 'createTag', tagname: this.value}, (result: GeneralSuccess) => {
+        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);

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

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

@@ -1,20 +0,0 @@
-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.test.js

@@ -8,18 +8,11 @@ describe('<PopupBase/>', function () {
         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();
+        const events = mockKeyPress();
+
         shallow(<PopupBase onHide={() => func()}/>);
 
         // trigger the keypress event
@@ -29,7 +22,7 @@ describe('<PopupBase/>', function () {
     });
 
     it('test an Enter sumit', function () {
-        mockKeyPress();
+        const events = mockKeyPress();
         const func = jest.fn();
         shallow(<PopupBase ParentSubmit={() => func()}/>);
 

src/elements/Popups/PopupBase.tsx

@@ -4,7 +4,7 @@ import {Line} from '../PageTitle/PageTitle';
 import React, {RefObject} from 'react';
 import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
 
-interface props {
+interface Props {
     width?: string;
     height?: string;
     banner?: JSX.Element;
@@ -16,11 +16,11 @@ interface props {
 /**
  * wrapper class for generic types of popups
  */
-class PopupBase extends React.Component<props> {
+class PopupBase extends React.Component<Props> {
     private wrapperRef: RefObject<HTMLDivElement>;
-    private framedimensions: { minHeight: string | undefined; width: string | undefined; height: string | undefined };
+    private framedimensions: {minHeight: string | undefined; width: string | undefined; height: string | undefined};
 
-    constructor(props: props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {items: []};
@@ -32,9 +32,9 @@ class PopupBase extends React.Component<props> {
 
         // parse style props
         this.framedimensions = {
-            width: (this.props.width ? this.props.width : undefined),
+            width: this.props.width ? this.props.width : undefined,
-            height: (this.props.height ? this.props.height : undefined),
+            height: this.props.height ? this.props.height : undefined,
-            minHeight: (this.props.height ? this.props.height : undefined)
+            minHeight: this.props.height ? this.props.height : undefined
         };
     }
 
@@ -63,10 +63,8 @@ class PopupBase extends React.Component<props> {
                     <div className={style.banner}>{this.props.banner}</div>
                 </div>
 
-                <Line/>
+                <Line />
-                <div className={style.content}>
+                <div className={style.content}>{this.props.children}</div>
-                    {this.props.children}
-                </div>
             </div>
         );
     }
@@ -90,7 +88,9 @@ class PopupBase extends React.Component<props> {
             this.props.onHide();
         } else if (event.key === 'Enter') {
             // call a parentsubmit if defined
-            if (this.props.ParentSubmit) this.props.ParentSubmit();
+            if (this.props.ParentSubmit) {
+                this.props.ParentSubmit();
+            }
         }
     }
 
@@ -98,15 +98,19 @@ class PopupBase extends React.Component<props> {
      * make the element drag and droppable
      */
     dragElement(): void {
-        let xOld = 0, yOld = 0;
+        let xOld = 0,
+            yOld = 0;
 
         const elmnt = this.wrapperRef.current;
-        if (elmnt === null) return;
+        if (elmnt === null) {
-        if (elmnt.firstChild === null) return;
+            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:
@@ -125,9 +129,11 @@ class PopupBase extends React.Component<props> {
             xOld = e.clientX;
             yOld = e.clientY;
             // set the element's new position:
-            if (elmnt === null) return;
+            if (elmnt === null) {
-            elmnt.style.top = (elmnt.offsetTop - dy) + 'px';
+                return;
-            elmnt.style.left = (elmnt.offsetLeft - dx) + 'px';
+            }
+            elmnt.style.top = elmnt.offsetTop - dy + 'px';
+            elmnt.style.left = elmnt.offsetLeft - dx + 'px';
         }
 
         function closeDragElement(): void {

src/elements/Popups/SubmitPopup/SubmitPopup.tsx

@@ -2,17 +2,16 @@ import React from 'react';
 import PopupBase from '../PopupBase';
 import {Button} from '../../GPElements/Button';
 
-interface props {
+interface Props {
     onHide: (_: void) => void;
     submit: (_: void) => void;
 }
 
-export default function SubmitPopup(props: props): JSX.Element {
+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='Submit' color={{backgroundColor: 'green'}} onClick={(): void => props.submit()} />
-            <Button title='Cancel' color={{backgroundColor: 'red'}} onClick={(): void => props.onHide()}/>
+            <Button title='Cancel' color={{backgroundColor: 'red'}} onClick={(): void => props.onHide()} />
         </PopupBase>
     );
-
 }

src/elements/Preview/Preview.module.css

@@ -1,9 +1,19 @@
-.previewtitle {
+.previewText {
-    font-size: smaller;
+    font-size: 15px;
     font-weight: bold;
-    height: 20px;
+    height: 42px;
-    max-width: 266px;
+    width: 100%;
     text-align: center;
+    position: absolute;
+    bottom: 0;
+    background-color: rgba(60, 61, 72, 0.7);
+    color: white;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+
+    border-top-width: 1px;
+    border-top-color: #3c3d48;
+    border-top-style: solid;
 }
 
 .previewpic {
@@ -12,6 +22,8 @@
     min-width: 266px;
     overflow: hidden;
     text-align: center;
+
+    border-radius: 20px;
 }
 
 .loadAnimation {
@@ -38,6 +50,7 @@
     margin-left: 25px;
     margin-top: 25px;
     opacity: 0.85;
+    position: relative;
 }
 
 .videopreview:hover {

src/elements/Preview/Preview.tsx

@@ -4,10 +4,12 @@ import {Spinner} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
 import GlobalInfos from '../../utils/GlobalInfos';
 import {APINode, callAPIPlain} from '../../utils/Api';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faPhotoVideo} from '@fortawesome/free-solid-svg-icons';
 
 interface PreviewProps {
     name: string;
-    movie_id: number;
+    movieId: number;
 }
 
 interface PreviewState {
@@ -28,7 +30,7 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
     }
 
     componentDidMount(): void {
-        callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movie_id}, (result) => {
+        callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movieId}, (result) => {
             this.setState({
                 previewpicture: result
             });
@@ -38,39 +40,48 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
     render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
-            <Link to={'/player/' + this.props.movie_id}>
+            <Link to={'/player/' + this.props.movieId}>
                 <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
-                    <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
+                    <div className={style.previewpic}>{this.renderPic()}</div>
-                    <div className={style.previewpic}>
+                    <div className={style.previewText + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
-                        {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>
-
         );
     }
+
+    private renderPic(): JSX.Element {
+        if (this.state.previewpicture === '') {
+            return (
+                <FontAwesomeIcon
+                    style={{
+                        color: 'white',
+                        marginTop: '55px'
+                    }}
+                    icon={faPhotoVideo}
+                    size='5x'
+                />
+            );
+        } else if (this.state.previewpicture === null) {
+            return (
+                <span className={style.loadAnimation}>
+                    <Spinner animation='border' />
+                </span>
+            );
+        } else {
+            return <img className={style.previewimage} src={this.state.previewpicture} alt='Pic loading.' />;
+        }
+    }
 }
 
 /**
  * Component for a Tag-name tile (used in category page)
  */
-export class TagPreview extends React.Component<{ name: string }> {
+export class TagPreview extends React.Component<{name: string}> {
     render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
-            <div
+            <div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
-                className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
+                <div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
-                <div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
-                    {this.props.name}
-                </div>
             </div>
         );
     }

src/elements/Preview/Previw.test.js

@@ -5,7 +5,7 @@ import Preview, {TagPreview} from './Preview';
 
 describe('<Preview/>', function () {
     it('renders without crashing ', function () {
-        const wrapper = shallow(<Preview movie_id={1}/>);
+        const wrapper = shallow(<Preview movieId={1}/>);
         wrapper.unmount();
     });
 
@@ -17,7 +17,7 @@ describe('<Preview/>', function () {
         });
         global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
 
-        const wrapper = shallow(<Preview name='test' movie_id={1}/>);
+        const wrapper = shallow(<Preview name='test' movieId={1}/>);
 
         // now called 1 times
         expect(global.fetch).toHaveBeenCalledTimes(1);
@@ -35,7 +35,7 @@ describe('<Preview/>', function () {
     });
 
     it('spinner loads correctly', function () {
-        const wrapper = shallow(<Preview movie_id={1}/>);
+        const wrapper = shallow(<Preview movieId={1}/>);
 
         // expect load animation to be visible
         expect(wrapper.find('.loadAnimation')).toHaveLength(1);

src/elements/SideBar/SideBar.tsx

@@ -13,11 +13,16 @@ interface SideBarProps {
 class SideBar extends React.Component<SideBarProps> {
     render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
-        const classnn = style.sideinfogeometry + ' ' + (this.props.hiddenFrame === undefined ? style.sideinfo + ' ' + themeStyle.secbackground : '');
+        const classnn =
+            style.sideinfogeometry +
+            ' ' +
+            (this.props.hiddenFrame === undefined ? style.sideinfo + ' ' + themeStyle.secbackground : '');
 
-        return (<div className={classnn} style={{width: this.props.width}}>
+        return (
-            {this.props.children}
+            <div className={classnn} style={{width: this.props.width}}>
-        </div>);
+                {this.props.children}
+            </div>
+        );
     }
 }
 
@@ -27,9 +32,7 @@ class SideBar extends React.Component<SideBarProps> {
 export class SideBarTitle extends React.Component {
     render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
-        return (
+        return <div className={style.sidebartitle + ' ' + themeStyle.subtextcolor}>{this.props.children}</div>;
-            <div className={style.sidebartitle + ' ' + themeStyle.subtextcolor}>{this.props.children}</div>
-        );
     }
 }
 
@@ -40,8 +43,9 @@ export class SideBarItem extends React.Component {
     render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
-            <div
+            <div className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>
-                className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>{this.props.children}</div>
+                {this.props.children}
+            </div>
         );
     }
 }

src/elements/Tag/Tag.test.js

@@ -6,12 +6,12 @@ import {shallow} from 'enzyme';
 
 describe('<Tag/>', function () {
     it('renders without crashing ', function () {
-        const wrapper = shallow(<Tag tagInfo={{tag_name: 'testname', tag_id: 1}}/>);
+        const wrapper = shallow(<Tag tagInfo={{TagName: 'testname', TagId: 1}}/>);
         wrapper.unmount();
     });
 
     it('renders childs correctly', function () {
-        const wrapper = shallow(<Tag tagInfo={{tag_name: 'test', tag_id: 1}}/>);
+        const wrapper = shallow(<Tag tagInfo={{TagName: 'test', TagId: 1}}/>);
         expect(wrapper.children().text()).toBe('test');
     });
 
@@ -19,7 +19,7 @@ describe('<Tag/>', function () {
         const func = jest.fn();
 
         const wrapper = shallow(<Tag
-            tagInfo={{tag_name: 'test', tag_id: 1}}
+            tagInfo={{TagName: 'test', TagId: 1}}
             onclick={() => {func();}}>test</Tag>);
 
         expect(func).toBeCalledTimes(0);

src/elements/Tag/Tag.tsx

@@ -5,8 +5,8 @@ import {Link} from 'react-router-dom';
 import {TagType} from '../../types/VideoTypes';
 
 interface props {
-    onclick?: (_: string) => void
+    onclick?: (_: string) => void;
-    tagInfo: TagType
+    tagInfo: TagType;
 }
 
 /**
@@ -17,18 +17,15 @@ class Tag extends React.Component<props> {
         if (this.props.onclick) {
             return this.renderButton();
         } else {
-            return (
+            return <Link to={'/categories/' + this.props.tagInfo.TagId}>{this.renderButton()}</Link>;
-                <Link to={'/categories/' + this.props.tagInfo.tag_id}>
-                    {this.renderButton()}
-                </Link>
-            );
         }
     }
 
     renderButton(): JSX.Element {
         return (
-            <button className={styles.tagbtn} onClick={(): void => this.TagClick()}
+            <button className={styles.tagbtn} onClick={(): void => this.TagClick()} data-testid='Test-Tag'>
-                    data-testid='Test-Tag'>{this.props.tagInfo.tag_name}</button>
+                {this.props.tagInfo.TagName}
+            </button>
         );
     }
 
@@ -38,7 +35,7 @@ class Tag extends React.Component<props> {
     TagClick(): void {
         if (this.props.onclick) {
             // call custom onclick handling
-            this.props.onclick(this.props.tagInfo.tag_name); // todo check if param is neccessary
+            this.props.onclick(this.props.tagInfo.TagName); // todo check if param is neccessary
             return;
         }
     }

src/elements/VideoContainer/VideoContainer.tsx

@@ -3,8 +3,8 @@ import Preview from '../Preview/Preview';
 import style from './VideoContainer.module.css';
 import {VideoTypes} from '../../types/ApiTypes';
 
-interface props {
+interface Props {
-    data: VideoTypes.VideoUnloadedType[]
+    data: VideoTypes.VideoUnloadedType[];
 }
 
 interface state {
@@ -16,11 +16,11 @@ interface state {
  * A videocontainer storing lots of Preview elements
  * includes scroll handling and loading of preview infos
  */
-class VideoContainer extends React.Component<props, state> {
+class VideoContainer extends React.Component<Props, state> {
     // stores current index of loaded elements
     loadindex: number = 0;
 
-    constructor(props: props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
@@ -38,15 +38,11 @@ class VideoContainer extends React.Component<props, state> {
     render(): JSX.Element {
         return (
             <div className={style.maincontent}>
-                {this.state.loadeditems.map(elem => (
+                {this.state.loadeditems.map((elem) => (
-                    <Preview
+                    <Preview key={elem.MovieId} name={elem.MovieName} movieId={elem.MovieId} />
-                        key={elem.movie_id}
-                        name={elem.movie_name}
-                        movie_id={elem.movie_id}/>
                 ))}
                 {/*todo css for no items to show*/}
-                {this.state.loadeditems.length === 0 ?
+                {this.state.loadeditems.length === 0 ? 'no items to show!' : null}
-                    'no items to show!' : null}
                 {this.props.children}
             </div>
         );
@@ -73,13 +69,9 @@ class VideoContainer extends React.Component<props, state> {
         }
 
         this.setState({
-            loadeditems: [
+            loadeditems: [...this.state.loadeditems, ...ret]
-                ...this.state.loadeditems,
-                ...ret
-            ]
         });
 
-
         this.loadindex += nr;
     }
 

src/index.tsx

@@ -3,11 +3,11 @@ 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;
+global.console.log = process.env.NODE_ENV !== 'development' ? (_: string | number | boolean): void => {} : global.console.log;
 
 ReactDOM.render(
     <React.StrictMode>
-        <App/>
+        <App />
     </React.StrictMode>,
     document.getElementById('root')
 );

src/pages/ActorOverviewPage/ActorOverviewPage.tsx

@@ -8,16 +8,15 @@ import style from './ActorOverviewPage.module.css';
 import {Button} from '../../elements/GPElements/Button';
 import NewActorPopup from '../../elements/Popups/NewActorPopup/NewActorPopup';
 
-interface props {
+interface Props {}
-}
 
 interface state {
     actors: ActorType[];
-    NActorPopupVisible: boolean
+    NActorPopupVisible: boolean;
 }
 
-class ActorOverviewPage extends React.Component<props, state> {
+class ActorOverviewPage extends React.Component<Props, state> {
-    constructor(props: props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
@@ -33,24 +32,29 @@ class ActorOverviewPage extends React.Component<props, state> {
     render(): JSX.Element {
         return (
             <>
-                <PageTitle title='Actors' subtitle={this.state.actors.length + ' Actors'}/>
+                <PageTitle title='Actors' subtitle={this.state.actors.length + ' Actors'} />
                 <SideBar>
-                    <Button title='Add Actor' onClick={(): void => this.setState({NActorPopupVisible: true})}/>
+                    <Button title='Add Actor' onClick={(): void => this.setState({NActorPopupVisible: true})} />
                 </SideBar>
                 <div className={style.container}>
-                    {this.state.actors.map((el) => (<ActorTile key={el.actor_id} actor={el}/>))}
+                    {this.state.actors.map((el) => (
+                        <ActorTile key={el.ActorId} actor={el} />
+                    ))}
                 </div>
-                {this.state.NActorPopupVisible ?
+                {this.state.NActorPopupVisible ? (
-                    <NewActorPopup onHide={(): void => {
+                    <NewActorPopup
-                        this.setState({NActorPopupVisible: false});
+                        onHide={(): void => {
-                        this.fetchAvailableActors(); // refetch actors
+                            this.setState({NActorPopupVisible: false});
-                    }}/> : null}
+                            this.fetchAvailableActors(); // refetch actors
+                        }}
+                    />
+                ) : null}
             </>
         );
     }
 
     fetchAvailableActors(): void {
-        callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, result => {
+        callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, (result) => {
             this.setState({actors: result});
         });
     }

src/pages/ActorPage/ActorPage.test.js

@@ -10,13 +10,13 @@ describe('<ActorPage/>', function () {
 
     it('fetch infos', function () {
         callAPIMock({
-            videos: [{
+            Videos: [{
-                movie_id: 0,
+                MovieId: 0,
-                movie_name: 'test'
+                MovieName: 'test'
-            }], info: {
+            }], Info: {
-                thumbnail: '',
+                Thumbnail: '',
-                name: '',
+                Name: '',
-                actor_id: 0
+                ActorId: 0
             }
         });
 

src/pages/ActorPage/ActorPage.tsx

@@ -13,47 +13,42 @@ import {Button} from '../../elements/GPElements/Button';
 import {ActorTypes, VideoTypes} from '../../types/ApiTypes';
 
 interface state {
-    data: VideoTypes.VideoUnloadedType[],
+    data: VideoTypes.VideoUnloadedType[];
-    actor: ActorType
+    actor: ActorType;
 }
 
 /**
  * empty default props with id in url
  */
-interface props extends RouteComponentProps<{ id: string }> {
+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> {
+export class ActorPage extends React.Component<Props, state> {
-    constructor(props: props) {
+    constructor(props: Props) {
         super(props);
 
-        this.state = {data: [], actor: {actor_id: 0, name: '', thumbnail: ''}};
+        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}>
+                <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'/>
+                            <Button onClick={(): void => {}} title='Go to Actor overview' />
                         </Link>
                     </span>
                 </PageTitle>
                 <SideBar>
                     <div className={style.pic}>
-                        <FontAwesomeIcon style={{color: 'white'}} icon={faUser} size='10x'/>
+                        <FontAwesomeIcon style={{color: 'white'}} icon={faUser} size='10x' />
                     </div>
                     <SideBarTitle>Attention: This is an early preview!</SideBarTitle>
                 </SideBar>
-                {this.state.data.length !== 0 ?
+                {this.state.data.length !== 0 ? <VideoContainer data={this.state.data} /> : <div>No Data found!</div>}
-                    <VideoContainer
-                        data={this.state.data}/> :
-                    <div>No Data found!</div>}
             </>
         );
     }
@@ -66,15 +61,19 @@ export class ActorPage extends React.Component<props, state> {
      * request more actor info from backend
      */
     getActorInfo(): void {
-        callAPI(APINode.Actor, {
+        callAPI(
-            action: 'getActorInfo',
+            APINode.Actor,
-            actorid: this.props.match.params.id
+            {
-        }, (result: ActorTypes.videofetchresult) => {
+                action: 'getActorInfo',
-            this.setState({
+                ActorId: parseInt(this.props.match.params.id, 10)
-                data: result.videos ? result.videos : [],
+            },
-                actor: result.info
+            (result: ActorTypes.videofetchresult) => {
-            });
+                this.setState({
-        });
+                    data: result.Videos ? result.Videos : [],
+                    actor: result.Info
+                });
+            }
+        );
     }
 }
 

src/pages/AuthenticationPage/AuthenticationPage.module.css

@@ -0,0 +1,56 @@
+.main {
+    background-color: #00b3ff;
+    margin-left: calc(50% - 125px);
+    margin-top: 5%;
+    padding-bottom: 15px;
+    width: 250px;
+    text-align: center;
+    border-radius: 10px;
+}
+
+.loginText {
+    font-size: xx-large;
+    text-align: center;
+    margin-bottom: 15px;
+    font-weight: bolder;
+}
+
+.openmediacenterlabel {
+    margin-top: 5%;
+    text-align: center;
+    font-size: xxx-large;
+    font-weight: bold;
+    text-transform: capitalize;
+    color: white;
+}
+
+.input {
+    margin-left: 10px;
+    margin-right: 10px;
+    width: calc(100% - 20px);
+    background: transparent;
+    border-width: 0 0 1px 0;
+    color: #505050;
+    border-color: #505050;
+    text-align: center;
+    margin-bottom: 25px;
+    font-size: larger;
+}
+
+.submitbtn {
+    margin-top: 10px;
+}
+
+::placeholder {
+    color: #505050;
+    opacity: 1;
+}
+
+*:focus {
+    outline: none;
+}
+
+.input:focus {
+    color: black;
+    border-color: black;
+}

src/pages/AuthenticationPage/AuthenticationPage.test.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import AuthenticationPage from './AuthenticationPage';
+import {shallow} from 'enzyme';
+
+describe('<AuthenticationPage/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<AuthenticationPage submit={() => {
+        }}/>);
+        wrapper.unmount();
+    });
+
+    it('test button click', function () {
+        const func = jest.fn();
+        const wrapper = shallow(<AuthenticationPage onSuccessLogin={func}/>);
+        wrapper.instance().authenticate = jest.fn(() => {
+            wrapper.instance().props.onSuccessLogin()
+        });
+        wrapper.setState({pwdText: 'testpwd'});
+
+        wrapper.find('Button').simulate('click');
+
+        expect(func).toHaveBeenCalledTimes(1);
+    });
+
+    it('test fail authenticate', function () {
+        const events = mockKeyPress();
+
+        const helpers = require('../../utils/Api');
+        helpers.refreshAPIToken = jest.fn().mockImplementation((callback, force, pwd) => {
+            callback('there was an error')
+        });
+
+        const wrapper = shallow(<AuthenticationPage/>);
+
+        events.keyup({key: 'Enter'});
+
+        expect(wrapper.state().wrongPWDInfo).toBe(true);
+    });
+
+    it('test success authenticate', function () {
+        const events = mockKeyPress();
+        const func = jest.fn()
+
+        const helpers = require('../../utils/Api');
+        helpers.refreshAPIToken = jest.fn().mockImplementation((callback, force, pwd) => {
+            callback('')
+        });
+
+        const wrapper = shallow(<AuthenticationPage onSuccessLogin={func}/>);
+
+        events.keyup({key: 'Enter'});
+
+        expect(wrapper.state().wrongPWDInfo).toBe(false);
+        expect(func).toHaveBeenCalledTimes(1);
+    });
+});

src/pages/AuthenticationPage/AuthenticationPage.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import {Button} from '../../elements/GPElements/Button';
+import style from './AuthenticationPage.module.css';
+import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
+import {refreshAPIToken} from '../../utils/Api';
+import {faTimes} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+
+interface state {
+    pwdText: string;
+    wrongPWDInfo: boolean;
+}
+
+interface Props {
+    onSuccessLogin: () => void;
+}
+
+class AuthenticationPage extends React.Component<Props, state> {
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            pwdText: '',
+            wrongPWDInfo: false
+        };
+
+        this.keypress = this.keypress.bind(this);
+        this.authenticate = this.authenticate.bind(this);
+    }
+
+    componentDidMount(): void {
+        addKeyHandler(this.keypress);
+    }
+
+    componentWillUnmount(): void {
+        removeKeyHandler(this.keypress);
+    }
+
+    render(): JSX.Element {
+        return (
+            <>
+                <div className={style.openmediacenterlabel}>OpenMediaCenter</div>
+                <div className={style.main}>
+                    <div className={style.loginText}>Login</div>
+                    <div>
+                        <input
+                            className={style.input}
+                            placeholder='Password'
+                            type='password'
+                            onChange={(ch): void => this.setState({pwdText: ch.target.value})}
+                            value={this.state.pwdText}
+                        />
+                        {this.state.wrongPWDInfo ? (
+                            <div>
+                                <FontAwesomeIcon
+                                    style={{
+                                        color: 'red',
+                                        marginRight: '7px'
+                                    }}
+                                    icon={faTimes}
+                                    size='1x'
+                                />
+                                wrong password!
+                            </div>
+                        ) : null}
+                    </div>
+                    <div className={style.submitbtn}>
+                        <Button title='Submit' onClick={this.authenticate} />
+                    </div>
+                </div>
+            </>
+        );
+    }
+
+    /**
+     * request a new token and check if pwd was valid
+     */
+    authenticate(): void {
+        refreshAPIToken(
+            (error) => {
+                if (error !== '') {
+                    this.setState({wrongPWDInfo: true});
+
+                    // set timeout to make the info auto-disappearing
+                    setTimeout(() => {
+                        this.setState({wrongPWDInfo: false});
+                    }, 2000);
+                } else {
+                    this.props.onSuccessLogin();
+                }
+            },
+            true,
+            this.state.pwdText
+        );
+    }
+
+    /**
+     * key event handling
+     * @param event keyevent
+     */
+    keypress(event: KeyboardEvent): void {
+        // hide if escape is pressed
+        if (event.key === 'Enter') {
+            // call submit
+            this.authenticate();
+        }
+    }
+}
+
+export default AuthenticationPage;

src/pages/CategoryPage/CategoryPage.tsx

@@ -12,10 +12,10 @@ class CategoryPage extends React.Component {
         return (
             <Switch>
                 <Route path='/categories/:id'>
-                    <CategoryViewWR/>
+                    <CategoryViewWR />
                 </Route>
                 <Route path='/categories'>
-                    <TagView/>
+                    <TagView />
                 </Route>
             </Switch>
         );

src/pages/CategoryPage/CategoryView.tsx

@@ -11,7 +11,7 @@ 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 CategoryViewProps extends RouteComponentProps<{id: string}> {}
 
 interface CategoryViewState {
     loaded: boolean;
@@ -34,42 +34,51 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
     }
 
     componentDidMount(): void {
-        this.fetchVideoData(parseInt(this.props.match.params.id));
+        this.fetchVideoData(parseInt(this.props.match.params.id, 10));
     }
 
-    componentDidUpdate(prevProps: Readonly<CategoryViewProps>, prevState: Readonly<CategoryViewState>): void {
+    componentDidUpdate(prevProps: Readonly<CategoryViewProps>): void {
         // trigger video refresh if id changed
         if (prevProps.match.params.id !== this.props.match.params.id) {
-            this.setState({loaded: false});
+            this.reloadVideoData();
-            this.fetchVideoData(parseInt(this.props.match.params.id));
         }
     }
 
+    reloadVideoData(): void {
+        this.setState({loaded: false});
+        this.fetchVideoData(parseInt(this.props.match.params.id, 10));
+    }
+
     render(): JSX.Element {
         return (
             <>
-                <PageTitle
+                <PageTitle title='Categories' subtitle={this.videodata.length + ' Videos'} />
-                    title='Categories'
-                    subtitle={this.videodata.length + ' Videos'}/>
 
                 <SideBar>
                     <SideBarTitle>Default Tags:</SideBarTitle>
-                    <Tag tagInfo={DefaultTags.all}/>
+                    <Tag tagInfo={DefaultTags.all} />
-                    <Tag tagInfo={DefaultTags.fullhd}/>
+                    <Tag tagInfo={DefaultTags.fullhd} />
-                    <Tag tagInfo={DefaultTags.hd}/>
+                    <Tag tagInfo={DefaultTags.hd} />
-                    <Tag tagInfo={DefaultTags.lowq}/>
+                    <Tag tagInfo={DefaultTags.lowq} />
 
-                    <Line/>
+                    <Line />
-                    <Button title='Delete Tag' onClick={(): void => {this.deleteTag(false);}} color={{backgroundColor: 'red'}}/>
+                    <Button
-                </SideBar>
+                        title='Delete Tag'
-                {this.state.loaded ?
-                    <VideoContainer
-                        data={this.videodata}/> : null}
-
-                <button data-testid='backbtn' className='btn btn-success'
                         onClick={(): void => {
-                            this.props.history.push('/categories');
+                            this.deleteTag(false);
-                        }}>Back to Categories
+                        }}
+                        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()}
             </>
@@ -78,9 +87,14 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
 
     private handlePopups(): JSX.Element {
         if (this.state.submitForceDelete) {
-            return (<SubmitPopup
+            return (
-                onHide={(): void => this.setState({submitForceDelete: false})}
+                <SubmitPopup
-                submit={(): void => {this.deleteTag(true);}}/>);
+                    onHide={(): void => this.setState({submitForceDelete: false})}
+                    submit={(): void => {
+                        this.deleteTag(true);
+                    }}
+                />
+            );
         } else {
             return <></>;
         }
@@ -91,7 +105,7 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
      * @param id tagid
      */
     private fetchVideoData(id: number): void {
-        callAPI<VideoTypes.VideoUnloadedType[]>(APINode.Video, {action: 'getMovies', tag: id}, result => {
+        callAPI<VideoTypes.VideoUnloadedType[]>(APINode.Video, {action: 'getMovies', tag: id}, (result) => {
             this.videodata = result;
             this.setState({loaded: true});
         });
@@ -101,19 +115,23 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
      * delete the current tag
      */
     private deleteTag(force: boolean): void {
-        callAPI<GeneralSuccess>(APINode.Tags, {
+        callAPI<GeneralSuccess>(
-            action: 'deleteTag',
+            APINode.Tags,
-            tagId: parseInt(this.props.match.params.id),
+            {
-            force: force
+                action: 'deleteTag',
-        }, result => {
+                TagId: parseInt(this.props.match.params.id, 10),
-            console.log(result.result);
+                Force: force
-            if (result.result === 'success') {
+            },
-                this.props.history.push('/categories');
+            (result) => {
-            } else if (result.result === 'not empty tag') {
+                console.log(result.result);
-                // show submisison tag to ask if really delete
+                if (result.result === 'success') {
-                this.setState({submitForceDelete: true});
+                    this.props.history.push('/categories');
+                } else if (result.result === 'not empty tag') {
+                    // show submisison tag to ask if really delete
+                    this.setState({submitForceDelete: true});
+                }
             }
-        });
+        );
     }
 }
 

src/pages/CategoryPage/TagView.tsx

@@ -15,10 +15,10 @@ interface TagViewState {
     popupvisible: boolean;
 }
 
-interface props {}
+interface Props {}
 
-class TagView extends React.Component<props, TagViewState> {
+class TagView extends React.Component<Props, TagViewState> {
-    constructor(props: props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
@@ -34,30 +34,33 @@ class TagView extends React.Component<props, TagViewState> {
     render(): JSX.Element {
         return (
             <>
-                <PageTitle
+                <PageTitle title='Categories' subtitle={this.state.loadedtags.length + ' different Tags'} />
-                    title='Categories'
-                    subtitle={this.state.loadedtags.length + ' different Tags'}/>
 
                 <SideBar>
                     <SideBarTitle>Default Tags:</SideBarTitle>
-                    <Tag tagInfo={DefaultTags.all}/>
+                    <Tag tagInfo={DefaultTags.all} />
-                    <Tag tagInfo={DefaultTags.fullhd}/>
+                    <Tag tagInfo={DefaultTags.fullhd} />
-                    <Tag tagInfo={DefaultTags.hd}/>
+                    <Tag tagInfo={DefaultTags.hd} />
-                    <Tag tagInfo={DefaultTags.lowq}/>
+                    <Tag tagInfo={DefaultTags.lowq} />
 
-                    <Line/>
+                    <Line />
-                    <button data-testid='btnaddtag' className='btn btn-success' onClick={(): void => {
+                    <button
-                        this.setState({popupvisible: true});
+                        data-testid='btnaddtag'
-                    }}>Add a new Tag!
+                        className='btn btn-success'
+                        onClick={(): void => {
+                            this.setState({popupvisible: true});
+                        }}>
+                        Add a new Tag!
                     </button>
                 </SideBar>
                 <div className={videocontainerstyle.maincontent}>
-                    {this.state.loadedtags ?
+                    {this.state.loadedtags
-                        this.state.loadedtags.map((m) => (
+                        ? this.state.loadedtags.map((m) => (
-                            <Link to={'/categories/' + m.tag_id} key={m.tag_id}>
+                              <Link to={'/categories/' + m.TagId} key={m.TagId}>
-                                <TagPreview name={m.tag_name}/></Link>
+                                  <TagPreview name={m.TagName} />
-                        )) :
+                              </Link>
-                        'loading'}
+                          ))
+                        : 'loading'}
                 </div>
                 {this.handlePopups()}
             </>
@@ -68,7 +71,7 @@ class TagView extends React.Component<props, TagViewState> {
      * load all available tags from db.
      */
     loadTags(): void {
-        callAPI<TagType[]>(APINode.Tags, {action: 'getAllTags'}, result => {
+        callAPI<TagType[]>(APINode.Tags, {action: 'getAllTags'}, (result) => {
             this.setState({loadedtags: result});
         });
     }
@@ -76,13 +79,15 @@ class TagView extends React.Component<props, TagViewState> {
     private handlePopups(): JSX.Element {
         if (this.state.popupvisible) {
             return (
-                <NewTagPopup onHide={(): void => {
+                <NewTagPopup
-                    this.setState({popupvisible: false});
+                    onHide={(): void => {
-                    this.loadTags();
+                        this.setState({popupvisible: false});
-                }}/>
+                        this.loadTags();
+                    }}
+                />
             );
         } else {
-            return (<></>);
+            return <></>;
         }
     }
 }

src/pages/HomePage/HomePage.tsx

@@ -10,39 +10,35 @@ import {Route, Switch, withRouter} from 'react-router-dom';
 import {RouteComponentProps} from 'react-router';
 import SearchHandling from './SearchHandling';
 import {VideoTypes} from '../../types/ApiTypes';
+import {DefaultTags} from '../../types/GeneralTypes';
 
-interface props extends RouteComponentProps {}
+interface Props extends RouteComponentProps {}
 
 interface state {
-    sideinfo: {
+    sideinfo: VideoTypes.startDataType;
-        videonr: number,
+    subtitle: string;
-        fullhdvideonr: number,
+    data: VideoTypes.VideoUnloadedType[];
-        hdvideonr: number,
+    selectionnr: number;
-        sdvideonr: number,
-        tagnr: number
-    },
-    subtitle: string,
-    data: VideoTypes.VideoUnloadedType[],
-    selectionnr: number
 }
 
 /**
  * The home page component showing on the initial pageload
  */
-export class HomePage extends React.Component<props, state> {
+export class HomePage extends React.Component<Props, state> {
     /** keyword variable needed temporary store search keyword */
     keyword = '';
 
-    constructor(props: props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
             sideinfo: {
-                videonr: 0,
+                VideoNr: 0,
-                fullhdvideonr: 0,
+                FullHdNr: 0,
-                hdvideonr: 0,
+                HDNr: 0,
-                sdvideonr: 0,
+                SDNr: 0,
-                tagnr: 0
+                DifferentTags: 0,
+                Tagged: 0
             },
             subtitle: 'All Videos',
             data: [],
@@ -52,7 +48,7 @@ export class HomePage extends React.Component<props, state> {
 
     componentDidMount(): void {
         // initial get of all videos
-        this.fetchVideoData('All');
+        this.fetchVideoData(DefaultTags.all.TagId);
         this.fetchStartData();
     }
 
@@ -62,15 +58,14 @@ export class HomePage extends React.Component<props, state> {
      *
      * @param tag tag to fetch videos
      */
-    fetchVideoData(tag: string): void {
+    fetchVideoData(tag: number): void {
         callAPI(APINode.Video, {action: 'getMovies', tag: tag}, (result: VideoTypes.VideoUnloadedType[]) => {
             this.setState({
                 data: []
             });
             this.setState({
                 data: result,
-                selectionnr: result.length,
+                selectionnr: result.length
-                subtitle: `${tag} Videos`
             });
         });
     }
@@ -80,64 +75,90 @@ export class HomePage extends React.Component<props, state> {
      */
     fetchStartData(): void {
         callAPI(APINode.Video, {action: 'getStartData'}, (result: VideoTypes.startDataType) => {
-            this.setState({
+            this.setState({sideinfo: result});
-                sideinfo: {
-                    videonr: result['total'],
-                    fullhdvideonr: result['fullhd'],
-                    hdvideonr: result['hd'],
-                    sdvideonr: result['sd'],
-                    tagnr: result['tags']
-                }
-            });
         });
     }
 
-
     render(): JSX.Element {
         return (
             <>
                 <Switch>
                     <Route path='/search/:name'>
-                        <SearchHandling/>
+                        <SearchHandling />
                     </Route>
                     <Route path='/'>
-                        <PageTitle
+                        <PageTitle title='Home Page' subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
-                            title='Home Page'
+                            <form
-                            subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
+                                className={'form-inline ' + style.searchform}
-                            <form className={'form-inline ' + style.searchform} onSubmit={(e): void => {
+                                onSubmit={(e): void => {
-                                e.preventDefault();
+                                    e.preventDefault();
-                                this.props.history.push('/search/' + this.keyword);
+                                    this.props.history.push('/search/' + this.keyword);
-                            }}>
+                                }}>
-                                <input data-testid='searchtextfield' className='form-control mr-sm-2'
+                                <input
-                                       type='text' placeholder='Search'
+                                    data-testid='searchtextfield'
-                                       onChange={(e): void => {
+                                    className='form-control mr-sm-2'
-                                           this.keyword = e.target.value;
+                                    type='text'
-                                       }}/>
+                                    placeholder='Search'
-                                <button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search</button>
+                                    onChange={(e): void => {
+                                        this.keyword = e.target.value;
+                                    }}
+                                />
+                                <button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>
+                                    Search
+                                </button>
                             </form>
                         </PageTitle>
                         <SideBar>
                             <SideBarTitle>Infos:</SideBarTitle>
-                            <Line/>
+                            <Line />
-                            <SideBarItem><b>{this.state.sideinfo.videonr}</b> Videos Total!</SideBarItem>
+                            <SideBarItem>
-                            <SideBarItem><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</SideBarItem>
+                                <b>{this.state.sideinfo.VideoNr}</b> Videos Total!
-                            <SideBarItem><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</SideBarItem>
+                            </SideBarItem>
-                            <SideBarItem><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</SideBarItem>
+                            <SideBarItem>
-                            <SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
+                                <b>{this.state.sideinfo.FullHdNr}</b> FULL-HD Videos!
-                            <Line/>
+                            </SideBarItem>
+                            <SideBarItem>
+                                <b>{this.state.sideinfo.HDNr}</b> HD Videos!
+                            </SideBarItem>
+                            <SideBarItem>
+                                <b>{this.state.sideinfo.SDNr}</b> SD Videos!
+                            </SideBarItem>
+                            <SideBarItem>
+                                <b>{this.state.sideinfo.DifferentTags}</b> different Tags!
+                            </SideBarItem>
+                            <Line />
                             <SideBarTitle>Default Tags:</SideBarTitle>
-                            <Tag tagInfo={{tag_name: 'All', tag_id: -1}} onclick={(): void => this.fetchVideoData('All')}/>
+                            <Tag
-                            <Tag tagInfo={{tag_name: 'FullHd', tag_id: -1}} onclick={(): void => this.fetchVideoData('FullHd')}/>
+                                tagInfo={{TagName: 'All', TagId: DefaultTags.all.TagId}}
-                            <Tag tagInfo={{tag_name: 'LowQuality', tag_id: -1}} onclick={(): void => this.fetchVideoData('LowQuality')}/>
+                                onclick={(): void => {
-                            <Tag tagInfo={{tag_name: 'HD', tag_id: -1}} onclick={(): void => this.fetchVideoData('HD')}/>
+                                    this.fetchVideoData(DefaultTags.all.TagId);
+                                    this.setState({subtitle: 'All Videos'});
+                                }}
+                            />
+                            <Tag
+                                tagInfo={{TagName: 'Full Hd', TagId: DefaultTags.fullhd.TagId}}
+                                onclick={(): void => {
+                                    this.fetchVideoData(DefaultTags.fullhd.TagId);
+                                    this.setState({subtitle: 'Full Hd Videos'});
+                                }}
+                            />
+                            <Tag
+                                tagInfo={{TagName: 'Low Quality', TagId: DefaultTags.lowq.TagId}}
+                                onclick={(): void => {
+                                    this.fetchVideoData(DefaultTags.lowq.TagId);
+                                    this.setState({subtitle: 'Low Quality Videos'});
+                                }}
+                            />
+                            <Tag
+                                tagInfo={{TagName: 'HD', TagId: DefaultTags.hd.TagId}}
+                                onclick={(): void => {
+                                    this.fetchVideoData(DefaultTags.hd.TagId);
+                                    this.setState({subtitle: 'HD Videos'});
+                                }}
+                            />
                         </SideBar>
-                        {this.state.data.length !== 0 ?
+                        {this.state.data.length !== 0 ? <VideoContainer data={this.state.data} /> : <div>No Data found!</div>}
-                            <VideoContainer
+                        <div className={style.rightinfo} />
-                                data={this.state.data}/> :
-                            <div>No Data found!</div>}
-                        <div className={style.rightinfo}>
-
-                        </div>
                     </Route>
                 </Switch>
             </>

src/pages/HomePage/SearchHandling.tsx

@@ -11,14 +11,14 @@ interface params {
     name: string;
 }
 
-interface props extends RouteComponentProps<params> {}
+interface Props extends RouteComponentProps<params> {}
 
 interface state {
     data: VideoTypes.VideoUnloadedType[];
 }
 
-export class SearchHandling extends React.Component<props, state> {
+export class SearchHandling extends React.Component<Props, state> {
-    constructor(props: props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
@@ -33,8 +33,8 @@ export class SearchHandling extends React.Component<props, state> {
     render(): JSX.Element {
         return (
             <>
-                <PageTitle title='Search' subtitle={this.props.match.params.name + ': ' + this.state.data.length}/>
+                <PageTitle title='Search' subtitle={this.props.match.params.name + ': ' + this.state.data.length} />
-                <SideBar hiddenFrame/>
+                <SideBar hiddenFrame />
                 {this.getVideoData()}
             </>
         );
@@ -45,11 +45,9 @@ export class SearchHandling extends React.Component<props, state> {
      */
     getVideoData(): JSX.Element {
         if (this.state.data.length !== 0) {
-            return (
+            return <VideoContainer data={this.state.data} />;
-                <VideoContainer data={this.state.data}/>
-            );
         } else {
-            return (<div>No Data found!</div>);
+            return <div>No Data found!</div>;
         }
     }
 

src/pages/Player/Player.test.js

@@ -190,15 +190,15 @@ describe('<Player/>', function () {
         const wrapper = instance();
         global.callAPIMock({result: 'success'});
 
-        wrapper.setState({suggesttag: [{tag_name: 'test', tag_id: 1}]}, () => {
+        wrapper.setState({suggesttag: [{TagName: 'test', TagId: 1}]}, () => {
             // mock funtion should have not been called
             expect(callAPI).toBeCalledTimes(0);
-            wrapper.find('Tag').findWhere(p => p.props().tagInfo.tag_name === 'test').dive().simulate('click');
+            wrapper.find('Tag').findWhere(p => p.props().tagInfo.TagName === 'test').dive().simulate('click');
             // mock function should have been called once
             expect(callAPI).toBeCalledTimes(1);
 
             // expect tag added to video tags
-            expect(wrapper.state().tags).toMatchObject([{tag_name: 'test'}]);
+            expect(wrapper.state().tags).toMatchObject([{TagName: 'test'}]);
             // expect tag to be removed from tag suggestions
             expect(wrapper.state().suggesttag).toHaveLength(0);
         });

src/pages/Player/Player.tsx

@@ -13,28 +13,29 @@ import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
 import AddActorPopup from '../../elements/Popups/AddActorPopup/AddActorPopup';
 import ActorTile from '../../elements/ActorTile/ActorTile';
 import {withRouter} from 'react-router-dom';
-import {APINode, callAPI, getBackendDomain} from '../../utils/Api';
+import {APINode, callAPI} from '../../utils/Api';
 import {RouteComponentProps} from 'react-router';
 import {GeneralSuccess} from '../../types/GeneralTypes';
 import {ActorType, TagType} from '../../types/VideoTypes';
 import PlyrJS from 'plyr';
 import {Button} from '../../elements/GPElements/Button';
 import {VideoTypes} from '../../types/ApiTypes';
+import GlobalInfos from '../../utils/GlobalInfos';
 
-interface myprops extends RouteComponentProps<{ id: string }> {}
+interface myprops extends RouteComponentProps<{id: string}> {}
 
 interface mystate {
-    sources?: PlyrJS.SourceInfo,
+    sources?: PlyrJS.SourceInfo;
-    movie_id: number,
+    movieId: number;
-    movie_name: string,
+    movieName: string;
-    likes: number,
+    likes: number;
-    quality: number,
+    quality: number;
-    length: number,
+    length: number;
-    tags: TagType[],
+    tags: TagType[];
-    suggesttag: TagType[],
+    suggesttag: TagType[];
-    popupvisible: boolean,
+    popupvisible: boolean;
-    actorpopupvisible: boolean,
+    actorpopupvisible: boolean;
-    actors: ActorType[]
+    actors: ActorType[];
 }
 
 /**
@@ -63,8 +64,8 @@ export class Player extends React.Component<myprops, mystate> {
         super(props);
 
         this.state = {
-            movie_id: -1,
+            movieId: -1,
-            movie_name: '',
+            movieName: '',
             likes: 0,
             quality: 0,
             length: 0,
@@ -86,27 +87,37 @@ export class Player extends React.Component<myprops, mystate> {
     render(): JSX.Element {
         return (
             <div id='videocontainer'>
-                <PageTitle
+                <PageTitle title='Watch' subtitle={this.state.movieName} />
-                    title='Watch'
-                    subtitle={this.state.movie_name}/>
 
                 {this.assembleSideBar()}
 
                 <div className={style.videowrapper}>
                     {/* video component is added here */}
-                    {this.state.sources ? <Plyr
+                    {this.state.sources ? (
-                            style={plyrstyle}
+                        <Plyr style={plyrstyle} source={this.state.sources} options={this.options} />
-                            source={this.state.sources}
+                    ) : (
-                            options={this.options}/> :
+                        <div>not loaded yet</div>
-                        <div>not loaded yet</div>}
+                    )}
                     <div className={style.videoactions}>
-                        <Button onClick={(): void => this.likebtn()} title='Like this Video!' color={{backgroundColor: 'green'}}/>
+                        <Button onClick={(): void => this.likebtn()} title='Like this Video!' color={{backgroundColor: 'green'}} />
-                        <Button onClick={(): void => this.setState({popupvisible: true})} title='Give this Video a Tag' color={{backgroundColor: '#3574fe'}}/>
+                        <Button
-                        <Button title='Delete Video' onClick={(): void => {this.deleteVideo();}} color={{backgroundColor: 'red'}}/>
+                            onClick={(): void => this.setState({popupvisible: true})}
+                            title='Give this Video a Tag'
+                            color={{backgroundColor: '#3574fe'}}
+                        />
+                        <Button
+                            title='Delete Video'
+                            onClick={(): void => {
+                                this.deleteVideo();
+                            }}
+                            color={{backgroundColor: 'red'}}
+                        />
                     </div>
                     {this.assembleActorTiles()}
                 </div>
-                <button className={style.closebutton} onClick={(): void => this.closebtn()}>Close</button>
+                <button className={style.closebutton} onClick={(): void => this.closebtn()}>
+                    Close
+                </button>
                 {
                     // handle the popovers switched on and off according to state changes
                     this.handlePopOvers()
@@ -122,26 +133,35 @@ export class Player extends React.Component<myprops, mystate> {
         return (
             <SideBar>
                 <SideBarTitle>Infos:</SideBarTitle>
-                <Line/>
+                <Line />
-                <SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
+                <SideBarItem>
-                {this.state.quality !== 0 ?
+                    <b>{this.state.likes}</b> Likes!
-                    <SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
+                </SideBarItem>
-                {this.state.length !== 0 ?
+                {this.state.quality !== 0 ? (
-                    <SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem> : null}
+                    <SideBarItem>
-                <Line/>
+                        <b>{this.state.quality}p</b> Quality!
+                    </SideBarItem>
+                ) : null}
+                {this.state.length !== 0 ? (
+                    <SideBarItem>
+                        <b>{Math.round(this.state.length / 60)}</b> Minutes of length!
+                    </SideBarItem>
+                ) : null}
+                <Line />
                 <SideBarTitle>Tags:</SideBarTitle>
                 {this.state.tags.map((m: TagType) => (
-                    <Tag key={m.tag_id} tagInfo={m}/>
+                    <Tag key={m.TagId} tagInfo={m} />
                 ))}
-                <Line/>
+                <Line />
                 <SideBarTitle>Tag Quickadd:</SideBarTitle>
                 {this.state.suggesttag.map((m: TagType) => (
                     <Tag
                         tagInfo={m}
-                        key={m.tag_name}
+                        key={m.TagName}
                         onclick={(): void => {
-                            this.quickAddTag(m.tag_id, m.tag_name);
+                            this.quickAddTag(m.TagId, m.TagName);
-                        }}/>
+                        }}
+                    />
                 ))}
             </SideBar>
         );
@@ -153,18 +173,20 @@ export class Player extends React.Component<myprops, mystate> {
     private assembleActorTiles(): JSX.Element {
         return (
             <div className={style.actorcontainer}>
-                {this.state.actors ?
+                {this.state.actors ? this.state.actors.map((actr: ActorType) => <ActorTile key={actr.ActorId} actor={actr} />) : <></>}
-                    this.state.actors.map((actr: ActorType) => (
+                <div
-                        <ActorTile key={actr.actor_id} actor={actr}/>
+                    className={style.actorAddTile}
-                    )) : <></>
+                    onClick={(): void => {
-                }
+                        this.addActor();
-                <div className={style.actorAddTile} onClick={(): void => {
+                    }}>
-                    this.addActor();
-                }}>
                     <div className={style.actorAddTile_thumbnail}>
-                        <FontAwesomeIcon style={{
+                        <FontAwesomeIcon
-                            lineHeight: '130px'
+                            style={{
-                        }} icon={faPlusCircle} size='5x'/>
+                                lineHeight: '130px'
+                            }}
+                            icon={faPlusCircle}
+                            size='5x'
+                        />
                     </div>
                     <div className={style.actorAddTile_name}>Add Actor</div>
                 </div>
@@ -172,7 +194,6 @@ export class Player extends React.Component<myprops, mystate> {
         );
     }
 
-
     /**
      * handle the popovers generated according to state changes
      * @returns {JSX.Element}
@@ -180,21 +201,18 @@ export class Player extends React.Component<myprops, mystate> {
     handlePopOvers(): JSX.Element {
         return (
             <>
-                {this.state.popupvisible ?
+                {this.state.popupvisible ? (
-                    <AddTagPopup onHide={(): void => {
+                    <AddTagPopup onHide={(): void => this.setState({popupvisible: false})} submit={this.quickAddTag} />
-                        this.setState({popupvisible: false});
+                ) : null}
-                    }}
+                {this.state.actorpopupvisible ? (
-                                 submit={this.quickAddTag}
+                    <AddActorPopup
-                                 movie_id={this.state.movie_id}/> :
+                        onHide={(): void => {
-                    null
-                }
-                {
-                    this.state.actorpopupvisible ?
-                        <AddActorPopup onHide={(): void => {
                             this.refetchActors();
                             this.setState({actorpopupvisible: false});
-                        }} movie_id={this.state.movie_id}/> : null
+                        }}
-                }
+                        movieId={this.state.movieId}
+                    />
+                ) : null}
             </>
         );
     }
@@ -205,81 +223,97 @@ export class Player extends React.Component<myprops, mystate> {
      * @param tagName name of tag to add
      */
     quickAddTag(tagId: number, tagName: string): void {
-        callAPI(APINode.Tags, {
+        callAPI(
-            action: 'addTag',
+            APINode.Tags,
-            id: tagId,
+            {
-            movieid: this.props.match.params.id
+                action: 'addTag',
-        }, (result: GeneralSuccess) => {
+                TagId: tagId,
-            if (result.result !== 'success') {
+                MovieId: parseInt(this.props.match.params.id, 10)
-                console.error('error occured while writing to db -- todo error handling');
+            },
-                console.error(result.result);
+            (result: GeneralSuccess) => {
-            } else {
+                if (result.result !== 'success') {
-                // check if tag has already been added
+                    console.error('error occured while writing to db -- todo error handling');
-                const tagIndex = this.state.tags.map(function (e: TagType) {
+                    console.error(result.result);
-                    return e.tag_name;
+                } else {
-                }).indexOf(tagName);
+                    // check if tag has already been added
+                    const tagIndex = this.state.tags
+                        .map(function (e: TagType) {
+                            return e.TagName;
+                        })
+                        .indexOf(tagName);
 
-                // only add tag if it isn't already there
+                    // only add tag if it isn't already there
-                if (tagIndex === -1) {
+                    if (tagIndex === -1) {
-                    // update tags if successful
+                        // update tags if successful
-                    let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
+                        let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
-                    const quickaddindex = this.state.suggesttag.map(function (e: TagType) {
+                        const quickaddindex = this.state.suggesttag
-                        return e.tag_id;
+                            .map(function (e: TagType) {
-                    }).indexOf(tagId);
+                                return e.TagId;
+                            })
+                            .indexOf(tagId);
 
-                    // check if tag is available in quickadds
+                        // check if tag is available in quickadds
-                    if (quickaddindex !== -1) {
+                        if (quickaddindex !== -1) {
-                        array.splice(quickaddindex, 1);
+                            array.splice(quickaddindex, 1);
 
-                        this.setState({
+                            this.setState({
-                            tags: [...this.state.tags, {tag_name: tagName, tag_id: tagId}],
+                                tags: [...this.state.tags, {TagName: tagName, TagId: tagId}],
-                            suggesttag: array
+                                suggesttag: array
-                        });
+                            });
-                    } else {
+                        } else {
-                        this.setState({
+                            this.setState({
-                            tags: [...this.state.tags, {tag_name: tagName, tag_id: tagId}]
+                                tags: [...this.state.tags, {TagName: tagName, TagId: tagId}]
-                        });
+                            });
+                        }
                     }
                 }
             }
-        });
+        );
     }
 
     /**
      * fetch all the required infos of a video from backend
      */
     fetchMovieData(): void {
-        callAPI(APINode.Video, {action: 'loadVideo', movieid: this.props.match.params.id}, (result: VideoTypes.loadVideoType) => {
+        callAPI(
-            this.setState({
+            APINode.Video,
-                sources: {
+            {action: 'loadVideo', MovieId: parseInt(this.props.match.params.id, 10)},
-                    type: 'video',
+            (result: VideoTypes.loadVideoType) => {
-                    sources: [
+                console.log(result);
-                        {
+                console.log(process.env.REACT_APP_CUST_BACK_DOMAIN);
-                            src: getBackendDomain() + result.movie_url,
+                this.setState({
-                            type: 'video/mp4',
+                    sources: {
-                            size: 1080
+                        type: 'video',
-                        }
+                        sources: [
-                    ],
+                            {
-                    poster: result.thumbnail
+                                src:
-                },
+                                    (process.env.REACT_APP_CUST_BACK_DOMAIN
-                movie_id: result.movie_id,
+                                        ? process.env.REACT_APP_CUST_BACK_DOMAIN
-                movie_name: result.movie_name,
+                                        : GlobalInfos.getVideoPath()) + result.MovieUrl,
-                likes: result.likes,
+                                type: 'video/mp4',
-                quality: result.quality,
+                                size: 1080
-                length: result.length,
+                            }
-                tags: result.tags,
+                        ],
-                suggesttag: result.suggesttag,
+                        poster: result.Poster
-                actors: result.actors
+                    },
-            });
+                    movieId: result.MovieId,
-        });
+                    movieName: result.MovieName,
+                    likes: result.Likes,
+                    quality: result.Quality,
+                    length: result.Length,
+                    tags: result.Tags,
+                    suggesttag: result.SuggestedTag,
+                    actors: result.Actors
+                });
+            }
+        );
     }
 
-
     /**
      * click handler for the like btn
      */
     likebtn(): void {
-        callAPI(APINode.Video, {action: 'addLike', movieid: this.props.match.params.id}, (result: GeneralSuccess) => {
+        callAPI(APINode.Video, {action: 'addLike', MovieId: parseInt(this.props.match.params.id, 10)}, (result: GeneralSuccess) => {
             if (result.result === 'success') {
                 // likes +1 --> avoid reload of all data
                 this.setState({likes: this.state.likes + 1});
@@ -302,15 +336,19 @@ export class Player extends React.Component<myprops, mystate> {
      * delete the current video and return to last page
      */
     deleteVideo(): void {
-        callAPI(APINode.Video, {action: 'deleteVideo', movieid: this.props.match.params.id}, (result: GeneralSuccess) => {
+        callAPI(
-            if (result.result === 'success') {
+            APINode.Video,
-                // return to last element if successful
+            {action: 'deleteVideo', MovieId: parseInt(this.props.match.params.id, 10)},
-                this.props.history.goBack();
+            (result: GeneralSuccess) => {
-            } else {
+                if (result.result === 'success') {
-                console.error('an error occured while liking');
+                    // return to last element if successful
-                console.error(result);
+                    this.props.history.goBack();
+                } else {
+                    console.error('an error occured while liking');
+                    console.error(result);
+                }
             }
-        });
+        );
     }
 
     /**
@@ -324,11 +362,14 @@ export class Player extends React.Component<myprops, mystate> {
      * fetch the available video actors again
      */
     refetchActors(): void {
-        callAPI<ActorType[]>(APINode.Actor, {action: 'getActorsOfVideo', videoid: this.props.match.params.id}, result => {
+        callAPI<ActorType[]>(
-            this.setState({actors: result});
+            APINode.Actor,
-        });
+            {action: 'getActorsOfVideo', MovieId: parseInt(this.props.match.params.id, 10)},
+            (result) => {
+                this.setState({actors: result});
+            }
+        );
     }
 }
 
 export default withRouter(Player);
-

src/pages/RandomPage/RandomPage.test.js

@@ -55,7 +55,7 @@ describe('<RandomPage/>', function () {
 
         shallow(<RandomPage/>);
 
-        callAPIMock({rows: [], tags: []});
+        callAPIMock({Videos: [], Tags: []});
 
         // trigger the keypress event
         events.keyup({key: 's'});

src/pages/RandomPage/RandomPage.tsx

@@ -15,8 +15,8 @@ interface state {
 }
 
 interface GetRandomMoviesType {
-    rows: VideoTypes.VideoUnloadedType[];
+    Videos: VideoTypes.VideoUnloadedType[];
-    tags: TagType[];
+    Tags: TagType[];
 }
 
 /**
@@ -47,26 +47,26 @@ class RandomPage extends React.Component<{}, state> {
     render(): JSX.Element {
         return (
             <div>
-                <PageTitle title='Random Videos'
+                <PageTitle title='Random Videos' subtitle='4pc' />
-                           subtitle='4pc'/>
 
                 <SideBar>
                     <SideBarTitle>Visible Tags:</SideBarTitle>
                     {this.state.tags.map((m) => (
-                        <Tag key={m.tag_id} tagInfo={m}/>
+                        <Tag key={m.TagId} tagInfo={m} />
                     ))}
                 </SideBar>
 
-                {this.state.videos.length !== 0 ?
+                {this.state.videos.length !== 0 ? (
-                    <VideoContainer
+                    <VideoContainer data={this.state.videos}>
-                        data={this.state.videos}>
                         <div className={style.Shufflebutton}>
-                            <button onClick={(): void => this.shuffleclick()} className={style.btnshuffle}>Shuffle</button>
+                            <button onClick={(): void => this.shuffleclick()} className={style.btnshuffle}>
+                                Shuffle
+                            </button>
                         </div>
                     </VideoContainer>
-                    :
+                ) : (
-                    <div>No Data found!</div>}
+                    <div>No Data found!</div>
-
+                )}
             </div>
         );
     }
@@ -83,11 +83,12 @@ class RandomPage extends React.Component<{}, state> {
      * @param nr number of videos to load
      */
     loadShuffledvideos(nr: number): void {
-        callAPI<GetRandomMoviesType>(APINode.Video, {action: 'getRandomMovies', number: nr}, result => {
+        callAPI<GetRandomMoviesType>(APINode.Video, {action: 'getRandomMovies', number: nr}, (result) => {
+            console.log(result);
             this.setState({videos: []}); // needed to trigger rerender of main videoview
             this.setState({
-                videos: result.rows,
+                videos: result.Videos,
-                tags: result.tags
+                tags: result.Tags
             });
         });
     }

src/pages/SettingsPage/GeneralSettings.test.js

@@ -80,48 +80,48 @@ describe('<GeneralSettings/>', function () {
     it('test videopath change event', function () {
         const wrapper = shallow(<GeneralSettings/>);
 
-        expect(wrapper.state().videopath).not.toBe('test');
+        expect(wrapper.state().generalSettings.VideoPath).not.toBe('test');
 
         const event = {target: {name: 'pollName', value: 'test'}};
         wrapper.find('[data-testid=\'videpathform\']').find('FormControl').simulate('change', event);
-        expect(wrapper.state().videopath).toBe('test');
+        expect(wrapper.state().generalSettings.VideoPath).toBe('test');
     });
 
     it('test tvshowpath change event', function () {
         const wrapper = shallow(<GeneralSettings/>);
 
         const event = {target: {name: 'pollName', value: 'test'}};
-        expect(wrapper.state().tvshowpath).not.toBe('test');
+        expect(wrapper.state().generalSettings.EpisodePath).not.toBe('test');
         wrapper.find('[data-testid=\'tvshowpath\']').find('FormControl').simulate('change', event);
-        expect(wrapper.state().tvshowpath).toBe('test');
+        expect(wrapper.state().generalSettings.EpisodePath).toBe('test');
     });
 
     it('test mediacentername-form change event', function () {
         const wrapper = shallow(<GeneralSettings/>);
 
         const event = {target: {name: 'pollName', value: 'test'}};
-        expect(wrapper.state().mediacentername).not.toBe('test');
+        expect(wrapper.state().generalSettings.MediacenterName).not.toBe('test');
         wrapper.find('[data-testid=\'nameform\']').find('FormControl').simulate('change', event);
-        expect(wrapper.state().mediacentername).toBe('test');
+        expect(wrapper.state().generalSettings.MediacenterName).toBe('test');
     });
 
     it('test password-form change event', function () {
         const wrapper = shallow(<GeneralSettings/>);
-        wrapper.setState({passwordsupport: true});
+        wrapper.setState({generalSettings : {PasswordEnabled: true}});
 
         const event = {target: {name: 'pollName', value: 'test'}};
-        expect(wrapper.state().password).not.toBe('test');
+        expect(wrapper.state().generalSettings.Password).not.toBe('test');
         wrapper.find('[data-testid=\'passwordfield\']').find('FormControl').simulate('change', event);
-        expect(wrapper.state().password).toBe('test');
+        expect(wrapper.state().generalSettings.Password).toBe('test');
     });
 
     it('test tmdbsupport change event', function () {
         const wrapper = shallow(<GeneralSettings/>);
-        wrapper.setState({tmdbsupport: true});
+        wrapper.setState({generalSettings : {TMDBGrabbing: true}});
 
-        expect(wrapper.state().tmdbsupport).toBe(true);
+        expect(wrapper.state().generalSettings.TMDBGrabbing).toBe(true);
         wrapper.find('[data-testid=\'tmdb-switch\']').simulate('change');
-        expect(wrapper.state().tmdbsupport).toBe(false);
+        expect(wrapper.state().generalSettings.TMDBGrabbing).toBe(false);
     });
 
     it('test insertion of 4 infoheaderitems', function () {

src/pages/SettingsPage/GeneralSettings.tsx

@@ -6,52 +6,38 @@ import InfoHeaderItem from '../../elements/InfoHeaderItem/InfoHeaderItem';
 import {faArchive, faBalanceScaleLeft, faRulerVertical} from '@fortawesome/free-solid-svg-icons';
 import {faAddressCard} from '@fortawesome/free-regular-svg-icons';
 import {version} from '../../../package.json';
-import {APINode, callAPI, setCustomBackendDomain} from '../../utils/Api';
+import {APINode, callAPI} from '../../utils/Api';
 import {SettingsTypes} from '../../types/ApiTypes';
 import {GeneralSuccess} from '../../types/GeneralTypes';
 
 interface state {
-    passwordsupport: boolean,
+    generalSettings: SettingsTypes.loadGeneralSettingsType;
-    tmdbsupport: boolean,
-    customapi: boolean,
-
-    videopath: string,
-    tvshowpath: string,
-    mediacentername: string,
-    password: string,
-    apipath: string,
-
-    videonr: number,
-    dbsize: number,
-    difftagnr: number,
-    tagsadded: number
 }
 
-interface props {}
+interface Props {}
 
 /**
  * Component for Generalsettings tag on Settingspage
  * handles general settings of mediacenter which concerns to all pages
  */
-class GeneralSettings extends React.Component<props, state> {
+class GeneralSettings extends React.Component<Props, state> {
-    constructor(props: props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
-            passwordsupport: false,
+            generalSettings: {
-            tmdbsupport: false,
+                DarkMode: true,
-            customapi: false,
+                DBSize: 0,
-
+                DifferentTags: 0,
-            videopath: '',
+                EpisodePath: '',
-            tvshowpath: '',
+                MediacenterName: '',
-            mediacentername: '',
+                Password: '',
-            password: '',
+                PasswordEnabled: false,
-            apipath: '',
+                TagsAdded: 0,
-
+                TMDBGrabbing: false,
-            videonr: 0,
+                VideoNr: 0,
-            dbsize: 0,
+                VideoPath: ''
-            difftagnr: 0,
+            }
-            tagsadded: 0
         };
     }
 
@@ -64,95 +50,121 @@ class GeneralSettings extends React.Component<props, state> {
         return (
             <>
                 <div className={style.infoheader}>
-                    <InfoHeaderItem backColor='lightblue'
+                    <InfoHeaderItem
-                                    text={this.state.videonr}
+                        backColor='lightblue'
-                                    subtext='Videos in Gravity'
+                        text={this.state.generalSettings.VideoNr}
-                                    icon={faArchive}/>
+                        subtext='Videos in Gravity'
-                    <InfoHeaderItem backColor='yellow'
+                        icon={faArchive}
-                                    text={this.state.dbsize !== undefined ? this.state.dbsize + ' MB' : ''}
+                    />
-                                    subtext='Database size'
+                    <InfoHeaderItem
-                                    icon={faRulerVertical}/>
+                        backColor='yellow'
-                    <InfoHeaderItem backColor='green'
+                        text={this.state.generalSettings.DBSize + ' MB'}
-                                    text={this.state.difftagnr}
+                        subtext='Database size'
-                                    subtext='different Tags'
+                        icon={faRulerVertical}
-                                    icon={faAddressCard}/>
+                    />
-                    <InfoHeaderItem backColor='orange'
+                    <InfoHeaderItem
-                                    text={this.state.tagsadded}
+                        backColor='green'
-                                    subtext='tags added'
+                        text={this.state.generalSettings.DifferentTags}
-                                    icon={faBalanceScaleLeft}/>
+                        subtext='different Tags'
+                        icon={faAddressCard}
+                    />
+                    <InfoHeaderItem
+                        backColor='orange'
+                        text={this.state.generalSettings.TagsAdded}
+                        subtext='tags added'
+                        icon={faBalanceScaleLeft}
+                    />
                 </div>
                 <div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
-                    <Form data-testid='mainformsettings' onSubmit={(e): void => {
+                    <Form
-                        e.preventDefault();
+                        data-testid='mainformsettings'
-                        this.saveSettings();
+                        onSubmit={(e): void => {
-                    }}>
+                            e.preventDefault();
+                            this.saveSettings();
+                        }}>
                         <Form.Row>
                             <Form.Group as={Col} data-testid='videpathform'>
                                 <Form.Label>Video Path</Form.Label>
-                                <Form.Control type='text' placeholder='/var/www/html/video' value={this.state.videopath}
+                                <Form.Control
-                                              onChange={(ee): void => this.setState({videopath: ee.target.value})}/>
+                                    type='text'
+                                    placeholder='/var/www/html/video'
+                                    value={this.state.generalSettings.VideoPath}
+                                    onChange={(ee): void =>
+                                        this.setState({
+                                            generalSettings: {
+                                                ...this.state.generalSettings,
+                                                VideoPath: ee.target.value
+                                            }
+                                        })
+                                    }
+                                />
                             </Form.Group>
 
                             <Form.Group as={Col} data-testid='tvshowpath'>
                                 <Form.Label>TV Show Path</Form.Label>
-                                <Form.Control type='text' placeholder='/var/www/html/tvshow'
+                                <Form.Control
-                                              value={this.state.tvshowpath}
+                                    type='text'
-                                              onChange={(e): void => this.setState({tvshowpath: e.target.value})}/>
+                                    placeholder='/var/www/html/tvshow'
+                                    value={this.state.generalSettings.EpisodePath}
+                                    onChange={(e): void =>
+                                        this.setState({
+                                            generalSettings: {
+                                                ...this.state.generalSettings,
+                                                EpisodePath: e.target.value
+                                            }
+                                        })
+                                    }
+                                />
                             </Form.Group>
                         </Form.Row>
-
-                        <Form.Check
-                            type='switch'
-                            id='custom-switch-api'
-                            label='Use custom API url'
-                            checked={this.state.customapi}
-                            onChange={(): void => {
-                                if (this.state.customapi) {
-                                    setCustomBackendDomain('');
-                                }
-
-                                this.setState({customapi: !this.state.customapi});
-                            }}
-                        />
-                        {this.state.customapi ?
-                            <Form.Group className={style.customapiform} data-testid='apipath'>
-                                <Form.Label>API Backend url</Form.Label>
-                                <Form.Control type='text' placeholder='https://127.0.0.1'
-                                              value={this.state.apipath}
-                                              onChange={(e): void => {
-                                                  this.setState({apipath: e.target.value});
-                                                  setCustomBackendDomain(e.target.value);
-                                              }}/>
-                            </Form.Group> : null}
-
-
                         <Form.Check
                             type='switch'
                             id='custom-switch'
                             data-testid='passwordswitch'
                             label='Enable Password support'
-                            checked={this.state.passwordsupport}
+                            checked={this.state.generalSettings.PasswordEnabled}
                             onChange={(): void => {
-                                this.setState({passwordsupport: !this.state.passwordsupport});
+                                this.setState({
+                                    generalSettings: {
+                                        ...this.state.generalSettings,
+                                        PasswordEnabled: !this.state.generalSettings.PasswordEnabled
+                                    }
+                                });
                             }}
                         />
 
-                        {this.state.passwordsupport ?
+                        {this.state.generalSettings.PasswordEnabled ? (
                             <Form.Group data-testid='passwordfield'>
                                 <Form.Label>Password</Form.Label>
-                                <Form.Control type='password' placeholder='**********' value={this.state.password}
+                                <Form.Control
-                                              onChange={(e): void => this.setState({password: e.target.value})}/>
+                                    type='password'
-                            </Form.Group> : null
+                                    placeholder='**********'
-                        }
+                                    value={this.state.generalSettings.Password}
+                                    onChange={(e): void =>
+                                        this.setState({
+                                            generalSettings: {
+                                                ...this.state.generalSettings,
+                                                Password: e.target.value
+                                            }
+                                        })
+                                    }
+                                />
+                            </Form.Group>
+                        ) : null}
 
                         <Form.Check
                             type='switch'
                             id='custom-switch-2'
                             data-testid='tmdb-switch'
                             label='Enable TMDB video grabbing support'
-                            checked={this.state.tmdbsupport}
+                            checked={this.state.generalSettings.TMDBGrabbing}
                             onChange={(): void => {
-                                this.setState({tmdbsupport: !this.state.tmdbsupport});
+                                this.setState({
+                                    generalSettings: {
+                                        ...this.state.generalSettings,
+                                        TMDBGrabbing: !this.state.generalSettings.TMDBGrabbing
+                                    }
+                                });
                             }}
                         />
 
@@ -164,15 +176,24 @@ class GeneralSettings extends React.Component<props, state> {
                             checked={GlobalInfos.isDarkTheme()}
                             onChange={(): void => {
                                 GlobalInfos.enableDarkTheme(!GlobalInfos.isDarkTheme());
-                                this.forceUpdate();
-                                // todo initiate rerender
                             }}
                         />
 
                         <Form.Group className={style.mediacenternameform} data-testid='nameform'>
                             <Form.Label>The name of the Mediacenter</Form.Label>
-                            <Form.Control type='text' placeholder='Mediacentername' value={this.state.mediacentername}
+                            <Form.Control
-                                          onChange={(e): void => this.setState({mediacentername: e.target.value})}/>
+                                type='text'
+                                placeholder='Mediacentername'
+                                value={this.state.generalSettings.MediacenterName}
+                                onChange={(e): void =>
+                                    this.setState({
+                                        generalSettings: {
+                                            ...this.state.generalSettings,
+                                            MediacenterName: e.target.value
+                                        }
+                                    })
+                                }
+                            />
                         </Form.Group>
 
                         <Button variant='primary' type='submit'>
@@ -180,9 +201,7 @@ class GeneralSettings extends React.Component<props, state> {
                         </Button>
                     </Form>
                 </div>
-                <div className={style.footer}>
+                <div className={style.footer}>Version: {version}</div>
-                    Version: {version}
-                </div>
             </>
         );
     }
@@ -192,19 +211,7 @@ class GeneralSettings extends React.Component<props, state> {
      */
     loadSettings(): void {
         callAPI(APINode.Settings, {action: 'loadGeneralSettings'}, (result: SettingsTypes.loadGeneralSettingsType) => {
-            this.setState({
+            this.setState({generalSettings: result});
-                videopath: result.video_path,
-                tvshowpath: result.episode_path,
-                mediacentername: result.mediacenter_name,
-                password: result.password,
-                passwordsupport: result.passwordEnabled,
-                tmdbsupport: result.TMDB_grabbing,
-
-                videonr: result.videonr,
-                dbsize: result.dbsize,
-                difftagnr: result.difftagnr,
-                tagsadded: result.tagsadded
-            });
         });
     }
 
@@ -212,23 +219,28 @@ class GeneralSettings extends React.Component<props, state> {
      * save the selected and typed settings to the backend
      */
     saveSettings(): void {
-        callAPI(APINode.Settings, {
+        let settings = this.state.generalSettings;
-            action: 'saveGeneralSettings',
+        if (!this.state.generalSettings.PasswordEnabled) {
-            password: this.state.passwordsupport ? this.state.password : '-1',
+            settings.Password = '-1';
-            videopath: this.state.videopath,
+        }
-            tvshowpath: this.state.tvshowpath,
+        settings.DarkMode = GlobalInfos.isDarkTheme();
-            mediacentername: this.state.mediacentername,
+
-            tmdbsupport: this.state.tmdbsupport,
+        callAPI(
-            darkmodeenabled: GlobalInfos.isDarkTheme().toString()
+            APINode.Settings,
-        }, (result: GeneralSuccess) => {
+            {
-            if (result.result) {
+                action: 'saveGeneralSettings',
-                console.log('successfully saved settings');
+                Settings: settings
-                // todo 2020-07-10: popup success
+            },
-            } else {
+            (result: GeneralSuccess) => {
-                console.log('failed to save settings');
+                if (result.result) {
-                // todo 2020-07-10: popup error
+                    console.log('successfully saved settings');
+                    // todo 2020-07-10: popup success
+                } else {
+                    console.log('failed to save settings');
+                    // todo 2020-07-10: popup error
+                }
             }
-        });
+        );
     }
 }
 

src/pages/SettingsPage/MovieSettings.test.js

@@ -52,10 +52,9 @@ describe('<MovieSettings/>', function () {
 
     it('content available received and in state', () => {
         const wrapper = shallow(<MovieSettings/>);
-
         callAPIMock({
-            contentAvailable: true,
+            ContentAvailable: true,
-            message: 'firstline\nsecondline'
+            Messages: ['firstline', 'secondline']
         })
 
         wrapper.instance().updateStatus();
@@ -70,7 +69,8 @@ describe('<MovieSettings/>', function () {
 
     it('test reindex with no content available', () => {
         callAPIMock({
-            contentAvailable: false
+            Messages: [],
+            ContentAvailable: false
         })
 
         global.clearInterval = jest.fn();
@@ -99,12 +99,12 @@ describe('<MovieSettings/>', function () {
         expect(wrapper.instance().setState).toBeCalledTimes(1);
     });
 
-    it('test no textDiv insertion if string is empty', function () {
+    it('expect insertion before existing ones', function () {
         const wrapper = shallow(<MovieSettings/>);
 
         callAPIMock({
-            contentAvailable: true,
+            ContentAvailable: true,
-            message: 'test'
+            Messages: ['test']
         })
 
         wrapper.instance().updateStatus();
@@ -115,14 +115,14 @@ describe('<MovieSettings/>', function () {
 
         // expect an untouched state if we try to add an empty string...
         callAPIMock({
-            contentAvailable: true,
+            ContentAvailable: true,
-            message: ''
+            Messages: ['']
         })
 
         wrapper.instance().updateStatus();
 
         expect(wrapper.state()).toMatchObject({
-            text: ['test']
+            text: ['', 'test']
         });
     });
 });

src/pages/SettingsPage/MovieSettings.tsx

@@ -5,20 +5,20 @@ import {GeneralSuccess} from '../../types/GeneralTypes';
 import {SettingsTypes} from '../../types/ApiTypes';
 
 interface state {
-    text: string[]
+    text: string[];
-    startbtnDisabled: boolean
+    startbtnDisabled: boolean;
 }
 
-interface props {}
+interface Props {}
 
 /**
  * Component for MovieSettings on Settingspage
  * handles settings concerning to movies in general
  */
-class MovieSettings extends React.Component<props, state> {
+class MovieSettings extends React.Component<Props, state> {
     myinterval: number = -1;
 
-    constructor(props: props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
@@ -32,23 +32,36 @@ class MovieSettings extends React.Component<props, state> {
     }
 
     componentWillUnmount(): void {
-        if (this.myinterval !== -1)
+        if (this.myinterval !== -1) {
             clearInterval(this.myinterval);
+        }
     }
 
     render(): JSX.Element {
         return (
             <>
-                <button disabled={this.state.startbtnDisabled}
+                <button
-                        className='btn btn-success'
+                    disabled={this.state.startbtnDisabled}
-                        onClick={(): void => {this.startReindex();}}>Reindex Movie
+                    className='btn btn-success'
+                    onClick={(): void => {
+                        this.startReindex();
+                    }}>
+                    Reindex Movie
                 </button>
-                <button className='btn btn-warning'
+                <button
-                        onClick={(): void => {this.cleanupGravity();}}>Cleanup Gravity
+                    className='btn btn-warning'
+                    onClick={(): void => {
+                        this.cleanupGravity();
+                    }}>
+                    Cleanup Gravity
                 </button>
-                <div className={style.indextextarea}>{this.state.text.map(m => (
+                <div className={style.indextextarea}>
-                    <div key={m} className='textarea-element'>{m}</div>
+                    {this.state.text.map((m) => (
-                ))}</div>
+                        <div key={m} className='textarea-element'>
+                            {m}
+                        </div>
+                    ))}
+                </div>
             </>
         );
     }
@@ -58,11 +71,7 @@ class MovieSettings extends React.Component<props, state> {
      */
     startReindex(): void {
         // clear output text before start
-        this.setState({text: []});
+        this.setState({text: [], startbtnDisabled: true});
-
-        this.setState({startbtnDisabled: true});
-
-        console.log('starting');
 
         callAPI(APINode.Settings, {action: 'startReindex'}, (result: GeneralSuccess): void => {
             console.log(result);
@@ -85,18 +94,12 @@ class MovieSettings extends React.Component<props, state> {
      */
     updateStatus = (): void => {
         callAPI(APINode.Settings, {action: 'getStatusMessage'}, (result: SettingsTypes.getStatusMessageType) => {
-            if (result.contentAvailable) {
+            this.setState({
-                // ignore if message is empty
+                // insert a string for each line
-                console.log(result);
+                text: [...result.Messages, ...this.state.text]
-                if(result.message === '') return;
+            });
-
+            // todo 2020-07-4: scroll to bottom of div here
-                // todo 2020-07-4: scroll to bottom of div here
+            if (!result.ContentAvailable) {
-                this.setState({
-                    // insert a string for each line
-                    text: [...result.message.split('\n'),
-                        ...this.state.text]
-                });
-            } else {
                 // clear refresh interval if no content available
                 clearInterval(this.myinterval);
 
@@ -109,7 +112,7 @@ class MovieSettings extends React.Component<props, state> {
      * send request to cleanup db gravity
      */
     cleanupGravity(): void {
-        callAPI(APINode.Settings, {action: 'cleanupGravity'}, (result) => {
+        callAPI(APINode.Settings, {action: 'cleanupGravity'}, () => {
             this.setState({
                 text: ['successfully cleaned up gravity!']
             });

src/pages/SettingsPage/SettingsPage.tsx

@@ -28,17 +28,17 @@ class SettingsPage extends React.Component {
                 </div>
                 <div className={style.SettingsContent}>
                     <Switch>
-                        <Route path="/settings/general">
+                        <Route path='/settings/general'>
-                            <GeneralSettings/>
+                            <GeneralSettings />
                         </Route>
-                        <Route path="/settings/movies">
+                        <Route path='/settings/movies'>
-                            <MovieSettings/>
+                            <MovieSettings />
                         </Route>
-                        <Route path="/settings/tv">
+                        <Route path='/settings/tv'>
-                            <span/>
+                            <span />
                         </Route>
-                        <Route path="/settings">
+                        <Route path='/settings'>
-                            <Redirect to='/settings/general'/>
+                            <Redirect to='/settings/general' />
                         </Route>
                     </Switch>
                 </div>

src/setupTests.js

@@ -19,7 +19,8 @@ global.prepareFetchApi = (response) => {
     const mockJsonPromise = Promise.resolve(response);
     const mockFetchPromise = Promise.resolve({
         json: () => mockJsonPromise,
-        text: () => mockJsonPromise
+        text: () => mockJsonPromise,
+        status: 200
     });
     return (jest.fn().mockImplementation(() => mockFetchPromise));
 };
@@ -33,22 +34,10 @@ global.prepareFailingFetchApi = () => {
     return (jest.fn().mockImplementation(() => mockFetchPromise));
 };
 
-/**
- * prepares a viewbinding instance
- * @param func a mock function to be called
- */
-global.prepareViewBinding = (func) => {
-    GlobalInfos.getViewBinding = () => {
-        return {
-            changeRootElement: func,
-            returnToLastElement: func
-        };
-    };
-};
-
 global.callAPIMock = (resonse) => {
     const helpers = require('./utils/Api');
     helpers.callAPI = jest.fn().mockImplementation((_, __, func1) => {func1(resonse);});
+    helpers.callApiUnsafe = jest.fn().mockImplementation((_, __, func1) => {func1(resonse);});
 };
 
 // code to run before each test
@@ -63,3 +52,12 @@ global.afterEach(() => {
     jest.resetAllMocks();
 });
 
+
+global.mockKeyPress = () => {
+    let events = [];
+    document.addEventListener = jest.fn((event, cb) => {
+        events[event] = cb;
+    });
+    return events;
+}
+

src/types/ApiTypes.ts

@@ -2,56 +2,59 @@ import {ActorType, TagType} from './VideoTypes';
 
 export namespace VideoTypes {
     export interface loadVideoType {
-        movie_url: string
+        MovieUrl: string;
-        thumbnail: string
+        Poster: string;
-        movie_id: number
+        MovieId: number;
-        movie_name: string
+        MovieName: string;
-        likes: number
+        Likes: number;
-        quality: number
+        Quality: number;
-        length: number
+        Length: number;
-        tags: TagType[]
+        Tags: TagType[];
-        suggesttag: TagType[]
+        SuggestedTag: TagType[];
-        actors: ActorType[]
+        Actors: ActorType[];
     }
 
     export interface startDataType {
-        total: number;
+        VideoNr: number;
-        fullhd: number;
+        FullHdNr: number;
-        hd: number;
+        HDNr: number;
-        sd: number;
+        SDNr: number;
-        tags: number;
+        DifferentTags: number;
+        Tagged: number;
     }
 
     export interface VideoUnloadedType {
-        movie_id: number;
+        MovieId: number;
-        movie_name: string
+        MovieName: string;
     }
 }
 
 export namespace SettingsTypes {
     export interface initialApiCallData {
         DarkMode: boolean;
-        passwordEnabled: boolean;
+        Password: boolean;
-        mediacenter_name: string;
+        MediacenterName: string;
+        VideoPath: string;
     }
 
     export interface loadGeneralSettingsType {
-        video_path: string,
+        VideoPath: string;
-        episode_path: string,
+        EpisodePath: string;
-        mediacenter_name: string,
+        MediacenterName: string;
-        password: string,
+        Password: string;
-        passwordEnabled: boolean,
+        PasswordEnabled: boolean;
-        TMDB_grabbing: boolean,
+        TMDBGrabbing: boolean;
+        DarkMode: boolean;
 
-        videonr: number,
+        VideoNr: number;
-        dbsize: number,
+        DBSize: number;
-        difftagnr: number,
+        DifferentTags: number;
-        tagsadded: number
+        TagsAdded: number;
     }
 
     export interface getStatusMessageType {
-        contentAvailable: boolean;
+        ContentAvailable: boolean;
-        message: string;
+        Messages: string[];
     }
 }
 
@@ -60,7 +63,7 @@ export namespace ActorTypes {
      * result of actor fetch
      */
     export interface videofetchresult {
-        videos: VideoTypes.VideoUnloadedType[];
+        Videos: VideoTypes.VideoUnloadedType[];
-        info: ActorType;
+        Info: ActorType;
     }
 }

src/types/GeneralTypes.ts

@@ -1,16 +1,16 @@
 import {TagType} from './VideoTypes';
 
 export interface GeneralSuccess {
-    result: string
+    result: string;
 }
 
 interface TagarrayType {
-    [_: string]: TagType
+    [_: string]: TagType;
 }
 
 export const DefaultTags: TagarrayType = {
-    all: {tag_id: 1, tag_name: 'all'},
+    all: {TagId: 1, TagName: 'all'},
-    fullhd: {tag_id: 2, tag_name: 'fullhd'},
+    fullhd: {TagId: 2, TagName: 'fullhd'},
-    lowq: {tag_id: 3, tag_name: 'lowquality'},
+    lowq: {TagId: 3, TagName: 'lowquality'},
-    hd: {tag_id: 4, tag_name: 'hd'}
+    hd: {TagId: 4, TagName: 'hd'}
 };

src/types/VideoTypes.ts

@@ -2,12 +2,12 @@
  * type accepted by Tag component
  */
 export interface TagType {
-    tag_name: string
+    TagName: string;
-    tag_id: number
+    TagId: number;
 }
 
 export interface ActorType {
-    thumbnail: string;
+    Thumbnail: string;
-    name: string;
+    Name: string;
-    actor_id: number;
+    ActorId: number;
 }

src/utils/Api.ts

@@ -1,59 +1,177 @@
-let customBackendURL: string;
+import GlobalInfos from './GlobalInfos';
 
-/**
+const APIPREFIX: string = '/api/';
- * get the domain of the api backend
- * @return string domain of backend http://x.x.x.x/bla
- */
-export function getBackendDomain(): string {
-    let userAgent = navigator.userAgent.toLowerCase();
-    if (userAgent.indexOf(' electron/') > -1) {
-        // Electron-specific code - force a custom backendurl
-        return (customBackendURL);
-    } else {
-        // use custom only if defined
-        if (customBackendURL) {
-            return (customBackendURL);
-        } else {
-            return (window.location.origin);
-        }
-    }
-}
-
-/**
- * set a custom backend domain
- * @param domain a url in format [http://x.x.x.x/somanode]
- */
-export function setCustomBackendDomain(domain: string): void {
-    customBackendURL = domain;
-}
-
-/**
- * a helper function to get the api path
- */
-function getAPIDomain(): string {
-    return getBackendDomain() + '/api/';
-}
 
 /**
  * interface how an api request should look like
  */
 interface ApiBaseRequest {
-    action: string | number,
+    action: string | number;
 
-    [_: string]: string | number | boolean
+    [_: string]: string | number | boolean | object;
+}
+
+// store api token - empty if not set
+let apiToken = '';
+
+// a callback que to be called after api token refresh
+let callQue: ((error: string) => void)[] = [];
+// flag to check wheter a api refresh is currently pending
+let refreshInProcess = false;
+// store the expire seconds of token
+let expireSeconds = -1;
+
+/**
+ * refresh the api token or use that one in cookie if still valid
+ * @param callback to be called after successful refresh
+ * @param password
+ * @param force
+ */
+export function refreshAPIToken(callback: (error: string) => void, force?: boolean, password?: string): void {
+    callQue.push(callback);
+
+    // check if already is a token refresh is in process
+    if (refreshInProcess) {
+        // if yes return
+        return;
+    } else {
+        // if not set flat
+        refreshInProcess = true;
+    }
+
+    if (apiTokenValid() && !force) {
+        console.log('token still valid...');
+        callFuncQue('');
+        return;
+    }
+
+    const formData = new FormData();
+    formData.append('grant_type', 'client_credentials');
+    formData.append('client_id', 'openmediacenter');
+    formData.append('client_secret', password ? password : 'openmediacenter');
+    formData.append('scope', 'all');
+
+    interface APIToken {
+        error?: string;
+        // eslint-disable-next-line camelcase
+        access_token: string; // no camel case allowed because of backendlib
+        // eslint-disable-next-line camelcase
+        expires_in: number; // no camel case allowed because of backendlib
+        scope: string;
+        // eslint-disable-next-line camelcase
+        token_type: string; // no camel case allowed because of backendlib
+    }
+
+    fetch('/token', {method: 'POST', body: formData}).then((response) =>
+        response.json().then((result: APIToken) => {
+            if (result.error) {
+                callFuncQue(result.error);
+                return;
+            }
+            console.log(result);
+            // set api token
+            apiToken = result.access_token;
+            // set expire time
+            expireSeconds = new Date().getTime() / 1000 + result.expires_in;
+            setTokenCookie(apiToken, expireSeconds);
+            // call all handlers and release flag
+            callFuncQue('');
+        })
+    );
+}
+
+export function apiTokenValid(): boolean {
+    // check if a cookie with token is available
+    const token = getTokenCookie();
+    if (token !== null) {
+        // check if token is at least valid for the next minute
+        if (token.expire > new Date().getTime() / 1000 + 60) {
+            apiToken = token.token;
+            expireSeconds = token.expire;
+
+            return true;
+        }
+    }
+    return false;
 }
 
 /**
- * helper function to build a formdata for requesting post data correctly
+ * call all qued callbacks
- * @param args api request object
  */
-function buildFormData(args: ApiBaseRequest): FormData {
+function callFuncQue(error: string): void {
-    const req = new FormData();
+    // call all pending handlers
+    callQue.map((func) => {
+        return func(error);
+    });
+    // reset pending que
+    callQue = [];
+    // release flag to be able to start new refresh
+    refreshInProcess = false;
+}
 
-    for (const i in args) {
+/**
-        req.append(i, (args[i].toString()));
+ * set the cookie for the currently gotten token
+ * @param token token string
+ * @param validSec second time when the token will be invalid
+ */
+function setTokenCookie(token: string, validSec: number): void {
+    let d = new Date();
+    d.setTime(validSec * 1000);
+    console.log('token set' + d.toUTCString());
+    let expires = 'expires=' + d.toUTCString();
+    document.cookie = 'token=' + token + ';' + expires + ';path=/';
+    document.cookie = 'token_expire=' + validSec + ';' + expires + ';path=/';
+}
+
+/**
+ * get all required cookies for the token
+ */
+function getTokenCookie(): {token: string; expire: number} | null {
+    const token = decodeCookie('token');
+    const expireInString = decodeCookie('token_expire');
+    const expireIn = parseInt(expireInString, 10);
+
+    if (expireIn !== 0 && token !== '') {
+        return {token: token, expire: expireIn};
+    } else {
+        return null;
+    }
+}
+
+/**
+ * decode a simple cookie with key specified
+ * @param key cookie key
+ */
+function decodeCookie(key: string): string {
+    let name = key + '=';
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) === 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return '';
+}
+
+/**
+ * check if api token is valid -- if not request new one
+ * when finished call callback
+ * @param callback function to be called afterwards
+ */
+function checkAPITokenValid(callback: () => void): void {
+    // check if token is valid and set
+    if (apiToken === '' || expireSeconds <= new Date().getTime() / 1000) {
+        refreshAPIToken(() => {
+            callback();
+        });
+    } else {
+        callback();
     }
-    return req;
 }
 
 /**
@@ -63,12 +181,70 @@ function buildFormData(args: ApiBaseRequest): FormData {
  * @param callback the callback with json reply from backend
  * @param errorcallback a optional callback if an error occured
  */
-export function callAPI<T>(apinode: APINode, fd: ApiBaseRequest, callback: (_: T) => void, errorcallback: (_: string) => void = (_: string): void => {}): void {
+export function callAPI<T>(
-    fetch(getAPIDomain() + apinode, {method: 'POST', body: buildFormData(fd)})
+    apinode: APINode,
-        .then((response) => response.json()
+    fd: ApiBaseRequest,
-            .then((result) => {
+    callback: (_: T) => void,
-                callback(result);
+    errorcallback: (_: string) => void = (_: string): void => {}
-            })).catch(reason => errorcallback(reason));
+): void {
+    checkAPITokenValid(() => {
+        console.log(apiToken);
+        fetch(APIPREFIX + apinode, {
+            method: 'POST',
+            body: JSON.stringify(fd),
+            headers: new Headers({
+                'Content-Type': 'application/json',
+                Authorization: 'Bearer ' + apiToken
+            })
+        })
+            .then((response) => {
+                if (response.status === 200) {
+                    // success
+                    response.json().then((result: T) => {
+                        callback(result);
+                    });
+                } else if (response.status === 400) {
+                    // Bad Request --> invalid token
+                    console.log('loading Password page.');
+                    // load password page
+                    if (GlobalInfos.loadPasswordPage) {
+                        GlobalInfos.loadPasswordPage(() => {
+                            callAPI(apinode, fd, callback, errorcallback);
+                        });
+                    }
+                } else {
+                    console.log('Error: ' + response.statusText);
+                }
+            })
+            .catch((reason) => errorcallback(reason));
+    });
+}
+
+/**
+ * make a public unsafe api call (without token) -- use as rare as possible only for initialization (eg. check if pwd is neccessary)
+ * @param apinode
+ * @param fd
+ * @param callback
+ * @param errorcallback
+ */
+export function callApiUnsafe<T>(
+    apinode: APINode,
+    fd: ApiBaseRequest,
+    callback: (_: T) => void,
+    errorcallback?: (_: string) => void
+): void {
+    fetch(APIPREFIX + apinode, {method: 'POST', body: JSON.stringify(fd)})
+        .then((response) => {
+            if (response.status !== 200) {
+                console.log('Error: ' + response.statusText);
+                // todo place error popup here
+            } else {
+                response.json().then((result: T) => {
+                    callback(result);
+                });
+            }
+        })
+        .catch((reason) => (errorcallback ? errorcallback(reason) : {}));
 }
 
 /**
@@ -78,20 +254,31 @@ export function callAPI<T>(apinode: APINode, fd: ApiBaseRequest, callback: (_: T
  * @param callback the callback with PLAIN text reply from backend
  */
 export function callAPIPlain(apinode: APINode, fd: ApiBaseRequest, callback: (_: string) => void): void {
-    fetch(getAPIDomain() + apinode, {method: 'POST', body: buildFormData(fd)})
+    checkAPITokenValid(() => {
-        .then((response) => response.text()
+        fetch(APIPREFIX + apinode, {
-            .then((result) => {
+            method: 'POST',
+            body: JSON.stringify(fd),
+            headers: new Headers({
+                'Content-Type': 'application/json',
+                Authorization: 'Bearer ' + apiToken
+            })
+        }).then((response) =>
+            response.text().then((result) => {
                 callback(result);
-            }));
+            })
-
+        );
+    });
 }
 
 /**
  * API nodes definitions
  */
+
+// eslint-disable-next-line no-shadow
 export enum APINode {
-    Settings = 'settings.php',
+    Settings = 'settings',
-    Tags = 'tags.php',
+    Tags = 'tags',
-    Actor = 'actor.php',
+    Actor = 'actor',
-    Video = 'video.php'
+    Video = 'video',
+    Init = 'init'
 }