Reduce size of song imageUrl
- Increase efficiency of loading times for song lists
This commit is contained in:
parent
ab031820f6
commit
1b379882f5
3 changed files with 11 additions and 5 deletions
|
@ -582,7 +582,7 @@ const getAlbumCoverArtUrl = (args: { baseUrl: string; item: JFAlbum; size: numbe
|
||||||
};
|
};
|
||||||
|
|
||||||
const getSongCoverArtUrl = (args: { baseUrl: string; item: JFSong; size: number }) => {
|
const getSongCoverArtUrl = (args: { baseUrl: string; item: JFSong; size: number }) => {
|
||||||
const size = args.size ? args.size : 300;
|
const size = args.size ? args.size : 100;
|
||||||
|
|
||||||
if (!args.item.ImageTags?.Primary) {
|
if (!args.item.ImageTags?.Primary) {
|
||||||
return null;
|
return null;
|
||||||
|
@ -652,7 +652,7 @@ const normalizeSong = (
|
||||||
genres: item.GenreItems.map((entry: any) => ({ id: entry.Id, name: entry.Name })),
|
genres: item.GenreItems.map((entry: any) => ({ id: entry.Id, name: entry.Name })),
|
||||||
id: item.Id,
|
id: item.Id,
|
||||||
imagePlaceholderUrl: null,
|
imagePlaceholderUrl: null,
|
||||||
imageUrl: getSongCoverArtUrl({ baseUrl: server.url, item, size: imageSize || 300 }),
|
imageUrl: getSongCoverArtUrl({ baseUrl: server.url, item, size: imageSize || 100 }),
|
||||||
itemType: LibraryItem.SONG,
|
itemType: LibraryItem.SONG,
|
||||||
lastPlayedAt: null,
|
lastPlayedAt: null,
|
||||||
name: item.Name,
|
name: item.Name,
|
||||||
|
|
|
@ -503,7 +503,7 @@ const normalizeSong = (
|
||||||
baseUrl: server.url,
|
baseUrl: server.url,
|
||||||
coverArtId: id,
|
coverArtId: id,
|
||||||
credential: server.credential,
|
credential: server.credential,
|
||||||
size: imageSize || 300,
|
size: imageSize || 100,
|
||||||
});
|
});
|
||||||
|
|
||||||
const imagePlaceholderUrl = null;
|
const imagePlaceholderUrl = null;
|
||||||
|
|
|
@ -80,6 +80,12 @@ export const Sidebar = () => {
|
||||||
const sidebar = useSidebarStore();
|
const sidebar = useSidebarStore();
|
||||||
const { setSidebar } = useAppStoreActions();
|
const { setSidebar } = useAppStoreActions();
|
||||||
const imageUrl = useCurrentSong()?.imageUrl;
|
const imageUrl = useCurrentSong()?.imageUrl;
|
||||||
|
|
||||||
|
const upsizedImageUrl = imageUrl
|
||||||
|
?.replace(/size=\d+/, 'size=300')
|
||||||
|
.replace(/width=\d+/, 'width=300')
|
||||||
|
.replace(/height=\d+/, 'height=300');
|
||||||
|
|
||||||
const showImage = sidebar.image;
|
const showImage = sidebar.image;
|
||||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||||
const playButtonBehavior = usePlayButtonBehavior();
|
const playButtonBehavior = usePlayButtonBehavior();
|
||||||
|
@ -335,10 +341,10 @@ export const Sidebar = () => {
|
||||||
to={AppRoute.NOW_PLAYING}
|
to={AppRoute.NOW_PLAYING}
|
||||||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||||
>
|
>
|
||||||
{imageUrl ? (
|
{upsizedImageUrl ? (
|
||||||
<SidebarImage
|
<SidebarImage
|
||||||
loading="eager"
|
loading="eager"
|
||||||
src={imageUrl}
|
src={upsizedImageUrl}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Center sx={{ background: 'var(--placeholder-bg)', height: '100%' }}>
|
<Center sx={{ background: 'var(--placeholder-bg)', height: '100%' }}>
|
||||||
|
|
Reference in a new issue