Redesigned long press menu

[Stypox]

What is it?

• [ x ] Feature (user facing)
• [ x ] Codebase improvement (dev facing)

Description of the changes in your PR

This PR replaces InfoItemDialog with a JetpackCompose-based bottom sheet menu. This new menu is supposed to replace all item long press menus across the app, i.e. streams, playlists, channels. The menu contains more details than before about the stream/playlist/channel that was clicked, laid out in a (imo) nice design.

Please provide feedback both on the code and on the UI, but please keep in mind the points below when suggesting an alternative layout. Note that the order of buttons is not yet finalized, and that at the moment the menu only works for streams.

Portrait	Landscape/tablet

Motivation and design goals

• A text-based menu is difficult to read and only allows for a handful of actions, while an icon-based menu is more compact and also easier to use. There still are some labels to explain what the actions do though.
• The menu puts the most frequent actions always in the same places, so muscle memory can help perform press the buttons faster.
• Users keep asking for new long press menu actions, therefore the long press actions system should be easily extendable and the set of actions should possibly even be editable by the user.
• We want to provide the same experience across the app (hence same menu for streams, playlists, channels), which also deduplicates a lot of code.
• A menu at the bottom of the screen is easier to use in one-handed mode.
• The menu adapts well to different screen sizes, e.g. by showing more/less buttons or adapting the header with item information.

^{Some of these points arose after some discussions in the NewPipe Matrix channel}

TODO

• [ ] Also use the dialog for playlists and channels
• [ ] Perform asynchronous stuff with coroutines instead of RxJava3
• [ ] Implement "Start playing from here" actions
• [ ] Handle Kodi action
• [ ] Decide whether to allow the user to customize the menu (there is already a mini settings button in the top right of the menu for that purpose, but now it doesn't do anything)
• [ ] Various other TODOs spread out in code
• [ ] Understand which issues are solved by this PR
• [ ] Add documentation
• [ ] Add UI tests (?)

APK testing

The APK can be found by going to the "Checks" tab below the title. On the left pane, click on "CI", scroll down to "artifacts" and click "app" to download the zip file which contains the debug APK of this PR. You can find more info and a video demonstration on this wiki page.

Due diligence

• [ x ] I read the contribution guidelines.

[sonarqubecloud[bot]]

Quality Gate passed

Issues
18 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[NaN-Sz]

I suggest something like this:

the idea of a more button is to trigger a second bottom sheet containing the remaining items. Or perhaps it could expand to cover the entire screen, providing more space.

[Stypox]

@NaN-Sz thanks for the feedback! We already thought of the More button but the bottom sheet dialog already has kind of a way to show more buttons when there are too many (i.e. the menu starts out partially expanded, and you can scroll up to see the other buttons). What do you think about that?

Also, do you think the buttons are too small in my screenshots? Your mockup has much bigger ones, that's why I'm asking. I find the buttons in my screenshots easy to press correctly but it's arguable. Maybe we could put a slider in the "long-press menu's settings menu" to pick a size for buttons. This would be quite a niche setting, but also easy to understand what it does (and we would put it only in the "long-press menu's settings menu", not in the app's settings).

[NaN-Sz]

What do you think about that?

yes, it's actually better to scroll up than to use a button.

Also, do you think the buttons are too small in my screenshots?

Your buttons are a good size. But bigger buttons are easier to see and more intuitive. Having too many small buttons makes the interface look cluttered.

Maybe we could put a slider in the "long-press menu's settings menu" to pick a size for buttons.

I like the idea of customizing the app, I think it's a good idea.

[NaN-Sz]

or maybe like this?

[TobiGr]

These are really good changes to the UI :rocket:

I tested this on two devices and personally think that four columns are ok. The less columns we have, the more vertical space is required and thus the actions aren't within the "thumb-radius" anymore. However, it might be necessary to test this on small devices and potentially use three columns on those smaller screens.

I'd also suggest to not show more than three rows of actions by default on the smaller screens. It does not help people to find the stuff they need if their whole screens is plastered with action buttons. I'd vote in favour of the option to expand the bottom sheep by pulling it up which is quite intuitive. I do not think there is a need for a more button.

[sonarqubecloud[bot]]

Quality Gate passed

Issues
20 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[shivang1809]

or maybe like this?

Would it be a good idea to make it like only 3 or 4 most used options come on long press (delete, add to playlist, share, background ,etc). And then could be swiped up to show this all like it is. This will reduce vertical space.

A cherry on cake will be if there's a customize option to chose which options should come on long press and all other in swipe up menu.

[MD77MD]

the most important option is missing : Open Channel

[Stypox]

@MD77MD no, it is still there, it was moved under the video name to save some space (it should be noticeable since it's colored in blue)

[Stypox]

Idea to make the "open channel" link more accessible: adding a tiny "open" icon like this one after the channel name

[Stypox]

@MD77MD would an icon like this make it clearer?

[MD77MD]

@MD77MD would an icon like this make it clearer?

it does...but to tell you the truth, its not necessary. i was just too hasty ... collerd in blue is enough

[Stypox]

I added three more actions and I need your feedback on them:

• They allow playing in background/popup/main-player a list of items (e.g. a playlist) starting from the currently selected item.
• This feature is already present in some menus of the non-refactored NewPipe, but not in all of them, and when it exists it replaces the corresponding action to play just the single item.
• Feedback is needed on the icons: I made them up by combining the base icon (headset, picture in picture, and play) with a "badge" icon from Material Icons, let me know if you can think of a better "badge" icon from the ones available here.
• Now you can play-from-here in the feed and in channels, which is currently not possible in non-refactored NewPipe!
• Currently there are too many buttons on screen, but there will be a way to disable and reorder them (see the button in the top-right, I still haven't implemented it though)

[KraXen72]

i would suggest using the arrow-forward icon as the badge, and intersect it with the full-sized icon, same as enqueue next does.

also, the labels overflowing doesen't look great, i'd keep it in one line if possible

otherwise, can't wait for this new bottom menu! looks awesome!

[Stypox]

Here are 4 alternatives based on suggestions on Matrix and on @KraXen72's suggestions.

• The first and the fourth one look good imo, however the arrow-forward icon might not clearly indicate the intention to "play from here" (?)
• The second and the third look too crowded

also, the labels overflowing doesen't look great, i'd keep it in one line if possible

Since "Background from here" is a quite long text I don't think there is a way to keep it to one line. But I moved the three icons a bit higher, so there is more space above the text, and I think it looks better now.

[KraXen72]

top-left = 1, top-right = 2, bottom-left = 3, bottom-right = 4

personally, i think i most prefer 1 or 4 3 is not bad, but the vertical bar is too short and it also makes the icons look quite complicated/noisy. 2 is pretty clean too, but >> is often used to convey something like fast-forward, skip, get ahead.

between 1 or 4, i think 1 is just a tiny bit better, because 4's arrows are a bit too thick imo. you could also possibly try 2 but with only one >, see how that looks, but in case you don't want to, i think 1 is the winner out of these :)

[Stypox]

I mostly implemented the long-press menu actions editor, where you can enable and disable actions, and even enable and disable the header. The order is still not persisted anywhere, so next thing I'll do is store the data in settings. There are also a few TODOs left, e.g. making the UI usable with DPAD buttons (e.g. Android TV). I borrowed some code from FlorisBoard, so thanks! :-)

[Stypox]

Now it works even on Android TVs when using DPAD controls. The code has grown a bit complicated though.

[peat80]

Tried this on tv. You can reorder and remove entrys fine with just the remote. The only problem is that per default the reorder button has focus. So when you long press ok button and then release it you always land in the menu automatically. 🤔😄

Also the reordered menu is not saved on exit. On both tv and phone. Keeps reverting back to default setup.

Great work so far. 👌🏻