show a span on tag hover to delete it maybe

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

.eslintrc.js

@@ -1,292 +0,0 @@
-/**
- * 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

@@ -6,13 +6,18 @@ stages:
   - packaging
   - deploy
 
+include:
+  - template: Code-Quality.gitlab-ci.yml
+
+variables:
+  SAST_DISABLE_DIND: "true"
+
 Minimize_Frontend:
   stage: build
   before_script:
     - yarn install --cache-folder .yarn
   script:
     - yarn run build
-    - rm build/*/*/*.map
   artifacts:
     expire_in: 2 days
     paths:
@@ -63,21 +68,9 @@ Backend_Tests:
     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: []
+code_quality:
+  tags:
+    - dind
 
 Debian_Server:
   stage: packaging

.prettierrc.js

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

README.md

@@ -22,30 +22,24 @@ and in dark mode:
 ![](https://i.ibb.co/xzhdsbJ/Screenshot-20200812-172926.png)
 
 ## Installation
+First of all clone the repository.
 
-Download the latest release .deb file from the Releases page and install it via `apt install ./OpenMediaCenter-0.1.x_amd64.deb`
+`git clone https://gitlab.heili.eu/lukas/openmediacenter.git`
 
-Now you could optionally check if the service is up and running: `systemctl status OpenMediaCenter`
+Then build a production build via npm. 
+
+`npm run build`
+
+Afterwards you can copy the content of the generated `build` folder as well as the `api` folder to your webserver root. 
+
+You need also to setup a Database with the structure described in [SQL Style Reference](https://gitlab.heili.eu/lukas/openmediacenter/-/blob/master/database.sql). 
+The login data to this database needs to be specified in the `api/Database.php` file.
+ 
 ## Usage
-Now you can access your MediaCenter via your servers global ip on port 8080 (:
+Now you can access your MediaCenter via your servers global ip (:
 
 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/src/handlers/Tags.php

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

apiGo/api/ApiBase.go

@@ -6,7 +6,6 @@ import (
 	"fmt"
 	"log"
 	"net/http"
-	"openmediacenter/apiGo/api/oauth"
 )
 
 const APIPREFIX = "/api"
@@ -16,7 +15,6 @@ const (
 	TagNode      = iota
 	SettingsNode = iota
 	ActorNode    = iota
-	InitNode     = iota
 )
 
 type actionStruct struct {
@@ -38,16 +36,10 @@ func AddHandler(action string, apiNode int, n interface{}, h func() []byte) {
 }
 
 func ServerInit(port uint16) {
-	http.Handle(APIPREFIX+"/video", oauth.ValidateToken(videoHandler))
-	http.Handle(APIPREFIX+"/tags", oauth.ValidateToken(tagHandler))
-	http.Handle(APIPREFIX+"/settings", oauth.ValidateToken(settingsHandler))
-	http.Handle(APIPREFIX+"/actor", oauth.ValidateToken(actorHandler))
-
-	// 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()
+	http.Handle(APIPREFIX+"/video", http.HandlerFunc(videoHandler))
+	http.Handle(APIPREFIX+"/tags", http.HandlerFunc(tagHandler))
+	http.Handle(APIPREFIX+"/settings", http.HandlerFunc(settingsHandler))
+	http.Handle(APIPREFIX+"/actor", http.HandlerFunc(actorHandler))
 
 	fmt.Printf("OpenMediacenter server up and running on port %d\n", port)
 	log.Fatal(http.ListenAndServe(fmt.Sprintf(":%d", port), nil))
@@ -89,10 +81,6 @@ 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" {

apiGo/api/Init.go

@@ -1,33 +0,0 @@
-package api
-
-import (
-	"encoding/json"
-	"openmediacenter/apiGo/database/settings"
-)
-
-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
-		}
-
-		res := InitialDataTypeResponse{
-			DarkMode:        sett.DarkMode,
-			Pasword:         sett.Pasword != "-1",
-			MediacenterName: sett.Mediacenter_name,
-			VideoPath:       sett.VideoPath,
-		}
-
-		str, _ := json.Marshal(res)
-		return str
-	})
-}

apiGo/api/Settings.go

@@ -1,6 +1,8 @@
 package api
 
 import (
+	"encoding/json"
+	"fmt"
 	"openmediacenter/apiGo/api/types"
 	"openmediacenter/apiGo/database"
 	"openmediacenter/apiGo/videoparser"
@@ -13,6 +15,41 @@ func AddSettingsHandlers() {
 }
 
 func getSettingsFromDB() {
+	AddHandler("loadInitialData", SettingsNode, nil, func() []byte {
+		query := "SELECT DarkMode, password, mediacenter_name, video_path from settings"
+
+		type InitialDataType struct {
+			DarkMode         int
+			Pasword          int
+			Mediacenter_name string
+			VideoPath        string
+		}
+
+		result := InitialDataType{}
+
+		err := database.QueryRow(query).Scan(&result.DarkMode, &result.Pasword, &result.Mediacenter_name, &result.VideoPath)
+		if err != nil {
+			fmt.Println("error while parsing db data: " + err.Error())
+		}
+
+		type InitialDataTypeResponse struct {
+			DarkMode         bool
+			Pasword          bool
+			Mediacenter_name string
+			VideoPath        string
+		}
+
+		res := InitialDataTypeResponse{
+			DarkMode:         result.DarkMode != 0,
+			Pasword:          result.Pasword != -1,
+			Mediacenter_name: result.Mediacenter_name,
+			VideoPath:        result.VideoPath,
+		}
+
+		str, _ := json.Marshal(res)
+		return str
+	})
+
 	AddHandler("loadGeneralSettings", SettingsNode, nil, func() []byte {
 		result := database.GetSettings()
 		return jsonify(result)

apiGo/api/Video.go

@@ -227,20 +227,7 @@ func addToVideoHandlers() {
 		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)
+		query := fmt.Sprintf("DELETE FROM videos WHERE movie_id=%d", dv.MovieId)
 		return database.SuccessQuery(query)
 	})
 }

apiGo/api/oauth/CustomClientStore.go

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

@@ -1,61 +0,0 @@
-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/database/settings/DBSettings.go

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

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

apiGo/go.sum

@@ -1,110 +1,2 @@
-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

@@ -26,7 +26,6 @@ func main() {
 	api.AddSettingsHandlers()
 	api.AddTagHandlers()
 	api.AddActorsHandlers()
-	api.AddInitHandlers()
 
 	api.ServerInit(8081)
 }

apiGo/videoparser/ReIndex.go

@@ -11,7 +11,6 @@ import (
 	"os/exec"
 	"regexp"
 	"strconv"
-	"strings"
 )
 
 var mSettings types.SettingsType
@@ -42,12 +41,7 @@ func ReIndexVideos(path []string, sett types.SettingsType) {
 	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 {
+	for _, s := range path {
 		processVideo(s)
 	}
 
@@ -57,45 +51,6 @@ func ReIndexVideos(path []string, sett types.SettingsType) {
 	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)
 
@@ -103,11 +58,18 @@ func processVideo(fileNameOrig string) {
 	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)
+	// now we should look if this video already exists in db
+	query := "SELECT * FROM videos WHERE movie_name = ?"
+	err := database.QueryRow(query, fileName).Scan()
+	if err == sql.ErrNoRows {
+		fmt.Printf("The Video %s does't exist! Adding it to database.\n", fileName)
+
+		addVideo(fileName, fileNameOrig, year)
+	} else {
+		fmt.Println(" :existing!")
+	}
 }
 
 // add a video to the database
@@ -177,9 +139,8 @@ func matchYear(fileName string) (int, string) {
 	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])
+
+	year, err := strconv.Atoi(years[len(years)-1])
 
 	if err != nil {
 		return -1, fileName
@@ -211,11 +172,7 @@ func parseFFmpegPic(fileName string) (*string, error) {
 		return nil, err
 	}
 
-	strEncPic := base64.StdEncoding.EncodeToString(stdout)
-	if strEncPic == "" {
-		return nil, nil
-	}
-	backpic64 := fmt.Sprintf("data:image/jpeg;base64,%s", strEncPic)
+	backpic64 := "data:image/jpeg;base64," + base64.StdEncoding.EncodeToString(stdout)
 
 	return &backpic64, nil
 }

apiGo/videoparser/tmdb/TMDBApi.go

@@ -6,7 +6,6 @@ import (
 	"fmt"
 	"io/ioutil"
 	"net/http"
-	"net/url"
 	"regexp"
 )
 
@@ -44,9 +43,8 @@ type TMDBGenre struct {
 }
 
 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)
+	url := fmt.Sprintf("%ssearch/movie?api_key=%s&query=%s", baseUrl, apiKey, MovieName)
+	resp, err := http.Get(url)
 	if err != nil {
 		fmt.Println(err.Error())
 		return nil
@@ -65,11 +63,6 @@ func SearchVideo(MovieName string, year int) *VideoTMDB {
 
 	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 {

database.sql

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

deb/OpenMediaCenter/DEBIAN/postinst

@@ -18,4 +18,4 @@ chown -R www-data:www-data /var/www/openmediacenter
 systemctl restart nginx
 
 systemctl enable OpenMediaCenter.service
-systemctl restart OpenMediaCenter.service
+systemctl start OpenMediaCenter.service

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

@@ -13,7 +13,7 @@ server {
         try_files $uri /index.html;
     }
 
-    location ~* ^/(api/|token) {
+    location /api/ {
         proxy_pass http://127.0.0.1:8081;
     }
 }

package.json

@@ -1,7 +1,8 @@
 {
   "name": "openmediacenter",
-  "version": "0.1.3",
+  "version": "0.1.2",
   "private": true,
+  "main": "public/electron.js",
   "author": {
     "email": "lukas.heiligenbrunner@gmail.com",
     "name": "Lukas Heiligenbrunner",
@@ -23,9 +24,8 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "CI=false react-scripts build",
-    "test": "CI=true react-scripts test --reporters=jest-junit --verbose --silent --coverage --reporters=default",
-    "lint": "eslint --format gitlab src/"
+    "build": "react-scripts build",
+    "test": "CI=true react-scripts test --reporters=jest-junit --verbose --silent --coverage --reporters=default"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -39,6 +39,23 @@
   },
   "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%",
@@ -56,26 +73,14 @@
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
     "@types/jest": "^26.0.19",
-    "@types/node": "^14.14.31",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
-    "@types/react-router": "5.1.12",
+    "@types/node": "^12.19.9",
+    "@types/react": "^16.14.2",
+    "@types/react-dom": "^16.9.10",
+    "@types/react-router": "5.1.8",
     "@types/react-router-dom": "^5.1.6",
-    "@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",
-    "prettier": "^2.2.1",
-    "prettier-config": "^1.0.0",
-    "react-scripts": "4.0.3"
+    "react-scripts": "4.0.1"
   }
 }

src/App.test.js

@@ -1,7 +1,6 @@
 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 () {
@@ -11,37 +10,34 @@ 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 => {
-        callAPIMock({
-            MediacenterName: 'testname'
-        })
-
-        GlobalInfos.enableDarkTheme = jest.fn((r) => {})
+        global.fetch = global.prepareFetchApi({
+            generalSettingsLoaded: true,
+            passwordsupport: true,
+            mediacentername: 'testname'
+        });
 
         const wrapper = shallow(<App/>);
 
+
+        const func = jest.fn();
+        wrapper.instance().setState = func;
+
+        expect(global.fetch).toBeCalledTimes(1);
+
         process.nextTick(() => {
-            expect(document.title).toBe('testname');
+            expect(func).toBeCalledTimes(1);
 
             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,7 +9,7 @@ import style from './App.module.css';
 
 import SettingsPage from './pages/SettingsPage/SettingsPage';
 import CategoryPage from './pages/CategoryPage/CategoryPage';
-import {APINode, apiTokenValid, callApiUnsafe, refreshAPIToken} from './utils/Api';
+import {APINode, callAPI} from './utils/Api';
 import {NoBackendConnectionPopup} from './elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup';
 
 import {BrowserRouter as Router, NavLink, Route, Switch} from 'react-router-dom';
@@ -17,10 +17,10 @@ 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 {
-    password: boolean | null; // null if uninitialized - true if pwd needed false if not needed
+    generalSettingsLoaded: boolean;
+    passwordsupport: boolean;
     mediacentername: string;
     onapierror: boolean;
 }
@@ -31,154 +31,87 @@ 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);
+            onapierror: false
         };
     }
 
     initialAPICall(): void {
         // this is the first api call so if it fails we know there is no connection to backend
-        callApiUnsafe(
-            APINode.Init,
-            {action: 'loadInitialData'},
-            (result: SettingsTypes.initialApiCallData) => {
-                // set theme
-                GlobalInfos.enableDarkTheme(result.DarkMode);
+        callAPI(APINode.Settings, {action: 'loadInitialData'}, (result: SettingsTypes.initialApiCallData) => {
+            // set theme
+            GlobalInfos.enableDarkTheme(result.DarkMode);
 
-                GlobalInfos.setVideoPath(result.VideoPath);
+            GlobalInfos.setVideoPath(result.VideoPath);
 
-                this.setState({
-                    mediacentername: result.MediacenterName,
-                    onapierror: false
-                });
-                // set tab title to received mediacenter name
-                document.title = result.MediacenterName;
-            },
-            () => {
-                this.setState({onapierror: true});
-            }
-        );
+            this.setState({
+                generalSettingsLoaded: true,
+                passwordsupport: result.Password,
+                mediacentername: result.Mediacenter_name,
+                onapierror: false
+            });
+            // set tab title to received mediacenter name
+            document.title = result.Mediacenter_name;
+        }, error => {
+            this.setState({onapierror: true});
+        });
     }
 
     componentDidMount(): void {
         this.initialAPICall();
     }
 
+
     render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         // add the main theme to the page body
         document.body.className = themeStyle.backgroundcolor;
 
-        if (this.state.password === true) {
-            // render authentication page if auth is neccessary
-            return <AuthenticationPage onSuccessLogin={(): void => this.setState({password: false})} />;
-        } else if (this.state.password === false) {
-            return (
-                <Router>
-                    <div className={style.app}>
-                        <div
-                            className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(
-                                ' '
-                            )}>
-                            <div className={style.navbrand}>{this.state.mediacentername}</div>
-                            <NavLink
-                                className={[style.navitem, themeStyle.navitem].join(' ')}
-                                to={'/'}
-                                activeStyle={{opacity: '0.85'}}>
-                                Home
-                            </NavLink>
-                            <NavLink
-                                className={[style.navitem, themeStyle.navitem].join(' ')}
-                                to={'/random'}
-                                activeStyle={{opacity: '0.85'}}>
-                                Random Video
-                            </NavLink>
+        return (
+            <Router>
+                <div className={style.app}>
+                    <div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
+                        <div className={style.navbrand}>{this.state.mediacentername}</div>
+                        <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/'} activeStyle={{opacity: '0.85'}}>Home</NavLink>
+                        <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/random'} activeStyle={{opacity: '0.85'}}>Random
+                            Video</NavLink>
 
-                            <NavLink
-                                className={[style.navitem, themeStyle.navitem].join(' ')}
-                                to={'/categories'}
-                                activeStyle={{opacity: '0.85'}}>
-                                Categories
-                            </NavLink>
-                            <NavLink
-                                className={[style.navitem, themeStyle.navitem].join(' ')}
-                                to={'/settings'}
-                                activeStyle={{opacity: '0.85'}}>
-                                Settings
-                            </NavLink>
-                        </div>
-                        {this.routing()}
+                        <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.state.onapierror ? this.ApiError() : null}
-                </Router>
-            );
-        } else {
-            return <>still loading...</>;
-        }
+                    {this.routing()}
+                </div>
+                {this.state.onapierror ? this.ApiError() : null}
+            </Router>
+        );
     }
 
     routing(): JSX.Element {
         return (
             <Switch>
-                <Route path='/random'>
-                    <RandomPage />
+                <Route path="/random">
+                    <RandomPage/>
                 </Route>
-                <Route path='/categories'>
-                    <CategoryPage />
+                <Route path="/categories">
+                    <CategoryPage/>
                 </Route>
-                <Route path='/settings'>
-                    <SettingsPage />
+                <Route path="/settings">
+                    <SettingsPage/>
                 </Route>
-                <Route exact path='/player/:id'>
-                    <Player />
+                <Route exact path="/player/:id">
+                    <Player/>
                 </Route>
-                <Route exact path='/actors'>
-                    <ActorOverviewPage />
+                <Route exact path="/actors">
+                    <ActorOverviewPage/>
                 </Route>
-                <Route path='/actors/:id'>
-                    <ActorPage />
+                <Route path="/actors/:id">
+                    <ActorPage/>
                 </Route>
-                <Route path='/'>
-                    <HomePage />
+                <Route path="/">
+                    <HomePage/>
                 </Route>
             </Switch>
         );
@@ -186,7 +119,7 @@ class App extends React.Component<{}, state> {
 
     ApiError(): JSX.Element {
         // on api error show popup and retry and show again if failing..
-        return <NoBackendConnectionPopup onHide={(): void => this.initialAPICall()} />;
+        return (<NoBackendConnectionPopup onHide={(): void => this.initialAPICall()}/>);
     }
 }
 

src/elements/ActorTile/ActorTile.test.js

@@ -12,8 +12,12 @@ describe('<ActorTile/>', function () {
         const func = jest.fn((_) => {});
         const wrapper = shallow(<ActorTile actor={{Thumbnail: '-1', Name: 'testname', id: 3}} onClick={() => func()}/>);
 
+        const func1 = jest.fn();
+        prepareViewBinding(func1);
+
         wrapper.simulate('click');
 
+        expect(func1).toBeCalledTimes(0);
         expect(func).toBeCalledTimes(1);
     });
 });

src/elements/ActorTile/ActorTile.tsx

@@ -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> {
-    constructor(props: Props) {
+class ActorTile extends React.Component<props> {
+    constructor(props: props) {
         super(props);
 
         this.state = {};
@@ -21,27 +21,26 @@ class ActorTile extends React.Component<Props> {
         if (this.props.onClick) {
             return this.renderActorTile(this.props.onClick);
         } else {
-            return <Link to={{pathname: '/actors/' + this.props.actor.ActorId}}>{this.renderActorTile(() => {})}</Link>;
+            return (
+                <Link to={{pathname: '/actors/' + this.props.actor.ActorId}}>
+                    {this.renderActorTile(() => {
+                    })}
+                </Link>
+            );
         }
     }
 
-    renderActorTile(customclickhandler: (actor: ActorType) => void): JSX.Element {
+    /**
+     * render the Actor Tile with its pic
+     * @param customclickhandler a custom click handler to be called onclick instead of Link
+     */
+    private renderActorTile(customclickhandler: (actor: ActorType) => void): JSX.Element {
         return (
             <div className={style.actortile} onClick={(): void => customclickhandler(this.props.actor)}>
                 <div className={style.actortile_thumbnail}>
-                    {
-                        this.props.actor.Thumbnail === '' ? (
-                            <FontAwesomeIcon
-                                style={{
-                                    lineHeight: '130px'
-                                }}
-                                icon={faUser}
-                                size='5x'
-                            />
-                        ) : (
-                            'dfdf'
-                        ) /* todo render picture provided here! */
-                    }
+                    {this.props.actor.Thumbnail === '' ? <FontAwesomeIcon style={{
+                        lineHeight: '130px'
+                    }} icon={faUser} size='5x'/> : 'dfdf' /* todo render picture provided here! */}
                 </div>
                 <div className={style.actortile_name}>{this.props.actor.Name}</div>
             </div>

src/elements/FilterButton/FilterButton.test.js

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

@@ -1,121 +0,0 @@
-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;
-    backColor: string;
-    icon: IconDefinition;
-    text: string | number;
-    subtext: string | number;
+    onClick?: () => void
+    backColor: string
+    icon: IconDefinition
+    text: string | number
+    subtext: string | number
 }
 
 /**
@@ -18,35 +18,23 @@ interface props {
 class InfoHeaderItem extends React.Component<props> {
     render(): JSX.Element {
         return (
-            <div
-                onClick={(): void => {
-                    // call clicklistener if defined
-                    if (this.props.onClick != null) {
-                        this.props.onClick();
-                    }
-                }}
-                className={style.infoheaderitem}
-                style={{backgroundColor: this.props.backColor}}>
+            <div onClick={(): void => {
+                // call clicklistener if defined
+                if (this.props.onClick != null) this.props.onClick();
+            }} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}>
                 <div className={style.icon}>
-                    <FontAwesomeIcon
-                        style={{
-                            verticalAlign: 'middle',
-                            lineHeight: '130px'
-                        }}
-                        icon={this.props.icon}
-                        size='5x'
-                    />
+                    <FontAwesomeIcon style={{
+                        verticalAlign: 'middle',
+                        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,8 +17,10 @@ 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}</>
-                <Line />
+                <>
+                    {this.props.children}
+                </>
+                <Line/>
             </div>
         );
     }
@@ -33,7 +35,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

@@ -40,7 +40,7 @@ describe('<AddActorPopup/>', function () {
 
     it('simulate actortile click', function () {
         const func = jest.fn();
-        const wrapper = shallow(<AddActorPopup onHide={() => {func();}} movieId={1}/>);
+        const wrapper = shallow(<AddActorPopup onHide={() => {func();}} movie_id={1}/>);
 
         global.callAPIMock({result: 'success'});
 

src/elements/Popups/AddActorPopup/AddActorPopup.tsx

@@ -6,40 +6,53 @@ import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
 import {APINode, callAPI} from '../../../utils/Api';
 import {ActorType} from '../../../types/VideoTypes';
 import {GeneralSuccess} from '../../../types/GeneralTypes';
-import FilterButton from '../../FilterButton/FilterButton';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faFilter, faTimes} from '@fortawesome/free-solid-svg-icons';
+import {Button} from '../../GPElements/Button';
+import {addKeyHandler, removeKeyHandler} from '../../../utils/ShortkeyHandler';
 
-interface Props {
+interface props {
     onHide: () => void;
-    movieId: number;
+    movie_id: number;
 }
 
 interface state {
     contentDefault: boolean;
     actors: ActorType[];
     filter: string;
+    filtervisible: boolean;
 }
 
 /**
  * Popup for Adding a new Actor to a Video
  */
-class AddActorPopup extends React.Component<Props, state> {
+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();
     }
@@ -48,19 +61,12 @@ 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={
-                        <button
-                            className={style.newactorbutton}
-                            onClick={(): void => {
-                                this.setState({contentDefault: false});
-                            }}>
-                            Create new Actor
-                        </button>
-                    }
-                    ParentSubmit={this.parentSubmit}>
+                <PopupBase title='Add new Actor to Video' onHide={this.props.onHide} banner={
+                    <button
+                        className={style.newactorbutton}
+                        onClick={(): void => {
+                            this.setState({contentDefault: false});
+                        }}>Create new Actor</button>} ParentSubmit={this.parentSubmit}>
                     {this.resolvePage()}
                 </PopupBase>
             </>
@@ -72,18 +78,11 @@ class AddActorPopup extends React.Component<Props, state> {
      * @returns {JSX.Element}
      */
     resolvePage(): JSX.Element {
-        if (this.state.contentDefault) {
-            return this.getContent();
-        } else {
-            return (
-                <NewActorPopupContent
-                    onHide={(): void => {
-                        this.loadActors();
-                        this.setState({contentDefault: true});
-                    }}
-                />
-            );
-        }
+        if (this.state.contentDefault) return (this.getContent());
+        else return (<NewActorPopupContent onHide={(): void => {
+            this.loadActors();
+            this.setState({contentDefault: true});
+        }}/>);
     }
 
     /**
@@ -95,19 +94,36 @@ class AddActorPopup extends React.Component<Props, state> {
             return (
                 <>
                     <div className={style.searchbar}>
-                        <FilterButton
-                            onFilterChange={(filter): void => {
-                                this.setState({filter: filter});
-                            }}
-                        />
+                        {
+                            this.state.filtervisible ?
+                                <>
+                                    <input className={'form-control mr-sm-2 ' + style.searchinput}
+                                           type='text' placeholder='Filter' value={this.state.filter}
+                                           onChange={(e): void => {
+                                               this.setState({filter: e.target.value});
+                                           }}
+                                           ref={(input): void => {this.filterfield = input;}}/>
+                                    <Button title={<FontAwesomeIcon style={{
+                                        verticalAlign: 'middle',
+                                        lineHeight: '130px'
+                                    }} icon={faTimes} size='1x'/>} color={{backgroundColor: 'red'}} onClick={(): void => {
+                                        this.setState({filter: '', filtervisible: false});
+                                    }}/>
+                                </> :
+                                <Button
+                                    title={<span>Filter <FontAwesomeIcon style={{
+                                        verticalAlign: 'middle',
+                                        lineHeight: '130px'
+                                    }} icon={faFilter} size='1x'/></span>}
+                                    color={{backgroundColor: 'cornflowerblue', color: 'white'}}
+                                    onClick={(): void => this.enableFilterField()}/>
+                        }
                     </div>
-                    {this.state.actors.filter(this.filterSearch).map((el) => (
-                        <ActorTile actor={el} onClick={this.tileClickHandler} />
-                    ))}
+                    {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>);
         }
     }
 
@@ -116,33 +132,39 @@ class AddActorPopup extends React.Component<Props, state> {
      */
     tileClickHandler(actor: ActorType): void {
         // fetch the available actors
-        callAPI<GeneralSuccess>(
-            APINode.Actor,
-            {
-                action: 'addActorToVideo',
-                ActorId: actor.ActorId,
-                MovieId: this.props.movieId
-            },
-            (result) => {
-                if (result.result === 'success') {
-                    // return back to player page
-                    this.props.onHide();
-                } else {
-                    console.error('an error occured while fetching actors: ' + result);
-                }
+        callAPI<GeneralSuccess>(APINode.Actor, {
+            action: 'addActorToVideo',
+            ActorId: actor.ActorId,
+            MovieId: this.props.movie_id
+        }, result => {
+            if (result.result === 'success') {
+                // return back to player page
+                this.props.onHide();
+            } else {
+                console.error('an error occured while fetching actors: ' + result);
             }
-        );
+        });
     }
 
     /**
      * load the actors from backend and set state
      */
     loadActors(): void {
-        callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, (result) => {
+        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
@@ -163,6 +185,17 @@ 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,3 +1,26 @@
-.actionbar{
-    margin-bottom: 15px;
+.popup {
+    border: 3px #3574fe solid;
+    border-radius: 18px;
+    height: 80%;
+    left: 20%;
+    opacity: 0.95;
+    position: absolute;
+    top: 10%;
+    width: 60%;
+    z-index: 2;
+}
+
+.header {
+    cursor: move;
+    font-size: x-large;
+    margin-left: 15px;
+    margin-top: 10px;
+    opacity: 1;
+}
+
+.content {
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 10px;
+    opacity: 1;
 }

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

@@ -25,37 +25,11 @@ describe('<AddTagPopup/>', function () {
         const wrapper = shallow(<AddTagPopup submit={jest.fn()} onHide={jest.fn()}/>);
 
         wrapper.setState({
-            items: [{TagId: 1, TagName: 'test'}]
+            items: [{tag_id: 1, tag_name: 'test'}]
         }, () => {
             wrapper.find('Tag').first().dive().simulate('click');
             expect(wrapper.instance().props.submit).toHaveBeenCalledTimes(1);
             expect(wrapper.instance().props.onHide).toHaveBeenCalledTimes(1);
         });
     });
-
-    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,31 +3,25 @@ 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> {
-    constructor(props: Props) {
+class AddTagPopup extends React.Component<props, state> {
+    constructor(props: props) {
         super(props);
 
-        this.state = {items: [], filter: ''};
-
-        this.tagFilter = this.tagFilter.bind(this);
-        this.parentSubmit = this.parentSubmit.bind(this);
-        this.onItemClick = this.onItemClick.bind(this);
+        this.state = {items: []};
     }
 
     componentDidMount(): void {
@@ -40,35 +34,18 @@ class AddTagPopup extends React.Component<Props, state> {
 
     render(): JSX.Element {
         return (
-            <PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide} ParentSubmit={this.parentSubmit}>
-                <div className={styles.actionbar}>
-                    <FilterButton onFilterChange={(filter): void => this.setState({filter: filter})} />
-                </div>
-                {this.state.items
-                    ? this.state.items.filter(this.tagFilter).map((i) => <Tag tagInfo={i} onclick={(): void => this.onItemClick(i)} />)
-                    : null}
+            <PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide}>
+                {this.state.items ?
+                    this.state.items.map((i) => (
+                        <Tag tagInfo={i}
+                             onclick={(): void => {
+                                 this.props.submit(i.TagId, i.TagName);
+                                 this.props.onHide();
+                             }}/>
+                    )) : null}
             </PopupBase>
         );
     }
-
-    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,17 +28,10 @@ export class NewActorPopupContent extends React.Component<NewActorPopupProps> {
         return (
             <>
                 <div>
-                    <input
-                        type='text'
-                        placeholder='Actor Name'
-                        onChange={(v): void => {
-                            this.value = v.target.value;
-                        }}
-                    />
-                </div>
-                <button className={style.savebtn} onClick={(): void => this.storeselection()}>
-                    Save
-                </button>
+                    <input type='text' placeholder='Actor Name' onChange={(v): void => {
+                        this.value = v.target.value;
+                    }}/></div>
+                <button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button>
             </>
         );
     }
@@ -48,9 +41,7 @@ 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,24 +16,11 @@ 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()}>
-                <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 title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px' ParentSubmit={(): void => this.storeselection()}>
+                <div><input type='text' placeholder='Tagname' onChange={(v): void => {
+                    this.value = v.target.value;
+                }}/></div>
+                <button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button>
             </PopupBase>
         );
     }

src/elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup.tsx

@@ -4,24 +4,17 @@ import style from '../NewActorPopup/NewActorPopup.module.css';
 import {setCustomBackendDomain} from '../../../utils/Api';
 
 interface NBCProps {
-    onHide: (_: void) => void;
+    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>
+                <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,11 +8,18 @@ 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
@@ -22,7 +29,7 @@ describe('<PopupBase/>', function () {
     });
 
     it('test an Enter sumit', function () {
-        const events = mockKeyPress();
+        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,
-            height: this.props.height ? this.props.height : undefined,
-            minHeight: this.props.height ? this.props.height : undefined
+            width: (this.props.width ? this.props.width : undefined),
+            height: (this.props.height ? this.props.height : undefined),
+            minHeight: (this.props.height ? this.props.height : undefined)
         };
     }
 
@@ -63,14 +63,16 @@ class PopupBase extends React.Component<Props> {
                     <div className={style.banner}>{this.props.banner}</div>
                 </div>
 
-                <Line />
-                <div className={style.content}>{this.props.children}</div>
+                <Line/>
+                <div className={style.content}>
+                    {this.props.children}
+                </div>
             </div>
         );
     }
 
     /**
-     * Alert if clicked on outside of element
+     * handle click on outside of element
      */
     handleClickOutside(event: MouseEvent): void {
         if (this.wrapperRef && this.wrapperRef.current && !this.wrapperRef.current.contains(event.target as Node)) {
@@ -88,9 +90,7 @@ 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,19 +98,15 @@ 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.firstChild === null) {
-            return;
-        }
+        if (elmnt === null) return;
+        if (elmnt.firstChild === null) return;
 
         (elmnt.firstChild as HTMLDivElement).onmousedown = dragMouseDown;
 
+
         function dragMouseDown(e: MouseEvent): void {
             e.preventDefault();
             // get the mouse cursor position at startup:
@@ -129,11 +125,9 @@ class PopupBase extends React.Component<Props> {
             xOld = e.clientX;
             yOld = e.clientY;
             // set the element's new position:
-            if (elmnt === null) {
-                return;
-            }
-            elmnt.style.top = elmnt.offsetTop - dy + 'px';
-            elmnt.style.left = elmnt.offsetLeft - dx + 'px';
+            if (elmnt === null) return;
+            elmnt.style.top = (elmnt.offsetTop - dy) + 'px';
+            elmnt.style.left = (elmnt.offsetLeft - dx) + 'px';
         }
 
         function closeDragElement(): void {

src/elements/Popups/SubmitPopup/SubmitPopup.tsx

@@ -2,16 +2,17 @@ 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='Cancel' color={{backgroundColor: 'red'}} onClick={(): void => props.onHide()} />
+            <Button title='Submit' color={{backgroundColor: 'green'}} onClick={(): void => props.submit()}/>
+            <Button title='Cancel' color={{backgroundColor: 'red'}} onClick={(): void => props.onHide()}/>
         </PopupBase>
     );
+
 }

src/elements/Preview/Preview.module.css

@@ -6,6 +6,29 @@
     text-align: center;
 }
 
+.videopreview:hover .quickactions {
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 50%;
+
+    color: lightgrey;
+    display: block;
+
+    height: 35px;
+    opacity: 0.7;
+    padding-top: 5px;
+
+    position: absolute;
+
+    right: 5px;
+    text-align: center;
+    top: 5px;
+    width: 35px;
+}
+
+.quickactions {
+    display: none;
+}
+
 .previewpic {
     height: 80%;
     min-height: 150px;
@@ -38,6 +61,7 @@
     margin-left: 25px;
     margin-top: 25px;
     opacity: 0.85;
+    position: relative;
 }
 
 .videopreview:hover {

src/elements/Preview/Preview.tsx

@@ -3,17 +3,19 @@ import style from './Preview.module.css';
 import {Spinner} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
 import GlobalInfos from '../../utils/GlobalInfos';
-import {APINode, callAPIPlain} from '../../utils/Api';
+import {faEllipsisV} from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faPhotoVideo} from '@fortawesome/free-solid-svg-icons';
+import QuickActionPop from '../QuickActionPop/QuickActionPop';
+import {APINode, callAPIPlain} from '../../utils/Api';
 
 interface PreviewProps {
     name: string;
-    movieId: number;
+    movie_id: number;
 }
 
 interface PreviewState {
     previewpicture: string | null;
+    optionsvisible: boolean;
 }
 
 /**
@@ -25,12 +27,13 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
         super(props);
 
         this.state = {
-            previewpicture: null
+            previewpicture: null,
+            optionsvisible: false
         };
     }
 
     componentDidMount(): void {
-        callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movieId}, (result) => {
+        callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movie_id}, (result) => {
             this.setState({
                 previewpicture: result
             });
@@ -40,43 +43,53 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
     render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
-            <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.state.previewpicture === '' ? (
-                            <FontAwesomeIcon
-                                style={{
-                                    color: 'white',
-                                    marginTop: '55px'
-                                }}
-                                icon={faPhotoVideo}
-                                size='5x'
-                            />
-                        ) : this.state.previewpicture === null ? (
-                            <span className={style.loadAnimation}>
-                                <Spinner animation='border' />
-                            </span>
-                        ) : (
-                            <img className={style.previewimage} src={this.state.previewpicture} alt='Pic loading.' />
-                        )}
-                    </div>
-                    <div className={style.previewbottom} />
+            <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
+                <div className={style.quickactions} onClick={(): void => this.setState({optionsvisible: true})}>
+                    <FontAwesomeIcon style={{
+                        verticalAlign: 'middle',
+                        fontSize: '25px'
+                    }} icon={faEllipsisV} size='1x'/>
                 </div>
-            </Link>
+                {this.popupvisible()}
+                <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
+                <Link to={'/player/' + this.props.movie_id}>
+                    <div className={style.previewpic}>
+                        {this.state.previewpicture !== null ?
+                            <img className={style.previewimage}
+                                 src={this.state.previewpicture}
+                                 alt='Pic loading.'/> :
+                            <span className={style.loadAnimation}><Spinner animation='border'/></span>}
+
+                    </div>
+                </Link>
+                <div className={style.previewbottom}>
+
+                </div>
+            </div>
         );
     }
+
+
+    popupvisible(): JSX.Element {
+        if (this.state.optionsvisible)
+            return (<QuickActionPop position={{x: 50, y: 50}} onHide={(): void => this.setState({optionsvisible: false})}>heeyyho</QuickActionPop>);
+        else
+            return <></>;
+    }
 }
 
 /**
  * Component for a Tag-name tile (used in category page)
  */
-export class TagPreview extends React.Component<{name: string}> {
+export class TagPreview extends React.Component<{ name: string }> {
     render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
-            <div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
-                <div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
+            <div
+                className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
+                <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 movieId={1}/>);
+        const wrapper = shallow(<Preview movie_id={1}/>);
         wrapper.unmount();
     });
 
@@ -17,7 +17,7 @@ describe('<Preview/>', function () {
         });
         global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
 
-        const wrapper = shallow(<Preview name='test' movieId={1}/>);
+        const wrapper = shallow(<Preview name='test' movie_id={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 movieId={1}/>);
+        const wrapper = shallow(<Preview movie_id={1}/>);
 
         // expect load animation to be visible
         expect(wrapper.find('.loadAnimation')).toHaveLength(1);

src/elements/QuickActionPop/QuickActionPop.tsx

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

src/elements/QuickActionPop/QuickActionPopup.module.css

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

src/elements/SideBar/SideBar.tsx

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

src/elements/Tag/Tag.module.css

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

src/elements/Tag/Tag.tsx

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

src/elements/VideoContainer/VideoContainer.tsx

@@ -3,8 +3,8 @@ import Preview from '../Preview/Preview';
 import style from './VideoContainer.module.css';
 import {VideoTypes} from '../../types/ApiTypes';
 
-interface Props {
-    data: VideoTypes.VideoUnloadedType[];
+interface props {
+    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,11 +38,15 @@ class VideoContainer extends React.Component<Props, state> {
     render(): JSX.Element {
         return (
             <div className={style.maincontent}>
-                {this.state.loadeditems.map((elem) => (
-                    <Preview key={elem.MovieId} name={elem.MovieName} movieId={elem.MovieId} />
+                {this.state.loadeditems.map(elem => (
+                    <Preview
+                        key={elem.MovieId}
+                        name={elem.MovieName}
+                        movie_id={elem.MovieId}/>
                 ))}
                 {/*todo css for no items to show*/}
-                {this.state.loadeditems.length === 0 ? 'no items to show!' : null}
+                {this.state.loadeditems.length === 0 ?
+                    'no items to show!' : null}
                 {this.props.children}
             </div>
         );
@@ -69,9 +73,13 @@ class VideoContainer extends React.Component<Props, state> {
         }
 
         this.setState({
-            loadeditems: [...this.state.loadeditems, ...ret]
+            loadeditems: [
+                ...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' ? (_: string | number | boolean): void => {} : global.console.log;
+global.console.log = process.env.NODE_ENV !== 'development' ? (s: string | number | boolean): void => {} : global.console.log;
 
 ReactDOM.render(
     <React.StrictMode>
-        <App />
+        <App/>
     </React.StrictMode>,
     document.getElementById('root')
 );

src/pages/ActorOverviewPage/ActorOverviewPage.tsx

@@ -8,15 +8,16 @@ 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> {
-    constructor(props: Props) {
+class ActorOverviewPage extends React.Component<props, state> {
+    constructor(props: props) {
         super(props);
 
         this.state = {
@@ -32,29 +33,24 @@ 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.ActorId} actor={el} />
-                    ))}
+                    {this.state.actors.map((el) => (<ActorTile key={el.ActorId} actor={el}/>))}
                 </div>
-                {this.state.NActorPopupVisible ? (
-                    <NewActorPopup
-                        onHide={(): void => {
-                            this.setState({NActorPopupVisible: false});
-                            this.fetchAvailableActors(); // refetch actors
-                        }}
-                    />
-                ) : null}
+                {this.state.NActorPopupVisible ?
+                    <NewActorPopup onHide={(): void => {
+                        this.setState({NActorPopupVisible: false});
+                        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.tsx

@@ -13,20 +13,22 @@ import {Button} from '../../elements/GPElements/Button';
 import {ActorTypes, VideoTypes} from '../../types/ApiTypes';
 
 interface state {
-    data: VideoTypes.VideoUnloadedType[];
-    actor: ActorType;
+    data: VideoTypes.VideoUnloadedType[],
+    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> {
-    constructor(props: Props) {
+export class ActorPage extends React.Component<props, state> {
+    constructor(props: props) {
         super(props);
 
         this.state = {data: [], actor: {ActorId: 0, Name: '', Thumbnail: ''}};
@@ -38,17 +40,20 @@ export class ActorPage extends React.Component<Props, state> {
                 <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 ? <VideoContainer data={this.state.data} /> : <div>No Data found!</div>}
+                {this.state.data.length !== 0 ?
+                    <VideoContainer
+                        data={this.state.data}/> :
+                    <div>No Data found!</div>}
             </>
         );
     }
@@ -61,19 +66,15 @@ export class ActorPage extends React.Component<Props, state> {
      * request more actor info from backend
      */
     getActorInfo(): void {
-        callAPI(
-            APINode.Actor,
-            {
-                action: 'getActorInfo',
-                ActorId: parseInt(this.props.match.params.id, 10)
-            },
-            (result: ActorTypes.videofetchresult) => {
-                this.setState({
-                    data: result.Videos ? result.Videos : [],
-                    actor: result.Info
-                });
-            }
-        );
+        callAPI(APINode.Actor, {
+            action: 'getActorInfo',
+            ActorId: parseInt(this.props.match.params.id)
+        }, (result: ActorTypes.videofetchresult) => {
+            this.setState({
+                data: result.Videos ? result.Videos : [],
+                actor: result.Info
+            });
+        });
     }
 }
 

src/pages/AuthenticationPage/AuthenticationPage.module.css

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

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

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

src/pages/CategoryPage/TagView.tsx

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

src/pages/HomePage/HomePage.tsx

@@ -10,25 +10,25 @@ 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';
+import {DefaultTags} from "../../types/GeneralTypes";
 
-interface Props extends RouteComponentProps {}
+interface props extends RouteComponentProps {}
 
 interface state {
-    sideinfo: VideoTypes.startDataType;
-    subtitle: string;
-    data: VideoTypes.VideoUnloadedType[];
-    selectionnr: number;
+    sideinfo: VideoTypes.startDataType
+    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 = {
@@ -38,7 +38,7 @@ export class HomePage extends React.Component<Props, state> {
                 HDNr: 0,
                 SDNr: 0,
                 DifferentTags: 0,
-                Tagged: 0
+                Tagged: 0,
             },
             subtitle: 'All Videos',
             data: [],
@@ -65,7 +65,7 @@ export class HomePage extends React.Component<Props, state> {
             });
             this.setState({
                 data: result,
-                selectionnr: result.length
+                selectionnr: result.length,
             });
         });
     }
@@ -79,86 +79,65 @@ export class HomePage extends React.Component<Props, state> {
         });
     }
 
+
     render(): JSX.Element {
         return (
             <>
                 <Switch>
                     <Route path='/search/:name'>
-                        <SearchHandling />
+                        <SearchHandling/>
                     </Route>
                     <Route path='/'>
-                        <PageTitle title='Home Page' subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
-                            <form
-                                className={'form-inline ' + style.searchform}
-                                onSubmit={(e): void => {
-                                    e.preventDefault();
-                                    this.props.history.push('/search/' + this.keyword);
-                                }}>
-                                <input
-                                    data-testid='searchtextfield'
-                                    className='form-control mr-sm-2'
-                                    type='text'
-                                    placeholder='Search'
-                                    onChange={(e): void => {
-                                        this.keyword = e.target.value;
-                                    }}
-                                />
-                                <button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>
-                                    Search
-                                </button>
+                        <PageTitle
+                            title='Home Page'
+                            subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
+                            <form className={'form-inline ' + style.searchform} onSubmit={(e): void => {
+                                e.preventDefault();
+                                this.props.history.push('/search/' + this.keyword);
+                            }}>
+                                <input data-testid='searchtextfield' className='form-control mr-sm-2'
+                                       type='text' placeholder='Search'
+                                       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 />
-                            <SideBarItem>
-                                <b>{this.state.sideinfo.VideoNr}</b> Videos Total!
-                            </SideBarItem>
-                            <SideBarItem>
-                                <b>{this.state.sideinfo.FullHdNr}</b> FULL-HD Videos!
-                            </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 />
+                            <Line/>
+                            <SideBarItem><b>{this.state.sideinfo.VideoNr}</b> Videos Total!</SideBarItem>
+                            <SideBarItem><b>{this.state.sideinfo.FullHdNr}</b> FULL-HD Videos!</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={{TagName: 'All', TagId: DefaultTags.all.TagId}}
-                                onclick={(): void => {
-                                    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'});
-                                }}
-                            />
+                            <Tag tagInfo={{TagName: 'All', TagId: DefaultTags.all.TagId}} onclick={(): void => {
+                                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 ? <VideoContainer data={this.state.data} /> : <div>No Data found!</div>}
-                        <div className={style.rightinfo} />
+                        {this.state.data.length !== 0 ?
+                            <VideoContainer
+                                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> {
-    constructor(props: Props) {
+export class SearchHandling extends React.Component<props, state> {
+    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} />
-                <SideBar hiddenFrame />
+                <PageTitle title='Search' subtitle={this.props.match.params.name + ': ' + this.state.data.length}/>
+                <SideBar hiddenFrame/>
                 {this.getVideoData()}
             </>
         );
@@ -45,9 +45,11 @@ export class SearchHandling extends React.Component<Props, state> {
      */
     getVideoData(): JSX.Element {
         if (this.state.data.length !== 0) {
-            return <VideoContainer data={this.state.data} />;
+            return (
+                <VideoContainer data={this.state.data}/>
+            );
         } else {
-            return <div>No Data found!</div>;
+            return (<div>No Data found!</div>);
         }
     }
 

src/pages/Player/Player.tsx

@@ -1,41 +1,41 @@
 import React from 'react';
-
 import style from './Player.module.css';
 import plyrstyle from 'plyr-react/dist/plyr.css';
-
 import {Plyr} from 'plyr-react';
+import PlyrJS from 'plyr';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
 import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
 import Tag from '../../elements/Tag/Tag';
 import AddTagPopup from '../../elements/Popups/AddTagPopup/AddTagPopup';
 import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-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 {callAPI, getBackendDomain, APINode} 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';
+import GlobalInfos from "../../utils/GlobalInfos";
+import QuickActionPop, {ContextItem} from '../../elements/QuickActionPop/QuickActionPop';
 
-interface myprops extends RouteComponentProps<{id: string}> {}
+interface myprops extends RouteComponentProps<{ id: string }> {}
 
 interface mystate {
-    sources?: PlyrJS.SourceInfo;
-    movieId: number;
-    movieName: string;
-    likes: number;
-    quality: number;
-    length: number;
-    tags: TagType[];
-    suggesttag: TagType[];
-    popupvisible: boolean;
-    actorpopupvisible: boolean;
-    actors: ActorType[];
+    sources?: PlyrJS.SourceInfo,
+    movie_id: number,
+    movie_name: string,
+    likes: number,
+    quality: number,
+    length: number,
+    tags: TagType[],
+    suggesttag: TagType[],
+    popupvisible: boolean,
+    actorpopupvisible: boolean,
+    actors: ActorType[],
+    tagContextMenu: boolean
 }
 
 /**
@@ -43,7 +43,7 @@ interface mystate {
  * and actions such as tag adding and liking
  */
 export class Player extends React.Component<myprops, mystate> {
-    options: PlyrJS.Options = {
+    private options: PlyrJS.Options = {
         controls: [
             'play-large', // The large play button in the center
             'play', // Play/pause playback
@@ -60,12 +60,15 @@ export class Player extends React.Component<myprops, mystate> {
         ]
     };
 
+    private contextpos = {x: 0, y: 0, tagid: -1};
+
     constructor(props: myprops) {
         super(props);
 
         this.state = {
-            movieId: -1,
-            movieName: '',
+            tagContextMenu: false,
+            movie_id: -1,
+            movie_name: '',
             likes: 0,
             quality: 0,
             length: 0,
@@ -77,6 +80,7 @@ export class Player extends React.Component<myprops, mystate> {
         };
 
         this.quickAddTag = this.quickAddTag.bind(this);
+        this.deleteTag = this.deleteTag.bind(this);
     }
 
     componentDidMount(): void {
@@ -87,37 +91,27 @@ export class Player extends React.Component<myprops, mystate> {
     render(): JSX.Element {
         return (
             <div id='videocontainer'>
-                <PageTitle title='Watch' subtitle={this.state.movieName} />
+                <PageTitle
+                    title='Watch'
+                    subtitle={this.state.movie_name}/>
 
                 {this.assembleSideBar()}
 
                 <div className={style.videowrapper}>
                     {/* video component is added here */}
-                    {this.state.sources ? (
-                        <Plyr style={plyrstyle} source={this.state.sources} options={this.options} />
-                    ) : (
-                        <div>not loaded yet</div>
-                    )}
+                    {this.state.sources ? <Plyr
+                            style={plyrstyle}
+                            source={this.state.sources}
+                            options={this.options}/> :
+                        <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.setState({popupvisible: true})}
-                            title='Give this Video a Tag'
-                            color={{backgroundColor: '#3574fe'}}
-                        />
-                        <Button
-                            title='Delete Video'
-                            onClick={(): void => {
-                                this.deleteVideo();
-                            }}
-                            color={{backgroundColor: 'red'}}
-                        />
+                        <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 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()
@@ -133,26 +127,21 @@ export class Player extends React.Component<myprops, mystate> {
         return (
             <SideBar>
                 <SideBarTitle>Infos:</SideBarTitle>
-                <Line />
-                <SideBarItem>
-                    <b>{this.state.likes}</b> Likes!
-                </SideBarItem>
-                {this.state.quality !== 0 ? (
-                    <SideBarItem>
-                        <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 />
+                <Line/>
+                <SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
+                {this.state.quality !== 0 ?
+                    <SideBarItem><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.TagId} tagInfo={m} />
+                    <Tag key={m.TagId} tagInfo={m} onContextMenu={(pos): void => {
+                        this.setState({tagContextMenu: true});
+                        this.contextpos = {...pos, tagid: m.TagId};
+                    }}/>
                 ))}
-                <Line />
+                <Line/>
                 <SideBarTitle>Tag Quickadd:</SideBarTitle>
                 {this.state.suggesttag.map((m: TagType) => (
                     <Tag
@@ -160,8 +149,7 @@ export class Player extends React.Component<myprops, mystate> {
                         key={m.TagName}
                         onclick={(): void => {
                             this.quickAddTag(m.TagId, m.TagName);
-                        }}
-                    />
+                        }}/>
                 ))}
             </SideBar>
         );
@@ -173,20 +161,18 @@ export class Player extends React.Component<myprops, mystate> {
     private assembleActorTiles(): JSX.Element {
         return (
             <div className={style.actorcontainer}>
-                {this.state.actors ? this.state.actors.map((actr: ActorType) => <ActorTile key={actr.ActorId} actor={actr} />) : <></>}
-                <div
-                    className={style.actorAddTile}
-                    onClick={(): void => {
-                        this.addActor();
-                    }}>
+                {this.state.actors ?
+                    this.state.actors.map((actr: ActorType) => (
+                        <ActorTile key={actr.ActorId} actor={actr}/>
+                    )) : <></>
+                }
+                <div className={style.actorAddTile} onClick={(): void => {
+                    this.addActor();
+                }}>
                     <div className={style.actorAddTile_thumbnail}>
-                        <FontAwesomeIcon
-                            style={{
-                                lineHeight: '130px'
-                            }}
-                            icon={faPlusCircle}
-                            size='5x'
-                        />
+                        <FontAwesomeIcon style={{
+                            lineHeight: '130px'
+                        }} icon={faPlusCircle} size='5x'/>
                     </div>
                     <div className={style.actorAddTile_name}>Add Actor</div>
                 </div>
@@ -194,6 +180,7 @@ export class Player extends React.Component<myprops, mystate> {
         );
     }
 
+
     /**
      * handle the popovers generated according to state changes
      * @returns {JSX.Element}
@@ -201,18 +188,22 @@ export class Player extends React.Component<myprops, mystate> {
     handlePopOvers(): JSX.Element {
         return (
             <>
-                {this.state.popupvisible ? (
-                    <AddTagPopup onHide={(): void => this.setState({popupvisible: false})} submit={this.quickAddTag} />
-                ) : null}
-                {this.state.actorpopupvisible ? (
-                    <AddActorPopup
-                        onHide={(): void => {
+                {this.state.popupvisible ?
+                    <AddTagPopup onHide={(): void => {
+                        this.setState({popupvisible: false});
+                    }}
+                                 submit={this.quickAddTag}
+                                 movie_id={this.state.movie_id}/> :
+                    null
+                }
+                {
+                    this.state.actorpopupvisible ?
+                        <AddActorPopup onHide={(): void => {
                             this.refetchActors();
                             this.setState({actorpopupvisible: false});
-                        }}
-                        movieId={this.state.movieId}
-                    />
-                ) : null}
+                        }} movie_id={this.state.movie_id}/> : null
+                }
+                {this.renderContextMenu()}
             </>
         );
     }
@@ -223,99 +214,82 @@ export class Player extends React.Component<myprops, mystate> {
      * @param tagName name of tag to add
      */
     quickAddTag(tagId: number, tagName: string): void {
-        callAPI(
-            APINode.Tags,
-            {
-                action: 'addTag',
-                TagId: tagId,
-                MovieId: parseInt(this.props.match.params.id, 10)
-            },
-            (result: GeneralSuccess) => {
-                if (result.result !== 'success') {
-                    console.error('error occured while writing to db -- todo error handling');
-                    console.error(result.result);
-                } else {
-                    // check if tag has already been added
-                    const tagIndex = this.state.tags
-                        .map(function (e: TagType) {
-                            return e.TagName;
-                        })
-                        .indexOf(tagName);
+        callAPI(APINode.Tags, {
+            action: 'addTag',
+            TagId: tagId,
+            MovieId: parseInt(this.props.match.params.id)
+        }, (result: GeneralSuccess) => {
+            if (result.result !== 'success') {
+                console.error('error occured while writing to db -- todo error handling');
+                console.error(result.result);
+            } else {
+                // 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
-                    if (tagIndex === -1) {
-                        // update tags if successful
-                        let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
-                        const quickaddindex = this.state.suggesttag
-                            .map(function (e: TagType) {
-                                return e.TagId;
-                            })
-                            .indexOf(tagId);
+                // only add tag if it isn't already there
+                if (tagIndex === -1) {
+                    // update tags if successful
+                    let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
+                    const quickaddindex = this.state.suggesttag.map(function (e: TagType) {
+                        return e.TagId;
+                    }).indexOf(tagId);
 
-                        // check if tag is available in quickadds
-                        if (quickaddindex !== -1) {
-                            array.splice(quickaddindex, 1);
+                    // check if tag is available in quickadds
+                    if (quickaddindex !== -1) {
+                        array.splice(quickaddindex, 1);
 
-                            this.setState({
-                                tags: [...this.state.tags, {TagName: tagName, TagId: tagId}],
-                                suggesttag: array
-                            });
-                        } else {
-                            this.setState({
-                                tags: [...this.state.tags, {TagName: tagName, TagId: tagId}]
-                            });
-                        }
+                        this.setState({
+                            tags: [...this.state.tags, {TagName: tagName, TagId: tagId}],
+                            suggesttag: array
+                        });
+                    } else {
+                        this.setState({
+                            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: parseInt(this.props.match.params.id, 10)},
-            (result: VideoTypes.loadVideoType) => {
-                console.log(result);
-                console.log(process.env.REACT_APP_CUST_BACK_DOMAIN);
-                this.setState({
-                    sources: {
-                        type: 'video',
-                        sources: [
-                            {
-                                src:
-                                    (process.env.REACT_APP_CUST_BACK_DOMAIN
-                                        ? process.env.REACT_APP_CUST_BACK_DOMAIN
-                                        : getBackendDomain()) +
-                                    GlobalInfos.getVideoPath() +
-                                    result.MovieUrl,
-                                type: 'video/mp4',
-                                size: 1080
-                            }
-                        ],
-                        poster: result.Poster
-                    },
-                    movieId: result.MovieId,
-                    movieName: result.MovieName,
-                    likes: result.Likes,
-                    quality: result.Quality,
-                    length: result.Length,
-                    tags: result.Tags,
-                    suggesttag: result.SuggestedTag,
-                    actors: result.Actors
-                });
-            }
-        );
+        callAPI(APINode.Video, {action: 'loadVideo', MovieId: parseInt(this.props.match.params.id)}, (result: VideoTypes.loadVideoType) => {
+            console.log(result)
+            this.setState({
+                sources: {
+                    type: 'video',
+                    sources: [
+                        {
+                            src: getBackendDomain() + GlobalInfos.getVideoPath() + result.MovieUrl,
+                            type: 'video/mp4',
+                            size: 1080
+                        }
+                    ],
+                    poster: result.Poster
+                },
+                movie_id: result.MovieId,
+                movie_name: 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: parseInt(this.props.match.params.id, 10)}, (result: GeneralSuccess) => {
+        callAPI(APINode.Video, {action: 'addLike', MovieId: parseInt(this.props.match.params.id)}, (result: GeneralSuccess) => {
             if (result.result === 'success') {
                 // likes +1 --> avoid reload of all data
                 this.setState({likes: this.state.likes + 1});
@@ -338,19 +312,15 @@ 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: parseInt(this.props.match.params.id, 10)},
-            (result: GeneralSuccess) => {
-                if (result.result === 'success') {
-                    // return to last element if successful
-                    this.props.history.goBack();
-                } else {
-                    console.error('an error occured while liking');
-                    console.error(result);
-                }
+        callAPI(APINode.Video, {action: 'deleteVideo', MovieId: parseInt(this.props.match.params.id)}, (result: GeneralSuccess) => {
+            if (result.result === 'success') {
+                // return to last element if successful
+                this.props.history.goBack();
+            } else {
+                console.error('an error occured while liking');
+                console.error(result);
             }
-        );
+        });
     }
 
     /**
@@ -364,14 +334,53 @@ export class Player extends React.Component<myprops, mystate> {
      * fetch the available video actors again
      */
     refetchActors(): void {
-        callAPI<ActorType[]>(
-            APINode.Actor,
-            {action: 'getActorsOfVideo', MovieId: parseInt(this.props.match.params.id, 10)},
-            (result) => {
-                this.setState({actors: result});
-            }
-        );
+        callAPI<ActorType[]>(APINode.Actor, {action: 'getActorsOfVideo', videoid: this.props.match.params.id}, result => {
+            this.setState({actors: result});
+        });
+    }
+
+    /**
+     * render the Tag context menu
+     */
+    private renderContextMenu(): JSX.Element {
+        if (this.state.tagContextMenu) {
+            return (
+                <QuickActionPop onHide={(): void => this.setState({tagContextMenu: false})}
+                                position={this.contextpos}>
+                    <ContextItem title='Delete' onClick={(): void => this.deleteTag(this.contextpos.tagid)}/>
+                </QuickActionPop>);
+        } else {
+            return <></>;
+        }
+    }
+
+    /**
+     * delete a tag from the current video
+     */
+    private deleteTag(tag_id: number): void {
+        callAPI<GeneralSuccess>(APINode.Tags,
+            {action: 'deleteVideoTag', video_id: this.props.match.params.id, tag_id: tag_id},
+            (res) => {
+                if (res.result !== 'success') {
+                    console.log("deletion errored!");
+
+                    this.setState({tagContextMenu: false});
+                }else{
+                    // check if tag has already been added
+                    const tagIndex = this.state.tags.map(function (e: TagType) {
+                        return e.TagId;
+                    }).indexOf(tag_id);
+
+
+                    // delete tag from array
+                    const newTagArray = this.state.tags;
+                    newTagArray.splice(tagIndex, 1);
+
+                    this.setState({tags: newTagArray, tagContextMenu: false});
+                }
+            });
     }
 }
 
 export default withRouter(Player);
+

src/pages/RandomPage/RandomPage.tsx

@@ -47,26 +47,26 @@ class RandomPage extends React.Component<{}, state> {
     render(): JSX.Element {
         return (
             <div>
-                <PageTitle title='Random Videos' subtitle='4pc' />
+                <PageTitle title='Random Videos'
+                           subtitle='4pc'/>
 
                 <SideBar>
                     <SideBarTitle>Visible Tags:</SideBarTitle>
                     {this.state.tags.map((m) => (
-                        <Tag key={m.TagId} tagInfo={m} />
+                        <Tag key={m.TagId} tagInfo={m}/>
                     ))}
                 </SideBar>
 
-                {this.state.videos.length !== 0 ? (
-                    <VideoContainer data={this.state.videos}>
+                {this.state.videos.length !== 0 ?
+                    <VideoContainer
+                        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,8 +83,8 @@ 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) => {
-            console.log(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.Videos,

src/pages/SettingsPage/GeneralSettings.tsx

@@ -11,19 +11,20 @@ import {SettingsTypes} from '../../types/ApiTypes';
 import {GeneralSuccess} from '../../types/GeneralTypes';
 
 interface state {
-    customapi: boolean;
-    apipath: string;
-    generalSettings: SettingsTypes.loadGeneralSettingsType;
+    customapi: boolean
+    apipath: string
+    generalSettings: SettingsTypes.loadGeneralSettingsType
 }
 
-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> {
-    constructor(props: Props) {
+class GeneralSettings extends React.Component<props, state> {
+    constructor(props: props) {
         super(props);
 
         this.state = {
@@ -33,14 +34,14 @@ class GeneralSettings extends React.Component<Props, state> {
                 DarkMode: true,
                 DBSize: 0,
                 DifferentTags: 0,
-                EpisodePath: '',
-                MediacenterName: '',
-                Password: '',
+                EpisodePath: "",
+                MediacenterName: "",
+                Password: "",
                 PasswordEnabled: false,
                 TagsAdded: 0,
                 TMDBGrabbing: false,
                 VideoNr: 0,
-                VideoPath: ''
+                VideoPath: ""
             }
         };
     }
@@ -54,71 +55,51 @@ class GeneralSettings extends React.Component<Props, state> {
         return (
             <>
                 <div className={style.infoheader}>
-                    <InfoHeaderItem
-                        backColor='lightblue'
-                        text={this.state.generalSettings.VideoNr}
-                        subtext='Videos in Gravity'
-                        icon={faArchive}
-                    />
-                    <InfoHeaderItem
-                        backColor='yellow'
-                        text={this.state.generalSettings.DBSize + ' MB'}
-                        subtext='Database size'
-                        icon={faRulerVertical}
-                    />
-                    <InfoHeaderItem
-                        backColor='green'
-                        text={this.state.generalSettings.DifferentTags}
-                        subtext='different Tags'
-                        icon={faAddressCard}
-                    />
-                    <InfoHeaderItem
-                        backColor='orange'
-                        text={this.state.generalSettings.TagsAdded}
-                        subtext='tags added'
-                        icon={faBalanceScaleLeft}
-                    />
+                    <InfoHeaderItem backColor='lightblue'
+                                    text={this.state.generalSettings.VideoNr}
+                                    subtext='Videos in Gravity'
+                                    icon={faArchive}/>
+                    <InfoHeaderItem backColor='yellow'
+                                    text={this.state.generalSettings.DBSize + ' MB'}
+                                    subtext='Database size'
+                                    icon={faRulerVertical}/>
+                    <InfoHeaderItem backColor='green'
+                                    text={this.state.generalSettings.DifferentTags}
+                                    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 => {
-                            e.preventDefault();
-                            this.saveSettings();
-                        }}>
+                    <Form data-testid='mainformsettings' 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.generalSettings.VideoPath}
-                                    onChange={(ee): void =>
-                                        this.setState({
-                                            generalSettings: {
-                                                ...this.state.generalSettings,
-                                                VideoPath: ee.target.value
-                                            }
-                                        })
-                                    }
-                                />
+                                <Form.Control 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'
-                                    value={this.state.generalSettings.EpisodePath}
-                                    onChange={(e): void =>
-                                        this.setState({
-                                            generalSettings: {
-                                                ...this.state.generalSettings,
-                                                EpisodePath: e.target.value
-                                            }
-                                        })
-                                    }
-                                />
+                                <Form.Control type='text' 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>
 
@@ -135,20 +116,17 @@ class GeneralSettings extends React.Component<Props, state> {
                                 this.setState({customapi: !this.state.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.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'
@@ -166,24 +144,19 @@ class GeneralSettings extends React.Component<Props, state> {
                             }}
                         />
 
-                        {this.state.generalSettings.PasswordEnabled ? (
+                        {this.state.generalSettings.PasswordEnabled ?
                             <Form.Group data-testid='passwordfield'>
                                 <Form.Label>Password</Form.Label>
-                                <Form.Control
-                                    type='password'
-                                    placeholder='**********'
-                                    value={this.state.generalSettings.Password}
-                                    onChange={(e): void =>
-                                        this.setState({
-                                            generalSettings: {
-                                                ...this.state.generalSettings,
-                                                Password: e.target.value
-                                            }
-                                        })
-                                    }
-                                />
-                            </Form.Group>
-                        ) : null}
+                                <Form.Control type='password' 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'
@@ -216,19 +189,14 @@ class GeneralSettings extends React.Component<Props, state> {
 
                         <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.generalSettings.MediacenterName}
-                                onChange={(e): void =>
-                                    this.setState({
-                                        generalSettings: {
-                                            ...this.state.generalSettings,
-                                            MediacenterName: e.target.value
-                                        }
-                                    })
-                                }
-                            />
+                            <Form.Control 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'>
@@ -236,7 +204,9 @@ class GeneralSettings extends React.Component<Props, state> {
                         </Button>
                     </Form>
                 </div>
-                <div className={style.footer}>Version: {version}</div>
+                <div className={style.footer}>
+                    Version: {version}
+                </div>
             </>
         );
     }
@@ -255,27 +225,23 @@ class GeneralSettings extends React.Component<Props, state> {
      */
     saveSettings(): void {
         let settings = this.state.generalSettings;
-        if (!this.state.generalSettings.PasswordEnabled) {
+        if(!this.state.generalSettings.PasswordEnabled){
             settings.Password = '-1';
         }
-        settings.DarkMode = GlobalInfos.isDarkTheme();
+        settings.DarkMode = GlobalInfos.isDarkTheme()
 
-        callAPI(
-            APINode.Settings,
-            {
-                action: 'saveGeneralSettings',
-                Settings: settings
-            },
-            (result: GeneralSuccess) => {
-                if (result.result) {
-                    console.log('successfully saved settings');
-                    // todo 2020-07-10: popup success
-                } else {
-                    console.log('failed to save settings');
-                    // todo 2020-07-10: popup error
-                }
+        callAPI(APINode.Settings, {
+            action: 'saveGeneralSettings',
+            Settings: settings
+        }, (result: GeneralSuccess) => {
+            if (result.result) {
+                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.tsx

@@ -5,20 +5,20 @@ import {GeneralSuccess} from '../../types/GeneralTypes';
 import {SettingsTypes} from '../../types/ApiTypes';
 
 interface state {
-    text: string[];
-    startbtnDisabled: boolean;
+    text: string[]
+    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,36 +32,23 @@ 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}
-                    className='btn btn-success'
-                    onClick={(): void => {
-                        this.startReindex();
-                    }}>
-                    Reindex Movie
+                <button disabled={this.state.startbtnDisabled}
+                        className='btn btn-success'
+                        onClick={(): void => {this.startReindex();}}>Reindex Movie
                 </button>
-                <button
-                    className='btn btn-warning'
-                    onClick={(): void => {
-                        this.cleanupGravity();
-                    }}>
-                    Cleanup Gravity
+                <button className='btn btn-warning'
+                        onClick={(): void => {this.cleanupGravity();}}>Cleanup Gravity
                 </button>
-                <div className={style.indextextarea}>
-                    {this.state.text.map((m) => (
-                        <div key={m} className='textarea-element'>
-                            {m}
-                        </div>
-                    ))}
-                </div>
+                <div className={style.indextextarea}>{this.state.text.map(m => (
+                    <div key={m} className='textarea-element'>{m}</div>
+                ))}</div>
             </>
         );
     }
@@ -112,7 +99,7 @@ class MovieSettings extends React.Component<Props, state> {
      * send request to cleanup db gravity
      */
     cleanupGravity(): void {
-        callAPI(APINode.Settings, {action: 'cleanupGravity'}, () => {
+        callAPI(APINode.Settings, {action: 'cleanupGravity'}, (result) => {
             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'>
-                            <GeneralSettings />
+                        <Route path="/settings/general">
+                            <GeneralSettings/>
                         </Route>
-                        <Route path='/settings/movies'>
-                            <MovieSettings />
+                        <Route path="/settings/movies">
+                            <MovieSettings/>
                         </Route>
-                        <Route path='/settings/tv'>
-                            <span />
+                        <Route path="/settings/tv">
+                            <span/>
                         </Route>
-                        <Route path='/settings'>
-                            <Redirect to='/settings/general' />
+                        <Route path="/settings">
+                            <Redirect to='/settings/general'/>
                         </Route>
                     </Switch>
                 </div>

src/setupTests.js

@@ -19,8 +19,7 @@ global.prepareFetchApi = (response) => {
     const mockJsonPromise = Promise.resolve(response);
     const mockFetchPromise = Promise.resolve({
         json: () => mockJsonPromise,
-        text: () => mockJsonPromise,
-        status: 200
+        text: () => mockJsonPromise
     });
     return (jest.fn().mockImplementation(() => mockFetchPromise));
 };
@@ -34,10 +33,22 @@ 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
@@ -52,12 +63,3 @@ global.afterEach(() => {
     jest.resetAllMocks();
 });
 
-
-global.mockKeyPress = () => {
-    let events = [];
-    document.addEventListener = jest.fn((event, cb) => {
-        events[event] = cb;
-    });
-    return events;
-}
-

src/types/ApiTypes.ts

@@ -2,16 +2,16 @@ import {ActorType, TagType} from './VideoTypes';
 
 export namespace VideoTypes {
     export interface loadVideoType {
-        MovieUrl: string;
-        Poster: string;
-        MovieId: number;
-        MovieName: string;
-        Likes: number;
-        Quality: number;
-        Length: number;
-        Tags: TagType[];
-        SuggestedTag: TagType[];
-        Actors: ActorType[];
+        MovieUrl: string
+        Poster: string
+        MovieId: number
+        MovieName: string
+        Likes: number
+        Quality: number
+        Length: number
+        Tags: TagType[]
+        SuggestedTag: TagType[]
+        Actors: ActorType[]
     }
 
     export interface startDataType {
@@ -25,7 +25,7 @@ export namespace VideoTypes {
 
     export interface VideoUnloadedType {
         MovieId: number;
-        MovieName: string;
+        MovieName: string
     }
 }
 
@@ -33,23 +33,23 @@ export namespace SettingsTypes {
     export interface initialApiCallData {
         DarkMode: boolean;
         Password: boolean;
-        MediacenterName: string;
+        Mediacenter_name: string;
         VideoPath: string;
     }
 
     export interface loadGeneralSettingsType {
-        VideoPath: string;
-        EpisodePath: string;
-        MediacenterName: string;
-        Password: string;
-        PasswordEnabled: boolean;
-        TMDBGrabbing: boolean;
-        DarkMode: boolean;
+        VideoPath: string,
+        EpisodePath: string,
+        MediacenterName: string,
+        Password: string,
+        PasswordEnabled: boolean,
+        TMDBGrabbing: boolean,
+        DarkMode: boolean,
 
-        VideoNr: number;
-        DBSize: number;
-        DifferentTags: number;
-        TagsAdded: number;
+        VideoNr: number,
+        DBSize: number,
+        DifferentTags: number,
+        TagsAdded: number
     }
 
     export interface getStatusMessageType {

src/types/GeneralTypes.ts

@@ -1,11 +1,11 @@
 import {TagType} from './VideoTypes';
 
 export interface GeneralSuccess {
-    result: string;
+    result: string
 }
 
 interface TagarrayType {
-    [_: string]: TagType;
+    [_: string]: TagType
 }
 
 export const DefaultTags: TagarrayType = {

src/types/VideoTypes.ts

@@ -2,8 +2,8 @@
  * type accepted by Tag component
  */
 export interface TagType {
-    TagName: string;
-    TagId: number;
+    TagName: string
+    TagId: number
 }
 
 export interface ActorType {

src/utils/Api.ts

@@ -1,5 +1,3 @@
-import GlobalInfos from './GlobalInfos';
-
 let customBackendURL: string;
 
 /**
@@ -10,13 +8,13 @@ export function getBackendDomain(): string {
     let userAgent = navigator.userAgent.toLowerCase();
     if (userAgent.indexOf(' electron/') > -1) {
         // Electron-specific code - force a custom backendurl
-        return customBackendURL;
+        return (customBackendURL);
     } else {
         // use custom only if defined
         if (customBackendURL) {
-            return customBackendURL;
+            return (customBackendURL);
         } else {
-            return window.location.origin;
+            return (window.location.origin);
         }
     }
 }
@@ -40,172 +38,9 @@ function getAPIDomain(): string {
  * interface how an api request should look like
  */
 interface ApiBaseRequest {
-    action: string | number;
+    action: string | number,
 
-    [_: 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(getBackendDomain() + '/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;
-}
-
-/**
- * call all qued callbacks
- */
-function callFuncQue(error: string): void {
-    // 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;
-}
-
-/**
- * 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();
-    }
+    [_: string]: string | number | boolean | object
 }
 
 /**
@@ -215,70 +50,12 @@ function checkAPITokenValid(callback: () => void): void {
  * @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 {
-    checkAPITokenValid(() => {
-        console.log(apiToken);
-        fetch(getAPIDomain() + 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 {
+export function callAPI<T>(apinode: APINode, fd: ApiBaseRequest, callback: (_: T) => void, errorcallback: (_: string) => void = (_: string): void => {}): void {
     fetch(getAPIDomain() + 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) : {}));
+        .then((response) => response.json()
+            .then((result) => {
+                callback(result);
+            })).catch(reason => errorcallback(reason));
 }
 
 /**
@@ -288,31 +65,20 @@ export function callApiUnsafe<T>(
  * @param callback the callback with PLAIN text reply from backend
  */
 export function callAPIPlain(apinode: APINode, fd: ApiBaseRequest, callback: (_: string) => void): void {
-    checkAPITokenValid(() => {
-        fetch(getAPIDomain() + apinode, {
-            method: 'POST',
-            body: JSON.stringify(fd),
-            headers: new Headers({
-                'Content-Type': 'application/json',
-                Authorization: 'Bearer ' + apiToken
-            })
-        }).then((response) =>
-            response.text().then((result) => {
+    fetch(getAPIDomain() + apinode, {method: 'POST', body: JSON.stringify(fd)})
+        .then((response) => response.text()
+            .then((result) => {
                 callback(result);
-            })
-        );
-    });
+            }));
+
 }
 
 /**
  * API nodes definitions
  */
-
-// eslint-disable-next-line no-shadow
 export enum APINode {
     Settings = 'settings',
     Tags = 'tags',
     Actor = 'actor',
-    Video = 'video',
-    Init = 'init'
+    Video = 'video'
 }

src/utils/GlobalInfos.ts

@@ -7,7 +7,7 @@ import lighttheme from '../AppLightTheme.module.css';
  */
 class StaticInfos {
     private darktheme: boolean = true;
-    private videopath: string = '';
+    private videopath: string = ""
 
     /**
      * check if the current theme is the dark theme
@@ -15,7 +15,7 @@ class StaticInfos {
      */
     isDarkTheme(): boolean {
         return this.darktheme;
-    }
+    };
 
     /**
      * setter to enable or disable the dark or light theme
@@ -23,24 +23,16 @@ class StaticInfos {
      */
     enableDarkTheme(enable = true): void {
         this.darktheme = enable;
-        this.handlers.map((func) => {
-            return func();
-        });
     }
 
     /**
      * get the currently selected theme stylesheet
      * @returns {*} the style object of the current active theme
      */
-    getThemeStyle(): {[_: string]: string} {
+    getThemeStyle(): { [_: string]: string } {
         return this.isDarkTheme() ? darktheme : lighttheme;
     }
 
-    handlers: (() => void)[] = [];
-    onThemeChange(func: () => void): void {
-        this.handlers.push(func);
-    }
-
     /**
      * set the current videopath
      * @param vidpath videopath with beginning and ending slash
@@ -55,11 +47,7 @@ class StaticInfos {
     getVideoPath(): string {
         return this.videopath;
     }
-
-    /**
-     * load the Password page manually
-     */
-    loadPasswordPage: ((callback?: () => void) => void) | undefined = undefined;
 }
 
-export default new StaticInfos();
+const GlobalInfos = new StaticInfos();
+export default GlobalInfos;