Merge pull request #47 from NielsMasdorp/feature/update_compose

Update compose

app/build.gradle

@@ -14,8 +14,8 @@ android {
         minSdkVersion 26
         //noinspection OldTargetApi
         targetSdkVersion 33
-        versionCode 195
-        versionName "2.3.1"
+        versionCode 196
+        versionName "2.3.2"
     }
     buildTypes {
         release {

app/src/main/java/com/nielsmasdorp/nederadio/ui/NederadioActivity.kt

@@ -1,11 +1,13 @@
 package com.nielsmasdorp.nederadio.ui
 
+import android.app.Activity
 import android.os.Bundle
+import android.view.View
+import android.view.WindowManager
 import androidx.activity.compose.setContent
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.ui.Modifier
-import androidx.core.view.WindowCompat
 import androidx.mediarouter.app.MediaRouteButton
 import com.google.android.gms.cast.framework.CastButtonFactory
 import com.nielsmasdorp.nederadio.ui.theme.AppTheme
@@ -17,7 +19,7 @@ class NederadioActivity : AppCompatActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        WindowCompat.setDecorFitsSystemWindows(window, false)
+        makeStatusBarTransparent()
 
         // Cast button setup
         val castButton = MediaRouteButton(this)
@@ -38,4 +40,15 @@ class NederadioActivity : AppCompatActivity() {
             }
         }
     }
+
+    @Suppress("DEPRECATION")
+    fun Activity.makeStatusBarTransparent() {
+        window.apply {
+            clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
+            addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
+            decorView.systemUiVisibility =
+                View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
+            statusBarColor = android.graphics.Color.TRANSPARENT
+        }
+    }
 }

app/src/main/java/com/nielsmasdorp/nederadio/ui/NederadioApp.kt

@@ -4,16 +4,16 @@ import android.annotation.SuppressLint
 import android.view.View
 import androidx.activity.compose.BackHandler
 import androidx.compose.animation.AnimatedContentScope
+import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.BottomSheetScaffold
-import androidx.compose.material.BottomSheetValue
-import androidx.compose.material.rememberBottomSheetScaffoldState
-import androidx.compose.material.rememberBottomSheetState
+import androidx.compose.material3.BottomSheetScaffold
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SheetValue
+import androidx.compose.material3.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.google.accompanist.navigation.animation.AnimatedNavHost
 import com.google.accompanist.navigation.animation.composable
@@ -25,7 +25,6 @@ import com.nielsmasdorp.nederadio.ui.components.dialog.AboutAppDialog
 import com.nielsmasdorp.nederadio.ui.components.dialog.SleepTimerDialog
 import com.nielsmasdorp.nederadio.ui.equalizer.EqualizerScreen
 import com.nielsmasdorp.nederadio.ui.equalizer.EqualizerViewModel
-import com.nielsmasdorp.nederadio.ui.extension.currentFraction
 import com.nielsmasdorp.nederadio.ui.home.HomeScreen
 import com.nielsmasdorp.nederadio.ui.home.bottomsheet.SheetContent
 import com.nielsmasdorp.nederadio.ui.home.bottomsheet.collapsed.SheetCollapsed
@@ -37,6 +36,8 @@ import com.nielsmasdorp.nederadio.ui.search.SearchViewModel
 import kotlinx.coroutines.launch
 import org.koin.androidx.compose.getViewModel
 
+private const val AnimationDurationMs = 50
+
 /**
  * @author Niels Masdorp (NielsMasdorp)
  */
@@ -53,12 +54,10 @@ fun NederadioApp(
 
     val systemUiController = rememberSystemUiController()
 
-    DisposableEffect(systemUiController) {
-        systemUiController.setSystemBarsColor(
-            color = Color.Transparent,
-            darkIcons = false
-        )
-        onDispose {}
+    val systemBarsColor = MaterialTheme.colorScheme.primary
+
+    LaunchedEffect(systemUiController) {
+        systemUiController.setSystemBarsColor(color = systemBarsColor)
     }
 
     DisposableEffect(key1 = viewModel) {
@@ -68,21 +67,19 @@ fun NederadioApp(
 
     val navController = rememberAnimatedNavController()
     val scope = rememberCoroutineScope()
-    val scaffoldState = rememberBottomSheetScaffoldState(
-        bottomSheetState = rememberBottomSheetState(BottomSheetValue.Collapsed)
-    )
+    val scaffoldState = rememberBottomSheetScaffoldState()
 
     val sheetToggle: () -> Unit = {
         scope.launch {
-            if (scaffoldState.bottomSheetState.isCollapsed) {
+            if (scaffoldState.bottomSheetState.currentValue == SheetValue.PartiallyExpanded) {
                 scaffoldState.bottomSheetState.expand()
             } else {
-                scaffoldState.bottomSheetState.collapse()
+                scaffoldState.bottomSheetState.partialExpand()
             }
         }
     }
 
-    BackHandler(enabled = scaffoldState.bottomSheetState.isExpanded) {
+    BackHandler(enabled = scaffoldState.bottomSheetState.currentValue == SheetValue.Expanded) {
         sheetToggle()
     }
 
@@ -92,7 +89,10 @@ fun NederadioApp(
     val sleepTimer: String? by viewModel.sleepTimer.collectAsState(initial = null)
     val showAboutAppDialog: Boolean by viewModel.showAboutApp.collectAsState(initial = false)
     val showSleepTimerDialog: Boolean by viewModel.showSleepTimer.collectAsState(initial = false)
-
+    val currentBottomSheetFraction: Float by animateFloatAsState(
+        targetValue = if (scaffoldState.bottomSheetState.targetValue == SheetValue.Expanded) 0f else 1f,
+        animationSpec = tween(durationMillis = AnimationDurationMs, easing = FastOutSlowInEasing)
+    )
     EventHandler(event = viewModel.errorState.error) {
         scaffoldState.snackbarHostState.showSnackbar(message = it)
     }
@@ -109,29 +109,30 @@ fun NederadioApp(
     }
 
     BottomSheetScaffold(
-        modifier = modifier
-            .fillMaxSize(),
+        modifier = modifier.fillMaxSize(),
         scaffoldState = scaffoldState,
-        sheetElevation = if (activeStream is ActiveStream.Filled) 12.dp else 0.dp,
-        backgroundColor = MaterialTheme.colorScheme.primary,
+        sheetContainerColor = MaterialTheme.colorScheme.primary,
+        sheetDragHandle = null,
         sheetContent = {
             SheetContent {
                 SheetExpanded(
+                    currentFraction = currentBottomSheetFraction,
                     content = {
                         StreamViewLarge(
                             playerControls = largePlayerControls,
                             activeStream = activeStream,
                             sleepTimer = sleepTimer,
                             onCollapseClick = { sheetToggle() },
                             onTimerClicked = viewModel::onTimerPicked,
-                            onStreamFavoriteStatusChanged = viewModel::onStreamFavoriteChanged,
-                            currentFraction = scaffoldState.currentFraction
+                            onStreamFavoriteStatusChanged = viewModel::onStreamFavoriteChanged
                         )
                     }
                 )
                 SheetCollapsed(
-                    isEnabled = scaffoldState.bottomSheetState.isCollapsed && activeStream is ActiveStream.Filled,
-                    currentFraction = scaffoldState.currentFraction,
+                    isEnabled = scaffoldState.bottomSheetState.currentValue ==
+                        SheetValue.PartiallyExpanded &&
+                        activeStream is ActiveStream.Filled,
+                    currentFraction = currentBottomSheetFraction,
                     onSheetClick = { sheetToggle() },
                     activeStream = activeStream
                 ) { currentStream ->
@@ -143,18 +144,44 @@ fun NederadioApp(
                 }
             }
         },
-        sheetPeekHeight = 72.dp +
+        sheetPeekHeight = 80.dp +
             WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding(),
-        sheetGesturesEnabled = false
+        sheetSwipeEnabled = false
     ) {
         AnimatedNavHost(
             navController = navController,
             startDestination = "home",
             route = "route"
         ) {
-            composable("home") {
+            composable(
+                "home",
+                enterTransition = {
+                    slideIntoContainer(
+                        towards = AnimatedContentScope.SlideDirection.Up,
+                        animationSpec = tween(delayMillis = AnimationDurationMs)
+                    )
+                },
+                exitTransition = {
+                    slideOutOfContainer(
+                        towards = AnimatedContentScope.SlideDirection.Up,
+                        animationSpec = tween(delayMillis = AnimationDurationMs)
+                    )
+                },
+                popEnterTransition = {
+                    slideIntoContainer(
+                        towards = AnimatedContentScope.SlideDirection.Down,
+                        animationSpec = tween(delayMillis = AnimationDurationMs)
+                    )
+                },
+                popExitTransition = {
+                    slideOutOfContainer(
+                        towards = AnimatedContentScope.SlideDirection.Down,
+                        animationSpec = tween(delayMillis = AnimationDurationMs)
+                    )
+                }
+            ) {
                 HomeScreen(
-                    modifier = Modifier.statusBarsPadding(),
+                    modifier = Modifier.fillMaxSize(),
                     castButton = castButton,
                     streams = streams,
                     activeStream = activeStream,
@@ -170,25 +197,25 @@ fun NederadioApp(
                 "search",
                 enterTransition = {
                     slideIntoContainer(
-                        AnimatedContentScope.SlideDirection.Up,
-                        animationSpec = tween(200)
+                        towards = AnimatedContentScope.SlideDirection.Up,
+                        animationSpec = tween(delayMillis = AnimationDurationMs)
                     )
                 },
                 exitTransition = {
                     slideOutOfContainer(
-                        AnimatedContentScope.SlideDirection.Down,
-                        animationSpec = tween(200)
+                        towards = AnimatedContentScope.SlideDirection.Down,
+                        animationSpec = tween(delayMillis = AnimationDurationMs)
                     )
                 }
             ) {
                 val searchViewModel = getViewModel<SearchViewModel>(
                     viewModelStoreOwner = navController.getBackStackEntry("route")
                 )
                 SearchScreen(
-                    modifier = Modifier.statusBarsPadding(),
+                    modifier = Modifier.fillMaxSize(),
                     viewModel = searchViewModel,
                     onExitSearch = { navController.popBackStack() },
-                    backPressHandler = if (scaffoldState.bottomSheetState.isExpanded) {
+                    backPressHandler = if (scaffoldState.bottomSheetState.currentValue == SheetValue.Expanded) {
                         { sheetToggle() }
                     } else null
                 )
@@ -197,25 +224,25 @@ fun NederadioApp(
                 "equalizer",
                 enterTransition = {
                     slideIntoContainer(
-                        AnimatedContentScope.SlideDirection.Up,
-                        animationSpec = tween(200)
+                        towards = AnimatedContentScope.SlideDirection.Up,
+                        animationSpec = tween(delayMillis = AnimationDurationMs)
                     )
                 },
                 exitTransition = {
                     slideOutOfContainer(
-                        AnimatedContentScope.SlideDirection.Down,
-                        animationSpec = tween(200)
+                        towards = AnimatedContentScope.SlideDirection.Down,
+                        animationSpec = tween(delayMillis = AnimationDurationMs)
                     )
                 }
             ) {
                 val equalizerViewModel = getViewModel<EqualizerViewModel>(
                     viewModelStoreOwner = navController.getBackStackEntry("route")
                 )
                 EqualizerScreen(
-                    modifier = Modifier.statusBarsPadding(),
+                    modifier = Modifier.fillMaxSize(),
                     viewModel = equalizerViewModel,
                     onExitEqualizer = { navController.popBackStack() },
-                    backPressHandler = if (scaffoldState.bottomSheetState.isExpanded) {
+                    backPressHandler = if (scaffoldState.bottomSheetState.currentValue == SheetValue.Expanded) {
                         { sheetToggle() }
                     } else null
                 )

app/src/main/java/com/nielsmasdorp/nederadio/ui/components/StreamsGrid.kt

@@ -34,12 +34,11 @@ fun StreamsGrid(
 
     Surface(
         modifier = modifier
-            .fillMaxSize()
-            .padding(bottom = 72.dp),
+            .fillMaxSize(),
         color = MaterialTheme.colorScheme.primaryContainer,
     ) {
         if (streams.isEmpty()) {
-            Box(modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                 EmptyView(
                     title = stringResource(id = R.string.streams_overview_no_streams_found),
                     tint = MaterialTheme.colorScheme.onPrimaryContainer
@@ -52,7 +51,7 @@ fun StreamsGrid(
                     start = 16.dp,
                     end = 16.dp,
                     top = 16.dp,
-                    bottom = 40.dp
+                    bottom = 96.dp
                 ),
                 verticalArrangement = Arrangement.spacedBy(12.dp),
                 horizontalArrangement = Arrangement.spacedBy(12.dp)

app/src/main/java/com/nielsmasdorp/nederadio/ui/equalizer/EqualizerScreen.kt

@@ -92,7 +92,7 @@ fun EqualizerScreen(
             Box(
                 modifier = modifier
                     .padding(innerPadding)
-                    .padding(bottom = 72.dp)
+                    .padding(bottom = 80.dp)
                     .background(MaterialTheme.colorScheme.background)
             ) {
                 when (val data = state) {

app/src/main/java/com/nielsmasdorp/nederadio/ui/home/HomeScreen.kt

@@ -2,7 +2,7 @@ package com.nielsmasdorp.nederadio.ui.home
 
 import android.view.View
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -34,8 +34,9 @@ fun HomeScreen(
 
     val pagerState = rememberPagerState()
 
-    Column(modifier = modifier.fillMaxSize()) {
+    Column(modifier = modifier) {
         TopBar(
+            modifier = Modifier.statusBarsPadding(),
             castButton = castButton,
             showCastButton = activeStream is ActiveStream.Filled,
             onAboutClicked = onAbout,

app/src/main/java/com/nielsmasdorp/nederadio/ui/home/bottomsheet/collapsed/SheetCollapsed.kt

@@ -34,8 +34,8 @@ fun SheetCollapsed(
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .graphicsLayer(alpha = 1f - currentFraction)
-            .height(72.dp)
+            .graphicsLayer(alpha = currentFraction)
+            .height(80.dp)
             .background(background)
             .clickable(
                 onClick = onSheetClick,

app/src/main/java/com/nielsmasdorp/nederadio/ui/home/bottomsheet/collapsed/StreamViewSmall.kt

@@ -66,7 +66,7 @@ fun StreamScreenSmall(
             Row(
                 modifier = modifier
                     .fillMaxSize()
-                    .padding(8.dp),
+                    .padding(16.dp),
                 verticalAlignment = Alignment.CenterVertically
             ) {
                 Card(