Skip to content

Commit

Permalink
Move imageview to common component
Browse files Browse the repository at this point in the history
  • Loading branch information
@ishubhamsingh
ishubhamsingh committed Sep 30, 2023
1 parent f704275 commit aa4b715
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 112 deletions.
47 changes: 26 additions & 21 deletions composeApp/src/commonMain/kotlin/dev/ishubhamsingh/splashy/core/navigation/TopLevelScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
Expand All @@ -58,8 +59,10 @@ import dev.ishubhamsingh.splashy.features.categories.ui.CategoriesTab
import dev.ishubhamsingh.splashy.features.favourites.ui.FavouritesTab
import dev.ishubhamsingh.splashy.features.home.ui.HomeTab
import dev.ishubhamsingh.splashy.features.settings.ui.SettingsScreen
import dev.ishubhamsingh.splashy.ui.components.getKamelConfig
import dev.ishubhamsingh.splashy.ui.theme.getLatoRegular
import dev.ishubhamsingh.splashy.ui.theme.getLobsterRegular
import io.kamel.image.config.LocalKamelConfig

/** Created by Shubham Singh on 29/09/23. */
class TopLevelScreen : Screen {
Expand All @@ -69,30 +72,32 @@ class TopLevelScreen : Screen {
val coroutineScope = rememberCoroutineScope()

TabNavigator(HomeTab) {
Scaffold(
topBar = { AppTopBar() },
bottomBar = { BottomNavigationComponent() },
snackbarHost = {
SnackbarHost(hostState = snackBarHostState) {
Snackbar(
containerColor = MaterialTheme.colorScheme.secondaryContainer,
contentColor = MaterialTheme.colorScheme.secondary,
shape = CircleShape,
modifier = Modifier.padding(16.dp)
CompositionLocalProvider(LocalKamelConfig provides getKamelConfig()) {
Scaffold(
topBar = { AppTopBar() },
bottomBar = { BottomNavigationComponent() },
snackbarHost = {
SnackbarHost(hostState = snackBarHostState) {
Snackbar(
containerColor = MaterialTheme.colorScheme.secondaryContainer,
contentColor = MaterialTheme.colorScheme.secondary,
shape = CircleShape,
modifier = Modifier.padding(16.dp)
) {
Text(text = it.visuals.message, fontFamily = getLatoRegular(), fontSize = 16.sp)
}
}
},
content = { paddingValues ->
Surface(
modifier = Modifier.padding(paddingValues),
color = MaterialTheme.colorScheme.surface
) {
Text(text = it.visuals.message, fontFamily = getLatoRegular(), fontSize = 16.sp)
CurrentTab()
}
}
},
content = { paddingValues ->
Surface(
modifier = Modifier.padding(paddingValues),
color = MaterialTheme.colorScheme.surface
) {
CurrentTab()
}
}
)
)
}
}
}

Expand Down
34 changes: 9 additions & 25 deletions ...eApp/src/commonMain/kotlin/dev/ishubhamsingh/splashy/features/details/ui/DetailsScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material3.BottomSheetScaffold
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
Expand All @@ -53,7 +52,6 @@ import androidx.compose.material3.Text
import androidx.compose.material3.rememberBottomSheetScaffoldState
import androidx.compose.material3.rememberStandardBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
Expand Down Expand Up @@ -91,13 +89,12 @@ import dev.ishubhamsingh.splashy.features.details.DetailsScreenModel
import dev.ishubhamsingh.splashy.features.details.WallpaperScreenType
import dev.ishubhamsingh.splashy.models.Photo
import dev.ishubhamsingh.splashy.ui.components.BackButton
import dev.ishubhamsingh.splashy.ui.components.getKamelConfig
import dev.ishubhamsingh.splashy.ui.components.ImageViewComponent
import dev.ishubhamsingh.splashy.ui.components.parseColor
import dev.ishubhamsingh.splashy.ui.theme.getLatoBold
import dev.ishubhamsingh.splashy.ui.theme.getLatoRegular
import io.kamel.image.KamelImage
import io.kamel.image.asyncPainterResource
import io.kamel.image.config.LocalKamelConfig

data class DetailsScreen(val id: String) : Screen {

Expand Down Expand Up @@ -190,17 +187,7 @@ data class DetailsScreen(val id: String) : Screen {
modifier = modifier.fillMaxSize().background(color = Color(parseColor(photo.color))),
verticalArrangement = Arrangement.Center
) {
photo.urls?.regular?.let {
CompositionLocalProvider(LocalKamelConfig provides getKamelConfig(it)) {
KamelImage(
resource = asyncPainterResource(data = it),
contentDescription = photo.altDescription,
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop,
animationSpec = tween()
)
}
}
photo.urls?.regular?.let { ImageViewComponent(it, photo.altDescription) }
}
}

Expand Down Expand Up @@ -251,15 +238,13 @@ data class DetailsScreen(val id: String) : Screen {
) {
Row(verticalAlignment = Alignment.CenterVertically) {
user?.profileImage?.let { profilePic ->
CompositionLocalProvider(LocalKamelConfig provides getKamelConfig(profilePic.medium)) {
KamelImage(
modifier = Modifier.size(36.dp).clip(CircleShape),
resource = asyncPainterResource(data = profilePic.medium),
contentDescription = user.name,
contentScale = ContentScale.Crop,
animationSpec = tween()
)
}
KamelImage(
modifier = Modifier.size(36.dp).clip(CircleShape),
resource = asyncPainterResource(data = profilePic.medium),
contentDescription = user.name,
contentScale = ContentScale.Crop,
animationSpec = tween()
)
}

Spacer(modifier = Modifier.size(16.dp))
Expand Down Expand Up @@ -391,7 +376,6 @@ data class DetailsScreen(val id: String) : Screen {
}
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SheetPhotoDetails(photo: Photo) {
Column(modifier = Modifier.padding(top = 16.dp)) {
Expand Down
95 changes: 29 additions & 66 deletions composeApp/src/commonMain/kotlin/dev/ishubhamsingh/splashy/ui/components/ComposeReusables.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@ import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
Expand Down Expand Up @@ -94,21 +93,19 @@ import dev.ishubhamsingh.splashy.core.presentation.CommonRes
import dev.ishubhamsingh.splashy.features.categoriesPhotos.ui.CategoryType
import dev.ishubhamsingh.splashy.models.Favourite
import dev.ishubhamsingh.splashy.models.Photo
import io.kamel.core.config.DefaultCacheSize
import io.kamel.core.config.KamelConfig
import io.kamel.core.config.httpFetcher
import io.kamel.core.config.takeFrom
import io.kamel.image.KamelImage
import io.kamel.image.asyncPainterResource
import io.kamel.image.config.Default
import io.kamel.image.config.LocalKamelConfig
import io.kamel.image.config.imageBitmapDecoder
import io.ktor.client.plugins.HttpRequestRetry
import io.ktor.client.plugins.defaultRequest
import io.ktor.client.plugins.logging.LogLevel
import io.ktor.client.plugins.logging.Logging
import io.ktor.client.request.header
import io.ktor.http.CacheControl
import io.ktor.http.headersOf
import io.ktor.http.isSuccess
import kotlinx.coroutines.launch

Expand Down Expand Up @@ -253,17 +250,7 @@ fun PhotoCardItem(
val gradient =
Brush.verticalGradient(colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.8f)))
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomStart) {
url?.let {
CompositionLocalProvider(LocalKamelConfig provides getKamelConfig(it)) {
KamelImage(
resource = asyncPainterResource(data = it),
contentDescription = altDescription,
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop,
animationSpec = tween()
)
}
}
url?.let { ImageViewComponent(it, altDescription) }
Box(modifier.matchParentSize().background(gradient), contentAlignment = Alignment.Center) {
Column(
modifier = Modifier.padding(8.dp),
Expand Down Expand Up @@ -295,17 +282,7 @@ fun PhotoCardItem(
}
}
} else {
url?.let {
CompositionLocalProvider(LocalKamelConfig provides getKamelConfig(it)) {
KamelImage(
resource = asyncPainterResource(data = it),
contentDescription = altDescription,
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop,
animationSpec = tween()
)
}
}
url?.let { ImageViewComponent(it, altDescription) }
}
}
}
Expand Down Expand Up @@ -353,17 +330,7 @@ fun CategoriesCardItem(
val gradient =
Brush.verticalGradient(colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.8f)))
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomStart) {
url?.let {
CompositionLocalProvider(LocalKamelConfig provides getKamelConfig(it)) {
KamelImage(
resource = asyncPainterResource(data = it),
contentDescription = altDescription,
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop,
animationSpec = tween()
)
}
}
url?.let { ImageViewComponent(it, altDescription) }
Box(modifier.matchParentSize().background(gradient), contentAlignment = Alignment.Center) {
Column(
modifier = Modifier.padding(8.dp),
Expand Down Expand Up @@ -395,47 +362,43 @@ fun CategoriesCardItem(
}
}
} else {
url?.let {
CompositionLocalProvider(LocalKamelConfig provides getKamelConfig(it)) {
KamelImage(
resource = asyncPainterResource(data = it),
contentDescription = altDescription,
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop,
animationSpec = tween()
)
}
}
url?.let { ImageViewComponent(it, altDescription) }
}
}
}

@Composable
fun getKamelConfig(url: String): KamelConfig {
val kamelConfig = KamelConfig {
takeFrom(KamelConfig.Default)
imageBitmapCacheSize = DefaultCacheSize
imageBitmapDecoder()
fun getKamelConfig() = KamelConfig {
takeFrom(KamelConfig.Default)
imageBitmapCacheSize = 500
imageBitmapDecoder()

httpFetcher {
defaultRequest { url(url) }
httpFetcher {
defaultRequest { header("Cache-Control", "max-age=31536000") }

CacheControl.MaxAge(maxAgeSeconds = 31536)
headersOf("Cache-Control", "max-age=31536000")
CacheControl.MaxAge(maxAgeSeconds = 31536)

install(HttpRequestRetry) {
maxRetries = 3
retryIf { _, httpResponse -> !httpResponse.status.isSuccess() }
}
install(HttpRequestRetry) {
maxRetries = 3
retryIf { _, httpResponse -> !httpResponse.status.isSuccess() }
}

install(Logging) {
logger = KtorLogger()
level = LogLevel.INFO
}
install(Logging) {
logger = KtorLogger()
level = LogLevel.INFO
}
}
}

return kamelConfig
@Composable
fun ImageViewComponent(url: String, altDescription: String?) {
KamelImage(
resource = asyncPainterResource(data = url),
contentDescription = altDescription,
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop,
animationSpec = tween()
)
}

@Composable
Expand Down

0 comments on commit aa4b715

Please sign in to comment.