fix: missing image covers for emby

leinelissen · Jul 26, 2024 · 01e25a8 · 01e25a8
1 parent 3993401
commit 01e25a8
Show file tree

Hide file tree

Showing 16 changed files with 73 additions and 33 deletions.
diff --git a/src/screens/Downloads/index.tsx b/src/screens/Downloads/index.tsx
@@ -136,7 +136,7 @@ function Downloads() {
             <DownloadedTrack>
                 <View style={{ marginRight: 12 }}>
                     <ShadowWrapper size="small">
-                        <AlbumImage source={{ uri: getImage(item as string) }} style={defaultStyles.imageBackground} />
+                        <AlbumImage source={{ uri: getImage(item) }} style={defaultStyles.imageBackground} />
                     </ShadowWrapper>
                 </View>
                 <View style={{ flexShrink: 1, marginRight: 8 }}>

diff --git a/src/screens/Music/stacks/Album.tsx b/src/screens/Music/stacks/Album.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import { useRoute, RouteProp, useNavigation } from '@react-navigation/native';
 import { useAppDispatch, useTypedSelector } from '@/store';
 import TrackListView from './components/TrackListView';
-import { fetchAlbum, fetchTracksByAlbum } from '@/store/music/actions';
+import { fetchAlbum, fetchSimilarAlbums, fetchTracksByAlbum } from '@/store/music/actions';
 import { differenceInDays } from 'date-fns';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS } from '@/CONSTANTS';
 import { t } from '@/localisation';
@@ -33,6 +33,9 @@ function SimilarAlbum({ id }: { id: string }) {
     const handlePress = useCallback(() => {
         album && navigation.push('Album', { id, album });
     }, [id, album, navigation]);
+
+    console.log(getImage(album));
+
 
     return (
         <Pressable
@@ -43,7 +46,7 @@ function SimilarAlbum({ id }: { id: string }) {
             })}
             onPress={handlePress}
         >
-            <Cover key={id} source={{ uri: getImage(id) }} />
+            <Cover key={id} source={{ uri: getImage(album) }} />
             <Text numberOfLines={1} style={{ fontSize: 13, marginBottom: 2 }}>{album?.Name}</Text>
             <Text numberOfLines={1} style={{ opacity: 0.5, fontSize: 13 }}>{album?.Artists.join(', ')}</Text>
         </Pressable>
@@ -62,6 +65,7 @@ const Album: React.FC = () => {
     const refresh = useCallback(() => { 
         dispatch(fetchTracksByAlbum(id)); 
         dispatch(fetchAlbum(id));
+        dispatch(fetchSimilarAlbums(id));
     }, [id, dispatch]);
 
     // Auto-fetch the track data periodically
@@ -76,7 +80,7 @@ const Album: React.FC = () => {
             trackIds={albumTracks || []}
             title={album?.Name}
             artist={album?.AlbumArtist}
-            entityId={id}
+            entityId={album?.PrimaryImageItemId || album.Id}
             refresh={refresh}
             playButtonText={t('play-album')}
             shuffleButtonText={t('shuffle-album')}

diff --git a/src/screens/Music/stacks/Albums.tsx b/src/screens/Music/stacks/Albums.tsx
@@ -149,7 +149,7 @@ const Albums: React.FC = () => {
                     <GeneratedAlbumItem
                         key={id}
                         id={id}
-                        imageUrl={getImage(id as string)}
+                        imageUrl={getImage(albums[id])}
                         name={albums[id]?.Name || ''}
                         artist={albums[id]?.AlbumArtist || ''}
                         onPress={selectAlbum}

diff --git a/src/screens/Music/stacks/Artist.tsx b/src/screens/Music/stacks/Artist.tsx
@@ -68,7 +68,7 @@ const Artist: React.FC = () => {
                     <GeneratedAlbumItem
                         key={id}
                         id={id}
-                        imageUrl={getImage(id as string)}
+                        imageUrl={getImage(albums[id])}
                         name={albums[id]?.Name || ''}
                         artist={albums[id]?.AlbumArtist || ''}
                         onPress={selectAlbum}

diff --git a/src/screens/Music/stacks/Artists.tsx b/src/screens/Music/stacks/Artists.tsx
@@ -178,7 +178,7 @@ const Artists: React.FC = () => {
                     key={item.Id}
                     item={item}
                     onPress={selectArtist}
-                    imageURL={getImage(item.Id)}
+                    imageURL={getImage(item)}
                 />
             </View>
         );

diff --git a/src/screens/Music/stacks/Playlists.tsx b/src/screens/Music/stacks/Playlists.tsx
@@ -70,14 +70,14 @@ const Playlists: React.FC = () => {
             <View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 10 }} key={item}>
                 <GeneratedPlaylistItem
                     id={item}
-                    imageUrl={getImage(item as string)}
+                    imageUrl={getImage(entities[item])}
                     name={entities[item]?.Name || ''}
                     onPress={selectAlbum}
                 />
                 {nextItem && 
                     <GeneratedPlaylistItem
                         id={nextItemId}
-                        imageUrl={getImage(nextItemId as string)}
+                        imageUrl={getImage(nextItem)}
                         name={nextItem.Name || ''}
                         onPress={selectAlbum}
                     />

diff --git a/src/screens/Music/stacks/RecentAlbums.tsx b/src/screens/Music/stacks/RecentAlbums.tsx
@@ -95,7 +95,7 @@ const RecentAlbums: React.FC = () => {
                     <TouchableHandler id={item} onPress={selectAlbum} testID={`select-album-${item}`}>
                         <AlbumItem>
                             <ShadowWrapper size="medium">
-                                <AlbumImage source={{ uri: getImage(item) }} style={defaultStyles.imageBackground} />
+                                <AlbumImage source={{ uri: getImage(albums[item]) }} style={defaultStyles.imageBackground} />
                             </ShadowWrapper>
                             <Text style={defaultStyles.text} numberOfLines={1}>{albums[item]?.Name}</Text>
                             <Text style={defaultStyles.textHalfOpacity} numberOfLines={1}>{albums[item]?.AlbumArtist}</Text>

diff --git a/src/screens/Search/stacks/Search/index.tsx b/src/screens/Search/stacks/Search/index.tsx
@@ -298,7 +298,7 @@ export default function Search() {
                         <TouchableHandler<string> id={album.Id} onPress={selectAlbum} testID={`search-result-${album.Id}`}>
                             <SearchResult>
                                 <ShadowWrapper>
-                                    <AlbumImage source={{ uri: getImage(album.Id) }} style={defaultStyles.imageBackground} />
+                                    <AlbumImage source={{ uri: getImage(album) }} style={defaultStyles.imageBackground} />
                                 </ShadowWrapper>
                                 <View style={{ flex: 1 }}>
                                     <Text numberOfLines={1}>

diff --git a/src/screens/modals/SetJellyfinServer/index.tsx b/src/screens/modals/SetJellyfinServer/index.tsx
@@ -9,6 +9,7 @@ import { t } from '@/localisation';
 import useDefaultStyles from '@/components/Colors';
 import { Text } from '@/components/Typography';
 import { AppState, useAppDispatch } from '@/store';
+import { fetchRecentAlbums } from '@/store/music/actions';
 
 
 export default function SetJellyfinServer() {
@@ -25,7 +26,8 @@ export default function SetJellyfinServer() {
     const saveCredentials = useCallback((credentials: AppState['settings']['credentials']) => {
         if (credentials) {
             dispatch(setJellyfinCredentials(credentials));
-            navigation.dispatch(StackActions.popToTop());    
+            navigation.dispatch(StackActions.popToTop());
+            dispatch(fetchRecentAlbums());
         }
     }, [navigation, dispatch]);
 

diff --git a/src/screens/modals/TrackPopupMenu.tsx b/src/screens/modals/TrackPopupMenu.tsx
@@ -75,7 +75,7 @@ function TrackPopupMenu() {
 
     return (
         <Container>
-            <Artwork src={getImage(track?.Id || '')} />
+            <Artwork src={getImage(track)} />
             <Header>{track?.Name}</Header>
             <SubHeader style={{ marginBottom: 18 }}>{track?.AlbumArtist} {track?.Album ? '— ' + track?.Album : ''}</SubHeader>
             <WrappableButtonRow>

diff --git a/src/store/music/actions.ts b/src/store/music/actions.ts
@@ -1,7 +1,7 @@
 import { createAsyncThunk, createEntityAdapter } from '@reduxjs/toolkit';
 import { Album, AlbumTrack, Playlist } from './types';
 import { AsyncThunkAPI } from '..';
-import { retrieveAllAlbums, retrieveRecentAlbums, retrieveAlbumTracks, retrieveAlbum } from '@/utility/JellyfinApi/album';
+import { retrieveAllAlbums, retrieveRecentAlbums, retrieveAlbumTracks, retrieveAlbum, retrieveSimilarAlbums } from '@/utility/JellyfinApi/album';
 import { retrieveAllPlaylists, retrievePlaylistTracks } from '@/utility/JellyfinApi/playlist';
 import { searchItem } from '@/utility/JellyfinApi/search';
 
@@ -44,6 +44,11 @@ export const fetchAlbum = createAsyncThunk<Album, string, AsyncThunkAPI>(
     retrieveAlbum,
 );
 
+export const fetchSimilarAlbums = createAsyncThunk<Album[], string, AsyncThunkAPI>(
+    '/albums/similar',
+    retrieveSimilarAlbums,
+);
+
 type SearchAndFetchResults = {
     albums: Album[];
     results: (Album | AlbumTrack)[]; 

diff --git a/src/store/music/index.ts b/src/store/music/index.ts
@@ -8,7 +8,8 @@ import {
     playlistAdapter,
     fetchAllPlaylists,
     fetchTracksByPlaylist,
-    fetchAlbum
+    fetchAlbum,
+    fetchSimilarAlbums
 } from './actions';
 import { createSlice } from '@reduxjs/toolkit';
 import { Album, AlbumTrack, Playlist } from './types';
@@ -79,7 +80,15 @@ const music = createSlice({
         });
         builder.addCase(fetchAlbum.pending, (state) => { state.albums.isLoading = true; });
         builder.addCase(fetchAlbum.rejected, (state) => { state.albums.isLoading = false; });
-
+
+        /** 
+         * Fetch similar albums
+         */
+        builder.addCase(fetchSimilarAlbums.fulfilled, (state, { payload, meta }) => {
+            albumAdapter.upsertMany(state.albums, payload);
+            state.albums.entities[meta.arg].Similar = payload.map((a) => a.Id);
+        });
+
         /**
          * Fetch most recent albums
          */

diff --git a/src/store/music/types.ts b/src/store/music/types.ts
@@ -68,6 +68,8 @@ export interface Album {
     DateCreated: string;
     Overview?: string;
     Similar?: string[];
+    /** Emby potentially carries different ids for primary images */
+    PrimaryImageItemId?: string;
 }
 
 export interface AlbumTrack {
@@ -124,7 +126,3 @@ export interface Playlist {
     Tracks?: string[];
     lastRefreshed?: number;
 }
-
-export interface SimilarAlbum {
-    Id: string;
-}
diff --git a/src/utility/JellyfinApi/album.ts b/src/utility/JellyfinApi/album.ts
@@ -1,4 +1,4 @@
-import { Album, AlbumTrack, SimilarAlbum } from '@/store/music/types';
+import { Album, AlbumTrack } from '@/store/music/types';
 import { fetchApi } from './lib';
 import {retrieveAndInjectLyricsToTracks} from '@/utility/JellyfinApi/lyrics.ts';
 
@@ -26,11 +26,15 @@ export async function retrieveAllAlbums() {
  * Retrieve a single album
  */
 export async function retrieveAlbum(id: string): Promise<Album> {
-    const Similar = await fetchApi<{ Items: SimilarAlbum[] }>(({ user_id }) => `/Items/${id}/Similar?userId=${user_id}&limit=12`)
-        .then((albums) => albums!.Items.map((a) => a.Id));
+    return fetchApi<Album>(({ user_id }) => `/Users/${user_id}/Items/${id}`);
+}
 
-    return fetchApi<Album>(({ user_id }) => `/Users/${user_id}/Items/${id}`)
-        .then(album => ({ ...album!, Similar }));
+/**
+ * Retrieve albums that are similar to the provided album
+ */
+export async function retrieveSimilarAlbums(id: string): Promise<Album[]> {
+    return fetchApi<{ Items: Album[] }>(({ user_id }) => `/Items/${id}/Similar?userId=${user_id}&limit=12`)
+        .then((albums) => albums!.Items);
 }
 
 const latestAlbumsOptions = {

diff --git a/src/utility/JellyfinApi/lib.ts b/src/utility/JellyfinApi/lib.ts
@@ -1,6 +1,7 @@
-import type { AppState, Store } from '@/store';
+import { useTypedSelector, type AppState, type Store } from '@/store';
 import { Platform } from 'react-native';
 import { version } from '../../../package.json';
+import { Album, AlbumTrack, ArtistItem, Playlist } from '@/store/music/types';
 
 type Credentials = AppState['settings']['credentials'];
 
@@ -105,15 +106,34 @@ export async function fetchApi<T>(
 /**
  * Retrieve an image URL for a given ItemId
  */
-export function getImage(ItemId: string): string {
-    const credentials = asyncFetchStore().getState().settings.credentials;
-    const uri = encodeURI(`${credentials?.uri}/Items/${ItemId}/Images/Primary?format=jpeg`);
+export function getImage(ItemId: string | number, credentials?: AppState['settings']['credentials']): string {
+    // Either accept provided credentials, or retrieve them directly from the store
+    const { uri: serverUri } = credentials 
+        ?? asyncFetchStore().getState().settings.credentials ?? {};
+
+    // Generate the uri and return
+    const uri = encodeURI(`${serverUri}/Items/${ItemId}/Images/Primary?format=jpeg`);
     return uri;
 }
 
 /**
  * Create a hook that can convert ItemIds to image URLs
  */
 export function useGetImage() {
-    return (ItemId: string) => getImage(ItemId);
+    const credentials = useTypedSelector((state) => state.settings.credentials);
+
+    return (item: string | number | Album | AlbumTrack | Playlist | ArtistItem | null) => {
+        if (!item) {
+            return '';
+        // GUARD: If the item's just the id, we'll pass it on directly.
+        } else if (typeof item === 'string' || typeof item === 'number') {
+            return getImage(item, credentials);
+        // GUARD: If the item has an `PrimaryImageItemId` (for Emby servers),
+        // we'll attemp to return that
+        } else if ('PrimaryImageItemId' in item) {
+            return getImage(item.PrimaryImageItemId || item.Id, credentials);
+        } else {
+            return getImage(item.Id);
+        }
+    };
 }
diff --git a/src/utility/JellyfinApi/track.ts b/src/utility/JellyfinApi/track.ts
@@ -61,9 +61,7 @@ export async function generateTrack(track: AlbumTrack): Promise<Track> {
         artist: track.Artists.join(', '),
         album: track.Album,
         duration: track.RunTimeTicks,
-        artwork: track.AlbumId
-            ? getImage(track.AlbumId)
-            : getImage(track.Id),
+        artwork: getImage(track.Id),
         hasLyrics: track.HasLyrics,
         lyrics: track.Lyrics,
         contentType: response.headers.get('Content-Type') || undefined,