Improve Player UI

[TobiGr]

At the moment our player UI is quite untidy and not easy to use on small devices. In addition, the symbol for additional actions is very small and therefore difficult to reach.
My suggestion to make more options accessible is a second overlay which can be opened via the settings icon in the right corner. Tapping on an icon on that screen should open another instance with more options if necessary. Tapping on free space should close the menu.
I added a placeholder for Pipecast or any other feature (equalizer, ...) so we won't have to spend time on restructuring it again in the near future.
I thought about the problem with the tiny popup which has even less space to work with. Maybe we should just open NewPipe to adjust the popup settings and close it afterwards or auto-resize it until the menu gets closed.
@theScrabi @karyogamy @mauriciocolli @wb9688 Is there anything else we need to add to the player?

[karyogamy]

I'd prefer something similar to VLC's layout, where the play/pause, previous, next selections are dropped to the bottom, creating something similar to our background player queue. Where these three buttons are surrounded by 3 other most used functionalities and an overflow button, which less used buttons are shown on a translucent dialog.

This way, we drop all button access to the bottom of the layout, making control easier on the hand and fingers.

Also, we should merge all track (audio/video/subtitle) track selection to a single dialog, similar to the ExoPlayer demo app. After the player is refactored, swapping between the popup and main players should be fast enough that we don't really need to have many UI elements on the popup and can just change/inherit the settings from the main player.

[FlorianSteenbuck]

Implemented as own player for devices with lower display resolution. Would be the solution to this. And through the swiping for this player away.

[CharlieBrown12]

2 more suggestions on the UI front:

• video lists look cluttered on larger device (Galaxy Note 5, default DPI), would welcome more cozy spread between the text lines in video lists
• notification controls - look outdated. Check Simple Mobile Tools - Music Player. https://play.google.com/store/apps/details?id=com.simplemobiletools.musicplayer ... Unsure which library they used for notifications - but I guess its free, as this provider makes free apps only.

[Stypox]

@avently said in #4456:

Describe the feature you want

Right now we have to select arrow down button in order to see second line of buttons like subtitles, aspect ratio, open in browser, etc. This is fine until someone will want to show more buttons inside this line. All the buttons from second line should be replaced with AlertDialog or BottomSheet or Popup menu with enabled icons. I'm not sure which one is the best, needs testing to be sure. Popup menu allows to show submenu for subtitles and aspect ratio which is useful.

By making this change we can leave arrow down button but make it working like a scroller to the description. This will allow to tap on it and to see a description even in fullscreen. Once someone make a swipe-to-go-to-description even this button can be removed.

So the proposed look of the buttons in non-fullscreen:
Close video ------------ quality | speed | setup

In fullscreen:
------------ quality | speed | setup | arrow down

If the setup button will be a three dots icon it should be the last in a row in landscape too.

Is your feature request related to a problem? Please describe it

The problem is there are to many buttons. Some users want to add even more buttons. I don't think this UI element like second line with buttons is a great element in the case of many buttons.

How will you/everyone benefit from this feature?

We can close many issues after this idea is implemented. Also the player will be much faster in case of view relayout because it will lose some buttons.

[avently]

Not sure how other devs will find this old issue, but anyway. What you guys think about the idea to replace second line of buttons with dialog or something similar?

[opusforlife2]

A dark transparent version of what is in the OP would be my preference.

[Stypox]

@avently I agree with you and @opusforlife2, the current layout looks good with a small number of buttons, but already does not feel completely right. I might work on this in the future, though not for 0.20.1, as it would take some time and thoughts

[Angelk90]

@Stypox :

I wanted to open a discussion, but it has not yet been decided whether to enable them or not.
The images are based on version 0.21.9

I would recommend a ui similar to that of the youtube player.

1. The current timer of the playing video and the total time of the video, I would put them close together.
   As seen in the youtube image.

2. For changing video quality, playback speed it would be better to put them in a bottomsheet menu.

3. I would put a button on the right to enable subtitles.

4. A button to open the bottomsheet menu, where the following characteristics should be entered:

• Video quality
• Loop the video
• Choice of subtitle to use
• Playback speed

5. I would remove the following features:

• The "x" on the left to exit the video player
• World icon that allows you to open the video in youtube app
• Share it
• The button to mute audio

Youtube:

Youtube menu bottomsheet:

Youtube preview:

NewPipe:

NewPipe preview:

[Angelk90]

@Stypox : How about changing the video preview ui.

At the moment:

I put a white border in the preview image and changed the order to the first image and then under the time.
How does youtube.

Change:

[Stypox]

The time was put above after a decision by the team, and won't be reverted

[Angelk90]

@Stypox :About that #1317 (comment)

[Thewisem]

Yeah I want to add an idea to the UI design on the chapter element
You could use a line break to denote that that chapter is finished and this is the next chapter
Or
In the preview you get when you scroll through the playbar, the chapter title appears on top of the preview.
This helps in normal view and we don't need to worry about adding a button in popup view.

[SameenAhnaf]

Full Screen Player UI:

Video Title					Resolution	Speed	Audio Tracks	Captions
Close	Seek Bar							Minimize
Fit/Fill/Zoom	Share	Previous	Rewind	Play/Pause	Fast Forward	Next	Open in Browser	Popup

Audio options will be included in resolutions' list. So, no background button is required. For popup and main player, same UI would be applied but Play/Pause icons will be placed in the middle.

For full screen portrait player, Rewind and Fast Forward buttons will be hidden. On very small popup player, Audio Tracks and Captions will be hidden.

Related: #5505, #4601, #6071, #6339, #4414, #9188

[opusforlife2]

The real estate on devices with smaller screens is quite limited, so a lot of these buttons will have to be dynamically pushed into menus.

[Pentaphon]

The closer we can get to VLC player functionality but without the clutter, the better.