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

fix some tests

Browse Source 
fix merge issues
This commit is contained in:
Lukas Heiligenbrunner
2020-12-29 19:39:30 +00:00
parent e11f021efe
commit 80a04456e6
74 changed files with 8067 additions and 4481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/Player/Player.module.css
View File

@ -24,24 +24,16 @@
margin-top: 13px;
}
.button {
border-radius: 5px;
border-width: 0;
color: white;
margin-right: 15px;
padding: 6px;
}
.actorAddTile {
color: white;
cursor: pointer;
float: left;
padding-left: 25px;
padding-top: 50px;
cursor: pointer;
color: white;
transition: opacity ease 0.5s;
}
.actorAddTile:hover{
.actorAddTile:hover {
opacity: 0.7;
transition: opacity ease 0.5s;
}

87
src/pages/Player/Player.test.js
View File

@ -1,16 +1,22 @@
import {shallow} from 'enzyme';
import React from 'react';
import Player from './Player';
import {Player} from './Player';
import {callAPI} from '../../utils/Api';
describe('<Player/>', function () {
// help simulating id passed by url
function instance() {
return shallow(<Player match={{params: {id: 10}}}/>);
}
it('renders without crashing ', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
wrapper.unmount();
});
it('plyr insertion', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
wrapper.setState({
sources: [
@ -26,11 +32,11 @@ describe('<Player/>', function () {
});
function simulateLikeButtonClick() {
const wrapper = shallow(<Player/>);
const wrapper = instance();
// initial fetch for getting movie data
expect(global.fetch).toHaveBeenCalledTimes(1);
wrapper.find('.videoactions').find('button').first().simulate('click');
wrapper.find('.videoactions').find('Button').first().simulate('click');
// fetch for liking
expect(global.fetch).toHaveBeenCalledTimes(2);
@ -70,28 +76,28 @@ describe('<Player/>', function () {
});
it('show tag popup', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
expect(wrapper.find('AddTagPopup')).toHaveLength(0);
// todo dynamic button find without index
wrapper.find('.videoactions').find('button').at(1).simulate('click');
wrapper.find('.videoactions').find('Button').at(1).simulate('click');
// addtagpopup should be showing now
expect(wrapper.find('AddTagPopup')).toHaveLength(1);
});
it('test delete button', done => {
const wrapper = shallow(<Player/>);
const wrapper = instance();
const func = jest.fn();
prepareViewBinding(func);
wrapper.setProps({history: {goBack: jest.fn()}});
global.fetch = prepareFetchApi({result: 'success'});
wrapper.find('.videoactions').find('button').at(2).simulate('click');
wrapper.find('.videoactions').find('Button').at(2).simulate('click');
process.nextTick(() => {
// refetch is called so fetch called 3 times
expect(global.fetch).toHaveBeenCalledTimes(1);
expect(func).toHaveBeenCalledTimes(1);
expect(wrapper.instance().props.history.goBack).toHaveBeenCalledTimes(1);
global.fetch.mockClear();
done();
@ -99,19 +105,20 @@ describe('<Player/>', function () {
});
it('hide click ', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
const func = jest.fn();
prepareViewBinding(func);
wrapper.setProps({history: {goBack: func}});
expect(func).toHaveBeenCalledTimes(0);
wrapper.find('.closebutton').simulate('click');
// addtagpopup should be showing now
// backstack should be popped once
expect(func).toHaveBeenCalledTimes(1);
});
it('inserts Tags correctly', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
expect(wrapper.find('Tag')).toHaveLength(0);
@ -165,7 +172,7 @@ describe('<Player/>', function () {
});
it('showspopups correctly', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
wrapper.setState({popupvisible: true}, () => {
// is the AddTagpopu rendered?
@ -180,13 +187,13 @@ describe('<Player/>', function () {
it('quickadd tag correctly', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
global.callAPIMock({result: 'success'});
wrapper.setState({suggesttag: [{tag_name: 'test', tag_id: 1}]}, () => {
// mock funtion should have not been called
expect(callAPI).toBeCalledTimes(0);
wrapper.find('Tag').findWhere(p => p.text() === 'test').parent().dive().simulate('click');
wrapper.find('Tag').findWhere(p => p.props().tagInfo.tag_name === 'test').dive().simulate('click');
// mock function should have been called once
expect(callAPI).toBeCalledTimes(1);
@ -198,13 +205,13 @@ describe('<Player/>', function () {
});
it('test adding of already existing tag', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
global.callAPIMock({result: 'success'});
wrapper.setState({suggesttag: [{tag_name: 'test', tag_id: 1}], tags: [{tag_name: 'test', tag_id: 1}]}, () => {
// mock funtion should have not been called
expect(callAPI).toBeCalledTimes(0);
wrapper.find('Tag').findWhere(p => p.text() === 'test').last().parent().dive().simulate('click');
wrapper.find('Tag').findWhere(p => p.props().tagInfo.tag_name === 'test').last().dive().simulate('click');
// mock function should have been called once
expect(callAPI).toBeCalledTimes(1);
@ -217,7 +224,7 @@ describe('<Player/>', function () {
});
function generatetag() {
const wrapper = shallow(<Player/>);
const wrapper = instance();
expect(wrapper.find('Tag')).toHaveLength(0);
@ -233,7 +240,7 @@ describe('<Player/>', function () {
}
it('test addactor popup showing', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
expect(wrapper.find('AddActorPopup')).toHaveLength(0);
@ -244,7 +251,7 @@ describe('<Player/>', function () {
});
it('test hiding of addactor popup', function () {
const wrapper = shallow(<Player/>);
const wrapper = instance();
wrapper.instance().addActor();
expect(wrapper.find('AddActorPopup')).toHaveLength(1);
@ -253,4 +260,36 @@ describe('<Player/>', function () {
expect(wrapper.find('AddActorPopup')).toHaveLength(0);
});
it('test addtagpopup hiding', function () {
const wrapper = instance();
wrapper.setState({popupvisible: true});
expect(wrapper.find('AddTagPopup')).toHaveLength(1);
wrapper.find('AddTagPopup').props().onHide();
expect(wrapper.find('AddTagPopup')).toHaveLength(0);
});
it('test insertion of actor tiles', function () {
const wrapper = instance();
wrapper.setState({
actors: [{
thumbnail: '',
name: 'testname',
actor_id: 42
}]
});
expect(wrapper.find('ActorTile')).toHaveLength(1);
});
it('test Addactor button', function () {
const wrapper = instance();
expect(wrapper.state().actorpopupvisible).toBe(false);
wrapper.find('.actorAddTile').simulate('click');
expect(wrapper.state().actorpopupvisible).toBe(true);
});
});

301
src/pages/Player/Player.js → src/pages/Player/Player.tsx
View File

@ -12,16 +12,36 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
import AddActorPopup from '../../elements/Popups/AddActorPopup/AddActorPopup';
import ActorTile from '../../elements/ActorTile/ActorTile';
import GlobalInfos from '../../utils/GlobalInfos';
import {withRouter} from 'react-router-dom';
import {callAPI, getBackendDomain} from '../../utils/Api';
import {RouteComponentProps} from 'react-router';
import {GeneralSuccess} from '../../api/GeneralTypes';
import {ActorType, loadVideoType, TagType} from '../../api/VideoTypes';
import PlyrJS from 'plyr';
import {Button} from '../../elements/GPElements/Button';
interface myprops extends RouteComponentProps<{ id: string }> {}
interface mystate {
sources?: PlyrJS.SourceInfo,
movie_id: number,
movie_name: string,
likes: number,
quality: number,
length: number,
tags: TagType[],
suggesttag: TagType[],
popupvisible: boolean,
actorpopupvisible: boolean,
actors: ActorType[]
}
/**
* Player page loads when a video is selected to play and handles the video view
* and actions such as tag adding and liking
*/
class Player extends React.Component {
options = {
export class Player extends React.Component<myprops, mystate> {
options: PlyrJS.Options = {
controls: [
'play-large', // The large play button in the center
'play', // Play/pause playback
@ -38,130 +58,31 @@ class Player extends React.Component {
]
};
constructor(props, context) {
super(props, context);
constructor(props: myprops) {
super(props);
this.state = {
sources: null,
movie_id: null,
movie_name: null,
likes: null,
quality: null,
length: null,
movie_id: -1,
movie_name: '',
likes: 0,
quality: 0,
length: 0,
tags: [],
suggesttag: [],
popupvisible: false,
actorpopupvisible: false
actorpopupvisible: false,
actors: []
};
this.quickAddTag = this.quickAddTag.bind(this);
}
componentDidMount() {
componentDidMount(): void {
// initial fetch of current movie data
this.fetchMovieData();
}
/**
* quick add callback to add tag to db and change gui correctly
* @param tagId id of tag to add
* @param tagName name of tag to add
*/
quickAddTag(tagId, tagName) {
callAPI('tags.php', {action: 'addTag', id: tagId, movieid: this.props.movie_id}, (result) => {
if (result.result !== 'success') {
console.error('error occured while writing to db -- todo error handling');
console.error(result.result);
} else {
// check if tag has already been added
const tagIndex = this.state.tags.map(function (e) {
return e.tag_name;
}).indexOf(tagName);
// only add tag if it isn't already there
if (tagIndex === -1) {
// update tags if successful
let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
const quickaddindex = this.state.suggesttag.map(function (e) {
return e.tag_id;
}).indexOf(tagId);
// check if tag is available in quickadds
if (quickaddindex !== -1) {
array.splice(quickaddindex, 1);
this.setState({
tags: [...this.state.tags, {tag_name: tagName}],
suggesttag: array
});
} else {
this.setState({
tags: [...this.state.tags, {tag_name: tagName}]
});
}
}
}
});
}
/**
* handle the popovers generated according to state changes
* @returns {JSX.Element}
*/
handlePopOvers() {
return (
<>
{this.state.popupvisible ?
<AddTagPopup onHide={() => {this.setState({popupvisible: false});}}
submit={this.quickAddTag}
movie_id={this.state.movie_id}/> :
null
}
{
this.state.actorpopupvisible ?
<AddActorPopup onHide={() => {
this.refetchActors();
this.setState({actorpopupvisible: false});
}} movie_id={this.state.movie_id}/> : null
}
</>
);
}
/**
* generate sidebar with all items
*/
assembleSideBar() {
return (
<SideBar>
<SideBarTitle>Infos:</SideBarTitle>
<Line/>
<SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
{this.state.quality !== 0 ?
<SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
{this.state.length !== 0 ?
<SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem> : null}
<Line/>
<SideBarTitle>Tags:</SideBarTitle>
{this.state.tags.map((m) => (
<Tag key={m.tag_name}>{m.tag_name}</Tag>
))}
<Line/>
<SideBarTitle>Tag Quickadd:</SideBarTitle>
{this.state.suggesttag.map((m) => (
<Tag
key={m.tag_name}
onclick={() => {
this.quickAddTag(m.tag_id, m.tag_name);
}}>
{m.tag_name}
</Tag>
))}
</SideBar>
);
}
render() {
render(): JSX.Element {
return (
<div id='videocontainer'>
<PageTitle
@ -178,25 +99,18 @@ class Player extends React.Component {
options={this.options}/> :
<div>not loaded yet</div>}
<div className={style.videoactions}>
<button className={style.button} style={{backgroundColor: 'green'}} onClick={() => this.likebtn()}>
Like this Video!
</button>
<button className={style.button} style={{backgroundColor: '#3574fe'}} onClick={() => this.setState({popupvisible: true})}>
Give this Video a Tag
</button>
<button className={style.button} style={{backgroundColor: 'red'}} onClick={() => {
this.deleteVideo();
}}>Delete Video
</button>
<Button onClick={(): void => this.likebtn()} title='Like this Video!' color={{backgroundColor: 'green'}}/>
<Button onClick={(): void => this.setState({popupvisible: true})} title='Give this Video a Tag' color={{backgroundColor: '#3574fe'}}/>
<Button title='Delete Video' onClick={(): void => {this.deleteVideo();}} color={{backgroundColor: 'red'}}/>
</div>
{/* rendering of actor tiles */}
<div className={style.actorcontainer}>
{this.state.actors ?
this.state.actors.map((actr) => (
this.state.actors.map((actr: ActorType) => (
<ActorTile actor={actr}/>
)) : <></>
}
<div className={style.actorAddTile} onClick={() => {
<div className={style.actorAddTile} onClick={(): void => {
this.addActor();
}}>
<div className={style.actorAddTile_thumbnail}>
@ -208,7 +122,7 @@ class Player extends React.Component {
</div>
</div>
</div>
<button className={style.closebutton} onClick={() => this.closebtn()}>Close</button>
<button className={style.closebutton} onClick={(): void => this.closebtn()}>Close</button>
{
// handle the popovers switched on and off according to state changes
this.handlePopOvers()
@ -217,11 +131,115 @@ class Player extends React.Component {
);
}
/**
* generate sidebar with all items
*/
assembleSideBar(): JSX.Element {
return (
<SideBar>
<SideBarTitle>Infos:</SideBarTitle>
<Line/>
<SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
{this.state.quality !== 0 ?
<SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
{this.state.length !== 0 ?
<SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem> : null}
<Line/>
<SideBarTitle>Tags:</SideBarTitle>
{this.state.tags.map((m: TagType) => (
<Tag tagInfo={m}/>
))}
<Line/>
<SideBarTitle>Tag Quickadd:</SideBarTitle>
{this.state.suggesttag.map((m: TagType) => (
<Tag
tagInfo={m}
key={m.tag_name}
onclick={(): void => {
this.quickAddTag(m.tag_id, m.tag_name);
}}/>
))}
</SideBar>
);
}
/**
* quick add callback to add tag to db and change gui correctly
* @param tagId id of tag to add
* @param tagName name of tag to add
*/
quickAddTag(tagId: number, tagName: string): void {
callAPI('tags.php', {
action: 'addTag',
id: tagId,
movieid: this.props.match.params.id
}, (result: GeneralSuccess) => {
if (result.result !== 'success') {
console.error('error occured while writing to db -- todo error handling');
console.error(result.result);
} else {
// check if tag has already been added
const tagIndex = this.state.tags.map(function (e: TagType) {
return e.tag_name;
}).indexOf(tagName);
// only add tag if it isn't already there
if (tagIndex === -1) {
// update tags if successful
let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
const quickaddindex = this.state.suggesttag.map(function (e: TagType) {
return e.tag_id;
}).indexOf(tagId);
// check if tag is available in quickadds
if (quickaddindex !== -1) {
array.splice(quickaddindex, 1);
this.setState({
tags: [...this.state.tags, {tag_name: tagName, tag_id: tagId}],
suggesttag: array
});
} else {
this.setState({
tags: [...this.state.tags, {tag_name: tagName, tag_id: tagId}]
});
}
}
}
});
}
/**
* handle the popovers generated according to state changes
* @returns {JSX.Element}
*/
handlePopOvers(): JSX.Element {
return (
<>
{this.state.popupvisible ?
<AddTagPopup onHide={(): void => {
this.setState({popupvisible: false});
}}
submit={this.quickAddTag}
movie_id={this.state.movie_id}/> :
null
}
{
this.state.actorpopupvisible ?
<AddActorPopup onHide={(): void => {
this.refetchActors();
this.setState({actorpopupvisible: false});
}} movie_id={this.state.movie_id}/> : null
}
</>
);
}
/**
* fetch all the required infos of a video from backend
*/
fetchMovieData() {
callAPI('video.php', {action: 'loadVideo', movieid: this.props.movie_id}, result => {
fetchMovieData(): void {
callAPI('video.php', {action: 'loadVideo', movieid: this.props.match.params.id}, (result: loadVideoType) => {
this.setState({
sources: {
type: 'video',
@ -243,7 +261,6 @@ class Player extends React.Component {
suggesttag: result.suggesttag,
actors: result.actors
});
console.log(this.state);
});
}
@ -251,8 +268,8 @@ class Player extends React.Component {
/**
* click handler for the like btn
*/
likebtn() {
callAPI('video.php', {action: 'addLike', movieid: this.props.movie_id}, result => {
likebtn(): void {
callAPI('video.php', {action: 'addLike', movieid: this.props.match.params.id}, (result: GeneralSuccess) => {
if (result.result === 'success') {
// likes +1 --> avoid reload of all data
this.setState({likes: this.state.likes + 1});
@ -267,18 +284,18 @@ class Player extends React.Component {
* closebtn click handler
* calls callback to viewbinding to show previous page agains
*/
closebtn() {
GlobalInfos.getViewBinding().returnToLastElement();
closebtn(): void {
this.props.history.goBack();
}
/**
* delete the current video and return to last page
*/
deleteVideo() {
callAPI('video.php', {action: 'deleteVideo', movieid: this.props.movie_id}, result => {
deleteVideo(): void {
callAPI('video.php', {action: 'deleteVideo', movieid: this.props.match.params.id}, (result: GeneralSuccess) => {
if (result.result === 'success') {
// return to last element if successful
GlobalInfos.getViewBinding().returnToLastElement();
this.props.history.goBack();
} else {
console.error('an error occured while liking');
console.error(result);
@ -289,15 +306,19 @@ class Player extends React.Component {
/**
* show the actor add popup
*/
addActor() {
addActor(): void {
this.setState({actorpopupvisible: true});
}
refetchActors() {
callAPI('actor.php', {action: 'getActorsOfVideo', videoid: this.props.movie_id}, result => {
/**
* fetch the available video actors again
*/
refetchActors(): void {
callAPI<ActorType[]>('actor.php', {action: 'getActorsOfVideo', videoid: this.props.match.params.id}, result => {
this.setState({actors: result});
});
}
}
export default Player;
export default withRouter(Player);