javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: missing image covers for emby

Browse Source
This commit is contained in:
Lei Nelissen
2024-07-26 12:01:21 +02:00
parent 399340127d
commit 01e25a89b1
16 changed files with 73 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/screens/Downloads/index.tsx
View File

@@ -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 }}>

10
src/screens/Music/stacks/Album.tsx
View File

@@ -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')}

2
src/screens/Music/stacks/Albums.tsx
View File

@@ -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}

2
src/screens/Music/stacks/Artist.tsx
View File

@@ -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}

2
src/screens/Music/stacks/Artists.tsx
View File

@@ -178,7 +178,7 @@ const Artists: React.FC = () => {
key={item.Id}
item={item}
onPress={selectArtist}
imageURL={getImage(item.Id)}
imageURL={getImage(item)}
/>
</View>
);

4
src/screens/Music/stacks/Playlists.tsx
View File

@@ -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}
/>

2
src/screens/Music/stacks/RecentAlbums.tsx
View File

@@ -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>

2
src/screens/Search/stacks/Search/index.tsx
View File

@@ -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}>

4
src/screens/modals/SetJellyfinServer/index.tsx
View File

@@ -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]);

2
src/screens/modals/TrackPopupMenu.tsx
View File

@@ -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>

7
src/store/music/actions.ts
View File

@@ -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)[];

13
src/store/music/index.ts
View File

@@ -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
*/

6
src/store/music/types.ts
View File

@@ -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;
}

14
src/utility/JellyfinApi/album.ts
View File

@@ -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 = {

30
src/utility/JellyfinApi/lib.ts
View File

@@ -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,9 +106,13 @@ 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;
}
@@ -115,5 +120,20 @@ export function getImage(ItemId: string): string {
* 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);
}
};
}

4
src/utility/JellyfinApi/track.ts
View File

@@ -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,