fix: missing images

src/screens/Music/stacks/Albums.tsx

@@ -48,7 +48,7 @@ const SectionHeading = React.memo(function SectionHeading(props: {
 
 interface GeneratedAlbumItemProps {
     id: ReactText;
-    imageUrl: string;
+    imageUrl: string | null;
     name: string;
     artist: string;
     onPress: (id: string) => void;
@@ -66,7 +66,7 @@ const GeneratedAlbumItem = React.memo(function GeneratedAlbumItem(props: Generat
         <TouchableHandler id={id as string} onPress={onPress}>
             <AlbumItem>
                 <ShadowWrapper size="medium">
-                    <AlbumImage source={{ uri: imageUrl }} style={[defaultStyles.imageBackground]} />
+                    <AlbumImage source={imageUrl ? { uri: imageUrl } : undefined} style={[defaultStyles.imageBackground]} />
                 </ShadowWrapper>
                 <Text numberOfLines={1} style={defaultStyles.text}>{name}</Text>
                 <HalfOpacity style={defaultStyles.text} numberOfLines={1}>{artist}</HalfOpacity>
@@ -136,7 +136,7 @@ const Albums: React.FC = () => {
                     <GeneratedAlbumItem
                         key={i}
                         id={id}
-                        imageUrl={getImage(albums[id])}
+                        imageUrl={albums[id].ImageTags.Primary ? getImage(albums[id]) : null}
                         name={albums[id]?.Name || ''}
                         artist={albums[id]?.AlbumArtist || ''}
                         onPress={selectAlbum}

src/screens/Music/stacks/Playlists.tsx

@@ -14,7 +14,7 @@ import { SafeFlatList, useNavigationOffsets } from '@/components/SafeNavigatorVi
 
 interface GeneratedAlbumItemProps {
     id: ReactText;
-    imageUrl: string;
+    imageUrl?: string | null;
     name: string;
     onPress: (id: string) => void;
 }
@@ -26,7 +26,7 @@ const GeneratedPlaylistItem = React.memo(function GeneratedPlaylistItem(props: G
     return (
         <TouchableHandler id={id as string} onPress={onPress}>
             <AlbumItem>
-                <AlbumImage source={{ uri: imageUrl }} style={defaultStyles.imageBackground} />
+                <AlbumImage source={{ uri: imageUrl || undefined }} style={defaultStyles.imageBackground} />
                 <Text numberOfLines={1} style={defaultStyles.text}>{name}</Text>
             </AlbumItem>
         </TouchableHandler>

src/screens/Music/stacks/components/AlbumImage.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components/native';
-import FastImage, { FastImageProps } from 'react-native-fast-image';
+import FastImage, { FastImageProps, Source } from '@d11/react-native-fast-image';
 import { Dimensions } from 'react-native';
 import { useUserOrSystemScheme } from '@/components/Colors';
 
@@ -22,24 +22,29 @@ const Container = styled(FastImage)`
     margin-bottom: 5px;
 `;
 
-function AlbumImage(props: FastImageProps) {
-    const [hasError, setError] = useState(false);
-    const colorScheme = useUserOrSystemScheme();
+export interface AlbumImageProps extends FastImageProps {
+    source: number | Omit<Source, 'uri'> & {
+        uri?: string;
+    };
+}
 
-    if (!props.source || hasError) {
-        return (
-            <Container
-                {...props}
-                source={colorScheme === 'light'
-                    ? require('@/assets/images/empty-album-light.png')
-                    : require('@/assets/images/empty-album-dark.png')
-                }
-            />
-        );
+const defaultImageDark = require('@/assets/images/empty-album-dark.png');
+const defaultImageLight = require('@/assets/images/empty-album-light.png');
+
+function AlbumImage(props: FastImageProps) {
+    const colorScheme = useUserOrSystemScheme();
+    const defaultImage = colorScheme === 'light' ? defaultImageLight : defaultImageDark;
+
+    // If no source is provided, use the default image as the main source
+    if (!props.source || (typeof props.source === 'object' && 'uri' in props.source && !props.source.uri)) {
+        return <Container {...props} source={defaultImage} />;
     }
 
     return (
-        <Container {...props} onError={() => setError(true)} />
+        <Container
+            {...props}
+            defaultSource={defaultImage}
+        />
     );
 }
 

src/screens/Music/stacks/components/TrackListView.tsx

@@ -100,6 +100,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
     const tracks = useTypedSelector((state) => state.music.tracks.entities);
     const isLoading = useTypedSelector((state) => state.music.tracks.isLoading);
     const downloadedTracks = useTypedSelector(selectDownloadedTracks(trackIds));
+    const entity = useTypedSelector((state) => itemDisplayStyle === 'album' ? state.music.albums.entities[entityId] : state.music.playlists.entities[entityId]);
     const totalDuration = useMemo(() => (
         trackIds.reduce<number>((sum, trackId) => (
             sum + (tracks[trackId]?.RunTimeTicks || 0)
@@ -173,7 +174,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
         >
             <View style={{ padding: 24, paddingTop: 32, paddingBottom: 32 }}>
                 <AlbumImageContainer>
-                    <CoverImage src={getImage(entityId)} />
+                    <CoverImage src={getImage(entity)} />
                 </AlbumImageContainer>
                 <Header>{title}</Header>
                 <SubHeader>{artist}</SubHeader>