How to properly order media controls on Notification and Android Auto?

[k-arabadzhiev]

Hello,
I'm getting different order on different devices when using the SLOTs api:

I have this enum:

enum class PlayerSessionCommand(
    val commandButton: CommandButton,
) {
    REWIND(
        commandButton = CommandButton.Builder(ICON_SKIP_BACK_10)
            .setPlayerCommand(Player.COMMAND_SEEK_BACK)
            .setDisplayName("Rewind")
            .setSlots(CommandButton.SLOT_BACK)
            .setExtras(Bundle().apply {
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU)
                    putInt(DefaultMediaNotificationProvider.COMMAND_KEY_COMPACT_VIEW_INDEX, 0)
            })
            .build(),
    ),
    PLAY(
        commandButton = CommandButton.Builder(ICON_PLAY)
            .setPlayerCommand(Player.COMMAND_PLAY_PAUSE)
            .setDisplayName("Play")
            .setExtras(Bundle().apply {
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU)
                    putInt(DefaultMediaNotificationProvider.COMMAND_KEY_COMPACT_VIEW_INDEX, 1)
            })
            .build()
    ),
    PAUSE(
        commandButton = CommandButton.Builder(ICON_PAUSE)
            .setPlayerCommand(Player.COMMAND_PLAY_PAUSE)
            .setDisplayName("Pause")
            .setExtras(Bundle().apply {
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU)
                    putInt(DefaultMediaNotificationProvider.COMMAND_KEY_COMPACT_VIEW_INDEX, 1)
            })
            .build()
    ),
    FORWARD(
        commandButton = CommandButton.Builder(ICON_SKIP_FORWARD_10)
            .setPlayerCommand(Player.COMMAND_SEEK_FORWARD)
            .setDisplayName("Forward")
            .setSlots(CommandButton.SLOT_FORWARD)
            .setExtras(Bundle().apply {
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU)
                    putInt(DefaultMediaNotificationProvider.COMMAND_KEY_COMPACT_VIEW_INDEX, 2)
            })
            .build(),
    ),
    PREVIOUS(
        commandButton = CommandButton.Builder(ICON_PREVIOUS)
            .setPlayerCommand(Player.COMMAND_SEEK_TO_PREVIOUS_MEDIA_ITEM)
            .setDisplayName("Previous")
            .setSlots(
                CommandButton.SLOT_OVERFLOW
            )
            .build()
    ),
    NEXT(
        commandButton = CommandButton.Builder(ICON_NEXT)
            .setPlayerCommand(Player.COMMAND_SEEK_TO_NEXT_MEDIA_ITEM)
            .setDisplayName("Next")
            .setSlots(
                CommandButton.SLOT_OVERFLOW
            )
            .build(),
    )
}

and I'm using it like this:

   private val playerSessionCommandButtons = listOf(
        PlayerSessionCommand.PREVIOUS,
        PlayerSessionCommand.REWIND,
        PlayerSessionCommand.FORWARD,
        PlayerSessionCommand.NEXT
    ).map { it.commandButton }

    fun update(
        session: MediaSession,
        mediaItem: MediaItem?
    ) {
        if (mediaItem == null) return

        val layout = buildLayout(mediaItem)
        updateSessionCommands(session, mediaItem, layout)
    }

    private fun updateSessionCommands(
        session: MediaSession,
        mediaItem: MediaItem,
        layout: List<CommandButton>
    ) {
        val playerCommands = if (mediaItem.isLive) {
            DEFAULT_PLAYER_COMMANDS.buildUpon()
                .removeAll(
                    COMMAND_SEEK_TO_PREVIOUS,
                    COMMAND_SEEK_TO_PREVIOUS_MEDIA_ITEM,
                    COMMAND_SEEK_TO_NEXT,
                    COMMAND_SEEK_TO_NEXT_MEDIA_ITEM,
                    COMMAND_GET_TIMELINE // removes from Queue from Auto
                )
                .build()
        } else {
            val hasPreviousItem = session.player.hasPreviousMediaItem()
            val hasNextMediaItem = session.player.hasNextMediaItem()
            DEFAULT_PLAYER_COMMANDS.buildUpon().apply {
                if (!hasPreviousItem)
                    removeAll(COMMAND_SEEK_TO_PREVIOUS, COMMAND_SEEK_TO_PREVIOUS_MEDIA_ITEM)

                if (!hasNextMediaItem)
                    removeAll(COMMAND_SEEK_TO_NEXT, COMMAND_SEEK_TO_NEXT_MEDIA_ITEM)
            }.build()
        }

        session.setMediaButtonPreferences(layout)
        session.connectedControllers.forEach {
            session.setAvailableCommands(
                it, DEFAULT_SESSION_COMMANDS, playerCommands
            )
        }
    }

    private fun buildLayout(mediaItem: MediaItem): List<CommandButton> {
        return when {
            mediaItem.isLive -> {
                // empty list can be returned as well, but this makes the intent clearer
                listOf(
                    PlayerSessionCommand.PLAY,
                    PlayerSessionCommand.PAUSE
                ).map { it.commandButton }
            }
            else -> playerSessionCommandButtons
        }
    }

I've tested on Android auto, Samsung (Api 36.1) and Vivo (Api 36.0):

	first media item	Nth media item	last media item
samsung
vivo
android auto

The vivo and AA seem to be ordering the same way, while samsung it's slightly different. Is it possible to make the ordering for all for the first item the same as what vivo/aa are doing, while for the last item what samsung is doing?

While on the topic of slots, I've noticed there are these 2 constants:

  /**
   * A slot in a playback control UI for secondary backward-directed playback actions, most commonly
   * used for previous or rewind actions.
   */
  @UnstableApi public static final int SLOT_BACK_SECONDARY = 4;

  /**
   * A slot in a playback control UI for secondary forward-directed playback actions, most commonly
   * used for next or fast-forward actions.
   */
  @UnstableApi public static final int SLOT_FORWARD_SECONDARY = 5;

But I just couldn't get them to work as per the comment, that's why I'm using SLOT_OVERFLOW in my enum builder.

EDIT: android auto version on both devices: 17.4.663004-release

[tonihei]

Thanks for the detailed report!

I agree that it's surprising, but I can also see how it's mostly working as intended.

The best solution would be to use SLOT_BACK_SECONDARY and SLOT_FORWARD_SECONDARY as you already noted. However, the actual layout depends on which slots are supported by the UI element on the various devices. Historically, these secondary slots are not supported, so won't be shown. To capture your intention as best as possible, you could set setSlots(SLOT_BACK_SECONDARY, SLOT_OVERFLOW) to indicate your preference order - use the secondary back slot if available, otherwise the overflow.

From what I can tell, all these devices correctly display the buttons in the overflow slots they have available, they just fill them up in a different order:

• Samsung puts the first overflow always to the left, the second one to the right
• Vivo puts a single overflow to the right, but if there are two, left first, right second.
• Android Auto just displays all of them on the right in order

This is obviously not very satisfactory and also not fully aligned with the idea that these slots should work across devices. I can see two types of improvements here and I'm curious which one (or both) you would consider useful:

1. We can add a workaround to add greyed out buttons for disabled CommandButtons. This would mean it always shows the "Nth media item" version, but the prev/next button is greyed out when at the first or last item. Since you actually add all these buttons to the list and just remove the player commands, this most closely represents your intention as written in code.
2. We can add device-specific workarounds to support SLOT_BACK_SECONDARY and SLOT_FORWARD_SECONDARY by using our knowledge about how these devices display the buttons and then configuring it so that it seems to make sense even though they don't actually support these slots.

---

Not related to your actual question:

• val hasPreviousItem = session.player.hasPreviousMediaItem() and removeAll(COMMAND_SEEK_TO_PREVIOUS, COMMAND_SEEK_TO_PREVIOUS_MEDIA_ITEM) and similar seem unnecessary because they player should do this automatically. Worth removing to simplify the code.
• if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU) putInt(DefaultMediaNotificationProvider.COMMAND_KEY_COMPACT_VIEW_INDEX, 1) - I'm curious why this kind of setting is needed, I assumed this is happening automatically as well.

[k-arabadzhiev]

To capture your intention as best as possible, you could set setSlots(SLOT_BACK_SECONDARY, SLOT_OVERFLOW) to indicate your preference order - use the secondary back slot if available, otherwise the overflow.

Tried that, nothing seems to change on these devices.

I'm not quite sure what do you mean with your second suggestion. Is it to allow us to have empty slots, while still keeping the order as expected? i.e. to have
empty - seek_back - pause/play - seek_forward - next for first item
and
previous - seek_back - pause/play - seek_forward - empty for last item
across all devices?

I'm personally fine with either having empty slots or greyed out buttons, but if it's possible to leave the choice up to the users of the library, it would be great.

---

val hasPreviousItem = session.player.hasPreviousMediaItem() and removeAll(COMMAND_SEEK_TO_PREVIOUS, COMMAND_SEEK_TO_PREVIOUS_MEDIA_ITEM) and similar seem unnecessary because they player should do this automatically. Worth removing to simplify the code.

Maybe I'm using some of the apis wrong, but if I don't remove them and just return DEFAULT_PLAYER_COMMANDS when the item isn't live, then I'll get all the buttons but the previous/next won't work on first/last item and won't be greyed out either, which isn't great for the user.

Also I have a requirement to not show anything besides play/pause when live (icy or hls stream) media item is played, because we don't support seeking yet. Speaking of this requirement, when I play live item through AA, I do get greyed out buttons:

For other media items, I'm showing the buttons as above. update/updateSessionCommands are called when item transitions.

I tried removing anything I'm doing related to command changes and here are the results:

Samsung:
live item: only play/pause is shown (same as before)

first item: empty - seek to beginning - play/pause - seek to next - empty
nth item: empty - seek to beginning/previous - play/pause - seek to next - empty
last item: emtpy - seek to beginning/previous - play/pause - empty - empty

Vivo:
live items:
empty - seek to previous (greyed out) - play/pause - seek to next (greyed out) - empty - same as before

first item: empty - seek to beginning - play/pause - seek to next - empty
nth item: empty - seek to beginning/previous - play/pause - seek to next - empty
last item: emtpy - seek to beginning/previous - play/pause - seek to next (greyed out) - empty

AA:
live items show: play/pause - seek to previous while the item is buffering, but then only play/pause remains. Not sure why with my changes I was getting 2 disabled buttons instead.

first item: play/pause - seek to beginning/previous - seek to next - empty
nth item: play/pause - seek to beginning/previous - seek to next - empty
last item: play/pause - seek to beginning/previous - empty - empty

Is it possible to make it always seek to previous, instead of beginning?

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU) putInt(DefaultMediaNotificationProvider.COMMAND_KEY_COMPACT_VIEW_INDEX, 1) - I'm curious why this kind of setting is needed, I assumed this is happening automatically as well.

I'm changing the index to 0 when it's live item (because live items have only this button), while for podcasts I have seek back - play/pause - seek forward in the collapsed view, which transitions nicely to seek previous - seek back - play-pause - seek forward - seek next when expanded.

override fun getMediaButtons(
        session: MediaSession,
        playerCommands: Player.Commands,
        customLayout: ImmutableList<CommandButton>,
        showPauseButton: Boolean
    ): ImmutableList<CommandButton> {
        val playCommandButton = if (session.player.isPlaying)
            PlayerSessionCommand.PAUSE.commandButton
        else PlayerSessionCommand.PLAY.commandButton

        val isCurrentMediaLive = session.player.currentMediaItem?.isLive == true

        return if (isCurrentMediaLive) {
            ImmutableList.builder<CommandButton>().apply {
                add(playCommandButton.also {
                    it.extras.putInt(COMMAND_KEY_COMPACT_VIEW_INDEX, 0)
                })
            }.build()
        } else {
            ImmutableList.builder<CommandButton>().apply {
                add(PlayerSessionCommand.PREVIOUS.commandButton)
                add(PlayerSessionCommand.REWIND.commandButton)
                add(playCommandButton.also {
                    it.extras.putInt(COMMAND_KEY_COMPACT_VIEW_INDEX, 1)
                })
                add(PlayerSessionCommand.FORWARD.commandButton)
                add(PlayerSessionCommand.NEXT.commandButton)
            }.build()
        }
    }

I just tried without the extras and it also seems to work, not sure why I only got it to work with the extras in the past. Thanks!