[OWA-79] feat(i18n): add translations

[CarinaDraganJW]

Description

• This PR adds custom translations in the web app

Steps completed:

According to our definition of done, I have completed the following steps:

• Acceptance criteria met
• Unit tests added
• Docs updated (including config and env variables)
• Translations added
• UX tested
• Browsers / platforms tested
• Rebased & ready to merge without conflicts
• Reviewed own code

[github-actions]

Visit the preview URL for this PR (updated for commit bba1a37):

https://ottwebapp--pr602-feature-owa-79-add-t-wemqd5g1.web.app

_{(expires Sat, 19 Oct 2024 12:23:40 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c198f8a3a199ba8747819f7f1e45cf602b777529}

[baukef]

Great work. Could you maybe describe the scope of this ticket a bit more?

[CarinaDraganJW]

Great work. Could you maybe describe the scope of this ticket a bit more?

@baukef Definitely! In the dashboard, we have the Translations section on media details page, where users can add custom translations for the content type fields marked as translatable. For each field filled in we save a custom parameter of the following type: param-languageCode: translation introduced in the field

However, we did not integrate this into the OTT Web App yet, so these custom params translations are not retrieved. What this ticket is trying to do is to retrieve these custom params and transform the media item: if we for instance have title and title-es, and language is set to es (Spanish), we will retrieve value for title-es and set title to this value.

[baukef]

It would be awesome if you could extend this pattern to playlists as well. This is not yet available in the dashboard, but we could still use the custom parameters on playlists. The main goal would be for the navigation (library) items to be translated this way.

[marcovandeveen]

@baukef agree. It should probably be on a shelf level

Shelves have titles as well. The same goes for menu items.
Shelves now have custom params as well. So should be easy to implement the pattern there as well.

[langemike]

This is heading in the right direction. I suggest using APP_DEFAULT_LANGUAGE for the language fallback instead of the hard-coded 'en'

[CarinaDraganJW]

@AntonLantukh @ChristiaanScheermeijer Code is ready and working, feel free to have another look 🚀

[CarinaDraganJW]

Hi @ChristiaanScheermeijer 👋🏻

The feature is ready, I fixed all the feedback Anton had and I added translations for all media on Blender
Let me and Anton know if you have any more feedback on the code, otherwise I can proceed and merge the PR 🚀
Thank you for all the help ❤️