import React from "react"; import Preview from "../elements/Preview"; import SideBar from "../elements/SideBar"; import Tag from "../elements/Tag"; import "../css/HomePage.css" import "../css/DefaultPage.css" class HomePage extends React.Component { // stores all available movies data = null; // stores current index of loaded elements loadindex = 0; constructor(props, context) { super(props, context); this.state = { loadeditems: [], sideinfo: { videonr: null, fullhdvideonr: null, hdvideonr: null, sdvideonr: null, tagnr: null }, tag: "All", selectionnr: null }; } componentDidMount() { document.addEventListener('scroll', this.trackScrolling); // initial get of all videos this.fetchVideoData("all"); 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(tag) { const updateRequest = new FormData(); updateRequest.append('action', 'getMovies'); updateRequest.append('tag', tag); // fetch all videos available fetch('/api/videoload.php', {method: 'POST', body: updateRequest}) .then((response) => response.json() .then((result) => { this.data = result; this.setState({ loadeditems: [], selectionnr: this.data.length }); this.loadindex = 0; this.loadPreviewBlock(16); })) .catch(() => { console.log("no connection to backend"); }); } /** * fetch the necessary data for left info box */ fetchStartData() { const updateRequest = new FormData(); updateRequest.append('action', 'getStartData'); // fetch all videos available fetch('/api/videoload.php', {method: 'POST', body: updateRequest}) .then((response) => response.json() .then((result) => { this.setState({ sideinfo: { videonr: result['total'], fullhdvideonr: result['fullhd'], hdvideonr: result['hd'], sdvideonr: result['sd'], tagnr: result['tags'] } }); })) .catch(() => { console.log("no connection to backend"); }); } componentWillUnmount() { this.setState({}); document.removeEventListener('scroll', this.trackScrolling); } render() { return (