Splash Implementation

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)

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",

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,13 +20,49 @@ 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()
+        modifier = modifier.fillMaxSize()
         /*.verticalGradientScrim(
         color = sharedViewModel.gradientColor.copy(alpha = 0.38f),
         color = appBarColor.copy(alpha = 0.38f),
@@ -34,6 +74,7 @@ fun SpotiFlyerRootContent(component: SpotiFlyerRoot):SpotiFlyerRoot {
             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

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<ImageBitmap?>(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

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",