Add channel avatars to Subscription tab #5409
Conversation
github-actions
bot
added
the
PR: waiting for review
efb4f5ff-1298-471a-8973-3d47447115dc
requested review from
absidue,
PikachuEXE,
ChunkyProgrammer and
kommunarr
| @@ -92,6 +93,7 @@ export default defineComponent({ | |||
| title: '', | |||
| channelName: null, | |||
| channelId: null, | |||
| channelThumbnail: null, | |||
There was a problem hiding this comment.
Not PR specific, I got this opinion for the entire app
channelThumbnail always looks like a variable with an object to me
| channelThumbnail: null, | |
| channelThumbnailUrl: null, |
| @@ -221,6 +223,10 @@ export default defineComponent({ | |||
| return `https://www.youtube-nocookie.com/embed/${this.id}` | |||
| }, | |||
|
|
|||
| profileSubscriptions: function () { | |||
| return deepCopy(this.$store.getters.getActiveProfile.subscriptions) | |||
There was a problem hiding this comment.
Why do we need deepCopy here?
| this.channelThumbnail = thisChannel?.thumbnail?.replace(/=s\d+/, '=s35') | ||
|
|
||
| if (this.backendPreference === 'invidious' && this.channelThumbnail) { | ||
| this.channelThumbnail = youtubeImageUrlToInvidious(this.channelThumbnail, this.currentInvidiousInstance) | ||
| } |
There was a problem hiding this comment.
I think it's better to put URL into a variable first, performing ops like replace, youtubeImageUrlToInvidious then assign the final value to this.channelThumbnail for performance
| .channelThumbnail { | ||
| border-radius: 999px; | ||
| display: inline-block; | ||
| max-inline-size: 24px; | ||
| max-block-size: 24px; | ||
| margin-block-end: 0 !important; | ||
| margin-inline-end: 0.5rem; | ||
| } |
There was a problem hiding this comment.
I know you are trying to override the value in .ft-list-item.grid but I think it's better to avoid using !important when possible
| .channelThumbnail { | |
| border-radius: 999px; | |
| display: inline-block; | |
| max-inline-size: 24px; | |
| max-block-size: 24px; | |
| margin-block-end: 0 !important; | |
| margin-inline-end: 0.5rem; | |
| } | |
| .channelThumbnail { | |
| border-radius: 999px; | |
| display: inline-block; | |
| max-inline-size: 24px; | |
| max-block-size: 24px; | |
| margin-inline-end: 0.5rem; | |
| @at-root { | |
| // Required to override style from ft-list-item | |
| .ft-list-item.grid & { | |
| margin-block-end: 0 !important; | |
| } | |
| } | |
| } |
What existing style is for:
efb4f5ff-1298-471a-8973-3d47447115dc
added
PR: changes requested
and removed
PR: waiting for review
|
This PR is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 14 days. |
|
I'm still here. Life is getting in the way |
|
We should probably remove the Adding support for displaying the channel thumbnails in the search results, that are already in the search API response coming from YouTube (we don't need a cache for it, which is what you seemed to be saying was needed in the discussion you linked), can either be done in this pull request or in a separate one. Edit: removed the closes text, feel free to add it back if you decide to add the search results to this pull request too. |
|
This PR is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 14 days. |
|
This PR was closed because it has been stalled for 14 days with no activity. |
Add channel avatars to Subscription tab
Pull Request Type
Related issue
Description
This PR adds channel avatars beside names in the subscription feed. Supports both APIs
Screenshots
Subscriptions tab
Search results (no thumbs displayed as discussed here)
Testing
The pull request has been tested on many channels and properly fallbacks to not displaying a thumb when one isn't available.
Desktop
Additional context
I'm happy to fix anything as I come from Svelte background and I haven't really touched Vue.