Search filter UI

[TobiGr]

See also #110

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. 🤞

[Katy-sadi]

@Stypox I'm wondering if any changes or updates on this requested feature happened
I want to contribute in this project
I'm managing to make this feature for two or three filters

[Stypox]

No, there has been no progress on this so far, so you are free to take it. Thank you!

[Katy-sadi]

@Stypox while I was adding two more filters, I had to use the newPipe extractor, but I couldn't sync the extractor with newPipe the other thing is that the sorting function or the way to implement the sort I couldn't find it and so the menuItem! can you give me a hint please

[XiangRongLin]

@Katy-sadi

while I was adding two more filters, I had to use the newPipe extractor, but I couldn't sync the extractor with newPipe

see https://github.com/TeamNewPipe/NewPipeExtractor#testing-changes

[Stypox]

the other thing is that the sorting function or the way to implement the sort I couldn't find it

I think you should pass some parameters to YouTube in order for it to return sorted items. E.g. https://www.youtube.com/results?search_query=hello&sp=CAM%253D searches for "hello" sorted by "view count". The CAM%253D part seems to contain the data about sorting and other filters

[dawai667]

Hi first thank you for this app which is really helpful and well désigned. I just think that a simple "newest" filter would be helpful. (Newest video when you search with a keyword like "Tony hawk" --> display the latest videos about it.) Thank you

[Angelk90]

@Stypox , @Katy-sadi : Are there any news?

[copyvar]

Please add a feature to search for specific duration and upload date (e.g. videos between 8 and 12 min in duration, uploaded between 10/2016 and 04/2018). Thanks.

[trizen]

This code may provide some hints for implementing this feature: https://github.com/trizen/pipe-viewer/blob/1ddef6847d64b5567944bc0ad6336db405ed721d/lib/WWW/PipeViewer/InitialData.pm#L678..L774

[nicoursi]

Searching for "hello" and sorting it by upload date would be like this: https://www.youtube.com/results?search_query=hello&sp=CAISAhAB

[rk0n]

@Stypox Since it seems like this is a very requested feature and I would like to have it in the app myself. I can develop it if help is needed.

[opusforlife2]

Yes, @rk0n, help is indeed welcome, as this is one of the features mentioned in our pinned issue asking for help.

If you'd like to discuss this before working on it, and it really should be discussed thoroughly beforehand, since it's such a major feature, please get in touch with the devs on IRC/Matrix.

[evermind-zz]

Hi everyone,

I've been working on these topic quite some time. It is not yet PR ready. Here is a quick preview what it might look like on the surface:

[evermind-zz]

I've created a test version. If someone want to try let me know.

[opusforlife2]

@evermind-zz You could open a draft PR and whoever is interested could test (I expect a flood of testers xD).

[evermind-zz]

As I have no glue how to request a review for my PR that might close this issue here I try it this way: https://github.com/TeamNewPipe/NewPipe/pull/8837 If there is a better way to request a review let me know

[Skillanswer]

@evermind-zz

I don't know if this is the right place or right way to ask but...

Can you please also add an "Custom upload Date Range" option under "sort by / date" section?

It would have a Start Date and an End Date.So, only the results uploaded between those dates will appear.

It would be like Duckduckgo custom date range filter.🙏🏼

[vvkdev]

4 years of waiting. This is torture...