From 836f5f342a5b4b750a9a8b0ce4a90e04add511c4 Mon Sep 17 00:00:00 2001 From: Lukas Heiligenbrunner Date: Sun, 7 Jun 2020 21:42:01 +0200 Subject: [PATCH] added a videocontainer where previews can be stored in - usefull for category page --- api/Tags.php | 15 ------- src/App.js | 8 ++-- src/css/Preview.css | 20 ++++++---- src/elements/Preview.js | 53 ++++++++++++------------ src/elements/VideoContainer.js | 73 ++++++++++++++++++++++++++++++++++ src/pages/CategoryPage.js | 13 +++--- src/pages/HomePage.js | 72 +++++++-------------------------- 7 files changed, 139 insertions(+), 115 deletions(-) create mode 100644 src/elements/VideoContainer.js diff --git a/api/Tags.php b/api/Tags.php index 1bd729c..1c96582 100644 --- a/api/Tags.php +++ b/api/Tags.php @@ -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; } } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 60627fa..72b5c03 100644 --- a/src/App.js +++ b/src/App.js @@ -32,11 +32,13 @@ class App extends React.Component { page = ; this.mypage = page; } else if (this.state.page === "categories") { - page = ; + page = ; 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() { diff --git a/src/css/Preview.css b/src/css/Preview.css index 02d8a83..a3f1403 100644 --- a/src/css/Preview.css +++ b/src/css/Preview.css @@ -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; +} diff --git a/src/elements/Preview.js b/src/elements/Preview.js index 744e424..43d48ce 100644 --- a/src/elements/Preview.js +++ b/src/elements/Preview.js @@ -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( + + ); + })) + .catch(() => { + console.log("no connection to backend"); + }); } render() { return ( -
this.itemClick()}> -
{this.props.name}
-
- Pic loading. -
-
- +
this.itemClick()}> +
+ {this.props.name}
); } - 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); } } diff --git a/src/elements/VideoContainer.js b/src/elements/VideoContainer.js new file mode 100644 index 0000000..5ed8ac2 --- /dev/null +++ b/src/elements/VideoContainer.js @@ -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 ( +
+ {this.state.loadeditems.map(elem => ( + + ))} +
+ ); + } + + 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; \ No newline at end of file diff --git a/src/pages/CategoryPage.js b/src/pages/CategoryPage.js index 4f3da7d..899656e 100644 --- a/src/pages/CategoryPage.js +++ b/src/pages/CategoryPage.js @@ -30,24 +30,21 @@ class CategoryPage extends React.Component {
-
Infos:
-
Default Tags:
- { - this.setState({tag: "All"}); - this.fetchVideoData("all"); - }}>All - + All FullHd LowQuality HD +
+
{this.state.loadedtags ? this.state.loadedtags.map((m) => ( + tag_id={m.tag_id} + viewbinding={this.props.viewbinding}/> )) : "loading" } diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 5b3e096..cadea97 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -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 (
@@ -134,15 +126,10 @@ class HomePage extends React.Component { }}>HD -
- {this.state.loadeditems.map(elem => ( - - ))} -
+ {this.state.data.length !== 0 ? + : null}
@@ -150,35 +137,6 @@ class HomePage extends React.Component {
); } - - 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;