NoriginMedia / Norigin-Spatial-Navigation

React Hooks based Spatial Navigation (Key & Remote Control Navigation) / Web Browsers, Smart TVs and Connected TVs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add a function to set key events

YoavHortman opened this issue · comments

commented

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.

commented

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.

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.