create three dots on hovering a video tile

src/elements/Preview/Preview.js

@@ -4,6 +4,8 @@ import Player from '../../pages/Player/Player';
 import {Spinner} from 'react-bootstrap';
 import GlobalInfos from '../../utils/GlobalInfos';
 import {callAPIPlain} from '../../utils/Api';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faEllipsisV} from '@fortawesome/free-solid-svg-icons';
 
 /**
  * Component for single preview tile
@@ -15,7 +17,8 @@ class Preview extends React.Component {
 
         this.state = {
             previewpicture: null,
-            name: null
+            name: null,
+            optionsvisible: false
         };
     }
 
@@ -31,10 +34,15 @@ class Preview extends React.Component {
     render() {
         const themeStyle = GlobalInfos.getThemeStyle();
         return (
-            <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}
-                 onClick={() => this.itemClick()}>
+            <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
+                <div className={style.quickactions} onClick={() => this.setState({optionsvisible: true})}>
+                    <FontAwesomeIcon style={{
+                        verticalAlign: 'middle',
+                        fontSize: '25px'
+                    }} icon={faEllipsisV} size='1x'/>
+                </div>
                 <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.state.name}</div>
-                <div className={style.previewpic}>
+                <div className={style.previewpic} onClick={() => this.itemClick()}>
                     {this.state.previewpicture !== null ?
                         <img className={style.previewimage}
                              src={this.state.previewpicture}
@@ -45,10 +53,18 @@ class Preview extends React.Component {
                 <div className={style.previewbottom}>
 
                 </div>
+                {this.popupvisible()}
             </div>
         );
     }
 
+    popupvisible() {
+        if (this.state.optionsvisible)
+            return (<div>heeyyho</div>);
+        else
+            return null;
+    }
+
     /**
      * handle the click event of a tile
      */

src/elements/Preview/Preview.module.css

@@ -6,6 +6,29 @@
     text-align: center;
 }
 
+.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);
+    opacity: 0.7;
+    padding-top: 5px;
+}
+
+.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 {