Skip to content

Commit

Permalink
Refactor: Migrate to Glide for image loading and update dependencies
Browse files Browse the repository at this point in the history
This commit refactors the image loading logic to use Glide instead of Coil in several areas and updates related dependencies.

- Replaced Coil with Glide for image loading in `NotificationFragment`, `SettingsFragment`, `OtakuCustomListScreen`, `ImportListScreen`, `ViewVideosFragment`, `CoverCard`, and `OtakuComposableUtils`.
- Created new composables `CustomGlideImage`, `CoilImage` and `ImageLoaderChoice` to manage image loading using Glide and Coil.
- Updated dependencies:
    - Added `coilOkHttp` dependency.
- Removed lifecycle from image requests.
- Added `httpHeaders` for image requests.
- Added NetworkHeaders in the `ReaderComposeImage`.
- Updated Glide to version 1.0.3.
- Updated `landscapist-glide` to version 2.3.2.
- Updated `androidx.lifecycle:lifecycle-compose` to version 2.7.0.
- Replaced `SubcomposeAsyncImage` with `GlideImage` where appropriate.
- Updated the placeholder handling to use `rememberDrawablePainter`.
- Improved code organization by creating specific composables for different image loading scenarios.
- Removed unnecessary image request builders.
- Updated `libs.versions.toml`.
  • Loading branch information
jacobrein committed Feb 5, 2025
1 parent ab8ab88 commit 92651b6
Show file tree
Hide file tree
Showing 14 changed files with 236 additions and 162 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,21 @@ import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.LocalLifecycleOwner
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade
import coil3.request.error
import coil3.request.lifecycle
import coil3.request.placeholder
import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
import com.programmersbox.uiviews.presentation.components.imageloaders.ImageLoaderChoice
import com.programmersbox.uiviews.utils.ComponentState
import com.programmersbox.uiviews.utils.ComposableUtils
import com.programmersbox.uiviews.utils.bounceClick
import com.programmersbox.uiviews.utils.combineClickableWithIndication
import com.programmersbox.uiviews.utils.sharedelements.OtakuImageElement
import com.programmersbox.uiviews.utils.sharedelements.OtakuTitleElement
import com.programmersbox.uiviews.utils.sharedelements.customSharedElement
import com.skydoves.landscapist.rememberDrawablePainter

@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun M3CoverCard(
imageUrl: String,
Expand Down Expand Up @@ -86,16 +82,13 @@ fun M3CoverCard(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(imageUrl)
.lifecycle(LocalLifecycleOwner.current)
.crossfade(true)
.placeholder(placeHolder)
.error(error)
.build(),
ImageLoaderChoice(
imageUrl = imageUrl,
headers = headers,
name = name,
placeHolder = placeHolder,
error = error,
contentScale = ContentScale.FillBounds,
contentDescription = name,
modifier = Modifier.matchParentSize()
)

Expand Down Expand Up @@ -154,16 +147,13 @@ fun M3ImageCard(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(imageUrl)
.lifecycle(LocalLifecycleOwner.current)
.crossfade(true)
.placeholder(placeHolder)
.error(error)
.build(),
ImageLoaderChoice(
imageUrl = imageUrl,
headers = headers,
placeHolder = placeHolder,
error = error,
contentScale = ContentScale.FillBounds,
contentDescription = name,
name = name,
modifier = Modifier.matchParentSize()
)

Expand Down Expand Up @@ -240,16 +230,13 @@ fun M3CoverCard(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(imageUrl)
.lifecycle(LocalLifecycleOwner.current)
.crossfade(true)
.placeholder(placeHolder)
.error(error)
.build(),
ImageLoaderChoice(
imageUrl = imageUrl,
contentScale = ContentScale.FillBounds,
contentDescription = name,
name = name,
headers = headers,
placeHolder = rememberDrawablePainter(placeHolder),
error = rememberDrawablePainter(error),
modifier = Modifier
.matchParentSize()
.customSharedElement(
Expand Down Expand Up @@ -320,16 +307,13 @@ fun M3CoverCard(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(imageUrl)
.lifecycle(LocalLifecycleOwner.current)
.crossfade(true)
.placeholder(placeHolder)
.error(error)
.build(),
ImageLoaderChoice(
imageUrl = imageUrl,
contentScale = ContentScale.FillBounds,
contentDescription = name,
name = name,
headers = headers,
placeHolder = rememberDrawablePainter(placeHolder),
error = rememberDrawablePainter(error),
modifier = Modifier
.matchParentSize()
.customSharedElement(
Expand Down Expand Up @@ -397,16 +381,13 @@ fun M3CoverCard2(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(imageUrl)
.lifecycle(LocalLifecycleOwner.current)
.crossfade(true)
.placeholder(placeHolder)
.error(error)
.build(),
ImageLoaderChoice(
imageUrl = imageUrl,
contentScale = ContentScale.FillBounds,
contentDescription = name,
name = name,
headers = headers,
placeHolder = placeHolder,
error = error,
modifier = Modifier
.matchParentSize()
.customSharedElement(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import coil3.compose.AsyncImagePainter
import com.bumptech.glide.integration.compose.CrossFade
import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
Expand Down Expand Up @@ -86,7 +87,7 @@ fun CoilGradientImage(
scaleY: Float = 1.5f,
) {
Box {
if (model.state.value is AsyncImagePainter.State.Success) {
if (model.state.collectAsStateWithLifecycle().value is AsyncImagePainter.State.Success) {
Image(
painter = model,
contentDescription = contentDescription,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
package com.programmersbox.uiviews.presentation.components.imageloaders

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import coil3.compose.AsyncImage
import coil3.network.NetworkHeaders
import coil3.network.httpHeaders
import coil3.request.ImageRequest
import coil3.request.crossfade
import coil3.request.error
import coil3.request.placeholder

@Composable
fun CoilImage(
imageUrl: String,
headers: Map<String, Any> = emptyMap(),
name: String,
placeHolder: Int,
modifier: Modifier = Modifier,
error: Int = placeHolder,
contentScale: ContentScale = ContentScale.FillBounds,
) {
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(imageUrl)
.crossfade(true)
.httpHeaders(
NetworkHeaders
.Builder()
.apply { headers.forEach { add(it.key, it.value.toString()) } }
.build()
)
.placeholder(placeHolder)
.error(error)
.build(),
contentScale = contentScale,
contentDescription = name,
modifier = modifier
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
package com.programmersbox.uiviews.presentation.components.imageloaders

import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import com.bumptech.glide.load.model.GlideUrl
import com.skydoves.landscapist.ImageOptions
import com.skydoves.landscapist.glide.GlideImage

@Composable
fun CustomGlideImage(
imageUrl: String,
name: String,
modifier: Modifier = Modifier,
headers: Map<String, Any> = emptyMap(),
placeHolder: Int,
error: Int = placeHolder,
contentScale: ContentScale = ContentScale.FillBounds,
) {
val url = remember(imageUrl) { GlideUrl(imageUrl) { headers.mapValues { it.value.toString() } } }

GlideImage(
imageModel = { url },
imageOptions = ImageOptions(
contentScale = contentScale,
contentDescription = name,
),
loading = {
Image(painter = painterResource(placeHolder), contentDescription = name)
},
failure = {
Image(painter = painterResource(error), contentDescription = name)
},
modifier = modifier
)
}

@Composable
fun CustomGlideImage(
imageUrl: String,
name: String,
modifier: Modifier = Modifier,
headers: Map<String, Any> = emptyMap(),
placeHolder: Painter,
error: Painter = placeHolder,
contentScale: ContentScale = ContentScale.FillBounds,
) {
val url = remember(imageUrl) { GlideUrl(imageUrl) { headers.mapValues { it.value.toString() } } }

GlideImage(
imageModel = { url },
imageOptions = ImageOptions(
contentScale = contentScale,
contentDescription = name,
),
loading = {
Image(painter = placeHolder, contentDescription = name)
},
failure = {
Image(painter = error, contentDescription = name)
},
modifier = modifier
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
package com.programmersbox.uiviews.presentation.components.imageloaders

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.layout.ContentScale

@Composable
fun ImageLoaderChoice(
imageUrl: String,
name: String,
modifier: Modifier = Modifier,
headers: Map<String, Any> = emptyMap(),
placeHolder: Int,
error: Int = placeHolder,
contentScale: ContentScale = ContentScale.FillBounds,
) {
CustomGlideImage(
imageUrl = imageUrl,
name = name,
modifier = modifier,
headers = headers,
placeHolder = placeHolder,
error = error,
contentScale = contentScale,
)
}

@Composable
fun ImageLoaderChoice(
imageUrl: String,
name: String,
modifier: Modifier = Modifier,
headers: Map<String, Any> = emptyMap(),
placeHolder: Painter,
error: Painter = placeHolder,
contentScale: ContentScale = ContentScale.FillBounds,
) {
CustomGlideImage(
imageUrl = imageUrl,
name = name,
modifier = modifier,
headers = headers,
placeHolder = placeHolder,
error = error,
contentScale = contentScale,
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -50,21 +50,17 @@ import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.LocalLifecycleOwner
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.createSavedStateHandle
import androidx.lifecycle.viewmodel.compose.viewModel
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade
import coil3.request.lifecycle
import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
import com.google.accompanist.drawablepainter.rememberDrawablePainter
import com.programmersbox.favoritesdatabase.CustomListInfo
import com.programmersbox.favoritesdatabase.ListDao
import com.programmersbox.sharedutils.AppLogo
import com.programmersbox.uiviews.R
import com.programmersbox.uiviews.presentation.components.NormalOtakuScaffold
import com.programmersbox.uiviews.presentation.components.imageloaders.ImageLoaderChoice
import com.programmersbox.uiviews.theme.LocalCustomListDao
import com.programmersbox.uiviews.utils.BackButton
import com.programmersbox.uiviews.utils.ComposableUtils
Expand Down Expand Up @@ -226,16 +222,12 @@ private fun CustomItem(
.padding(horizontal = 4.dp)
) {
Row {
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(item.imageUrl)
.lifecycle(LocalLifecycleOwner.current)
.crossfade(true)
.build(),
placeholder = rememberDrawablePainter(logoDrawable),
ImageLoaderChoice(
imageUrl = item.imageUrl,
placeHolder = rememberDrawablePainter(logoDrawable),
error = rememberDrawablePainter(logoDrawable),
contentScale = ContentScale.Crop,
contentDescription = item.title,
name = item.title,
modifier = Modifier
.align(Alignment.CenterVertically)
.size(ComposableUtils.IMAGE_WIDTH, ComposableUtils.IMAGE_HEIGHT)
Expand Down
Loading

0 comments on commit 92651b6

Please sign in to comment.