add new wrapper class for shortkey handlings and add new shortkeys

2021-05-27 22:55:56 +02:00
38 changed files with 2090 additions and 2575 deletions
--- a/api/src/handlers/Tags.php
+++ b/api/src/handlers/Tags.php
@@ -1,84 +0,0 @@
-<?php
-require_once 'RequestBase.php';
-
-/**
- * Class Tags
- * backend to handle Tag database interactions
- */
-class Tags extends RequestBase {
-    function initHandlers() {
-        $this->addToDB();
-        $this->getFromDB();
-        $this->delete();
-    }
-
-    private function addToDB() {
-        /**
-         * creates a new tag
-         * query requirements:
-         * * tagname -- name of the new tag
-         */
-        $this->addActionHandler("createTag", function () {
-            // skip tag create if already existing
-            $query = "INSERT IGNORE INTO tags (tag_name) VALUES ('" . $_POST['tagname'] . "')";
-
-            if ($this->conn->query($query) === TRUE) {
-                $this->commitMessage('{"result":"success"}');
-            } else {
-                $this->commitMessage('{"result":"' . $this->conn->error . '"}');
-            }
-        });
-
-        /**
-         * adds a new tag to an existing video
-         *
-         * query requirements:
-         * * movieid  -- the id of the video to add the tag to
-         * * id -- the tag id which tag to add
-         */
-        $this->addActionHandler("addTag", function () {
-            $movieid = $_POST['movieid'];
-            $tagid = $_POST['id'];
-
-            // skip tag add if already assigned
-            $query = "INSERT IGNORE INTO video_tags(tag_id, video_id) VALUES ('$tagid','$movieid')";
-
-            if ($this->conn->query($query) === TRUE) {
-                $this->commitMessage('{"result":"success"}');
-            } else {
-                $this->commitMessage('{"result":"' . $this->conn->error . '"}');
-            }
-        });
-    }
-
-    private function getFromDB() {
-        /**
-         * returns all available tags from database
-         */
-        $this->addActionHandler("getAllTags", function () {
-            $query = "SELECT tag_name,tag_id from tags";
-            $result = $this->conn->query($query);
-
-            $rows = array();
-            while ($r = mysqli_fetch_assoc($result)) {
-                array_push($rows, $r);
-            }
-            $this->commitMessage(json_encode($rows));
-        });
-    }
-
-    private function delete() {
-        /**
-         * delete a Tag 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 . '"}');
-        });
-    }
-}
--- a/apiGo/api/Helpers.go
+++ b/apiGo/api/Helpers.go
@@ -3,6 +3,7 @@ package api
 import (
 	"database/sql"
 	"encoding/json"
+	"errors"
 	"fmt"
 	"openmediacenter/apiGo/api/types"
 	"reflect"
@@ -108,7 +109,7 @@ func setField(obj interface{}, name string, value interface{}) error {
 			// if type is convertible - convert and set
 			structFieldValue.Set(val.Convert(structFieldType))
 		} else {
-			return fmt.Errorf("provided value %s type didn't match obj field type and isn't convertible", name)
+			return errors.New("provided value type didn't match obj field type and isn't convertible")
 		}
 	} else {
 		// set value if type is the same
--- a/apiGo/api/Settings.go
+++ b/apiGo/api/Settings.go
@@ -31,23 +31,15 @@ func getSettingsFromDB() {
 	 * @apiSuccess {string} Settings.Password new server password (-1 if no password set)
 	 * @apiSuccess {bool} Settings.TMDBGrabbing TMDB grabbing support to grab tag info and thumbnails
 	 * @apiSuccess {bool} Settings.DarkMode Darkmode enabled?
-	 * @apiSuccess {Object} Sizes Sizes object
-	 * @apiSuccess {uint32} Sizes.VideoNr total number of videos
-	 * @apiSuccess {float32} Sizes.DBSize total size of database
-	 * @apiSuccess {uint32} Sizes.DifferentTags number of different tags available
-	 * @apiSuccess {uint32} Sizes.TagsAdded number of different tags added to videos
+	 * @apiSuccess {uint32} Settings.VideoNr total number of videos
+	 * @apiSuccess {float32} Settings.DBSize total size of database
+	 * @apiSuccess {uint32} Settings.DifferentTags number of different tags available
+	 * @apiSuccess {uint32} Settings.TagsAdded number of different tags added to videos
+	 * @apiSuccess {string} Settings.PathPrefix
 	 */
 	AddHandler("loadGeneralSettings", SettingsNode, func(info *HandlerInfo) []byte {
-		result, _, sizes := database.GetSettings()
-
-		var ret = struct {
-			Settings *types.SettingsType
-			Sizes    *types.SettingsSizeType
-		}{
-			Settings: &result,
-			Sizes:    &sizes,
-		}
-		return jsonify(ret)
+		result := database.GetSettings()
+		return jsonify(result)
 	})

 	/**
@@ -61,7 +53,6 @@ func getSettingsFromDB() {
 	 * @apiSuccess {string} MediacenterName overall name of the mediacenter
 	 * @apiSuccess {string} Pasword new server password (-1 if no password set)
 	 * @apiSuccess {bool} DarkMode Darkmode enabled?
-	 * @apiSuccess {bool} TVShowEnabled is are TVShows enabled
 	 */
 	AddHandler("loadInitialData", SettingsNode, func(info *HandlerInfo) []byte {
 		sett := settings.LoadSettings()
@@ -72,7 +63,6 @@ func getSettingsFromDB() {
 			MediacenterName string
 			VideoPath       string
 			TVShowPath      string
-			TVShowEnabled   bool
 		}

 		regexMatchUrl := regexp.MustCompile("^http(|s)://([0-9]){1,3}\\.([0-9]){1,3}\\.([0-9]){1,3}\\.([0-9]){1,3}:[0-9]{1,5}")
@@ -87,7 +77,6 @@ func getSettingsFromDB() {
 			MediacenterName: sett.MediacenterName,
 			VideoPath:       serverVideoPath,
 			TVShowPath:      serverTVShowPath,
-			TVShowEnabled:   settings.TVShowsEnabled(),
 		}

 		str, _ := json.Marshal(res)
@@ -102,17 +91,21 @@ func saveSettingsToDB() {
 	 * @apiName saveGeneralSettings
 	 * @apiGroup Settings
 	 *
-	 * @apiParam {string} VideoPath webserver path to the videos
-	 * @apiParam {string} EpisodePath webserver path to the tvshows
-	 * @apiParam {string} MediacenterName overall name of the mediacenter
-	 * @apiParam {string} Password new server password (-1 if no password set)
-	 * @apiParam {bool} TMDBGrabbing TMDB grabbing support to grab tag info and thumbnails
-	 * @apiParam {bool} DarkMode Darkmode enabled?
+	 * @apiParam {Object} Settings Settings object
+	 * @apiParam {string} Settings.VideoPath webserver path to the videos
+	 * @apiParam {string} Settings.EpisodePath webserver path to the tvshows
+	 * @apiParam {string} Settings.MediacenterName overall name of the mediacenter
+	 * @apiParam {string} Settings.Password new server password (-1 if no password set)
+	 * @apiParam {bool} Settings.TMDBGrabbing TMDB grabbing support to grab tag info and thumbnails
+	 * @apiParam {bool} Settings.DarkMode Darkmode enabled?
 	 *
 	 * @apiSuccess {string} result 'success' if successfully or error message if not
 	 */
 	AddHandler("saveGeneralSettings", SettingsNode, func(info *HandlerInfo) []byte {
-		var args types.SettingsType
+		// todo correct type here!
+		var args struct {
+			Settings types.SettingsType
+		}
 		if err := FillStruct(&args, info.Data); err != nil {
 			fmt.Println(err.Error())
 			return nil
@@ -128,8 +121,8 @@ func saveSettingsToDB() {
                        DarkMode=?
                    WHERE 1`
 		return database.SuccessQuery(query,
-			args.VideoPath, args.EpisodePath, args.Password,
-			args.MediacenterName, args.TMDBGrabbing, args.DarkMode)
+			args.Settings.VideoPath, args.Settings.EpisodePath, args.Settings.Password,
+			args.Settings.MediacenterName, args.Settings.TMDBGrabbing, args.Settings.DarkMode)
 	})
 }

--- a/apiGo/api/TVShows.go
+++ b/apiGo/api/TVShows.go
@@ -3,15 +3,9 @@ package api
 import (
 	"fmt"
 	"openmediacenter/apiGo/database"
-	"openmediacenter/apiGo/database/settings"
 )

 func AddTvshowHandlers() {
-	// do not add handlers if tvshows not enabled
-	if !settings.TVShowsEnabled() {
-		return
-	}
-
 	/**
 	 * @api {post} /api/tvshow [getTVShows]
 	 * @apiDescription get all available tv shows
--- a/apiGo/api/Video.go
+++ b/apiGo/api/Video.go
@@ -22,89 +22,34 @@ func getVideoHandlers() {
 	 * @apiName GetMovies
 	 * @apiGroup video
 	 *
-	 * @apiParam {int} [Tag=1] id of VideoTag to get videos (1=all)
+	 * @apiParam {int} [Tag=all] id of VideoTag to get videos
 	 *
-	 * @apiSuccess {Object[]} Videos List of Videos
-	 * @apiSuccess {number} Videos.MovieId Id of Video
-	 * @apiSuccess {String} Videos.MovieName  Name of video
-	 * @apiSuccess {String} TagName Name of the Tag returned
+	 * @apiSuccess {Object[]} . List of Videos
+	 * @apiSuccess {number} .MovieId Id of Video
+	 * @apiSuccess {String} .MovieName  Name of video
 	 */
 	AddHandler("getMovies", VideoNode, func(info *HandlerInfo) []byte {
 		var args struct {
-			Tag  uint32
-			Sort uint8
+			Tag int
 		}
 		if err := FillStruct(&args, info.Data); err != nil {
 			fmt.Println(err.Error())
 			return nil
 		}

-		const (
-			date   = iota
-			likes  = iota
-			random = iota
-			names  = iota
-			length = iota
-		)
-
-		// if wrong number passed no sorting is performed
-		var SortClause = ""
-		switch args.Sort {
-		case date:
-			SortClause = "ORDER BY create_date DESC, movie_name"
-			break
-		case likes:
-			SortClause = "ORDER BY likes DESC"
-			break
-		case random:
-			SortClause = "ORDER BY RAND()"
-			break
-		case names:
-			SortClause = "ORDER BY movie_name"
-			break
-		case length:
-			SortClause = "ORDER BY length DESC"
-			break
-		}
-
 		var query string
 		// 1 is the id of the ALL tag
 		if args.Tag != 1 {
-			query = fmt.Sprintf(`SELECT movie_id,movie_name,t.tag_name FROM videos
+			query = fmt.Sprintf(`SELECT movie_id,movie_name FROM videos
 					INNER JOIN video_tags vt on videos.movie_id = vt.video_id
 					INNER JOIN tags t on vt.tag_id = t.tag_id
-					WHERE t.tag_id = %d %s`, args.Tag, SortClause)
+					WHERE t.tag_id = '%d'
+					ORDER BY likes DESC, create_date, movie_name`, args.Tag)
 		} else {
-			query = fmt.Sprintf("SELECT movie_id,movie_name, (SELECT 'All' as tag_name) FROM videos %s", SortClause)
+			query = "SELECT movie_id,movie_name FROM videos ORDER BY create_date DESC, movie_name"
 		}

-		var result struct {
-			Videos  []types.VideoUnloadedType
-			TagName string
-		}
-
-		rows := database.Query(query)
-		vids := []types.VideoUnloadedType{}
-		var name string
-		for rows.Next() {
-			var vid types.VideoUnloadedType
-			err := rows.Scan(&vid.MovieId, &vid.MovieName, &name)
-			if err != nil {
-				return nil
-			}
-			vids = append(vids, vid)
-		}
-		if rows.Close() != nil {
-			return nil
-		}
-
-		// if the tag id doesn't exist the query won't return a name
-		if name == "" {
-			return nil
-		}
-
-		result.Videos = vids
-		result.TagName = name
+		result := readVideosFromResultset(database.Query(query))
 		// jsonify results
 		str, _ := json.Marshal(result)
 		return str
--- a/apiGo/api/types/Types.go
+++ b/apiGo/api/types/Types.go
@@ -46,13 +46,13 @@ type SettingsType struct {
 	PasswordEnabled bool
 	TMDBGrabbing    bool
 	DarkMode        bool
-}

-type SettingsSizeType struct {
 	VideoNr       uint32
 	DBSize        float32
 	DifferentTags uint32
 	TagsAdded     uint32
+
+	PathPrefix string
 }

 type TVShow struct {
--- a/apiGo/database/Database.go
+++ b/apiGo/database/Database.go
@@ -90,7 +90,9 @@ func Close() {
 	db.Close()
 }

-func GetSettings() (result types.SettingsType, PathPrefix string, sizes types.SettingsSizeType) {
+func GetSettings() types.SettingsType {
+	var result types.SettingsType
+
 	// query settings and infotile values
 	query := fmt.Sprintf(`
                SELECT (
@@ -118,7 +120,7 @@ func GetSettings() (result types.SettingsType, PathPrefix string, sizes types.Se
 	var DarkMode int
 	var TMDBGrabbing int

-	err := QueryRow(query).Scan(&sizes.VideoNr, &sizes.DBSize, &sizes.DifferentTags, &sizes.TagsAdded,
+	err := QueryRow(query).Scan(&result.VideoNr, &result.DBSize, &result.DifferentTags, &result.TagsAdded,
 		&result.VideoPath, &result.EpisodePath, &result.Password, &result.MediacenterName, &TMDBGrabbing, &DarkMode)

 	if err != nil {
@@ -128,6 +130,7 @@ func GetSettings() (result types.SettingsType, PathPrefix string, sizes types.Se
 	result.TMDBGrabbing = TMDBGrabbing != 0
 	result.PasswordEnabled = result.Password != "-1"
 	result.DarkMode = DarkMode != 0
-	PathPrefix = SettingsVideoPrefix
-	return
+	result.PathPrefix = SettingsVideoPrefix
+
+	return result
 }
--- a/apiGo/database/settings/Settings.go
+++ b/apiGo/database/settings/Settings.go
@@ -1,11 +0,0 @@
-package settings
-
-var tvShowEnabled bool
-
-func TVShowsEnabled() bool {
-	return tvShowEnabled
-}
-
-func SetTVShowEnabled(enabled bool) {
-	tvShowEnabled = enabled
-}
--- a/apiGo/main.go
+++ b/apiGo/main.go
@@ -7,7 +7,6 @@ import (
 	"net/http"
 	"openmediacenter/apiGo/api"
 	"openmediacenter/apiGo/database"
-	settings2 "openmediacenter/apiGo/database/settings"
 	"openmediacenter/apiGo/static"
 	"openmediacenter/apiGo/videoparser"
 )
@@ -56,12 +55,8 @@ func handleCommandLineArguments() (*database.DatabaseConfig, bool, *string) {

 	pathPrefix := flag.String("ReindexPrefix", "/var/www/openmediacenter", "Prefix path for videos to reindex")

-	disableTVShowSupport := flag.Bool("DisableTVSupport", false, "Disable the TVShow support and pages")
-
 	flag.Parse()

-	settings2.SetTVShowEnabled(!*disableTVShowSupport)
-
 	return &database.DatabaseConfig{
 		DBHost:     *dbhostPtr,
 		DBPort:     *dbPortPtr,
--- a/apiGo/videoparser/VideoParser.go
+++ b/apiGo/videoparser/VideoParser.go
@@ -19,9 +19,9 @@ func StartReindex() bool {
 	SendEvent("start")
 	AppendMessage("starting reindex..")

-	mSettings, PathPrefix, _ := database.GetSettings()
+	mSettings := database.GetSettings()
 	// add the path prefix to videopath
-	mSettings.VideoPath = PathPrefix + mSettings.VideoPath
+	mSettings.VideoPath = mSettings.PathPrefix + mSettings.VideoPath

 	// check if path even exists
 	if _, err := os.Stat(mSettings.VideoPath); os.IsNotExist(err) {
@@ -64,9 +64,9 @@ func StartTVShowReindex() {
 	SendEvent("start")
 	AppendMessage("starting tvshow reindex...")

-	mSettings, PathPrefix, _ := database.GetSettings()
+	mSettings := database.GetSettings()
 	// add the path prefix to videopath
-	mSettings.EpisodePath = PathPrefix + mSettings.EpisodePath
+	mSettings.EpisodePath = mSettings.PathPrefix + mSettings.EpisodePath

 	// add slash suffix if not existing
 	if !strings.HasSuffix(mSettings.EpisodePath, "/") {
--- a/apiGo/videoparser/tmdb/TMDBApi.go
+++ b/apiGo/videoparser/tmdb/TMDBApi.go
@@ -28,27 +28,27 @@ type TVShowTMDB struct {
 }

 type tmdbVidResult struct {
-	PosterPath       *string `json:"poster_path"`
-	Adult            bool    `json:"adult"`
-	Overview         string  `json:"overview"`
-	ReleaseDate      string  `json:"release_date"`
-	GenreIds         []int   `json:"genre_ids"`
-	Id               int     `json:"id"`
-	OriginalTitle    string  `json:"original_title"`
-	OriginalLanguage string  `json:"original_language"`
-	Title            string  `json:"title"`
-	BackdropPath     *string `json:"backdrop_path"`
-	Popularity       int     `json:"popularity"`
-	VoteCount        int     `json:"vote_count"`
-	Video            bool    `json:"video"`
-	VoteAverage      int     `json:"vote_average"`
+	PosterPath       string `json:"poster_path"`
+	Adult            bool   `json:"adult"`
+	Overview         string `json:"overview"`
+	ReleaseDate      string `json:"release_date"`
+	GenreIds         []int  `json:"genre_ids"`
+	Id               int    `json:"id"`
+	OriginalTitle    string `json:"original_title"`
+	OriginalLanguage string `json:"original_language"`
+	Title            string `json:"title"`
+	BackdropPath     string `json:"backdrop_path"`
+	Popularity       int    `json:"popularity"`
+	VoteCount        int    `json:"vote_count"`
+	Video            bool   `json:"video"`
+	VoteAverage      int    `json:"vote_average"`
 }

 type tmdbTvResult struct {
-	PosterPath       *string  `json:"poster_path"`
+	PosterPath       string   `json:"poster_path"`
 	Popularity       int      `json:"popularity"`
 	Id               int      `json:"id"`
-	BackdropPath     *string  `json:"backdrop_path"`
+	BackdropPath     string   `json:"backdrop_path"`
 	VoteAverage      int      `json:"vote_average"`
 	Overview         string   `json:"overview"`
 	FirstAirDate     string   `json:"first_air_date"`
@@ -111,16 +111,10 @@ func SearchVideo(MovieName string, year int) *VideoTMDB {
 	// continue label
 cont:

-	var thumbnail = ""
-	if tmdbVid.PosterPath != nil {
-		pic := fetchPoster(*tmdbVid.PosterPath)
-		if pic != nil {
-			thumbnail = *pic
-		}
-	}
+	thumbnail := fetchPoster(tmdbVid.PosterPath)

 	result := VideoTMDB{
-		Thumbnail: thumbnail,
+		Thumbnail: *thumbnail,
 		Overview:  tmdbVid.Overview,
 		Title:     tmdbVid.Title,
 		GenreIds:  tmdbVid.GenreIds,
@@ -161,11 +155,9 @@ func SearchTVShow(Name string) *TVShowTMDB {
 		GenreIds:  t.Results[0].GenreIds,
 	}

-	if t.Results[0].PosterPath != nil {
-		pic := fetchPoster(*t.Results[0].PosterPath)
-		if pic != nil {
-			res.Thumbnail = *pic
-		}
+	thumbnail := fetchPoster(t.Results[0].PosterPath)
+	if thumbnail != nil {
+		res.Thumbnail = *thumbnail
 	}

 	return &res
--- a/package.json
+++ b/package.json
@@ -12,14 +12,14 @@
    "@fortawesome/free-regular-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.13",
-    "bootstrap": "^5.0.2",
+    "bootstrap": "^4.5.3",
    "plyr-react": "^3.0.7",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
-    "typescript": "^4.3.5"
+    "typescript": "^4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
@@ -53,34 +53,34 @@
    ]
  },
  "devDependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^16.4.7",
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-router": "5.1.16",
-    "@types/react-router-dom": "^5.1.8",
-    "@typescript-eslint/eslint-plugin": "^4.28.5",
-    "@typescript-eslint/parser": "^4.28.5",
-    "apidoc": "^0.28.1",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.6.0",
+    "@types/jest": "^26.0.19",
+    "@types/node": "^14.14.31",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
+    "@types/react-router": "5.1.12",
+    "@types/react-router-dom": "^5.1.6",
+    "@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.31.0",
+    "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.4.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.3.2",
+    "prettier": "^2.2.1",
    "prettier-config": "^1.0.0",
-    "react-scripts": "4.0.3"
+    "react-scripts": "4.0.3",
+    "apidoc": "^0.28.1"
  },
-  "apidoc": {
+  "apidoc":{
    "name": "OpenMediaCenter",
    "description": "API Documentation of OpenMediaCenter",
    "title": "OpenMediaCenter Doc",
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -12,7 +12,6 @@
    margin-left: 20px;
    opacity: 0.6;
    text-transform: capitalize;
-    text-decoration: none;
 }

 .navitem:hover {
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -18,11 +18,6 @@ describe('<App/>', function () {
    it('are navlinks correct', function () {
        const wrapper = shallow(<App/>);
        wrapper.setState({password: false});
-        expect(wrapper.find('.navitem')).toHaveLength(4);
-
-        GlobalInfos.setTVShowsEnabled(true);
-
-        wrapper.instance().forceUpdate();
        expect(wrapper.find('.navitem')).toHaveLength(5);
    });

--- a/src/App.tsx
+++ b/src/App.tsx
@@ -86,8 +86,6 @@ class App extends React.Component<{}, state> {

            GlobalInfos.setVideoPaths(result.VideoPath, result.TVShowPath);

-            GlobalInfos.setTVShowsEnabled(result.TVShowEnabled);
-
            this.setState({
                mediacentername: result.MediacenterName
            });
@@ -148,13 +146,9 @@ class App extends React.Component<{}, state> {
                <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/categories'} activeStyle={{opacity: '0.85'}}>
                    Categories
                </NavLink>
-
-                {GlobalInfos.isTVShowEnabled() ? (
-                    <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/tvshows'} activeStyle={{opacity: '0.85'}}>
-                        TV Shows
-                    </NavLink>
-                ) : null}
-
+                <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/tvshows'} activeStyle={{opacity: '0.85'}}>
+                    TV Shows
+                </NavLink>
                <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/settings'} activeStyle={{opacity: '0.85'}}>
                    Settings
                </NavLink>
@@ -174,31 +168,24 @@ class App extends React.Component<{}, state> {
                <Route path='/categories'>
                    <CategoryPage />
                </Route>
+                <Route path='/tvshows'>
+                    <TVShowPage />
+                </Route>
                <Route path='/settings'>
                    <SettingsPage />
                </Route>
                <Route exact path='/player/:id'>
                    <Player />
                </Route>
+                <Route exact path='/tvplayer/:id'>
+                    <TVPlayer />
+                </Route>
                <Route exact path='/actors'>
                    <ActorOverviewPage />
                </Route>
                <Route path='/actors/:id'>
                    <ActorPage />
                </Route>
-
-                {GlobalInfos.isTVShowEnabled() ? (
-                    <Route path='/tvshows'>
-                        <TVShowPage />
-                    </Route>
-                ) : null}
-
-                {GlobalInfos.isTVShowEnabled() ? (
-                    <Route exact path='/tvplayer/:id'>
-                        <TVPlayer />
-                    </Route>
-                ) : null}
-
                <Route path='/'>
                    <HomePage />
                </Route>
--- a/src/elements/ActorTile/ActorTile.tsx
+++ b/src/elements/ActorTile/ActorTile.tsx
@@ -25,11 +25,7 @@ class ActorTile extends React.Component<Props> {
        }
    }

-    /**
-     * 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 {
+    renderActorTile(customclickhandler: (actor: ActorType) => void): JSX.Element {
        return (
            <div className={style.actortile} onClick={(): void => customclickhandler(this.props.actor)}>
                <div className={style.actortile_thumbnail}>
--- a/src/elements/DynamicContentContainer/DynamicContentContainer.tsx
+++ b/src/elements/DynamicContentContainer/DynamicContentContainer.tsx
@@ -41,24 +41,18 @@ class DynamicContentContainer<T> extends React.Component<Props<T>, state<T>> {

    componentDidUpdate(prevProps: Props<T>): void {
        // when source props change force update!
-        if (
-            // diff the two arrays
-            this.props.data
-                .filter((x) => !prevProps.data.includes(x))
-                .concat(prevProps.data.filter((x) => !this.props.data.includes(x))).length !== 0
-        ) {
-            this.clean((): void => {
-                this.loadPreviewBlock(this.InitialLoadNR);
-            });
+        if (prevProps.data.length !== this.props.data.length) {
+            this.clean();
+            this.loadPreviewBlock(this.InitialLoadNR);
        }
    }

    /**
     * clear all elements rendered...
     */
-    clean(callback: () => void): void {
+    clean(): void {
        this.loadindex = 0;
-        this.setState({loadeditems: []}, callback);
+        this.setState({loadeditems: []});
    }

    render(): JSX.Element {
--- a/src/elements/Popups/PopupBase.tsx
+++ b/src/elements/Popups/PopupBase.tsx
@@ -70,7 +70,7 @@ class PopupBase extends React.Component<Props> {
    }

    /**
-     * handle click on outside of element
+     * Alert if clicked on outside of element
     */
    handleClickOutside(event: MouseEvent): void {
        if (this.wrapperRef && this.wrapperRef.current && !this.wrapperRef.current.contains(event.target as Node)) {
--- a/src/elements/Preview/Preview.module.css
+++ b/src/elements/Preview/Preview.module.css
@@ -6,29 +6,6 @@
    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;
@@ -61,7 +38,6 @@
    margin-left: 25px;
    margin-top: 25px;
    opacity: 0.85;
-    position: relative;
 }

 .videopreview:hover {
--- a/src/elements/Preview/Preview.tsx
+++ b/src/elements/Preview/Preview.tsx
@@ -5,8 +5,6 @@ import {Link} from 'react-router-dom';
 import GlobalInfos from '../../utils/GlobalInfos';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faPhotoVideo} from '@fortawesome/free-solid-svg-icons';
-import {faEllipsisV} from '@fortawesome/free-solid-svg-icons';
-import QuickActionPop, {ContextItem} from '../QuickActionPop/QuickActionPop';

 interface PreviewProps {
    name: string;
@@ -17,7 +15,6 @@ interface PreviewProps {

 interface PreviewState {
    picLoaded: boolean | null;
-    optionsvisible: boolean;
 }

 /**
@@ -32,8 +29,7 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
        super(props);

        this.state = {
-            picLoaded: null,
-            optionsvisible: false
+            picLoaded: null
        };
    }

@@ -60,23 +56,6 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
            <div
                className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}
                onClick={this.props.onClick}>
-                <div
-                    className={style.quickactions}
-                    onClick={(e): void => {
-                        this.setState({optionsvisible: true});
-                        e.stopPropagation();
-                        e.preventDefault();
-                    }}>
-                    <FontAwesomeIcon
-                        style={{
-                            verticalAlign: 'middle',
-                            fontSize: '25px'
-                        }}
-                        icon={faEllipsisV}
-                        size='1x'
-                    />
-                </div>
-                {this.popupvisible()}
                <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
                <div className={style.previewpic}>
                    {this.state.picLoaded === false ? (
@@ -100,19 +79,6 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
            </div>
        );
    }
-
-    popupvisible(): JSX.Element {
-        if (this.state.optionsvisible) {
-            return (
-                <QuickActionPop position={{x: 350, y: 45}} onHide={(): void => this.setState({optionsvisible: false})}>
-                    <ContextItem title='Delete' onClick={(): void => {}} />
-                    <ContextItem title='Delete' onClick={(): void => {}} />
-                </QuickActionPop>
-            );
-        } else {
-            return <></>;
-        }
-    }
 }

 /**
--- a/src/elements/QuickActionPop/QuickActionPop.tsx
+++ b/src/elements/QuickActionPop/QuickActionPop.tsx
@@ -1,65 +0,0 @@
-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={(e): void => {
-            e.preventDefault();
-            props.onClick();
-        }}
-        className={style.ContextItem}>
-        {props.title}
-    </div>
-);
-
-export default QuickActionPop;
--- a/src/elements/QuickActionPop/QuickActionPopup.module.css
+++ b/src/elements/QuickActionPop/QuickActionPopup.module.css
@@ -1,17 +0,0 @@
-.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;
-}
--- a/src/elements/Tag/Tag.tsx
+++ b/src/elements/Tag/Tag.tsx
@@ -1,4 +1,4 @@
-import React, {SyntheticEvent, PointerEvent} from 'react';
+import React from 'react';

 import styles from './Tag.module.css';
 import {Link} from 'react-router-dom';
@@ -7,27 +7,12 @@ import {TagType} from '../../types/VideoTypes';
 interface props {
    onclick?: (_: string) => void;
    tagInfo: TagType;
-    onContextMenu?: (pos: {x: number; y: number}) => void;
-}
-
-interface state {
-    contextVisible: boolean;
 }

 /**
 * A Component representing a single Category tag
 */
-class Tag extends React.Component<props, state> {
-    constructor(props: Readonly<props> | props) {
-        super(props);
-
-        this.state = {
-            contextVisible: false
-        };
-
-        this.contextmenu = this.contextmenu.bind(this);
-    }
-
+class Tag extends React.Component<props> {
    render(): JSX.Element {
        if (this.props.onclick) {
            return this.renderButton();
@@ -38,11 +23,7 @@ class Tag extends React.Component<props, state> {

    renderButton(): JSX.Element {
        return (
-            <button
-                className={styles.tagbtn}
-                onClick={(): void => this.TagClick()}
-                data-testid='Test-Tag'
-                onContextMenu={this.contextmenu}>
+            <button className={styles.tagbtn} onClick={(): void => this.TagClick()} data-testid='Test-Tag'>
                {this.props.tagInfo.TagName}
            </button>
        );
@@ -58,22 +39,6 @@ class Tag extends React.Component<props, state> {
            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;
--- a/src/pages/ActorPage/ActorPage.tsx
+++ b/src/pages/ActorPage/ActorPage.tsx
@@ -72,10 +72,6 @@ export class ActorPage extends React.Component<Props, state> {
                    data: result.Videos ? result.Videos : [],
                    actor: result.Info
                });
-            },
-            (_) => {
-                // if there is an load error redirect to home page
-                this.props.history.push('/');
            }
        );
    }
--- a/src/pages/CategoryPage/CategoryView.test.js
+++ b/src/pages/CategoryPage/CategoryView.test.js
@@ -4,9 +4,7 @@ import {CategoryView} from './CategoryView';

 describe('<CategoryView/>', function () {
    function instance() {
-        const inst = shallow(<CategoryView match={{params: {id: 10}}} history={{push: jest.fn()}}/>);
-        inst.setState({loaded: true});
-        return inst;
+        return shallow(<CategoryView match={{params: {id: 10}}} history={{push: jest.fn()}}/>);
    }

    it('renders without crashing ', function () {
--- a/src/pages/CategoryPage/CategoryView.tsx
+++ b/src/pages/CategoryPage/CategoryView.tsx
@@ -10,14 +10,12 @@ import Tag from '../../elements/Tag/Tag';
 import {DefaultTags, GeneralSuccess} from '../../types/GeneralTypes';
 import {Button} from '../../elements/GPElements/Button';
 import SubmitPopup from '../../elements/Popups/SubmitPopup/SubmitPopup';
-import {Spinner} from 'react-bootstrap';

 interface CategoryViewProps extends RouteComponentProps<{id: string}> {}

 interface CategoryViewState {
    loaded: boolean;
    submitForceDelete: boolean;
-    TagName: string;
 }

 /**
@@ -31,8 +29,7 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie

        this.state = {
            loaded: false,
-            submitForceDelete: false,
-            TagName: ''
+            submitForceDelete: false
        };
    }

@@ -53,13 +50,9 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
    }

    render(): JSX.Element {
-        if (!this.state.loaded) {
-            return <Spinner animation='border' />;
-        }
-
        return (
            <>
-                <PageTitle title={this.state.TagName} subtitle={this.videodata.length + ' Videos'} />
+                <PageTitle title='Categories' subtitle={this.videodata.length + ' Videos'} />

                <SideBar>
                    <SideBarTitle>Default Tags:</SideBarTitle>
@@ -112,18 +105,10 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
     * @param id tagid
     */
    private fetchVideoData(id: number): void {
-        callAPI(
-            APINode.Video,
-            {action: 'getMovies', Tag: id},
-            (result: {Videos: VideoTypes.VideoUnloadedType[]; TagName: string}) => {
-                this.videodata = result.Videos;
-                this.setState({loaded: true, TagName: result.TagName});
-            },
-            (_) => {
-                // if there is an load error redirect to home page
-                this.props.history.push('/');
-            }
-        );
+        callAPI<VideoTypes.VideoUnloadedType[]>(APINode.Video, {action: 'getMovies', Tag: id}, (result) => {
+            this.videodata = result;
+            this.setState({loaded: true});
+        });
    }

    /**
--- a/src/pages/HomePage/HomePage.module.css
+++ b/src/pages/HomePage/HomePage.module.css
@@ -7,61 +7,3 @@
    float: right;
    margin-top: 25px;
 }
-
-.sortbyLabel {
-    color: grey;
-    margin-right: 5px;
-    margin-left: 25px;
-}
-
-/* Style The Dropdown Button */
-.dropbtn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-    height: 100%;
-    cursor: pointer;
-    color: white;
-    text-align: center;
-}
-
-/* The container <div> - needed to position the dropdown content */
-.dropdown {
-    position: relative;
-    display: inline-block;
-}
-
-/* Dropdown Content (Hidden by Default) */
-.dropdownContent {
-    display: none;
-    position: absolute;
-    background-color: #f9f9f9;
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    z-index: 1;
-}
-
-/* Links inside the dropdown */
-.dropdownContent span {
-    color: black;
-    padding: 12px 16px;
-    text-decoration: none;
-    display: block;
-    cursor: pointer;
-}
-
-/* Change color of dropdown links on hover */
-.dropdownContent span:hover {
-    background-color: #f1f1f1;
-}
-
-/* Show the dropdown menu on hover */
-.dropdown:hover .dropdownContent {
-    display: block;
-}
-
-/* Change the background color of the dropdown button when the dropdown content is shown */
-.dropdown:hover .dropbtn {
-    background-color: #3574fe;
-}
--- a/src/pages/HomePage/HomePage.test.js
+++ b/src/pages/HomePage/HomePage.test.js
@@ -1,10 +1,8 @@
 import {shallow} from 'enzyme';
 import React from 'react';
-import {HomePage, SortBy} from './HomePage';
+import {HomePage} from './HomePage';
 import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 import {SearchHandling} from './SearchHandling';
-import exp from "constants";
-import {DefaultTags} from "../../types/GeneralTypes";

 describe('<HomePage/>', function () {
    it('renders without crashing ', function () {
@@ -25,6 +23,23 @@ describe('<HomePage/>', function () {
        expect(wrapper.find('PageTitle').props().subtitle).toBe('testsubtitle - 42');
    });

+    it('test search field', done => {
+        global.fetch = global.prepareFetchApi([{}, {}]);
+
+        const wrapper = shallow(<HomePage/>);
+
+        wrapper.find('[data-testid="searchtextfield"]').simulate('change', {target: {value: 'testvalue'}});
+        wrapper.find('[data-testid="searchbtnsubmit"]').simulate('click');
+
+        process.nextTick(() => {
+            // state to be set correctly with response
+            expect(wrapper.state().selectionnr).toBe(2);
+
+            global.fetch.mockClear();
+            done();
+        });
+    });
+
    it('test form submit', () => {
        const func = jest.fn();
        const wrapper = shallow(<HomePage/>);
@@ -57,7 +72,7 @@ describe('<HomePage/>', function () {
    });

    it('test tag click', done => {
-        global.fetch = prepareFetchApi({Videos: ['test1', 'test2'], TagName: 'all'});
+        global.fetch = prepareFetchApi(['test1', 'test2']);

        const wrapper = shallow(<HomePage/>);

@@ -85,20 +100,6 @@ describe('<HomePage/>', function () {

        testBtn(tags.first());
    });
-
-    it('test sortby type change', function () {
-        const wrapper = shallow(<HomePage/>);
-
-        // expect those default values
-        expect(wrapper.state().sortby).toBe('Date Added');
-        expect(wrapper.instance().sortState).toBe(SortBy.date);
-        expect(wrapper.instance().tagState).toBe(DefaultTags.all);
-
-        wrapper.instance().onDropDownItemClick(SortBy.name, 'namesort');
-
-        expect(wrapper.state().sortby).toBe('namesort');
-        expect(wrapper.instance().sortState).toBe(SortBy.name);
-    });
 });

 describe('<SearchHandling/>', () => {
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -11,17 +11,6 @@ import {RouteComponentProps} from 'react-router';
 import SearchHandling from './SearchHandling';
 import {VideoTypes} from '../../types/ApiTypes';
 import {DefaultTags} from '../../types/GeneralTypes';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faSortDown} from '@fortawesome/free-solid-svg-icons';
-
-// eslint-disable-next-line no-shadow
-export enum SortBy {
-    date,
-    likes,
-    random,
-    name,
-    length
-}

 interface Props extends RouteComponentProps {}

@@ -30,7 +19,6 @@ interface state {
    subtitle: string;
    data: VideoTypes.VideoUnloadedType[];
    selectionnr: number;
-    sortby: string;
 }

 /**
@@ -54,17 +42,13 @@ export class HomePage extends React.Component<Props, state> {
            },
            subtitle: 'All Videos',
            data: [],
-            selectionnr: 0,
-            sortby: 'Date Added'
+            selectionnr: 0
        };
    }

-    sortState = SortBy.date;
-    tagState = DefaultTags.all;
-
    componentDidMount(): void {
        // initial get of all videos
-        this.fetchVideoData();
+        this.fetchVideoData(DefaultTags.all.TagId);
        this.fetchStartData();
    }

@@ -74,17 +58,16 @@ export class HomePage extends React.Component<Props, state> {
     *
     * @param tag tag to fetch videos
     */
-    fetchVideoData(): void {
-        callAPI(
-            APINode.Video,
-            {action: 'getMovies', Tag: this.tagState.TagId, Sort: this.sortState},
-            (result: {Videos: VideoTypes.VideoUnloadedType[]; TagName: string}) => {
-                this.setState({
-                    data: result.Videos,
-                    selectionnr: result.Videos.length
-                });
-            }
-        );
+    fetchVideoData(tag: number): void {
+        callAPI(APINode.Video, {action: 'getMovies', Tag: tag}, (result: VideoTypes.VideoUnloadedType[]) => {
+            this.setState({
+                data: []
+            });
+            this.setState({
+                data: result,
+                selectionnr: result.length
+            });
+        });
    }

    /**
@@ -148,53 +131,32 @@ export class HomePage extends React.Component<Props, state> {
                            <Tag
                                tagInfo={{TagName: 'All', TagId: DefaultTags.all.TagId}}
                                onclick={(): void => {
-                                    this.tagState = DefaultTags.all;
-                                    this.fetchVideoData();
+                                    this.fetchVideoData(DefaultTags.all.TagId);
                                    this.setState({subtitle: 'All Videos'});
                                }}
                            />
                            <Tag
                                tagInfo={{TagName: 'Full Hd', TagId: DefaultTags.fullhd.TagId}}
                                onclick={(): void => {
-                                    this.tagState = DefaultTags.fullhd;
-                                    this.fetchVideoData();
+                                    this.fetchVideoData(DefaultTags.fullhd.TagId);
                                    this.setState({subtitle: 'Full Hd Videos'});
                                }}
                            />
                            <Tag
                                tagInfo={{TagName: 'Low Quality', TagId: DefaultTags.lowq.TagId}}
                                onclick={(): void => {
-                                    this.tagState = DefaultTags.lowq;
-                                    this.fetchVideoData();
+                                    this.fetchVideoData(DefaultTags.lowq.TagId);
                                    this.setState({subtitle: 'Low Quality Videos'});
                                }}
                            />
                            <Tag
                                tagInfo={{TagName: 'HD', TagId: DefaultTags.hd.TagId}}
                                onclick={(): void => {
-                                    this.tagState = DefaultTags.hd;
-                                    this.fetchVideoData();
+                                    this.fetchVideoData(DefaultTags.hd.TagId);
                                    this.setState({subtitle: 'HD Videos'});
                                }}
                            />
                        </SideBar>
-                        <div>
-                            <span className={style.sortbyLabel}>Sort By: </span>
-                            <div className={style.dropdown}>
-                                <span className={style.dropbtn}>
-                                    <span>{this.state.sortby}</span>
-                                    <FontAwesomeIcon style={{marginLeft: 3, paddingBottom: 3}} icon={faSortDown} size='1x' />
-                                </span>
-                                <div className={style.dropdownContent}>
-                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.date, 'Date Added')}>Date Added</span>
-                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.likes, 'Most likes')}>Most likes</span>
-                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.random, 'Random')}>Random</span>
-                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.name, 'Name')}>Name</span>
-                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.length, 'Length')}>Length</span>
-                                </div>
-                            </div>
-                        </div>
-
                        <VideoContainer data={this.state.data} />
                        <div className={style.rightinfo} />
                    </Route>
@@ -202,17 +164,6 @@ export class HomePage extends React.Component<Props, state> {
            </>
        );
    }
-
-    /**
-     * click handler for sortby dropdown item click
-     * @param type type of sort action
-     * @param name new header title
-     */
-    onDropDownItemClick(type: SortBy, name: string): void {
-        this.sortState = type;
-        this.setState({sortby: name});
-        this.fetchVideoData();
-    }
 }

 export default withRouter(HomePage);
--- a/src/pages/Player/Player.tsx
+++ b/src/pages/Player/Player.tsx
@@ -20,8 +20,8 @@ import {ActorType, TagType} from '../../types/VideoTypes';
 import PlyrJS from 'plyr';
 import {Button} from '../../elements/GPElements/Button';
 import {VideoTypes} from '../../types/ApiTypes';
-import QuickActionPop, {ContextItem} from '../../elements/QuickActionPop/QuickActionPop';
 import GlobalInfos from '../../utils/GlobalInfos';
+import KeyComponent from '../../utils/KeyComponent';

 interface Props extends RouteComponentProps<{id: string}> {}

@@ -37,23 +37,19 @@ interface mystate {
    popupvisible: boolean;
    actorpopupvisible: boolean;
    actors: ActorType[];
-    tagContextMenu: boolean;
 }

 /**
 * Player page loads when a video is selected to play and handles the video view
 * and actions such as tag adding and liking
 */
-export class Player extends React.Component<Props, mystate> {
-    private contextpos = {x: 0, y: 0, tagid: -1};
-
+export class Player extends KeyComponent<Props, mystate> {
    constructor(props: Props) {
        super(props);

        this.state = {
            movieId: -1,
            movieName: '',
-            tagContextMenu: false,
            likes: 0,
            quality: 0,
            length: 0,
@@ -65,10 +61,21 @@ export class Player extends React.Component<Props, mystate> {
        };

        this.quickAddTag = this.quickAddTag.bind(this);
-        this.deleteTag = this.deleteTag.bind(this);
+    }
+
+    keyHandler(key: string): void {
+        switch (key) {
+            case 't':
+                this.setState({popupvisible: true});
+                break;
+            case 'a':
+                this.setState({actorpopupvisible: true});
+                break;
+        }
    }

    componentDidMount(): void {
+        super.componentDidMount();
        // initial fetch of current movie data
        this.fetchMovieData();
    }
@@ -139,14 +146,7 @@ export class Player extends React.Component<Props, mystate> {
                <Line />
                <SideBarTitle>Tags:</SideBarTitle>
                {this.state.tags.map((m: TagType) => (
-                    <Tag
-                        key={m.TagId}
-                        tagInfo={m}
-                        onContextMenu={(pos): void => {
-                            this.setState({tagContextMenu: true});
-                            this.contextpos = {...pos, tagid: m.TagId};
-                        }}
-                    />
+                    <Tag key={m.TagId} tagInfo={m} />
                ))}
                <Line />
                <SideBarTitle>Tag Quickadd:</SideBarTitle>
@@ -209,7 +209,6 @@ export class Player extends React.Component<Props, mystate> {
                        movieId={this.state.movieId}
                    />
                ) : null}
-                {this.renderContextMenu()}
            </>
        );
    }
@@ -300,10 +299,6 @@ export class Player extends React.Component<Props, mystate> {
                    suggesttag: result.SuggestedTag,
                    actors: result.Actors
                });
-            },
-            (_) => {
-                // if there is an load error redirect to home page
-                this.props.history.push('/');
            }
        );
    }
@@ -369,51 +364,6 @@ export class Player extends React.Component<Props, mystate> {
            }
        );
    }
-
-    /**
-     * 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);
--- a/src/pages/SettingsPage/GeneralSettings.tsx
+++ b/src/pages/SettingsPage/GeneralSettings.tsx
@@ -11,8 +11,7 @@ import {SettingsTypes} from '../../types/ApiTypes';
 import {GeneralSuccess} from '../../types/GeneralTypes';

 interface state {
-    generalSettings: SettingsTypes.SettingsType;
-    sizes: SettingsTypes.SizesType;
+    generalSettings: SettingsTypes.loadGeneralSettingsType;
 }

 interface Props {}
@@ -28,18 +27,16 @@ class GeneralSettings extends React.Component<Props, state> {
        this.state = {
            generalSettings: {
                DarkMode: true,
+                DBSize: 0,
+                DifferentTags: 0,
                EpisodePath: '',
                MediacenterName: '',
                Password: '',
                PasswordEnabled: false,
-                TMDBGrabbing: false,
-                VideoPath: ''
-            },
-            sizes: {
-                DBSize: 0,
-                DifferentTags: 0,
                TagsAdded: 0,
-                VideoNr: 0
+                TMDBGrabbing: false,
+                VideoNr: 0,
+                VideoPath: ''
            }
        };
    }
@@ -55,25 +52,25 @@ class GeneralSettings extends React.Component<Props, state> {
                <div className={style.infoheader}>
                    <InfoHeaderItem
                        backColor='lightblue'
-                        text={this.state.sizes.VideoNr}
+                        text={this.state.generalSettings.VideoNr}
                        subtext='Videos in Gravity'
                        icon={faArchive}
                    />
                    <InfoHeaderItem
                        backColor='yellow'
-                        text={this.state.sizes.DBSize + ' MB'}
+                        text={this.state.generalSettings.DBSize + ' MB'}
                        subtext='Database size'
                        icon={faRulerVertical}
                    />
                    <InfoHeaderItem
                        backColor='green'
-                        text={this.state.sizes.DifferentTags}
+                        text={this.state.generalSettings.DifferentTags}
                        subtext='different Tags'
                        icon={faAddressCard}
                    />
                    <InfoHeaderItem
                        backColor='orange'
-                        text={this.state.sizes.TagsAdded}
+                        text={this.state.generalSettings.TagsAdded}
                        subtext='tags added'
                        icon={faBalanceScaleLeft}
                    />
@@ -213,16 +210,8 @@ class GeneralSettings extends React.Component<Props, state> {
     * inital load of already specified settings from backend
     */
    loadSettings(): void {
-        interface SettingsResponseType {
-            Settings: SettingsTypes.SettingsType;
-            Sizes: SettingsTypes.SizesType;
-        }
-
-        callAPI(APINode.Settings, {action: 'loadGeneralSettings'}, (result: SettingsResponseType) => {
-            this.setState({
-                generalSettings: result.Settings,
-                sizes: result.Sizes
-            });
+        callAPI(APINode.Settings, {action: 'loadGeneralSettings'}, (result: SettingsTypes.loadGeneralSettingsType) => {
+            this.setState({generalSettings: result});
        });
    }

@@ -236,12 +225,11 @@ class GeneralSettings extends React.Component<Props, state> {
        }
        settings.DarkMode = GlobalInfos.isDarkTheme();

-        console.log(settings);
        callAPI(
            APINode.Settings,
            {
                action: 'saveGeneralSettings',
-                ...settings
+                Settings: settings
            },
            (result: GeneralSuccess) => {
                if (result.result) {
--- a/src/pages/SettingsPage/SettingsPage.tsx
+++ b/src/pages/SettingsPage/SettingsPage.tsx
@@ -22,11 +22,9 @@ class SettingsPage extends React.Component {
                    <NavLink to='/settings/movies'>
                        <div className={style.SettingSidebarElement}>Movies</div>
                    </NavLink>
-                    {GlobalInfos.isTVShowEnabled() ? (
-                        <NavLink to='/settings/tv'>
-                            <div className={style.SettingSidebarElement}>TV Shows</div>
-                        </NavLink>
-                    ) : null}
+                    <NavLink to='/settings/tv'>
+                        <div className={style.SettingSidebarElement}>TV Shows</div>
+                    </NavLink>
                </div>
                <div className={style.SettingsContent}>
                    <Switch>
@@ -36,11 +34,9 @@ class SettingsPage extends React.Component {
                        <Route path='/settings/movies'>
                            <MovieSettings />
                        </Route>
-                        {GlobalInfos.isTVShowEnabled() ? (
-                            <Route path='/settings/tv'>
-                                <span />
-                            </Route>
-                        ) : null}
+                        <Route path='/settings/tv'>
+                            <span />
+                        </Route>
                        <Route path='/settings'>
                            <Redirect to='/settings/general' />
                        </Route>
--- a/src/pages/TVShowPage/TVPlayer.tsx
+++ b/src/pages/TVShowPage/TVPlayer.tsx
@@ -46,10 +46,6 @@ export class TVPlayer extends React.Component<Props, State> {
                console.log(data);
                this.data = data;
                this.setState({loaded: true});
-            },
-            (_) => {
-                // if there is an load error redirect to home page
-                this.props.history.push('/');
            }
        );
    }
--- a/src/types/ApiTypes.ts
+++ b/src/types/ApiTypes.ts
@@ -36,10 +36,9 @@ export namespace SettingsTypes {
        MediacenterName: string;
        VideoPath: string;
        TVShowPath: string;
-        TVShowEnabled: boolean;
    }

-    export interface SettingsType {
+    export interface loadGeneralSettingsType {
        VideoPath: string;
        EpisodePath: string;
        MediacenterName: string;
@@ -47,9 +46,7 @@ export namespace SettingsTypes {
        PasswordEnabled: boolean;
        TMDBGrabbing: boolean;
        DarkMode: boolean;
-    }

-    export interface SizesType {
        VideoNr: number;
        DBSize: number;
        DifferentTags: number;
--- a/src/utils/Api.ts
+++ b/src/utils/Api.ts
@@ -26,7 +26,34 @@ export function callAPI<T>(
    errorcallback: (_: string) => void = (_: string): void => {}
 ): void {
    token.checkAPITokenValid((mytoken) => {
-        generalAPICall<T>(apinode, fd, callback, errorcallback, false, true, mytoken);
+        fetch(APIPREFIX + apinode, {
+            method: 'POST',
+            body: JSON.stringify(fd),
+            headers: new Headers({
+                'Content-Type': 'application/json',
+                Authorization: 'Bearer ' + mytoken
+            })
+        })
+            .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));
    });
 }

@@ -43,7 +70,18 @@ export function callApiUnsafe<T>(
    callback: (_: T) => void,
    errorcallback?: (_: string) => void
 ): void {
-    generalAPICall(apinode, fd, callback, errorcallback, true, true, '');
+    fetch(APIPREFIX + apinode, {method: 'POST', body: JSON.stringify(fd)})
+        .then((response) => {
+            if (response.status !== 200) {
+                console.log('Error: ' + response.statusText);
+                // todo place error popup here
+            } else {
+                response.json().then((result: T) => {
+                    callback(result);
+                });
+            }
+        })
+        .catch((reason) => (errorcallback ? errorcallback(reason) : {}));
 }

 /**
@@ -54,54 +92,19 @@ export function callApiUnsafe<T>(
 */
 export function callAPIPlain(apinode: APINode, fd: ApiBaseRequest, callback: (_: string) => void): void {
    token.checkAPITokenValid((mytoken) => {
-        generalAPICall(apinode, fd, callback, () => {}, false, false, mytoken);
-    });
-}
-
-function generalAPICall<T>(
-    apinode: APINode,
-    fd: ApiBaseRequest,
-    callback: (_: T) => void,
-    errorcallback: (_: string) => void = (_: string): void => {},
-    unsafe: boolean,
-    json: boolean,
-    mytoken: string
-): void {
-    (async function (): Promise<void> {
-        const response = await fetch(APIPREFIX + apinode, {
+        fetch(APIPREFIX + apinode, {
            method: 'POST',
            body: JSON.stringify(fd),
            headers: new Headers({
-                'Content-Type': json ? 'application/json' : 'text/plain',
-                ...(!unsafe && {Authorization: 'Bearer ' + mytoken})
+                'Content-Type': 'application/json',
+                Authorization: 'Bearer ' + mytoken
            })
-        });
-
-        if (response.status === 200) {
-            // success
-            try {
-                // decode json or text
-                const data = json ? await response.json() : await response.text();
-                callback(data);
-            } catch (e) {
-                errorcallback(e);
-            }
-        } 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);
-            if (errorcallback) {
-                errorcallback(response.statusText);
-            }
-        }
-    })();
+        }).then((response) =>
+            response.text().then((result) => {
+                callback(result);
+            })
+        );
+    });
 }

 /**
--- a/src/utils/GlobalInfos.ts
+++ b/src/utils/GlobalInfos.ts
@@ -9,7 +9,6 @@ class StaticInfos {
    private darktheme: boolean = true;
    private videopath: string = '';
    private tvshowpath: string = '';
-    private TVShowsEnabled: boolean = false;

    /**
     * check if the current theme is the dark theme
@@ -72,14 +71,6 @@ class StaticInfos {
     * load the Password page manually
     */
    loadPasswordPage: ((callback?: () => void) => void) | undefined = undefined;
-
-    setTVShowsEnabled(TVShowEnabled: boolean): void {
-        this.TVShowsEnabled = TVShowEnabled;
-    }
-
-    isTVShowEnabled(): boolean {
-        return this.TVShowsEnabled;
-    }
 }

 export default new StaticInfos();
--- a/src/utils/KeyComponent.ts
+++ b/src/utils/KeyComponent.ts
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+abstract class KeyComponent<P = {}, S = {}> extends React.Component<P, S> {
+    constructor(props: P) {
+        super(props);
+
+        this.handler = this.handler.bind(this);
+    }
+
+    componentDidMount(): void {
+        document.addEventListener('keyup', this.handler);
+    }
+
+    componentWillUnmount(): void {
+        document.removeEventListener('keyup', this.handler);
+    }
+
+    private handler(e: KeyboardEvent): void {
+        this.keyHandler(e.key);
+    }
+
+    abstract keyHandler(key: string): void;
+}
+
+export default KeyComponent;
--- a/yarn.lock
+++ b/yarn.lock