feat: base setup for carplay

chore: release ios beta
fix: linter
2025-05-24 17:41:28 +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 · 2025-05-24 00:15:08 +02:00
28 changed files with 596 additions and 347 deletions
--- a/ios/AppDelegate.swift
+++ b/ios/AppDelegate.swift
@@ -1,48 +0,0 @@
-import UIKit
-import React
-import React_RCTAppDelegate
-import ReactAppDependencyProvider
-
-@main
-class AppDelegate: UIResponder, UIApplicationDelegate {
-  var window: UIWindow?
-
-  var reactNativeDelegate: ReactNativeDelegate?
-  var reactNativeFactory: RCTReactNativeFactory?
-
-  func application(
-    _ application: UIApplication,
-    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
-  ) -> Bool {
-    let delegate = ReactNativeDelegate()
-    let factory = RCTReactNativeFactory(delegate: delegate)
-    delegate.dependencyProvider = RCTAppDependencyProvider()
-
-    reactNativeDelegate = delegate
-    reactNativeFactory = factory
-
-    window = UIWindow(frame: UIScreen.main.bounds)
-
-    factory.startReactNative(
-      withModuleName: "Fintunes",
-      in: window,
-      launchOptions: launchOptions
-    )
-
-    return true
-  }
-}
-
-class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
-  override func sourceURL(for bridge: RCTBridge) -> URL? {
-    self.bundleURL()
-  }
-
-  override func bundleURL() -> URL? {
-#if DEBUG
-    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
-#else
-    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
-#endif
-  }
-}
--- a/ios/Fintunes.xcodeproj/project.pbxproj
+++ b/ios/Fintunes.xcodeproj/project.pbxproj
@@ -13,7 +13,9 @@
 		4C04FC6E055249ABB204D3BC /* Inter-VariableFont_slnt,wght.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4B4A0465FF364579B28CF5D7 /* Inter-VariableFont_slnt,wght.ttf */; };
 		AB393FCA2857CC8400773469 /* SnapshotHelper.swift in Sources */ = {isa = PBXBuildFile; fileRef = AB393FC92857CC8400773469 /* SnapshotHelper.swift */; };
 		AB4A8DFE2857C8DA005A1ED0 /* FintunesUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = AB4A8DFD2857C8DA005A1ED0 /* FintunesUITests.swift */; };
-		AB7AA5F92DC8E5D600578CAC /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = AB7AA5F82DC8E5D600578CAC /* AppDelegate.swift */; };
+		ABB40BB92DE211A6002112FC /* PhoneSceneDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABB40BB82DE211A6002112FC /* PhoneSceneDelegate.swift */; };
+		ABB40BBA2DE211A6002112FC /* CarSceneDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABB40BB72DE211A6002112FC /* CarSceneDelegate.swift */; };
+		ABB40BBC2DE2137E002112FC /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABB40BBB2DE2137E002112FC /* AppDelegate.swift */; };
 		FA01635F2599C28FC19F2EC3 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 3896494129CBC30258D9BB1C /* PrivacyInfo.xcprivacy */; };
 /* End PBXBuildFile section */

@@ -40,7 +42,10 @@
 		AB393FC92857CC8400773469 /* SnapshotHelper.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SnapshotHelper.swift; sourceTree = "<group>"; };
 		AB4A8DFB2857C8DA005A1ED0 /* FintunesUITests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = FintunesUITests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		AB4A8DFD2857C8DA005A1ED0 /* FintunesUITests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FintunesUITests.swift; sourceTree = "<group>"; };
-		AB7AA5F82DC8E5D600578CAC /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
+		ABB40BB42DE20F50002112FC /* Fintunes-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = "Fintunes-Bridging-Header.h"; path = "Fintunes/Fintunes-Bridging-Header.h"; sourceTree = "<group>"; };
+		ABB40BB72DE211A6002112FC /* CarSceneDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = CarSceneDelegate.swift; path = Fintunes/CarSceneDelegate.swift; sourceTree = "<group>"; };
+		ABB40BB82DE211A6002112FC /* PhoneSceneDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = PhoneSceneDelegate.swift; path = Fintunes/PhoneSceneDelegate.swift; sourceTree = "<group>"; };
+		ABB40BBB2DE2137E002112FC /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = AppDelegate.swift; path = Fintunes/AppDelegate.swift; sourceTree = "<group>"; };
 		E22EC545298DA9F9017776C0 /* libPods-Fintunes.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Fintunes.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
@@ -68,7 +73,10 @@
 		13B07FAE1A68108700A75B9A /* Fintunes */ = {
 			isa = PBXGroup;
 			children = (
-				AB7AA5F82DC8E5D600578CAC /* AppDelegate.swift */,
+				ABB40BBB2DE2137E002112FC /* AppDelegate.swift */,
+				ABB40BB72DE211A6002112FC /* CarSceneDelegate.swift */,
+				ABB40BB82DE211A6002112FC /* PhoneSceneDelegate.swift */,
+				ABB40BB42DE20F50002112FC /* Fintunes-Bridging-Header.h */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
@@ -319,6 +327,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 +339,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",
@@ -346,7 +356,9 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				AB7AA5F92DC8E5D600578CAC /* AppDelegate.swift in Sources */,
+				ABB40BBC2DE2137E002112FC /* AppDelegate.swift in Sources */,
+				ABB40BB92DE211A6002112FC /* PhoneSceneDelegate.swift in Sources */,
+				ABB40BBA2DE211A6002112FC /* CarSceneDelegate.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -390,7 +402,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 = (
@@ -412,6 +424,7 @@
 				PRODUCT_BUNDLE_IDENTIFIER = nl.moeilijkedingen.jellyfinaudioplayer;
 				PRODUCT_NAME = Fintunes;
 				PROVISIONING_PROFILE_SPECIFIER = "";
+				SWIFT_OBJC_BRIDGING_HEADER = "Fintunes/Fintunes-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
 				VERSIONING_SYSTEM = "apple-generic";
@@ -427,7 +440,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;
@@ -447,6 +460,7 @@
 				PROVISIONING_PROFILE = "915c5213-22f6-4f9d-8065-2a06300f9bfb";
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				"PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "nl.moeilijkedingen.jellyfinaudioplayer AppStore";
+				SWIFT_OBJC_BRIDGING_HEADER = "Fintunes/Fintunes-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				VERSIONING_SYSTEM = "apple-generic";
 			};
@@ -607,7 +621,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 +656,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/AppDelegate.swift
+++ b/ios/Fintunes/AppDelegate.swift
@@ -1,19 +1,20 @@
 import UIKit
+import CarPlay
 import React
 import React_RCTAppDelegate
 import ReactAppDependencyProvider

+
@main
 class AppDelegate: UIResponder, UIApplicationDelegate {
+  
  var window: UIWindow?
-
+  
  var reactNativeDelegate: ReactNativeDelegate?
  var reactNativeFactory: RCTReactNativeFactory?
-
-  func application(
-    _ application: UIApplication,
-    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
-  ) -> Bool {
+  
+  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
+    
    let delegate = ReactNativeDelegate()
    let factory = RCTReactNativeFactory(delegate: delegate)
    delegate.dependencyProvider = RCTAppDependencyProvider()
@@ -31,6 +32,21 @@ class AppDelegate: UIResponder, UIApplicationDelegate {

    return true
  }
+  
+  func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
+    if (connectingSceneSession.role == UISceneSession.Role.carTemplateApplication) {
+      let scene =  UISceneConfiguration(name: "CarPlay", sessionRole: connectingSceneSession.role)
+      scene.delegateClass = CarSceneDelegate.self
+      return scene
+    } else {
+      let scene =  UISceneConfiguration(name: "Phone", sessionRole: connectingSceneSession.role)
+      scene.delegateClass = PhoneSceneDelegate.self
+      return scene
+    }
+  }
+  
+  func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
+  }
 }

 class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
--- a/ios/Fintunes/CarSceneDelegate.swift
+++ b/ios/Fintunes/CarSceneDelegate.swift
@@ -0,0 +1,17 @@
+import CarPlay
+
+class CarSceneDelegate: UIResponder, CPTemplateApplicationSceneDelegate {
+    func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene, didConnect interfaceController: CPInterfaceController) {
+        print("CarPlay: Scene did connect")
+        print("CarPlay: About to connect to RNCarPlay")
+        // Dispatch connect to RNCarPlay
+        RNCarPlay.connect(with: interfaceController, window: templateApplicationScene.carWindow)
+        print("CarPlay: RNCarPlay.connect called")
+    }
+    
+    func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene, didDisconnect interfaceController: CPInterfaceController) {
+        print("CarPlay: Scene did disconnect")
+        // Dispatch disconnect to RNCarPlay
+        RNCarPlay.disconnect()
+    }
+} 
--- a/ios/Fintunes/Fintunes-Bridging-Header.h
+++ b/ios/Fintunes/Fintunes-Bridging-Header.h
@@ -0,0 +1 @@
+#import "RNCarPlay.h" 
--- 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>
@@ -60,5 +60,41 @@
 	<true/>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIApplicationSceneManifest</key>
+	<dict>
+		<key>UIApplicationSupportsMultipleScenes</key>
+		<true/>
+		<key>UISceneConfigurations</key>
+		<dict>
+			<key>CPTemplateApplicationSceneSessionRoleApplication</key>
+			<array>
+				<dict>
+					<key>UISceneClassName</key>
+					<string>CPTemplateApplicationScene</string>
+					<key>UISceneConfigurationName</key>
+					<string>CarPlay</string>
+					<key>UISceneDelegateClassName</key>
+					<string>$(PRODUCT_MODULE_NAME).CarSceneDelegate</string>
+				</dict>
+			</array>
+			<key>UIWindowSceneSessionRoleApplication</key>
+			<array>
+				<dict>
+					<key>UISceneClassName</key>
+					<string>UIWindowScene</string>
+					<key>UISceneConfigurationName</key>
+					<string>Phone</string>
+					<key>UISceneDelegateClassName</key>
+					<string>$(PRODUCT_MODULE_NAME).PhoneSceneDelegate</string>
+				</dict>
+			</array>
+		</dict>
+	</dict>
+	<key>CPApplicationIdentifier</key>
+	<string>nl.moeilijkedingen.fintunes.carplay</string>
+	<key>CPApplicationName</key>
+	<string>Fintunes</string>
+	<key>CPApplicationCategory</key>
+	<string>CPApplicationCategoryAudio</string>
 </dict>
 </plist>
--- a/ios/Fintunes/PhoneSceneDelegate.swift
+++ b/ios/Fintunes/PhoneSceneDelegate.swift
@@ -0,0 +1,24 @@
+import UIKit
+import React
+
+class PhoneSceneDelegate: UIResponder, UIWindowSceneDelegate {
+    var window: UIWindow?
+
+    func scene(
+        _ scene: UIScene, willConnectTo session: UISceneSession,
+        options connectionOptions: UIScene.ConnectionOptions
+    ) {
+        guard let appDelegate = UIApplication.shared.delegate as? AppDelegate else { return }
+        guard let windowScene = scene as? UIWindowScene else { return }
+        guard let appRootView = appDelegate.window?.rootViewController?.view else { return }
+
+        let containerViewController = UIViewController()
+        containerViewController.view.addSubview(appRootView)
+        appRootView.frame = containerViewController.view.bounds
+
+        let window = UIWindow(windowScene: windowScene)
+        window.rootViewController = containerViewController
+        self.window = window
+        window.makeKeyAndVisible()
+    }
+}
--- 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)
@@ -1394,6 +1399,8 @@ PODS:
    - ReactCommon/turbomodule/bridging
    - ReactCommon/turbomodule/core
    - Yoga
+  - react-native-carplay (2.4.1-beta.0):
+    - React
  - react-native-netinfo (11.4.1):
    - React-Core
  - react-native-safe-area-context (5.4.0):
@@ -1894,10 +1901,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 +2253,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)
@@ -2253,6 +2312,7 @@ DEPENDENCIES:
  - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
  - react-native-accessibility-settings (from `../node_modules/react-native-accessibility-settings`)
  - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
+  - react-native-carplay (from `../node_modules/react-native-carplay`)
  - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
  - "react-native-skia (from `../node_modules/@shopify/react-native-skia`)"
@@ -2291,7 +2351,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 +2364,11 @@ DEPENDENCIES:

 SPEC REPOS:
  trunk:
+    - libavif
+    - libdav1d
    - libwebp
    - SDWebImage
+    - SDWebImageAVIFCoder
    - SDWebImageWebPCoder
    - Sentry
    - SocketRocket
@@ -2394,6 +2458,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native-accessibility-settings"
  react-native-blur:
    :path: "../node_modules/@react-native-community/blur"
+  react-native-carplay:
+    :path: "../node_modules/react-native-carplay"
  react-native-netinfo:
    :path: "../node_modules/@react-native-community/netinfo"
  react-native-safe-area-context:
@@ -2471,7 +2537,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 +2565,8 @@ SPEC CHECKSUMS:
  fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
  glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
  hermes-engine: 314be5250afa5692b57b4dd1705959e1973a8ebe
+  libavif: 84bbb62fb232c3018d6f1bab79beea87e35de7b7
+  libdav1d: 23581a4d8ec811ff171ed5e2e05cd27bad64c39f
  libwebp: 1786c9f4ff8a279e4dac1e8f385004d5fc253009
  RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
  RCTDeprecation: 83ffb90c23ee5cea353bd32008a7bca100908f8c
@@ -2532,6 +2602,7 @@ SPEC CHECKSUMS:
  React-microtasksnativemodule: 054f34e9b82f02bd40f09cebd4083828b5b2beb6
  react-native-accessibility-settings: 87f2276eb146ed5656bef2073e0c077e94a83f88
  react-native-blur: 06d0f9906ecd6cde3a42de16c6cd829a2bf0710c
+  react-native-carplay: 8f388f6f73e5e0f73ed154ad8794371343ee20c0
  react-native-netinfo: cec9c4e86083cb5b6aba0e0711f563e2fbbff187
  react-native-safe-area-context: 562163222d999b79a51577eda2ea8ad2c32b4d06
  react-native-skia: 2f725d0747756d57f0a51417c91e33bc42272c56
@@ -2570,7 +2641,8 @@ SPEC CHECKSUMS:
  ReactCommon: 76d2dc87136d0a667678668b86f0fca0c16fdeb0
  RNCAsyncStorage: 39c42c1e478e1f5166d1db52b5055e090e85ad66
  RNDateTimePicker: 43ee3de2bc639bc0d9b77564961060a54dfc7111
-  RNFastImage: 462a183c4b0b6b26fdfd639e1ed6ba37536c3b87
+  RNFastImage: 72769fac450a8a7d111378433111d8e52f2b251e
+  RNFlashList: 5001dd06f0003a497de3e2035653c54cf8b48e96
  RNFS: 89de7d7f4c0f6bafa05343c578f61118c8282ed8
  RNGestureHandler: ebef699ea17e7c0006c1074e1e423ead60ce0121
  RNLocalize: 66046b78816e61e5b8211084b72afab4191d1db3
@@ -2578,8 +2650,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
--- 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",
@@ -33,9 +35,9 @@
    "react-airplay": "^1.2.0",
    "react-native": "^0.79.2",
    "react-native-accessibility-settings": "^0.1.2",
+    "react-native-carplay": "2.4.1-beta.0",
    "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
@@ -19,6 +19,9 @@ importers:

  .:
    dependencies:
+      '@d11/react-native-fast-image':
+        specifier: ^8.9.2
+        version: 8.9.2(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0)
      '@react-native-async-storage/async-storage':
        specifier: ^2.1.2
        version: 2.1.2(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))
@@ -49,6 +52,9 @@ importers:
      '@reduxjs/toolkit':
        specifier: ^2.7.0
        version: 2.7.0(react-redux@9.2.0(@types/react@18.3.20)(react@19.0.0)(redux@5.0.1))(react@19.0.0)
+      '@shopify/flash-list':
+        specifier: ^1.8.0
+        version: 1.8.0(@babel/runtime@7.27.1)(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0)
      '@shopify/react-native-skia':
        specifier: 2.0.0-next.3
        version: 2.0.0-next.3(react-native-reanimated@3.17.5(@babel/core@7.27.1)(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0))(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0)
@@ -82,15 +88,15 @@ importers:
      react-native-accessibility-settings:
        specifier: ^0.1.2
        version: 0.1.2(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0)
+      react-native-carplay:
+        specifier: 2.4.1-beta.0
+        version: 2.4.1-beta.0(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0)
      react-native-collapsible:
        specifier: ^1.6.2
        version: 1.6.2(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0)
      react-native-dotenv:
        specifier: ^3.4.11
        version: 3.4.11(@babel/runtime@7.27.1)
-      react-native-fast-image:
-        specifier: ^8.6.3
-        version: 8.6.3(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0)
      react-native-fs:
        specifier: ^2.20.0
        version: 2.20.0(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))
@@ -791,6 +797,12 @@ packages:
    resolution: {integrity: sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==}
    engines: {node: '>=6.9.0'}

+  '@d11/react-native-fast-image@8.9.2':
+    resolution: {integrity: sha512-7d0O5mA17SCbIAYq9D0WxDlS3HXf5v9vg9ltphDfP/3R57sBEf6/wby/sHkOmrQGwvgUlz2oSo5Ld8hgocLJeQ==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+
  '@egjs/hammerjs@2.0.17':
    resolution: {integrity: sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==}
    engines: {node: '>=0.8.0'}
@@ -1355,6 +1367,13 @@ packages:
    resolution: {integrity: sha512-JL8UDjrsKxKclTdLXfuHfE7B3KbrAPEYP7tMyN/xiO2vsF6D84fjwYyalO0ZMtuFZE6vpSze8ZOLEh6hLnPYsw==}
    engines: {node: '>=14.18'}

+  '@shopify/flash-list@1.8.0':
+    resolution: {integrity: sha512-APZ48kceCCJobUimmI2594io+HujELK60HFKgzIyIdHGX5ySR5YfvsPy3PKtPwHHDtIMFNaq3U/BY3qZocOhCA==}
+    peerDependencies:
+      '@babel/runtime': '*'
+      react: '*'
+      react-native: '*'
+
  '@shopify/react-native-skia@2.0.0-next.3':
    resolution: {integrity: sha512-mm9oc8fPhh7hOr6kYk/xmcCOb7NZVk9+BRd6mukW5E563Wc/8loDeNtWMMVRsBGAUblYKj91WTmcda9gACeAHA==}
    hasBin: true
@@ -3813,6 +3832,17 @@ packages:
      react: '*'
      react-native: '*'

+  react-native-carplay@2.4.1-beta.0:
+    resolution: {integrity: sha512-tYJymLgJi+0516niv4ApGVC+VgENX/uCYqCX81tewSILWnS6KR7M0A9+bHyNk8xoheFyYGruX7onYxU2U8ykPA==}
+    peerDependencies:
+      react: ^17.0.2 || ^18.0.0
+      react-native: ^0.60.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-native:
+        optional: true
+
  react-native-collapsible@1.6.2:
    resolution: {integrity: sha512-MCOBVJWqHNjnDaGkvxX997VONmJeebh6wyJxnHEgg0L1PrlcXU1e/bo6eK+CDVFuMrCafw8Qh4DOv/C4V/+Iew==}
    peerDependencies:
@@ -3830,12 +3860,6 @@ packages:
      react: '*'
      react-native: '*'

-  react-native-fast-image@8.6.3:
-    resolution: {integrity: sha512-Sdw4ESidXCXOmQ9EcYguNY2swyoWmx53kym2zRsvi+VeFCHEdkO+WG1DK+6W81juot40bbfLNhkc63QnWtesNg==}
-    peerDependencies:
-      react: ^17 || ^18
-      react-native: '>=0.60.0'
-
  react-native-fs@2.20.0:
    resolution: {integrity: sha512-VkTBzs7fIDUiy/XajOSNk0XazFE9l+QlMAce7lGuebZcag5CnjszB+u4BdqzwaQOdcYb5wsJIsqq4kxInIRpJQ==}
    peerDependencies:
@@ -3961,6 +3985,12 @@ packages:
    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
    engines: {node: '>= 6'}

+  recyclerlistview@4.2.3:
+    resolution: {integrity: sha512-STR/wj/FyT8EMsBzzhZ1l2goYirMkIgfV3gYEPxI3Kf3lOnu6f7Dryhyw7/IkQrgX5xtTcDrZMqytvteH9rL3g==}
+    peerDependencies:
+      react: '>= 15.2.1'
+      react-native: '>= 0.30.0'
+
  redux-persist@6.0.0:
    resolution: {integrity: sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==}
    peerDependencies:
@@ -4429,6 +4459,9 @@ packages:
  ts-interface-checker@0.1.13:
    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}

+  ts-object-utils@0.0.5:
+    resolution: {integrity: sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA==}
+
  tslib@2.6.2:
    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}

@@ -5425,6 +5458,11 @@ snapshots:
      '@babel/helper-string-parser': 7.27.1
      '@babel/helper-validator-identifier': 7.27.1

+  '@d11/react-native-fast-image@8.9.2(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+      react-native: 0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0)
+
  '@egjs/hammerjs@2.0.17':
    dependencies:
      '@types/hammerjs': 2.0.46
@@ -6387,6 +6425,14 @@ snapshots:
    dependencies:
      '@sentry/core': 8.54.0

+  '@shopify/flash-list@1.8.0(@babel/runtime@7.27.1)(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@babel/runtime': 7.27.1
+      react: 19.0.0
+      react-native: 0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0)
+      recyclerlistview: 4.2.3(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0)
+      tslib: 2.8.1
+
  '@shopify/react-native-skia@2.0.0-next.3(react-native-reanimated@3.17.5(@babel/core@7.27.1)(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0))(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0)':
    dependencies:
      canvaskit-wasm: 0.40.0
@@ -9334,6 +9380,11 @@ snapshots:
      react: 19.0.0
      react-native: 0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0)

+  react-native-carplay@2.4.1-beta.0(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0):
+    optionalDependencies:
+      react: 19.0.0
+      react-native: 0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0)
+
  react-native-collapsible@1.6.2(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0):
    dependencies:
      react: 19.0.0
@@ -9350,11 +9401,6 @@ snapshots:
      react-native: 0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0)
    optional: true

-  react-native-fast-image@8.6.3(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0):
-    dependencies:
-      react: 19.0.0
-      react-native: 0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0)
-
  react-native-fs@2.20.0(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0)):
    dependencies:
      base-64: 0.1.0
@@ -9524,6 +9570,14 @@ snapshots:
      string_decoder: 1.3.0
      util-deprecate: 1.0.2

+  recyclerlistview@4.2.3(react-native@0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0))(react@19.0.0):
+    dependencies:
+      lodash.debounce: 4.0.8
+      prop-types: 15.8.1
+      react: 19.0.0
+      react-native: 0.79.2(@babel/core@7.27.1)(@react-native-community/cli@18.0.0(typescript@5.8.3))(@types/react@18.3.20)(react@19.0.0)
+      ts-object-utils: 0.0.5
+
  redux-persist@6.0.0(react@19.0.0)(redux@5.0.1):
    dependencies:
      redux: 5.0.1
@@ -10061,6 +10115,8 @@ snapshots:
  ts-interface-checker@0.1.13:
    optional: true

+  ts-object-utils@0.0.5: {}
+
  tslib@2.6.2: {}

  tslib@2.8.1: {}
--- 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 CarPlayScreen from '@/screens/carplay';

 const LightTheme = {
    ...DefaultTheme,
@@ -84,6 +85,7 @@ export default function App(): JSX.Element | null {
                    <ThemedNavigationContainer>
                        <Routes />
                        <DownloadManager />
+                        <CarPlayScreen />
                    </ThemedNavigationContainer>
                </ColorSchemeProvider>
            </PersistGate>
--- 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 = {}>(
@@ -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,
--- 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 (
-        <ColoredBlurView>
-            <SectionContainer>
-                <SectionText>{label}</SectionText>
-            </SectionContainer>
-        </ColoredBlurView>
+        <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 (
+                <SectionHeading 
+                    label={item} 
+                />
+            );
+        }
        return (
-            <View style={{ flexDirection: 'row', marginLeft: 10, marginRight: 10 }} key={item.join('-')}>
-                {item.map((id) => (
+            <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 (
-        <ColoredBlurView>
-            <SectionContainer>
-                <SectionText>{label}</SectionText>
-            </SectionContainer>
-        </ColoredBlurView>
+        <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,24 +22,29 @@ const Container = styled(FastImage)`
    margin-bottom: 5px;
 `;

-function AlbumImage(props: FastImageProps) {
-    const [hasError, setError] = useState(false);
-    const colorScheme = useUserOrSystemScheme();
+export interface AlbumImageProps extends FastImageProps {
+    source: number | Omit<Source, 'uri'> & {
+        uri?: string;
+    };
+}

-    if (!props.source || hasError) {
-        return (
-            <Container
-                {...props}
-                source={colorScheme === 'light'
-                    ? require('@/assets/images/empty-album-light.png')
-                    : require('@/assets/images/empty-album-dark.png')
-                }
-            />
-        );
+const defaultImageDark = require('@/assets/images/empty-album-dark.png');
+const defaultImageLight = require('@/assets/images/empty-album-light.png');
+
+function AlbumImage(props: FastImageProps) {
+    const colorScheme = useUserOrSystemScheme();
+    const defaultImage = colorScheme === 'light' ? defaultImageLight : defaultImageDark;
+
+    // If no source is provided, use the default image as the main source
+    if (!props.source || (typeof props.source === 'object' && 'uri' in props.source && !props.source.uri)) {
+        return <Container {...props} source={defaultImage} />;
    }

    return (
-        <Container {...props} onError={() => setError(true)} />
+        <Container
+            {...props}
+            defaultSource={defaultImage}
+        />
    );
 }

--- 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/carplay/index.tsx
+++ b/src/screens/carplay/index.tsx
@@ -0,0 +1,62 @@
+import React, { useEffect } from 'react';
+import { View, Text } from 'react-native';
+import { CarPlay, ListTemplate, ListItem } from 'react-native-carplay';
+
+const CarPlayScreen: React.FC = () => {
+    useEffect(() => {
+        console.log('CarPlay: Screen mounted');
+
+        const onConnect = () => {
+            console.log('CarPlay: React Native connected');
+
+            // Create a list template with some items
+            const template = new ListTemplate({
+                title: 'Fintunes',
+                sections: [
+                    {
+                        header: 'Library',
+                        items: [
+                            {
+                                text: 'Songs',
+                                detailText: 'Browse your music library',
+                            },
+                            {
+                                text: 'Albums',
+                                detailText: 'Browse your albums',
+                            },
+                            {
+                                text: 'Artists',
+                                detailText: 'Browse your artists',
+                            },
+                        ],
+                    },
+                ],
+                onItemSelect: (item) => {
+                    console.log('Selected item:', item);
+                },
+            });
+
+            // Set the template as root
+            CarPlay.setRootTemplate(template);
+        };
+
+        const onDisconnect = () => {
+            console.log('CarPlay: React Native disconnected');
+        };
+
+        // Register for CarPlay connection events
+        CarPlay.registerOnConnect(onConnect);
+        CarPlay.registerOnDisconnect(onDisconnect);
+
+        return () => {
+            console.log('CarPlay: Screen unmounting');
+            // Cleanup listeners
+            CarPlay.unregisterOnConnect(onConnect);
+            CarPlay.unregisterOnDisconnect(onDisconnect);
+        };
+    }, []);
+
+    return null;
+};
+
+export default CarPlayScreen; 
--- 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
@@ -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 
-        ?? asyncFetchStore().getState().settings.credentials ?? {};
-    
-    // Generate the uri and return
-    const uri = encodeURI(`${serverUri}/Items/${ItemId}/Images/Primary?format=jpeg`);
-    return uri;
+    const state = asyncFetchStore().getState();
+    const { uri: serverUri } = credentials ?? state.settings.credentials ?? {};
+
+    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 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);
-        }
+    return (item: Parameters<typeof getImage>[0]) => {
+        return getImage(item, credentials);
    };
 }
--- 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
Lei Nelissen	da9653cfe8	feat: base setup for carplay	2025-05-24 17:41:28 +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