add some backend code for photopage

implement basic gallery with preview
Merge branch 'settingssavefix' into 'master'
2021-07-24 21:46:54 +02:00 · 2021-07-17 23:20:19 +02:00 · 2021-07-11 12:45:08 +00:00 · 2021-07-11 14:26:10 +02:00 · 2021-06-24 17:58:42 +02:00 · 2021-06-22 20:15:05 +00:00
35 changed files with 2366 additions and 2074 deletions
--- a/apiGo/api/ApiBase.go
+++ b/apiGo/api/ApiBase.go
@ -7,6 +7,7 @@ import (
 	"gopkg.in/oauth2.v3"
 	"net/http"
 	"openmediacenter/apiGo/api/oauth"
+	"openmediacenter/apiGo/database/settings"
 )

 const APIPREFIX = "/api"
@ -17,6 +18,7 @@ const (
 	SettingsNode = iota
 	ActorNode    = iota
 	TVShowNode   = iota
+	PhotoNode    = iota
 )

 type HandlerInfo struct {
@ -47,7 +49,13 @@ func ServerInit() {
 	http.Handle(APIPREFIX+"/tags", oauth.ValidateToken(handlefunc, TagNode))
 	http.Handle(APIPREFIX+"/settings", oauth.ValidateToken(handlefunc, SettingsNode))
 	http.Handle(APIPREFIX+"/actor", oauth.ValidateToken(handlefunc, ActorNode))
+
+	// add tvshow endpoint only if tvshows enabled
+	if settings.TVShowsEnabled() {
 		http.Handle(APIPREFIX+"/tvshow", oauth.ValidateToken(handlefunc, TVShowNode))
+	}
+
+	http.Handle(APIPREFIX+"/photos", oauth.ValidateToken(handlefunc, PhotoNode))

 	// initialize oauth service and add corresponding auth routes
 	oauth.InitOAuth()
--- a/apiGo/api/Helpers.go
+++ b/apiGo/api/Helpers.go
@ -3,7 +3,6 @@ package api
 import (
 	"database/sql"
 	"encoding/json"
-	"errors"
 	"fmt"
 	"openmediacenter/apiGo/api/types"
 	"reflect"
@ -109,7 +108,7 @@ func setField(obj interface{}, name string, value interface{}) error {
 			// if type is convertible - convert and set
 			structFieldValue.Set(val.Convert(structFieldType))
 		} else {
-			return errors.New("provided value type didn't match obj field type and isn't convertible")
+			return fmt.Errorf("provided value %s type didn't match obj field type and isn't convertible", name)
 		}
 	} else {
 		// set value if type is the same
--- a/apiGo/api/Photos.go
+++ b/apiGo/api/Photos.go
@ -0,0 +1,15 @@
+package api
+
+func AddPhotoHandlers() {
+	/**
+	 * @api {post} /api/photos [getPhotos]
+	 * @apiDescription get all available pictures
+	 * @apiName getPhotos
+	 * @apiGroup Photos
+	 *
+	 * @apiSuccess {string} result 'success' if successfully or error message if not
+	 */
+	AddHandler("getPhotos", PhotoNode, func(info *HandlerInfo) []byte {
+		return nil
+	})
+}
--- a/apiGo/api/Settings.go
+++ b/apiGo/api/Settings.go
@ -31,15 +31,23 @@ 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 {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
+	 * @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
 	 */
 	AddHandler("loadGeneralSettings", SettingsNode, func(info *HandlerInfo) []byte {
-		result := database.GetSettings()
-		return jsonify(result)
+		result, _, sizes := database.GetSettings()
+
+		var ret = struct {
+			Settings *types.SettingsType
+			Sizes    *types.SettingsSizeType
+		}{
+			Settings: &result,
+			Sizes:    &sizes,
+		}
+		return jsonify(ret)
 	})

 	/**
@ -53,6 +61,7 @@ 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()
@ -63,6 +72,7 @@ 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}")
@ -77,6 +87,7 @@ func getSettingsFromDB() {
 			MediacenterName: sett.MediacenterName,
 			VideoPath:       serverVideoPath,
 			TVShowPath:      serverTVShowPath,
+			TVShowEnabled:   settings.TVShowsEnabled(),
 		}

 		str, _ := json.Marshal(res)
@ -91,21 +102,17 @@ func saveSettingsToDB() {
 	 * @apiName saveGeneralSettings
 	 * @apiGroup Settings
 	 *
-	 * @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?
+	 * @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?
 	 *
 	 * @apiSuccess {string} result 'success' if successfully or error message if not
 	 */
 	AddHandler("saveGeneralSettings", SettingsNode, func(info *HandlerInfo) []byte {
-		// todo correct type here!
-		var args struct {
-			Settings types.SettingsType
-		}
+		var args types.SettingsType
 		if err := FillStruct(&args, info.Data); err != nil {
 			fmt.Println(err.Error())
 			return nil
@ -121,8 +128,8 @@ func saveSettingsToDB() {
                        DarkMode=?
                    WHERE 1`
 		return database.SuccessQuery(query,
-			args.Settings.VideoPath, args.Settings.EpisodePath, args.Settings.Password,
-			args.Settings.MediacenterName, args.Settings.TMDBGrabbing, args.Settings.DarkMode)
+			args.VideoPath, args.EpisodePath, args.Password,
+			args.MediacenterName, args.TMDBGrabbing, args.DarkMode)
 	})
 }

--- a/apiGo/api/TVShows.go
+++ b/apiGo/api/TVShows.go
@ -3,9 +3,15 @@ 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,34 +22,84 @@ func getVideoHandlers() {
 	 * @apiName GetMovies
 	 * @apiGroup video
 	 *
-	 * @apiParam {int} [Tag=all] id of VideoTag to get videos
+	 * @apiParam {int} [Tag=1] id of VideoTag to get videos (1=all)
 	 *
-	 * @apiSuccess {Object[]} . List of Videos
-	 * @apiSuccess {number} .MovieId Id of Video
-	 * @apiSuccess {String} .MovieName  Name of video
+	 * @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
 	 */
 	AddHandler("getMovies", VideoNode, func(info *HandlerInfo) []byte {
 		var args struct {
-			Tag int
+			Tag  uint32
+			Sort uint8
 		}
 		if err := FillStruct(&args, info.Data); err != nil {
 			fmt.Println(err.Error())
 			return nil
 		}

+		const (
+			date   = iota
+			likes  = iota
+			random = iota
+			names  = iota
+		)
+
+		var SortClause string
+		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
+		}
+
 		var query string
 		// 1 is the id of the ALL tag
 		if args.Tag != 1 {
-			query = fmt.Sprintf(`SELECT movie_id,movie_name FROM videos
+			query = fmt.Sprintf(`SELECT movie_id,movie_name,t.tag_name FROM videos
 					INNER JOIN video_tags vt on videos.movie_id = vt.video_id
 					INNER JOIN tags t on vt.tag_id = t.tag_id
-					WHERE t.tag_id = '%d'
-					ORDER BY likes DESC, create_date, movie_name`, args.Tag)
+					WHERE t.tag_id = %d %s`, args.Tag, SortClause)
 		} else {
-			query = "SELECT movie_id,movie_name FROM videos ORDER BY create_date DESC, movie_name"
+			query = fmt.Sprintf("SELECT movie_id,movie_name, (SELECT 'All' as tag_name) FROM videos %s", SortClause)
 		}

-		result := readVideosFromResultset(database.Query(query))
+		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
 		// 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,9 +90,7 @@ func Close() {
 	db.Close()
 }

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

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

 	if err != nil {
@ -130,7 +128,6 @@ func GetSettings() types.SettingsType {
 	result.TMDBGrabbing = TMDBGrabbing != 0
 	result.PasswordEnabled = result.Password != "-1"
 	result.DarkMode = DarkMode != 0
-	result.PathPrefix = SettingsVideoPrefix
-
-	return result
+	PathPrefix = SettingsVideoPrefix
+	return
 }
--- a/apiGo/database/settings/Settings.go
+++ b/apiGo/database/settings/Settings.go
@ -0,0 +1,11 @@
+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,6 +7,7 @@ import (
 	"net/http"
 	"openmediacenter/apiGo/api"
 	"openmediacenter/apiGo/database"
+	settings2 "openmediacenter/apiGo/database/settings"
 	"openmediacenter/apiGo/static"
 	"openmediacenter/apiGo/videoparser"
 )
@ -32,6 +33,7 @@ func main() {
 	api.AddTagHandlers()
 	api.AddActorsHandlers()
 	api.AddTvshowHandlers()
+	api.AddPhotoHandlers()

 	videoparser.SetupSettingsWebsocket()

@ -55,8 +57,12 @@ 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 := database.GetSettings()
+	mSettings, PathPrefix, _ := database.GetSettings()
 	// add the path prefix to videopath
-	mSettings.VideoPath = mSettings.PathPrefix + mSettings.VideoPath
+	mSettings.VideoPath = 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 := database.GetSettings()
+	mSettings, PathPrefix, _ := database.GetSettings()
 	// add the path prefix to videopath
-	mSettings.EpisodePath = mSettings.PathPrefix + mSettings.EpisodePath
+	mSettings.EpisodePath = 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,7 +28,7 @@ type TVShowTMDB struct {
 }

 type tmdbVidResult struct {
-	PosterPath       string `json:"poster_path"`
+	PosterPath       *string `json:"poster_path"`
 	Adult            bool    `json:"adult"`
 	Overview         string  `json:"overview"`
 	ReleaseDate      string  `json:"release_date"`
@ -37,7 +37,7 @@ type tmdbVidResult struct {
 	OriginalTitle    string  `json:"original_title"`
 	OriginalLanguage string  `json:"original_language"`
 	Title            string  `json:"title"`
-	BackdropPath     string `json:"backdrop_path"`
+	BackdropPath     *string `json:"backdrop_path"`
 	Popularity       int     `json:"popularity"`
 	VoteCount        int     `json:"vote_count"`
 	Video            bool    `json:"video"`
@ -45,10 +45,10 @@ type tmdbVidResult struct {
 }

 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,10 +111,16 @@ func SearchVideo(MovieName string, year int) *VideoTMDB {
 	// continue label
 cont:

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

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

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

 	return &res
--- a/declaration.d.ts
+++ b/declaration.d.ts
@ -1 +1,2 @@
 declare module '*.css';
+declare module 'pro-gallery';
--- a/package.json
+++ b/package.json
@ -12,8 +12,9 @@
    "@fortawesome/free-regular-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.13",
-    "bootstrap": "^4.5.3",
+    "bootstrap": "^5.0.1",
    "plyr-react": "^3.0.7",
+    "pro-gallery": "^4.0.4",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
@ -55,15 +56,16 @@
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.6.0",
+    "@testing-library/user-event": "^13.1.9",
    "@types/jest": "^26.0.19",
-    "@types/node": "^14.14.31",
+    "@types/node": "^15.12.2",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.1",
-    "@types/react-router": "5.1.12",
+    "@types/react-router": "5.1.15",
    "@types/react-router-dom": "^5.1.6",
    "@typescript-eslint/eslint-plugin": "^4.17.0",
    "@typescript-eslint/parser": "^4.17.0",
+    "apidoc": "^0.28.1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "eslint": "^7.22.0",
@ -77,10 +79,9 @@
    "jest-junit": "^12.0.0",
    "prettier": "^2.2.1",
    "prettier-config": "^1.0.0",
-    "react-scripts": "4.0.3",
-    "apidoc": "^0.28.1"
+    "react-scripts": "4.0.3"
  },
-  "apidoc":{
+  "apidoc": {
    "name": "OpenMediaCenter",
    "description": "API Documentation of OpenMediaCenter",
    "title": "OpenMediaCenter Doc",
--- a/src/App.module.css
+++ b/src/App.module.css
@ -12,6 +12,7 @@
    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,6 +18,11 @@ 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
@ -21,6 +21,7 @@ import TVShowPage from './pages/TVShowPage/TVShowPage';
 import TVPlayer from './pages/TVShowPage/TVPlayer';
 import {CookieTokenStore} from './utils/TokenStore/CookieTokenStore';
 import {token} from './utils/TokenHandler';
+import {PhotoPage} from './pages/PhotoPage/PhotoPage';

 interface state {
    password: boolean | null; // null if uninitialized - true if pwd needed false if not needed
@ -86,6 +87,8 @@ class App extends React.Component<{}, state> {

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

+            GlobalInfos.setTVShowsEnabled(result.TVShowEnabled);
+
            this.setState({
                mediacentername: result.MediacenterName
            });
@ -146,9 +149,17 @@ 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={'/photos'} activeStyle={{opacity: '0.85'}}>
+                    Photos
+                </NavLink>
+
                <NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/settings'} activeStyle={{opacity: '0.85'}}>
                    Settings
                </NavLink>
@ -168,24 +179,35 @@ 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 exact path='/photos'>
+                    <PhotoPage />
+                </Route>
+
                <Route path='/'>
                    <HomePage />
                </Route>
--- a/src/elements/DynamicContentContainer/DynamicContentContainer.tsx
+++ b/src/elements/DynamicContentContainer/DynamicContentContainer.tsx
@ -41,18 +41,24 @@ class DynamicContentContainer<T> extends React.Component<Props<T>, state<T>> {

    componentDidUpdate(prevProps: Props<T>): void {
        // when source props change force update!
-        if (prevProps.data.length !== this.props.data.length) {
-            this.clean();
+        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);
+            });
        }
    }

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

    render(): JSX.Element {
--- a/src/pages/ActorPage/ActorPage.tsx
+++ b/src/pages/ActorPage/ActorPage.tsx
@ -72,6 +72,10 @@ 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,7 +4,9 @@ import {CategoryView} from './CategoryView';

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

    it('renders without crashing ', function () {
--- a/src/pages/CategoryPage/CategoryView.tsx
+++ b/src/pages/CategoryPage/CategoryView.tsx
@ -10,12 +10,14 @@ 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;
 }

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

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

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

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

                <SideBar>
                    <SideBarTitle>Default Tags:</SideBarTitle>
@ -105,10 +112,18 @@ 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) => {
-            this.videodata = result;
-            this.setState({loaded: true});
-        });
+        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('/');
+            }
+        );
    }

    /**
--- a/src/pages/HomePage/HomePage.module.css
+++ b/src/pages/HomePage/HomePage.module.css
@ -7,3 +7,61 @@
    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,8 +1,10 @@
 import {shallow} from 'enzyme';
 import React from 'react';
-import {HomePage} from './HomePage';
+import {HomePage, SortBy} 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 () {
@ -23,23 +25,6 @@ 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/>);
@ -72,7 +57,7 @@ describe('<HomePage/>', function () {
    });

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

        const wrapper = shallow(<HomePage/>);

@ -100,6 +85,20 @@ 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,6 +11,16 @@ 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
+}

 interface Props extends RouteComponentProps {}

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

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

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

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

    /**
     * fetch the necessary data for left info box
@ -131,32 +147,52 @@ export class HomePage extends React.Component<Props, state> {
                            <Tag
                                tagInfo={{TagName: 'All', TagId: DefaultTags.all.TagId}}
                                onclick={(): void => {
-                                    this.fetchVideoData(DefaultTags.all.TagId);
+                                    this.tagState = DefaultTags.all;
+                                    this.fetchVideoData();
                                    this.setState({subtitle: 'All Videos'});
                                }}
                            />
                            <Tag
                                tagInfo={{TagName: 'Full Hd', TagId: DefaultTags.fullhd.TagId}}
                                onclick={(): void => {
-                                    this.fetchVideoData(DefaultTags.fullhd.TagId);
+                                    this.tagState = DefaultTags.fullhd;
+                                    this.fetchVideoData();
                                    this.setState({subtitle: 'Full Hd Videos'});
                                }}
                            />
                            <Tag
                                tagInfo={{TagName: 'Low Quality', TagId: DefaultTags.lowq.TagId}}
                                onclick={(): void => {
-                                    this.fetchVideoData(DefaultTags.lowq.TagId);
+                                    this.tagState = DefaultTags.lowq;
+                                    this.fetchVideoData();
                                    this.setState({subtitle: 'Low Quality Videos'});
                                }}
                            />
                            <Tag
                                tagInfo={{TagName: 'HD', TagId: DefaultTags.hd.TagId}}
                                onclick={(): void => {
-                                    this.fetchVideoData(DefaultTags.hd.TagId);
+                                    this.tagState = DefaultTags.hd;
+                                    this.fetchVideoData();
                                    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>
+                                </div>
+                            </div>
+                        </div>
+
                        <VideoContainer data={this.state.data} />
                        <div className={style.rightinfo} />
                    </Route>
@ -164,6 +200,17 @@ 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/PhotoPage/PhotoPage.tsx
+++ b/src/pages/PhotoPage/PhotoPage.tsx
@ -0,0 +1,76 @@
+import 'pro-gallery/dist/statics/main.css';
+import React from 'react';
+import ExpandableProGallery from './expandableGallery';
+
+export function PhotoPage(): JSX.Element {
+    // Add your images here...
+    const items = [
+        {
+            // Image item:
+            itemId: 'sample-id',
+            mediaUrl: 'https://i.picsum.photos/id/674/200/300.jpg?hmac=kS3VQkm7AuZdYJGUABZGmnNj_3KtZ6Twgb5Qb9ITssY',
+            metaData: {
+                type: 'image',
+                height: 200,
+                width: 100,
+                title: 'sample-title',
+                description: 'sample-description',
+                focalPoint: [0, 0],
+                link: {
+                    url: 'http://example.com',
+                    target: '_blank'
+                }
+            }
+        },
+        {
+            // Another Image item:
+            itemId: 'differentItem',
+            mediaUrl: 'https://i.picsum.photos/id/1003/1181/1772.jpg?hmac=oN9fHMXiqe9Zq2RM6XT-RVZkojgPnECWwyEF1RvvTZk',
+            metaData: {
+                type: 'image',
+                height: 200,
+                width: 100,
+                title: 'sample-title',
+                description: 'sample-description',
+                focalPoint: [0, 0],
+                link: {
+                    url: 'http://example.com',
+                    target: '_blank'
+                }
+            }
+        }
+    ];
+
+    // The options of the gallery (from the playground current state)
+    const options = {
+        galleryLayout: -1,
+        hoveringBehaviour: 'NEVER_SHOW',
+        scrollAnimation: 'MAIN_COLOR',
+        imageHoverAnimation: 'ZOOM_IN',
+        itemBorderRadius: 5,
+        allowContextMenu: true
+    };
+
+    // The size of the gallery container. The images will fit themselves in it
+    const container = {
+        width: window.innerWidth,
+        height: window.innerHeight
+    };
+
+    // The eventsListener will notify you anytime something has happened in the gallery.
+    const eventsListener = (eventName: unknown, eventData: unknown): void => console.log({eventName, eventData});
+
+    return (
+        <ExpandableProGallery
+            items={items}
+            options={options}
+            container={container}
+            eventsListener={eventsListener}
+            scrollingElement={window}
+            viewMode={1}
+        />
+    );
+}
+
+// Enjoy using your new gallery!
+// For more options, visit https://github.com/wix/pro-gallery
--- a/src/pages/PhotoPage/expandableGallery.js
+++ b/src/pages/PhotoPage/expandableGallery.js
@ -0,0 +1,106 @@
+import React from 'react';
+import {GALLERY_CONSTS, ProGallery, ProGalleryRenderer} from 'pro-gallery';
+import {utils} from 'pro-gallery-lib';
+// import CLICK_ACTIONS from '../../../common/constants/itemClick';
+import CloseButton from './x';
+
+const styles = {
+    gallery: {
+
+    },
+    fullscreen: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: 9999,
+        background: 'white',
+        opacity: 0,
+        transition: 'opacity 2s ease',
+        visibility: 'hidden'
+    },
+    shown: {
+        visibility: 'visible',
+        opacity: 1
+    },
+    close: {
+        boxSizing: 'content-box',
+        zIndex: 10,
+        padding: 10,
+        position: 'fixed',
+        right: 20,
+        top: 20,
+        background: 'rgba(255,255,255,0.8)',
+        borderRadius: 4,
+        width: 25,
+        height: 25,
+        fill: 'black',
+        cursor: 'pointer'
+    }
+}
+
+const GALLERY_EVENTS = GALLERY_CONSTS.events;
+
+export default class ExpandableProGallery extends React.Component {
+
+    constructor(props) {
+        super(props)
+        this.eventListener = this.eventListener.bind(this);
+        this.state = {
+            fullscreenIdx: -1
+        }
+    }
+
+    eventListener(eventName, eventData) {
+        switch (eventName) {
+            case GALLERY_EVENTS.ITEM_ACTION_TRIGGERED:
+                this.setState({ fullscreenIdx: eventData.idx });
+                break;
+            default:
+                console.log({eventName, eventData});
+                break;
+        }
+        if (typeof this.props.eventsListener === 'function') {
+            this.props.eventsListener(eventName, eventData);
+        }
+    }
+
+    render() {
+        const Gallery = this.props.useBlueprints ? ProGalleryRenderer : ProGallery;
+        return (
+            <>
+                <section style={{...styles.gallery, display: (this.state.fullscreenIdx < 0 ? 'block' : 'none')}}>
+                    <Gallery
+                        {...this.props}
+                        key={`pro-gallery-${this.props.domId}`}
+                        domId={`pro-gallery-${this.props.domId}`}
+                        eventsListener={this.eventListener}
+                    />
+                </section>
+                {this.state.fullscreenIdx < 0 ? null : <section style={{ ...styles.fullscreen, ...(this.state.fullscreenIdx >= 0 && styles.shown) }}>
+                    <CloseButton style={styles.close} onClick={() => this.setState({fullscreenIdx: -1})} />
+                    <Gallery
+                        {...this.props}
+                        key={`pro-fullscreen-${this.props.domId}`}
+                        domId={`pro-fullscreen-${this.props.domId}`}
+                        currentIdx={this.state.fullscreenIdx}
+                        container= {{
+                            width: window.innerWidth,
+                            height: window.innerHeight
+                        }}
+                        styles={{
+                            ...(this.props.options || this.props.styles),
+                            galleryLayout: 5,
+                            slideshowInfoSize: 80,
+                            slideAnimation: utils.isMobile() ? 'SCROLL' : 'FADE',
+                            cubeType:'fit',
+                            scrollSnap: true,
+                            showArrows: !utils.isMobile()
+                        }}
+                    />
+                </section>}
+            </>
+        );
+    }
+}
--- a/src/pages/PhotoPage/x.js
+++ b/src/pages/PhotoPage/x.js
@ -0,0 +1,16 @@
+/* eslint-disable */
+/* tslint:disable */
+import PropTypes from 'prop-types';
+import React from 'react';
+const x = ({size, ...props}) => (
+    <svg viewBox="0 0 15 15" fill="currentColor" width={ size || "15" } height={ size || "15" } {...props}>
+        <path d="M15 0.6L14.4 0 7.5 6.9 0.6 0 0 0.6 6.9 7.5 0 14.4 0.6 15 7.5 8.1 14.4 15 15 14.4 8.1 7.5z" fillRule="evenodd" clipRule="evenodd" />
+    </svg>
+);
+x.displayName = 'x';
+x.propTypes = {
+    size: PropTypes.string
+}
+export default x;
+/* tslint:enable */
+/* eslint-enable */
--- a/src/pages/Player/Player.tsx
+++ b/src/pages/Player/Player.tsx
@ -286,6 +286,10 @@ 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('/');
            }
        );
    }
--- a/src/pages/SettingsPage/GeneralSettings.tsx
+++ b/src/pages/SettingsPage/GeneralSettings.tsx
@ -11,7 +11,8 @@ import {SettingsTypes} from '../../types/ApiTypes';
 import {GeneralSuccess} from '../../types/GeneralTypes';

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

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

@ -225,11 +236,12 @@ 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,9 +22,11 @@ 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}
                </div>
                <div className={style.SettingsContent}>
                    <Switch>
@ -34,9 +36,11 @@ class SettingsPage extends React.Component {
                        <Route path='/settings/movies'>
                            <MovieSettings />
                        </Route>
+                        {GlobalInfos.isTVShowEnabled() ? (
                            <Route path='/settings/tv'>
                                <span />
                            </Route>
+                        ) : null}
                        <Route path='/settings'>
                            <Redirect to='/settings/general' />
                        </Route>
--- a/src/pages/TVShowPage/TVPlayer.tsx
+++ b/src/pages/TVShowPage/TVPlayer.tsx
@ -46,6 +46,10 @@ 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,9 +36,10 @@ export namespace SettingsTypes {
        MediacenterName: string;
        VideoPath: string;
        TVShowPath: string;
+        TVShowEnabled: boolean;
    }

-    export interface loadGeneralSettingsType {
+    export interface SettingsType {
        VideoPath: string;
        EpisodePath: string;
        MediacenterName: string;
@ -46,7 +47,9 @@ 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,34 +26,7 @@ export function callAPI<T>(
    errorcallback: (_: string) => void = (_: string): void => {}
 ): void {
    token.checkAPITokenValid((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));
+        generalAPICall<T>(apinode, fd, callback, errorcallback, false, true, mytoken);
    });
 }

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

 /**
@ -92,19 +54,54 @@ export function callApiUnsafe<T>(
 */
 export function callAPIPlain(apinode: APINode, fd: ApiBaseRequest, callback: (_: string) => void): void {
    token.checkAPITokenValid((mytoken) => {
-        fetch(APIPREFIX + apinode, {
+        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, {
            method: 'POST',
            body: JSON.stringify(fd),
            headers: new Headers({
-                'Content-Type': 'application/json',
-                Authorization: 'Bearer ' + mytoken
+                'Content-Type': json ? 'application/json' : 'text/plain',
+                ...(!unsafe && {Authorization: 'Bearer ' + mytoken})
            })
-        }).then((response) =>
-            response.text().then((result) => {
-                callback(result);
-            })
-        );
        });
+
+        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);
+            }
+        }
+    })();
 }

 /**
--- a/src/utils/GlobalInfos.ts
+++ b/src/utils/GlobalInfos.ts
@ -9,6 +9,7 @@ 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
@ -71,6 +72,14 @@ 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/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
lukas	ec0e76d041	add some backend code for photopage	2021-07-24 21:46:54 +02:00
lukas	f480df1e1b	implement basic gallery with preview	2021-07-17 23:20:19 +02:00
Lukas Heiligenbrunner	ebb55eb0dc	Merge branch 'settingssavefix' into 'master' fix type error on settingssave Closes #71 See merge request lukas/openmediacenter!50	2021-07-11 12:45:08 +00:00
lukas	24ecfb46e6	fix type error on settingssave	2021-07-11 14:26:10 +02:00
lukas	64897d2abe	implement api fetch with async await and outsource general code into seperate function	2021-06-24 17:58:42 +02:00
Lukas Heiligenbrunner	c93d02ca14	Merge branch 'filterbutton' into 'master' SortBY feature See merge request lukas/openmediacenter!49	2021-06-22 20:15:05 +00:00
lukas	c7a0368a26	add test and move style in stylesheet	2021-06-22 22:01:35 +02:00
Lukas Heiligenbrunner	95a6a4d407	Merge branch 'disableableTVShowNav' into 'master' tVShows navlink and pages optionally disabled See merge request lukas/openmediacenter!48	2021-06-14 19:37:04 +00:00
lukas	8d50ec54e7	add new sortby button and allow sorting on homepage	2021-06-13 22:29:50 +02:00
lukas	d94b672a12	fix invalid underlining of navitems	2021-06-11 23:10:57 +02:00
lukas	c47ab476a2	update dependencies	2021-06-10 21:37:59 +02:00
lukas	a60f5a30b8	make tvshow navlink and pages and backend disableable with a command line parameter	2021-06-08 21:55:54 +02:00
Lukas Heiligenbrunner	f7b7df5934	Merge branch 'wrong_playerid' into 'master' Homepage redirect on wrong Player id Closes #69 See merge request lukas/openmediacenter!47	2021-06-08 18:12:09 +00:00
Lukas Heiligenbrunner	7d44ffa225	Homepage redirect on wrong Player id	2021-06-08 18:12:09 +00:00
lukas	f0bc0c29dd	fix lukas/openmediacenter#70	2021-06-06 11:49:42 +02:00