diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js index ae4f528..a368607 100644 --- a/src/elements/Preview/Preview.js +++ b/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 ( -
this.itemClick()}> +
+
this.setState({optionsvisible: true})}> + +
{this.state.name}
-
+
this.itemClick()}> {this.state.previewpicture !== null ?
+ {this.popupvisible()}
); } + popupvisible() { + if (this.state.optionsvisible) + return (
heeyyho
); + else + return null; + } + /** * handle the click event of a tile */ diff --git a/src/elements/Preview/Preview.module.css b/src/elements/Preview/Preview.module.css index 1fd5289..d19d21c 100644 --- a/src/elements/Preview/Preview.module.css +++ b/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 {