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

improved tagging system

Browse Source 
new settings page tab
This commit is contained in:
lukas
2020-06-03 12:26:10 +02:00
parent a74cc17e54
commit 0171133d40
11 changed files with 172 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/App.js
View File

@ -48,19 +48,25 @@ class App extends React.Component {
<li className="nav-item">
<div className="nav-link"
style={this.state.page === "default" ? {color: "rgba(255,255,255,.75"} : {}}
onClick={() => this.loadHomePage()}>Home
onClick={() => this.setState({page: "default"})}>Home
</div>
</li>
<li className="nav-item">
<div className="nav-link"
style={this.state.page === "random" ? {color: "rgba(255,255,255,.75"} : {}}
onClick={() => this.loadRandomPage()}>Random Video
onClick={() => this.setState({page: "random"})}>Random Video
</div>
</li>
<li className="nav-item">
<div className="nav-link"
style={this.state.page === "categories" ? {color: "rgba(255,255,255,.75"} : {}}
onClick={() => this.loadCategoriesPage()}>Categories
onClick={() => this.setState({page: "categories"})}>Categories
</div>
</li>
<li className="nav-item">
<div className="nav-link"
style={this.state.page === "settings" ? {color: "rgba(255,255,255,.75"} : {}}
onClick={() => this.setState({page: "settings"})}>Settings
</div>
</li>
</ul>
@ -70,21 +76,6 @@ class App extends React.Component {
);
}
loadCategoriesPage() {
console.log("click categories");
this.setState({page: "categories"});
}
loadRandomPage() {
console.log("click random");
this.setState({page: "random"});
}
loadHomePage() {
console.log("click default");
this.setState({page: "default"});
}
showVideo(element) {
this.setState({
page: "video"

48
src/HomePage.js
View File

@ -4,6 +4,7 @@ import SideBar from "./SideBar";
import "./css/HomePage.css"
import "./css/DefaultPage.css"
import Tag from "./Tag";
class HomePage extends React.Component {
// stores all available movies
@ -23,7 +24,8 @@ class HomePage extends React.Component {
sdvideonr: null,
tagnr: null
},
tag: "all"
tag: "All",
selectionnr: null
};
}
@ -34,7 +36,12 @@ class HomePage extends React.Component {
this.fetchStartData();
}
// this function clears all preview elements an reloads gravity with tag
/**
* 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');
@ -45,7 +52,10 @@ class HomePage extends React.Component {
.then((response) => response.json()
.then((result) => {
this.data = result;
this.setState({loadeditems: []});
this.setState({
loadeditems: [],
selectionnr: this.data.length
});
this.loadindex = 0;
this.loadPreviewBlock(12);
}))
@ -54,6 +64,9 @@ class HomePage extends React.Component {
});
}
/**
* fetch the necessary data for left info box
*/
fetchStartData() {
const updateRequest = new FormData();
updateRequest.append('action', 'getStartData');
@ -69,7 +82,8 @@ class HomePage extends React.Component {
hdvideonr: result['hd'],
sdvideonr: result['sd'],
tagnr: result['tags']
}});
}
});
}))
.catch(() => {
console.log("no connection to backend");
@ -86,7 +100,7 @@ class HomePage extends React.Component {
<div>
<div className='pageheader'>
<span className='pageheadertitle'>Home Page</span>
<span className='pageheadersubtitle'>All Videos - {this.state.sideinfo.videonr}</span>
<span className='pageheadersubtitle'>{this.state.tag} Videos - {this.state.selectionnr}</span>
<hr/>
</div>
<SideBar>
@ -99,10 +113,26 @@ class HomePage extends React.Component {
<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>
<Tag onClick={() => {
this.setState({tag: "All"});
this.fetchVideoData("all");
}}>All
</Tag>
<Tag onClick={() => {
this.setState({tag: "Full HD"});
this.fetchVideoData("fullhd");
}}>FullHd
</Tag>
<Tag onClick={() => {
this.setState({tag: "Low Quality"});
this.fetchVideoData("lowquality");
}}>LowQuality
</Tag>
<Tag onClick={() => {
this.setState({tag: "HD"});
this.fetchVideoData("hd");
}}>HD
</Tag>
</SideBar>
<div className='maincontent'>
{this.state.loadeditems.map(elem => (

20
src/Player.js
View File

@ -2,13 +2,21 @@ import React from "react";
import "./css/Player.css"
import {PlyrComponent} from 'plyr-react';
import SideBar from "./SideBar";
import Tag from "./Tag";
class Player extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {};
this.state = {
sources: null,
movie_name: null,
likes: null,
quality: null,
length: null,
tags: []
};
this.props = props;
}
@ -50,10 +58,9 @@ class Player extends React.Component {
<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>
{this.state.tags.map((m) => (
<Tag>{m.tag_name}</Tag>
))}
</SideBar>
<div className="videowrapper">
@ -96,7 +103,8 @@ class Player extends React.Component {
movie_name: result.movie_name,
likes: result.likes,
quality: result.quality,
length: result.length
length: result.length,
tags: result.tags
});
});
}

17
src/RandomPage.js
View File

@ -2,13 +2,15 @@ import React from "react";
import Preview from "./Preview";
import "./css/RandomPage.css"
import SideBar from "./SideBar";
import Tag from "./Tag";
class RandomPage extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
videos: []
videos: [],
tags: []
};
}
@ -26,10 +28,9 @@ class RandomPage extends React.Component {
</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>
{this.state.tags.map((m) => (
<Tag>{m.tag_name}</Tag>
))}
</SideBar>
<div className='maincontent'>
@ -61,7 +62,11 @@ class RandomPage extends React.Component {
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.setState({videos: result});
console.log(result);
this.setState({
videos: result.rows,
tags: result.tags
});
}))
.catch(() => {
console.log("no connection to backend");

21
src/Tag.js Normal file
View File

@ -0,0 +1,21 @@
import React from "react";
import "./css/Tag.css"
class Tag extends React.Component {
constructor(props, context) {
super(props, context);
this.props = props;
}
render() {
// todo onclick events correctly
return (
<button className='tagbtn' onClick={this.props.onClick}>{this.props.children}</button>
);
}
}
export default Tag;

20
src/css/SideBar.css
View File

@ -9,26 +9,6 @@
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;

19
src/css/Tag.css Normal file
View File

@ -0,0 +1,19 @@
.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;
}