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

iconify like, delete and addtag buttons

Browse Source 
fix lukas/openmediacenter#45
This commit is contained in:
Lukas Heiligenbrunner
2021-09-29 12:15:16 +02:00
parent c2a5d88743
commit 3d1671d6b5
5 changed files with 62 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/elements/GPElements/Button.module.css
View File

@@ -2,7 +2,10 @@
background-color: green;
border-radius: 5px;
border-width: 0;
color: white;
margin-right: 15px;
padding: 6px;
}
.button:hover{
opacity: 0.7;
}

31
src/elements/GPElements/Button.test.js
View File

@@ -1,14 +1,6 @@
import {shallow} from 'enzyme';
import React from 'react';
import {Button} from './Button';
function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
import {Button, IconButton} from './Button';
describe('<Button/>', function () {
it('renders without crashing ', function () {
@@ -30,3 +22,24 @@ describe('<Button/>', function () {
expect(func).toHaveBeenCalledTimes(1);
});
});
describe('<IconButton/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<IconButton onClick={() => {}} title='test'/>);
wrapper.unmount();
});
it('renders title', function () {
const wrapper = shallow(<IconButton onClick={() => {}} title='test1'/>);
expect(wrapper.text()).toBe('<FontAwesomeIcon />test1');
});
it('test onclick handling', () => {
const func = jest.fn();
const wrapper = shallow(<IconButton onClick={func} title='test1'/>);
wrapper.find('button').simulate('click');
expect(func).toHaveBeenCalledTimes(1);
});
});

26
src/elements/GPElements/Button.tsx
View File

@@ -1,5 +1,8 @@
import React from 'react';
import style from './Button.module.css';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {IconDefinition} from '@fortawesome/fontawesome-common-types';
import GlobalInfos from '../../utils/GlobalInfos';
interface ButtonProps {
title: string | JSX.Element;
@@ -8,9 +11,30 @@ interface ButtonProps {
}
export function Button(props: ButtonProps): JSX.Element {
const theme = GlobalInfos.getThemeStyle();
return (
<button className={style.button} style={props.color} onClick={props.onClick}>
<button className={style.button + ' ' + theme.textcolor} style={props.color} onClick={props.onClick}>
{props.title}
</button>
);
}
interface IconButtonProps {
title: string | JSX.Element;
onClick?: () => void;
icon: IconDefinition;
}
export function IconButton(props: IconButtonProps): JSX.Element {
const theme = GlobalInfos.getThemeStyle();
return (
<button className={style.button + ' ' + theme.textcolor} style={{backgroundColor: '#00000000'}} onClick={props.onClick}>
<span style={{fontSize: 12}}>
<FontAwesomeIcon className={theme.textcolor} icon={props.icon} size='2x' />
</span>
<span style={{marginLeft: 10}}>{props.title}</span>
</button>
);
}

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

@@ -38,7 +38,7 @@ describe('<Player/>', function () {
// initial fetch for getting movie data
expect(global.fetch).toHaveBeenCalledTimes(1);
wrapper.find('.videoactions').find('Button').first().simulate('click');
wrapper.find('.videoactions').find('IconButton').first().simulate('click');
// fetch for liking
expect(global.fetch).toHaveBeenCalledTimes(2);
@@ -81,7 +81,7 @@ describe('<Player/>', function () {
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('IconButton').at(1).simulate('click');
// addtagpopup should be showing now
expect(wrapper.find('AddTagPopup')).toHaveLength(1);
});
@@ -106,7 +106,7 @@ describe('<Player/>', function () {
wrapper.setContext({VideosFullyDeleteable: false})
// request the popup to pop
wrapper.find('.videoactions').find('Button').at(2).simulate('click');
wrapper.find('.videoactions').find('IconButton').at(2).simulate('click');
// click the first submit button
wrapper.find('ButtonPopup').dive().find('Button').at(0).simulate('click')

22
src/pages/Player/Player.tsx
View File

@@ -9,7 +9,7 @@ import Tag from '../../elements/Tag/Tag';
import AddTagPopup from '../../elements/Popups/AddTagPopup/AddTagPopup';
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
import {faPlusCircle, faTag, faThumbsUp, faTrash} from '@fortawesome/free-solid-svg-icons';
import AddActorPopup from '../../elements/Popups/AddActorPopup/AddActorPopup';
import ActorTile from '../../elements/ActorTile/ActorTile';
import {withRouter} from 'react-router-dom';
@@ -18,7 +18,7 @@ import {RouteComponentProps} from 'react-router';
import {DefaultPlyrOptions, GeneralSuccess} from '../../types/GeneralTypes';
import {ActorType, TagType} from '../../types/VideoTypes';
import PlyrJS from 'plyr';
import {Button} from '../../elements/GPElements/Button';
import {IconButton} from '../../elements/GPElements/Button';
import {VideoTypes} from '../../types/ApiTypes';
import GlobalInfos from '../../utils/GlobalInfos';
import {ButtonPopup} from '../../elements/Popups/ButtonPopup/ButtonPopup';
@@ -90,18 +90,12 @@ export class Player extends React.Component<Props, mystate> {
<div>not loaded yet</div>
)}
<div className={style.videoactions}>
<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.setState({deletepopupvisible: true});
}}
color={{backgroundColor: 'red'}}
<IconButton icon={faThumbsUp} onClick={(): void => this.likebtn()} title='Like!' />
<IconButton icon={faTag} onClick={(): void => this.setState({popupvisible: true})} title='Add Tag!' />
<IconButton
icon={faTrash}
onClick={(): void => this.setState({deletepopupvisible: true})}
title='Delete Video!'
/>
</div>
{this.assembleActorTiles()}