Feat: Add message on top and at the end of playlist to explain hidden videos

[Shadorc]

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

closes #9569

Description

Add a message at the top of the playlist vue to indicate that unavailable videos have been hidden.

• The detection is done by checking if the "Show unavailable videos" item menu exists in youtube.js response.

• This change cannot be implemented for Invidious API because there is no way to determine if videos are hidden in advance without loading the full playlist.
• I've based the UI on FtNotificationBanner, but I'm not entirely satisfied with the background color. I've tried various existing theme colors but didn't find something better.
• I've named the UI 'alert' because the corresponding YouTube's component is named ytd-alert-with-button-renderer.

Add a message at the end of the watch video playlist vue to indicate that unavailable videos have been hidden.

Screenshots

Local API

Invidious API

Testing

Message at the top of the playlist

1. Go to Settings > Preferred API Backend and chose Local API
2. Go to a playlist with unavailable videos (e.g. https://youtube.com/playlist?list=PLvMVt4c68EeXRV2R1fdieei9HwpuUKXKL)
3. Check that a message is displayed
4. Check that the message UI fits well with various resolution (including mobile)
5. Click on the close button
6. Check that the message is removed

Regressions:

• Check that the message does not appear in a playlist with no unavailable videos
• Check that the message does not appear with Invidious selected as Preferred Backend API

Message at the end of the watch video playlist

1. Go to a playlist with unavailable videos (e.g. https://youtube.com/playlist?list=PLvMVt4c68EeXRV2R1fdieei9HwpuUKXKL)
2. Click on a video
3. Scroll at the bottom of the playlist in the watch page
4. Check that a message is displayed
5. Check that the message UI fits well with various resolution (including mobile)

Regressions:

• Check that the message does not appear in a playlist with no unavailable videos

Desktop

• OS: Bazzite
• OS Version:
• FreeTube version: v0.25.1-beta

[Shadorc]

Marked as draft because @efb4f5ff-1298-471a-8973-3d47447115dc would like to expand the feature request

[efb4f5ff-1298-471a-8973-3d47447115dc]

Scope is expanded to displaying a message on how many videos are being hidden when user is on the watch page. This is being displayed at the bottom of the playlist

[efb4f5ff-1298-471a-8973-3d47447115dc]

but I'm not entirely satisfied with the background color. I've tried various existing theme colors but didn't find something better

As for this i currently dont have any ideass

[PikachuEXE]

I guess you are using the same bg color as tags now? (didn't check code)
Maybe those colors should be improved first... (tags don't look good in dark theme, in black theme it's almost unable to know they are tags

However I dunno if tags and "secondary banner" should use the same BG color :P

[Shadorc]

I'm using var(--secondary-card-bg-color) which is the same as tags, yes.
And I feel like there should be a new background color for this banner but it feels like a lot of work for this small addition. Also, I would be clueless as to what color to chose for each themes.
Maybe I could simply remove the background color, and slightly change the UI to have the close button at the left of the text, close to it...
UI is not really my cup of tea

Edit: I've changed to use bg-color, which is now the same as the watched background