Localization in Roku

Localisation means providing the content in the regional language. The app supports multiple languages. Users can select any available language, and the content will be converted into that selected language. Roku is one of the leading players in the OTT (over-the-top) world with millions of users worldwide. As app/channel publishers expand globally, localisation plays a very crucial role in providing a better reach over the different regions of the world.

Key Benefits of Localisation

1. Enhance User experience.
2. Increase global reach.
3. Boost user engagement and retention.

Integration Steps

1. Create a separate JSON file for each language, consisting of the localised string values.
2. Create a folder named ‘local’ inside the source code folder and include all the JSON files containing the language data.
3. Code setup – Add the logic to the app source code to support localisation.

Language file creation(JSON)

For integrating the localisation, we need to create a JSON files that consist the language data. We can create a separate JSON file for each supported language. Below is the example code of the language file for English and French.

JSON file for English

Let’s name it en_US.json

{
    "emailAddress":"Email address",
    "username":"Username",
    "password":"Password",
    "search":"Search",
    "login":"Log in"
}

JSON file for French

Similarly, let’s create another JSON file for the French language and name it fr_CA.json

{
    "emailAddress":"Adresse courriel",
    "username":"Nom d'utilisateur",
    "password":"mot de passe",
    "search":"Chercher",
    "login":"Se connecter"
}

Note: We use file names en_US.json and fr_CA.json as per coding convenience. You can give it a name of your choice. These names are similar to what the GetCurrentLocale() function returns. Also, I recommend to use same key names in all language files for efficient coding.

Local Folder Creation

Create a new folder inside the source code directory and give it a name local(you can give it any name, we name it local as it suits as per the naming convention). Add all the Language files inside this folder.

BrightScript Code Setup

Now, we can utilise the language files in the app as per the device’s selected language.

Let’s create a “roDeviceInfo” object to get the selected language info by using the GetCurrentLocale() function.

deviceInfo = CreateObject("roDeviceInfo")
lang = deviceInfo.GetCurrentLocale()

GetCurrentLocale() function returns en_US for US English and fr_CA for French. Similarly, for other languages, there are separate codes. Check out the list here.

For our example, we support 2 languages, French and English(US), if the device language is selected to English or any other than French.

After getting the device’s default/selected language, we can now put a condition to decide which language is to be utilised throughout the app.

if lang.toStr() = "fr_CA"
        JString = ReadAsciiFile("pkg:/local/fr_CA.json")
        local = ParseJSON(JString)
    else
        JString = ReadAsciiFile("pkg:/local/en_US.json")
        local = ParseJSON(JString)
end if

For accessing the local JSON files, we use the ReadAsciiFile(path as string) function and give it to the reference through the JString variable.  After that, call a ParseJSON() function to make the JSON file to brightscript equivalent object(Associative array). Give it a reference to a variable named local.

To access this local variable throughout the app, let’s make it a global variable using getGlobalNode() function.

m.global = m.screen.getGlobalNode()
m.global.addFields( {"local": local})

That’s it, we can utilize the localization file throughout the app.

Let’s take an example: In the login page, we need to display the text elements such as Email Address, Password, Login, etc.

m.emailLabel.text = m.global.local.emailAddress
m.passwordLabel.text = m.global.local.password
m.loginLabel.text = m.global.local.login

' These can access the string values directly as per selected language.

Frequently Asked Questions(FAQs for localization in Roku)

Q1. Does Roku support automatic translation?
Answer. No, Roku does not support the auto translation feature directly. Developers can integrate the localization via resource files.

Q2. Can I localize content metadata (titles, descriptions, images)?
Answer. Yes. You can add localized metadata with the help of the localization feature.

Q3. Popular languages supported by Roku?
Answer. There are several languages that are popular on Roku, such as English, French, Spanish, Portuguese, and German.

Conclusion

Localization presents the App’s content in a friendly way, engages the users by providing the app in his/her native language. A well-localized app doesn’t just reach more markets, it creates deeper connections, build trust, user satisfaction, better ratings, and lasting growth.