add new wrapper class for shortkey handlings and add new shortkeys
This commit is contained in:
parent
e3c7fe514b
commit
c62fe59244
@ -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
25
src/utils/KeyComponent.ts
Normal 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;
|
Loading…
Reference in New Issue
Block a user