FR: Full width thumbnails aka card view mode

[mahendranv]

Rationale behind the feature:
When user go through videos, it's not possible to get enough info from title as content creators prefer to include details in thumbnails as such.

• Spec details in tech videos
• Movie names
• News headline
• so on

PR for #6087

What is it?

• Bugfix (user facing)
• Feature (user facing)
• Codebase improvement (dev facing)
• Meta improvement to the project (dev facing)

Description of the changes in your PR

This PR adds new List view mode called Card. Behavior follows,

• A full width card with thumbnail size 16:9 ratio
• Two line full width title

Which screens include the new layout?

• Streams Feed/Trending/Channel details (list)
• Playlists in search and local playlist listing
• Streams inside local playlist

Minor code improvement:

Currently we have flags for gridLayout, miniLayout. Replaced the same with enum. Unified logic to identify the list mode resides in ThemeHelper.

Minor improvement for w800 devices

#8412
Thumbnail size in grid is small for TV(and tablets). This PR includes a small tweak where size has been increased for w800 qualified devices. As opposed to seeing 6 small thumbnails in TV, user will see 3-4 of em now.

Before/After Screenshots/Screen Record

• Before:
  N/A Grid & List have smaller thumbnails
  

• After:
  Uploaded in follow-up comment.

Fixes the following issue(s)

• Fixes Font size and/or thumbnails too small #8412
• Fixes 1x1 grid view option #6087

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.

Due diligence

• I read the contribution guidelines.

[mahendranv]

Appearance setting

Streams

Playlist

Streams inside local playlist

History is not changed since user does not explore new content in this screen and can recall the video by title and channel name. Also having multiple items on this screen will reduce number of scrolls user will make.

[killerrook]

Description of the changes in your PR
record videos
create clones
take over the world

Can someone tell me how to take over the world with Newpipe? i really need this feature

Also creating clones will be a nice addition to the app

[mahendranv]

Description of the changes in your PR
record videos
create clones
take over the world

Can someone tell me how to take over the world with Newpipe? i really need this feature

Also creating clones will be a nice addition to the app

Updated the PR description

[tvnmguy]

Add YT channel's icon left to the video titles

For more feedback: #6087 (comment)

[mahendranv]

@tvnmguy This is not implemented for two reasons

• The horizontal space taken by the avatar can be used to display more of the title. Uploader/Channel name is available below and user can long press the card to go-to the channel.
• Uploader avatar url is nullable and might not be available with all the providers. In such cases, we should plan for a placeholder

This can be a separate FR and based on votes/requirements it can be taken up.

[tvnmguy]

Latest NewPipe release;

PR Debug;

{---------}, which is misbehaving in PR Debug.

•Completely missing both sides of the thumbnails.

•There is a gap in {---------} between each items (In latest release, there is no gap between them and also which was a two layer combination).

•In Newpipe release {---------} aligned next below to the refresh bar line.

Openion;

I think this card layout with proper arrangement of [{---------} this] would be better.

For more feedback, please check this comment: #6087 (comment)

[mahendranv]

@SameenAhnaf Above two can be done in a separate PR. Including them will make code review harder.

@tvnmguy I'll look into the double line issue

[mahendranv]

@tvnmguy Fixed the gap between dashed lines and increased the gap on right/left in feed section. In other screens, the same edge to edge rendering is used.

image	comments
	Here you can see the lines align / misalign. This is a draw back of using dashed lines, we cannot predict how OS renders two such lines.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
9 Code Smells

0.0% Coverage
0.0% Duplication

[tvnmguy]

@mahendranv

First of all a millions of Thanks🎉 for all your hard work.

1:

If nothing new, remove the contraction of the thumbnail after feed updated.

2:

(A): Make the gap between sides of the thumbnail only required for the dashed lines (Let's say 1mm for the dashed line, then 1mm for the gap).

Benefit: The thumbnail doesn't feel too much contracted (Feels non contracted in normal view).

(B): Make only new feed items contracted for dashed line and rest of them in normal state.

Other improvements:-

1:

Adjust gaps above and below of the titles and other details texts between thumbnails like this👇.

2:

Adjust position of the duration card like 2nd one.

3:

Remove upper bar of the thumbnails (when press and hold).

4:

Add white gradient layer (when press and hold) coverage over the thumbnails too.

Before:

After:
https://user-images.githubusercontent.com/116799295/205009571-62bcdd04-f09a-4d98-95c7-27f9a96454d2.mp4

[tvnmguy]

Other problems:

1: when press and hold;

(A) For Playlists: The alignment not correct in that area.

(B) For Albums: The album split into two parts.

2: I don't think this problem is associated with card view because NP stable has the same problem. Anyway I mention that one as well.

In search segment, the album doesn't show total number of videos on the cover. But it show in bookmarked segment.

[mahendranv]

Making more customization specific to card layout will make the code-base prone to cosmetic errors and will break the existing generic UI paradigm. Also, it is not ideal to raise broader PR since code review won't have particular thing to focus.

[tvnmguy]

@mahendranv

What's your thoughts about this like card view ?
👇

[Dragonfly-30]

Hello, I would like to ask why the thumbnail quality is low in Card view? Also the last proposed design by @tvnmguy looks nice.

[mahendranv]

Thumbnail quality is being addressed by a different PR in extractor. Once it is merged, we can start utilizing the HQ ones. See comment: #6087 (comment). Vote this PR : TeamNewPipe/NewPipeExtractor#889.

As far as we don't make much customization per view type, it's good. Please let us decide on following card view variants before start with changes. Please consider these aspects and come up with mocks.

• Text size for labels
• Card aspect ratio currently used 16:9 since it can show more items in UI compared to 4:3. Also newer videos follow this for their thumbnails.
• Spacing between elements and screen edge

Card type	Mock	Remarks
Stream item		This is the general variant in Trending, Subscription
Feed card - newly added		One with dashed lines around it. This can be a separate improvement altogether. Dashed lines are not performant.
Feed card - normal		Same as Stream Item
Local playlist card		This shows first item thumb in playlist and shows a overlay with number of items. Our current implementation is taking focus away from the playlist name. I think we can use the list mode UI for this. It has perfect balance
Local stream card		Videos on local playlist. Similar to Stream Item plus it has reorder handle (three lines on bottom right)
History		I left it to use list mode UI. Reason is in history, we might not focus on thumbnail, rather title and number of items on screen is important.

[PassionateG1t]

So local playlists will preserve the list mode UI, right? Is that also the case for other playlists? A unified layout would make more sense imo.

[mahendranv]

So local playlists will preserve the list mode UI, right? Is that also the case for other playlists? A unified layout would make more sense imo.

@PassionateG1t Here you can see the screenshot. #9310 (comment)

I made changes, but it doesn't make sense for playlist to have larger thumbnails. It just reduces the number of visible items.

Streams inside playlist, has a full width variant. You can find screenshot in first or second comment.

[Stypox]

Mmmh, I think for consistency it would be better not to do per-screen customizations. If the user wants big thumbnails, then he will have big thumbnails everywhere. If he doesn't like big thumbnails, he can choose intermediate-sized ones (grid) or small ones (list). This also makes the code and the decision-making simpler. If in the future we find out this is a bad choice we can always change the type of some screen without issues.

in history, we might not focus on thumbnail, rather title and number of items on screen is important.

You might say so, but maybe somebody else would disagree. If someone chooses big thumbnails because the channels they are subscribed to have more information in thumbnails, then the history will most likely contain videos from those channels and they would want to see big thumbnails there, too.

[mahendranv]

@Stypox Except the history screen, others have full width cards now. I'll update the history screen sometime this week.

[SameenAhnaf]

@mahendranv @Stypox I think, #8412 needs to be implemented in a separate PR as some users may want to access TV view option manually. See: #9635 (comment)

[mahendranv]

@Stypox - Updated history screen to use full width card now.

@SameenAhnaf - Yeah.. for TV UX, #8412 and #9635 (comment) should cover most usecases. In this PR, we have increased the thumbnail size - this should slightly improve usability.

[SameenAhnaf]

@tvnmguy This is not specifically relevant to Card view option. Please open a new issue for your request.

[mahendranv]

@SameenAhnaf / @Stypox - Can you start the workflow?

[SameenAhnaf]

@mahendranv One more modification is required. #9555 is expected to add support for big thumbnails for channels in Grid view. IMO, subscriptions for Card view should be shown exactly as it's in that PR.

But channels in search results should be shown this way. Thumbnail should be in the middle of left side and description should auto-fit as required.

[Stypox]

What are these for?

[mahendranv]

For tablets and TV, this increases the thumbnail size. #8412 (comment)

[Stypox]

Maybe these are a bit too big, but let's see how user perceive it, no need for you to make changes.

(leaving here some other plausible values I found)

    <dimen name="video_item_grid_thumbnail_image_width">208dp</dimen>
    <dimen name="video_item_grid_thumbnail_image_height">117dp</dimen>

[mahendranv]

@SameenAhnaf I'll raise a separate PR. And provide with mocks.

@mahendranv One more modification is required. #9555 is expected to add support for big thumbnails for channels in Grid view. IMO, subscriptions for Card view should be shown exactly as it's in that PR.

But channels in search results should be shown this way. Thumbnail should be in the middle of left side and description should auto-fit as required.

[mahendranv]

@Stypox - Addressed review comments - pls start the workflow

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

0.0% Coverage
0.0% Duplication

[Stypox]

Code looks good to me. I tested on various devices with different sizes and APIs and even Android TV and it works well. Thank you!

[Stypox]

Found this comment on reddit:

Any way to get the smaller grid back? Using on an Android TV 5.1 and the humongous 3x2 grid makes navigation extra difficult. On 0.24, the grid is 5x2. Same for channel icons in subs. 7x4 grid vs 7x2 on 0.24. With 500+ subs, if I need to scroll with a remote, that's for a whole day of waiting. I have tablet mode forced on. (Not that it makes a difference.) (Honestly I'd prefer the subscription categories icons to be smaller too, like they were in 0.23. Even on the phone, these are needlessly large.)

So apparently some users perceive it this way. Maybe it's better to revert the part of this PR that makes thumbnails bigger, or choose some different values?

[opusforlife2]

Don't we have a separate XML for TV dimensions?

[Stypox]

Well, considering the issue was originally raised because of small thumbnails on TVs, it wouldn't make much sense to make thumbnails on TVs smaller and tablet ones bigger

[opusforlife2]

Maybe it's navigation that needs to change, then? Instead of going row by row, it could go page by page?

[Stypox]

I think remote control can only go right, left, up, down. So if we mapped the "down" to "go down one page" we would have no way to "go down one row".

[opusforlife2]

How about going off the edge (pressing Right on the last video in the row, or pressing Left on the first video) makes it go into 'page navigation mode', which you can exit again by pressing Left or Right? After which it goes back to highlighting videos in rows?

[Stypox]

That would conflict with going to the next main page tab, wouldn't it?

[opusforlife2]

Then, when in "row navigation mode", having the cursor/selector go off-screen (when pressing up or down) shouldn't scroll, but instead highlight the tab header again. So, scrolling would be done in "page mode" only.

[mahendranv]

For TV, the normal layout and focusables won't help. Basic requirement is DPad accelerated smooth scrolling.

DPad recyclerview is a third party lib optimised for TV. You can see demo videos in the readMe.

https://github.com/rubensousa/DpadRecyclerView

It's still in Alpha. But worth try.

[mahendranv]

@Angelk90 Card layout is targeted for Phone-Portrait mode where thumbnails will be too small. Ideally to give better UX, the grid layout should have customizable column count.

[opusforlife2]

@Angelk90 Since you've already opened an issue, you don't need to repeat it here.