NoriginMedia / Norigin-Spatial-Navigation

React Hooks based Spatial Navigation (Key & Remote Control Navigation) / Web Browsers, Smart TVs and Connected TVs
MIT License
326 stars 96 forks source link

Add a function to set key events #102

Open YoavHortman opened 1 year ago

YoavHortman commented 1 year ago

Is your feature request related to a problem? Please describe. The application I'm building can be controlled both from the keyboard (or tv remote) and from a phone (connected via socket)

Describe the solution you'd like I would like to be able to extend the events that are being listened to, not only the key codes.

Describe alternatives you've considered For now I'm dispatching fake keyboard events when I receive a navigation command from the phone.

Additional context I think it would make sense to do something similar to setKeyMap, but for events.

predikament commented 11 months ago

Hello @YoavHortman!

Are you meaning something like this? https://github.com/NoriginMedia/Norigin-Spatial-Navigation#setkeymap

If not then perhaps you could provide some examples or snippets of what and how you are intending to achieve it, so we can better help you out?

It kind of sounds to me like you are wanting to simulate key events based on what is inherently virtual key events stemming from a tertiary device; Not entirely sure if that is within the scope of this library to handle, but let's see what you have.

YoavHortman commented 11 months ago

I think this code example would answer your question:

 const commandToEvent: Record<NavigationCommand['command'], KeyboardEvent> = {
      up: new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'ArrowUp', keyCode: 38 }),
      down: new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'ArrowDown', keyCode: 40 }),
      left: new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'ArrowLeft', keyCode: 37 }),
      right: new KeyboardEvent('keydown', {
        bubbles: true,
        cancelable: true,
        key: 'ArrowRight',
        keyCode: 39,
      }),
      enter: new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'Enter', keyCode: 13 }),
      back: new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'Backspace', keyCode: 8 }),
    };
    communication.receiveNavigationCommand((command) => {
      window.dispatchEvent(commandToEvent[command.command]);
    });

Essentially I'm being forced to simulate keyboard events when navigation comes from a different device,

I don't want to change the keymap, I want to be able trigger a navigation regardless of a key.

How that might look:

const myOwnEventFunction(e) => {
 if (e.data === "mySpecialReasonToNavigateUp") {
      norigin.triggerNavigation('up')
 }
}

A second option:

norigin.overrideEventListener = (triggableActions) => {
   recieveSpecialEvent((e) => {
      if (e.command === 'up') {
          triggableActions.up()
      }
   })
}

I think this would remove the need to have the keymap override and would add the flexibility to navigate for any reason.