lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

fix lint errors

Browse Source 
fix clickability of threedotsicon
This commit is contained in:
lukas 2021-07-29 20:32:30 +02:00
parent c13e758301
commit 20f29d9df6
4 changed files with 71 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/elements/Preview/Preview.tsx
View File

@ -6,9 +6,7 @@ import GlobalInfos from '../../utils/GlobalInfos';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faPhotoVideo} from '@fortawesome/free-solid-svg-icons'; import {faPhotoVideo} from '@fortawesome/free-solid-svg-icons';
import {faEllipsisV} from '@fortawesome/free-solid-svg-icons'; import {faEllipsisV} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import QuickActionPop, {ContextItem} from '../QuickActionPop/QuickActionPop';
import QuickActionPop from '../QuickActionPop/QuickActionPop';
import {APINode, callAPIPlain} from '../../utils/Api';
interface PreviewProps { interface PreviewProps {
name: string; name: string;
@ -62,11 +60,21 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
<div <div
className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview} className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}
onClick={this.props.onClick}> onClick={this.props.onClick}>
<div className={style.quickactions} onClick={(): void => this.setState({optionsvisible: true})}> <div
<FontAwesomeIcon style={{ className={style.quickactions}
onClick={(e): void => {
this.setState({optionsvisible: true});
e.stopPropagation();
e.preventDefault();
}}>
<FontAwesomeIcon
style={{
verticalAlign: 'middle', verticalAlign: 'middle',
fontSize: '25px' fontSize: '25px'
}} icon={faEllipsisV} size='1x'/> }}
icon={faEllipsisV}
size='1x'
/>
</div> </div>
{this.popupvisible()} {this.popupvisible()}
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div> <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
@ -94,11 +102,17 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
} }
popupvisible(): JSX.Element { popupvisible(): JSX.Element {
if (this.state.optionsvisible) if (this.state.optionsvisible) {
return (<QuickActionPop position={{x: 50, y: 50}} onHide={(): void => this.setState({optionsvisible: false})}>heeyyho</QuickActionPop>); return (
else <QuickActionPop position={{x: 350, y: 45}} onHide={(): void => this.setState({optionsvisible: false})}>
<ContextItem title='Delete' onClick={(): void => {}} />
<ContextItem title='Delete' onClick={(): void => {}} />
</QuickActionPop>
);
} else {
return <></>; return <></>;
} }
}
} }
/** /**

20
src/elements/QuickActionPop/QuickActionPop.tsx
View File

@ -3,10 +3,10 @@ import style from './QuickActionPopup.module.css';
interface props { interface props {
position: { position: {
x: number, x: number;
y: number y: number;
}, };
onHide: () => void onHide: () => void;
} }
class QuickActionPop extends React.Component<props> { class QuickActionPop extends React.Component<props> {
@ -20,7 +20,6 @@ class QuickActionPop extends React.Component<props> {
this.handleClickOutside = this.handleClickOutside.bind(this); this.handleClickOutside = this.handleClickOutside.bind(this);
} }
componentDidMount(): void { componentDidMount(): void {
document.addEventListener('mousedown', this.handleClickOutside); document.addEventListener('mousedown', this.handleClickOutside);
} }
@ -49,11 +48,18 @@ class QuickActionPop extends React.Component<props> {
interface Itemprops { interface Itemprops {
title: string; title: string;
onClick: () => void onClick: () => void;
} }
export const ContextItem = (props: Itemprops): JSX.Element => ( export const ContextItem = (props: Itemprops): JSX.Element => (
<div onClick={props.onClick} className={style.ContextItem}>{props.title}</div> <div
onClick={(e): void => {
e.preventDefault();
props.onClick();
}}
className={style.ContextItem}>
{props.title}
</div>
); );
export default QuickActionPop; export default QuickActionPop;

14
src/elements/Tag/Tag.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, {SyntheticEvent, PointerEvent} from 'react';
import styles from './Tag.module.css'; import styles from './Tag.module.css';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
@ -7,7 +7,7 @@ import {TagType} from '../../types/VideoTypes';
interface props { interface props {
onclick?: (_: string) => void; onclick?: (_: string) => void;
tagInfo: TagType; tagInfo: TagType;
onContextMenu?: (pos: {x: number, y: number}) => void; onContextMenu?: (pos: {x: number; y: number}) => void;
} }
interface state { interface state {
@ -38,7 +38,11 @@ class Tag extends React.Component<props, state> {
renderButton(): JSX.Element { renderButton(): JSX.Element {
return ( return (
<button className={styles.tagbtn} onClick={(): void => this.TagClick()} data-testid='Test-Tag' onContextMenu={this.contextmenu}> <button
className={styles.tagbtn}
onClick={(): void => this.TagClick()}
data-testid='Test-Tag'
onContextMenu={this.contextmenu}>
{this.props.tagInfo.TagName} {this.props.tagInfo.TagName}
</button> </button>
); );
@ -61,7 +65,9 @@ class Tag extends React.Component<props, state> {
* @private * @private
*/ */
private contextmenu(e: SyntheticEvent): void { private contextmenu(e: SyntheticEvent): void {
if (!this.props.onContextMenu) return; if (!this.props.onContextMenu) {
return;
}
const event = e as unknown as PointerEvent; const event = e as unknown as PointerEvent;
event.preventDefault(); event.preventDefault();

36
src/pages/Player/Player.tsx
View File

@ -20,7 +20,6 @@ import {ActorType, TagType} from '../../types/VideoTypes';
import PlyrJS from 'plyr'; import PlyrJS from 'plyr';
import {Button} from '../../elements/GPElements/Button'; import {Button} from '../../elements/GPElements/Button';
import {VideoTypes} from '../../types/ApiTypes'; import {VideoTypes} from '../../types/ApiTypes';
import GlobalInfos from "../../utils/GlobalInfos";
import QuickActionPop, {ContextItem} from '../../elements/QuickActionPop/QuickActionPop'; import QuickActionPop, {ContextItem} from '../../elements/QuickActionPop/QuickActionPop';
import GlobalInfos from '../../utils/GlobalInfos'; import GlobalInfos from '../../utils/GlobalInfos';
@ -140,10 +139,14 @@ export class Player extends React.Component<Props, mystate> {
<Line /> <Line />
<SideBarTitle>Tags:</SideBarTitle> <SideBarTitle>Tags:</SideBarTitle>
{this.state.tags.map((m: TagType) => ( {this.state.tags.map((m: TagType) => (
<Tag key={m.TagId} tagInfo={m} onContextMenu={(pos): void => { <Tag
key={m.TagId}
tagInfo={m}
onContextMenu={(pos): void => {
this.setState({tagContextMenu: true}); this.setState({tagContextMenu: true});
this.contextpos = {...pos, tagid: m.TagId}; this.contextpos = {...pos, tagid: m.TagId};
}}/> }}
/>
))} ))}
<Line /> <Line />
<SideBarTitle>Tag Quickadd:</SideBarTitle> <SideBarTitle>Tag Quickadd:</SideBarTitle>
@ -305,7 +308,6 @@ export class Player extends React.Component<Props, mystate> {
); );
} }
/** /**
* click handler for the like btn * click handler for the like btn
*/ */
@ -374,10 +376,10 @@ export class Player extends React.Component<Props, mystate> {
private renderContextMenu(): JSX.Element { private renderContextMenu(): JSX.Element {
if (this.state.tagContextMenu) { if (this.state.tagContextMenu) {
return ( return (
<QuickActionPop onHide={(): void => this.setState({tagContextMenu: false})} <QuickActionPop onHide={(): void => this.setState({tagContextMenu: false})} position={this.contextpos}>
position={this.contextpos}> <ContextItem title='Delete' onClick={(): void => this.deleteTag(this.contextpos.tagid)} />
<ContextItem title='Delete' onClick={(): void => this.deleteTag(this.contextpos.tagid)}/> </QuickActionPop>
</QuickActionPop>); );
} else { } else {
return <></>; return <></>;
} }
@ -387,19 +389,21 @@ export class Player extends React.Component<Props, mystate> {
* delete a tag from the current video * delete a tag from the current video
*/ */
private deleteTag(tag_id: number): void { private deleteTag(tag_id: number): void {
callAPI<GeneralSuccess>(APINode.Tags, callAPI<GeneralSuccess>(
APINode.Tags,
{action: 'deleteVideoTag', video_id: this.props.match.params.id, tag_id: tag_id}, {action: 'deleteVideoTag', video_id: this.props.match.params.id, tag_id: tag_id},
(res) => { (res) => {
if (res.result !== 'success') { if (res.result !== 'success') {
console.log("deletion errored!"); console.log('deletion errored!');
this.setState({tagContextMenu: false}); this.setState({tagContextMenu: false});
}else{ } else {
// check if tag has already been added // check if tag has already been added
const tagIndex = this.state.tags.map(function (e: TagType) { const tagIndex = this.state.tags
.map(function (e: TagType) {
return e.TagId; return e.TagId;
}).indexOf(tag_id); })
.indexOf(tag_id);
// delete tag from array // delete tag from array
const newTagArray = this.state.tags; const newTagArray = this.state.tags;
@ -407,9 +411,9 @@ export class Player extends React.Component<Props, mystate> {
this.setState({tags: newTagArray, tagContextMenu: false}); this.setState({tags: newTagArray, tagContextMenu: false});
} }
}); }
);
} }
} }
export default withRouter(Player); export default withRouter(Player);