Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Player UI #1317

Open
TobiGr opened this issue Apr 14, 2018 · 22 comments
Open

Improve Player UI #1317

TobiGr opened this issue Apr 14, 2018 · 22 comments
Labels
feature request Issue is related to a feature in the app GUI Issue is related to the graphical user interface player Issues related to any player (main, popup and background)

Comments

@TobiGr
Copy link
Contributor

TobiGr commented Apr 14, 2018

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?

player_ui_new
player_ui_options
player_ui_subtitles

@karyogamy
Copy link
Contributor

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
Copy link

FlorianSteenbuck commented Apr 15, 2018

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
Copy link

CharlieBrown12 commented Apr 17, 2018

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.

@stale

This comment has been minimized.

@stale stale bot added the stale label Dec 1, 2018
@TobiGr TobiGr removed the stale label Jul 19, 2019
@Stypox Stypox added feature request Issue is related to a feature in the app GUI Issue is related to the graphical user interface labels Jul 21, 2019
@Stypox Stypox added the player Issues related to any player (main, popup and background) label Aug 27, 2019
@Stypox Stypox mentioned this issue Oct 3, 2019
@Stypox
Copy link
Member

Stypox commented Oct 9, 2020

@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
Copy link
Contributor

avently commented Oct 9, 2020

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
Copy link
Collaborator

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

@Stypox
Copy link
Member

Stypox commented Oct 10, 2020

@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
Copy link
Contributor

Angelk90 commented Aug 13, 2021

@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
  1. 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:
image

Youtube menu bottomsheet:
image

Youtube preview:
image

NewPipe:
image

NewPipe preview:
image

@Angelk90 Angelk90 mentioned this issue Aug 15, 2021
3 tasks
@Angelk90
Copy link
Contributor

@Stypox : How about changing the video preview ui.

At the moment:
image

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:
image

@Stypox
Copy link
Member

Stypox commented Aug 15, 2021

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

@Angelk90
Copy link
Contributor

@Stypox :About that #1317 (comment)

@SameenAhnaf SameenAhnaf mentioned this issue Sep 6, 2021
3 tasks
@Thewisem
Copy link

Thewisem commented Sep 6, 2021

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
Copy link
Collaborator

SameenAhnaf commented Jan 31, 2023

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
Copy link
Collaborator

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
Copy link

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

@WhiteChairFromIkea

This comment was marked as resolved.

@sosasees

This comment was marked as resolved.

@WhiteChairFromIkea

This comment was marked as resolved.

@theScrabi
Copy link
Member

Please be aware that further discussions should better be made over at the NewPlayer repo: https://github.com/teamNewPipe/newplayer

@Angelk90
Copy link
Contributor

@theScrabi : Will this repo be closed?

@sosasees
Copy link

no, NewPlayer will not replace NewPipe.

NewPlayer will be the updated media player component in NewPipe but NewPlayer can also be used in any app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request Issue is related to a feature in the app GUI Issue is related to the graphical user interface player Issues related to any player (main, popup and background)
Projects
None yet
Development

No branches or pull requests