lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

added lots of css to style site.

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
api/videoload.php
View File

@ -11,7 +11,7 @@ if (isset($_POST['action'])) {
$query = "SELECT movie_id,movie_name FROM videos ORDER BY likes DESC, create_date ASC, movie_name ASC";
if (isset($_POST['tag'])) {
$tag = $_POST['tag'];
if($_POST['tag'] != "all"){
if ($_POST['tag'] != "all") {
$query = "SELECT movie_id,movie_name 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
@ -28,7 +28,7 @@ if (isset($_POST['action'])) {
echo(json_encode($rows));
break;
case "getRandomMovies":
$query = "SELECT movie_id,movie_name FROM videos ORDER BY RAND() LIMIT ".$_POST['number'];
$query = "SELECT movie_id,movie_name FROM videos ORDER BY RAND() LIMIT " . $_POST['number'];
$result = $conn->query($query);
$rows = array();
while ($r = mysqli_fetch_assoc($result)) {
@ -38,13 +38,14 @@ if (isset($_POST['action'])) {
echo(json_encode($rows));
break;
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);
$row = $result->fetch_assoc();
$arr = array();
$arr["thumbnail"] = $row["thumbnail"];
$arr["movie_name"] = $row["movie_name"];
$arr["movie_url"] = $row["movie_url"];
$arr["likes"] = $row["likes"];
$arr["quality"] = $row["quality"];
@ -75,7 +76,6 @@ if (isset($_POST['action'])) {
echo($row["thumbnail"]);
break;
case "getTags":
$movieid = $_POST['movieid'];
@ -104,6 +104,52 @@ if (isset($_POST['action'])) {
echo('{"result":"' . $conn->error . '"}');
}
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 {
echo('{"data":"error"}');

30
src/App.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import MainBody from "./MainBody";
import "./css/App.css"
import HomePage from "./HomePage";
import RandomPage from "./RandomPage";
// include bootstraps css
import 'bootstrap/dist/css/bootstrap.min.css';
@ -15,6 +16,28 @@ class App extends React.Component {
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() {
return (
<div className="App">
@ -42,8 +65,7 @@ class App extends React.Component {
</li>
</ul>
</nav>
<MainBody viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}} page={this.state.page}
videoelement={this.element}/>
{this.MainBody()}
</div>
);
}
@ -68,7 +90,7 @@ class App extends React.Component {
page: "video"
});
this.element = element;
this.videoelement = element;
}
hideVideo() {

79
src/HomePage.js
View File

@ -1,6 +1,9 @@
import React from "react";
import Preview from "./Preview";
import SideBar from "./SideBar";
import "./css/HomePage.css"
import "./css/DefaultPage.css"
class HomePage extends React.Component {
// stores all available movies
@ -15,9 +18,10 @@ class HomePage extends React.Component {
loadeditems: [],
sideinfo: {
videonr: null,
fullhdvideonr: null,
hdvideonr: null,
sdvideonr: null,
categorynr: null
tagnr: null
},
tag: "all"
};
@ -27,6 +31,7 @@ class HomePage extends React.Component {
document.addEventListener('scroll', this.trackScrolling);
// initial get of all videos
this.fetchVideoData("all");
this.fetchStartData();
}
// this function clears all preview elements an reloads gravity with tag
@ -41,7 +46,7 @@ class HomePage extends React.Component {
.then((result) => {
this.data = result;
this.setState({loadeditems: []});
this.loadindex=0;
this.loadindex = 0;
this.loadPreviewBlock(12);
}))
.catch(() => {
@ -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() {
this.setState({});
document.removeEventListener('scroll', this.trackScrolling);
@ -57,32 +84,26 @@ class HomePage extends React.Component {
render() {
return (
<div>
<div><h1>Home page</h1></div>
<div className='sideinfo'>
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>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 className='pageheader'>
<span className='pageheadertitle'>Home Page</span>
<span className='pageheadersubtitle'>All Videos - {this.state.sideinfo.videonr}</span>
<hr/>
</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'>
{this.state.loadeditems.map(elem => (
<Preview
@ -122,7 +143,9 @@ class HomePage extends React.Component {
}
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);
}
}

32
src/MainBody.js
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;

64
src/Player.js
View File

@ -1,6 +1,7 @@
import React from "react";
import "./css/Player.css"
import {PlyrComponent} from 'plyr-react';
import SideBar from "./SideBar";
class Player extends React.Component {
@ -36,50 +37,38 @@ class Player extends React.Component {
render() {
return (
<div id='videocontainer'>
<div className="row">
<div className="col-sm-2">
<div className="videoleftbanner">
<div className="likefield">Likes: {this.state.likes}</div>
<div className="likefield">Quality: {this.state.quality}p</div>
<div className="likefield">Length in Minutes: {this.state.length}</div>
<div className='pageheader'>
<span className='pageheadertitle'>Watch</span>
<span className='pageheadersubtitle'>{this.state.movie_name}</span>
<hr/>
</div>
</div>
<div className="col-sm-8">
<SideBar>
<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='myvideo'>
{/* video component is added here */}
{this.state.sources ? <PlyrComponent
className='myvideo'
sources={this.state.sources}
options={this.options}/> :
<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 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>
<button className="closebutton" onClick={() => this.closebtn()}>Close</button>
</div>
);
}
@ -104,6 +93,7 @@ class Player extends React.Component {
],
poster: result.thumbnail
},
movie_name: result.movie_name,
likes: result.likes,
quality: result.quality,
length: result.length
@ -131,8 +121,6 @@ class Player extends React.Component {
}
closebtn() {
// todo go back to correct page here!
// have a catch to <Route>
this.props.viewbinding.hideVideo();
}
}

33
src/RandomPage.js
View File

@ -1,6 +1,7 @@
import React from "react";
import Preview from "./Preview";
import "./css/RandomPage.css"
import SideBar from "./SideBar";
class RandomPage extends React.Component {
constructor(props, context) {
@ -16,11 +17,21 @@ class RandomPage extends React.Component {
}
render() {
return (<div>
<div><h1>Random Videos</h1></div>
<div className='sideinfo'>
todo here.
return (
<div>
<div className='pageheader'>
<span className='pageheadertitle'>Random Videos</span>
<span className='pageheadersubtitle'>6pc</span>
<hr/>
</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'>
{this.state.videos.map(elem => (
<Preview
@ -29,18 +40,12 @@ class RandomPage extends React.Component {
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>
<button onClick={() => this.shuffleclick()} className='btnshuffle'>Shuffle</button>
</div>
</div>);
</div>
</div>
);
}
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;

11
src/css/App.css
View File

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

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;
}

9
src/css/HomePage.css
View File

@ -1,14 +1,9 @@
.sideinfo{
width: 20%;
float: left;
}
.maincontent{
.maincontent {
float: left;
width: 70%;
}
.rightinfo{
.rightinfo {
float: left;
width: 10%;
}

37
src/css/Player.css
View File

@ -1,26 +1,14 @@
.closebutton {
color: white;
height: 35px;
width: 90px;
margin-right: 80px;
float: right;
border: none;
border-radius: 10px;
padding: 5px 15px 5px 15px;
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-left: 15px;
margin-right: 15px;
@ -29,5 +17,16 @@
border-radius: 10px;
text-align: center;
color: white;
}
.videowrapper {
margin-left: 20px;
display: block;
float: left;
width: 60%;
margin-top: 25px;
}
.videoactions{
margin-top: 15px;
}

16
src/css/Preview.css
View File

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

19
src/css/RandomPage.css
View File

@ -1,4 +1,21 @@
.Shufflebutton{
.Shufflebutton {
width: 100%;
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%;
}

2
src/index.js
View File

@ -6,7 +6,7 @@ import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
<App/>
</React.StrictMode>,
document.getElementById('root')
);

2
src/serviceWorker.js
View File

@ -101,7 +101,7 @@ function registerValidSW(swUrl, config) {
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: { 'Service-Worker': 'script' },
headers: {'Service-Worker': 'script'},
})
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.