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

JSX component for api requests

Browse Source
This commit is contained in:
lukas 2021-08-01 22:56:24 +02:00
parent 032b90a93d
commit 546f9c34d2
4 changed files with 237 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/elements/APIComponent.tsx Normal file
View File

@ -0,0 +1,48 @@
import React from 'react';
import {APINode, callAPI} from '../utils/Api';
interface Props<T> {
onLoad?: JSX.Element;
render: (data: T, actions: {refresh: () => void}) => JSX.Element;
node: APINode;
action: string;
params?: {[_: string]: string | number | boolean | object};
}
interface State {
loaded: boolean;
}
export default class APIComponent<T> extends React.Component<Props<T>, State> {
state = {
loaded: false
};
data: T | undefined;
render(): JSX.Element {
if (this.state.loaded && this.data !== undefined) {
return this.props.render(this.data, {refresh: () => this.loadData()});
} else {
return this.props.onLoad ? this.props.onLoad : <></>;
}
}
componentDidMount(): void {
this.loadData();
}
componentDidUpdate(prevProps: Readonly<Props<T>>): void {
if (prevProps.params !== this.props.params) {
this.loadData();
}
}
private loadData(): void {
this.setState({loaded: false});
callAPI(this.props.node, {action: this.props.action, ...this.props.params}, (result: T) => {
this.data = result;
this.setState({loaded: true});
});
}
}

32
src/elements/KeyComponent.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
interface Props {
listenKey: string;
onKey: () => void;
}
export default class KeyComponent extends React.Component<Props> {
constructor(props: Props) {
super(props);
this.handler = this.handler.bind(this);
}
render(): JSX.Element {
return <>{this.props.children}</>;
}
componentDidMount(): void {
document.addEventListener('keyup', this.handler);
}
componentWillUnmount(): void {
document.removeEventListener('keyup', this.handler);
}
private handler(e: KeyboardEvent): void {
if (e.key === this.props.listenKey) {
this.props.onKey();
}
}
}

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

@ -5,7 +5,7 @@ import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import style from './HomePage.module.css';
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
import {APINode, callAPI} from '../../utils/Api';
import {APINode} from '../../utils/Api';
import {Route, Switch, withRouter} from 'react-router-dom';
import {RouteComponentProps} from 'react-router';
import SearchHandling from './SearchHandling';
@ -13,6 +13,8 @@ import {VideoTypes} from '../../types/ApiTypes';
import {DefaultTags} from '../../types/GeneralTypes';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faSortDown} from '@fortawesome/free-solid-svg-icons';
import APIComponent from '../../elements/APIComponent';
import {TagType} from '../../types/VideoTypes';
// eslint-disable-next-line no-shadow
export enum SortBy {
@ -26,11 +28,10 @@ export enum SortBy {
interface Props extends RouteComponentProps {}
interface state {
sideinfo: VideoTypes.startDataType;
subtitle: string;
data: VideoTypes.VideoUnloadedType[];
selectionnr: number;
sortby: string;
sortState: SortBy;
tagState: TagType;
}
/**
@ -40,71 +41,24 @@ export class HomePage extends React.Component<Props, state> {
/** keyword variable needed temporary store search keyword */
keyword = '';
constructor(props: Props) {
super(props);
this.state = {
sideinfo: {
VideoNr: 0,
FullHdNr: 0,
HDNr: 0,
SDNr: 0,
DifferentTags: 0,
Tagged: 0
},
state = {
subtitle: 'All Videos',
data: [],
selectionnr: 0,
sortby: 'Date Added'
sortby: 'Date Added',
sortState: SortBy.date,
tagState: DefaultTags.all
};
}
sortState = SortBy.date;
tagState = DefaultTags.all;
componentDidMount(): void {
// initial get of all videos
this.fetchVideoData();
this.fetchStartData();
}
/**
* fetch available videos for specified tag
* this function clears all preview elements an reloads gravity with tag
*
* @param tag tag to fetch videos
*/
fetchVideoData(): void {
callAPI(
APINode.Video,
{action: 'getMovies', Tag: this.tagState.TagId, Sort: this.sortState},
(result: {Videos: VideoTypes.VideoUnloadedType[]; TagName: string}) => {
this.setState({
data: result.Videos,
selectionnr: result.Videos.length
});
}
);
}
/**
* fetch the necessary data for left info box
*/
fetchStartData(): void {
callAPI(APINode.Video, {action: 'getStartData'}, (result: VideoTypes.startDataType) => {
this.setState({sideinfo: result});
});
}
render(): JSX.Element {
return (
<>
<Switch>
<Route path='/search/:name'>
<SearchHandling />
</Route>
<Route path='/'>
<PageTitle title='Home Page' subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
<APIComponent
render={(data: {Videos: VideoTypes.VideoUnloadedType[]; TagName: string}): JSX.Element => (
<>
<PageTitle title='Home Page' subtitle={this.state.subtitle + ' - ' + data.Videos.length}>
<form
className={'form-inline ' + style.searchform}
onSubmit={(e): void => {
@ -126,57 +80,60 @@ export class HomePage extends React.Component<Props, state> {
</form>
</PageTitle>
<SideBar>
<APIComponent
render={(sidebardata: VideoTypes.startDataType): JSX.Element => (
<>
<SideBarTitle>Infos:</SideBarTitle>
<Line />
<SideBarItem>
<b>{this.state.sideinfo.VideoNr}</b> Videos Total!
<b>{sidebardata.VideoNr}</b> Videos Total!
</SideBarItem>
<SideBarItem>
<b>{this.state.sideinfo.FullHdNr}</b> FULL-HD Videos!
<b>{sidebardata.FullHdNr}</b> FULL-HD Videos!
</SideBarItem>
<SideBarItem>
<b>{this.state.sideinfo.HDNr}</b> HD Videos!
<b>{sidebardata.HDNr}</b> HD Videos!
</SideBarItem>
<SideBarItem>
<b>{this.state.sideinfo.SDNr}</b> SD Videos!
<b>{sidebardata.SDNr}</b> SD Videos!
</SideBarItem>
<SideBarItem>
<b>{this.state.sideinfo.DifferentTags}</b> different Tags!
<b>{sidebardata.DifferentTags}</b> different Tags!
</SideBarItem>
<Line />
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag
tagInfo={{TagName: 'All', TagId: DefaultTags.all.TagId}}
onclick={(): void => {
this.tagState = DefaultTags.all;
this.fetchVideoData();
this.setState({subtitle: 'All Videos'});
this.setState({tagState: DefaultTags.all, subtitle: 'All Videos'});
}}
/>
<Tag
tagInfo={{TagName: 'Full Hd', TagId: DefaultTags.fullhd.TagId}}
onclick={(): void => {
this.tagState = DefaultTags.fullhd;
this.fetchVideoData();
this.setState({subtitle: 'Full Hd Videos'});
this.setState({tagState: DefaultTags.fullhd, subtitle: 'Full Hd Videos'});
}}
/>
<Tag
tagInfo={{TagName: 'Low Quality', TagId: DefaultTags.lowq.TagId}}
onclick={(): void => {
this.tagState = DefaultTags.lowq;
this.fetchVideoData();
this.setState({subtitle: 'Low Quality Videos'});
this.setState({
tagState: DefaultTags.lowq,
subtitle: 'Low Quality Videos'
});
}}
/>
<Tag
tagInfo={{TagName: 'HD', TagId: DefaultTags.hd.TagId}}
onclick={(): void => {
this.tagState = DefaultTags.hd;
this.fetchVideoData();
this.setState({subtitle: 'HD Videos'});
this.setState({tagState: DefaultTags.hd, subtitle: 'HD Videos'});
}}
/>
</>
)}
node={APINode.Video}
action='getStartData'
/>
</SideBar>
<div>
<span className={style.sortbyLabel}>Sort By: </span>
@ -186,20 +143,28 @@ export class HomePage extends React.Component<Props, state> {
<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.date, 'Date Added')}>
Date Added
</span>
<span onClick={(): void => this.onDropDownItemClick(SortBy.likes, 'Most likes')}>
Most likes
</span>
<span onClick={(): void => this.onDropDownItemClick(SortBy.random, 'Random')}>Random</span>
<span onClick={(): void => this.onDropDownItemClick(SortBy.name, 'Name')}>Name</span>
<span onClick={(): void => this.onDropDownItemClick(SortBy.length, 'Length')}>Length</span>
</div>
</div>
</div>
<VideoContainer data={this.state.data} />
<VideoContainer data={data.Videos} />
<div className={style.rightinfo} />
</>
)}
node={APINode.Video}
action='getMovies'
params={{Tag: this.state.tagState.TagId, Sort: this.state.sortState}}
/>
</Route>
</Switch>
</>
);
}
@ -209,9 +174,7 @@ export class HomePage extends React.Component<Props, state> {
* @param name new header title
*/
onDropDownItemClick(type: SortBy, name: string): void {
this.sortState = type;
this.setState({sortby: name});
this.fetchVideoData();
this.setState({sortby: name, sortState: type});
}
}

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

@ -4,15 +4,11 @@ import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
import Tag from '../../elements/Tag/Tag';
import PageTitle from '../../elements/PageTitle/PageTitle';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
import {APINode, callAPI} from '../../utils/Api';
import {APINode} from '../../utils/Api';
import {TagType} from '../../types/VideoTypes';
import {VideoTypes} from '../../types/ApiTypes';
import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
interface state {
videos: VideoTypes.VideoUnloadedType[];
tags: TagType[];
}
import APIComponent from '../../elements/APIComponent';
import KeyComponent from '../../elements/KeyComponent';
interface GetRandomMoviesType {
Videos: VideoTypes.VideoUnloadedType[];
@ -22,46 +18,27 @@ interface GetRandomMoviesType {
/**
* Randompage shuffles random viedeopreviews and provides a shuffle btn
*/
class RandomPage extends React.Component<{}, state> {
class RandomPage extends React.Component {
readonly LoadNR = 3;
constructor(props: {}) {
super(props);
this.state = {
videos: [],
tags: []
};
this.keypress = this.keypress.bind(this);
}
componentDidMount(): void {
addKeyHandler(this.keypress);
this.loadShuffledvideos(this.LoadNR);
}
componentWillUnmount(): void {
removeKeyHandler(this.keypress);
}
render(): JSX.Element {
return (
<div>
<PageTitle title='Random Videos' subtitle='4pc' />
<PageTitle title='Random Videos' subtitle={this.LoadNR + 'pcs'} />
<APIComponent
render={(data: GetRandomMoviesType, actions): JSX.Element => (
<KeyComponent listenKey='s' onKey={actions.refresh}>
<SideBar>
<SideBarTitle>Visible Tags:</SideBarTitle>
{this.state.tags.map((m) => (
{data.Tags.map((m) => (
<Tag key={m.TagId} tagInfo={m} />
))}
</SideBar>
{this.state.videos.length !== 0 ? (
<VideoContainer data={this.state.videos}>
{data.Videos.length !== 0 ? (
<VideoContainer data={data.Videos}>
<div className={style.Shufflebutton}>
<button onClick={(): void => this.shuffleclick()} className={style.btnshuffle}>
<button onClick={actions.refresh} className={style.btnshuffle}>
Shuffle
</button>
</div>
@ -69,41 +46,15 @@ class RandomPage extends React.Component<{}, state> {
) : (
<div>No Data found!</div>
)}
</KeyComponent>
)}
node={APINode.Video}
action='getRandomMovies'
params={{Number: this.LoadNR}}
/>
</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) => {
this.setState({videos: []}); // needed to trigger rerender of main videoview
this.setState({
videos: result.Videos,
tags: result.Tags
});
});
}
/**
* key event handling
* @param event keyevent
*/
private keypress(event: KeyboardEvent): void {
// bind s to shuffle
if (event.key === 's') {
this.loadShuffledvideos(4);
}
}
}
export default RandomPage;