added lots of css to style site.

removed mainbody class and did switching stuff in app.js
This commit is contained in:
lukas 2020-06-02 22:52:28 +02:00
parent 5f8c491674
commit 53d393fba7
16 changed files with 421 additions and 288 deletions

View File

@ -38,13 +38,14 @@ if (isset($_POST['action'])) {
echo(json_encode($rows)); echo(json_encode($rows));
break; break;
case "loadVideo": case "loadVideo":
$query = "SELECT movie_url,thumbnail,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'"; $query = "SELECT movie_name,movie_url,thumbnail,likes,quality,length FROM videos WHERE movie_id='" . $_POST['movieid'] . "'";
$result = $conn->query($query); $result = $conn->query($query);
$row = $result->fetch_assoc(); $row = $result->fetch_assoc();
$arr = array(); $arr = array();
$arr["thumbnail"] = $row["thumbnail"]; $arr["thumbnail"] = $row["thumbnail"];
$arr["movie_name"] = $row["movie_name"];
$arr["movie_url"] = $row["movie_url"]; $arr["movie_url"] = $row["movie_url"];
$arr["likes"] = $row["likes"]; $arr["likes"] = $row["likes"];
$arr["quality"] = $row["quality"]; $arr["quality"] = $row["quality"];
@ -75,7 +76,6 @@ if (isset($_POST['action'])) {
echo($row["thumbnail"]); echo($row["thumbnail"]);
break; break;
case "getTags": case "getTags":
$movieid = $_POST['movieid']; $movieid = $_POST['movieid'];
@ -104,6 +104,52 @@ if (isset($_POST['action'])) {
echo('{"result":"' . $conn->error . '"}'); echo('{"result":"' . $conn->error . '"}');
} }
break; break;
case "getStartData":
$query = "SELECT COUNT(*) as nr FROM videos";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
$arr = array();
$arr['total'] = $r['nr'];
$query = "SELECT COUNT(*) as nr FROM videos
INNER JOIN video_tags vt on videos.movie_id = vt.video_id
INNER JOIN tags t on vt.tag_id = t.tag_id";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
$arr['tagged'] = $r['nr'];
$query = "SELECT COUNT(*) as nr FROM videos
INNER JOIN video_tags vt on videos.movie_id = vt.video_id
INNER JOIN tags t on vt.tag_id = t.tag_id
WHERE t.tag_name='hd'";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
$arr['hd'] = $r['nr'];
$query = "SELECT COUNT(*) as nr FROM videos
INNER JOIN video_tags vt on videos.movie_id = vt.video_id
INNER JOIN tags t on vt.tag_id = t.tag_id
WHERE t.tag_name='fullhd'";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
$arr['fullhd'] = $r['nr'];
$query = "SELECT COUNT(*) as nr FROM videos
INNER JOIN video_tags vt on videos.movie_id = vt.video_id
INNER JOIN tags t on vt.tag_id = t.tag_id
WHERE t.tag_name='lowquality'";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
$arr['sd'] = $r['nr'];
$query = "SELECT COUNT(*) as nr FROM tags";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
$arr['tags'] = $r['nr'];
echo(json_encode($arr));
break;
} }
} else { } else {
echo('{"data":"error"}'); echo('{"data":"error"}');

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import MainBody from "./MainBody";
import "./css/App.css" import "./css/App.css"
import HomePage from "./HomePage";
import RandomPage from "./RandomPage";
// include bootstraps css // include bootstraps css
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
@ -15,6 +16,28 @@ class App extends React.Component {
this.hideVideo = this.hideVideo.bind(this); this.hideVideo = this.hideVideo.bind(this);
} }
videoelement = null;
MainBody() {
let page;
if (this.state.page === "default") {
page = <HomePage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
this.mypage = page;
} else if (this.state.page === "random") {
page = <RandomPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
this.mypage = page;
} else if (this.state.page === "video") {
// show videoelement if neccessary
page = this.videoelement;
} else if (this.state.page === "lastpage") {
// return back to last page
page = this.mypage;
} else {
page = <div>unimplemented yet!</div>;
}
return (page);
}
render() { render() {
return ( return (
<div className="App"> <div className="App">
@ -42,8 +65,7 @@ class App extends React.Component {
</li> </li>
</ul> </ul>
</nav> </nav>
<MainBody viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}} page={this.state.page} {this.MainBody()}
videoelement={this.element}/>
</div> </div>
); );
} }
@ -68,7 +90,7 @@ class App extends React.Component {
page: "video" page: "video"
}); });
this.element = element; this.videoelement = element;
} }
hideVideo() { hideVideo() {

View File

@ -1,6 +1,9 @@
import React from "react"; import React from "react";
import Preview from "./Preview"; import Preview from "./Preview";
import SideBar from "./SideBar";
import "./css/HomePage.css" import "./css/HomePage.css"
import "./css/DefaultPage.css"
class HomePage extends React.Component { class HomePage extends React.Component {
// stores all available movies // stores all available movies
@ -15,9 +18,10 @@ class HomePage extends React.Component {
loadeditems: [], loadeditems: [],
sideinfo: { sideinfo: {
videonr: null, videonr: null,
fullhdvideonr: null,
hdvideonr: null, hdvideonr: null,
sdvideonr: null, sdvideonr: null,
categorynr: null tagnr: null
}, },
tag: "all" tag: "all"
}; };
@ -27,6 +31,7 @@ class HomePage extends React.Component {
document.addEventListener('scroll', this.trackScrolling); document.addEventListener('scroll', this.trackScrolling);
// initial get of all videos // initial get of all videos
this.fetchVideoData("all"); this.fetchVideoData("all");
this.fetchStartData();
} }
// this function clears all preview elements an reloads gravity with tag // this function clears all preview elements an reloads gravity with tag
@ -49,6 +54,28 @@ class HomePage extends React.Component {
}); });
} }
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() { componentWillUnmount() {
this.setState({}); this.setState({});
document.removeEventListener('scroll', this.trackScrolling); document.removeEventListener('scroll', this.trackScrolling);
@ -57,32 +84,26 @@ class HomePage extends React.Component {
render() { render() {
return ( return (
<div> <div>
<div><h1>Home page</h1></div> <div className='pageheader'>
<div className='sideinfo'> <span className='pageheadertitle'>Home Page</span>
Infos: <span className='pageheadersubtitle'>All Videos - {this.state.sideinfo.videonr}</span>
<div>Total Number of Videos: {this.state.sideinfo.videonr}</div> <hr/>
<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>default tags:</div>
<button className='btn btn-primary' onClick={() => {
this.fetchVideoData("fullhd");
}}>FullHd
</button>
<button className='btn btn-primary' onClick={() => {
this.fetchVideoData("all");
}}>All
</button>
<button className='btn btn-primary' onClick={() => {
this.fetchVideoData("lowquality");
}}>LowQuality
</button>
<button className='btn btn-primary' onClick={() => {
this.fetchVideoData("hd");
}}>HD
</button>
</div> </div>
<SideBar>
<div className='sidebartitle'>Infos:</div>
<hr/>
<div className='sidebarinfo'><b>{this.state.sideinfo.videonr}</b> Videos Total!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.tagnr}</b> different Tags!</div>
<hr/>
<div className='sidebartitle'>Default Tags:</div>
<button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
<button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
<button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
<button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
</SideBar>
<div className='maincontent'> <div className='maincontent'>
{this.state.loadeditems.map(elem => ( {this.state.loadeditems.map(elem => (
<Preview <Preview
@ -122,7 +143,9 @@ class HomePage extends React.Component {
} }
trackScrolling = () => { trackScrolling = () => {
if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) { // comparison if current scroll position is on bottom
// 200 stands for bottom offset to trigger load
if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
this.loadPreviewBlock(6); this.loadPreviewBlock(6);
} }
} }

View File

@ -1,32 +0,0 @@
import React from "react";
import HomePage from "./HomePage";
import RandomPage from "./RandomPage";
class MainBody extends React.Component {
constructor(props) {
super(props);
this.props = props;
}
render() {
let page;
if (this.props.page === "default") {
page = <HomePage viewbinding={this.props.viewbinding}/>;
this.mypage = page;
} else if (this.props.page === "random"){
page = <RandomPage viewbinding={this.props.viewbinding}/>;
this.mypage = page;
}else if (this.props.page === "video") {
// show videoelement if neccessary
page = this.props.videoelement;
}else if (this.props.page === "lastpage") {
// return back to last page
page = this.mypage;
} else {
page = <div>unimplemented yet!</div>;
}
return (page);
}
}
export default MainBody;

View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import "./css/Player.css" import "./css/Player.css"
import {PlyrComponent} from 'plyr-react'; import {PlyrComponent} from 'plyr-react';
import SideBar from "./SideBar";
class Player extends React.Component { class Player extends React.Component {
@ -36,50 +37,38 @@ class Player extends React.Component {
render() { render() {
return ( return (
<div id='videocontainer'> <div id='videocontainer'>
<div className="row"> <div className='pageheader'>
<div className="col-sm-2"> <span className='pageheadertitle'>Watch</span>
<div className="videoleftbanner"> <span className='pageheadersubtitle'>{this.state.movie_name}</span>
<div className="likefield">Likes: {this.state.likes}</div> <hr/>
<div className="likefield">Quality: {this.state.quality}p</div>
<div className="likefield">Length in Minutes: {this.state.length}</div>
</div> </div>
</div> <SideBar>
<div className="col-sm-8"> <div className='sidebartitle'>Infos:</div>
<hr/>
<div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
<div className='sidebarinfo'><b> {this.state.quality}p</b> Quality!</div>
<div className='sidebarinfo'><b>{this.state.length}</b> Minutes of length!</div>
<hr/>
<div className='sidebartitle'>Tags:</div>
<button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
<button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
<button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
<button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
</SideBar>
<div className="videowrapper"> <div className="videowrapper">
<div className='myvideo'> {/* video component is added here */}
{this.state.sources ? <PlyrComponent {this.state.sources ? <PlyrComponent
className='myvideo'
sources={this.state.sources} sources={this.state.sources}
options={this.options}/> : options={this.options}/> :
<div>not loaded yet</div>} <div>not loaded yet</div>}
<div className='videoactions'>
<button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
<button className='btn btn-info' id="tagbutton">Give this Video a Tag</button>
</div> </div>
</div> </div>
</div> <button className="closebutton" onClick={() => this.closebtn()}>Close</button>
<div className="col-sm-2">
<div className="closebutton" onClick={() => {
this.closebtn()
}}>Close
</div>
<div className="videorightbanner"></div>
</div>
</div>
<div className="row">
<div className="col-sm-5">
</div>
<div className="col-sm-2">
<button className='btn btn-primary' onClick={() => {
this.likebtn()
}}>Like it!
</button>
<button className='btn btn-info' id="tagbutton">Tag it!</button>
</div>
<div className="col-sm-5">
</div>
</div>
</div> </div>
); );
} }
@ -104,6 +93,7 @@ class Player extends React.Component {
], ],
poster: result.thumbnail poster: result.thumbnail
}, },
movie_name: result.movie_name,
likes: result.likes, likes: result.likes,
quality: result.quality, quality: result.quality,
length: result.length length: result.length
@ -131,8 +121,6 @@ class Player extends React.Component {
} }
closebtn() { closebtn() {
// todo go back to correct page here!
// have a catch to <Route>
this.props.viewbinding.hideVideo(); this.props.viewbinding.hideVideo();
} }
} }

View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import Preview from "./Preview"; import Preview from "./Preview";
import "./css/RandomPage.css" import "./css/RandomPage.css"
import SideBar from "./SideBar";
class RandomPage extends React.Component { class RandomPage extends React.Component {
constructor(props, context) { constructor(props, context) {
@ -16,11 +17,21 @@ class RandomPage extends React.Component {
} }
render() { render() {
return (<div> return (
<div><h1>Random Videos</h1></div> <div>
<div className='sideinfo'> <div className='pageheader'>
todo here. <span className='pageheadertitle'>Random Videos</span>
<span className='pageheadersubtitle'>6pc</span>
<hr/>
</div> </div>
<SideBar>
<div className='sidebartitle'>Visible Tags:</div>
<button className='tagbtn' onClick={() => this.fetchVideoData("all")}>All</button>
<button className='tagbtn' onClick={() => this.fetchVideoData("fullhd")}>FullHd</button>
<button className='tagbtn' onClick={() => this.fetchVideoData("lowquality")}>LowQuality</button>
<button className='tagbtn' onClick={() => this.fetchVideoData("hd")}>HD</button>
</SideBar>
<div className='maincontent'> <div className='maincontent'>
{this.state.videos.map(elem => ( {this.state.videos.map(elem => (
<Preview <Preview
@ -29,18 +40,12 @@ class RandomPage extends React.Component {
movie_id={elem.movie_id} movie_id={elem.movie_id}
viewbinding={this.props.viewbinding}/> viewbinding={this.props.viewbinding}/>
))} ))}
</div>
<div className='rightinfo'>
right
</div>
<div className='Shufflebutton'> <div className='Shufflebutton'>
<button onClick={() => { <button onClick={() => this.shuffleclick()} className='btnshuffle'>Shuffle</button>
this.shuffleclick()
}} className='btn btn-success'>Shuffle
</button>
</div> </div>
</div>
</div>); </div>
);
} }
shuffleclick() { shuffleclick() {

12
src/SideBar.js Normal file
View File

@ -0,0 +1,12 @@
import React from "react";
import "./css/SideBar.css"
class SideBar extends React.Component {
render() {
return (<div className='sideinfo'>
{this.props.children}
</div>);
}
}
export default SideBar;

View File

@ -1,6 +1,7 @@
.nav-item { .nav-item {
cursor: pointer; cursor: pointer;
} }
.nav-link { .nav-link {
color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .5);
font-weight: bold; font-weight: bold;

18
src/css/DefaultPage.css Normal file
View File

@ -0,0 +1,18 @@
.pageheader {
margin-top: 20px;
margin-bottom: 20px;
padding-left: 22%;
padding-right: 12%;
}
.pageheadertitle {
font-size: 40pt;
font-weight: bold;
}
.pageheadersubtitle {
margin-left: 20px;
font-size: 23pt;
opacity: 0.6;
}

View File

@ -1,8 +1,3 @@
.sideinfo{
width: 20%;
float: left;
}
.maincontent { .maincontent {
float: left; float: left;
width: 70%; width: 70%;

View File

@ -1,25 +1,13 @@
.closebutton { .closebutton {
color: white; color: white;
height: 35px; border: none;
width: 90px; border-radius: 10px;
margin-right: 80px; padding: 5px 15px 5px 15px;
float: right;
background-color: #FF0000; background-color: #FF0000;
cursor: pointer; margin-top: 25px;
margin-left: 25px;
} }
.myvideo {
width: 100%;
float: left;
}
.videoleftbanner{
float: left;
width: 100%;
height: 100%;
background-color: #e5e5ff;
border-radius: 40px;
}
.likefield { .likefield {
margin-top: 15px; margin-top: 15px;
margin-left: 15px; margin-left: 15px;
@ -29,5 +17,16 @@
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
color: white; color: white;
}
.videowrapper {
margin-left: 20px;
display: block;
float: left;
width: 60%;
margin-top: 25px;
}
.videoactions{
margin-top: 15px;
} }

View File

@ -1,7 +1,8 @@
.previewtitle { .previewtitle {
height: 10%; height: 10%;
color: white; color: #3d3d3d;
text-align: center; text-align: center;
font-weight: bold;
} }
.previewpic { .previewpic {
@ -17,8 +18,10 @@
height: 300px; height: 300px;
width: 30%; width: 30%;
float: left; float: left;
margin: 1%; margin-left: 25px;
background-color: #7F7F7F; margin-top: 25px;
/*background-color: #7F7F7F;*/
background-color: #a8c3ff;
cursor: pointer; cursor: pointer;
opacity: 0.9; opacity: 0.9;
border: 10px; border: 10px;
@ -29,10 +32,3 @@
opacity: 1; opacity: 1;
transition: opacity 0.5s; transition: opacity 0.5s;
} }
/* todo check if neccessary*/
.previewcontainer {
margin-left: 10%;
width: 80%;
margin-right: 10%;
}

View File

@ -2,3 +2,20 @@
width: 100%; width: 100%;
align-content: center; align-content: center;
} }
.btnshuffle{
background-color: #39a945;
color: white;
margin-top: 20px;
margin-left: 45%;
border: none;
border-radius: 10px;
padding: 15px 25px 15px 25px;
font-weight: bold;
font-size: larger;
}
.btnshuffle:focus{
outline: none;
}

43
src/css/SideBar.css Normal file
View File

@ -0,0 +1,43 @@
.sideinfo {
width: 20%;
float: left;
padding: 20px;
margin-top: 25px;
margin-left: 15px;
background-color: #b4c7fe;
border-radius: 20px;
border: 2px #3574fe solid;
}
.tagbtn {
color: white;
margin: 10px;
background-color: #3574fe;
border: none;
border-radius: 10px;
padding: 5px 15px 5px 15px;
/*font-weight: bold;*/
display: block;
}
.tagbtn:focus {
background-color: #004eff;
outline: none;
}
.tagbtn:hover {
background-color: #004eff;
}
.sidebartitle {
font-weight: bold;
font-size: larger;
}
.sidebarinfo {
margin-top: 5px;
background-color: #8ca3fc;
border-radius: 5px;
padding: 2px 10px 2px 15px;
width: 60%;
}