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

add new sortby button and allow sorting on homepage

Browse Source
This commit is contained in:
Lukas Heiligenbrunner
2021-06-13 22:29:50 +02:00
parent d94b672a12
commit 8d50ec54e7
4 changed files with 162 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/pages/HomePage/HomePage.tsx
View File

@@ -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
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,14 +73,11 @@ export class HomePage extends React.Component<Props, state> {
*
* @param tag tag to fetch videos
*/
fetchVideoData(tag: number): void {
fetchVideoData(): void {
callAPI(
APINode.Video,
{action: 'getMovies', Tag: tag},
{action: 'getMovies', Tag: this.tagState.TagId, Sort: this.sortState},
(result: {Videos: VideoTypes.VideoUnloadedType[]; TagName: string}) => {
this.setState({
data: []
});
this.setState({
data: result.Videos,
selectionnr: result.Videos.length
@@ -135,32 +147,80 @@ 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 style={{color: 'grey', marginRight: 5}}>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.sortState = SortBy.date;
this.setState({sortby: 'Date Added '});
this.fetchVideoData();
}}>
Date Added
</span>
<span
onClick={(): void => {
this.sortState = SortBy.likes;
this.setState({sortby: 'Most likes'});
this.fetchVideoData();
}}>
Most likes
</span>
<span
onClick={(): void => {
this.sortState = SortBy.random;
this.setState({sortby: 'Random'});
this.fetchVideoData();
}}>
Random
</span>
<span
onClick={(): void => {
this.sortState = SortBy.name;
this.setState({sortby: 'Name'});
this.fetchVideoData();
}}>
Name
</span>
</div>
</div>
</div>
<VideoContainer data={this.state.data} />
<div className={style.rightinfo} />
</Route>