90 lines
2.7 KiB
JavaScript
90 lines
2.7 KiB
JavaScript
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";
|
|
|
|
/**
|
|
* Randompage shuffles random viedeopreviews and provides a shuffle btn
|
|
*/
|
|
class RandomPage extends React.Component {
|
|
constructor(props, context) {
|
|
super(props, context);
|
|
|
|
this.state = {
|
|
videos: [],
|
|
tags: []
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.loadShuffledvideos(4);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<PageTitle title='Random Videos'
|
|
subtitle='4pc'/>
|
|
|
|
<SideBar>
|
|
<SideBarTitle>Visible Tags:</SideBarTitle>
|
|
{this.state.tags.map((m) => (
|
|
<Tag
|
|
key={m.tag_name}
|
|
viewbinding={this.props.viewbinding}>{m.tag_name}</Tag>
|
|
))}
|
|
</SideBar>
|
|
|
|
{this.state.videos.length !== 0 ?
|
|
<VideoContainer
|
|
data={this.state.videos}
|
|
viewbinding={this.props.viewbinding}>
|
|
<div className={style.Shufflebutton}>
|
|
<button onClick={() => this.shuffleclick()} className={style.btnshuffle}>Shuffle</button>
|
|
</div>
|
|
</VideoContainer>
|
|
:
|
|
<div>No Data found!</div>}
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* click handler for shuffle btn
|
|
*/
|
|
shuffleclick() {
|
|
this.loadShuffledvideos(4);
|
|
}
|
|
|
|
/**
|
|
* load random videos from backend
|
|
* @param nr number of videos to load
|
|
*/
|
|
loadShuffledvideos(nr) {
|
|
const updateRequest = new FormData();
|
|
updateRequest.append('action', 'getRandomMovies');
|
|
updateRequest.append('number', nr);
|
|
|
|
// fetch all videos available
|
|
fetch('/api/video.php', {method: 'POST', body: updateRequest})
|
|
.then((response) => response.json()
|
|
.then((result) => {
|
|
console.log(result);
|
|
|
|
this.setState({videos: []}); // needed to trigger rerender of main videoview
|
|
this.setState({
|
|
videos: result.rows,
|
|
tags: result.tags
|
|
});
|
|
}))
|
|
.catch(() => {
|
|
console.log("no connection to backend");
|
|
});
|
|
}
|
|
}
|
|
|
|
export default RandomPage;
|