Skip to content

PlayerControlView incorrectly mirrors next/prev and ffwd/rewind icons in RTL #227

Closed
Closed
PlayerControlView incorrectly mirrors next/prev and ffwd/rewind icons in RTL#227
Assignees
icbaker
Labels
bug

Description

@maknon
maknon
opened on Dec 17, 2022

Media3 Version

1.0.0-beta03

Devices that reproduce the issue

Samsung S22+ Android 13

Devices that do not reproduce the issue

No response

Reproducible in the demo app?

Not tested

Reproduction steps

My App is RTL and no control playback is shown (snapshot below) when layout_height=wrap_content

<androidx.media3.ui.PlayerControlView
        android:id="@+id/playerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />

if I increase the height manually it will render normally

another issue is the next back icones are reversed

Expected result

icons should be reversed and all playback controls should be shown

Actual result

as attached

Media

2

1

Bug Report

Activity

  1. maknon
    added
    bug
    needs triage
    on Dec 17, 2022
  2. icbaker
    self-assigned this
    on Dec 19, 2022

  3. icbaker commented on Dec 19, 2022

    @icbaker
    icbaker
    on Dec 19, 2022
    Collaborator

    if I increase the height manually it will render normally

    Based on the XML snippet it looks like you might be using PlayerControlView without PlayerView? I'm afraid this is not supported (partly because, as you've seen, the controls expect to the the full height of the viewport).

    another issue is the next back icones are reversed

    I agree the icons being reversed in RTL is a bug - I will keep this open to track resolving that.

    Reference for time-related playback icons not being mirrored in RTL: https://m2.material.io/design/usability/bidirectionality.html#mirroring-elements

  4. icbaker
    changed the title [-]PlayerControlView rendering issues in RTL[/-] [+]PlayerControlView incorrectly mirrors next/prev and ffwd/rewind icons in RTL[/+] on Dec 19, 2022
  5. icbaker
    removed
    needs triage
    on Dec 19, 2022

  6. maknon commented on Dec 19, 2022

    @maknon
    maknon
    on Dec 19, 2022
    Author

    Based on the XML snippet it looks like you might be using PlayerControlView without PlayerView? I'm afraid this is not supported (partly because, as you've seen, the controls expect to the the full height of the viewport).

    thank you, indeed im using it without PlayerView. but im not able to achieve the required behaviour here. I just need PlayerControlView (audio only) and I need it to show/hide at the bottom of the activity.
    Replacing PlayerControlView with PlayerView seems to fill the whole screen and is not overlaying with the below activity like PlayerControlView. Using surface_type="none" does not improve the case.

    Is there any issue continuing with PlayerControlView without PlayerView. It seems it works fine for now. Layout might not be optimum using a fixed hight but at least works

  7. icbaker commented on Dec 19, 2022

    @icbaker
    icbaker
    on Dec 19, 2022
    Collaborator

    Is there any issue continuing with PlayerControlView without PlayerView. It seems it works fine for now. Layout might not be optimum using a fixed hight but at least works

    You're welcome to use it like this, but by "not supported" I mean that we won't be able to help with issues you encounter due to this choice.

  8. icbaker commented on Dec 19, 2022

    @icbaker
    icbaker
    on Dec 19, 2022
    Collaborator

    I'm not able to reproduce your RTL problem in the demo app. When I change the language to an RTL one I see the controls look the same as when I view it in english.

    Please can you see if you're able to reproduce it there? If not then I suspect it's another side-effect of using PlayerControlView outside of PlayerView.

  9. icbaker
    added
    need more info
    on Dec 19, 2022

  10. maknon commented on Dec 19, 2022

    @maknon
    maknon
    on Dec 19, 2022
    Author

    i just tried it with PlayerView instead of PlayerControlView. it seems it is a RTL issue
    1

    i will try to check the demo app

  11. maknon commented on Dec 20, 2022

    @maknon
    maknon
    on Dec 20, 2022
    Author

    it seems the same case with demo app. you just need to enable RTL and can see it in the design view

    image

  12. icbaker commented on Dec 20, 2022

    @icbaker
    icbaker
    on Dec 20, 2022
    Collaborator

    What happens if you actually run the demo app on a real device in an RTL language? That's what I tried (Pixel 5 running Android 13) and didn't observe a problem. I tried the following ways to introduce an RTL layout:

    • 'force RTL' in developer settings
    • select the 'fake' BiDi language in system-wide language settings
    • select arabic in system-wide language settings

    All of these affected other UI elements like back arrows as expected - but none had the effect on the playback controls shown in your screenshots.

  13. maknon commented on Dec 20, 2022

    @maknon
    maknon
    on Dec 20, 2022
    Author

    Please find the output on real device:
    Screenshot_20221220_143848_ExoPlayer

    im using this to activate the RTL:
    on every activity:

    @Override
  protected void attachBaseContext(Context base)
  {
    super.attachBaseContext(ContextWrapper.wrap(base, new Locale("ar")));
  }

    public class ContextWrapper extends android.content.ContextWrapper
{
    public ContextWrapper(final Context base)
    {
        super(base);
    }

    public static ContextWrapper wrap(Context context, final Locale newLocale)
    {
        final Resources res = context.getResources();
        final Configuration configuration = res.getConfiguration();
        final Configuration configuration2 = new Configuration(configuration);

        if (Build.VERSION.SDK_INT >= 24)
        {
            final LocaleList localeList = new LocaleList(newLocale);
            LocaleList.setDefault(localeList);
            configuration2.setLocales(localeList);
        }
        else
        {
            Locale.setDefault(newLocale);
            configuration2.locale = newLocale;
        }

        return new ContextWrapper(context.createConfigurationContext(configuration2));
    }
}

  14. icbaker commented on Dec 20, 2022

    @icbaker
    icbaker
    on Dec 20, 2022
    Collaborator

    What do you observe if you change the system-wide language using the settings UI rather than overriding it in code?

  15. 2 remaining items

  16. maknon commented on Dec 21, 2022

    @maknon
    maknon
    on Dec 21, 2022
    Author

    Huawei android 9
    Screenshot_20221221_081105_com google android exoplayer2 demo

  17. icbaker commented on Dec 21, 2022

    @icbaker
    icbaker
    on Dec 21, 2022
    Collaborator

    I'm afraid without being able to reproduce the problem it's hard to investigate further. Can you try with the demo app in the emulator? That might be as similar as we can get to each other. I used a Pixel 5 API 33 emulator with the demo app built from 1.0.0-beta03 (no code changes) and I enabled 'force RTL' in developer options. I see this:

    Screenshot 2022-12-21 at 16 01 01

  18. maknon commented on Dec 21, 2022

    @maknon
    maknon
    on Dec 21, 2022
    Author

    ok i just recognised that i added additional RTL support in the manifest

    android:supportsRtl="true"

    yes without this line RTL is not activated fully and you will not see this issue. please try it

  19. icbaker commented on Dec 21, 2022

    @icbaker
    icbaker
    on Dec 21, 2022
    Collaborator

    Thanks - I can now reproduce the problem.

  20. icbaker
    removed
    need more info
    on Dec 21, 2022
  21. marcbaechinger
    added 4 commits that reference this issue on Jan 4, 2023

    Fix order of playback controls in RTL layout

    8313af1

    Enable RTL support in the demo app

    010c6b9

    Fix order of playback controls in RTL layout

    8060342

    Enable RTL support in the demo app

    69583d0
  22. icbaker
    closed this as completedon Jan 5, 2023
  23. christosts
    added 2 commits that reference this issue on Jan 31, 2023

    Fix order of playback controls in RTL layout

    a94aa8d

    Enable RTL support in the demo app

    70156dc
  24. christosts
    added 2 commits that reference this issue on Feb 16, 2023

    Fix order of playback controls in RTL layout

    ee72778

    Enable RTL support in the demo app

    1e97da9
  25. androidx
    locked and limited conversation to collaborators on Mar 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

bug

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions