2020-10-25 18:48:23 +00:00
|
|
|
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 VideoContainer from '../../elements/VideoContainer/VideoContainer';
|
2020-12-17 20:53:22 +00:00
|
|
|
import {callAPI} from '../../utils/Api';
|
2020-12-29 19:39:30 +00:00
|
|
|
import {TagType, VideoUnloadedType} from '../../api/VideoTypes';
|
|
|
|
|
|
|
|
interface state {
|
|
|
|
videos: VideoUnloadedType[];
|
|
|
|
tags: TagType[];
|
|
|
|
}
|
|
|
|
|
|
|
|
interface GetRandomMoviesType {
|
|
|
|
rows: VideoUnloadedType[];
|
|
|
|
tags: TagType[];
|
|
|
|
}
|
2020-06-01 20:46:28 +02:00
|
|
|
|
2020-08-12 17:50:25 +00:00
|
|
|
/**
|
|
|
|
* Randompage shuffles random viedeopreviews and provides a shuffle btn
|
|
|
|
*/
|
2020-12-29 19:39:30 +00:00
|
|
|
class RandomPage extends React.Component<{}, state> {
|
|
|
|
constructor(props: {}) {
|
|
|
|
super(props);
|
2020-06-01 20:46:28 +02:00
|
|
|
|
|
|
|
this.state = {
|
2020-06-03 12:26:10 +02:00
|
|
|
videos: [],
|
|
|
|
tags: []
|
2020-06-01 20:46:28 +02:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2020-12-29 19:39:30 +00:00
|
|
|
componentDidMount(): void {
|
2020-06-04 00:15:06 +02:00
|
|
|
this.loadShuffledvideos(4);
|
2020-06-01 20:46:28 +02:00
|
|
|
}
|
|
|
|
|
2020-12-29 19:39:30 +00:00
|
|
|
render(): JSX.Element {
|
2020-06-02 22:52:28 +02:00
|
|
|
return (
|
|
|
|
<div>
|
2020-10-19 21:12:07 +00:00
|
|
|
<PageTitle title='Random Videos'
|
|
|
|
subtitle='4pc'/>
|
2020-06-19 00:16:18 +02:00
|
|
|
|
2020-06-02 22:52:28 +02:00
|
|
|
<SideBar>
|
2020-07-08 00:14:08 +02:00
|
|
|
<SideBarTitle>Visible Tags:</SideBarTitle>
|
2020-06-03 12:26:10 +02:00
|
|
|
{this.state.tags.map((m) => (
|
2020-12-29 19:39:30 +00:00
|
|
|
<Tag key={m.tag_id} tagInfo={m}/>
|
2020-06-03 12:26:10 +02:00
|
|
|
))}
|
2020-06-02 22:52:28 +02:00
|
|
|
</SideBar>
|
2020-06-01 20:46:28 +02:00
|
|
|
|
2020-07-22 19:00:55 +02:00
|
|
|
{this.state.videos.length !== 0 ?
|
|
|
|
<VideoContainer
|
2020-12-11 18:23:13 +00:00
|
|
|
data={this.state.videos}>
|
2020-07-22 19:00:55 +02:00
|
|
|
<div className={style.Shufflebutton}>
|
2020-12-29 19:39:30 +00:00
|
|
|
<button onClick={(): void => this.shuffleclick()} className={style.btnshuffle}>Shuffle</button>
|
2020-07-22 19:00:55 +02:00
|
|
|
</div>
|
|
|
|
</VideoContainer>
|
|
|
|
:
|
|
|
|
<div>No Data found!</div>}
|
|
|
|
|
2020-06-02 22:52:28 +02:00
|
|
|
</div>
|
|
|
|
);
|
2020-06-01 20:46:28 +02:00
|
|
|
}
|
|
|
|
|
2020-08-12 17:50:25 +00:00
|
|
|
/**
|
|
|
|
* click handler for shuffle btn
|
|
|
|
*/
|
2020-12-29 19:39:30 +00:00
|
|
|
shuffleclick(): void {
|
2020-06-04 00:15:06 +02:00
|
|
|
this.loadShuffledvideos(4);
|
2020-06-01 20:46:28 +02:00
|
|
|
}
|
|
|
|
|
2020-08-12 17:50:25 +00:00
|
|
|
/**
|
|
|
|
* load random videos from backend
|
|
|
|
* @param nr number of videos to load
|
|
|
|
*/
|
2020-12-29 19:39:30 +00:00
|
|
|
loadShuffledvideos(nr: number): void {
|
|
|
|
callAPI<GetRandomMoviesType>('video.php', {action: 'getRandomMovies', number: nr}, result => {
|
2020-12-17 20:53:22 +00:00
|
|
|
console.log(result);
|
2020-06-01 20:46:28 +02:00
|
|
|
|
2020-12-17 20:53:22 +00:00
|
|
|
this.setState({videos: []}); // needed to trigger rerender of main videoview
|
|
|
|
this.setState({
|
|
|
|
videos: result.rows,
|
|
|
|
tags: result.tags
|
2020-06-01 20:46:28 +02:00
|
|
|
});
|
2020-12-17 20:53:22 +00:00
|
|
|
});
|
2020-06-01 20:46:28 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-01 21:36:55 +02:00
|
|
|
export default RandomPage;
|