From c62fe59244a0b1366d64bc93f5a0e963574c2cdb Mon Sep 17 00:00:00 2001
From: lukas <lukas.heiligenbrunner@gmail.com>
Date: Thu, 27 May 2021 22:55:56 +0200
Subject: [PATCH] add new wrapper class for shortkey handlings and add new
 shortkeys

---
 src/pages/Player/Player.tsx | 15 ++++++++++++++-
 src/utils/KeyComponent.ts   | 25 +++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/KeyComponent.ts

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<Props, mystate> {
+export class Player extends KeyComponent<Props, mystate> {
     constructor(props: Props) {
         super(props);
 
@@ -62,7 +63,19 @@ export class Player extends React.Component<Props, mystate> {
         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<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;