Right to left language support

[benwiley4000]

We should have a prop which can be passed to the default player to make text right-to-left instead of left-to-right.

In order to support right-to-left languages we need to basically flip the whole UI for the default player horizontally. Changes required will include:

• MaybeMarquee component should be able to scroll right instead of left.
• The volume and shuffle icons should be flipped horizontally in right-to-left mode. The repeat button and the play/pause/skip icons should stay the same and in the same order.. see here for more info. Similarly, we do not flip the direction of the media progress bar.
• When in right-to-left mode, the order of controls should be reversed, and flex-wrap should become wrap instead of wrap-reverse. This way we can horizontally flip the order of controls without affecting the row ordering.
  • Important exception is that play/pause/skip controls should maintain their direction and order. So maybe we should add a new keyword for the controls array which encompasses all three and renders them as a React Fragment so they stay intact for the RTL layout.
  • What's a word that encompasses those icons but none of the rest? I don't think "playback" is precise enough..
• The placement order of the marquee and the time ratio in the audio status bar should be reversed in right-to-left mode
• The timeElapsed / totalTime format might not localize well to other languages, especially RTL.. instead of trying to solve that one ourselves automatically, we should make it possible to custom-specify the format.
  • Needed: A name for what that time progress thing is actually called
• Have some people fluent in RTL languages review this to make sure it makes sense (might want to spin off into separate issue once the initial work is done)

New API checklist:

• textDirection prop - ltr by default, can be set to rtl. Also consider making this a boolean?
• Option for the controls array prop which is the playpause/backskip/forwardskip controls, and use this instead for the default layout.
• function prop for custom specifying the time progress display format

And if we ever add support for a horizontal volume bar (maybe we shouldn't), then it would need to run in reverse in right-to-left mode.

[benwiley4000]

I want to work on this but it's not reasonable for the 2.0 release as it's not going to be in high demand (yet, anyway).