Newpipe: Search filter UI

[TobiGr]

This is a discussion on search and filter UI based on the work and discussion from https://github.com/TeamNewPipe/NewPipeExtractor/pull/124

@Bluesir9 @theScrabi Here are my ideas for the search and filter UI. I think it is better to put this into the app repo, because UI discussions do not belong into the extractor repo. I tried to explain briefly, what my intentions and ideas were to make the benefits and disadvantages a bit clearer.

---

TLDR; you can find the drafts at the end. It might be good to take a look at them before reading the text so the text is better understandable.

---

First of all, there were some things to consider before taking a look at the actual design.

NewPipe downloads a complete website for each search. That's why, I decided to make the filters directly visible, so people can see and change them __before performing the search__. This should be quite time and data saving.
Nevertheless, I am not that happy with the current position of the filter bar. While typing the search suggestions change and should help the user to suggest the search query he is looking for. Therefore, the filter bar seems to be "in the way" - just like a visual barrier. I considered to place the bar at the bottom of the screen. But this was also quite annoying, because the keyboard needs much space and the filter bar seems to be lost down there. Do you have any suggestions where to put it instead?

Because I decided to show the filters, I needed to group them, otherwise the bar contains too much info at once and is messy. Fortunately, the filters are already grouped by YouTube. Displaying text is a bad thing as it a) needs to be translated and b) people need way more time to read a text compared to see and understand an icon. Icons are intuitive and can be recognized later on. The difficult part here was to find icons which match the meaning of a group. I could not decided which icon to use for the duration category. I'd say, I prefer the clock icon above the timer because it matches with the two filters best. In other words, the disabled state looks quite similar to the to other states (short and long).

Apropos __state__. I didn't mention it before, so I do now. In the filter bar, there are five icons, each for one category. Most categories allow only one of their filters to be applied at a time. For example, the type category has six states: video, channel, playlist, movie, show and disabled / inactive (currently represented in NewPipe by all). Filtering by all and video is not possible. The second idea behind showing the filters in the bar represented by icons is to display their current state. This means, we replace the category icon when a filter is selected.. This needs a bunch of icons which represent the active filter. For most filters, good icons already exist (e.g. video, channel, playlist, thumb up for best rated etc.) and are easy to find.
But finding good icons for the upload date and features groups drove me crazy.
I couldn't find a way to abstract their filters without using numbers and letters. My decision is to represent the times by using the calendar and putting the time into it (see below).
There are too many features and in difference to all the other categories YouTube allows to apply multiple feature filters. Therefore we need to handle them different to the others.

For the "normal" categories I suggest to show a normal dialog containing the icon and filter name whereas the feature filter needs a bit more work. There are eleven feature filters provided by YouTube. I am not sure how many we want to show (We could either show all and ignore that our players do not support all features yet and provide the download of the videos so the user can an an other player, or just reduce the list to those filter which are supported by exoplayer).

Nevertheless, we need a different UI, because the single click dialogs are quite nonfunctional for this purpose. All together I needed to decided between two concepts: display the features as "badge" / "chip" or use the settings style with a toggle.
One one hand, we can put the chips after selecting them right into the filter bar. This allows the user to still see all applied filters. As said above, I'd like to achieve this behaviour. As a bonus, users are able to remove the filter chip with ony one click/touch. The big questions is how to select the chips. The material guidelines for chips suggest to use horizontal scrolling whenever the chips need more than two rows, because otherwise the screen looks quite messy. However, I think we can ignore this suggestion when we use a blank fragment to select the chips from and group then in a smart way.
On the other hand, we do not need to show the currently applied feature filters in the filter bar. This allows us to not use chips to select the filters. I think it is not intuitive to use setting-like toggles to enable something which than appears as a chip somewhere else.
I'd like to go with the chips, but am open to your feedback, which is btw. appreciated to all things here, but in particular to this topic.

Just my two cents regarding the __type filter__: Apart from the video, channel and playlist filter, we can now support the movie and show filter. We might consider to disable the movie filter in the app, because the extractor currently does only render the video-render objects, but not movie-render objects. Nevertheless, movies need do be purchased, a login is therefore required. So the movie filter might not bring the expected results because only free "movies", which are uploaded as video, are shown in the results.

Filter Icons

General filter UI and behaviour

We can also put the feature filters into a new row instead of appending them.

[dimqua]

This what the official YouTube app currently provides, right? Not new, but still an important feature, I personally miss it a lot. :-)

[TobiGr]

I don't know how they designed the filter in the YouTube app. That's a good hint. I might have to install it to take a look at it.
But yes, the filters are the ones from the YouTube website.

[Bluesir9]

For context, YouTube's implementation of filters looks like this:

[Bluesir9]

@TobiGr Another thing we will have to consider is how the same filter UI will fit for SoundCloud since we essentially use the same fragment for handling both searches I believe. Right?

[Bluesir9]

@TobiGr The "chips" approach seems like the right way to go. But I personally feel that it would be better to use text instead of icons, cause given the specific nature of some of the features, the icons wouldn't make things obvious for the user.

I imagine that users coming from the main YouTube app would be more familiar with the exact text and have an easier time adjusting if they find the same set of "texts" on NewPipe as well.

[goxr3plus]

Amazinf explanation

[TobiGr]

Sorry I haven't answered yet. I had little time and other things had priority.

To be honest, YouTube's UI looks very good and understandable. There's nothing wrong with taking them over in a similar way.

Regarding multi-service support: SoundCloud provides these filters: tracks, people/user, albums, sets and palylists. Currently, NewPipe supports only the three bold ones. media.ccc.de searches can be filtered by conferences and events.

[NoumanMukhtar]

Are those Search Filters added in the app or not ???
Like:
1- Upload Date
2- Features
3- Duration
4- Sort By
???
If not, What's the expected time for these features to come into the app???

[Bluesir9]

Alright, I would like to finish what I started.

If everyone is onboard with the idea, then I will implement the UI for the filters just like it has been implemented on YouTube's Android app. That, in my opinion would be the fastest way to get this much requested feature out there for public consumption.

Sound good?

[TobiGr]

Yes

[Catfriend1]

@Bluesir9 Hi, did you make some progress with the filter UI in the meantime? Thanks for taking care of that enhancement :-)!

[opusforlife2]

https://github.com/TeamNewPipe/NewPipeExtractor/pull/124 was closed. The reason is stated there. Hopefully, he's working on a new one. 🤞