kotlin-multiplatformktorkoinkotlin-multiplatform-mobilecoil

How to share HttpClient between Multiplatform Ktor and Coil?


I want to use Coil image library to load images from the api with the same cookie that was set before. Therefore I want to use the same HttpClient both for my Ktor networking calls and for Image Loading with Coil.

How can I share the same HttpClient between Ktor and Coil? I assume, I need to adjust dependencies somehow, but I can't wrap my head around it.

My KtorApiImpl in shared module

class KtorApiImpl(log: Kermit) : KtorApi {
val baseUrl = BuildKonfig.baseUrl

// If this is a constructor property, then it gets captured
// inside HttpClient config and freezes this whole class.
@Suppress("CanBePrimaryConstructorProperty")
private val log = log

override val client = HttpClientProvider().getHttpClient().config {
    install(JsonFeature) {
        serializer = KotlinxSerializer()
    }
    install(Logging) {
        logger = object : Logger {
            override fun log(message: String) {
                log.v("Network") { message }
            }
        }

        level = LogLevel.INFO
    }
}

init {
    ensureNeverFrozen()
}

override fun HttpRequestBuilder.apiUrl(path: String) {
    url {
        takeFrom(baseUrl)
        encodedPath = path
    }
}

override fun HttpRequestBuilder.json() {
    contentType(ContentType.Application.Json)
}

}

actual HttpClientProvider in androidMain

var cookieJar: CookieJar = object : CookieJar {
    private val cookieStore: HashMap<String, List<Cookie>> = HashMap()

    override fun saveFromResponse(url: HttpUrl, cookies: List<Cookie>) {
        cookieStore[url.host] = cookies
    }

    override fun loadForRequest(url: HttpUrl): List<Cookie> {
        val cookies = cookieStore[url.host]
        return cookies ?: ArrayList()
    }
}


actual class HttpClientProvider actual constructor() {
    actual fun getHttpClient(): HttpClient {
        return HttpClient(OkHttp) {
            engine {
                preconfigured = getOkHttpClient()
            }
        }
    }
}

private fun getOkHttpClient(): OkHttpClient {
    return OkHttpClient.Builder()
        .cookieJar(cookieJar)
        .build()
}

ImageLoaderFactory in androidApp - how to use an HttpClient instead of creating new?

class CoilImageLoaderFactory(private val context: Context) : ImageLoaderFactory {
    override fun newImageLoader(): ImageLoader {
        return ImageLoader.Builder(context)
            .availableMemoryPercentage(0.25) // Use 25% of the application's available memory.
            .crossfade(true) // Show a short crossfade when loading images from network or disk.
            .componentRegistry {
                add(ByteArrayFetcher())
            }
            .okHttpClient {
                // Create a disk cache with "unlimited" size. Don't do this in production.
                // To create the an optimized Coil disk cache, use CoilUtils.createDefaultCache(context).
                val cacheDirectory = File(context.filesDir, "image_cache").apply { mkdirs() }
                val cache = Cache(cacheDirectory, Long.MAX_VALUE)

                // Lazily create the OkHttpClient that is used for network operations.
                OkHttpClient.Builder()
                    .cache(cache)
                    .build()
            }
            .build()
    }

}

Koin dependencies in androidApp

@Suppress("unused")
class MainApp : Application() {

    override fun onCreate() {
        super.onCreate()
        initKoin(
        module {
            single<Context> { this@MainApp }
            single<AppInfo> { AndroidAppInfo }
            single { CoilImageLoaderFactory(get<Context>())}
            single<SharedPreferences> {
                get<Context>().getSharedPreferences("MAIN_SETTINGS", Context.MODE_PRIVATE)
            }
            single {
                { Log.i("Startup", "Hello from Android/Kotlin!") }
            }
        }
        )
    }
}

And then Main Activity

class MainActivity : AppCompatActivity() { 
    val loaderFactory: CoilImageLoaderFactory by inject()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CompositionLocalProvider(LocalImageLoader provides loaderFactory.newImageLoader()) {
                MainTheme {
                    ProvideWindowInsets {
                        Surface {
                            MainScreen()
                        }
                    }
                }
            }
        }
    }
}

Solution

  • I accessed the OkHttpClient from ImageLoader with

    class CoilImageLoaderFactory(private val context: Context) : ImageLoaderFactory, KoinComponent {
    val ktorApiImpl: KtorApi by inject()
    
    override fun newImageLoader(): ImageLoader {
        return ImageLoader.Builder(context)
            .componentRegistry {
                add(ByteArrayFetcher())
            }
            .okHttpClient {
                val config = ktorApiImpl.client.engine.config as OkHttpConfig
                config.preconfigured as OkHttpClient
                
            }
    
    
            .build()
    }