Translations

šŸš§

Translations have undergone major changes in version 5.0.0 of MediaStore SDK Components. Use version 5.0.0 or higher to fully benefit from this feature.

Introduction

MediaStore SDK Components Library offers flexibility to customize language settings, making it easy to tailor your applicationā€™s user interface. You can seamlessly add new language versions or modify the default wording to suit your needs. MediaStore SDK Components are available by default in English.

If you want to modify the existing translations or add translations for another language, follow the steps described below.

General Guide

  1. Create a cleeng-translations folder inside /public folder in your application (for example mediastore-sdk-demo).

  2. In the previously created folder (/cleeng-translations) you can create separate folders for languages that you need, e.g. /es for Spanish, /de for German, /customEn for custom English texts, etc. The name of this folder should be a single word (spaces, dashes, etc. should NOT be used).

  3. Create a new file in a language folder and name it translations.json. Copy the content from the English version and translate the values in that file to the needed language or modify the original English wording.

  4. To change language without reloading the page, you can use the Config.setLanguage() method. It will automatically change i18NextLng value in the local storage. Use the name of the folder with translations as a parameter. See the example below:
    Config.setLanguage(ā€˜esā€™);

Examples

As an example, we will use the sample mediastore-sdk-demo application with the correct folder structure for translations:

How to modify default English texts

In the cleeng-translations folder, we need to create a new folder whose name will correspond to our new translations, so in this case we will name it customEn.

Inside the customEn folder, add the translations.json file which is a copy of the default translations from here.

Letā€™s change these two texts inside the PlanDetails component:

We need to search for these texts in our copied translations.json file to find corresponding translation keys. In this case the keys and their values are:

ā€œcurrentplan.no-offers-titleā€: ā€œNo offers yet!ā€
ā€œcurrentplan.no-offers-textā€: ā€œIf you choose your plan, you will be able to manage your offers here.ā€

After changing values of these keys, you still need to load the new translation file into the MediaStore SDK components by using a simple Config method with the folder name as a parameter. In this case it looks like this:

Config.setLanguage(ā€˜customEnā€™);

For example, this method can be executed when clicking a button suggesting a change of language or at the start of your application.

And this is what the effect looks like after changing the values of these keys and executing the Config method:

So here is the sum-up of what changed:

KeyValue BeforeValue After
ā€œcurrentplan.no-offers-titleā€:ā€œNo offers yet!ā€ā€œStill waiting for offers!ā€
ā€œcurrentplan.no-offers-textā€:ā€œIf you choose your plan, you will be able to manage your offers here.ā€"By selecting your plan, you'll gain the ability to manage your offers here."

How to add new language translations

The steps for adding translation for a completely new language are identical to those for changing existing English texts, you just need to adjust the folder name accordingly, e.g. for Spanish instead of /customEn you can simply use /es.

Then change values of translation keys to Spanish, and use Config.setLanguage(ā€˜esā€™);

Important Notes

Variables that cannot be changed or removed

Some translations , like the one below, contain variables that cannot be removed or changed/translated because it will break that particular translation.

ā€œcurrentplan.subscription.renews-infoā€: ā€œRenews automatically on {{renewalDate}}ā€

The translation above contains a renewalDate variable. This variable should stay in the same form as it was originally, only its order in the sentence can change. So, for example, you can move its placement from the end of the text to the beginning.

Letā€™s change the above translation to:

ā€œcurrentplan.subscription.renews-infoā€: ā€œ{{renewalDate}}: Date of auto-renewalā€

The pictures below show the state before and after the change.

Before the change:

After the change:

Translations with HTML elements

There are also translations with angle brackets inside like this one:

ā€œthank-you-page.manage-textā€: ā€œYou can manage your account from <1>here</1>.ā€

These angle brackets mean that the text within them will be contained in an HTML element. For example, the text will be a link, or it will be bolded by <strong> so these angle brackets cannot be removed, and changing their place in the text can mess up the translation.

For example, if we want to translate the above text into Spanish it should be done like this:

ā€œthank-you-page.manage-textā€: ā€œPuedes gestionar tu cuenta desde <1>aquĆ­</1>.ā€