TV Remote Control Spatial Navigation

user_2358262 0
Viewed 1517

I am developing a React library which will be consumed by a web application for SmartTV, our objective is to make it generic for working on different TV platform (webOS, Android).

Use Case: We want to enable user to navigate on different items on the screen using the remote control button. From the research it seems each TV platform has their own button codes (a code generated when a button on remote is pressed). I am trying to figure out,

  1. How are the arrow buttons handled in the TV control, does TV platforms (all? or certain platform?)takes care of changing the focus from a button to button

    • I am trying to understand in TV how does the arrow keys works?

    • When we press the arrow key does framework handles moving the focus to next focusable item (for example button to next button)

  2. If not what can be the best way for doing spatial navigation?

    • Is there a library available that we can use?

    • Is there a sample code to look on how TV apps like Netflix, Spotify do this or all these services develop different apps for different TV platforms?

android-tv tizen reactjs webos android
1 Answers

We also made an app supporting iOS, Android and Tizen. For iOS and Android we used react-native. The native focus engines for both Android and iOS do a good job. Any custom changes could be made on react-native level. As our Tizen app a web-based there was no navigation, so we reused the react-native code but we replaced any Touchable instances with a custom spatial navigation package based on https://www.npmjs.com/package/react-js-spatial-navigation (using Babel aliasing). react-native package imports were replaced with react-native-web. Check out the 'renative' project on how to do this. As a result, there is 100% code-sharing on all three platforms. On iOS & Android using the TouchableOpacity/TouchableHighlight, and on Tizen the replacement using our custom library. My intention is to shortly make a project demonstrating this.

user_23527740
Related