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

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

View File

@ -16,21 +16,6 @@ if (isset($_POST['action'])) {
} }
echo json_encode($rows); 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; break;
} }
} }

View File

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

View File

@ -4,13 +4,6 @@
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
max-width: 266px; max-width: 266px;
}
.tagpreviewtitle{
font-size: larger;
}
.videopreviewtitle{
font-size: smaller; font-size: smaller;
} }
@ -46,3 +39,16 @@
box-shadow: rgba(2, 12, 27, 0.7) 0px 0px 0px 5px; box-shadow: rgba(2, 12, 27, 0.7) 0px 0px 0px 5px;
transition: all 300ms; 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;
}

View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import "../css/Preview.css"; import "../css/Preview.css";
import Player from "../pages/Player"; import Player from "../pages/Player";
import VideoContainer from "./VideoContainer";
class Preview extends React.Component { class Preview extends React.Component {
constructor(props, context) { constructor(props, context) {
@ -66,43 +67,45 @@ export class TagPreview extends React.Component {
super(props, context); super(props, context);
this.props = props; this.props = props;
this.state = {
thumbnail: null
};
} }
componentDidMount() { fetchVideoData(tag) {
this.loadPreview(); 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() { render() {
return ( return (
<div className='videopreview' onClick={() => this.itemClick()}> <div className='videopreview tagpreview' onClick={() => this.itemClick()}>
<div className='previewtitle tagpreviewtitle'>{this.props.name}</div> <div className='tagpreviewtitle'>
<div className='previewpic'> {this.props.name}
<img className='previewimage'
src={this.state.thumbnail}
alt='Pic loading.'/>
</div>
<div className='previewbottom'>
</div> </div>
</div> </div>
); );
} }
loadPreview() { itemClick() {
const updateRequest = new FormData(); this.fetchVideoData(this.props.name);
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});
});
} }
} }

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;

View File

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

View File

@ -1,22 +1,16 @@
import React from "react"; import React from "react";
import Preview from "../elements/Preview";
import SideBar from "../elements/SideBar"; import SideBar from "../elements/SideBar";
import Tag from "../elements/Tag"; import Tag from "../elements/Tag";
import VideoContainer from "../elements/VideoContainer";
import "../css/HomePage.css" import "../css/HomePage.css"
import "../css/DefaultPage.css" import "../css/DefaultPage.css"
class HomePage extends React.Component { class HomePage extends React.Component {
// stores all available movies
data = null;
// stores current index of loaded elements
loadindex = 0;
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
this.state = { this.state = {
loadeditems: [],
sideinfo: { sideinfo: {
videonr: null, videonr: null,
fullhdvideonr: null, fullhdvideonr: null,
@ -25,12 +19,13 @@ class HomePage extends React.Component {
tagnr: null tagnr: null
}, },
tag: "All", tag: "All",
selectionnr: null data: [],
selectionnr: 0
}; };
} }
componentDidMount() { componentDidMount() {
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.fetchStartData();
@ -47,17 +42,19 @@ class HomePage extends React.Component {
updateRequest.append('action', 'getMovies'); updateRequest.append('action', 'getMovies');
updateRequest.append('tag', tag); updateRequest.append('tag', tag);
console.log("fetching data");
// fetch all videos available // fetch all videos available
fetch('/api/videoload.php', {method: 'POST', body: updateRequest}) fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json() .then((response) => response.json()
.then((result) => { .then((result) => {
this.data = result;
this.setState({ this.setState({
loadeditems: [], data: []
selectionnr: this.data.length });
this.setState({
data: result,
selectionnr: result.length
}); });
this.loadindex = 0;
this.loadPreviewBlock(16);
})) }))
.catch(() => { .catch(() => {
console.log("no connection to backend"); console.log("no connection to backend");
@ -90,11 +87,6 @@ class HomePage extends React.Component {
}); });
} }
componentWillUnmount() {
this.setState({});
document.removeEventListener('scroll', this.trackScrolling);
}
render() { render() {
return ( return (
<div> <div>
@ -134,15 +126,10 @@ class HomePage extends React.Component {
}}>HD }}>HD
</Tag> </Tag>
</SideBar> </SideBar>
<div className='maincontent'> {this.state.data.length !== 0 ?
{this.state.loadeditems.map(elem => ( <VideoContainer
<Preview data={this.state.data}
key={elem.movie_id} viewbinding={this.props.viewbinding}/> : null}
name={elem.movie_name}
movie_id={elem.movie_id}
viewbinding={this.props.viewbinding}/>
))}
</div>
<div className='rightinfo'> <div className='rightinfo'>
</div> </div>
@ -150,35 +137,6 @@ class HomePage extends React.Component {
</div> </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; export default HomePage;