Any plans on focus system?

[EloB]

Hello, nice to see some open source projects in this area. Working right now with React and smart tv:s and built to multiple smart tv platforms and consoles (playstation). If I have time over I can see if I can contribute. One thing that I always thinks of is the focus system. Web is really good at mouse interaction but keyboard navigation is lacking. Is that something you are planning to look into?

Best regards

[raphamorim]

Yes @EloB!
I'm planning two draft proposals for keyboard navigation on React-TV:

1. Using a Navigator component ( import reactTV, { Navigator } from 'react-tv';
2. Compose all components with handlers for keyboard navigation when asked.

Anything that you want to help on ReactTV or talk about the future release. I'm available for talk

[EloB]

Nice :)

I just discovered this by Dan Abramov shared this on twitter. My current customer uses smart tv:s. So built some apps so I know the struggle of building performant apps in this area.

When I have time I will look into the codebase and see if I can contribute with something. A tip for Orsay is to add weinre. I don't know if there is any debugger for Orsay but I used that with good result (script debugger doesn't work but you can atleast reach a console and element tab).

A good way to find documentation for Orsay is to use the archive.org wayback machine. Their new site doesn't always show everything about "legacy platform" and I found some lost information when using that method.

Also add this to babel (if that is used) is a good win for performance. :)

"env": {
  "production": {
    "plugins": [
      "transform-react-constant-elements",
      "transform-react-inline-elements"
    ]
  }
}

Rx or some other reactive framework is really nice to have as well.

[raphamorim]

When I have time I will look into the codebase and see if I can contribute with something.

Sure, I'll be happy to help.

Orsay is to add weinre

I didn't know. Thanks for sharing it.

About babel and Reactive framework, I'm studying more other options and possibilites, even hacks hehe.

I'm closing this issue, but about keyboard navigation I linked a PR that I'm working

[DChinin]

@EloB you can install legacy Samsung SDK and debug Orsay app with chrome dev tools on emulator.
Emulator has many differences with real TV and some weird bugs, but it more useful than weinre.

@raphamorim i have several good examples on implementing dpad focus system for react.

[raphamorim]

Please share with me this examples, I just started work on it :D

[EloB]

@DChinin Thanks for the info. We are currently not using emulators. They feel far from the end result. We are developing realtime on the hardware instead and shares keystrokes from your desktop keyboard to the tv:s. So you don't have to sit with a bunch of remotes in front of you.
I will definitely but that on my mind when I can't figure out some bugs :)

[dead]

I recently developed a test app to a samsung tizen tv and created a wrapper around the js-spatial-navigation to work as react components. It was my very first contact with both tv and react so it is pretty simple, but works 😄.
I found the spatial navigation a neat solution to the navigation problem (as it use the position of the components in the screen to select where to move the focus). It certainly isn't the best solution in performance but it make so much easier to create navigable stuff.

[EloB]

@dead We have done the same but we discovered a bad thing that browsers scroll focused elements into view even in overflow: hidden containers. There isn't any good way to prevent that scroll into view action.

[idmitriev]

@EloB yeah, we had to cancel out this scrolling by setting scroll{Top,Left} to 0 for all parents of focused element, but that breaks performance.

I think the right way to do focus managements is not using dom apis, since the (custom)renderer knows all the elements that are focusable at the moment, it can hold focus state.

[ignaciolg]

What about a navigation based on a component hierarchy like the one on BBC-TAL?
With some base components (i,e: vertical and horizontal layouts, grid layout and focusable items) you can compose whatever you need.
I believe that is more deterministic than the js-spatial navigation (based on trigonometric calculation, if remember ) and will have a better performance.
In the other hand I have a little experience with React components and I'm not sure how easy will be to propagate the key events from @raphamorim Navigator to the focused item, and from the item to its parents.

[EloB]

@idmitriev We do the same with the scrollTop/scrollLeft but they are known props that triggers reflows as you said... :( https://gist.github.com/paulirish/5d52fb081b3570c81e3a

[dead]

@EloB
You can prevent this by simple disabling the elem.focus() in the js-spatial-navigation (browser focus).
But now If you want a scrollable list or something like that you will need to implement a ´ScrollableItemList` component in react that handle the scrolling.

[EloB]

@dead Probably modern browsers might have implemented like that but it's a non standard. What I seen on the actual devices (Tizen/Orsay/Ps4) have been problematic.

https://developer.mozilla.org/en-US/docs/Web/Events/focus

focus event is not cancelable.

[EloB]

@dead Or did I get you wrong? Is it possible to disable the element.focus() but still have all the other action working?

[EloB]

A bad thing with js-spatial-navigation is the keyCodes are hard coded. Made a PR for that luke-chang/js-spatial-navigation#20 but that repo seems dead. It's not even part of NPM either...

[dead]

It is possible to disable the elem.focus() and it should still work (the sn: events will be fired).

[idmitriev]

Had a quick look at js-spatial-navigation source, seems like there is a CustomEvent triggered on element focus\blur.
But this won't work with react's synthetic event system because it does not support dispatching CustomEvents.

[dead]

@idmitriev
It also trigger the elem.focus() (DOM focus) so it triggers the react's synthetic event. But using the DOM focus have the scrolling problems.

[dead]

More navigation stuff 😄
https://github.com/dead/react-key-navigation
It is similar to the BBC TAL. Use the hierarchy to navigate.

[EloB]

Some good info:
https://medium.com/netflix-techblog/pass-the-remote-user-input-on-tv-devices-923f6920c9a8
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS_for_TV/TV_remote_control_navigation

[raphamorim]

@EloB I'm made a draft of a first navigation interface implemented on the renderer.

Can you give some opinions/ideas about it?
Issue Here -> #63