diff --git a/api/src/handlers/Tags.php b/api/src/handlers/Tags.php index 9f50528..6efe541 100644 --- a/api/src/handlers/Tags.php +++ b/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 . '"}'); + }); + } } diff --git a/src/elements/ActorTile/ActorTile.tsx b/src/elements/ActorTile/ActorTile.tsx index a508a7b..4b5a737 100644 --- a/src/elements/ActorTile/ActorTile.tsx +++ b/src/elements/ActorTile/ActorTile.tsx @@ -31,8 +31,11 @@ class ActorTile extends React.Component { } - 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 (
customclickhandler(this.props.actor)}>
diff --git a/src/elements/Preview/Preview.module.css b/src/elements/Preview/Preview.module.css index d19d21c..9324a65 100644 --- a/src/elements/Preview/Preview.module.css +++ b/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 { diff --git a/src/elements/QuickActionPop/QuickActionPop.tsx b/src/elements/QuickActionPop/QuickActionPop.tsx index 0d5e7ab..659f9ff 100644 --- a/src/elements/QuickActionPop/QuickActionPop.tsx +++ b/src/elements/QuickActionPop/QuickActionPop.tsx @@ -47,4 +47,13 @@ class QuickActionPop extends React.Component { } } +interface Itemprops { + title: string; + onClick: () => void +} + +export const ContextItem = (props: Itemprops): JSX.Element => ( +
{props.title}
+); + export default QuickActionPop; diff --git a/src/elements/QuickActionPop/QuickActionPopup.module.css b/src/elements/QuickActionPop/QuickActionPopup.module.css index a68a836..e4ee301 100644 --- a/src/elements/QuickActionPop/QuickActionPopup.module.css +++ b/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; } diff --git a/src/pages/Player/Player.tsx b/src/pages/Player/Player.tsx index ddd41df..34c29cc 100644 --- a/src/pages/Player/Player.tsx +++ b/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 { ] }; - 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 { }; this.quickAddTag = this.quickAddTag.bind(this); + this.deleteTag = this.deleteTag.bind(this); } componentDidMount(): void { @@ -155,7 +157,7 @@ export class Player extends React.Component { {this.state.tags.map((m: TagType) => ( { this.setState({tagContextMenu: true}); - this.contextpos = pos; + this.contextpos = {...pos, tagid: m.tag_id}; }}/> ))} @@ -338,14 +340,39 @@ export class Player extends React.Component { return ( this.setState({tagContextMenu: false})} position={this.contextpos}> -