added Random page for random videos

This commit is contained in:
Lukas Heiligenbrunner 2020-06-01 20:46:28 +02:00
parent 8456a4aec4
commit 060348be9e
7 changed files with 105 additions and 11 deletions

View File

@ -1,6 +1,7 @@
import React from 'react';
import MainBody from "./MainBody";
// include bootstraps css
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends React.Component {
@ -17,7 +18,7 @@ class App extends React.Component {
return (
<div className="App">
<nav className="navbar navbar-expand-sm bg-primary navbar-dark">
<a className="navbar-brand" href="!#">Lukis Tube</a>
<a className="navbar-brand" href="# ">Lukis Tube</a>
<ul className="navbar-nav">
<li className="nav-item">

View File

@ -1,4 +1,4 @@
import React from "react";
import React, {useState} from "react";
import Preview from "./Preview";
import "./css/HomePage.css"
@ -12,7 +12,13 @@ class HomePage extends React.Component {
super(props, context);
this.state = {
loadeditems: []
loadeditems: [],
sideinfo: {
videonr: null,
hdvideonr: null,
sdvideonr: null,
categorynr: null
}
};
}
@ -24,11 +30,16 @@ class HomePage extends React.Component {
// fetch all videos available
fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((response) => response.json()
.then((result) => {
this.data = result;
this.loadPreviewBlock(12);
}))
.catch(() => {
console.log("no connection to backend");
});
}
componentWillUnmount() {
@ -41,7 +52,11 @@ class HomePage extends React.Component {
<div>
<div><h1>Home page</h1></div>
<div className='sideinfo'>
beep beep
Infos:
<div>Total Number of Videos: {this.state.sideinfo.videonr}</div>
<div>HD Videos: {this.state.sideinfo.hdvideonr}</div>
<div>SD Videos: {this.state.sideinfo.sdvideonr}</div>
<div>Total Number of Categories: {this.state.sideinfo.categorynr}</div>
</div>
<div className='maincontent'>
{this.state.loadeditems.map(elem => (

View File

@ -1,5 +1,6 @@
import React from "react";
import HomePage from "./HomePage";
import RandomPage from "./RandomPage";
class MainBody extends React.Component {
constructor(props) {
@ -11,7 +12,9 @@ class MainBody extends React.Component {
let page;
if (this.props.page === "default") {
page = <HomePage viewbinding={this.props.viewbinding}/>;
} else if (this.props.page === "video") {
} else if (this.props.page === "random"){
page = <RandomPage viewbinding={this.props.viewbinding}/>;
}else if (this.props.page === "video") {
// show videoelement if neccessary
page = this.props.videoelement;
} else {

View File

@ -121,6 +121,8 @@ class Player extends React.Component {
}
closebtn() {
// todo go back to correct page here!
// have a catch to <Route>
this.props.viewbinding.hideVideo();
}
}

View File

@ -43,7 +43,7 @@ class Preview extends React.Component {
<div className='previewpic'>
<img className='previewimage'
src={this.state.previewpicture}
alt='no thumbnail found'/>
alt='Pic loading.'/>
</div>
</div>
);
@ -52,7 +52,9 @@ class Preview extends React.Component {
itemClick() {
console.log("item clicked!" + this.state.name);
this.props.viewbinding.showVideo(<Player viewbinding={this.props.viewbinding} movie_id={this.props.movie_id}/>);
this.props.viewbinding.showVideo(<Player
viewbinding={this.props.viewbinding}
movie_id={this.props.movie_id}/>);
}
}

67
src/RandomPage.js Normal file
View File

@ -0,0 +1,67 @@
import React from "react";
import Preview from "./Preview";
import "./css/RandomPage.css"
class RandomPage extends React.Component {
constructor(props: P, context: any) {
super(props, context);
this.state = {
videos: []
};
}
componentDidMount() {
this.loadShuffledvideos(6);
}
render() {
return (<div>
<div><h1>Random Videos</h1></div>
<div className='sideinfo'>
todo here.
</div>
<div className='maincontent'>
{this.state.videos.map(elem => (
<Preview
key={elem.movie_id}
name={elem.movie_name}
movie_id={elem.movie_id}
viewbinding={this.props.viewbinding}/>
))}
</div>
<div className='rightinfo'>
right
</div>
<div className='Shufflebutton'>
<button onClick={() => {
this.shuffleclick()
}} className='btn btn-success'>Shuffle
</button>
</div>
</div>);
}
shuffleclick() {
this.loadShuffledvideos(6);
}
loadShuffledvideos(nr) {
const updateRequest = new FormData();
updateRequest.append('action', 'getRandomMovies');
updateRequest.append('number', nr);
// fetch all videos available
fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.setState({videos: result});
}))
.catch(() => {
console.log("no connection to backend");
});
}
}
export default RandomPage;

4
src/css/RandomPage.css Normal file
View File

@ -0,0 +1,4 @@
.Shufflebutton{
width: 100%;
align-content: center;
}