lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

make tags on random page filterable

Browse Source
This commit is contained in:
lukas-heiligenbrunner 2022-05-05 17:46:59 +02:00
parent 43091ff7ed
commit 9715012685
2 changed files with 90 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apiGo/api/Video.go
View File

@ -1,6 +1,7 @@
package api
import (
"encoding/json"
"fmt"
"net/url"
"openmediacenter/apiGo/api/api"
@ -9,6 +10,7 @@ import (
"openmediacenter/apiGo/database"
"os"
"strconv"
"strings"
)
func addVideoHandlers() {
@ -163,6 +165,7 @@ func getVideoHandlers() {
api.AddHandler("getRandomMovies", api.VideoNode, api.PermUser, func(context api.Context) {
var args struct {
Number int
TagFilter []uint32
}
if api.DecodeRequest(context.GetRequest(), &args) != nil {
context.Text("unable to decode request")
@ -174,9 +177,23 @@ func getVideoHandlers() {
Videos []types.VideoUnloadedType
}
query := fmt.Sprintf("SELECT movie_id,movie_name FROM videos ORDER BY RAND() LIMIT %d", 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)
@ -193,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)
@ -203,6 +220,10 @@ func getVideoHandlers() {
// append to final array
result.Tags = append(result.Tags, tag)
}
}
} else {
result.Tags = []types.Tag{}
}
context.Json(result)
})

57
src/pages/RandomPage/RandomPage.tsx
View File

@ -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 {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 {
@ -29,8 +34,10 @@ class RandomPage extends React.Component<{}, state> {
super(props);
this.state = {
addTagPopup: false,
videos: [],
tags: []
tags: [],
filterTags: []
};
this.keypress = this.keypress.bind(this);
@ -56,42 +63,56 @@ class RandomPage extends React.Component<{}, state> {
{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});
}}
/>
</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.loadShuffledvideos(this.LoadNR);
}
/**
* load random videos from backend
* @param nr number of videos to load
*/
loadShuffledvideos(nr: number): void {
callAPI<GetRandomMoviesType>(APINode.Video, {action: 'getRandomMovies', Number: nr}, (result) => {
callAPI<GetRandomMoviesType>(
APINode.Video,
{action: 'getRandomMovies', Number: nr, 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
});
});
}
);
}
/**