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

improved tag clicking events

Browse Source
This commit is contained in:
lukas 2020-06-21 23:08:46 +02:00
parent ec4e54e991
commit 89153b5da9
8 changed files with 77 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/App.js
View File

@ -14,29 +14,38 @@ class App extends React.Component {
this.state = {page: "default"};
// bind this to the method for being able to call methods such as this.setstate
this.showVideo = this.showVideo.bind(this);
this.hideVideo = this.hideVideo.bind(this);
this.changeRootElement = this.changeRootElement.bind(this);
this.returnToLastElement = this.returnToLastElement.bind(this);
}
videoelement = null;
newElement = null;
MainBody() {
let page;
if (this.state.page === "default") {
page = <HomePage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
page = <HomePage viewbinding={{
changeRootElement: this.changeRootElement,
returnToLastElement: this.returnToLastElement
}}/>;
this.mypage = page;
} else if (this.state.page === "random") {
page = <RandomPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
page = <RandomPage viewbinding={{
changeRootElement: this.changeRootElement,
returnToLastElement: this.returnToLastElement
}}/>;
this.mypage = page;
} else if (this.state.page === "settings") {
page = <SettingsPage/>;
this.mypage = page;
} else if (this.state.page === "categories") {
page = <CategoryPage viewbinding={{showVideo: this.showVideo, hideVideo: this.hideVideo}}/>;
page = <CategoryPage viewbinding={{
changeRootElement: this.changeRootElement,
returnToLastElement: this.returnToLastElement
}}/>;
this.mypage = page;
} else if (this.state.page === "video") {
// show videoelement if neccessary
page = this.videoelement;
page = this.newElement;
console.log(page);
} else if (this.state.page === "lastpage") {
@ -86,19 +95,18 @@ class App extends React.Component {
);
}
showVideo(element) {
this.videoelement = element;
changeRootElement(element) {
this.newElement = element;
this.setState({
page: "video"
});
}
hideVideo() {
returnToLastElement() {
this.setState({
page: "lastpage"
});
this.element = null;
}
}

10
src/App.test.js
View File

@ -21,7 +21,7 @@ describe('<App/>', function () {
it('simulate video view change ', function () {
const wrapper = shallow(<App/>);
wrapper.instance().showVideo(<div id='testit'></div>);
wrapper.instance().changeRootElement(<div id='testit'></div>);
expect(wrapper.find("#testit")).toHaveLength(1);
});
@ -29,11 +29,11 @@ describe('<App/>', function () {
it('test hide video again', function () {
const wrapper = shallow(<App/>);
wrapper.instance().showVideo(<div id='testit'></div>);
wrapper.instance().changeRootElement(<div id='testit'></div>);
expect(wrapper.find("#testit")).toHaveLength(1);
wrapper.instance().hideVideo();
wrapper.instance().returnToLastElement();
expect(wrapper.find("HomePage")).toHaveLength(1);
});
@ -43,11 +43,11 @@ describe('<App/>', function () {
wrapper.find(".nav-link").findWhere(t => t.text() === "Random Video" && t.type() === "div").simulate("click");
wrapper.instance().showVideo(<div id='testit'></div>);
wrapper.instance().changeRootElement(<div id='testit'></div>);
expect(wrapper.find("#testit")).toHaveLength(1);
wrapper.instance().hideVideo();
wrapper.instance().returnToLastElement();
expect(wrapper.find("RandomPage")).toHaveLength(1);
});

2
src/elements/PageTitle/PageTitle.test.js
View File

@ -13,7 +13,7 @@ describe('<Preview/>', function () {
const wrapper = shallow(<PageTitle>heyimachild</PageTitle>);
const children = wrapper.children();
expect(children.at(children.length-2).text()).toBe("heyimachild");
expect(children.at(children.length - 2).text()).toBe("heyimachild");
});
it('renders pagetitle prop', function () {

7
src/elements/Preview/Preview.js
View File

@ -60,9 +60,10 @@ class Preview extends React.Component {
itemClick() {
console.log("item clicked!" + this.state.name);
this.props.viewbinding.showVideo(<Player
viewbinding={this.props.viewbinding}
movie_id={this.props.movie_id}/>);
this.props.viewbinding.changeRootElement(
<Player
viewbinding={this.props.viewbinding}
movie_id={this.props.movie_id}/>);
}
}

26
src/elements/Tag/Tag.js
View File

@ -1,6 +1,7 @@
import React from "react";
import "./Tag.css"
import VideoContainer from "../VideoContainer/VideoContainer";
class Tag extends React.Component {
constructor(props, context) {
@ -10,12 +11,33 @@ class Tag extends React.Component {
}
render() {
// todo onclick events correctlyy
return (
<button className='tagbtn' onClick={this.props.onClick}
<button className='tagbtn' onClick={() => this.TagClick()}
data-testid="Test-Tag">{this.props.children}</button>
);
}
TagClick() {
const tag = this.props.children.toString().toLowerCase();
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.props.contentbinding(
<VideoContainer
data={result}
viewbinding={this.props.viewbinding}/>, tag
);
}))
.catch(() => {
console.log("no connection to backend");
});
}
}
export default Tag;

10
src/pages/CategoryPage/CategoryPage.js
View File

@ -31,10 +31,10 @@ class CategoryPage extends React.Component {
<SideBar>
<div className='sidebartitle'>Default Tags:</div>
<Tag>All</Tag>
<Tag>FullHd</Tag>
<Tag>LowQuality</Tag>
<Tag>HD</Tag>
<Tag viewbinding={this.props.viewbinding} contentbinding={this.setPage}>All</Tag>
<Tag viewbinding={this.props.viewbinding} contentbinding={this.setPage}>FullHd</Tag>
<Tag viewbinding={this.props.viewbinding} contentbinding={this.setPage}>LowQuality</Tag>
<Tag viewbinding={this.props.viewbinding} contentbinding={this.setPage}>HD</Tag>
<hr/>
<button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
this.setState({popupvisible: true})
@ -78,7 +78,7 @@ class CategoryPage extends React.Component {
setPage = (element, tagname) => {
this.selectionelements = element;
this.setState({selected: null}); // todo save this change trigger better
this.setState({selected: tagname});
};

38
src/pages/HomePage/HomePage.js
View File

@ -118,6 +118,12 @@ class HomePage extends React.Component {
});
}
setPage = (element, tagname) => {
this.setState({tag: tagname});
// todo warning double data download here!
this.fetchVideoData(tagname);
};
render() {
return (
<div>
@ -146,26 +152,18 @@ class HomePage extends React.Component {
<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>
<Tag
viewbinding={this.props.viewbinding}
contentbinding={this.setPage}>All</Tag>
<Tag
viewbinding={this.props.viewbinding}
contentbinding={this.setPage}>FullHd</Tag>
<Tag
viewbinding={this.props.viewbinding}
contentbinding={this.setPage}>LowQuality</Tag>
<Tag
viewbinding={this.props.viewbinding}
contentbinding={this.setPage}>HD</Tag>
</SideBar>
{this.state.data.length !== 0 ?
<VideoContainer

2
src/pages/Player/Player.js
View File

@ -149,7 +149,7 @@ class Player extends React.Component {
}
closebtn() {
this.props.viewbinding.hideVideo();
this.props.viewbinding.returnToLastElement();
}
}