feat(image): migrate to Coil 3.6.0 with OkHttp network fetcher (#996)

Co-authored-by: M57 <hy4ri@users.noreply.github.com>

app/build.gradle.kts

@@ -171,9 +171,10 @@ dependencies {
     implementation(libs.latex.parser)
     implementation(libs.latex.renderer)
 
-    // Image loading
+    // Image loading (Coil 3)
     implementation(libs.coil.compose)
     implementation(libs.coil.gif)
+    implementation(libs.coil.network.okhttp)
 
     // Encrypted storage
     implementation(libs.androidx.security.crypto)

app/src/main/java/com/m57/hermescontrol/HermesControlApp.kt

@@ -2,10 +2,13 @@ package com.m57.hermescontrol
 
 import android.app.Application
 import android.os.Build
-import coil.ImageLoader
+import coil3.ImageLoader
-import coil.ImageLoaderFactory
+import coil3.PlatformContext
-import coil.decode.GifDecoder
+import coil3.SingletonImageLoader
-import coil.decode.ImageDecoderDecoder
+import coil3.gif.AnimatedImageDecoder
+import coil3.gif.GifDecoder
+import coil3.network.okhttp.OkHttpNetworkFetcherFactory
+import coil3.request.crossfade
 import com.m57.hermescontrol.data.local.AuthManager
 import com.m57.hermescontrol.data.remote.NetworkMonitor
 import com.m57.hermescontrol.data.remote.OkHttpProvider
@@ -14,7 +17,7 @@ import com.m57.hermescontrol.ui.analytics.AnalyticsPreloader
 
 class HermesControlApp :
     Application(),
-    ImageLoaderFactory {
+    SingletonImageLoader.Factory {
     override fun onCreate() {
         super.onCreate()
         AuthManager.init(this)
@@ -31,13 +34,17 @@ class HermesControlApp :
         UpdateNoticeManager.checkOnLaunch()
     }
 
-    override fun newImageLoader(): ImageLoader =
+    override fun newImageLoader(context: PlatformContext): ImageLoader =
         ImageLoader
-            .Builder(this)
+            .Builder(context)
-            .okHttpClient(OkHttpProvider.base)
             .components {
+                add(
+                    OkHttpNetworkFetcherFactory(
+                        callFactory = { OkHttpProvider.base },
+                    ),
+                )
                 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
-                    add(ImageDecoderDecoder.Factory())
+                    add(AnimatedImageDecoder.Factory())
                 } else {
                     add(GifDecoder.Factory())
                 }

app/src/main/java/com/m57/hermescontrol/ui/chat/ImageViewerDialog.kt

@@ -35,7 +35,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import androidx.compose.ui.window.DialogProperties
-import coil.compose.AsyncImage
+import coil3.compose.AsyncImage
 import com.m57.hermescontrol.R
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch

app/src/main/java/com/m57/hermescontrol/ui/chat/components/ChatComposer.kt

@@ -60,7 +60,7 @@ import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import coil.compose.AsyncImage
+import coil3.compose.AsyncImage
 import com.m57.hermescontrol.R
 import com.m57.hermescontrol.data.model.Attachment
 import com.m57.hermescontrol.data.model.ProfileInfo

app/src/main/java/com/m57/hermescontrol/ui/chat/components/GifImageThumbnail.kt

@@ -25,10 +25,12 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import coil.compose.AsyncImage
+import coil3.asDrawable
+import coil3.compose.AsyncImage
 import com.m57.hermescontrol.R
 
 @Composable
@@ -54,6 +56,7 @@ fun GifImageThumbnail(
         }
     }
 
+    val context = LocalContext.current
     Box(
         modifier =
             modifier
@@ -65,7 +68,7 @@ fun GifImageThumbnail(
             model = model,
             contentDescription = contentDescription,
             onSuccess = { result ->
-                val drawable = result.result.drawable
+                val drawable = result.result.image.asDrawable(context.resources)
                 if (drawable is Animatable) {
                     animatableDrawable = drawable
                     if (isPlaying) {

app/src/main/java/com/m57/hermescontrol/ui/common/BotAvatar.kt

@@ -35,8 +35,9 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import coil.compose.AsyncImage
+import coil3.compose.AsyncImage
-import coil.request.ImageRequest
+import coil3.request.ImageRequest
+import coil3.request.crossfade
 import com.m57.hermescontrol.data.model.BotAvatarMeta
 import com.m57.hermescontrol.theme.StatusGreen
 import com.m57.hermescontrol.theme.parseHexColor

gradle/libs.versions.toml

@@ -25,7 +25,7 @@ retrofit = "3.0.0"
 securityCrypto = "1.0.0"
 mockk = "1.14.11"
 turbine = "1.2.1"
-coil = "2.7.0"
+coil = "3.6.0"
 room = "3.0.2"
 sqlcipher = "4.18.0"
 datastore = "1.1.2"
@@ -86,9 +86,10 @@ latex-base = { module = "io.github.huarangmeng:latex-base", version.ref = "latex
 latex-parser = { module = "io.github.huarangmeng:latex-parser", version.ref = "latex" }
 latex-renderer = { module = "io.github.huarangmeng:latex-renderer", version.ref = "latex" }
 
-# Image loading
+# Image loading (Coil 3)
-coil-compose = { module = "io.coil-kt:coil-compose", version.ref = "coil" }
+coil-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil" }
-coil-gif = { module = "io.coil-kt:coil-gif", version.ref = "coil" }
+coil-gif = { module = "io.coil-kt.coil3:coil-gif", version.ref = "coil" }
+coil-network-okhttp = { module = "io.coil-kt.coil3:coil-network-okhttp", version.ref = "coil" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "androidGradlePlugin" }