show a span on tag hover to delete it maybe

# Conflicts:
#	api/src/handlers/Tags.php
#	src/elements/ActorTile/ActorTile.tsx
#	src/elements/Preview/Preview.tsx
#	src/elements/Tag/Tag.tsx
#	src/pages/Player/Player.tsx

api/src/handlers/Tags.php

@@ -0,0 +1,84 @@
+<?php
+require_once 'RequestBase.php';
+
+/**
+ * Class Tags
+ * backend to handle Tag database interactions
+ */
+class Tags extends RequestBase {
+    function initHandlers() {
+        $this->addToDB();
+        $this->getFromDB();
+        $this->delete();
+    }
+
+    private function addToDB() {
+        /**
+         * creates a new tag
+         * query requirements:
+         * * tagname -- name of the new tag
+         */
+        $this->addActionHandler("createTag", function () {
+            // skip tag create if already existing
+            $query = "INSERT IGNORE INTO tags (tag_name) VALUES ('" . $_POST['tagname'] . "')";
+
+            if ($this->conn->query($query) === TRUE) {
+                $this->commitMessage('{"result":"success"}');
+            } else {
+                $this->commitMessage('{"result":"' . $this->conn->error . '"}');
+            }
+        });
+
+        /**
+         * adds a new tag to an existing video
+         *
+         * query requirements:
+         * * movieid  -- the id of the video to add the tag to
+         * * id -- the tag id which tag to add
+         */
+        $this->addActionHandler("addTag", function () {
+            $movieid = $_POST['movieid'];
+            $tagid = $_POST['id'];
+
+            // skip tag add if already assigned
+            $query = "INSERT IGNORE INTO video_tags(tag_id, video_id) VALUES ('$tagid','$movieid')";
+
+            if ($this->conn->query($query) === TRUE) {
+                $this->commitMessage('{"result":"success"}');
+            } else {
+                $this->commitMessage('{"result":"' . $this->conn->error . '"}');
+            }
+        });
+    }
+
+    private function getFromDB() {
+        /**
+         * returns all available tags from database
+         */
+        $this->addActionHandler("getAllTags", function () {
+            $query = "SELECT tag_name,tag_id from tags";
+            $result = $this->conn->query($query);
+
+            $rows = array();
+            while ($r = mysqli_fetch_assoc($result)) {
+                array_push($rows, $r);
+            }
+            $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

@@ -30,7 +30,11 @@ class ActorTile extends React.Component<props> {
         }
     }
 
-    renderActorTile(customclickhandler: (actor: ActorType) => void): JSX.Element {
+    /**
+     * 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/Popups/PopupBase.tsx

@@ -72,7 +72,7 @@ class PopupBase extends React.Component<props> {
     }
 
     /**
-     * Alert if clicked on outside of element
+     * handle click on outside of element
      */
     handleClickOutside(event: MouseEvent): void {
         if (this.wrapperRef && this.wrapperRef.current && !this.wrapperRef.current.contains(event.target as Node)) {

src/elements/Preview/Preview.module.css

@@ -6,6 +6,29 @@
     text-align: center;
 }
 
+.videopreview:hover .quickactions {
+    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 {
+    display: none;
+}
+
 .previewpic {
     height: 80%;
     min-height: 150px;
@@ -38,6 +61,7 @@
     margin-left: 25px;
     margin-top: 25px;
     opacity: 0.85;
+    position: relative;
 }
 
 .videopreview:hover {

src/elements/Preview/Preview.tsx

@@ -3,6 +3,9 @@ import style from './Preview.module.css';
 import {Spinner} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
 import GlobalInfos from '../../utils/GlobalInfos';
+import {faEllipsisV} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import QuickActionPop from '../QuickActionPop/QuickActionPop';
 import {APINode, callAPIPlain} from '../../utils/Api';
 
 interface PreviewProps {
@@ -12,6 +15,7 @@ interface PreviewProps {
 
 interface PreviewState {
     previewpicture: string | null;
+    optionsvisible: boolean;
 }
 
 /**
@@ -23,7 +27,8 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
         super(props);
 
         this.state = {
-            previewpicture: null
+            previewpicture: null,
+            optionsvisible: false
         };
     }
 
@@ -38,9 +43,16 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
     render(): JSX.Element {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
-            <Link to={'/player/' + this.props.movie_id}>
-                <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
-                    <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
+            <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
+                <div className={style.quickactions} onClick={(): void => this.setState({optionsvisible: true})}>
+                    <FontAwesomeIcon style={{
+                        verticalAlign: 'middle',
+                        fontSize: '25px'
+                    }} icon={faEllipsisV} size='1x'/>
+                </div>
+                {this.popupvisible()}
+                <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
+                <Link to={'/player/' + this.props.movie_id}>
                     <div className={style.previewpic}>
                         {this.state.previewpicture !== null ?
                             <img className={style.previewimage}
@@ -49,14 +61,21 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
                             <span className={style.loadAnimation}><Spinner animation='border'/></span>}
 
                     </div>
-                    <div className={style.previewbottom}>
+                </Link>
+                <div className={style.previewbottom}>
 
-                    </div>
                 </div>
-            </Link>
-
+            </div>
         );
     }
+
+
+    popupvisible(): JSX.Element {
+        if (this.state.optionsvisible)
+            return (<QuickActionPop position={{x: 50, y: 50}} onHide={(): void => this.setState({optionsvisible: false})}>heeyyho</QuickActionPop>);
+        else
+            return <></>;
+    }
 }
 
 /**

src/elements/QuickActionPop/QuickActionPop.tsx

@@ -0,0 +1,59 @@
+import React, {RefObject} from 'react';
+import style from './QuickActionPopup.module.css';
+
+interface props {
+    position: {
+        x: number,
+        y: number
+    },
+    onHide: () => void
+}
+
+class QuickActionPop extends React.Component<props> {
+    private readonly wrapperRef: RefObject<HTMLDivElement>;
+
+    constructor(props: props) {
+        super(props);
+
+        this.wrapperRef = React.createRef();
+
+        this.handleClickOutside = this.handleClickOutside.bind(this);
+    }
+
+
+    componentDidMount(): void {
+        document.addEventListener('mousedown', this.handleClickOutside);
+    }
+
+    componentWillUnmount(): void {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+
+    render(): JSX.Element {
+        return (
+            <div ref={this.wrapperRef} className={style.quickaction} style={{top: this.props.position.y, left: this.props.position.x}}>
+                {this.props.children}
+            </div>
+        );
+    }
+
+    /**
+     * trigger hide if we click outside the div
+     */
+    handleClickOutside(event: MouseEvent): void {
+        if (this.wrapperRef && this.wrapperRef.current && !this.wrapperRef.current.contains(event.target as Node)) {
+            this.props.onHide();
+        }
+    }
+}
+
+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

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

src/elements/Tag/Tag.module.css

@@ -1,19 +1,37 @@
-.tagbtn {
-    background-color: #3574fe;
+.btnnostyle {
+    background: none;
+    color: inherit;
     border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+}
+
+.tagbtnContainer {
+    background-color: #3574fe;
     border-radius: 10px;
     color: white;
     margin-left: 10px;
     margin-top: 15px;
+    width: 50px;
     /*font-weight: bold;*/
     padding: 5px 15px 5px 15px;
 }
 
-.tagbtn:focus {
+.tagbtnContainer:focus {
     background-color: #004eff;
     outline: none;
 }
 
-.tagbtn:hover {
+.tagbtnContainer:hover {
     background-color: #004eff;
 }
+
+.deletebtn{
+    display: none;
+}
+
+.tagbtnContainer:hover .deletebtn {
+    display: inline;
+}

src/elements/Tag/Tag.tsx

@@ -1,18 +1,33 @@
-import React from 'react';
+import React, {SyntheticEvent} from 'react';
 
 import styles from './Tag.module.css';
 import {Link} from 'react-router-dom';
 import {TagType} from '../../types/VideoTypes';
 
 interface props {
-    onclick?: (_: string) => void
-    tagInfo: TagType
+    onclick?: (_: string) => void;
+    tagInfo: TagType;
+    onContextMenu?: (pos: {x: number, y: number}) => void
+}
+
+interface state {
+    contextVisible: boolean
 }
 
 /**
  * A Component representing a single Category tag
  */
-class Tag extends React.Component<props> {
+class Tag extends React.Component<props, state> {
+    constructor(props: Readonly<props> | props) {
+        super(props);
+
+        this.state = {
+            contextVisible: false
+        };
+
+        this.contextmenu = this.contextmenu.bind(this);
+    }
+
     render(): JSX.Element {
         if (this.props.onclick) {
             return this.renderButton();
@@ -27,8 +42,13 @@ class Tag extends React.Component<props> {
 
     renderButton(): JSX.Element {
         return (
-            <button className={styles.tagbtn} onClick={(): void => this.TagClick()}
-                    data-testid='Test-Tag'>{this.props.tagInfo.TagName}</button>
+            <span className={styles.tagbtnContainer}>
+                <button className={styles.btnnostyle}
+                        onClick={(): void => this.TagClick()}
+                        onContextMenu={this.contextmenu}
+                        data-testid='Test-Tag'>{this.props.tagInfo.TagName}</button>
+                <span className={styles.deletebtn}>X</span>
+            </span>
         );
     }
 
@@ -42,6 +62,20 @@ class Tag extends React.Component<props> {
             return;
         }
     }
+
+    /**
+     * handle a custom contextmenu for this item
+     * @param e
+     * @private
+     */
+    private contextmenu(e: SyntheticEvent): void {
+        if (!this.props.onContextMenu) return;
+
+        const event = e as unknown as PointerEvent;
+        event.preventDefault();
+        this.props.onContextMenu({x: event.clientX, y: event.clientY});
+        // this.setState({contextVisible: true});
+    }
 }
 
 export default Tag;

src/pages/Player/Player.tsx

@@ -1,26 +1,25 @@
 import React from 'react';
-
 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 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 {withRouter} from 'react-router-dom';
-import {APINode, callAPI, getBackendDomain} from '../../utils/Api';
+import {callAPI, getBackendDomain, APINode} 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 GlobalInfos from "../../utils/GlobalInfos";
+import QuickActionPop, {ContextItem} from '../../elements/QuickActionPop/QuickActionPop';
 
 interface myprops extends RouteComponentProps<{ id: string }> {}
 
@@ -35,7 +34,8 @@ interface mystate {
     suggesttag: TagType[],
     popupvisible: boolean,
     actorpopupvisible: boolean,
-    actors: ActorType[]
+    actors: ActorType[],
+    tagContextMenu: boolean
 }
 
 /**
@@ -43,7 +43,7 @@ interface mystate {
  * and actions such as tag adding and liking
  */
 export class Player extends React.Component<myprops, mystate> {
-    options: PlyrJS.Options = {
+    private options: PlyrJS.Options = {
         controls: [
             'play-large', // The large play button in the center
             'play', // Play/pause playback
@@ -60,10 +60,13 @@ export class Player extends React.Component<myprops, mystate> {
         ]
     };
 
+    private contextpos = {x: 0, y: 0, tagid: -1};
+
     constructor(props: myprops) {
         super(props);
 
         this.state = {
+            tagContextMenu: false,
             movie_id: -1,
             movie_name: '',
             likes: 0,
@@ -77,6 +80,7 @@ export class Player extends React.Component<myprops, mystate> {
         };
 
         this.quickAddTag = this.quickAddTag.bind(this);
+        this.deleteTag = this.deleteTag.bind(this);
     }
 
     componentDidMount(): void {
@@ -132,7 +136,10 @@ export class Player extends React.Component<myprops, mystate> {
                 <Line/>
                 <SideBarTitle>Tags:</SideBarTitle>
                 {this.state.tags.map((m: TagType) => (
-                    <Tag key={m.TagId} tagInfo={m}/>
+                    <Tag key={m.TagId} tagInfo={m} onContextMenu={(pos): void => {
+                        this.setState({tagContextMenu: true});
+                        this.contextpos = {...pos, tagid: m.TagId};
+                    }}/>
                 ))}
                 <Line/>
                 <SideBarTitle>Tag Quickadd:</SideBarTitle>
@@ -196,6 +203,7 @@ export class Player extends React.Component<myprops, mystate> {
                             this.setState({actorpopupvisible: false});
                         }} movie_id={this.state.movie_id}/> : null
                 }
+                {this.renderContextMenu()}
             </>
         );
     }
@@ -330,6 +338,48 @@ export class Player extends React.Component<myprops, mystate> {
             this.setState({actors: result});
         });
     }
+
+    /**
+     * render the Tag context menu
+     */
+    private renderContextMenu(): JSX.Element {
+        if (this.state.tagContextMenu) {
+            return (
+                <QuickActionPop onHide={(): void => this.setState({tagContextMenu: false})}
+                                position={this.contextpos}>
+                    <ContextItem title='Delete' onClick={(): void => this.deleteTag(this.contextpos.tagid)}/>
+                </QuickActionPop>);
+        } else {
+            return <></>;
+        }
+    }
+
+    /**
+     * delete a tag from the current video
+     */
+    private deleteTag(tag_id: number): void {
+        callAPI<GeneralSuccess>(APINode.Tags,
+            {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.TagId;
+                    }).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);