DEV Community

loading...

React JS for Smart TV - discussion

Pedro Paulo Paiva de Medeiros
Front-end developer focused on developing Smart TV apps. Working at globo.com on globoplay app.
・1 min read

Hi,

I'm developing an App for SmartTV with React JS (well, trying to, haha) and was wondering if anyone have done something similar or know something about.

I'm not using React Native because the TV brands that

This post is to share knowledge about that topic and have a good conversation.

Feel free to ask something about it, I would be glad to answer what I know, :3

To start a discussion, I will ask: someone has implemented a way to handle navigation by arrow keys on the keyboard?

Discussion (10)

Collapse
farnaziifz profile image
Farnaziifz

Hi, can you tell me where can I start developing web app for smart tv with react, I'm confused after searching in google and can't find a solution for developing compatible with all tv platform like webOS and Tizen

Collapse
pdrmdrs profile image
Pedro Paulo Paiva de Medeiros Author

Hi!

First of all, thanks for showing intersting in this Smart TV development area, :D

So, to start develop with React, there isn't any source about it, unfornatelly.

What I did to maintain a single code to the two platform was to develop a single project and use the 'yarn build' command, and then, put this build project on other two projects (each one created to be a Tizen project and webOS project).

With that, you can test on the TVs and test.

Other thing I do is to avoid using too much specific code. An example is the video that I use. I prefer to use a custom HTML5 video player react component that I've built for the platforms and use in the projects instead of using the Tizen or webOS specific code.

Just keep in mind that testing in a real device is a need.

To maintain retrocompatibility you will need some polyfills for new features or build to a older js version using the Babel.

It's really an area that has almost nothing about it on the internet, :(, but just keep searching and asking for help that you will gain knowledge and experience to deal with new problems that will appear :D

Collapse
farnaziifz profile image
Farnaziifz

thanks a lot, for remote control event what can I do?

Thread Thread
pdrmdrs profile image
Pedro Paulo Paiva de Medeiros Author

To control the remote control events I use the onKeyDown event that the React give to me. Just put the event on your app's root component and handle the focus and where the user should go when some key is pressed.

The onKeyDown event will send an object that I usually call 'event'.

The event dispatched is this: developer.mozilla.org/en-US/docs/W...

You can use the 'key' attribute or others if you want it.

Thread Thread
farnaziifz profile image
Farnaziifz

thanks a milion.

Collapse
rationalmachines profile image
Shawn Sheehan

Im curious, how did you handle click events? They do not seem to work on smart-tvs

Collapse
pdrmdrs profile image
Pedro Paulo Paiva de Medeiros Author • Edited

Hi,

I'm actually working with Samsung, LG and Panasonic. Since they all use a web browser behind the scenes, the work I have is to control the focus. With the browser focused on a element that has a onClick event, when the use press the Enter key on the remote control, it should work fine.

A example should be like this:

That's how I've done to handle the click events on the TVs, :D

Collapse
rationalmachines profile image
Shawn Sheehan

Im curious if you had any trouble with links, this project i'm looking over for a friend everything works fine as he intended on desktop and mobile but the links do not work on smart tvs?

Thread Thread
pdrmdrs profile image
Pedro Paulo Paiva de Medeiros Author

Do you mean the tag? If yes, in some devices it could not work properly, because the TVs runs the apps in a sandbox mode, so every redirect or link to another html page will open the TV browser, instead of staying on the app that was running.

To deal with this, I use react-router-dom on my app to make him a Single Page Application and navigate between routes using the Link and NavLink components.
For a better compatibility, I use the HashRouter component instead of the BrowserRouter that is commonly used.

Is that your case? If not, tell more details and we can figure out something, :D

Collapse
sugardave profile image
Dave Freeman

I wish I joined before this so I could have helped. I'm part of the Enact framework team and Enact was originally designed to deliver single page web apps on LG webOS TVs using the Moonstone theme. We've grown the framework considerably and offer a way for devs to create their own themes (or keep using Moonstone because it is specifically designed for TVs).

Enact is built on top of React, so you get everything you already have plus some syntactic sugar for things like assigning event handlers, computed properties, HOCs, etc.

Check us out:

If you think you might want to take it for a spin and have questions, come to our Gitter and give us a shout!