fix: show error messages when tracks fail to download

src/components/DownloadManager.ts

@@ -55,7 +55,7 @@ function DownloadManager () {
     }, [queued, dispatch, activeDownloads]);
 
     useEffect(() => {
-        // GUARD: We only run this functino once
+        // GUARD: We only run this function once
         if (hasRehydratedOrphans) {
             return;
         }
@@ -99,7 +99,6 @@ function DownloadManager () {
         setHasRehydratedOrphans(true);
     }, [rehydrated, ids, hasRehydratedOrphans, dispatch]);
 
-
     return null;
 }
 

src/screens/Downloads/index.tsx

@@ -17,6 +17,7 @@ import FastImage from 'react-native-fast-image';
 import { useGetImage } from '@/utility/JellyfinApi';
 import { ShadowWrapper } from '@/components/Shadow';
 import { SafeFlatList } from '@/components/SafeNavigatorView';
+import { THEME_COLOR } from '@/CONSTANTS';
 
 const DownloadedTrack = styled.View`
     flex: 1 0 auto;
@@ -32,6 +33,10 @@ const AlbumImage = styled(FastImage)`
     border-radius: 4px;
 `;
 
+const ErrorWrapper = styled.View`
+    padding: 2px 16px 8px 16px;
+`;
+
 function Downloads() {
     const defaultStyles = useDefaultStyles();
     const dispatch = useAppDispatch();
@@ -106,6 +111,7 @@ function Downloads() {
     ), [totalDownloadSize, defaultStyles, failedIds.length, handleRetryFailed, handleDeleteAllTracks, ids.length]);
     
     const renderItem = useCallback<NonNullable<FlatListProps<EntityId>['renderItem']>>(({ item }) => (
+        <>
             <DownloadedTrack>
                 <View style={{ marginRight: 12 }}>
                     <ShadowWrapper size="small">
@@ -135,6 +141,12 @@ function Downloads() {
                     )}
                 </View>
             </DownloadedTrack>
+            {entities[item]?.error && (
+                <ErrorWrapper>
+                    <Text style={{ color: THEME_COLOR }}>{entities[item]?.error}</Text>
+                </ErrorWrapper>
+            )}
+        </>
     ), [entities, retryTrack, handleDelete, defaultStyles, tracks, getImage]);
 
     // If no tracks have been downloaded, show a short message describing this

src/store/downloads/actions.ts

@@ -33,7 +33,7 @@ export const downloadTrack = createAsyncThunk(
         // Then convert the MIME-type to an extension
         const extension = MimeTypes[contentType as keyof typeof MimeTypes];
         if (!extension) {
-            throw new Error('Jellyfin returned an unrecognized MIME-type');
+            throw new Error(`Unsupported MIME-type ${contentType}`);
         }
 
         // Then generate the proper location
@@ -74,7 +74,7 @@ export const removeDownloadedTrack = createAsyncThunk(
         }
 
         // Then unlink the file, if it exists
-        if (await exists(download.location)) {
+        if (download.location && await exists(download.location)) {
             return unlink(download.location);
         }
     }

src/store/downloads/index.ts

@@ -2,6 +2,7 @@ import { createSlice, Dictionary, EntityId } from '@reduxjs/toolkit';
 import {
     completeDownload,
     downloadAdapter,
+    downloadTrack,
     failDownload,
     initializeDownload,
     progressDownload,
@@ -49,6 +50,7 @@ const downloads = createSlice({
                     ...action.payload,
                     isFailed: false,
                     isComplete: true,
+                    error: undefined,
                 }
             });
 
@@ -67,6 +69,20 @@ const downloads = createSlice({
                 }
             });
         });
+        builder.addCase(downloadTrack.rejected, (state, action) => {
+            downloadAdapter.upsertOne(state, {
+                id: action.meta.arg,
+                isComplete: false,
+                isFailed: true,
+                progress: 0,
+                error: action.error.message,
+            });
+
+            // Remove the item from the queue
+            const newSet = new Set(state.queued);
+            newSet.delete(action.meta.arg);
+            state.queued = Array.from(newSet);
+        });
         builder.addCase(removeDownloadedTrack.fulfilled, (state, action) => {
             // Remove the download if it exists
             downloadAdapter.removeOne(state, action.meta.arg);

src/store/downloads/types.ts

@@ -6,6 +6,7 @@ export interface DownloadEntity {
     isFailed: boolean;
     isComplete: boolean;
     size?: number;
-    location: string;
+    location?: string;
     jobId?: number;
+    error?: string;
 }

src/utility/MimeTypes.ts

@@ -9,6 +9,7 @@ const MimeTypes = {
     'audio/dsp': '.dsp',
     'audio/flac': '.flac',
     'audio/m4b': '.m4b',
+    'audio/mp4': '.m4a',
     'audio/mpeg': '.mp3',
     'audio/vorbis': '.vorbis',
     'audio/x-ape': '.ape',