Newpipe: Other Services UI

Created on 7 Aug 2017  路  25Comments  路  Source: TeamNewPipe/NewPipe

@TobiGr wrote here:

@wb9688 It's a great idea to add SoundCloud to NewPipe! Thank's for your work.

Btw do we already have ideas for NewPipe's GUI? I was thinking about something like this.

Since tabs will be introduced with TeamNewPipe/NewPipe#620 soon, another bar on the top of the screen doesn't seem to be a good solution to me. I thought a little about this problem and found two possible solutions:

  1. Refactor the search filter menu: remove the old list and add clickable items. This gives the user the possibility to search for things in Youtube _and_ SoundCloud at the same time.
    search
    First sketch: default search bar Second sketch: Search bar after clicking on the filter icon (maybe the filter icon should not disappear to be accessible for further actions). The clickable items should have different background colors depending on their state.

  2. Add navigation drawer to app: replace the old menu in the app bar by a navigation drawer. This solution gives the app a more modern look and separates all services.
    design

GUI discussion enhancement

Most helpful comment

So this is my Version of @TobiGr second Idea:

Main Page

np_main

The Main page offerers three tabs:

  • Trending (Main content)
  • Subscribed Channels
  • Favorites

The menu of the three dots in the left upper corner offer:

  • The about page

App drawer

np_drawer

__The top__ (background in red or the Cooperate Identity color of the service) shows an icon of the current service. (Maybe also it's name)

__The List in the Middle__ shows the available services.

__The bottom__ offers settings, downloads, and history.

Now I know we can not 100% implement it this way, so please see this only as a guidance.
@wb9688 Asked it here, so I hope this will help you.

All 25 comments

@wb9688 wrote here:

@TobiGr: I didn't know about that PR. I think I'd prefer option 2, but I'd also be interested in their opinion. I think we'll also need a design for a decent control activity for NewPipe's music player. And we'll also need to think about what we'll do with audio-only streams in the stream activity. For example the popup player wouldn't make sense. Then we'll also need to change NewPipe's description, since it won't be only a YouTube frontend anymore. I don't think we should call it a YouTube and SoundCloud frontend then, because when we add support for more services, it'll become something like a YouTube, SoundCloud, Vimeo and Dailymotion frontend, which is way too long.

I don't think we should call it a YouTube and SoundCloud frontend then

I'd simply call it a streaming app for various services :P

Also I like the second UI better. You can see things more easily.

And we'll also need to think about what we'll do with audio-only streams in the stream activity

The frontend can handle it if several streams or information is not available. So if a service does not allow audio only the audio only option should not be visible anymore. For audio only streams this does not applay so far, so @wb9688 you are right, this should be implemented.

Id do something like this

screenshot_20170807-134214

  1. Replace the triangle with a headphone or note icon.
  2. Remove the headphones an popup playsr.

Also you are right we really need a central audio control.

@theScrabi: I was thinking the exact same :D

What about the design for the audio player controls?

I'd like something on the bottom of the screen, just like a snack bar, with some rudimentary controls, and when you pull it up, you have a full player control. A little bit like vlc does it.

@theScrabi: Something like this?

Yup

Could you add bottom navigation also since some apps are doing it like spotify,youtube etc...

So this is my Version of @TobiGr second Idea:

Main Page

np_main

The Main page offerers three tabs:

  • Trending (Main content)
  • Subscribed Channels
  • Favorites

The menu of the three dots in the left upper corner offer:

  • The about page

App drawer

np_drawer

__The top__ (background in red or the Cooperate Identity color of the service) shows an icon of the current service. (Maybe also it's name)

__The List in the Middle__ shows the available services.

__The bottom__ offers settings, downloads, and history.

Now I know we can not 100% implement it this way, so please see this only as a guidance.
@wb9688 Asked it here, so I hope this will help you.

@theScrabi That looks awesome! I like it.

Thank you :)

@theScrabi: I like it, except for one thing: that "About" isn't in the
drawer.

That is true, but the about page is something that is not as importand as settings download, and history. These are things you need more often.

Hm since @mauriciocolli re factored the settings UI, so it shows categories, we could put the about page there, making the three dots unnecessary in the main screen.

We keep getting feedback and suggestion through our blog. Wesley wrote this and a bit more:

anyway after thinking about the subscription page design I realized a few design changes that would overall make newpipe a better app. First regarding multi services, when looking at the beta version available on F-Droid within the side panel there is no all category, yet you see subscriptions from all categories which is illogical. Second assuming there should be a all category how should it show the subscriptions from multiple services, this I made a mockup for (https://imgur.com/a/PGLmZ) instead of fruitlessly describing it with words. I hope this is useful

I wanted to throw it into this discussion because he brought up a different UI for subscriptions. We didn't put much thoughts into how to handle subscriptions, so his image worths a closer look.

@TobiGr I like this!

@TobiGr We can't add an all service (yet), because imagine you want to search in ... say 25 services at the same time, you either end up with a drained battery, or you wait for half an hour.

Having the subscriptions be sorted by specific services is however a good idea I think :D, maybe we should consider adding this feature once we have a few services :+1:

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

What's The Possibility of adding Dailymotion?

Pretty hight, someone had to write an extractor for it.

As of 0.17.1, the UI to switch services is to tap the rectangle with the Newpipe logo and pipes background in the side menu. I think this is non-intuitive, and the tiny arrow doesn't really help.

Instead, the name of the service (maybe including the arrow?) could be in a solid colored rectangle, which would contrast with the pipes background to indicate that it is a menu, not just text inside an image.

Alternatively, just have all the services listed in the main side menu directly above the other entries (with a divider in between just like History and Settings), the same as in the App Drawer image shown by @theScrabi above.

Someone offered to write an extractor for Dailymotion. Dailymotion became more important during the decreasing freedomg of speech on so called YouTube.

Pretty hight, someone had to write an extractor for it.

@grravity wrote in #3886:
"Suggesting to hide everything relating to YouTube when swapping to another platform. For example:

I have my main page set to show What's New, Playlists, Subscriptions, Default Kiosk, History. So when I swap from YouTube to PeerTube, most of those should be empty due to not being signed into PeerTube so you wouldn't have anything under What's New or Subscriptions (unless local).

A secondary improvement would be to set different Main Pages per platform, so on YouTube I can have it like above, but when I switch to PeerTube it removes Subscriptions and What's New if I wanted.
Also being able to add catagories from the side menu onto the main page would be nice. So like Soundcloud has "Top 50", if I wanted to add that to my Main Page instead of needing to swipe to the side menu I can.

Also I assume it's a bug or just poorly thought out, but the What's new and Subscriptions pages even on the sidebar show YouTube content when PeerTube is selected."

@kekukui wrote in #3167:

1. NewPipe displays the last-used service sub-menu at launch.

image

This is confusing and counter-intuitive because the name of the service does not appear on screen.

_The existing layout does not make it obvious that NewPipe supports multiple sites & services -- and it is not mentioned on the NewPipe web site (or the app listing in F-Droid)._

Recommendation: include the service name & logo / favicon

image

2. This gadget toggles between the entire service list & and the options menu for a single service. (Very confusing & counter-intuitive, since no other app works this way.)

image

Recommendation:

Display services menu at launch with heirarchical sub-menus.

image

Alternative menu layout concept.

image

@andrewferguson wrote in #1295:

[Disclaimer - these are just my thoughts. I welcome feedback as to why this is not a good idea!]

In the latest version of NewPipe multiple services are now supported (both YouTube and SoundCloud). However I don't see that is particularly intuative that you go to the main menu to change which service is being used, because only two features are affected by which service is being used:

Searching (where the results that appear are limited to only the current service)
Related videos (where the related videos* that appear underneath a selected video are limited to only the current service)

My thoughts are that it would be simpler and less confusing if you chose a service when you searched. Then all the results that appeared would be for the service you chose when making the search. Similarly, when you are on a video, all of the related videos would be from the same service as the selected video.

The reason I think this is more intuiative is because many of the features that are offered by NewPipe (history, playlists, etc..) are completely service-independent, and therefore having the whole of the app (including the colour scheme!) change with the service - when in reality you can still access videos from service A when in the "mode" for service B - is a little confusing.

What do other's think?

*in SoundCloud's case this would be songs, as SoundCloud hosts songs, and not videos, but you get what I mean!

Thanks @Stypox for moving my comment [above] to this more relevant issue!

I still stand by that comment - there's nothing particularly wrong with the way NewPipe handles services, but I feel that my suggestion above is slightly cleaner and less confusing. It would also fix the issue of:

The existing layout does not make it obvious that NewPipe supports multiple sites & services

as when you search, you could have a small piece of text with the contents "Searching YouTube (change)" which would make it clearer that multiple services are supported.

Having said that, the above approach might increase the clutter in the searching experience (which I'd definitely want to avoid - I like how clean the current search is).

I guess my main criticism is the following:

you can still access videos from service A when in the "mode" for service B - [this is] is a little confusing.

Also have a look at #2610.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

android1973 picture android1973  路  3Comments

cool-student picture cool-student  路  3Comments

cavemandaveman picture cavemandaveman  路  3Comments

f242 picture f242  路  3Comments

fnadde42 picture fnadde42  路  3Comments