chore: handle long press in RemonteControlManager

Author: remilry

packages/example/src/components/configureRemoteControl.ts

@@ -10,6 +10,7 @@ SpatialNavigation.configureRemoteControl({
       [SupportedKeys.Up]: Directions.UP,
       [SupportedKeys.Down]: Directions.DOWN,
       [SupportedKeys.Enter]: Directions.ENTER,
+      [SupportedKeys.LongEnter]: Directions.LONG_ENTER,
       [SupportedKeys.Back]: null,
     };
 

packages/example/src/components/remote-control/RemoteControlManager.android.ts

@@ -3,13 +3,26 @@ import KeyEvent from 'react-native-keyevent';
 import { RemoteControlManagerInterface } from './RemoteControlManager.interface';
 import CustomEventEmitter from './CustomEventEmitter';
 
+const LONG_PRESS_DURATION = 500;
+
 class RemoteControlManager implements RemoteControlManagerInterface {
   constructor() {
     KeyEvent.onKeyDownListener(this.handleKeyDown);
+    KeyEvent.onKeyUpListener(this.handleKeyUp);
   }
 
   private eventEmitter = new CustomEventEmitter<{ keyDown: SupportedKeys }>();
 
+  private isEnterKeyDownPressed = false;
+  private longEnterTimeout: NodeJS.Timeout | null = null;
+
+  private handleLongEnter = () => {
+    this.longEnterTimeout = setTimeout(() => {
+      this.eventEmitter.emit('keyDown', SupportedKeys.LongEnter);
+      this.longEnterTimeout = null;
+    }, LONG_PRESS_DURATION);
+  };
+
   private handleKeyDown = (keyEvent: { keyCode: number }) => {
     const mappedKey = {
       21: SupportedKeys.Left,
@@ -26,9 +39,36 @@ class RemoteControlManager implements RemoteControlManagerInterface {
       return;
     }
 
+    if (mappedKey === SupportedKeys.Enter) {
+      if (!this.isEnterKeyDownPressed) {
+        this.isEnterKeyDownPressed = true;
+        this.handleLongEnter();
+      }
+      return;
+    }
+
     this.eventEmitter.emit('keyDown', mappedKey);
   };
 
+  private handleKeyUp = (keyEvent: { keyCode: number }) => {
+    const mappedKey = {
+      66: SupportedKeys.Enter,
+      23: SupportedKeys.Enter,
+    }[keyEvent.keyCode];
+
+    if (!mappedKey) {
+      return;
+    }
+
+    if (mappedKey === SupportedKeys.Enter) {
+      this.isEnterKeyDownPressed = false;
+      if (this.longEnterTimeout) {
+        clearTimeout(this.longEnterTimeout);
+        this.eventEmitter.emit('keyDown', mappedKey);
+      }
+    }
+  };
+
   addKeydownListener = (listener: (event: SupportedKeys) => boolean) => {
     this.eventEmitter.on('keyDown', listener);
     return listener;

packages/example/src/components/remote-control/RemoteControlManager.ios.ts

@@ -19,12 +19,18 @@ class RemoteControlManager implements RemoteControlManagerInterface {
       up: SupportedKeys.Up,
       down: SupportedKeys.Down,
       select: SupportedKeys.Enter,
+      longSelect: SupportedKeys.LongEnter,
     }[evt.eventType];
 
     if (!mappedKey) {
       return;
     }
 
+    // We only want to handle keydown fon long select
+    if (mappedKey === SupportedKeys.LongEnter && evt.eventKeyAction === 1) {
+      return;
+    }
+
     this.eventEmitter.emit('keyDown', mappedKey);
   };
 

packages/example/src/components/remote-control/RemoteControlManager.ts

@@ -2,13 +2,26 @@ import { SupportedKeys } from './SupportedKeys';
 import { RemoteControlManagerInterface } from './RemoteControlManager.interface';
 import CustomEventEmitter from './CustomEventEmitter';
 
+const LONG_PRESS_DURATION = 500;
+
 class RemoteControlManager implements RemoteControlManagerInterface {
   constructor() {
     window.addEventListener('keydown', this.handleKeyDown);
+    window.addEventListener('keyup', this.handleKeyUp);
   }
 
   private eventEmitter = new CustomEventEmitter<{ keyDown: SupportedKeys }>();
 
+  private isEnterKeyDown = false;
+  private longEnterTimeout: NodeJS.Timeout | null = null;
+
+  private handleLongEnter = () => {
+    this.longEnterTimeout = setTimeout(() => {
+      this.eventEmitter.emit('keyDown', SupportedKeys.LongEnter);
+      this.longEnterTimeout = null;
+    }, LONG_PRESS_DURATION);
+  };
+
   private handleKeyDown = (event: KeyboardEvent) => {
     const mappedKey = {
       ArrowRight: SupportedKeys.Right,
@@ -23,9 +36,35 @@ class RemoteControlManager implements RemoteControlManagerInterface {
       return;
     }
 
+    if (mappedKey === SupportedKeys.Enter) {
+      if (!this.isEnterKeyDown) {
+        this.isEnterKeyDown = true;
+        this.handleLongEnter();
+      }
+      return;
+    }
+
     this.eventEmitter.emit('keyDown', mappedKey);
   };
 
+  private handleKeyUp = (event: KeyboardEvent) => {
+    const mappedKey = {
+      Enter: SupportedKeys.Enter,
+    }[event.code];
+
+    if (!mappedKey) {
+      return;
+    }
+
+    if (mappedKey === SupportedKeys.Enter) {
+      this.isEnterKeyDown = false;
+      if (this.longEnterTimeout) {
+        clearTimeout(this.longEnterTimeout);
+        this.eventEmitter.emit('keyDown', mappedKey);
+      }
+    }
+  };
+
   addKeydownListener = (listener: (event: SupportedKeys) => boolean) => {
     this.eventEmitter.on('keyDown', listener);
     return listener;

packages/example/src/components/remote-control/SupportedKeys.ts

@@ -4,5 +4,6 @@ export enum SupportedKeys {
   Left = 'Left',
   Right = 'Right',
   Enter = 'Enter',
+  LongEnter = 'LongEnter',
   Back = 'Back',
 }