@iternio/react-native-auto-play 0.3.11 → 0.4.0

package/android/src/main/java/com/margelo/nitro/swe/iternio/reactnativeautoplay/template/Parser.kt

@@ -40,6 +40,7 @@ import com.facebook.datasource.DataSources
 import com.facebook.drawee.backends.pipeline.Fresco
 import com.facebook.imagepipeline.image.CloseableBitmap
 import com.facebook.imagepipeline.image.CloseableXml
+import com.facebook.imagepipeline.request.ImageRequest
 import com.facebook.imagepipeline.request.ImageRequestBuilder
 import com.facebook.react.views.imagehelper.ImageSource
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.AndroidAutoScreen
@@ -67,10 +68,11 @@ import com.margelo.nitro.swe.iternio.reactnativeautoplay.NitroRow
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.NitroSectionType
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.OffRampType
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.OnRampType
+import com.margelo.nitro.swe.iternio.reactnativeautoplay.RemoteImage
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.TrafficSide
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.TravelEstimates
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.TurnType
-import com.margelo.nitro.swe.iternio.reactnativeautoplay.Variant_GlyphImage_AssetImage
+import com.margelo.nitro.swe.iternio.reactnativeautoplay.Variant_GlyphImage_AssetImage_RemoteImage
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.utils.BitmapCache
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.utils.SymbolFont
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.utils.get
@@ -79,6 +81,7 @@ import java.util.Calendar
 import java.util.Locale
 import java.util.TimeZone
 import kotlin.math.abs
+import androidx.core.net.toUri
 
 object Parser {
     const val TAG = "Parser"
@@ -210,27 +213,35 @@ object Parser {
         }.build()
     }
 
-    fun parseImage(context: CarContext, image: Variant_GlyphImage_AssetImage): CarIcon {
-        return parseImage(context, image.asFirstOrNull(), image.asSecondOrNull())
+    fun parseImage(context: CarContext, image: Variant_GlyphImage_AssetImage_RemoteImage): CarIcon {
+        return parseImage(context, image.asFirstOrNull(), image.asSecondOrNull(), image.asThirdOrNull())
     }
 
     fun parseImage(context: CarContext, image: NitroImage): CarIcon {
-        return parseImage(context, image.asFirstOrNull(), image.asSecondOrNull())
+        return parseImage(context, image.asFirstOrNull(), image.asSecondOrNull(), image.asThirdOrNull())
     }
 
-    fun parseImage(context: CarContext, glyphImage: GlyphImage?, assetImage: AssetImage?): CarIcon {
-        val bitmap = parseImageToBitmap(context, glyphImage, assetImage)
+    fun parseImage(
+        context: CarContext,
+        glyphImage: GlyphImage?,
+        assetImage: AssetImage?,
+        remoteImage: RemoteImage?
+    ): CarIcon {
+        val bitmap = parseImageToBitmap(context, glyphImage, assetImage, remoteImage)
 
         bitmap?.let {
             return CarIcon.Builder(IconCompat.createWithBitmap(it)).build()
         }
 
-        // this should not be possible, we just wanna satisfy kotlin
-        return CarIcon.APP_ICON
+        // remote images might fail to load so we provide some placeholder then
+        return CarIcon.ALERT
     }
 
     fun parseImageToBitmap(
-        context: CarContext, glyphImage: GlyphImage?, assetImage: AssetImage?
+        context: CarContext,
+        glyphImage: GlyphImage?,
+        assetImage: AssetImage?,
+        remoteImage: RemoteImage?
     ): Bitmap? {
         glyphImage?.let {
             return SymbolFont.imageFromNitroImage(
@@ -240,6 +251,9 @@ object Parser {
         assetImage?.let {
             return parseAssetImage(context, it)
         }
+        remoteImage?.let {
+            return parseRemoteImage(context, it)
+        }
 
         return null
     }
@@ -251,10 +265,14 @@ object Parser {
     fun imageFromNitroImages(
         context: CarContext, images: List<NitroImage>
     ): IconCompat {
-        val bitmaps = images.map {
+        val bitmaps = images.mapNotNull {
             parseImageToBitmap(
-                context, it.asFirstOrNull(), it.asSecondOrNull()
-            )!!
+                context, it.asFirstOrNull(), it.asSecondOrNull(), it.asThirdOrNull()
+            )
+        }
+
+        if (bitmaps.isEmpty()) {
+            return IconCompat.createWithBitmap(createBitmap(1, 1))
         }
 
         val height = bitmaps.maxOf { it.height }
@@ -512,54 +530,115 @@ object Parser {
     }
 
     fun parseAssetImage(context: CarContext, assetImage: AssetImage): Bitmap? {
-        var bitmap = BitmapCache.get(context, assetImage)
+        BitmapCache.get(context, assetImage)?.let { return it }
 
-        if (bitmap != null) {
-            return bitmap
-        }
+        val imageRequest = buildImageRequest(ImageSource(context, assetImage.uri).uri)
+        val bitmap = fetchBitmap(context, imageRequest, timeoutMs = null) ?: return null
 
-        val source = ImageSource(context, assetImage.uri)
-        val imageRequest = ImageRequestBuilder.newBuilderWithSource(source.uri).disableDiskCache()
-            .disableMemoryCache().build()
+        return applyTintAndCache(
+            context = context,
+            color = assetImage.color,
+            bitmap = bitmap,
+            cache = { result -> BitmapCache.put(context, assetImage, result) }
+        )
+    }
+
+    fun parseRemoteImage(context: CarContext, remoteImage: RemoteImage): Bitmap? {
+        BitmapCache.get(context, remoteImage)?.let { return it }
 
-        val dataSource = Fresco.getImagePipeline().fetchDecodedImage(imageRequest, context)
-        val result = DataSources.waitForFinalResult(dataSource)
+        val imageRequest = buildImageRequest(remoteImage.uri.toUri())
+        val timeoutMs = remoteImage.timeoutMs?.toLong() ?: 500L
+        val bitmap = fetchBitmap(context, imageRequest, timeoutMs = timeoutMs) ?: return null
 
+        return applyTintAndCache(
+            context = context,
+            color = remoteImage.color,
+            bitmap = bitmap,
+            cache = { result -> BitmapCache.put(context, remoteImage, result) }
+        )
+    }
+
+    // Disable Fresco's own caching — BitmapCache handles all caching uniformly
+    private fun buildImageRequest(uri: android.net.Uri): ImageRequest =
+        ImageRequestBuilder.newBuilderWithSource(uri)
+            .disableDiskCache().disableMemoryCache().build()
+
+    /**
+     * Fetches a bitmap via Fresco's image pipeline.
+     * When [timeoutMs] is provided, the fetch runs on a background thread and is abandoned on timeout.
+     * When `null`, the fetch runs synchronously (bundled assets, no network I/O).
+     */
+    private fun fetchBitmap(
+        context: CarContext,
+        imageRequest: ImageRequest,
+        timeoutMs: Long?
+    ): Bitmap? {
+        if (timeoutMs == null) return fetchSync(context, imageRequest)
+
+        var fetched: Bitmap? = null
+        val thread = Thread { fetched = fetchSync(context, imageRequest) }
+        thread.start()
+        thread.join(timeoutMs)
+        if (thread.isAlive) {
+            // Fresco's waitForFinalResult is not interruptible, but setting the flag
+            // lets any subsequent interruptible call exit and signals intent to exit.
+            thread.interrupt()
+            return null
+        }
+        return fetched
+    }
+
+    private fun fetchSync(context: CarContext, imageRequest: ImageRequest): Bitmap? {
+        val dataSource = try {
+            Fresco.getImagePipeline().fetchDecodedImage(imageRequest, context)
+        } catch (_: Exception) { return null }
+        val result = try {
+            DataSources.waitForFinalResult(dataSource)
+        } catch (_: Exception) { dataSource.close(); return null }
         val image = result?.get()
         try {
             if (image is CloseableBitmap) {
-                bitmap = image.underlyingBitmap.copy(Bitmap.Config.ARGB_8888, false)
+                // underlyingBitmap can be null when Fresco decodes to a CloseableBitmap
+                // whose backing bitmap has already been recycled or failed to allocate;
+                // copy() can also throw (e.g., OOM on very large remote images). Either
+                // way we return null so the caller falls back to a placeholder icon.
+                return image.underlyingBitmap?.copy(Bitmap.Config.ARGB_8888, false)
             } else if (image is CloseableXml) {
                 val drawable = image.buildDrawable()
-                bitmap = drawable?.toBitmap(
-                    width = image.width, height = image.height, Bitmap.Config.ARGB_8888
-                )
+                return drawable?.toBitmap(width = image.width, height = image.height, Bitmap.Config.ARGB_8888)
             }
+        } catch (_: Exception) {
+            // Any decode/copy failure (OOM, recycled bitmap, invalid config, …) should
+            // not crash the car app — the image is optional decoration and the caller
+            // handles a null return with CarIcon.ALERT.
+            return null
         } finally {
             image?.close()
             result?.close()
             dataSource.close()
         }
+        return null
+    }
 
-        if (bitmap == null) {
-            return null
-        }
-
-        assetImage.color?.get(context)?.let { color ->
-            val result = createBitmap(bitmap.width, bitmap.height)
-            val canvas = Canvas(result)
+    private fun applyTintAndCache(
+        context: CarContext,
+        color: NitroColor?,
+        bitmap: Bitmap,
+        cache: (Bitmap) -> Unit
+    ): Bitmap {
+        color?.get(context)?.let { tint ->
+            val tinted = createBitmap(bitmap.width, bitmap.height)
+            val canvas = Canvas(tinted)
             val paint = Paint()
 
-            paint.colorFilter = PorterDuffColorFilter(color, PorterDuff.Mode.SRC_IN)
+            paint.colorFilter = PorterDuffColorFilter(tint, PorterDuff.Mode.SRC_IN)
             canvas.drawBitmap(bitmap, 0f, 0f, paint)
 
-            BitmapCache.put(context, assetImage, result)
-
-            return result
+            cache(tinted)
+            return tinted
         }
 
-        BitmapCache.put(context, assetImage, bitmap)
-
+        cache(bitmap)
         return bitmap
     }
 

package/android/src/main/java/com/margelo/nitro/swe/iternio/reactnativeautoplay/utils/BitmapCache.kt

@@ -6,6 +6,7 @@ import androidx.car.app.CarContext
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.AssetImage
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.GlyphImage
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.NitroColor
+import com.margelo.nitro.swe.iternio.reactnativeautoplay.RemoteImage
 
 object BitmapCache {
     private val maxMemory = Runtime.getRuntime().maxMemory()
@@ -37,6 +38,16 @@ object BitmapCache {
         put(key, bitmap)
     }
 
+    fun get(context: CarContext, image: RemoteImage): Bitmap? {
+        val key = image.cacheKey(context)
+        return get(key)
+    }
+
+    fun put(context: CarContext, image: RemoteImage, bitmap: Bitmap) {
+        val key = image.cacheKey(context)
+        put(key, bitmap)
+    }
+
     private fun get(key: String): Bitmap? {
         synchronized(bitmapCache) {
             return bitmapCache.get(key)
@@ -56,5 +67,8 @@ fun NitroColor.get(context: CarContext): Int =
 fun AssetImage.cacheKey(context: CarContext): String =
     this.color?.let { "${this.uri}/${it.get(context)}" } ?: run { this.uri }
 
+fun RemoteImage.cacheKey(context: CarContext): String =
+    this.color?.let { "${this.uri}/${it.get(context)}" } ?: run { this.uri }
+
 fun GlyphImage.cacheKey(context: CarContext): String =
     "$glyph/${color.get(context)}/${backgroundColor.get(context)}/$fontScale"

package/android/src/main/java/com/margelo/nitro/swe/iternio/reactnativeautoplay/utils/SymbolFont.kt

@@ -10,39 +10,36 @@ import android.graphics.Typeface
 import androidx.car.app.CarContext
 import androidx.core.content.res.ResourcesCompat
 import androidx.core.graphics.createBitmap
-import androidx.core.graphics.drawable.IconCompat
-import com.margelo.nitro.swe.iternio.reactnativeautoplay.GlyphImage
-import com.margelo.nitro.swe.iternio.reactnativeautoplay.NitroImage
 import com.margelo.nitro.swe.iternio.reactnativeautoplay.BuildConfig
-import com.margelo.nitro.swe.iternio.reactnativeautoplay.R
-import com.margelo.nitro.swe.iternio.reactnativeautoplay.template.Parser
+import com.margelo.nitro.swe.iternio.reactnativeautoplay.GlyphImage
 
 object SymbolFont {
-    const val TAG = "SymbolFont"
-
-    private var typeface: Typeface? = null
-
-    private fun loadFont(context: Context) {
-        if (typeface != null) {
-            return
-        }
+    private var cachedFontName: String? = null
+    private var cachedTypeface: Typeface? = null
 
-        typeface = ResourcesCompat.getFont(context, R.font.materialsymbolsoutlined_regular)
+    private fun loadTypeface(context: Context, fontName: String): Typeface? {
+        if (fontName == cachedFontName) return cachedTypeface
+        val id = context.resources.getIdentifier(
+            fontName.lowercase(), "font", context.packageName
+        )
+        if (id == 0) return null
+        val tf = ResourcesCompat.getFont(context, id) ?: return null
+        cachedFontName = fontName
+        cachedTypeface = tf
+        return tf
     }
 
     private fun imageFromGlyph(
         context: Context,
-        glyph: Double,
+        glyphImage: GlyphImage,
         color: Int,
         backgroundColor: Int,
         cornerRadius: Float = 8f, //TODO: make accessible and add it to GlyphImage.cacheKey
-        fontScale: Float,
     ): Bitmap? {
-        loadFont(context)
-
-        val font = typeface ?: run {
-            return null
-        }
+        val font =
+            loadTypeface(context, glyphImage.fontName) ?: run {
+                return null
+            }
 
         val virtualScreenDensity = context.resources.displayMetrics.density
         val scale = BuildConfig.SCALE_FACTOR * virtualScreenDensity
@@ -59,6 +56,8 @@ object SymbolFont {
         }
         canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint)
 
+        val fontScale = (glyphImage.fontScale ?: 1.0).toFloat()
+
         // Setup text paint
         paint.reset()
         paint = Paint().apply {
@@ -70,7 +69,7 @@ object SymbolFont {
         }
 
         // Get the character from codepoint
-        val codepoint = glyph.toInt()
+        val codepoint = glyphImage.glyph.toInt()
         val text = String(Character.toChars(codepoint))
 
         // Measure text
@@ -94,13 +93,13 @@ object SymbolFont {
             return bitmap
         }
 
-        bitmap = imageFromGlyph(
-            context = context,
-            glyph = image.glyph,
-            color = image.color.get(context),
-            backgroundColor = image.backgroundColor.get(context),
-            fontScale = (image.fontScale ?: 1.0).toFloat()
-        )
+        bitmap =
+            imageFromGlyph(
+                context = context,
+                glyphImage = image,
+                color = image.color.get(context),
+                backgroundColor = image.backgroundColor.get(context),
+            )
 
         bitmap?.let {
             BitmapCache.put(context, image, it)
@@ -108,4 +107,4 @@ object SymbolFont {
 
         return bitmap
     }
-}
+}

package/ios/extensions/NitroImageExtensions.swift

@@ -8,6 +8,7 @@
 protocol ImageProtocol {
     var glyphImage: GlyphImage? { get }
     var assetImage: AssetImage? { get }
+    var remoteImage: RemoteImage? { get }
 }
 
 extension NitroImage: ImageProtocol {
@@ -19,9 +20,13 @@ extension NitroImage: ImageProtocol {
         if case .second(let asset) = self { return asset }
         return nil
     }
+    var remoteImage: RemoteImage? {
+        if case .third(let remote) = self { return remote }
+        return nil
+    }
 }
 
-extension Variant_GlyphImage_AssetImage: ImageProtocol {
+extension Variant_GlyphImage_AssetImage_RemoteImage: ImageProtocol {
     var glyphImage: GlyphImage? {
         if case .first(let glyph) = self { return glyph }
         return nil
@@ -30,4 +35,8 @@ extension Variant_GlyphImage_AssetImage: ImageProtocol {
         if case .second(let asset) = self { return asset }
         return nil
     }
+    var remoteImage: RemoteImage? {
+        if case .third(let remote) = self { return remote }
+        return nil
+    }
 }

package/ios/hybrid/HybridAutoPlay.swift

@@ -1,3 +1,4 @@
+import AVFoundation
 import CarPlay
 import NitroModules
 
@@ -20,6 +21,7 @@ class HybridAutoPlay: HybridAutoPlaySpec {
     private static var listeners = [EventName: [StateListener]]()
     private static var renderStateListeners = [String: [RenderStateListener]]()
     private static var safeAreaInsetsListeners = [String: [SafeAreaListener]]()
+    private static var voiceInputManager: VoiceInputManager?
 
     override init() {
         HybridAutoPlay.listeners.removeAll()
@@ -117,10 +119,55 @@ class HybridAutoPlay: HybridAutoPlaySpec {
     func addListenerVoiceInput(
         callback: @escaping (Location?, String?) -> Void
     ) throws -> () -> Void {
-        // TODO: Inplement voice input
+        // iOS does not use the OS-triggered voice input path — use startVoiceInput() instead.
         return {}
     }
 
+    func hasVoiceInputPermission() throws -> Bool {
+        return AVAudioSession.sharedInstance().recordPermission == .granted
+    }
+
+    func requestVoiceInputPermission() throws -> Promise<Bool> {
+        return Promise.async {
+            return await withCheckedContinuation { cont in
+                AVAudioSession.sharedInstance().requestRecordPermission { granted in
+                    cont.resume(returning: granted)
+                }
+            }
+        }
+    }
+
+    func startVoiceInput(silenceThresholdMs: Double?, maxDurationMs: Double?, listeningText: String?) throws -> Promise<
+        ArrayBuffer
+    > {
+        return Promise.async {
+            let interfaceController = try? await RootModule.withInterfaceController { $0 }
+
+            let manager = VoiceInputManager()
+            HybridAutoPlay.voiceInputManager = manager
+
+            defer {
+                HybridAutoPlay.voiceInputManager = nil
+            }
+
+            let data = try await manager.start(
+                interfaceController: interfaceController,
+                silenceThresholdMs: silenceThresholdMs ?? 1_500,
+                maxDurationMs: maxDurationMs ?? 10_000,
+                listeningText: listeningText ?? "Listening..."
+            )
+
+            return try ArrayBuffer.copy(data: data)
+        }
+    }
+
+    func stopVoiceInput() throws {
+        Task { @MainActor in
+            let interfaceController = try? await RootModule.withInterfaceController { $0 }
+            HybridAutoPlay.voiceInputManager?.stop(interfaceController: interfaceController)
+        }
+    }
+
     // MARK: set/push/pop templates
     func setRootTemplate(templateId: String) throws -> Promise<Void> {
         return Promise.async {
@@ -151,7 +198,7 @@ class HybridAutoPlay: HybridAutoPlaySpec {
     }
 
     func pushTemplate(templateId: String) throws
-        -> NitroModules.Promise<Void>
+        -> Promise<Void>
     {
         return Promise.async {
             try await RootModule.withSceneAndInterfaceController {
@@ -201,7 +248,7 @@ class HybridAutoPlay: HybridAutoPlaySpec {
         }
     }
 
-    func popTemplate(animate: Bool?) throws -> NitroModules.Promise<Void> {
+    func popTemplate(animate: Bool?) throws -> Promise<Void> {
         return Promise.async {
             try await RootModule.withInterfaceController {
                 interfaceController in
@@ -222,7 +269,7 @@ class HybridAutoPlay: HybridAutoPlaySpec {
         }
     }
 
-    func popToRootTemplate(animate: Bool?) throws -> NitroModules.Promise<Void> {
+    func popToRootTemplate(animate: Bool?) throws -> Promise<Void> {
         return Promise.async {
             try await RootModule.withInterfaceController {
                 interfaceController in

package/ios/templates/GridTemplate.swift

@@ -69,6 +69,13 @@ class GridTemplate: AutoPlayHeaderProviding {
                 )
             }
 
+            if let remoteImage = button.image.remoteImage {
+                image = Parser.parseRemoteImage(
+                    remoteImage: remoteImage,
+                    traitCollection: traitCollection
+                )
+            }
+
             guard let image = image else { return nil }
             guard let title = Parser.parseText(text: button.title) else { return nil }
 

package/ios/templates/MapTemplate.swift

@@ -127,6 +127,20 @@ class MapTemplate: AutoPlayHeaderProviding,
                     button.onPress?()
                 }
             }
+            if let remoteImage = button.image.remoteImage,
+                let icon = Parser.parseRemoteImage(
+                    remoteImage: remoteImage,
+                    traitCollection: traitCollection
+                )
+            {
+                return CPMapButton(image: icon) { _ in
+                    if button.type == .pan {
+                        self.onPanButtonPress()
+                        return
+                    }
+                    button.onPress?()
+                }
+            }
 
             return CPMapButton { _ in
                 if button.type == .pan {

package/ios/templates/Parser.swift

@@ -74,6 +74,12 @@ class Parser {
                         traitCollection: traitCollection
                     )
                 }
+                if let remoteImage = action.image?.remoteImage {
+                    image = Parser.parseRemoteImage(
+                        remoteImage: remoteImage,
+                        traitCollection: traitCollection
+                    )
+                }
 
                 var button: CPBarButton
 
@@ -771,9 +777,30 @@ class Parser {
             )
         }
 
+        if let remoteImage = image?.remoteImage {
+            return Parser.parseRemoteImage(
+                remoteImage: remoteImage,
+                traitCollection: traitCollection
+            )
+        }
+
         return nil
     }
 
+    // MARK: - Remote image cache
+    private static let remoteImageCache: NSCache<NSString, UIImage> = {
+        let cache = NSCache<NSString, UIImage>()
+        cache.countLimit = 50
+        cache.totalCostLimit = 8 * 1024 * 1024  // 8 MB, matching Android's BitmapCache
+        return cache
+    }()
+
+    /// Shared session — long-lived by design; failed tasks don't invalidate it.
+    private static let remoteImageSession = URLSession(configuration: .default)
+
+    /// Default network timeout for remote images when no `timeoutMs` is provided.
+    private static let defaultRemoteTimeoutSeconds: TimeInterval = 0.5
+
     static func parseAssetImage(
         assetImage: AssetImage,
         traitCollection: UITraitCollection
@@ -784,17 +811,77 @@ class Parser {
             "__packager_asset": assetImage.packager_asset,
         ])
 
-        guard let color = assetImage.color else {
-            return uiImage
-        }
+        return applyTint(
+            uiImage: uiImage,
+            color: assetImage.color,
+            traitCollection: traitCollection
+        )
+    }
+
+    static func parseRemoteImage(
+        remoteImage: RemoteImage,
+        traitCollection: UITraitCollection
+    ) -> UIImage? {
+        let timeoutSeconds = remoteImage.timeoutMs.map { $0 / 1000.0 } ?? defaultRemoteTimeoutSeconds
+        let uiImage = loadRemoteImage(uri: remoteImage.uri, timeoutSeconds: timeoutSeconds)
+
+        return applyTint(
+            uiImage: uiImage,
+            color: remoteImage.color,
+            traitCollection: traitCollection
+        )
+    }
+
+    private static func applyTint(
+        uiImage: UIImage?,
+        color: NitroColor?,
+        traitCollection: UITraitCollection
+    ) -> UIImage? {
+        guard let image = uiImage else { return nil }
+        guard let color else { return image }
 
         return getTintedImageAsset(
             color: color,
-            uiImage: uiImage,
+            uiImage: image,
             traitCollection: traitCollection
         )
     }
 
+    /// Synchronously loads an image from a remote HTTPS URL with in-memory caching.
+    /// `parseRemoteImage` is always invoked on a background thread by the Car App rendering pipeline,
+    /// so the semaphore wait cannot block the main thread.
+    private static func loadRemoteImage(uri: String, timeoutSeconds: TimeInterval) -> UIImage? {
+        let cacheKey = uri as NSString
+        if let cached = remoteImageCache.object(forKey: cacheKey) {
+            return cached
+        }
+
+        guard let url = URL(string: uri) else { return nil }
+
+        var request = URLRequest(url: url)
+        request.timeoutInterval = timeoutSeconds
+
+        var resultData: Data?
+        let semaphore = DispatchSemaphore(value: 0)
+        let task = remoteImageSession.dataTask(with: request) { data, _, _ in
+            resultData = data
+            semaphore.signal()
+        }
+        task.resume()
+        if semaphore.wait(timeout: .now() + timeoutSeconds) == .timedOut {
+            task.cancel()
+            return UIImage(systemName: "exclamationmark.circle")
+        }
+
+        guard let data = resultData, let image = UIImage(data: data) else {
+            return UIImage(systemName: "exclamationmark.circle")
+        }
+
+        let cost = Int(image.size.width * image.size.height * image.scale * image.scale * 4)
+        remoteImageCache.setObject(image, forKey: cacheKey, cost: cost)
+        return image
+    }
+
     static func getTintedImageAsset(
         color: NitroColor,
         uiImage: UIImage,