diff --git a/common/compose-ui/build.gradle.kts b/common/compose-ui/build.gradle.kts index 45d9d490..465077c5 100644 --- a/common/compose-ui/build.gradle.kts +++ b/common/compose-ui/build.gradle.kts @@ -12,7 +12,7 @@ kotlin { dependencies { implementation(compose.materialIconsExtended) implementation(project(":common:dependency-injection")) - implementation("com.alialbaali.kamel:kamel-image:0.0.7") + //implementation("com.alialbaali.kamel:kamel-image:0.1.0") implementation(project(":common:data-models")) implementation(project(":common:database")) implementation(SqlDelight.coroutineExtensions) @@ -23,4 +23,4 @@ kotlin { } } } -} \ No newline at end of file +} diff --git a/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/main/SpotiFlyerMainUi.kt b/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/main/SpotiFlyerMainUi.kt index eba4e3ad..35146168 100644 --- a/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/main/SpotiFlyerMainUi.kt +++ b/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/main/SpotiFlyerMainUi.kt @@ -324,13 +324,6 @@ fun DownloadRecordItem( onItemClicked:(String)->Unit ) { Row(verticalAlignment = Alignment.CenterVertically,modifier = Modifier.fillMaxWidth().padding(end = 8.dp)) { - /*KamelImage( - lazyImageResource(item.coverUrl), - "Album Art", - modifier = Modifier.height(75.dp).width(90.dp), - crossfade = true, - onLoading = { PlaceHolderImage() } - )*/ ImageLoad( { loadImage(item.coverUrl) }, "Album Art", diff --git a/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/root/SpotiFlyerRootUi.kt b/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/root/SpotiFlyerRootUi.kt index 62956f56..16676bd6 100644 --- a/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/root/SpotiFlyerRootUi.kt +++ b/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/root/SpotiFlyerRootUi.kt @@ -1,14 +1,18 @@ package com.shabinder.common.root +import androidx.compose.animation.core.* +import androidx.compose.animation.core.Spring.StiffnessLow import androidx.compose.foundation.Image import androidx.compose.foundation.layout.* import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.material.TopAppBar -import androidx.compose.runtime.Composable +import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.alpha import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.arkivanov.decompose.extensions.compose.jetbrains.Children import com.shabinder.common.list.SpotiFlyerListContent @@ -16,24 +20,61 @@ import com.shabinder.common.main.SpotiFlyerMainContent import com.shabinder.common.root.SpotiFlyerRoot.Child import com.shabinder.common.ui.SpotiFlyerLogo import com.shabinder.common.ui.appNameStyle +import com.shabinder.common.ui.splash.* @Composable fun SpotiFlyerRootContent(component: SpotiFlyerRoot):SpotiFlyerRoot { + val transitionState = remember { MutableTransitionState(SplashState.Shown) } + val transition = updateTransition(transitionState) + + val splashAlpha by transition.animateFloat( + transitionSpec = { tween(durationMillis = 100) } + ) { + if (it == SplashState.Shown) 1f else 0f + } + val contentAlpha by transition.animateFloat( + transitionSpec = { tween(durationMillis = 300) } + ) { + if (it == SplashState.Shown) 0f else 1f + } + val contentTopPadding by transition.animateDp( + transitionSpec = { spring(stiffness = StiffnessLow) } + ) { + if (it == SplashState.Shown) 100.dp else 0.dp + } + + Box{ + Splash( + modifier = Modifier.alpha(splashAlpha), + onTimeout = { transitionState.targetState = SplashState.Completed } + ) + MainScreen( + Modifier.alpha(contentAlpha), + contentTopPadding, + component + ) + } + return component +} + +@Composable +fun MainScreen(modifier: Modifier = Modifier, topPadding: Dp = 0.dp,component: SpotiFlyerRoot) { val appBarColor = MaterialTheme.colors.surface Column( - modifier = Modifier.fillMaxSize() - /*.verticalGradientScrim( - color = sharedViewModel.gradientColor.copy(alpha = 0.38f), - color = appBarColor.copy(alpha = 0.38f), - startYPercentage = 0.29f, - endYPercentage = 0f, - )*/ + modifier = modifier.fillMaxSize() + /*.verticalGradientScrim( + color = sharedViewModel.gradientColor.copy(alpha = 0.38f), + color = appBarColor.copy(alpha = 0.38f), + startYPercentage = 0.29f, + endYPercentage = 0f, + )*/ ) { AppBar( backgroundColor = appBarColor, modifier = Modifier.fillMaxWidth() ) + Spacer(Modifier.padding(top = topPadding)) Children( routerState = component.routerState, //TODO animation = crossfade() @@ -44,7 +85,6 @@ fun SpotiFlyerRootContent(component: SpotiFlyerRoot):SpotiFlyerRoot { } } } - return component } @Composable diff --git a/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/ui/ExpectImages.kt b/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/ui/ExpectImages.kt index 04a37e3c..f0004f45 100644 --- a/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/ui/ExpectImages.kt +++ b/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/ui/ExpectImages.kt @@ -2,6 +2,8 @@ package com.shabinder.common.ui import androidx.compose.animation.Crossfade +import androidx.compose.animation.core.snap +import androidx.compose.animation.core.tween import androidx.compose.foundation.Image import androidx.compose.runtime.* import androidx.compose.ui.Modifier @@ -12,14 +14,14 @@ import kotlinx.coroutines.withContext @Composable fun ImageLoad(loader: suspend () -> ImageBitmap?, desc: String = "Album Art", modifier:Modifier = Modifier, placeholder:ImageVector = PlaceHolderImage()) { var pic by remember { mutableStateOf(null) } - Crossfade(pic){ - if(pic == null) Image(placeholder, desc, modifier) else Image(pic!!, desc, modifier) - } LaunchedEffect(loader){ withContext(dispatcherIO) { pic = loader() } } + Crossfade(pic){ + if(pic == null) Image(placeholder, desc, modifier) else Image(pic!!, desc, modifier) + } } @Composable diff --git a/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/ui/splash/Splash.kt b/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/ui/splash/Splash.kt index 286022f5..db831092 100644 --- a/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/ui/splash/Splash.kt +++ b/common/compose-ui/src/commonMain/kotlin/com/shabinder/common/ui/splash/Splash.kt @@ -20,8 +20,6 @@ import androidx.compose.foundation.Image import androidx.compose.foundation.layout.* import androidx.compose.material.Icon import androidx.compose.material.Text -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.BrokenImage import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue @@ -34,7 +32,8 @@ import androidx.compose.ui.unit.sp import com.shabinder.common.ui.* import kotlinx.coroutines.delay -private const val SplashWaitTime: Long = 1100 +private const val SplashWaitTime: Long = 2000 +enum class SplashState { Shown, Completed } @Composable fun Splash(modifier: Modifier = Modifier, onTimeout: () -> Unit) { @@ -46,7 +45,7 @@ fun Splash(modifier: Modifier = Modifier, onTimeout: () -> Unit) { delay(SplashWaitTime) currentOnTimeout() } - Image(imageVector = Icons.Default.BrokenImage/*SpotiFlyerLogo()*/,"SpotiFlyer Logo") + Image(imageVector = SpotiFlyerLogo(),"SpotiFlyer Logo") MadeInIndia(Modifier.align(Alignment.BottomCenter)) } } @@ -69,7 +68,7 @@ fun MadeInIndia( fontSize = 22.sp ) Spacer(modifier = Modifier.padding(start = 4.dp)) - //Icon(HeartIcon(),"Love",tint = Color.Unspecified) + Icon(HeartIcon(),"Love",tint = Color.Unspecified) Spacer(modifier = Modifier.padding(start = 4.dp)) Text( text = " in India",