structured project with folders
better min preview height correct sort by creation date
This commit is contained in:
13
src/pages/CategoryPage.js
Normal file
13
src/pages/CategoryPage.js
Normal file
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
|
||||
class CategoryPage extends React.Component{
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CategoryPage;
|
||||
184
src/pages/HomePage.js
Normal file
184
src/pages/HomePage.js
Normal file
@ -0,0 +1,184 @@
|
||||
import React from "react";
|
||||
import Preview from "../elements/Preview";
|
||||
import SideBar from "../elements/SideBar";
|
||||
import Tag from "../elements/Tag";
|
||||
|
||||
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,
|
||||
hdvideonr: null,
|
||||
sdvideonr: null,
|
||||
tagnr: null
|
||||
},
|
||||
tag: "All",
|
||||
selectionnr: null
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('scroll', this.trackScrolling);
|
||||
// initial get of all videos
|
||||
this.fetchVideoData("all");
|
||||
this.fetchStartData();
|
||||
}
|
||||
|
||||
/**
|
||||
* 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');
|
||||
updateRequest.append('tag', tag);
|
||||
|
||||
// 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
|
||||
});
|
||||
this.loadindex = 0;
|
||||
this.loadPreviewBlock(16);
|
||||
}))
|
||||
.catch(() => {
|
||||
console.log("no connection to backend");
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* fetch the necessary data for left info box
|
||||
*/
|
||||
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);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className='pageheader'>
|
||||
<span className='pageheadertitle'>Home Page</span>
|
||||
<span className='pageheadersubtitle'>{this.state.tag} Videos - {this.state.selectionnr}</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>
|
||||
<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 => (
|
||||
<Preview
|
||||
key={elem.movie_id}
|
||||
name={elem.movie_name}
|
||||
movie_id={elem.movie_id}
|
||||
viewbinding={this.props.viewbinding}/>
|
||||
))}
|
||||
</div>
|
||||
<div className='rightinfo'>
|
||||
|
||||
</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;
|
||||
153
src/pages/Player.js
Normal file
153
src/pages/Player.js
Normal file
@ -0,0 +1,153 @@
|
||||
import React from "react";
|
||||
import "../css/Player.css"
|
||||
import {PlyrComponent} from 'plyr-react';
|
||||
import SideBar from "../elements/SideBar";
|
||||
import Tag from "../elements/Tag";
|
||||
import AddTagPopup from "../elements/AddTagPopup";
|
||||
|
||||
|
||||
class Player extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
sources: null,
|
||||
movie_id: null,
|
||||
movie_name: null,
|
||||
likes: null,
|
||||
quality: null,
|
||||
length: null,
|
||||
tags: [],
|
||||
popupvisible: false
|
||||
};
|
||||
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
options = {
|
||||
controls: [
|
||||
'play-large', // The large play button in the center
|
||||
'play', // Play/pause playback
|
||||
'progress', // The progress bar and scrubber for playback and buffering
|
||||
'current-time', // The current time of playback
|
||||
'duration', // The full duration of the media
|
||||
'mute', // Toggle mute
|
||||
'volume', // Volume control
|
||||
'captions', // Toggle captions
|
||||
'settings', // Settings menu
|
||||
'airplay', // Airplay (currently Safari only)
|
||||
'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
|
||||
'fullscreen', // Toggle fullscreen
|
||||
]
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchMovieData();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id='videocontainer'>
|
||||
<div className='pageheader'>
|
||||
<span className='pageheadertitle'>Watch</span>
|
||||
<span className='pageheadersubtitle'>{this.state.movie_name}</span>
|
||||
<hr/>
|
||||
</div>
|
||||
<SideBar>
|
||||
<div className='sidebartitle'>Infos:</div>
|
||||
<hr/>
|
||||
<div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
|
||||
{this.state.quality !== 0 ?
|
||||
<div className='sidebarinfo'><b>{this.state.quality}p</b> Quality!
|
||||
</div> : null}
|
||||
{this.state.length !== 0 ?
|
||||
<div className='sidebarinfo'><b>{Math.round(this.state.length / 60)}</b> Minutes of length!
|
||||
</div> : null}
|
||||
<hr/>
|
||||
<div className='sidebartitle'>Tags:</div>
|
||||
{this.state.tags.map((m) => (
|
||||
<Tag>{m.tag_name}</Tag>
|
||||
))}
|
||||
</SideBar>
|
||||
|
||||
<div className="videowrapper">
|
||||
{/* 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' onClick={() => this.setState({popupvisible: true})}>Give this
|
||||
Video a Tag
|
||||
</button>
|
||||
{this.state.popupvisible ?
|
||||
<AddTagPopup show={this.state.popupvisible}
|
||||
onHide={() => this.setState({popupvisible: false})}
|
||||
movie_id={this.state.movie_id}/> :
|
||||
null
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<button className="closebutton" onClick={() => this.closebtn()}>Close</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
fetchMovieData() {
|
||||
const updateRequest = new FormData();
|
||||
updateRequest.append('action', 'loadVideo');
|
||||
updateRequest.append('movieid', this.props.movie_id);
|
||||
|
||||
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
|
||||
.then((response) => response.json())
|
||||
.then((result) => {
|
||||
this.setState({
|
||||
sources: {
|
||||
type: 'video',
|
||||
sources: [
|
||||
{
|
||||
src: result.movie_url,
|
||||
type: 'video/mp4',
|
||||
size: 1080,
|
||||
}
|
||||
],
|
||||
poster: result.thumbnail
|
||||
},
|
||||
movie_id: result.movie_id,
|
||||
movie_name: result.movie_name,
|
||||
likes: result.likes,
|
||||
quality: result.quality,
|
||||
length: result.length,
|
||||
tags: result.tags
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/* Click Listener */
|
||||
likebtn() {
|
||||
const updateRequest = new FormData();
|
||||
updateRequest.append('action', 'addLike');
|
||||
updateRequest.append('movieid', this.props.movie_id);
|
||||
|
||||
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
|
||||
.then((response) => response.json())
|
||||
.then((result) => {
|
||||
if (result.result === "success") {
|
||||
this.fetchMovieData();
|
||||
} else {
|
||||
console.log("an error occured while liking");
|
||||
console.log(result);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
closebtn() {
|
||||
this.props.viewbinding.hideVideo();
|
||||
}
|
||||
}
|
||||
|
||||
export default Player;
|
||||
77
src/pages/RandomPage.js
Normal file
77
src/pages/RandomPage.js
Normal file
@ -0,0 +1,77 @@
|
||||
import React from "react";
|
||||
import Preview from "../elements/Preview";
|
||||
import "../css/RandomPage.css"
|
||||
import SideBar from "../elements/SideBar";
|
||||
import Tag from "../elements/Tag";
|
||||
|
||||
class RandomPage extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
videos: [],
|
||||
tags: []
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadShuffledvideos(4);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className='pageheader'>
|
||||
<span className='pageheadertitle'>Random Videos</span>
|
||||
<span className='pageheadersubtitle'>4pc</span>
|
||||
<hr/>
|
||||
</div>
|
||||
<SideBar>
|
||||
<div className='sidebartitle'>Visible Tags:</div>
|
||||
{this.state.tags.map((m) => (
|
||||
<Tag>{m.tag_name}</Tag>
|
||||
))}
|
||||
</SideBar>
|
||||
|
||||
<div className='maincontent'>
|
||||
{this.state.videos.map(elem => (
|
||||
<Preview
|
||||
key={elem.movie_id}
|
||||
name={elem.movie_name}
|
||||
movie_id={elem.movie_id}
|
||||
viewbinding={this.props.viewbinding}/>
|
||||
))}
|
||||
<div className='Shufflebutton'>
|
||||
<button onClick={() => this.shuffleclick()} className='btnshuffle'>Shuffle</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
shuffleclick() {
|
||||
this.loadShuffledvideos(4);
|
||||
}
|
||||
|
||||
loadShuffledvideos(nr) {
|
||||
const updateRequest = new FormData();
|
||||
updateRequest.append('action', 'getRandomMovies');
|
||||
updateRequest.append('number', nr);
|
||||
|
||||
// fetch all videos available
|
||||
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
|
||||
.then((response) => response.json()
|
||||
.then((result) => {
|
||||
console.log(result);
|
||||
this.setState({
|
||||
videos: result.rows,
|
||||
tags: result.tags
|
||||
});
|
||||
}))
|
||||
.catch(() => {
|
||||
console.log("no connection to backend");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default RandomPage;
|
||||
84
src/pages/SettingsPage.js
Normal file
84
src/pages/SettingsPage.js
Normal file
@ -0,0 +1,84 @@
|
||||
import React from "react";
|
||||
import "../css/DefaultPage.css"
|
||||
|
||||
|
||||
class SettingsPage extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
text: []
|
||||
};
|
||||
}
|
||||
|
||||
updateStatus = () => {
|
||||
const updateRequest = new FormData();
|
||||
fetch('/api/extractionData.php', {method: 'POST', body: updateRequest})
|
||||
.then((response) => response.json()
|
||||
.then((result) => {
|
||||
if (result.contentAvailable === true) {
|
||||
console.log(result);
|
||||
this.setState({
|
||||
text: [...result.message.split("\n"),
|
||||
...this.state.text]
|
||||
});
|
||||
} else {
|
||||
clearInterval(this.myinterval);
|
||||
}
|
||||
}))
|
||||
.catch(() => {
|
||||
console.log("no connection to backend");
|
||||
});
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if(this.myinterval){
|
||||
clearInterval(this.myinterval);
|
||||
}
|
||||
this.myinterval = setInterval(this.updateStatus, 1000);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearInterval(this.myinterval);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className='pageheader'>
|
||||
<span className='pageheadertitle'>Settings Page</span>
|
||||
<span className='pageheadersubtitle'>todo</span>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<button onClick={() => {
|
||||
this.startReindex()
|
||||
}}>Reindex Movies
|
||||
</button>
|
||||
<div>{this.state.text.map(m => (
|
||||
<div>{m}</div>
|
||||
))}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
startReindex() {
|
||||
console.log("starting");
|
||||
const updateRequest = new FormData();
|
||||
// fetch all videos available
|
||||
fetch('/api/extractvideopreviews.php', {method: 'POST', body: updateRequest})
|
||||
.then((response) => response.json()
|
||||
.then((result) => {
|
||||
console.log("returned");
|
||||
}))
|
||||
.catch(() => {
|
||||
console.log("no connection to backend");
|
||||
});
|
||||
if(this.myinterval){
|
||||
clearInterval(this.myinterval);
|
||||
}
|
||||
this.myinterval = setInterval(this.updateStatus, 1000);
|
||||
console.log("sent");
|
||||
}
|
||||
}
|
||||
|
||||
export default SettingsPage;
|
||||
Reference in New Issue
Block a user