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

added a videocontainer where previews can be stored in - usefull for category page

Browse Source
This commit is contained in:
Lukas Heiligenbrunner
2020-06-07 21:42:01 +02:00
parent d72a7b2e3a
commit 836f5f342a
7 changed files with 139 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
api/Tags.php
View File

@@ -16,21 +16,6 @@ if (isset($_POST['action'])) {
}
echo json_encode($rows);
break;
case "getRandomTagPreview":
$id = $_POST['id'];
$query = "SELECT thumbnail from videos
INNER JOIN video_tags vt on videos.movie_id = vt.video_id
WHERE tag_id='$id'
ORDER BY RAND()
LIMIT 1";
$result = $conn->query($query);
$r = mysqli_fetch_assoc($result);
echo $r['thumbnail'];
break;
}
}

8
src/App.js
View File

@@ -32,11 +32,13 @@ class App extends React.Component {
page = <SettingsPage/>;
this.mypage = page;
} else if (this.state.page === "categories") {
page = <CategoryPage/>;
page = <CategoryPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
this.mypage = page;
} else if (this.state.page === "video") {
// show videoelement if neccessary
page = this.videoelement;
console.log(page);
} else if (this.state.page === "lastpage") {
// return back to last page
page = this.mypage;
@@ -85,11 +87,11 @@ class App extends React.Component {
}
showVideo(element) {
this.videoelement = element;
this.setState({
page: "video"
});
this.videoelement = element;
}
hideVideo() {

20
src/css/Preview.css
View File

@@ -4,13 +4,6 @@
text-align: center;
font-weight: bold;
max-width: 266px;
}
.tagpreviewtitle{
font-size: larger;
}
.videopreviewtitle{
font-size: smaller;
}
@@ -46,3 +39,16 @@
box-shadow: rgba(2, 12, 27, 0.7) 0px 0px 0px 5px;
transition: all 300ms;
}
.tagpreview {
text-transform: uppercase;
font-weight: bolder;
font-size: x-large;
text-align: center;
height: 150px;
width: 266px;
}
.tagpreviewtitle{
margin-top: 55px;
}

53
src/elements/Preview.js
View File

@@ -1,6 +1,7 @@
import React from "react";
import "../css/Preview.css";
import Player from "../pages/Player";
import VideoContainer from "./VideoContainer";
class Preview extends React.Component {
constructor(props, context) {
@@ -66,43 +67,45 @@ export class TagPreview extends React.Component {
super(props, context);
this.props = props;
this.state = {
thumbnail: null
};
}
componentDidMount() {
this.loadPreview();
fetchVideoData(tag) {
console.log(tag);
const updateRequest = new FormData();
updateRequest.append('action', 'getMovies');
updateRequest.append('tag', tag);
console.log("fetching data");
// fetch all videos available
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
console.log(result);
this.props.viewbinding.showVideo(
<VideoContainer
data={result}
viewbinding={this.props.viewbinding}/>
);
}))
.catch(() => {
console.log("no connection to backend");
});
}
render() {
return (
<div className='videopreview' onClick={() => this.itemClick()}>
<div className='previewtitle tagpreviewtitle'>{this.props.name}</div>
<div className='previewpic'>
<img className='previewimage'
src={this.state.thumbnail}
alt='Pic loading.'/>
</div>
<div className='previewbottom'>
<div className='videopreview tagpreview' onClick={() => this.itemClick()}>
<div className='tagpreviewtitle'>
{this.props.name}
</div>
</div>
);
}
loadPreview() {
const updateRequest = new FormData();
updateRequest.append('action', 'getRandomTagPreview');
updateRequest.append('id', this.props.tag_id);
fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.text())
.then((result) => {
this.setState({thumbnail: result});
});
itemClick() {
this.fetchVideoData(this.props.name);
}
}

73
src/elements/VideoContainer.js Normal file
View File

@@ -0,0 +1,73 @@
import React from "react";
import Preview from "./Preview";
class VideoContainer extends React.Component {
constructor(props: P, context: any) {
super(props, context);
this.data = props.data;
this.state = {
loadeditems: [],
selectionnr: null
};
}
// stores current index of loaded elements
loadindex = 0;
componentDidMount() {
document.addEventListener('scroll', this.trackScrolling);
this.loadPreviewBlock(12);
}
render() {
return (
<div className='maincontent'>
{this.state.loadeditems.map(elem => (
<Preview
key={elem.movie_id}
name={elem.movie_name}
movie_id={elem.movie_id}
viewbinding={this.props.viewbinding}/>
))}
</div>
);
}
componentWillUnmount() {
this.setState({});
document.removeEventListener('scroll', this.trackScrolling);
}
loadPreviewBlock(nr) {
console.log("loadpreviewblock called ...")
let ret = [];
for (let i = 0; i < nr; i++) {
// only add if not end
if (this.data.length > this.loadindex + i) {
ret.push(this.data[this.loadindex + i]);
}
}
this.setState({
loadeditems: [
...this.state.loadeditems,
...ret
]
});
this.loadindex += nr;
}
trackScrolling = () => {
// 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(8);
}
}
}
export default VideoContainer;

13
src/pages/CategoryPage.js
View File

@@ -30,24 +30,21 @@ class CategoryPage extends React.Component {
<hr/>
</div>
<SideBar>
<div className='sidebartitle'>Infos:</div>
<hr/>
<div className='sidebartitle'>Default Tags:</div>
<Tag onClick={() => {
this.setState({tag: "All"});
this.fetchVideoData("all");
}}>All
</Tag>
<Tag>All</Tag>
<Tag>FullHd</Tag>
<Tag>LowQuality</Tag>
<Tag>HD</Tag>
<hr/>
<button className='btn btn-success'>Add a new Tag!</button>
</SideBar>
<div id='categorycontent'>
{this.state.loadedtags ?
this.state.loadedtags.map((m) => (
<TagPreview
name={m.tag_name}
tag_id={m.tag_id}/>
tag_id={m.tag_id}
viewbinding={this.props.viewbinding}/>
)) :
"loading"
}

72
src/pages/HomePage.js
View File

@@ -1,22 +1,16 @@
import React from "react";
import Preview from "../elements/Preview";
import SideBar from "../elements/SideBar";
import Tag from "../elements/Tag";
import VideoContainer from "../elements/VideoContainer";
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,
@@ -25,12 +19,13 @@ class HomePage extends React.Component {
tagnr: null
},
tag: "All",
selectionnr: null
data: [],
selectionnr: 0
};
}
componentDidMount() {
document.addEventListener('scroll', this.trackScrolling);
// document.addEventListener('scroll', this.trackScrolling);
// initial get of all videos
this.fetchVideoData("all");
this.fetchStartData();
@@ -47,17 +42,19 @@ class HomePage extends React.Component {
updateRequest.append('action', 'getMovies');
updateRequest.append('tag', tag);
console.log("fetching data");
// 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
data: []
});
this.setState({
data: result,
selectionnr: result.length
});
this.loadindex = 0;
this.loadPreviewBlock(16);
}))
.catch(() => {
console.log("no connection to backend");
@@ -90,11 +87,6 @@ class HomePage extends React.Component {
});
}
componentWillUnmount() {
this.setState({});
document.removeEventListener('scroll', this.trackScrolling);
}
render() {
return (
<div>
@@ -134,15 +126,10 @@ class HomePage extends React.Component {
}}>HD
</Tag>
</SideBar>
<div className='maincontent'>
{this.state.loadeditems.map(elem => (
<Preview
key={elem.movie_id}
name={elem.movie_name}
movie_id={elem.movie_id}
viewbinding={this.props.viewbinding}/>
))}
</div>
{this.state.data.length !== 0 ?
<VideoContainer
data={this.state.data}
viewbinding={this.props.viewbinding}/> : null}
<div className='rightinfo'>
</div>
@@ -150,35 +137,6 @@ class HomePage extends React.Component {
</div>
);
}
loadPreviewBlock(nr) {
console.log("loadpreviewblock called ...")
let ret = [];
for (let i = 0; i < nr; i++) {
// only add if not end
if (this.data.length > this.loadindex + i) {
ret.push(this.data[this.loadindex + i]);
}
}
this.setState({
loadeditems: [
...this.state.loadeditems,
...ret
]
});
this.loadindex += nr;
}
trackScrolling = () => {
// 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(8);
}
}
}
export default HomePage;