Player screen design update

[ByteHamster]

Feedback welcome.

Closes #3723
Closes #3793

Before/After:

[Pentaphon]

I think it's time to update the playback button layout on the player. Right now, they are laid out in 1 line as if they are equally important to the end user when they are actually not, and some buttons are up at the top right when they should be closer to the user's hand below. My suggestions:

1. The back, play and reverse buttons should be moved up to fill that empty space we now have. The play button should also be slightly larger than the forward and reverse buttons and they should be spaced out more to avoid accidental taps. We may also want to consider making the play button a bordered play button, both to help visually separate the play button from the forward and reverse buttons and match the new bordered buttons you merged in Rewrite list item display #3827

2. I don't think we need the "next track" button at all. I don't see it on ANY podcast clients these days because many people just let their queue do the work and it wouldn't make sense for people that do not use the queue function and just listen to podcasts one at a time. I think it can be replaced by a "mark as played" button I will explain in the next step.

3. I think the bottom row of playback buttons should consist of all of the secondary buttons so that they are all close to the user's hand when holding their phone. The bookmark star, sleep (ZZZ), playback speed, and audio controls button should be grouped together below the play/back/forward buttons, in that order by default. The last button in that row should be a "mark as played" button so that users can finish their podcasts early. For example, when you start to hear the outro music at the end of a podcast and you don't want to spend any more time listening because the important part of the podcast is over, you can hit the "mark as played" button to both mark as played and delete the downloaded file at the same time. Additionally, when the "mark as played" button is hit, you should go to the next podcast in the queue or go close the player screen to go back to the player menu if there's no queue.

4. I think we should allow users to put the secondary playback buttons in whatever order they want in the settings page, in case they prefer to have certain buttons closer or farther away from their fingers.

I think those 4 steps would make for a much more modern, hand-friendly player UI that works better on the increasingly large and taller screens we are seeing today. Antennapod's current UI was fine back in the Android 2.x days when screens were relatively small, but not anymore.

[ByteHamster]

The back, play and reverse buttons should be moved up to fill that empty space we now have

There still are the horizontal tabs with shownotes and chapters. Making the button row higher makes it harder to reach the tabs.

The play button should also be slightly larger

I tried that and did not like it. So I reverted back to the same size. I will experiment with a bordered button

I do not want to do a full redesign like what you are suggesting. I just want to make it look a bit more modern without being a ton of work and destroying user's muscle memory.

[Pentaphon]

There still are the horizontal tabs with shownotes and chapters. Making the button row higher makes it harder to reach the tabs.

Not if we make the entire page move when swiping, buttons and all. It would give the user more room to view their shownotes, as well.

I will experiment with a bordered button

I would be fine with this. It would look quite good, make the player "feel" more modern, and match the list UI buttons. This might be asking for too much, but have you considered a "morphing" button like this?

[ByteHamster]

Not if we make the entire page move when swiping, buttons and all.

I am undecided about this one. Could be handy to have the slider available when browsing shownotes. Anyway, the current code design assumes that the button is always there. Removing it would require to restructure big parts of the playback screen. Restructuring the screen would also be needed for something like #2353 but I currently do not have time for that.

This might be asking for too much, but have you considered a "morphing" button like this?

This is currently too much work for me. Contributions welcome, though.

[Pentaphon]

Contributions welcome, though.

Fair enough. My other player idea #3847 is probably too much work as well.

You're probably already aware, but you may want to use the "help wanted" github label for any issues you're interested in implementing but don't have time for.

Since there's no major player changes to be made other than the bordered play button, I think your "after" image looks fine to me. I still think the "next track button" should be done away with entirely, though, since it doesn't mark the current podcast as played or delete the downloaded file, but that's just my opinion.

[ByteHamster]

You're probably already aware, but you may want to use the "help wanted" github label for any issues you're interested in implementing but don't have time for.

That's basically every issue :D I added "good first issue" to some issues but except from Hacktober, it did not increase the number of contributions too much.

My other player idea #3847 is probably too much work as well.

Should be pretty easy with a Toast message but I don't need this personally, so I am not too motivated to do it (even if it only takes half an hour)

[ByteHamster]

Do you think this looks better? The play arrow is not actually bigger but it has a bigger touchable area and a circle. Also, moved the buttons slightly closer together.

Previous / New:

[Pentaphon]

Do you think this looks better?

The play button looks better but I'm not sure why the buttons are slightly closer together. I think that just makes it more likely for people to hit the wrong button, but maybe its not close enough for that to happen.

[ByteHamster]

but I'm not sure why the buttons are slightly closer together.

The circle has no padding and therefore, the outer buttons looked like they had more distance than the other buttons. I don't think this increases the risk of hitting the wrong button.