ott-web-app
ott-web-app copied to clipboard
Published
20 hours ago •
jwplayer
jwplayer
Right-to-Left (RTL) support
This issue describes tasks and rough time estimates for RTL support
Prepare using the built-in formatting functions based on the Intl API 4 hours
- i18next - We may need to polyfill the Intl API: https://www.i18next.com/translation-function/formatting
- Intl API has usable libraries like formatting dates or numbers depending on the language
- Update the relevant code to utilize the built-in formatting functions based on the Intl API
- e.g.
Intl.NumberFormat(locale, options).format;
- e.g.
Determine Language Direction 2 hours
- Implement logic to automatically detect the user's preferred direction (by utilising the browser language settings)
- Based on the user preferences or language selection, create functionality that determines what direction should be applied throughout the app
Adjust CSS Styling 12 hours
- Conditionally update the HTML tag,
<html dir="rtl"> - Define CSS variables allowing for dynamic adjustments based on the selected direction
- Implement JavaScript logic to set the CSS variables dynamically
- Modify properties such as
left,right,padding,margin,text-align- which will be dynamically set by the functionality in the task 'Determine Language Direction'
- e.g. the
.popoverclass hasrightspecified, but this should changed toleft - e.g. all startIcons have
margin-right: 8pxset, this should be changed tomargin-left: 8px
Fix Layout issues 16 hours
- Fix layout bugs, considering changes in positioning, alignment, such as:
- Controlbar of the player needs RTL support (https://rtlstyling.com/posts/rtl-styling#media-player-icons)
- Close button in the Player
- The first two shelves are not displaying their images
- When the search bar is opened, it is incorrectly positioned
- Some text fields, in the Sign up flow or on the Account page, need additional correction
Test in Multiple Browsers and fix any issues 4 hours
- Test in various browsers, ensuring compatibility throughout
- browser-specific issues can arise
Support Right-to-Left Typography 4 hours
- I haven't tested it with a RTL language, but maybe we need to adjust things like punctuation,
font-sizeorletter-spacingfor readability
Update Translations 4 hours
- add RTL language(s)
Write unit and/or e2e tests 16 hours
- Write tests for components and functionality that are affected by RTL changes
