chore(deps): bump brace-expansion from 1.1.11 to 1.1.12

Bumps [brace-expansion](https://github.com/juliangruber/brace-expansion) from 1.1.11 to 1.1.12.
- [Release notes](https://github.com/juliangruber/brace-expansion/releases)
- [Commits](https://github.com/juliangruber/brace-expansion/compare/1.1.11...v1.1.12)

---
updated-dependencies:
- dependency-name: brace-expansion
  dependency-version: 1.1.12
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

ios/Fintunes.xcodeproj/project.pbxproj

@@ -319,6 +319,7 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNSVG/RNSVGFilters.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/React-Core_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/SDWebImage/SDWebImage.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/Sentry/Sentry.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/boost/boost_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/glog/glog_privacy.bundle",
@@ -330,6 +331,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNSVGFilters.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-Core_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SDWebImage.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Sentry.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/boost_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/glog_privacy.bundle",
@@ -390,7 +392,7 @@
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 115;
+				CURRENT_PROJECT_VERSION = 118;
 				DEVELOPMENT_TEAM = HD2D35G9Y4;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -427,7 +429,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 115;
+				CURRENT_PROJECT_VERSION = 118;
 				DEVELOPMENT_TEAM = HD2D35G9Y4;
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = HD2D35G9Y4;
 				INFOPLIST_FILE = Fintunes/Info.plist;
@@ -607,7 +609,7 @@
 				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 115;
+				CURRENT_PROJECT_VERSION = 118;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = HD2D35G9Y4;
 				GCC_C_LANGUAGE_STANDARD = gnu11;
@@ -642,7 +644,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 115;
+				CURRENT_PROJECT_VERSION = 118;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = HD2D35G9Y4;
 				GCC_C_LANGUAGE_STANDARD = gnu11;

ios/Fintunes/Info.plist

@@ -17,11 +17,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>2.4.5</string>
+	<string>2.4.6</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>115</string>
+	<string>118</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>LSSupportsOpeningDocumentsInPlace</key>

ios/Podfile.lock

@@ -8,6 +8,11 @@ PODS:
   - hermes-engine (0.79.2):
     - hermes-engine/Pre-built (= 0.79.2)
   - hermes-engine/Pre-built (0.79.2)
+  - libavif/core (0.11.1)
+  - libavif/libdav1d (0.11.1):
+    - libavif/core
+    - libdav1d (>= 0.6.0)
+  - libdav1d (1.2.0)
   - libwebp (1.3.2):
     - libwebp/demux (= 1.3.2)
     - libwebp/mux (= 1.3.2)
@@ -1894,10 +1899,59 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNFastImage (8.6.3):
+  - RNFastImage (8.9.2):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - libavif/core (~> 0.11.1)
+    - libavif/libdav1d (~> 0.11.1)
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
-    - SDWebImage (~> 5.11.1)
+    - React-debug
-    - SDWebImageWebPCoder (~> 0.8.4)
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - SDWebImage (>= 5.19.1)
+    - SDWebImageAVIFCoder (~> 0.11.0)
+    - SDWebImageWebPCoder (~> 0.14)
+    - Yoga
+  - RNFlashList (1.8.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - RNFS (2.20.0):
     - React-Core
   - RNGestureHandler (2.25.0):
@@ -2197,12 +2251,15 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - SDWebImage (5.11.1):
+  - SDWebImage (5.21.0):
-    - SDWebImage/Core (= 5.11.1)
+    - SDWebImage/Core (= 5.21.0)
-  - SDWebImage/Core (5.11.1)
+  - SDWebImage/Core (5.21.0)
-  - SDWebImageWebPCoder (0.8.5):
+  - SDWebImageAVIFCoder (0.11.0):
+    - libavif/core (>= 0.11.0)
+    - SDWebImage (~> 5.10)
+  - SDWebImageWebPCoder (0.14.6):
     - libwebp (~> 1.0)
-    - SDWebImage/Core (~> 5.10)
+    - SDWebImage/Core (~> 5.17)
   - Sentry/HybridSDK (8.49.2)
   - SocketRocket (0.7.1)
   - SwiftAudioEx (1.1.0)
@@ -2291,7 +2348,8 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
-  - RNFastImage (from `../node_modules/react-native-fast-image`)
+  - "RNFastImage (from `../node_modules/@d11/react-native-fast-image`)"
+  - "RNFlashList (from `../node_modules/@shopify/flash-list`)"
   - RNFS (from `../node_modules/react-native-fs`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNLocalize (from `../node_modules/react-native-localize`)
@@ -2303,8 +2361,11 @@ DEPENDENCIES:
 
 SPEC REPOS:
   trunk:
+    - libavif
+    - libdav1d
     - libwebp
     - SDWebImage
+    - SDWebImageAVIFCoder
     - SDWebImageWebPCoder
     - Sentry
     - SocketRocket
@@ -2471,7 +2532,9 @@ EXTERNAL SOURCES:
   RNDateTimePicker:
     :path: "../node_modules/@react-native-community/datetimepicker"
   RNFastImage:
-    :path: "../node_modules/react-native-fast-image"
+    :path: "../node_modules/@d11/react-native-fast-image"
+  RNFlashList:
+    :path: "../node_modules/@shopify/flash-list"
   RNFS:
     :path: "../node_modules/react-native-fs"
   RNGestureHandler:
@@ -2497,6 +2560,8 @@ SPEC CHECKSUMS:
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
   hermes-engine: 314be5250afa5692b57b4dd1705959e1973a8ebe
+  libavif: 84bbb62fb232c3018d6f1bab79beea87e35de7b7
+  libdav1d: 23581a4d8ec811ff171ed5e2e05cd27bad64c39f
   libwebp: 1786c9f4ff8a279e4dac1e8f385004d5fc253009
   RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
   RCTDeprecation: 83ffb90c23ee5cea353bd32008a7bca100908f8c
@@ -2570,7 +2635,8 @@ SPEC CHECKSUMS:
   ReactCommon: 76d2dc87136d0a667678668b86f0fca0c16fdeb0
   RNCAsyncStorage: 39c42c1e478e1f5166d1db52b5055e090e85ad66
   RNDateTimePicker: 43ee3de2bc639bc0d9b77564961060a54dfc7111
-  RNFastImage: 462a183c4b0b6b26fdfd639e1ed6ba37536c3b87
+  RNFastImage: 72769fac450a8a7d111378433111d8e52f2b251e
+  RNFlashList: 5001dd06f0003a497de3e2035653c54cf8b48e96
   RNFS: 89de7d7f4c0f6bafa05343c578f61118c8282ed8
   RNGestureHandler: ebef699ea17e7c0006c1074e1e423ead60ce0121
   RNLocalize: 66046b78816e61e5b8211084b72afab4191d1db3
@@ -2578,8 +2644,9 @@ SPEC CHECKSUMS:
   RNScreens: 5621e3ad5a329fbd16de683344ac5af4192b40d3
   RNSentry: f444779917ac0314ecffea5e8bd1041d1be06c31
   RNSVG: 794f269526df9ddc1f79b3d1a202b619df0368e3
-  SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
+  SDWebImage: f84b0feeb08d2d11e6a9b843cb06d75ebf5b8868
-  SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
+  SDWebImageAVIFCoder: 00310d246aab3232ce77f1d8f0076f8c4b021d90
+  SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380
   Sentry: 47021097466aa130802420d485a34da445963d99
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   SwiftAudioEx: f6aa653770f3a0d3851edaf8d834a30aee4a7646
@@ -2587,4 +2654,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: eb809ce42bd87a82dedb7b209e4bec32e9be4528
 
-COCOAPODS: 1.16.2
+COCOAPODS: 1.15.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fintunes",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "main": "src/index.js",
   "private": true,
   "scripts": {
@@ -12,6 +12,7 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
+    "@d11/react-native-fast-image": "^8.9.2",
     "@react-native-async-storage/async-storage": "^2.1.2",
     "@react-native-community/blur": "^4.4.1",
     "@react-native-community/datetimepicker": "^8.3.0",
@@ -22,6 +23,7 @@
     "@react-navigation/native-stack": "^6.11.0",
     "@react-navigation/stack": "^6.4.1",
     "@reduxjs/toolkit": "^2.7.0",
+    "@shopify/flash-list": "^1.8.0",
     "@shopify/react-native-skia": "2.0.0-next.3",
     "date-fns": "^3.6.0",
     "events": "^3.3.0",
@@ -35,7 +37,6 @@
     "react-native-accessibility-settings": "^0.1.2",
     "react-native-collapsible": "^1.6.2",
     "react-native-dotenv": "^3.4.11",
-    "react-native-fast-image": "^8.6.3",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "^2.25.0",
     "react-native-localize": "^3.4.1",

patches/react-native-fast-image+8.6.3.patch

@@ -1,22 +0,0 @@
-diff --git a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
-index f710081..87c4532 100644
---- a/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
-+++ b/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m
-@@ -32,7 +32,7 @@
- 
- - (void) setOnFastImageLoadEnd: (RCTDirectEventBlock)onFastImageLoadEnd {
-     _onFastImageLoadEnd = onFastImageLoadEnd;
--    if (self.hasCompleted) {
-+    if (self.hasCompleted && _onFastImageLoadEnd != NULL) {
-         _onFastImageLoadEnd(@{});
-     }
- }
-@@ -46,7 +46,7 @@
- 
- - (void) setOnFastImageError: (RCTDirectEventBlock)onFastImageError {
-     _onFastImageError = onFastImageError;
--    if (self.hasErrored) {
-+    if (self.hasErrored && _onFastImageError != NULL) {
-         _onFastImageError(@{});
-     }
- }

src/CONSTANTS.ts

@@ -1,3 +1,3 @@
 export const ALBUM_CACHE_AMOUNT_OF_DAYS = 7;
 export const PLAYLIST_CACHE_AMOUNT_OF_DAYS = 7;
-export const ALPHABET_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ ';
+export const ALPHABET_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#';

src/components/AlphabetScroller.tsx

@@ -9,6 +9,7 @@ import {
     TapGestureHandlerGestureEvent 
 } from 'react-native-gesture-handler';
 import useDefaultStyles from './Colors';
+import { useNavigationOffsets } from './SafeNavigatorView';
 
 // interface LetterContainerProps {
 //     onPress: (letter: string) => void;
@@ -17,23 +18,21 @@ import useDefaultStyles from './Colors';
 
 const Container = styled.View`
     position: absolute;
-    right: 5px;
+    right: 0;
-    top: 0;
-    height: 100%;
     z-index: 10;
-    padding: 5px;
     margin: auto 0;
-    justify-content: space-around;
+    justify-content: center;
+    align-items: center;
 `;
 
-const Letter = styled.Text`
+const Letter = styled.Text<{ isSelected?: boolean }>`
     text-align: center;
-    padding: 1px 0;
+    padding: 1.5px 10px;
     font-size: 12px;
 `;
 
 interface Props {
-    onSelect: (index: number) => void;
+    onSelect: (selected: { index: number, letter: string }) => void;
 }
 
 /**
@@ -44,6 +43,7 @@ const AlphabetScroller: React.FC<Props> = ({ onSelect }) => {
     const styles = useDefaultStyles();
     const [ height, setHeight ] = useState(0);
     const [ index, setIndex ] = useState<number>();
+    const { top, bottom } = useNavigationOffsets();
 
     // Handler for setting the correct height for a single alphabet item
     const handleLayout = useCallback((event: LayoutChangeEvent) => {
@@ -52,16 +52,20 @@ const AlphabetScroller: React.FC<Props> = ({ onSelect }) => {
 
     // Handler for passing on a new index when it is tapped or swiped
     const handleGestureEvent = useCallback((event: PanGestureHandlerGestureEvent | TapGestureHandlerGestureEvent) => {
-        const newIndex = Math.floor(event.nativeEvent.y / height);
+        const { y } = event.nativeEvent;
+        const newIndex = Math.min(
+            Math.max(0, Math.floor(y / height)),
+            ALPHABET_LETTERS.length - 1
+        );
 
         if (newIndex !== index) {
             setIndex(newIndex);
-            onSelect(newIndex);
+            onSelect({ index: newIndex, letter: ALPHABET_LETTERS[newIndex] });
         }
     }, [height, index, onSelect]);
 
     return (
-        <Container>
+        <Container style={{ top, bottom }}>
             <TapGestureHandler onHandlerStateChange={handleGestureEvent}>
                 <PanGestureHandler onGestureEvent={handleGestureEvent}>
                     <View>
@@ -70,7 +74,10 @@ const AlphabetScroller: React.FC<Props> = ({ onSelect }) => {
                                 key={l}
                                 onLayout={i === 0 ? handleLayout : undefined}
                             >
-                                <Letter style={styles.themeColor}>
+                                <Letter 
+                                    style={styles.themeColor}
+                                    isSelected={i === index}
+                                >
                                     {l}
                                 </Letter>
                             </View>

src/components/App.tsx

@@ -12,6 +12,7 @@ import {
 import { ColorSchemeProvider, themes, useUserOrSystemScheme } from './Colors';
 import DownloadManager from './DownloadManager';
 import AppLoading from './AppLoading';
+import { captureException } from '@sentry/react-native';
 
 const LightTheme = {
     ...DefaultTheme,
@@ -52,7 +53,9 @@ export default function App(): JSX.Element | null {
 
     useEffect(() => {
         async function setupTrackPlayer() {
-            await TrackPlayer.setupPlayer({ autoHandleInterruptions: true });
+            await TrackPlayer.setupPlayer({ 
+                autoHandleInterruptions: true,
+            });
             await TrackPlayer.updateOptions({
                 capabilities: [
                     Capability.Play,
@@ -68,7 +71,12 @@ export default function App(): JSX.Element | null {
         }
 
         if (!hasSetupPlayer) {
-            setupTrackPlayer();
+            setupTrackPlayer()
+                .catch((e: unknown) => {
+                    console.error(e);
+                    captureException(e);
+                    setHasSetupPlayer(true);
+                });
         }
     }, [hasSetupPlayer]);
 

src/components/CoverImage.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { Dimensions, ViewProps } from 'react-native';
 import { Canvas, Blur, Image as SkiaImage, useImage, Offset, Mask, RoundedRect, Shadow } from '@shopify/react-native-skia';
 import useDefaultStyles, { useUserOrSystemScheme } from './Colors';
@@ -28,7 +28,7 @@ interface Props {
     margin?: number;
     radius?: number;
     style?: ViewProps['style'];
-    src: string;
+    src?: string;
 }
 
 const emptyAlbumLight = require('@/assets/images/empty-album-light.png');
@@ -49,9 +49,8 @@ function CoverImage({
 }: Props) {
     const defaultStyles = useDefaultStyles();
     const colorScheme = useUserOrSystemScheme();
-    const [hasFailed, setFailed] = useState(false);
 
-    const image = useImage(src || null, () => setFailed(true));
+    const image = useImage(src || null);
     const fallback = useImage(colorScheme === 'light' ? emptyAlbumLight : emptyAlbumDark);
     const { canvasSize, imageSize } = useMemo(() => {
         const imageSize = Screen.width - margin;
@@ -69,7 +68,7 @@ function CoverImage({
                     <Shadow dx={0} dy={8} blur={16} color="#0000000d" />
                     <Shadow dx={0} dy={16} blur={32} color="#0000000d" />
                 </RoundedRect>
-                {src && (
+                {src ? (
                     <>
                         <SkiaImage
                             image={image}
@@ -97,8 +96,7 @@ function CoverImage({
                             </SkiaImage>
                         </Mask>
                     </>
-                )}
+                ) : (
-                {(!src || hasFailed) && (
                     <Mask
                         mask={
                             <RoundedRect

src/components/SafeNavigatorView.tsx

@@ -3,6 +3,7 @@ import { useHeaderHeight } from '@react-navigation/elements';
 import { FlatList, FlatListProps, ScrollView, ScrollViewProps, SectionList, SectionListProps } from 'react-native';
 import useCurrentTrack from '../utility/useCurrentTrack';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
+import { FlashList, FlashListProps } from '@shopify/flash-list';
 
 declare module 'react' {
     function forwardRef<T, P = {}>(
@@ -26,7 +27,7 @@ export function SafeScrollView({
                 contentContainerStyle,
                 { paddingTop: top, paddingBottom: bottom },
             ]}
-            scrollIndicatorInsets={{ top: top  / 2, bottom: bottom / 2 + 5 }}
+            scrollIndicatorInsets={{ top: top / 2, bottom: bottom / 2 + 5 }}
             {...props}
         />
     );
@@ -48,7 +49,7 @@ function BareSafeSectionList<I, S>({
                 { paddingTop: top, paddingBottom: bottom },
                 contentContainerStyle,
             ]}
-            scrollIndicatorInsets={{ top: top  / 2, bottom: bottom / 2 + 5 }}
+            scrollIndicatorInsets={{ top: top / 2, bottom: bottom / 2 + 5 }}
             ref={ref}
             {...props}
         />
@@ -81,6 +82,30 @@ function BareSafeFlatList<I>({
 
 export const SafeFlatList = forwardRef(BareSafeFlatList);
 
+/**
+ * A wrapper for ScrollView that takes any paddings, margins and insets into
+ * account that result from the bottom tabs, potential NowPlaying overlay and header.
+ */
+function BareSafeFlashList<I>({
+    contentContainerStyle,
+    ...props
+}: FlashListProps<I>, ref: ForwardedRef<FlashList<I>>) {
+    const { top, bottom } = useNavigationOffsets();
+
+    return (
+        <FlashList
+            contentContainerStyle={
+                { ...contentContainerStyle, paddingBottom: bottom }
+            }
+            scrollIndicatorInsets={{ top: top * 0.4, bottom: bottom * 0.55 }}
+            ref={ref}
+            {...props}
+        />
+    );
+}
+
+export const SafeFlashList = forwardRef(BareSafeFlashList);
+
 /**
  * A hook that returns the correct offset that should be applied to any Views
  * that are wrapped in a NavigationView, in order to account for overlays,

src/screens/Downloads/index.tsx

@@ -136,7 +136,7 @@ function Downloads() {
             <DownloadedTrack>
                 <View style={{ marginRight: 12 }}>
                     <ShadowWrapper size="small">
-                        <AlbumImage source={{ uri: getImage(item) }} style={defaultStyles.imageBackground} />
+                        <AlbumImage source={{ uri: getImage(tracks[item]) }} style={defaultStyles.imageBackground} />
                     </ShadowWrapper>
                 </View>
                 <View style={{ flexShrink: 1, marginRight: 8 }}>

src/screens/Music/stacks/Albums.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, ReactText, useMemo } from 'react';
 import { useGetImage } from '@/utility/JellyfinApi/lib';
-import { SectionList, View } from 'react-native';
+import { View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { differenceInDays } from 'date-fns';
 import { useAppDispatch, useTypedSelector } from '@/store';
@@ -8,7 +8,7 @@ import { fetchAllAlbums } from '@/store/music/actions';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS } from '@/CONSTANTS';
 import TouchableHandler from '@/components/TouchableHandler';
 import AlbumImage, { AlbumHeight, AlbumItem } from './components/AlbumImage';
-import { selectAlbumsByAlphabet, SectionedId } from '@/store/music/selectors';
+import { selectAlbumsByAlphabet } from '@/store/music/selectors';
 import AlphabetScroller from '@/components/AlphabetScroller';
 import styled from 'styled-components/native';
 import useDefaultStyles, { ColoredBlurView } from '@/components/Colors';
@@ -16,20 +16,12 @@ import { Album } from '@/store/music/types';
 import { Text } from '@/components/Typography';
 import { ShadowWrapper } from '@/components/Shadow';
 import { NavigationProp } from '@/screens/types';
-import { SafeSectionList } from '@/components/SafeNavigatorView';
+import { SafeFlashList, useNavigationOffsets } from '@/components/SafeNavigatorView';
-
+import { FlashList } from '@shopify/flash-list';
-const HeadingHeight = 50;
-
-function generateSection({ section }: { section: SectionedId }) {
-    return (
-        <SectionHeading label={section.label} key={section.label} />
-    );
-}
 
 const SectionContainer = styled.View`
-    height: ${HeadingHeight}px;
     justify-content: center;
-    padding: 0 24px;
+    padding: 12px 24px;
 `;
 
 const SectionText = styled(Text)`
@@ -37,21 +29,26 @@ const SectionText = styled(Text)`
     font-weight: 400;
 `;
 
-const SectionHeading = React.memo(function SectionHeading(props: { label: string }) {
+const SectionHeading = React.memo(function SectionHeading(props: { 
+    label: string; 
+}) {
+    const { top } = useNavigationOffsets();
     const { label } = props;
 
     return (
-        <ColoredBlurView>
+        <View style={{ paddingTop: top }}>
-            <SectionContainer>
+            <ColoredBlurView>
-                <SectionText>{label}</SectionText>
+                <SectionContainer>
-            </SectionContainer>
+                    <SectionText>{label}</SectionText>
-        </ColoredBlurView>
+                </SectionContainer>
+            </ColoredBlurView>
+        </View>
     );
 });
 
 interface GeneratedAlbumItemProps {
     id: ReactText;
-    imageUrl: string;
+    imageUrl?: string | null;
     name: string;
     artist: string;
     onPress: (id: string) => void;
@@ -69,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>
@@ -89,65 +86,55 @@ const Albums: React.FC = () => {
     const dispatch = useAppDispatch();
     const navigation = useNavigation<NavigationProp>();
     const getImage = useGetImage();
-    const listRef = useRef<SectionList<string[]>>(null);
+    const listRef = useRef<FlashList<any>>(null);
 
-    // Create an array that computes all the height data for the entire list in
+    // Convert sections to flat array format for FlashList
-    // advance. We can then use this pre-computed data to respond to
+    const flatData = useMemo(() => {
-    // `getItemLayout` calls, without having to compute things in place (and
+        const data: (string | string[])[] = [];
-    // fail horribly).
-    // This approach was inspired by https://gist.github.com/RaphBlanchet/472ed013e05398c083caae6216b598b5
-    const itemLayouts = useMemo(() => {
-        // Create an array in which we will store all possible outputs for
-        // `getItemLayout`. We will loop through each potential album and add
-        // items that will be in the list
-        const layouts: Array<{ length: number; offset: number; index: number }> = [];
-        
-        // Keep track of both the index of items and the offset (in pixels) from
-        // the top
-        let index = 0;
-        let offset = 0;
-
-        // Loop through each individual section (i.e. alphabet letter) and add
-        // all items in that particular section.
         sections.forEach((section) => {
-            // Each section starts with a header, so we'll need to add the item,
+            if (!section.data.length || !section.data[0].length) return;
-            // as well as the offset.
+            // Add section header
-            layouts[index] = ({ length: HeadingHeight, offset, index });
+            data.push(section.label);
-            index++;
+            // Add section items
-            offset += HeadingHeight;
+            section.data.forEach((item) => {
-
+                data.push(item);
-            // Then, loop through all the rows (sets of two albums) and add
-            // items for those as well.
-            section.data.forEach(() => {
-                layouts[index] = ({ length: AlbumHeight, offset, index });
-                index++;
-                offset += AlbumHeight;
             });
-
-            // The way SectionList works is that you get an item for a
-            // SectionHeader and a SectionFooter, no matter if you've specified
-            // whether you want them or not. Thus, we will need to add an empty
-            // footer as an item, so that we don't mismatch our indexes
-            layouts[index] = { length: 0, offset, index };
-            index++;
         });
-
+        return data;
-        // Then, store and memoize the output
-        return layouts;
     }, [sections]);
 
+    // Compute sticky header indices
+    const stickyHeaderIndices = useMemo(() => {
+        return flatData
+            .map((item, index) => typeof item === 'string' ? index : null)
+            .filter((item): item is number => item !== null);
+    }, [flatData]);
+
     // Set callbacks
     const retrieveData = useCallback(() => dispatch(fetchAllAlbums()), [dispatch]);
     const selectAlbum = useCallback((id: string) => navigation.navigate('Album', { id, album: albums[id] as Album }), [navigation, albums]);
-    const selectLetter = useCallback((sectionIndex: number) => { 
+    const selectLetter = useCallback(({ letter }: { letter: string, index: number }) => { 
-        listRef.current?.scrollToLocation({ sectionIndex, itemIndex: 0, animated: false, }); 
+        const index = flatData.findIndex((item) => (
-    }, [listRef]);
+            typeof item === 'string' && item === letter
-    const generateItem = useCallback(({ item }: { item: string[] }) => {
+        ));
+        if (index !== -1) {
+            listRef.current?.scrollToIndex({ index, animated: false });
+        }
+    }, [flatData]);
+
+    const renderItem = useCallback(({ item }: { item: string | string[]; index: number }) => {
+        if (typeof item === 'string') {
+            return (
+                <SectionHeading 
+                    label={item} 
+                />
+            );
+        }
         return (
-            <View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 10 }} key={item.join('-')}>
+            <View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 10 }}>
-                {item.map((id) => (
+                {item.map((id, i) => (
                     <GeneratedAlbumItem
-                        key={id}
+                        key={i}
                         id={id}
                         imageUrl={getImage(albums[id])}
                         name={albums[id]?.Name || ''}
@@ -161,7 +148,6 @@ const Albums: React.FC = () => {
 
     // Retrieve data on mount
     useEffect(() => { 
-        // GUARD: Only refresh this API call every set amounts of days
         if (!lastRefreshed || differenceInDays(lastRefreshed, new Date()) > ALBUM_CACHE_AMOUNT_OF_DAYS) {
             retrieveData(); 
         }
@@ -170,19 +156,18 @@ const Albums: React.FC = () => {
     return (
         <>
             <AlphabetScroller onSelect={selectLetter} />
-            <SafeSectionList
+            <SafeFlashList
-                sections={sections} 
+                data={flatData}
                 refreshing={isLoading}
                 onRefresh={retrieveData}
-                getItemLayout={(_, i) =>  itemLayouts[i] ?? { length: 0, offset: 0, index: i }}
                 ref={listRef}
-                keyExtractor={(item) => item.join('-')}
+                renderItem={renderItem}
-                renderSectionHeader={generateSection}
+                stickyHeaderIndices={stickyHeaderIndices}
-                renderItem={generateItem}
+                estimatedItemSize={AlbumHeight}
+                getItemType={(item) => typeof item === 'string' ? 'sectionHeader' : 'row'}
             />
         </>
     );
 };
 
-
 export default Albums;

src/screens/Music/stacks/Artist.tsx

@@ -19,7 +19,7 @@ import { chunk } from 'lodash';
 
 interface GeneratedAlbumItemProps {
     id: ReactText;
-    imageUrl: string;
+    imageUrl: string | undefined;
     name: string;
     artist: string;
     onPress: (id: string) => void;

src/screens/Music/stacks/Artists.tsx

@@ -1,33 +1,25 @@
 import React, { useCallback, useEffect, useRef, useMemo } from 'react';
 import { useGetImage } from '@/utility/JellyfinApi/lib';
-import { SectionList, View } from 'react-native';
+import { View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { differenceInDays } from 'date-fns';
 import { useAppDispatch, useTypedSelector } from '@/store';
 import { fetchAllAlbums } from '@/store/music/actions';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS } from '@/CONSTANTS';
 import AlbumImage from './components/AlbumImage';
-import { SectionArtistItem, SectionedArtist, selectArtists } from '@/store/music/selectors';
+import { SectionArtistItem, selectArtists } from '@/store/music/selectors';
 import AlphabetScroller from '@/components/AlphabetScroller';
 import styled from 'styled-components/native';
 import useDefaultStyles, { ColoredBlurView } from '@/components/Colors';
 import { Text } from '@/components/Typography';
 import { NavigationProp } from '@/screens/types';
-import { SafeSectionList } from '@/components/SafeNavigatorView';
+import { SafeFlashList, useNavigationOffsets } from '@/components/SafeNavigatorView';
 import { Gap } from '@/components/Utility';
-
+import { FlashList } from '@shopify/flash-list';
-const HeadingHeight = 50;
-
-function generateSection({ section }: { section: SectionedArtist }) {
-    return (
-        <SectionHeading label={section.label} key={section.label} />
-    );
-}
 
 const SectionContainer = styled.View`
-    height: ${HeadingHeight}px;
     justify-content: center;
-    padding: 0 24px;
+    padding: 12px 24px;
 `;
 
 const SectionText = styled(Text)`
@@ -51,20 +43,23 @@ const ArtistContainer = styled.Pressable`
 `;
 
 const SectionHeading = React.memo(function SectionHeading(props: { label: string }) {
+    const { top } = useNavigationOffsets();
     const { label } = props;
 
     return (
-        <ColoredBlurView>
+        <View style={{ paddingTop: top }}>
-            <SectionContainer>
+            <ColoredBlurView>
-                <SectionText>{label}</SectionText>
+                <SectionContainer>
-            </SectionContainer>
+                    <SectionText>{label}</SectionText>
-        </ColoredBlurView>
+                </SectionContainer>
+            </ColoredBlurView>
+        </View>
     );
 });
 
 interface GeneratedArtistItemProps {
     item: SectionArtistItem;
-    imageURL: string;
+    imageURL: string | undefined;
     onPress: (payload: SectionArtistItem) => void;
 }
 
@@ -95,8 +90,6 @@ const GeneratedArtistItem = React.memo(function GeneratedArtistItem(props: Gener
                             pressed && defaultStyles.themeColor,
                             { flexShrink: 1 }
                         ]}
-
-
                     >
                         {item.Name}
                     </Text>
@@ -108,7 +101,6 @@ const GeneratedArtistItem = React.memo(function GeneratedArtistItem(props: Gener
 
 const Artists: React.FC = () => {
     // Retrieve data from store
-    // const { entities: albums } = useTypedSelector((state) => state.music.albums);
     const isLoading = useTypedSelector((state) => state.music.albums.isLoading);
     const lastRefreshed = useTypedSelector((state) => state.music.albums.lastRefreshed);
     const sections = useTypedSelector(selectArtists);
@@ -117,63 +109,50 @@ const Artists: React.FC = () => {
     const dispatch = useAppDispatch();
     const navigation = useNavigation<NavigationProp>();
     const getImage = useGetImage();
-    const listRef = useRef<SectionList<SectionArtistItem>>(null);
+    const listRef = useRef<FlashList<any>>(null);
 
-    // Create an array that computes all the height data for the entire list in
+    // Convert sections to flat array format for FlashList
-    // advance. We can then use this pre-computed data to respond to
+    const flatData = useMemo(() => {
-    // `getItemLayout` calls, without having to compute things in place (and
+        const data: (string | SectionArtistItem)[] = [];
-    // fail horribly).
-    // This approach was inspired by https://gist.github.com/RaphBlanchet/472ed013e05398c083caae6216b598b5
-    const itemLayouts = useMemo(() => {
-        // Create an array in which we will store all possible outputs for
-        // `getItemLayout`. We will loop through each potential album and add
-        // items that will be in the list
-        const layouts: Array<{ length: number; offset: number; index: number }> = [];
-        
-        // Keep track of both the index of items and the offset (in pixels) from
-        // the top
-        let index = 0;
-        let offset = 0;
-
-        // Loop through each individual section (i.e. alphabet letter) and add
-        // all items in that particular section.
         sections.forEach((section) => {
-            // Each section starts with a header, so we'll need to add the item,
+            if (!section.data.length) return;
-            // as well as the offset.
+            // Add section header
-            layouts[index] = ({ length: HeadingHeight, offset, index });
+            data.push(section.label);
-            index++;
+            // Add section items
-            offset += HeadingHeight;
+            section.data.forEach((item) => {
-
+                data.push(item);
-            // Then, loop through all the rows and add items for those as well.
-            section.data.forEach(() => {
-                offset += ArtistHeight;
-                layouts[index] = ({ length: ArtistHeight, offset, index });
-                index++;
             });
-
-            // The way SectionList works is that you get an item for a
-            // SectionHeader and a SectionFooter, no matter if you've specified
-            // whether you want them or not. Thus, we will need to add an empty
-            // footer as an item, so that we don't mismatch our indexes
-            layouts[index] = { length: 0, offset, index };
-            index++;
         });
-
+        return data;
-        // Then, store and memoize the output
-        return layouts;
     }, [sections]);
+
+    // Compute sticky header indices
+    const stickyHeaderIndices = useMemo(() => {
+        return flatData
+            .map((item, index) => typeof item === 'string' ? index : null)
+            .filter((item): item is number => item !== null);
+    }, [flatData]);
     
     // Set callbacks
     const retrieveData = useCallback(() => dispatch(fetchAllAlbums()), [dispatch]);
     const selectArtist = useCallback((payload: SectionArtistItem) => (
         navigation.navigate('Artist', payload)
     ), [navigation]);
-    const selectLetter = useCallback((sectionIndex: number) => { 
+    const selectLetter = useCallback(({ letter }: { letter: string, index: number }) => { 
-        listRef.current?.scrollToLocation({ sectionIndex, itemIndex: 0, animated: false, }); 
+        const index = flatData.findIndex((item) => (
-    }, [listRef]);
+            typeof item === 'string' && item === letter
-    const generateItem = useCallback(({ item }: { item: SectionArtistItem }) => {
+        ));
+        if (index !== -1) {
+            listRef.current?.scrollToIndex({ index, animated: false });
+        }
+    }, [flatData]);
+
+    const renderItem = useCallback(({ item }: { item: string | SectionArtistItem }) => {
+        if (typeof item === 'string') {
+            return <SectionHeading label={item} />;
+        }
         return (
-            <View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 10 }} key={item.Id}>
+            <View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 32 }}>
                 <GeneratedArtistItem
                     key={item.Id}
                     item={item}
@@ -186,7 +165,6 @@ const Artists: React.FC = () => {
 
     // Retrieve data on mount
     useEffect(() => { 
-        // GUARD: Only refresh this API call every set amounts of days
         if (!lastRefreshed || differenceInDays(lastRefreshed, new Date()) > ALBUM_CACHE_AMOUNT_OF_DAYS) {
             retrieveData(); 
         }
@@ -195,24 +173,18 @@ const Artists: React.FC = () => {
     return (
         <>
             <AlphabetScroller onSelect={selectLetter} />
-            <SafeSectionList
+            <SafeFlashList
-                sections={sections} 
+                data={flatData}
                 refreshing={isLoading}
                 onRefresh={retrieveData}
-                getItemLayout={(_, i) => {
-                    if (!(i in itemLayouts)) {
-                        // console.log('COuLD NOT FIND LAYOUT ITEM', i, _);
-                    }
-                    return itemLayouts[i] ?? { length: 0, offset: 0, index: i };
-                }}
                 ref={listRef}
-                keyExtractor={(item) => item.Id}
+                renderItem={renderItem}
-                renderSectionHeader={generateSection}
+                stickyHeaderIndices={stickyHeaderIndices}
-                renderItem={generateItem}
+                estimatedItemSize={ArtistHeight}
+                getItemType={(item) => typeof item === 'string' ? 'sectionHeader' : 'row'}
             />
         </>
     );
 };
 
-
 export default Artists;

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) {
+export interface AlbumImageProps extends FastImageProps {
-    const [hasError, setError] = useState(false);
+    source: number | Omit<Source, 'uri'> & {
-    const colorScheme = useUserOrSystemScheme();
+        uri?: string;
+    };
+}
 
-    if (!props.source || hasError) {
+const defaultImageDark = require('@/assets/images/empty-album-dark.png');
-        return (
+const defaultImageLight = require('@/assets/images/empty-album-light.png');
-            <Container
+
-                {...props}
+function AlbumImage(props: FastImageProps) {
-                source={colorScheme === 'light'
+    const colorScheme = useUserOrSystemScheme();
-                    ? require('@/assets/images/empty-album-light.png')
+    const defaultImage = colorScheme === 'light' ? defaultImageLight : defaultImageDark;
-                    : require('@/assets/images/empty-album-dark.png')
+
-                }
+    // 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>

src/screens/modals/Player/components/ProgressBar.tsx

@@ -33,10 +33,12 @@ const NumberBar = styled.View`
     justify-content: space-between;
     width: 100%;
     padding: 8px 0;
+    gap: 16px;
 `;
 
 const Number = styled(ReText)`
     font-size: 13px;
+    flex: 1;
 `;
 
 const DragHandle = styled(Reanimated.View)`
@@ -51,7 +53,7 @@ const DragHandle = styled(Reanimated.View)`
 
 function ProgressBar() {
     const styles = useDefaultStyles();
-    const { position, buffered } = useProgress();
+    const { position, buffered } = useProgress(990);
     const { track } = useCurrentTrack();
 
     const width = useSharedValue(0);
@@ -205,8 +207,8 @@ function ProgressBar() {
                     ]} 
                 />
                 <NumberBar style={{ flex: 1 }}>
-                    <Number text={timePassed} style={timePassedStyles} />
+                    <Number text={timePassed} style={[timePassedStyles]} />
-                    <Number text={timeRemaining} style={timeRemainingStyles} />
+                    <Number text={timeRemaining} style={[timeRemainingStyles, { textAlign: 'right' }]} />
                 </NumberBar>
             </Container>
         </GestureDetector>

src/store/downloads/actions.ts

@@ -17,16 +17,17 @@ export const failDownload = createAction<{ id: string }>('download/fail');
 
 export const downloadTrack = createAsyncThunk(
     '/downloads/track',
-    async (id: string, { dispatch }) => {
+    async (id: string, { dispatch, getState }) => {
         // Generate the URL we can use to download the file
+        const entity = (getState() as AppState).music.tracks.entities[id];
         const audioUrl = generateTrackUrl(id);
-        const imageUrl = getImage(id);
+        const imageUrl = getImage(entity);
 
         // Get the content-type from the URL by doing a HEAD-only request
         const [audioExt, imageExt] = await Promise.all([
             getExtensionForUrl(audioUrl),
             // Image files may be absent
-            getExtensionForUrl(imageUrl).catch(() => null)
+            imageUrl ? getExtensionForUrl(imageUrl).catch(() => null) : null
         ]);
 
         // Then generate the proper location
@@ -51,7 +52,7 @@ export const downloadTrack = createAsyncThunk(
 
         const { promise: imagePromise } = imageExt && imageLocation
             ? downloadFile({
-                fromUrl: imageUrl,
+                fromUrl: imageUrl!,
                 toFile: imageLocation,
                 background: true,
             })

src/utility/JellyfinApi/lib.ts

@@ -46,7 +46,7 @@ export async function fetchApi<T>(
     path: PathOrCredentialInserter,
     providedConfig?: RequestInit,
     parseResponse = true
-) { 
+) {
     // Retrieve the latest credentials from the Redux store
     const credentials = asyncFetchStore().getState().settings.credentials;
 
@@ -67,11 +67,11 @@ export async function fetchApi<T>(
             ...generateConfig(credentials).headers,
         }
     };
-    
+
     // Actually perform the request
     const response = await fetch(url, config);
 
-    if (__DEV__) { 
+    if (__DEV__) {
         console.log(`%c[HTTP] → [${response.status}] ${url}`, 'font-weight:bold;');
         console.log('\t', config);
     }
@@ -96,24 +96,55 @@ export async function fetchApi<T>(
     if (parseResponse) {
         // Parse body as JSON
         const data = await response.json() as Promise<T>;
-    
+
         return data;
     }
 
     return null;
 }
 
+function formatImageUri(ItemId: string | number, baseUri: string): string {
+    return encodeURI(`${baseUri}/Items/${ItemId}/Images/Primary?format=jpeg`);
+}
+
 /**
  * Retrieve an image URL for a given ItemId
  */
-export function getImage(ItemId: string | number, credentials?: AppState['settings']['credentials']): string {
+export function getImage(item: string | number | Album | AlbumTrack | Playlist | ArtistItem | null, credentials?: AppState['settings']['credentials']): string | undefined {
     // Either accept provided credentials, or retrieve them directly from the store
-    const { uri: serverUri } = credentials 
+    const state = asyncFetchStore().getState();
-        ?? asyncFetchStore().getState().settings.credentials ?? {};
+    const { uri: serverUri } = credentials ?? state.settings.credentials ?? {};
-    
+
-    // Generate the uri and return
+    if (!item || !serverUri) {
-    const uri = encodeURI(`${serverUri}/Items/${ItemId}/Images/Primary?format=jpeg`);
+        return undefined;
-    return uri;
+    }
+
+    // Get the item ID
+    const itemId = typeof item === 'string' || typeof item === 'number' 
+        ? item 
+        : 'PrimaryImageItemId' in item 
+            ? item.PrimaryImageItemId || item.Id 
+            : item.Id;
+
+    // Check if we have a downloaded image for this item
+    const downloadEntity = state.downloads.entities[itemId];
+    if (downloadEntity?.image) {
+        return downloadEntity.image;
+    }
+
+    // If no downloaded image, fall back to server URL
+    if (typeof item === 'string' || typeof item === 'number') {
+        if (__DEV__) {
+            console.warn('useGetImage: supplied item is string or number. Please submit an item object instead.', { item });
+        }
+        return formatImageUri(item, serverUri);
+    } else if ('PrimaryImageItemId' in item) {
+        return formatImageUri(item.PrimaryImageItemId || item.Id, serverUri);
+    } else if ('ImageTags' in item && item.ImageTags.Primary) {
+        return formatImageUri(item.Id, serverUri);
+    }
+
+    return undefined;
 }
 
 /**
@@ -122,18 +153,7 @@ export function getImage(ItemId: string | number, credentials?: AppState['settin
 export function useGetImage() {
     const credentials = useTypedSelector((state) => state.settings.credentials);
 
-    return (item: string | number | Album | AlbumTrack | Playlist | ArtistItem | null) => {
+    return (item: Parameters<typeof getImage>[0]) => {
-        if (!item) {
+        return getImage(item, credentials);
-            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);
-        }
     };
 }

src/utility/JellyfinApi/track.ts

@@ -57,7 +57,7 @@ export async function generateTrack(track: AlbumTrack): Promise<Track> {
         artist: track.Artists.join(', '),
         album: track.Album,
         duration: track.RunTimeTicks,
-        artwork: getImage(track.Id),
+        artwork: getImage(track),
         bitRate: baseTrackOptions.audioBitRate,
     };
 }