DEV Community 👩‍💻👨‍💻

Pedro Paulo Paiva de Medeiros
Pedro Paulo Paiva de Medeiros

Posted on

React JS for Smart TV - discussion

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?

Top comments (14)

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
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!

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 on

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
rubinelezi profile image
Rubin Elezi

It may be an old post but, did you manage to do anything about this? Can you give any guide about react on TIZEN/WEBOS

Collapse
pdrmdrs profile image
Pedro Paulo Paiva de Medeiros Author

I did manage to have a full production app that is working ATM in Tizen and WebOS.

We used ReactJS with Typescript and created an architecture to work with.

ReactNative didn't have the tools that we needed.
Enact is good for basic projects, but to work on bigger apps, it's a pain.

To work with Tizen/WebOS platforms, just do a basic app with ReactJS, put on fullscreen (probably F11 if you are using windows) and create a way to handle focus imperatively with the arrow keys.

There's not a perfect way to do this, it will depends on your requirements.

One thing to do is create an state in the component that will be the focused child component, and put an useEffect that will trigger state updates based on the keydown event.
With this, you can check which component is focused, pass this as a prop, and update the style accordingly.

One thing that helped us is to create two basic apps using the templates that the Tizen/WebOS gave us, and on the HTML file, just create a redirect to your app.

With that, deploy your app where you want and it will work just fine.

This helps develop a lot faster.

Other than that, you just need to finish your app and deploy on the Tizen and WebOS app store's, fix the issues that they will find and you have your app available to everyone, :D

PS: sorry about the late answer, I was away from the dev.to for a while

Collapse
shohzodt profile image
Shohzod Tursunov

Hi, Can you share the source code or how to make react project transfer to Tizen app, I have used it with create react app and vite also, but after build the project , player is not working, and also sometime the app also does not run

Collapse
lucifer_morningstar profile image
lucifer9560

Hi,
To implement navigation using arrow keys i used a package called "react-js-spatial-navigation".

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.