add new wrapper class for shortkey handlings and add new shortkeys

This commit is contained in:
lukas 2021-05-27 22:55:56 +02:00
parent e3c7fe514b
commit c62fe59244
2 changed files with 39 additions and 1 deletions

View File

@ -21,6 +21,7 @@ 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 GlobalInfos from '../../utils/GlobalInfos';
import KeyComponent from '../../utils/KeyComponent';
interface Props extends RouteComponentProps<{id: string}> {} interface Props extends RouteComponentProps<{id: string}> {}
@ -42,7 +43,7 @@ interface mystate {
* Player page loads when a video is selected to play and handles the video view * Player page loads when a video is selected to play and handles the video view
* and actions such as tag adding and liking * and actions such as tag adding and liking
*/ */
export class Player extends React.Component<Props, mystate> { export class Player extends KeyComponent<Props, mystate> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@ -62,7 +63,19 @@ export class Player extends React.Component<Props, mystate> {
this.quickAddTag = this.quickAddTag.bind(this); this.quickAddTag = this.quickAddTag.bind(this);
} }
keyHandler(key: string): void {
switch (key) {
case 't':
this.setState({popupvisible: true});
break;
case 'a':
this.setState({actorpopupvisible: true});
break;
}
}
componentDidMount(): void { componentDidMount(): void {
super.componentDidMount();
// initial fetch of current movie data // initial fetch of current movie data
this.fetchMovieData(); this.fetchMovieData();
} }

25
src/utils/KeyComponent.ts Normal file
View File

@ -0,0 +1,25 @@
import * as React from 'react';
abstract class KeyComponent<P = {}, S = {}> extends React.Component<P, S> {
constructor(props: P) {
super(props);
this.handler = this.handler.bind(this);
}
componentDidMount(): void {
document.addEventListener('keyup', this.handler);
}
componentWillUnmount(): void {
document.removeEventListener('keyup', this.handler);
}
private handler(e: KeyboardEvent): void {
this.keyHandler(e.key);
}
abstract keyHandler(key: string): void;
}
export default KeyComponent;