Circle arrows of Rewind and Forward buttons are invisible when PlayerControlView is used in BottomSheetDialogFragment

[Javernaut]

Version

Media3 1.1.0

More version details

No response

Devices that reproduce the issue

Any device

Devices that do not reproduce the issue

No response

Reproducible in the demo app?

Not tested

Reproduction steps

• Create a simple app where a PlayerControlView is used inside of a BottomSheetDialogFragment
• Use material-components-android with M3 theme for the Activity with the bottom sheet
• Launch the app and observer the absence of circle arrows used for the Rewind and Forward buttons

The core issue isn't in media3's PlayerControlView, but exactly in material-component-android. Here is a link to the issue with more details and screenshots.

Despite it is possible to customize the layout for PlayerControlView manually (and thus fix the issue on the client side), the out-of-the-box using of PlayerControlView is crippled. The media3 library may want to introduce a workaround.

Expected result

The circle arrows should be visible

Actual result

The circle arrows are not visible

Media

material-components/material-components-android#2999 (comment)

Sample project

PlayerControlViewTest.zip

[tonihei]

PlayerControlView isn't meant to be used as a stand-alone class, but only as as a part of PlayerView. PlayerControlView has a "minimal mode" that gets enabled if the surrounding player view becomes too small to accommodate all buttons. If you use the class as a stand-alone UI element, it may enter this "minimal mode" in unexpected situations and I suspect this is what's happening here.

[Javernaut]

@tonihei

I think the 'minimal mode' doesn't relate to this issue anyhow. I think this is because of using android:foreground attribute (for displaying the circle arrow) on a Button on a BottomSheetDialogFragment, where the M3 theme sets android:singleLine=true to the Button. Please have a look at this and more importantly - this comment.

Event if exactly the PlayerView is used on a bottom sheet, it will still suffer the issue due to the M3 styling.

Another reason this isn't the 'minimal mode' is that I can see the numbers for those buttons: 5 for 'rewind', and 15 for 'fast forward', but not their circle arrows.

[Javernaut]

@tonihei

When I override the 'rewind' button's layout with such a code:

<Button android:id="@+id/exo_rew_with_amount"
        android:singleLine="false"
        style="@style/ExoStyledControls.Button.Center.RewWithAmount"/>

Then the circle button becomes visible.
Same for the 'fast forward' button.

[tonihei]

Sorry for the delay in getting back to this. Do I understand correctly that we should set android:singleLine="false" by default for our buttons so that it doesn't get accidentally affected by these style changes in BottomSheetDialogFragments? Seems like should be the default anyway and the logical constraint for the content of these buttons.

[Javernaut]

I believe android:singleLine="false" is a reasonable workaround for the mentioned MDC's issue. It is essentially an undoing the 'single line' contraint that MDC imposes with the deprecated singleLine attribute.

This is exactly and the only thing I ended up doing in my project.

A brief check of the latest MDC releases (1.10.0 and 1.11.0-beta01) shows that the issue is still there.