add Tag option to delete tag

fix code style warnings

api/src/handlers/Tags.php

@@ -9,6 +9,7 @@ class Tags extends RequestBase {
     function initHandlers() {
         $this->addToDB();
         $this->getFromDB();
+        $this->delete();
     }
 
     private function addToDB() {
@@ -65,4 +66,19 @@ class Tags extends RequestBase {
             $this->commitMessage(json_encode($rows));
         });
     }
+
+    private function delete() {
+        /**
+         * delete a Tag from a video
+         */
+        $this->addActionHandler("deleteVideoTag", function () {
+            $movieid = $_POST['video_id'];
+            $tagid = $_POST['tag_id'];
+
+            // skip tag add if already assigned
+            $query = "DELETE FROM video_tags WHERE tag_id=$tagid AND video_id=$movieid";
+
+            $this->commitMessage($this->conn->query($query) ? '{"result":"success"}' : '{"result":"' . $this->conn->error . '"}');
+        });
+    }
 }

src/elements/ActorTile/ActorTile.tsx

@@ -31,8 +31,11 @@ class ActorTile extends React.Component<props> {
 
     }
 
-    renderActorTile(customclickhandler: (actor: ActorType) => void): JSX.Element {
+    /**
-        console.log(this.props.actor);
+     * render the Actor Tile with its pic
+     * @param customclickhandler a custom click handler to be called onclick instead of Link
+     */
+    private renderActorTile(customclickhandler: (actor: ActorType) => void): JSX.Element {
         return (
             <div className={style.actortile} onClick={(): void => customclickhandler(this.props.actor)}>
                 <div className={style.actortile_thumbnail}>

src/elements/Preview/Preview.module.css

@@ -7,22 +7,22 @@
 }
 
 .videopreview:hover .quickactions {
-    display: block;
-    position: absolute;
-
-    width: 35px;
-    height: 35px;
-
-    top: 5px;
-    right: 5px;
-    color: lightgrey;
-
-    text-align: center;
-
-    border-radius: 50%;
     background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 50%;
+
+    color: lightgrey;
+    display: block;
+
+    height: 35px;
     opacity: 0.7;
     padding-top: 5px;
+
+    position: absolute;
+
+    right: 5px;
+    text-align: center;
+    top: 5px;
+    width: 35px;
 }
 
 .quickactions {

src/elements/QuickActionPop/QuickActionPop.tsx

@@ -47,4 +47,13 @@ class QuickActionPop extends React.Component<props> {
     }
 }
 
+interface Itemprops {
+    title: string;
+    onClick: () => void
+}
+
+export const ContextItem = (props: Itemprops): JSX.Element => (
+    <div onClick={props.onClick} className={style.ContextItem}>{props.title}</div>
+);
+
 export default QuickActionPop;

src/elements/QuickActionPop/QuickActionPopup.module.css

@@ -1,7 +1,17 @@
 .quickaction {
     background-color: white;
-    width: 90px;
     height: 120px;
-    z-index: 2;
     position: absolute;
+    width: 90px;
+    z-index: 2;
+}
+
+.ContextItem {
+    height: 40px;
+    padding-top: 10px;
+    text-align: center;
+}
+
+.ContextItem:hover {
+    background-color: lightgray;
 }

src/pages/Player/Player.tsx

@@ -4,23 +4,24 @@ import style from './Player.module.css';
 import plyrstyle from 'plyr-react/dist/plyr.css';
 
 import {Plyr} from 'plyr-react';
+import PlyrJS from 'plyr';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
+import {withRouter} from 'react-router-dom';
+import {RouteComponentProps} from 'react-router';
+
 import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
 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 AddActorPopup from '../../elements/Popups/AddActorPopup/AddActorPopup';
 import ActorTile from '../../elements/ActorTile/ActorTile';
-import {Link, withRouter} from 'react-router-dom';
 import {callAPI, getBackendDomain} from '../../utils/Api';
-import {RouteComponentProps} from 'react-router';
 import {GeneralSuccess} from '../../types/GeneralTypes';
 import {ActorType, TagType} from '../../types/VideoTypes';
-import PlyrJS from 'plyr';
 import {Button} from '../../elements/GPElements/Button';
 import {VideoTypes} from '../../types/ApiTypes';
-import QuickActionPop from '../../elements/QuickActionPop/QuickActionPop';
+import QuickActionPop, {ContextItem} from '../../elements/QuickActionPop/QuickActionPop';
 
 interface myprops extends RouteComponentProps<{ id: string }> {}
 
@@ -61,7 +62,7 @@ export class Player extends React.Component<myprops, mystate> {
         ]
     };
 
-    private contextpos = {x: 0, y: 0};
+    private contextpos = {x: 0, y: 0, tagid: -1};
 
     constructor(props: myprops) {
         super(props);
@@ -81,6 +82,7 @@ export class Player extends React.Component<myprops, mystate> {
         };
 
         this.quickAddTag = this.quickAddTag.bind(this);
+        this.deleteTag = this.deleteTag.bind(this);
     }
 
     componentDidMount(): void {
@@ -155,7 +157,7 @@ export class Player extends React.Component<myprops, mystate> {
                 {this.state.tags.map((m: TagType) => (
                     <Tag tagInfo={m} onContextMenu={(pos): void => {
                         this.setState({tagContextMenu: true});
-                        this.contextpos = pos;
+                        this.contextpos = {...pos, tagid: m.tag_id};
                     }}/>
                 ))}
                 <Line/>
@@ -338,14 +340,39 @@ export class Player extends React.Component<myprops, mystate> {
             return (
                 <QuickActionPop onHide={(): void => this.setState({tagContextMenu: false})}
                                 position={this.contextpos}>
-                    <Button title='Delete'
+                    <ContextItem title='Delete' onClick={(): void => this.deleteTag(this.contextpos.tagid)}/>
-                            color={{backgroundColor: 'red'}}
-                            onClick={(): void => {}}/>
                 </QuickActionPop>);
         } else {
             return <></>;
         }
     }
+
+    /**
+     * delete a tag from the current video
+     */
+    private deleteTag(tag_id: number): void {
+        callAPI<GeneralSuccess>('tags.php',
+            {action: 'deleteVideoTag', video_id: this.props.match.params.id, tag_id: tag_id},
+            (res) => {
+                if (res.result !== 'success') {
+                    console.log("deletion errored!");
+
+                    this.setState({tagContextMenu: false});
+                }else{
+                    // check if tag has already been added
+                    const tagIndex = this.state.tags.map(function (e: TagType) {
+                        return e.tag_id;
+                    }).indexOf(tag_id);
+
+
+                    // delete tag from array
+                    const newTagArray = this.state.tags;
+                    newTagArray.splice(tagIndex, 1);
+
+                    this.setState({tags: newTagArray, tagContextMenu: false});
+                }
+            });
+    }
 }
 
 export default withRouter(Player);