diff --git a/src/pages/Player/Player.tsx b/src/pages/Player/Player.tsx index 342ec9c..97b9911 100644 --- a/src/pages/Player/Player.tsx +++ b/src/pages/Player/Player.tsx @@ -21,6 +21,7 @@ import PlyrJS from 'plyr'; import {Button} from '../../elements/GPElements/Button'; import {VideoTypes} from '../../types/ApiTypes'; import GlobalInfos from '../../utils/GlobalInfos'; +import KeyComponent from '../../utils/KeyComponent'; 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 * and actions such as tag adding and liking */ -export class Player extends React.Component { +export class Player extends KeyComponent { constructor(props: Props) { super(props); @@ -62,7 +63,19 @@ export class Player extends React.Component { 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 { + super.componentDidMount(); // initial fetch of current movie data this.fetchMovieData(); } diff --git a/src/utils/KeyComponent.ts b/src/utils/KeyComponent.ts new file mode 100644 index 0000000..42dce1f --- /dev/null +++ b/src/utils/KeyComponent.ts @@ -0,0 +1,25 @@ +import * as React from 'react'; + +abstract class KeyComponent

extends React.Component { + 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;