iconify like, delete and addtag buttons

fix lukas/openmediacenter#45

src/elements/GPElements/Button.module.css

@@ -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;
+}

src/elements/GPElements/Button.test.js

@@ -1,14 +1,6 @@
 import {shallow} from 'enzyme';
 import React from 'react';
-import {Button} from './Button';
+import {Button, IconButton} from './Button';
-
-function prepareFetchApi(response) {
-    const mockJsonPromise = Promise.resolve(response);
-    const mockFetchPromise = Promise.resolve({
-        json: () => mockJsonPromise
-    });
-    return (jest.fn().mockImplementation(() => mockFetchPromise));
-}
 
 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);
+    });
+});

src/elements/GPElements/Button.tsx

@@ -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>
+    );
+}

src/pages/Player/Player.test.js

@@ -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')

src/pages/Player/Player.tsx

@@ -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'}} />
+                        <IconButton icon={faThumbsUp} onClick={(): void => this.likebtn()} title='Like!' />
-                        <Button
+                        <IconButton icon={faTag} onClick={(): void => this.setState({popupvisible: true})} title='Add Tag!' />
-                            onClick={(): void => this.setState({popupvisible: true})}
+                        <IconButton
-                            title='Give this Video a Tag'
+                            icon={faTrash}
-                            color={{backgroundColor: '#3574fe'}}
+                            onClick={(): void => this.setState({deletepopupvisible: true})}
-                        />
+                            title='Delete Video!'
-                        <Button
-                            title='Delete Video'
-                            onClick={(): void => {
-                                this.setState({deletepopupvisible: true});
-                            }}
-                            color={{backgroundColor: 'red'}}
                         />
                     </div>
                     {this.assembleActorTiles()}