add housekeeping code to delete duplicated tags and videos

fix ip of testserver
add a filewatcher to automatically reindex if new file is added
2022-09-20 00:32:38 +02:00 · 2022-06-25 14:37:51 +02:00 · 2022-06-25 14:02:25 +02:00 · 2022-05-22 20:48:04 +02:00 · 2022-05-05 21:32:35 +02:00 · 2022-05-05 19:43:29 +02:00
25 changed files with 6017 additions and 8414 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -108,18 +108,13 @@ Debian_Server:
      - Minimize_Frontend
      - Build_Backend

-Test_Server:
+.Test_Server_Common:
  stage: deploy
  image: luki42/ssh:latest
  needs:
    - Frontend_Tests
    - Backend_Tests
    - Debian_Server
-  rules:
-    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH # run this always on default branch
-    - if: $CI_COMMIT_REF_NAME != $CI_DEFAULT_BRANCH # allow triggering this manually
-      when: manual
-      allow_failure: true
  script:
    - eval $(ssh-agent -s)
    - echo "$SSH_PRIVATE_KEY" | ssh-add -
@ -129,24 +124,38 @@ Test_Server:
    - ssh root@192.168.0.42 "DEBIAN_FRONTEND=noninteractive apt-get --reinstall  -y -qq install /tmp/OpenMediaCenter-*.deb && rm /tmp/OpenMediaCenter-*.deb"
  allow_failure: true

-Test_Server_2:
+Test_Server_CD:
+  extends: .Test_Server_Common
+  only:
+    refs:
+      - master
+
+Test_Server_MANUAL:
+  extends: .Test_Server_Common
+  when: manual
+
+.Test_Server_2_Common:
  stage: deploy
  image: luki42/ssh:latest
  needs:
    - Frontend_Tests
    - Backend_Tests
    - Debian_Server
-  rules:
-    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH # run this always on default branch
-    - if: $CI_COMMIT_REF_NAME != $CI_DEFAULT_BRANCH # allow triggering this manually
-      when: manual
-      allow_failure: true
  script:
    - eval $(ssh-agent -s)
    - echo "$SSH_PRIVATE_KEY_2" | ssh-add -
    - mkdir -p ~/.ssh
    - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
-    - scp deb/OpenMediaCenter-*.deb root@192.168.0.209:/tmp/
-    - ssh root@192.168.0.209 "DEBIAN_FRONTEND=noninteractive apt-get --reinstall  -y -qq install /tmp/OpenMediaCenter-*.deb && rm /tmp/OpenMediaCenter-*.deb"
+    - scp deb/OpenMediaCenter-*.deb root@192.168.0.44:/tmp/
+    - ssh root@192.168.0.44 "DEBIAN_FRONTEND=noninteractive apt-get --reinstall  -y -qq install /tmp/OpenMediaCenter-*.deb && rm /tmp/OpenMediaCenter-*.deb"
  allow_failure: true

+Test_Server_2_CD:
+  extends: .Test_Server_2_Common
+  only:
+    refs:
+      - master
+
+Test_Server_2_MANUAL:
+  extends: .Test_Server_2_Common
+  when: manual
--- a/apiGo/api/Tags.go
+++ b/apiGo/api/Tags.go
@ -78,7 +78,7 @@ func getFromDB() {
 	 * @apiSuccess {string} TagName name of the Tag
 	 */
 	api.AddHandler("getAllTags", api.TagNode, api.PermUser, func(context api.Context) {
-		query := "SELECT tag_id,tag_name from tags"
+		query := "SELECT tag_id,tag_name from tags ORDER BY tag_name"
 		context.Json(readTagsFromResultset(database.Query(query)))
 	})
 }
--- a/apiGo/api/Video.go
+++ b/apiGo/api/Video.go
@ -1,8 +1,8 @@
 package api

 import (
+	"encoding/json"
 	"fmt"
-	"math/rand"
 	"net/url"
 	"openmediacenter/apiGo/api/api"
 	"openmediacenter/apiGo/api/types"
@ -10,6 +10,7 @@ import (
 	"openmediacenter/apiGo/database"
 	"os"
 	"strconv"
+	"strings"
 )

 func addVideoHandlers() {
@ -164,27 +165,35 @@ func getVideoHandlers() {
 	api.AddHandler("getRandomMovies", api.VideoNode, api.PermUser, func(context api.Context) {
 		var args struct {
 			Number    int
-			Seed   *int
+			TagFilter []uint32
 		}
 		if api.DecodeRequest(context.GetRequest(), &args) != nil {
 			context.Text("unable to decode request")
 			return
 		}

-		// if Seed argument not passed generate random seed
-		if args.Seed == nil {
-			r := rand.Int()
-			args.Seed = &r
-		}
-
 		var result struct {
 			Tags   []types.Tag
 			Videos []types.VideoUnloadedType
 		}

-		query := fmt.Sprintf("SELECT movie_id,movie_name FROM videos ORDER BY RAND(%d) LIMIT %d", *args.Seed, args.Number)
+		whereclause := "WHERE 1"
+		if len(args.TagFilter) > 0 {
+			d, _ := json.Marshal(args.TagFilter)
+			vals := strings.Trim(string(d), "[]")
+
+			whereclause = fmt.Sprintf("WHERE tag_id IN (%s)", vals)
+		}
+
+		query := fmt.Sprintf(`
+SELECT video_tags.video_id,v.movie_name FROM video_tags join videos v on v.movie_id = video_tags.video_id
+                                        %s
+                                        group by video_id
+                                        ORDER BY RAND()
+                                        LIMIT %d`, whereclause, args.Number)
 		result.Videos = readVideosFromResultset(database.Query(query))

+		if len(result.Videos) > 0 {
 			var ids string
 			for i := range result.Videos {
 				ids += "video_tags.video_id=" + strconv.Itoa(result.Videos[i].MovieId)
@ -201,7 +210,7 @@ func getVideoHandlers() {
 									GROUP BY t.tag_id`, ids)

 			rows := database.Query(query)
-
+			if rows != nil {
 				for rows.Next() {
 					var tag types.Tag
 					err := rows.Scan(&tag.TagName, &tag.TagId)
@ -211,6 +220,10 @@ func getVideoHandlers() {
 					// append to final array
 					result.Tags = append(result.Tags, tag)
 				}
+			}
+		} else {
+			result.Tags = []types.Tag{}
+		}

 		context.Json(result)
 	})
--- a/apiGo/go.mod
+++ b/apiGo/go.mod
@ -5,6 +5,7 @@ go 1.16
 require (
 	github.com/3d0c/gmf v0.0.0-20210925211039-e278e6e53b16
 	github.com/dgrijalva/jwt-go v3.2.0+incompatible
+	github.com/fsnotify/fsnotify v1.5.4
 	github.com/go-sql-driver/mysql v1.6.0
 	github.com/pelletier/go-toml/v2 v2.0.0-beta.3
 	github.com/pressly/goose/v3 v3.1.0
--- a/apiGo/go.sum
+++ b/apiGo/go.sum
@ -9,6 +9,8 @@ github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSs
 github.com/denisenkom/go-mssqldb v0.10.0/go.mod h1:xbL0rPBG9cCiLr28tMa8zpbdarY27NDyej4t/EjAShU=
 github.com/dgrijalva/jwt-go v3.2.0+incompatible h1:7qlOGliEKZXTDg6OTjfoBKDXWrumCAMpl/TFQ4/5kLM=
 github.com/dgrijalva/jwt-go v3.2.0+incompatible/go.mod h1:E3ru+11k8xSBh+hMPgOLZmtrrCbhqsmaPHjLKYnJCaQ=
+github.com/fsnotify/fsnotify v1.5.4 h1:jRbGcIw6P2Meqdwuo0H1p6JVLbL5DHKAKlYndzMwVZI=
+github.com/fsnotify/fsnotify v1.5.4/go.mod h1:OVB6XrOHzAwXMpEM7uPOzcehqUV2UqJxmVXmkdnm1bU=
 github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
 github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
 github.com/gin-gonic/gin v1.6.3 h1:ahKqKTFpO5KTPHxWZjEdPScmYaGtLo8Y4DMHoEsnp14=
@ -82,8 +84,9 @@ golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20200116001909-b77594299b42/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1 h1:SrN+KX8Art/Sf4HNj6Zcz06G7VEz+7w9tdXTPOZ7+l4=
 golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220412211240-33da011f77ad h1:ntjMns5wyP/fN65tdBD4g8J5w8n015+iIIs9rtjXkY0=
+golang.org/x/sys v0.0.0-20220412211240-33da011f77ad/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
 golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
--- a/apiGo/housekeeping/HouseKeeping.go
+++ b/apiGo/housekeeping/HouseKeeping.go
@ -0,0 +1,18 @@
+package housekeeping
+
+import "fmt"
+
+func RunHouseKeepingTasks() {
+	fmt.Println("Runnint houskeeping tasks!")
+
+	fmt.Println("Deduplicating Tags")
+	deduplicateTags()
+
+	fmt.Println("Deduplicating Tags assigned to videos")
+	deduplicateVideoTags()
+
+	fmt.Println("Fix missing video metadata like ratio")
+	fixMissingMetadata()
+
+	fmt.Println("Finished housekeeping")
+}
--- a/apiGo/housekeeping/MissingVideoMetaData.go
+++ b/apiGo/housekeeping/MissingVideoMetaData.go
@ -0,0 +1,5 @@
+package housekeeping
+
+func fixMissingMetadata() {
+	// todo
+}
--- a/apiGo/housekeeping/TagDeduplication.go
+++ b/apiGo/housekeeping/TagDeduplication.go
@ -0,0 +1,86 @@
+package housekeeping
+
+import (
+	"fmt"
+	"openmediacenter/apiGo/database"
+)
+
+func deduplicateTags() {
+	// find all duplicate tags
+
+	// gives first occurence of duplicate
+	query := `
+SELECT
+    tag_name
+FROM
+    tags
+GROUP BY tag_name
+HAVING COUNT(tag_name) > 1`
+	rows := database.Query(query)
+	duplicates := []string{}
+	if rows != nil {
+		for rows.Next() {
+			var id string
+			err := rows.Scan(&id)
+			if err != nil {
+				panic(err.Error()) // proper Error handling instead of panic in your app
+			}
+			duplicates = append(duplicates, id)
+		}
+	} else {
+		// nothing to do
+		return
+	}
+
+	fmt.Print("deleting duplicate tag ids: ")
+	fmt.Println(duplicates)
+
+	for _, el := range duplicates {
+		query := fmt.Sprintf("SELECT tag_id FROM tags WHERE tag_name='%s'", el)
+		rows := database.Query(query)
+		ids := []uint32{}
+		for rows.Next() {
+			var id uint32
+			err := rows.Scan(&id)
+			if err != nil {
+				panic(err.Error()) // proper Error handling instead of panic in your app
+			}
+			ids = append(ids, id)
+		}
+
+		// id to copy other data to
+		mainid := ids[0]
+
+		// ids to copy from
+		copyids := ids[1:]
+
+		fmt.Printf("Migrating %s\n", el)
+		migrateTags(mainid, copyids)
+	}
+}
+
+func migrateTags(destid uint32, sourcids []uint32) {
+	querytempl := `
+UPDATE video_tags 
+SET 
+    tag_id = %d
+WHERE
+    tag_id = %d`
+
+	for _, id := range sourcids {
+		err := database.Edit(fmt.Sprintf(querytempl, destid, id))
+		if err != nil {
+			fmt.Printf("failed to set id from %d to %d\n", id, destid)
+			return
+		}
+		fmt.Printf("Merged %d into %d\n", id, destid)
+
+		// now lets delete this tag
+		query := fmt.Sprintf(`DELETE FROM tags WHERE tag_id=%d`, id)
+		err = database.Edit(query)
+		if err != nil {
+			fmt.Printf("failed to delete Tag %d", id)
+			return
+		}
+	}
+}
--- a/apiGo/housekeeping/VideoTagDeduplication.go
+++ b/apiGo/housekeeping/VideoTagDeduplication.go
@ -0,0 +1,37 @@
+package housekeeping
+
+import (
+	"fmt"
+	"openmediacenter/apiGo/database"
+)
+
+func deduplicateVideoTags() {
+	// gives first occurence of duplicate
+	query := `
+SELECT
+    tag_id, video_id, count(tag_id)
+FROM
+    video_tags
+GROUP BY tag_id, video_id
+HAVING COUNT(tag_id) > 1`
+	rows := database.Query(query)
+	if rows != nil {
+		for rows.Next() {
+			var tagid uint32
+			var vidid uint32
+			var nr uint32
+			err := rows.Scan(&tagid, &vidid, &nr)
+			if err != nil {
+				panic(err.Error()) // proper Error handling instead of panic in your app
+			}
+
+			// now lets delete this tag
+			query := fmt.Sprintf(`DELETE FROM video_tags WHERE tag_id=%d AND video_id=%d LIMIT %d`, tagid, vidid, nr-1)
+			err = database.Edit(query)
+			if err != nil {
+				fmt.Printf("failed to delete Tag %d + vid %d", tagid, vidid)
+				return
+			}
+		}
+	}
+}
--- a/apiGo/main.go
+++ b/apiGo/main.go
@ -1,11 +1,13 @@
 package main

 import (
+	"flag"
 	"fmt"
 	"openmediacenter/apiGo/api"
 	api2 "openmediacenter/apiGo/api/api"
 	"openmediacenter/apiGo/config"
 	"openmediacenter/apiGo/database"
+	"openmediacenter/apiGo/housekeeping"
 	"openmediacenter/apiGo/static"
 	"openmediacenter/apiGo/videoparser"
 	"os"
@ -17,6 +19,8 @@ func main() {
 	const port uint16 = 8081
 	errc := make(chan error, 1)

+	housekPTr := flag.Bool("HouseKeeping", false, "Run housekeeping tasks")
+
 	config.Init()

 	// todo some verbosity logger or sth
@ -29,9 +33,16 @@ func main() {
 	}
 	defer database.Close()

+	// check if we should run the housekeeping tasks
+	if *housekPTr {
+		housekeeping.RunHouseKeepingTasks()
+		return
+	}
+
 	api.AddHandlers()

 	videoparser.SetupSettingsWebsocket()
+	videoparser.InitFileWatcher()

 	// add the static files
 	static.ServeStaticFiles()
--- a/apiGo/videoparser/FileWatcher.go
+++ b/apiGo/videoparser/FileWatcher.go
@ -0,0 +1,58 @@
+package videoparser
+
+import (
+	"github.com/fsnotify/fsnotify"
+	"log"
+	"openmediacenter/apiGo/config"
+	"openmediacenter/apiGo/database"
+	"strings"
+)
+
+func InitFileWatcher() {
+	watcher, err := fsnotify.NewWatcher()
+	if err != nil {
+		log.Fatal("NewWatcher failed: ", err)
+	}
+
+	mSettings, _, _ := database.GetSettings()
+	vidFolder := config.GetConfig().General.ReindexPrefix + mSettings.VideoPath
+	epsfolder := config.GetConfig().General.ReindexPrefix + mSettings.EpisodePath
+
+	defer watcher.Close()
+	go func() {
+		for {
+			select {
+			case event, ok := <-watcher.Events:
+				if !ok {
+					return
+				}
+				// start new reindex
+				// (may be optimized by checking here if added file is video
+				// and start reindex just for one file)
+				if strings.Contains(event.Name, vidFolder) {
+					StartReindex()
+				} else if strings.Contains(event.Name, epsfolder) {
+					StartTVShowReindex()
+				} else {
+					log.Printf("Event in wrong folder: %s %s\n", event.Name, event.Op)
+				}
+			case err, ok := <-watcher.Errors:
+				if !ok {
+					return
+				}
+				log.Println("error:", err)
+			}
+		}
+
+	}()
+
+	err = watcher.Add(vidFolder)
+	if err != nil {
+		log.Println("Adding of file watcher failed: ", err)
+	}
+
+	err = watcher.Add(epsfolder)
+	if err != nil {
+		log.Println("Adding of file watcher failed: ", err)
+	}
+}
--- a/apiGo/videoparser/VideoParser.go
+++ b/apiGo/videoparser/VideoParser.go
@ -6,7 +6,6 @@ import (
 	"openmediacenter/apiGo/config"
 	"openmediacenter/apiGo/database"
 	"os"
-	"path/filepath"
 	"strings"
 )

@ -33,22 +32,19 @@ func StartReindex() bool {
 		return false
 	}

+	filelist, err := ioutil.ReadDir(vidFolder)
+	if err != nil {
+		fmt.Println(err.Error())
+		return false
+	}
+
 	var files []string
-	err := filepath.Walk(vidFolder, func(path string, info os.FileInfo, err error) error {
-		if err != nil {
-			fmt.Println(err.Error())
-			return err
+	for _, file := range filelist {
+		if !file.IsDir() && strings.HasSuffix(file.Name(), ".mp4") {
+			files = append(files, file.Name())
+		}
 	}

-		if !info.IsDir() && strings.HasSuffix(info.Name(), ".mp4") {
-			files = append(files, info.Name())
-		}
-		return nil
-	})
-
-	if err != nil {
-		fmt.Println(err.Error())
-	}
 	// start reindex process
 	AppendMessage("Starting Reindexing!")
 	InitDeps(&mSettings)
--- a/package.json
+++ b/package.json
@ -8,17 +8,17 @@
    "url": "https://heili.eu"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-regular-svg-icons": "^5.15.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/react-fontawesome": "^0.1.13",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
    "bootstrap": "^5.0.2",
-    "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",
+    "plyr-react": "^5.1.0",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.5.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.4.0",
+    "react-router-dom": "^6.4.0",
    "typescript": "^4.3.5"
  },
  "scripts": {
@ -54,31 +54,31 @@
  },
  "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",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.0.3",
+    "@types/node": "^18.7.18",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-router": "5.1.19",
    "@types/react-router-dom": "^5.1.8",
-    "@typescript-eslint/eslint-plugin": "^4.28.5",
-    "@typescript-eslint/parser": "^4.28.5",
-    "apidoc": "^0.28.1",
+    "@typescript-eslint/eslint-plugin": "^5.38.0",
+    "@typescript-eslint/parser": "^5.38.0",
+    "apidoc": "^0.53.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
-    "eslint": "^7.31.0",
+    "eslint": "^8.23.1",
    "eslint-config-prettier": "^8.1.0",
-    "eslint-formatter-gitlab": "^2.2.0",
+    "eslint-formatter-gitlab": "^3.0.0",
    "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-jest": "^24.4.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-jest": "^27.0.4",
+    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
-    "jest-junit": "^12.0.0",
+    "jest-junit": "^14.0.1",
    "prettier": "^2.3.2",
    "prettier-config": "^1.0.0",
-    "react-scripts": "4.0.3"
+    "react-scripts": "5.0.1"
  },
  "apidoc": {
    "name": "OpenMediaCenter",
--- a/src/App.module.css
+++ b/src/App.module.css
@ -15,6 +15,10 @@
    text-decoration: none;
 }

+.navitem-active {
+    opacity: 0.85;
+}
+
 .navitem:hover {
    opacity: 1;
    text-decoration: none;
--- a/src/App.tsx
+++ b/src/App.tsx
@ -10,7 +10,7 @@ import style from './App.module.css';
 import SettingsPage from './pages/SettingsPage/SettingsPage';
 import CategoryPage from './pages/CategoryPage/CategoryPage';

-import {NavLink, Route, Switch, useRouteMatch} from 'react-router-dom';
+import {NavLink, Route, Routes} from 'react-router-dom';
 import Player from './pages/Player/Player';
 import ActorOverviewPage from './pages/ActorOverviewPage/ActorOverviewPage';
 import ActorPage from './pages/ActorPage/ActorPage';
@ -47,7 +47,7 @@ class App extends React.Component<{}, state> {

        return (
            <LoginContextProvider>
-                <Switch>
+                <Routes>
                    <Route path='/login'>
                        <AuthenticationPage />
                    </Route>
@ -55,13 +55,19 @@ class App extends React.Component<{}, state> {
                        {this.navBar()}
                        <MyRouter />
                    </Route>
-                </Switch>
+                </Routes>
            </LoginContextProvider>
        );
    }

    static contextType = FeatureContext;

+    activeTab(history, path) {
+        if (history.location.pathname === path) {
+            return { color: "red" };
+        }
+    };
+
    /**
     * render the top navigation bar
     */
@ -75,39 +81,34 @@ class App extends React.Component<{}, state> {
                    Home
                </NavLink>
                <NavLink
-                    className={[style.navitem, themeStyle.navitem].join(' ')}
                    to={'/media/random'}
-                    activeStyle={{opacity: '0.85'}}>
+                    className={({ isActive }) => [style.navitem, themeStyle.navitem, (isActive ? 'navitem-active' : '')].join(' ')}>
                    Random Video
                </NavLink>

                <NavLink
-                    className={[style.navitem, themeStyle.navitem].join(' ')}
-                    to={'/media/categories'}
-                    activeStyle={{opacity: '0.85'}}>
+                    className={({ isActive }) => [style.navitem, themeStyle.navitem, (isActive ? 'navitem-active' : '')].join(' ')}
+                    to={'/media/categories'}>
                    Categories
                </NavLink>

                <NavLink
-                    className={[style.navitem, themeStyle.navitem].join(' ')}
-                    to={'/media/actors'}
-                    activeStyle={{opacity: '0.85'}}>
+                    className={({ isActive }) => [style.navitem, themeStyle.navitem, (isActive ? 'navitem-active' : '')].join(' ')}
+                    to={'/media/actors'}>
                    Actors
                </NavLink>

                {this.context.TVShowEnabled ? (
                    <NavLink
-                        className={[style.navitem, themeStyle.navitem].join(' ')}
-                        to={'/media/tvshows'}
-                        activeStyle={{opacity: '0.85'}}>
+                        className={({ isActive }) => [style.navitem, themeStyle.navitem, (isActive ? 'navitem-active' : '')].join(' ')}
+                        to={'/media/tvshows'}>
                        TV Shows
                    </NavLink>
                ) : null}

                <NavLink
-                    className={[style.navitem, themeStyle.navitem].join(' ')}
-                    to={'/media/settings'}
-                    activeStyle={{opacity: '0.85'}}>
+                    className={({ isActive }) => [style.navitem, themeStyle.navitem, (isActive ? 'navitem-active' : '')].join(' ')}
+                    to={'/media/settings'}>
                    Settings
                </NavLink>
            </div>
--- a/src/elements/SideBar/SideBar.tsx
+++ b/src/elements/SideBar/SideBar.tsx
@ -1,8 +1,8 @@
-import React from 'react';
+import React, {PropsWithChildren} from 'react';
 import style from './SideBar.module.css';
 import GlobalInfos from '../../utils/GlobalInfos';

-interface SideBarProps {
+interface SideBarProps extends  PropsWithChildren{
    hiddenFrame?: boolean;
    width?: string;
 }
--- a/src/pages/HomePage/HomePage.test.js
+++ b/src/pages/HomePage/HomePage.test.js
@ -90,12 +90,14 @@ describe('<HomePage/>', function () {
        const wrapper = shallow(<HomePage/>);

        // expect those default values
-        expect(wrapper.state().sortby).toBe(0);
+        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);
+        wrapper.instance().onDropDownItemClick(SortBy.name, 'namesort');

-        expect(wrapper.state().sortby).toBe(SortBy.name);
+        expect(wrapper.state().sortby).toBe('namesort');
+        expect(wrapper.instance().sortState).toBe(SortBy.name);
    });
 });

--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@ -29,7 +29,7 @@ interface state {
    subtitle: string;
    data: VideoTypes.VideoUnloadedType[];
    selectionnr: number;
-    sortby: SortBy;
+    sortby: string;
 }

 /**
@ -39,33 +39,9 @@ export class HomePage extends React.Component<Props, state> {
    /** keyword variable needed temporary store search keyword */
    keyword = '';

-    /**
-     * get text label from sort type
-     * @param type SortBy type
-     */
-    getLabelFromSortType(type: SortBy): String {
-        switch (type) {
-            case SortBy.date:
-                return 'Date Added';
-            case SortBy.length:
-                return 'Length';
-            case SortBy.likes:
-                return 'Most likes';
-            case SortBy.name:
-                return 'Name';
-            case SortBy.random:
-                return 'Random';
-            default:
-                return '';
-        }
-    }
-
    constructor(props: Props) {
        super(props);

-        // get previously stored location from localstorage
-        const storedSelection = global.localStorage.getItem('sortby');
-
        this.state = {
            sideinfo: {
                VideoNr: 0,
@ -78,10 +54,11 @@ export class HomePage extends React.Component<Props, state> {
            subtitle: 'All Videos',
            data: [],
            selectionnr: 0,
-            sortby: storedSelection == null ? SortBy.date : parseInt(storedSelection, 10)
+            sortby: 'Date Added'
        };
    }

+    sortState = SortBy.date;
    tagState = DefaultTags.all;

    componentDidMount(): void {
@ -110,7 +87,7 @@ export class HomePage extends React.Component<Props, state> {
    fetchVideoData(): void {
        callAPI(
            APINode.Video,
-            {action: 'getMovies', Tag: this.tagState.TagId, Sort: this.state.sortby},
+            {action: 'getMovies', Tag: this.tagState.TagId, Sort: this.sortState},
            (result: {Videos: VideoTypes.VideoUnloadedType[]; TagName: string}) => {
                this.setState({
                    data: result.Videos,
@ -213,25 +190,15 @@ export class HomePage extends React.Component<Props, state> {
                    <span className={style.sortbyLabel}>Sort By: </span>
                    <div className={style.dropdown}>
                        <span className={style.dropbtn}>
-                            <span>{this.getLabelFromSortType(this.state.sortby)}</span>
+                            <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)}>
-                                {this.getLabelFromSortType(SortBy.date)}
-                            </span>
-                            <span onClick={(): void => this.onDropDownItemClick(SortBy.likes)}>
-                                {this.getLabelFromSortType(SortBy.likes)}
-                            </span>
-                            <span onClick={(): void => this.onDropDownItemClick(SortBy.random)}>
-                                {this.getLabelFromSortType(SortBy.random)}
-                            </span>
-                            <span onClick={(): void => this.onDropDownItemClick(SortBy.name)}>
-                                {this.getLabelFromSortType(SortBy.name)}
-                            </span>
-                            <span onClick={(): void => this.onDropDownItemClick(SortBy.length)}>
-                                {this.getLabelFromSortType(SortBy.length)}
-                            </span>
+                            <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>
@ -247,12 +214,10 @@ export class HomePage extends React.Component<Props, state> {
     * @param type type of sort action
     * @param name new header title
     */
-    onDropDownItemClick(type: SortBy): void {
-        this.setState({sortby: type}, (): void => {
-            global.localStorage.setItem('sortby', type.toString());
-
+    onDropDownItemClick(type: SortBy, name: string): void {
+        this.sortState = type;
+        this.setState({sortby: name});
        this.fetchVideoData();
-        });
    }
 }

--- a/src/pages/RandomPage/RandomPage.tsx
+++ b/src/pages/RandomPage/RandomPage.tsx
@ -2,16 +2,21 @@ import React from 'react';
 import style from './RandomPage.module.css';
 import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
 import Tag from '../../elements/Tag/Tag';
-import PageTitle from '../../elements/PageTitle/PageTitle';
+import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
 import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 import {APINode, callAPI} from '../../utils/Api';
 import {TagType} from '../../types/VideoTypes';
 import {VideoTypes} from '../../types/ApiTypes';
 import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
+import {IconButton} from '../../elements/GPElements/Button';
+import {faMinusCircle, faPlusCircle} from '@fortawesome/free-solid-svg-icons';
+import AddTagPopup from '../../elements/Popups/AddTagPopup/AddTagPopup';

 interface state {
    videos: VideoTypes.VideoUnloadedType[];
    tags: TagType[];
+    filterTags: TagType[];
+    addTagPopup: boolean;
 }

 interface GetRandomMoviesType {
@ -25,30 +30,19 @@ interface GetRandomMoviesType {
 class RandomPage extends React.Component<{}, state> {
    readonly LoadNR = 3;

-    // random seed to load videos, remains page reload.
-    seed = this.genRandInt();
-
    constructor(props: {}) {
        super(props);

-        // get previously stored location from localstorage
-        const storedseed = global.localStorage.getItem('randpageseed');
-        if (storedseed != null) {
-            this.seed = parseInt(storedseed, 10);
-        }
-
        this.state = {
+            addTagPopup: false,
            videos: [],
-            tags: []
+            tags: [],
+            filterTags: []
        };

        this.keypress = this.keypress.bind(this);
    }

-    genRandInt(): number {
-        return Math.floor(Math.random() * 2147483647) + 1;
-    }
-
    componentDidMount(): void {
        addKeyHandler(this.keypress);

@ -62,55 +56,76 @@ class RandomPage extends React.Component<{}, state> {
    render(): JSX.Element {
        return (
            <div>
-                <PageTitle title='Random Videos' subtitle='4pc' />
+                <PageTitle title='Random Videos' subtitle='3pc' />

                <SideBar>
                    <SideBarTitle>Visible Tags:</SideBarTitle>
                    {this.state.tags.map((m) => (
                        <Tag key={m.TagId} tagInfo={m} />
                    ))}
+                    <Line />
+                    <SideBarTitle>Filter Tags:</SideBarTitle>
+                    {this.state.filterTags.map((m) => (
+                        <Tag key={m.TagId} tagInfo={m} />
+                    ))}
+                    <IconButton
+                        title='Add'
+                        icon={faPlusCircle}
+                        onClick={(): void => {
+                            this.setState({addTagPopup: true});
+                        }}
+                    />
+                    {this.state.filterTags.length > 0 ? (
+                        <IconButton
+                            title='Remove All'
+                            icon={faMinusCircle}
+                            onClick={(): void => {
+                                this.setState({filterTags: []}, (): void => {
+                                    this.loadShuffledvideos(this.LoadNR);
+                                });
+                            }}
+                        />
+                    ) : (
+                        <></>
+                    )}
                </SideBar>

-                {this.state.videos.length !== 0 ? (
-                    <VideoContainer data={this.state.videos}>
+                {this.state.videos.length !== 0 ? <VideoContainer data={this.state.videos} /> : <div>No Data found!</div>}
                <div className={style.Shufflebutton}>
-                            <button onClick={(): void => this.shuffleclick()} className={style.btnshuffle}>
+                    <button onClick={(): void => this.loadShuffledvideos(this.LoadNR)} className={style.btnshuffle}>
                        Shuffle
                    </button>
                </div>
-                    </VideoContainer>
-                ) : (
-                    <div>No Data found!</div>
-                )}
+                {this.state.addTagPopup ? (
+                    <AddTagPopup
+                        onHide={(): void => this.setState({addTagPopup: false})}
+                        submit={(tagId: number, tagName: string): void => {
+                            this.setState({filterTags: [...this.state.filterTags, {TagId: tagId, TagName: tagName}]}, (): void => {
+                                this.loadShuffledvideos(this.LoadNR);
+                            });
+                        }}
+                    />
+                ) : null}
            </div>
        );
    }

-    /**
-     * click handler for shuffle btn
-     */
-    shuffleclick(): void {
-        this.genSeed();
-        this.loadShuffledvideos(this.LoadNR);
-    }
-
-    genSeed(): void {
-        this.seed = this.genRandInt();
-        global.localStorage.setItem('randpageseed', this.seed.toString());
-    }
-
    /**
     * load random videos from backend
     * @param nr number of videos to load
     */
    loadShuffledvideos(nr: number): void {
-        callAPI<GetRandomMoviesType>(APINode.Video, {action: 'getRandomMovies', Number: nr, Seed: this.seed}, (result) => {
+        callAPI<GetRandomMoviesType>(
+            APINode.Video,
+            {action: 'getRandomMovies', Number: nr, TagFilter: this.state.filterTags.map((t) => t.TagId)},
+            (result) => {
                this.setState({videos: []}); // needed to trigger rerender of main videoview
                this.setState({
                    videos: result.Videos,
                    tags: result.Tags
                });
-        });
+            }
+        );
    }

    /**
@ -120,8 +135,7 @@ class RandomPage extends React.Component<{}, state> {
    private keypress(event: KeyboardEvent): void {
        // bind s to shuffle
        if (event.key === 's') {
-            this.genSeed();
-            this.loadShuffledvideos(this.LoadNR);
+            this.loadShuffledvideos(3);
        }
    }
 }
--- a/src/pages/TVShowPage/TVPlayer.tsx
+++ b/src/pages/TVShowPage/TVPlayer.tsx
@ -94,7 +94,7 @@ export class TVPlayer extends React.Component<Props, State> {
    }

    private closebtn(): void {
-        this.props.history.goBack();
+        this.props.goBack();
    }
 }

--- a/src/pages/TVShowPage/TVShowPage.tsx
+++ b/src/pages/TVShowPage/TVShowPage.tsx
@ -3,10 +3,11 @@ import Preview from '../../elements/Preview/Preview';
 import {APINode, callAPI, callAPIPlain} from '../../utils/Api';
 import {TVShow} from '../../types/ApiTypes';
 import DynamicContentContainer from '../../elements/DynamicContentContainer/DynamicContentContainer';
-import {Route, Switch, useRouteMatch} from 'react-router-dom';
+import {Route, Routes, useMatch} from 'react-router-dom';
 import EpisodePage from './EpisodePage';
 import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
 import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
+import {useLocation} from "react-router";

 interface State {
    loading: boolean;
@ -55,7 +56,7 @@ export class TVShowPage extends React.Component<Props, State> {
                                        (result) => callback(result)
                                    );
                                }}
-                                linkPath={'/tvshows/' + elem.Id}
+                                linkPath={'/media/tvshows/' + elem.Id}
                            />
                        )}
                        data={this.state.loading ? [] : this.data}
@ -68,16 +69,16 @@ export class TVShowPage extends React.Component<Props, State> {
 }

 export default function (): JSX.Element {
-    let match = useRouteMatch();
+    const { pathname } = useLocation();

    return (
-        <Switch>
-            <Route exact path={`${match.path}/:id`}>
+        <Routes>
+            <Route path={`${pathname}/:id`}>
                <EpisodePage />
            </Route>
-            <Route path={match.path}>
+            <Route path={pathname}>
                <TVShowPage />
            </Route>
-        </Switch>
+        </Routes>
    );
 }
--- a/src/utils/Api.ts
+++ b/src/utils/Api.ts
@ -78,8 +78,8 @@ function generalAPICall<T>(
                // decode json or text
                const data = json ? await response.json() : await response.text();
                callback(data);
-            } catch (e) {
-                errorcallback(e);
+            } catch (e: any) {
+                errorcallback(e.toString());
            }
        } else if (response.status === 400) {
            // Bad Request --> invalid token
--- a/src/utils/context/FeatureContext.tsx
+++ b/src/utils/context/FeatureContext.tsx
@ -1,4 +1,4 @@
-import React, {FunctionComponent, useState} from 'react';
+import React, {FunctionComponent, PropsWithChildren, useState} from 'react';

 export interface FeatureContextType {
    setTVShowEnabled: (enabled: boolean) => void;
@ -17,7 +17,7 @@ export const FeatureContext = React.createContext<FeatureContextType>({
    VideosFullyDeleteable: false
 });

-export const FeatureContextProvider: FunctionComponent = (props): JSX.Element => {
+export const FeatureContextProvider: FunctionComponent<PropsWithChildren> = (props): JSX.Element => {
    const [tvshowenabled, settvshowenabled] = useState(false);
    const [fullydeletablevids, setfullydeleteable] = useState(false);

--- a/src/utils/context/LoginContextProvider.tsx
+++ b/src/utils/context/LoginContextProvider.tsx
@ -1,13 +1,13 @@
 import {LoginContext, LoginPerm, LoginState} from './LoginContext';
-import React, {FunctionComponent, useContext, useEffect, useState} from 'react';
-import {useHistory, useLocation} from 'react-router';
+import React, {FunctionComponent, PropsWithChildren, useContext, useEffect, useState} from 'react';
+import {useLocation, useNavigate} from 'react-router';
 import {cookie} from './Cookie';
 import {APINode, callAPI} from '../Api';
 import {SettingsTypes} from '../../types/ApiTypes';
 import GlobalInfos from '../GlobalInfos';
 import {FeatureContext} from './FeatureContext';

-export const LoginContextProvider: FunctionComponent = (props): JSX.Element => {
+export const LoginContextProvider: FunctionComponent<PropsWithChildren> = (props): JSX.Element => {
    let initialLoginState = LoginState.LoggedIn;
    let initialUserPerm = LoginPerm.User;

@ -50,7 +50,7 @@ export const LoginContextProvider: FunctionComponent = (props): JSX.Element => {
        );
    }, [features, loginState]);

-    const hist = useHistory();
+    const navigate = useNavigate();
    const loc = useLocation();

    // trigger redirect on loginstate change
@ -59,14 +59,14 @@ export const LoginContextProvider: FunctionComponent = (props): JSX.Element => {
            // if we arent already in dashboard tree we want to redirect to default dashboard page
            console.log('redirecting to dashboard' + loc.pathname);
            if (!loc.pathname.startsWith('/media')) {
-                hist.replace('/media');
+                navigate('/media');
            }
        } else {
            if (!loc.pathname.startsWith('/login')) {
-                hist.replace('/login');
+                navigate('/login');
            }
        }
-    }, [hist, loc.pathname, loginState]);
+    }, [navigate, loc.pathname, loginState]);

    const value = {
        logout: (): void => {
@ -86,7 +86,7 @@ export const LoginContextProvider: FunctionComponent = (props): JSX.Element => {
    return <LoginContext.Provider value={value}>{props.children}</LoginContext.Provider>;
 };

-interface Props {
+interface Props extends PropsWithChildren{
    perm: LoginPerm;
 }

--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
lukas-heiligenbrunner	6e0928a97a	add housekeeping code to delete duplicated tags and videos	2022-09-20 00:32:38 +02:00
lukas-heiligenbrunner	05ea72a8ca	fix ip of testserver	2022-06-25 14:37:51 +02:00
lukas-heiligenbrunner	7476e2397d	add a filewatcher to automatically reindex if new file is added	2022-06-25 14:02:25 +02:00
lukas-heiligenbrunner	929e0c337d	fix invalid links if videos are in subfolders	2022-05-22 20:48:04 +02:00
lukas-heiligenbrunner	f7a0d8fa07	add housekeeping code to delete duplicated tags and videos	2022-05-05 21:32:35 +02:00
lukas-heiligenbrunner	9faf457c89	add tag delete button if filtertag selected	2022-05-05 19:43:29 +02:00
lukas-heiligenbrunner	11c1e25de5	update browserlist	2022-05-05 18:42:48 +02:00
Lukas Heiligenbrunner	3d845aaf04	Merge branch 'randompage_filter_tags' into 'master' make tags on random page filterable See merge request lukas/openmediacenter!61	2022-05-05 16:41:46 +00:00
lukas-heiligenbrunner	7f98528fbe	use seperate jobs for manual and auto runs	2022-05-05 18:06:41 +02:00
lukas-heiligenbrunner	191fa5386d	fix detached pipeline	2022-05-05 18:02:32 +02:00
lukas-heiligenbrunner	9715012685	make tags on random page filterable	2022-05-05 17:46:59 +02:00