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>
fix: start app, even if setting up player fails
2025-06-11 21:18:14 +00:00 · 2025-06-07 18:19:22 +02:00 · 2025-05-24 15:28:20 +02:00 · 2025-05-24 00:34:44 +02:00 · 2025-05-24 00:32:50 +02:00 · 2025-05-24 00:22:31 +02:00
22 changed files with 736 additions and 354 deletions
--- a/ios/Fintunes.xcodeproj/project.pbxproj
+++ b/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;
--- a/ios/Fintunes/Info.plist
+++ b/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>
--- a/ios/Podfile.lock
+++ b/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)
-    - SDWebImageWebPCoder (~> 0.8.4)
+    - 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
+    - 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/Core (= 5.11.1)
-  - SDWebImage/Core (5.11.1)
-  - SDWebImageWebPCoder (0.8.5):
+  - SDWebImage (5.21.0):
+    - SDWebImage/Core (= 5.21.0)
+  - SDWebImage/Core (5.21.0)
+  - 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
-  SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
+  SDWebImage: f84b0feeb08d2d11e6a9b843cb06d75ebf5b8868
+  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
--- a/package.json
+++ b/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",
--- a/patches/react-native-fast-image+8.6.3.patch
+++ b/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(@{});
-     }
- }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/CONSTANTS.ts
+++ b/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#';
--- a/src/components/AlphabetScroller.tsx
+++ b/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;
-    top: 0;
-    height: 100%;
+    right: 0;
    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>
--- a/src/components/App.tsx
+++ b/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]);

--- a/src/components/CoverImage.tsx
+++ b/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
--- a/src/components/SafeNavigatorView.tsx
+++ b/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 = {}>(
@@ -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,
--- 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) }} style={defaultStyles.imageBackground} />
+                        <AlbumImage source={{ uri: getImage(tracks[item]) }} style={defaultStyles.imageBackground} />
                    </ShadowWrapper>
                </View>
                <View style={{ flexShrink: 1, marginRight: 8 }}>
--- a/src/screens/Music/stacks/Albums.tsx
+++ b/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';
-
-const HeadingHeight = 50;
-
-function generateSection({ section }: { section: SectionedId }) {
-    return (
-        <SectionHeading label={section.label} key={section.label} />
-    );
-}
+import { SafeFlashList, useNavigationOffsets } from '@/components/SafeNavigatorView';
+import { FlashList } from '@shopify/flash-list';

 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 (
+        <View style={{ paddingTop: top }}>
            <ColoredBlurView>
                <SectionContainer>
                    <SectionText>{label}</SectionText>
                </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
-    // advance. We can then use this pre-computed data to respond to
-    // `getItemLayout` calls, without having to compute things in place (and
-    // 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.
+    // Convert sections to flat array format for FlashList
+    const flatData = useMemo(() => {
+        const data: (string | string[])[] = [];
        sections.forEach((section) => {
-            // Each section starts with a header, so we'll need to add the item,
-            // as well as the offset.
-            layouts[index] = ({ length: HeadingHeight, offset, index });
-            index++;
-            offset += HeadingHeight;
-
-            // 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;
+            if (!section.data.length || !section.data[0].length) return;
+            // Add section header
+            data.push(section.label);
+            // Add section items
+            section.data.forEach((item) => {
+                data.push(item);
            });
-
-            // 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++;
        });
-
-        // Then, store and memoize the output
-        return layouts;
+        return data;
    }, [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) => { 
-        listRef.current?.scrollToLocation({ sectionIndex, itemIndex: 0, animated: false, }); 
-    }, [listRef]);
-    const generateItem = useCallback(({ item }: { item: string[] }) => {
+    const selectLetter = useCallback(({ letter }: { letter: string, index: number }) => { 
+        const index = flatData.findIndex((item) => (
+            typeof item === 'string' && item === letter
+        ));
+        if (index !== -1) {
+            listRef.current?.scrollToIndex({ index, animated: false });
+        }
+    }, [flatData]);
+
+    const renderItem = useCallback(({ item }: { item: string | string[]; index: number }) => {
+        if (typeof item === 'string') {
            return (
-            <View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 10 }} key={item.join('-')}>
-                {item.map((id) => (
+                <SectionHeading 
+                    label={item} 
+                />
+            );
+        }
+        return (
+            <View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 10 }}>
+                {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
-                sections={sections} 
+            <SafeFlashList
+                data={flatData}
                refreshing={isLoading}
                onRefresh={retrieveData}
-                getItemLayout={(_, i) =>  itemLayouts[i] ?? { length: 0, offset: 0, index: i }}
                ref={listRef}
-                keyExtractor={(item) => item.join('-')}
-                renderSectionHeader={generateSection}
-                renderItem={generateItem}
+                renderItem={renderItem}
+                stickyHeaderIndices={stickyHeaderIndices}
+                estimatedItemSize={AlbumHeight}
+                getItemType={(item) => typeof item === 'string' ? 'sectionHeader' : 'row'}
            />
        </>
    );
 };

-
 export default Albums;
--- a/src/screens/Music/stacks/Artist.tsx
+++ b/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;
--- a/src/screens/Music/stacks/Artists.tsx
+++ b/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';
-
-const HeadingHeight = 50;
-
-function generateSection({ section }: { section: SectionedArtist }) {
-    return (
-        <SectionHeading label={section.label} key={section.label} />
-    );
-}
+import { FlashList } from '@shopify/flash-list';

 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 (
+        <View style={{ paddingTop: top }}>
            <ColoredBlurView>
                <SectionContainer>
                    <SectionText>{label}</SectionText>
                </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
-    // advance. We can then use this pre-computed data to respond to
-    // `getItemLayout` calls, without having to compute things in place (and
-    // 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.
+    // Convert sections to flat array format for FlashList
+    const flatData = useMemo(() => {
+        const data: (string | SectionArtistItem)[] = [];
        sections.forEach((section) => {
-            // Each section starts with a header, so we'll need to add the item,
-            // as well as the offset.
-            layouts[index] = ({ length: HeadingHeight, offset, index });
-            index++;
-            offset += HeadingHeight;
-
-            // 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++;
+            if (!section.data.length) return;
+            // Add section header
+            data.push(section.label);
+            // Add section items
+            section.data.forEach((item) => {
+                data.push(item);
            });
-
-            // 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++;
        });
-
-        // Then, store and memoize the output
-        return layouts;
+        return data;
    }, [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) => { 
-        listRef.current?.scrollToLocation({ sectionIndex, itemIndex: 0, animated: false, }); 
-    }, [listRef]);
-    const generateItem = useCallback(({ item }: { item: SectionArtistItem }) => {
+    const selectLetter = useCallback(({ letter }: { letter: string, index: number }) => { 
+        const index = flatData.findIndex((item) => (
+            typeof item === 'string' && item === letter
+        ));
+        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
-                sections={sections} 
+            <SafeFlashList
+                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}
-                renderSectionHeader={generateSection}
-                renderItem={generateItem}
+                renderItem={renderItem}
+                stickyHeaderIndices={stickyHeaderIndices}
+                estimatedItemSize={ArtistHeight}
+                getItemType={(item) => typeof item === 'string' ? 'sectionHeader' : 'row'}
            />
        </>
    );
 };

-
 export default Artists;
--- a/src/screens/Music/stacks/Playlists.tsx
+++ b/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>
--- a/src/screens/Music/stacks/components/AlbumImage.tsx
+++ b/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,25 +22,30 @@ 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;
+    };
+}
+
+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} />;
+    }

-    if (!props.source || hasError) {
    return (
        <Container
            {...props}
-                source={colorScheme === 'light'
-                    ? require('@/assets/images/empty-album-light.png')
-                    : require('@/assets/images/empty-album-dark.png')
-                }
+            defaultSource={defaultImage}
        />
    );
 }

-    return (
-        <Container {...props} onError={() => setError(true)} />
-    );
-}
-
 export default AlbumImage;
--- a/src/screens/Music/stacks/components/TrackListView.tsx
+++ b/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>
--- a/src/screens/modals/Player/components/ProgressBar.tsx
+++ b/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={timeRemaining} style={timeRemainingStyles} />
+                    <Number text={timePassed} style={[timePassedStyles]} />
+                    <Number text={timeRemaining} style={[timeRemainingStyles, { textAlign: 'right' }]} />
                </NumberBar>
            </Container>
        </GestureDetector>
--- a/src/store/downloads/actions.ts
+++ b/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,
            })
--- a/src/utility/JellyfinApi/lib.ts
+++ b/src/utility/JellyfinApi/lib.ts
@@ -103,17 +103,48 @@ export async function fetchApi<T>(
    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 
-        ?? asyncFetchStore().getState().settings.credentials ?? {};
+    const state = asyncFetchStore().getState();
+    const { uri: serverUri } = credentials ?? state.settings.credentials ?? {};

-    // Generate the uri and return
-    const uri = encodeURI(`${serverUri}/Items/${ItemId}/Images/Primary?format=jpeg`);
-    return uri;
+    if (!item || !serverUri) {
+        return undefined;
+    }
+
+    // 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) => {
-        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 (item: Parameters<typeof getImage>[0]) => {
        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);
-        }
    };
 }
--- a/src/utility/JellyfinApi/track.ts
+++ b/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,
    };
 }
Author	SHA1	Message	Date
dependabot[bot]	a6c7b7e936	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>	2025-06-11 21:18:14 +00:00
Lei Nelissen	63481d0240	fix: start app, even if setting up player fails	2025-06-07 18:19:22 +02:00
Lei Nelissen	eb45169060	chore: release ios beta	2025-05-24 15:28:20 +02:00
Lei Nelissen	2e3ced0680	fix: linter	2025-05-24 00:34:44 +02:00
Lei Nelissen	76f3ce3972	fix: improve alphabetscroller working	2025-05-24 00:32:50 +02:00
Lei Nelissen	cf8bfdf05a	feat: attempt to retrieve images from downloaded items	2025-05-24 00:22:31 +02:00
Lei Nelissen	09a020afbb	chore: remove react-native-fast-image patch	2025-05-24 00:15:08 +02:00
Lei Nelissen	90a5d94147	fix: missing images	2025-05-24 00:09:12 +02:00
Lei Nelissen	58c7645170	fix: progress bar numbers cutoff	2025-05-24 00:08:56 +02:00
Lei Nelissen	d9326dfc7a	feat: swap sectionlists for @shopify/flashlist	2025-05-22 23:36:53 +02:00