1x1 grid view option

[SameenAhnaf]

Checklist

• [x] I checked, but didn't find any duplicates (open OR closed) of this issue in the repo.
• [x] I have read the contribution guidelines given at https://github.com/TeamNewPipe/NewPipe/blob/HEAD/.github/CONTRIBUTING.md.
• [x] This issue contains only one feature request. I will open one issue for every feature I want to request.

Describe the feature you want

Users in #5153 asked for adding big thumbnail just like YouTube app. It was expected to be added for related videos, what's new feed, subscription feed and trending feed only. However, it could be a separate setting as well.

"1×1 Grid" should be applicable only for trending, subscription group, what's new feed and related videos if 'Auto' view mode is selected. List view will be applicable for channels and playlists at this moment.

One more thing, "1x1 grid video preview" setting will be great. This setting will play preview and other stuff automatically. An "Unmute" (Just like Facebook Watch) should be shown. Note that unmuting a video should start the video with other interface options right then without opening the video info. Video should play continuously unless a user scrolls down.

1. Off: Videos will be listed as usual. No unmute button should be shown.
2. On, for 3 seconds: Preview should be shown of 3 seconds repeatedly unless a user scrolls down.
3. On, for 6 seconds: Preview should be shown for 6 seconds repeatedly unless a user scrolls down.
4. Play video: Videos should start playing muted by default. Clicking on 'Unmute' should switch the video unmuted.

Is your feature request related to a problem? Please describe it

Additional context

Related issues: #6086, #5153, #5826, #6083

How will you/everyone benefit from this feature?

User experience will be just like YouTube app. Big thumbnail will be a joy to browse. Plus, auto view mode will be able to make a true sense.

[saebaryo-xyz]

Hey team, I also have difficulties using the app with small thumbnails instead if big ones in the original YT app and even Libretube or Skytube.

Any additional info is needed to have this feature worked on ?

Thanks!

[opusforlife2]

@SameenAhnaf This isn't adhering to the "one FR per issue" rule. Should be closed since #5153 is already there.

[mahendranv]

I did some changes in my fork and have achieved something similar. It is not a 1x1 grid but, rearranged the list item layout a bit.

This one required bit of changes in Extractor as current implementation picks thumbs with low resolution.

My suggestion

There can be a new item view called card will be introduced. It behaves this way,

Form factor	Portrait	Landscape
Phone	Full width card	Current list item view with larger thumbnail
Tablet	Two per row	4 per row(trial and error)

Another setting checkbox for thumbnail resolution can be introduced. This setting will be considered by extractor while parsing the API response. While max res selected, it'll pick maximum available resolution. Otherwise will follow the existing logic.

---

If it is OK, I can work on it and raise a PR. Auto playing the thumbnail can be raised as a separate FR as it would require quite some effort.

[mahendranv]

Based on how old is the video, the thumbnail URL behaves in two ways. The extractor should skim through list of thumbnails and pick ideal one as HQ one tends to consume data and load slowly.

With and w/o hash:

1. Sanitized URL has higher resolution. On few videos observed this behavior. This case should be studied just to ensure lower data consumption. 1280x720 https://i.ytimg.com/vi/qgVFDT8ELEQ/hq720.jpg 720x404 https://i.ytimg.com/vi/qgVFDT8ELEQ/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAfKJuxDdaL5U7eNcG2ratqbaV5Jw

2. Sanitized URL cropped the image to 4:3 and thus adds back bar on top and bottom. Remedy: The card layout will lock the imageView in 16:9 aspect ratio with center crop. 480x360 - This one has black bars on top and bottom [4:3] https://i.ytimg.com/vi/nwP3TeK-fPs/hqdefault.jpg 480x270 - [16:9] https://i.ytimg.com/vi/nwP3TeK-fPs/hqdefault.jpg?sqp=-oaymwEcCOADEI4CSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDY9pkLmLitAAF9lU7EVN2DwYwuBQ

[mahendranv]

app-debug.zip

Test build with package id org.schabi.newpipe.demo to ensure sideloadable along with production version. In appearance -> List view mode -> Card option will be available

• [x] Portrait mode - full width cards
• [ ] High res thumbnails
• [ ] Thumbnail quality setting in preferences
• [ ] Landscape mode (Show list item like YouTube)
• [ ] Adopt UI for TV

[AudricV]

I already worked on multiple images extraction support, and there is already a PR for that in the extractor (https://github.com/TeamNewPipe/NewPipeExtractor/pull/889). You should not change something about images with this feature request, that's another one.

Also, it is the responsibility of clients to make size choices, the extractor needs to return everything extractable.

[SameenAhnaf]

@mahendranv Playlists should also follow card view.

It'd be nice to integrate card view for channels as suggested in #6474. Note that this should not be included for subscriptions' list.

[ ] Adopt for TV

If you plan to adopt the UI for TV, make sure to combine https://github.com/TeamNewPipe/NewPipe/issues/7403, https://github.com/TeamNewPipe/NewPipe/issues/5322 & https://github.com/TeamNewPipe/NewPipe/issues/8412.

[mahendranv]

@SameenAhnaf please give feedback. Test build: card_layout.zip

Progress update

• Full width thumbnails
• Text size follows system provided textAppearance elements -> The font size is bit larger than the other layouts. Color follows the same.
• Uses existing APIs - i.e thumbs are bit blurred. Will support once multiple thumbs PR merged in extractor

Feed screen stream listing

Playlist listing

Playlist nested with streams in search screen

Streams inside a playlist

Reorder handle https://user-images.githubusercontent.com/6584143/200036151-1e85527e-cd61-4d82-bf1b-b0371594abcb.mp4

[SameenAhnaf]

Card view is not still applied in subscription feeds and history. Also, we need to plan how card view should be applied if Show Thumbnails is turned off.

In search results, Shorts could be shown by 3:4 ratio. As a channel tab, following layout should be applied.

Note that titles won't be abbreviated as dots (....). They should take up space as big as required according to video title characters. Yes, the spaces will be the same on same row but inconsistent compared to other rows. But ability to read the whole title will be really convenient.

[mahendranv]

Updated the feeds - ** Having larger thumbnail benefits while discovering new content. For history do we need cards? It will reduce the number of on-screen items. ** Setting 3:4 aspect for shorts might take larger screen real estate as shorts are shot on portrait orientation ** In the channel tab, I don't see shorts are mixed there. I'll update if we get it from extractor.

Here is how it's implemented in YT: No matter how many shorts the channel has, 6 shorts displayed in two rows and opening them goes to the player screen where endless swipe happens.

With larger titles in the shorts, the textview will fold to four or five lines right?

[SameenAhnaf]

Wdyt about this layout for portrait thumbnails? Keep larger thumbnails than usual on the left, title on the top, channel name in the middle and views and published time at the bottom. My previous reply was a mess. 😅

For history do we need cards? It will reduce the number of on-screen items.

I thought, card view will be the standard view and list view will be selected for history if Auto mode is selected. Anyway, relevant options should be placed in relevant spaces. So, it's best to avoid big thumbnail for history completely.

[mahendranv]

I like this portrait thumbs for Shorts. I'll try to include this tomorrow.

**

For other tickets mentioned in here: https://github.com/TeamNewPipe/NewPipe/issues/6087#issuecomment-1299050317

#8412 [Done] - Grid thumbnail size has been increased for tablets and TVs. If font size needs to be increased, can be done. #6474 - Channel about screen / card can plan a separate PR

#7403 - I think this can be done with few focus and key press listeners setup. As a short term solution, we can provide this. #5322 - For TVs, leanback would be the long term solution. We have TV specific libs that can enable us smooth navigation. But this might as well be a separate variant more focused for TV. Otherwise, might mess up tablet/phone counterpart.

[mahendranv]

https://github.com/TeamNewPipe/NewPipe/issues/6087#issuecomment-1304606996

We have an extractor PR that can provide the image aspect ratio. https://github.com/TeamNewPipe/NewPipeExtractor/pull/889. Once it's merged, portrait thumbs can be implemented. Doing this computation while loading image will make the UI clunky,

[tvnmguy]

@SameenAhnaf please give feedback. Test build: card_layout.zip

Progress update

• Full width thumbnails
• Text size follows system provided textAppearance elements -> The font size is bit larger than the other layouts. Color follows the same.
• Uses existing APIs - i.e thumbs are bit blurred. Will support once multiple thumbs PR merged in extractor

Feed screen stream listing

Playlist listing

Playlist nested with streams in search screen

Streams inside a playlist

Reorder handle https://user-images.githubusercontent.com/6584143/200036151-1e85527e-cd61-4d82-bf1b-b0371594abcb.mp4

1

2

I prefer 1st one, because it follow/maintain other card layout's uniformity (maintaining gap between thumbnails and side bezels of device). But I like more the arrangement of titles, channel name, viewers count and time from 2nd one.