Add Initial support for RTL layouts

[hadicharara]

Motivation

RTL languages such as Arabic require RTL layouts for a proper user experience. While usable, the current state of affairs is sub-par for users of Jellyfin in RTL languages.

Examples

Philosophy

• My changes are meant to be as unobtrusive as possible to core Jellyfin contributors. All CSS changes made will only affect users of RTL languages. When modifying the css, Jellyfin needn't worry about RTL layouts (although it is very easy to accomodate for them).
• Jellyfin already has language settings, independent of the browser's settings. I aimed to respect the Jellyfin user's language and locale settings.

Changes

• When globalize detects a RTL language, it injects the dir="rtl" attribute to the HTML body. Most of the work is done by this simple fix.
• CSS changes are made primarily with the inline and block variant attributes for inser, margin and padding, else by checking the dir attribute.
• Javascript changes has been made to fix the emby-slider component.
• Some changes made to support alternative numeral systems (my motivation was eastern arabic numerals). This is done by using toLocaleString() and similar functions.
• rtl.scss file added to flip horizontally directional icons.

Resuts

There are probably many things that could be improved with my changes (probably some things with the usage of toLocaleString() could be improved). I welcome any feedback!

TODO: testing on TV and mobile layouts. Thoroughly checking the application for inconsistencies in RTL layouts. No changes should be visible to LTR layout users, though this should be checked.

[hadicharara]

Also the mainDrawer still opens on the left. This is to be fixed (probably by changing the lib file itself).

[hadicharara]

Jellyfin has been tested in desktop, mobile and tv layouts, both in LTR and RTL layouts. All bugs I could fine have been crushed (except the fact that the dashboard drawer animation comes from the left, but that's fine). It is currently 100% usable and I have been using it for days. I await feedback!

[hadicharara]

Information for reviewers: Some elements have been hardcoded as ltr:

• The loading spinner because it should look the same in ltr and rtl.
• The video player is LTR otherwise the subtitle canvas get messed up.
• File paths are always "ltr".
• Player controls are "ltr" because it doesn't represent directionality rather the direction of a tape recording.

Testers in any platform (desktop, TV, mobile) and in any direction are welcome.

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[CAPRICORNX10X]

hi you can please add the Hebrew language to the display from right to left as in the Arabic language

[hadicharara]

This should have added support for all RTL languages in Jellyfin. However, this PR should be closed for a lack of interest, since it was't properly reviewed.

[thornbill]

Oh we are definitely interested in landing this! The problem is it's basically only me reviewing larger changes to web right now and I've been focusing on getting the new website going. That said I'm back around now working through reviews so if you could rebase this I'll work on reviewing it in the next few days. 💜

[hadicharara]

Alright no problem! It should be rebased soon.

[CAPRICORNX10X]

I can help you. in the feedbacks and check that everything is correct. And what not to update you.

---

From: hadicharara @.> Sent: Saturday, October 1, 2022 10:36:37 PM To: jellyfin/jellyfin-web @.> Cc: CAPRICORNX10X @.>; Comment @.> Subject: Re: [jellyfin/jellyfin-web] Add Initial support for RTL layouts (PR #3743)

Alright no problem! It should be rebased soon.

— Reply to this email directly, view it on GitHubhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjellyfin%2Fjellyfin-web%2Fpull%2F3743%23issuecomment-1264461359&data=05%7C01%7C%7C15f4b2d8bf5248ab677408daa3e44203%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638002498001395497%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=QQeGxRCwASXSS1%2FqyyGooMmCpyrGyAl6p6LIR7ZvhLU%3D&reserved=0, or unsubscribehttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAYPROYQS2AG2YNIIPEYB3KDWBCHELANCNFSM52PRYJOQ&data=05%7C01%7C%7C15f4b2d8bf5248ab677408daa3e44203%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638002498001395497%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=rxIZgHEPwUHZm7ZcioVhzXuzAF2JHTV8VNbuPb3vsy4%3D&reserved=0. You are receiving this because you commented.Message ID: @.***>

[hadicharara]

Just merged latest changes from master and tested.

[thornbill]

Looks like there are several (minor) lint issues now:

src/assets/css/librarybrowser.scss
 540:5  ✖  Unexpected empty line before closing brace                                                                                                     block-closing-brace-empty-line-before
 549:5  ✖  Expected empty line before rule                                                                                                                rule-empty-line-before               
 811:5  ✖  Expected selector "[dir="rtl"] .detailPagePrimaryContainer" to come before selector ".layout-desktop [dir="ltr"] .detailPagePrimaryContainer"  no-descending-specificity            
 811:5  ✖  Expected selector "[dir="rtl"] .detailPagePrimaryContainer" to come before selector ".layout-tv [dir="ltr"] .detailPagePrimaryContainer"       no-descending-specificity            

src/components/actionSheet/actionSheet.scss
 51:5  ✖  Unexpected empty line before closing brace  block-closing-brace-empty-line-before

src/components/alphaPicker/style.scss
 120:51  ✖  Expected a trailing semicolon  declaration-block-trailing-semicolon

src/components/cardbuilder/card.scss
 305:5  ✖  Expected empty line before rule             rule-empty-line-before               
 308:5  ✖  Unexpected empty line before closing brace  block-closing-brace-empty-line-before
 458:5  ✖  Unexpected empty line before closing brace  block-closing-brace-empty-line-before

src/components/imageUploader/style.scss
 15:17  ✖  Expected single space after ":" with a single-line declaration  declaration-colon-space-after

src/components/imageeditor/imageeditor.scss
 17:25  ✖  Expected a trailing semicolon  declaration-block-trailing-semicolon
 23:22  ✖  Expected a leading zero        number-leading-zero                 
 27:23  ✖  Expected a leading zero        number-leading-zero                 

src/components/libraryoptionseditor/style.scss
 3:21  ✖  Expected single space after ":" with a single-line declaration  declaration-colon-space-after
 7:22  ✖  Expected single space after ":" with a single-line declaration  declaration-colon-space-after

src/components/listview/listview.scss
 107:1  ✖  Expected selector ".listItem" to come before selector "[dir="ltr"] .listItem"  no-descending-specificity
 107:1  ✖  Expected selector ".listItem" to come before selector "[dir="rtl"] .listItem"  no-descending-specificity

src/components/mediaLibraryCreator/style.scss
 13:22  ✖  Expected single space after ":" with a single-line declaration  declaration-colon-space-after
 13:22  ✖  Expected a leading zero                                         number-leading-zero          
 17:23  ✖  Expected single space after ":" with a single-line declaration  declaration-colon-space-after
 17:23  ✖  Expected a leading zero                                         number-leading-zero          

src/components/mediaLibraryEditor/style.scss
 13:22  ✖  Expected single space after ":" with a single-line declaration  declaration-colon-space-after
 13:22  ✖  Expected a leading zero                                         number-leading-zero          
 17:23  ✖  Expected single space after ":" with a single-line declaration  declaration-colon-space-after
 17:23  ✖  Expected a leading zero                                         number-leading-zero          

src/components/metadataEditor/style.scss
 13:21  ✖  Expected single space after ":" with a single-line declaration  declaration-colon-space-after
 17:22  ✖  Expected single space after ":" with a single-line declaration  declaration-colon-space-after

src/components/multiSelect/multiSelect.scss
 45:17  ✖  Expected single space after ":" with a single-line declaration  declaration-colon-space-after

src/components/playerstats/playerstats.scss
 59:5  ✖  Unexpected empty line before closing brace  block-closing-brace-empty-line-before

src/components/subtitleuploader/style.scss
 14:17  ✖  Expected single space after ":" with a single-line declaration  declaration-colon-space-after
 17:1   ✖  Expected no more than 1 empty line                              max-empty-lines              

src/components/tvproviders/style.scss
 3:16  ✖  Expected single space after ":" with a single-line declaration  declaration-colon-space-after
 3:22  ✖  Expected a leading zero                                         number-leading-zero          
 7:16  ✖  Expected single space after ":" with a single-line declaration  declaration-colon-space-after
 7:18  ✖  Expected a leading zero                                         number-leading-zero          

src/elements/emby-input/emby-input.scss
 55:23  ✖  Expected a trailing semicolon                                                                                                               declaration-block-trailing-semicolon
 59:1   ✖  Expected selector ".inlineForm .inputContainer:last-child" to come before selector "[dir="ltr"] .inlineForm .inputContainer:first-child"    no-descending-specificity           
 59:1   ✖  Expected selector ".inlineForm .inputContainer:last-child" to come before selector "[dir="rtl"] .inlineForm .inputContainer:first-child"    no-descending-specificity           
 60:1   ✖  Expected selector ".inlineForm .selectContainer:last-child" to come before selector "[dir="ltr"] .inlineForm .selectContainer:first-child"  no-descending-specificity           
 60:1   ✖  Expected selector ".inlineForm .selectContainer:last-child" to come before selector "[dir="rtl"] .inlineForm .selectContainer:first-child"  no-descending-specificity           

src/elements/emby-scroller/emby-scroller.scss
 25:1  ✖  Expected selector ".servers > .card > .cardBox" to come before selector "[dir="ltr"] .itemsContainer > .card > .cardBox"  no-descending-specificity
 25:1  ✖  Expected selector ".servers > .card > .cardBox" to come before selector "[dir="rtl"] .itemsContainer > .card > .cardBox"  no-descending-specificity

42 problems (42 errors, 0 warnings)

[hadicharara]

Sorry. Should be good now.

[hadicharara]

Fixed all the issues you pointed out. Sorry for the delay, I was a bit busy.

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication