Merge pull request #1618 from theovilardo/fix/navbar-disappear-animation

theovilardo · web-flow · commit 296f80a1691d · 2026-04-01T10:13:29.000-03:00
Fix/navbar disappear animation
diff --git a/app/src/main/java/com/theveloper/pixelplay/MainActivity.kt b/app/src/main/java/com/theveloper/pixelplay/MainActivity.kt
@@ -68,6 +68,7 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.platform.LocalDensity
@@ -634,6 +635,50 @@ class MainActivity : ComponentActivity() {
         } else {
             0.dp
         }
+        val animatedBottomBarPadding by animateDpAsState(
+            targetValue = if (navBarStyle == NavBarStyle.FULL_WIDTH) 0.dp else systemNavBarInset,
+            animationSpec = tween(400),
+            label = "BottomBarPadding"
+        )
+        val bottomBarPadding = animatedBottomBarPadding
+        val navBarHeight = if (navBarStyle == NavBarStyle.DEFAULT) {
+            NavBarContentHeight
+        } else {
+            NavBarContentHeightFullWidth + systemNavBarInset
+        }
+        val navBarOccupiedHeight by remember(navBarHeight, bottomBarPadding) {
+            derivedStateOf { navBarHeight + bottomBarPadding }
+        }
+        val navBarVisibilityProgress by animateFloatAsState(
+            targetValue = if (shouldHideNavigationBar) 0f else 1f,
+            animationSpec = tween(
+                durationMillis = 220,
+                easing = LinearOutSlowInEasing
+            ),
+            label = "NavBarVisibilityProgress"
+        )
+        val visibleNavBarOccupiedHeight by remember(navBarOccupiedHeight, navBarVisibilityProgress) {
+            derivedStateOf { navBarOccupiedHeight * navBarVisibilityProgress }
+        }
+        val miniPlayerBottomMargin by remember(systemNavBarInset, visibleNavBarOccupiedHeight) {
+            derivedStateOf {
+                if (visibleNavBarOccupiedHeight > systemNavBarInset) {
+                    visibleNavBarOccupiedHeight
+                } else {
+                    systemNavBarInset
+                }
+            }
+        }
+        val shouldRenderNavigationBar by remember(shouldHideNavigationBar, navBarVisibilityProgress) {
+            derivedStateOf {
+                !shouldHideNavigationBar || navBarVisibilityProgress > 0.01f
+            }
+        }
+        val isNavBarEffectivelyHidden by remember(shouldHideNavigationBar, navBarVisibilityProgress) {
+            derivedStateOf {
+                shouldHideNavigationBar && navBarVisibilityProgress <= 0.01f
+            }
+        }
 
         val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
         val scope = rememberCoroutineScope()
@@ -689,7 +734,7 @@ class MainActivity : ComponentActivity() {
                 Scaffold(
                 modifier = Modifier.fillMaxSize(),
                 bottomBar = {
-                    if (!shouldHideNavigationBar) {
+                    if (shouldRenderNavigationBar) {
                         val playerContentExpansionFraction = playerViewModel.playerContentExpansionFraction.value
                         val currentSongId by remember {
                             playerViewModel.stablePlayerState
@@ -753,13 +798,6 @@ class MainActivity : ComponentActivity() {
                             )
                         }
 
-                        val animatedBottomBarPadding by animateDpAsState(
-                            targetValue = if (navBarStyle == NavBarStyle.FULL_WIDTH) 0.dp else systemNavBarInset,
-                            animationSpec = tween(400),
-                            label = "BottomBarPadding"
-                        )
-                        val bottomBarPadding = animatedBottomBarPadding
-
                         var componentHeightPx by remember { mutableStateOf(0) }
                         val density = LocalDensity.current
                         val shadowOverflowPx = remember(navBarElevation, density) {
@@ -782,26 +820,24 @@ class MainActivity : ComponentActivity() {
                         Box(
                             modifier = Modifier
                                 .fillMaxWidth()
-                                .padding(bottom = bottomBarPadding)
-                                .onSizeChanged { componentHeightPx = it.height }
-                                .graphicsLayer {
-                                    translationY = animatedTranslationY
-                                    alpha = 1f
-                                }
+                                .height(visibleNavBarOccupiedHeight)
+                                .clipToBounds()
                         ) {
-                            val navHeight: Dp = if (navBarStyle == NavBarStyle.DEFAULT) {
-                                NavBarContentHeight
-                            } else {
-                                NavBarContentHeightFullWidth + systemNavBarInset
-                            }
                             val onSearchIconDoubleTap = remember(playerViewModel) {
                                 { playerViewModel.onSearchNavIconDoubleTapped() }
                             }
 
                             Surface(
                                 modifier = Modifier
+                                    .align(Alignment.BottomCenter)
                                     .fillMaxWidth()
-                                    .height(navHeight)
+                                    .padding(bottom = bottomBarPadding)
+                                    .onSizeChanged { componentHeightPx = it.height }
+                                    .graphicsLayer {
+                                        translationY = animatedTranslationY
+                                        alpha = 1f
+                                    }
+                                    .height(navBarHeight)
                                     .padding(horizontal = horizontalPadding),
                                 color = NavigationBarDefaults.containerColor,
                                 shape = actualShape,
@@ -841,7 +877,7 @@ class MainActivity : ComponentActivity() {
                         val miniPlayerH = with(density) { MiniPlayerHeight.toPx() }
                         val totalSheetHeightWhenContentCollapsedPx = if (showPlayerContentInitially && !shouldHideMiniPlayer) miniPlayerH else 0f
 
-                        val bottomMargin = innerPadding.calculateBottomPadding()
+                        val bottomMargin = miniPlayerBottomMargin
 
                         val spacerPx = with(density) { MiniPlayerBottomSpacer.toPx() }
                         val sheetCollapsedTargetY = screenHeightPx - totalSheetHeightWhenContentCollapsedPx - with(density){ bottomMargin.toPx() } - spacerPx
@@ -863,7 +899,7 @@ class MainActivity : ComponentActivity() {
                                 hideMiniPlayer = shouldHideMiniPlayer,
                                 containerHeight = containerHeight,
                                 navController = navController,
-                                isNavBarHidden = shouldHideNavigationBar
+                                isNavBarHidden = isNavBarEffectivelyHidden
                             )
                         } else {
                             UnifiedPlayerSheet(
@@ -873,7 +909,7 @@ class MainActivity : ComponentActivity() {
                                 hideMiniPlayer = shouldHideMiniPlayer,
                                 containerHeight = containerHeight,
                                 navController = navController,
-                                isNavBarHidden = shouldHideNavigationBar
+                                isNavBarHidden = isNavBarEffectivelyHidden
                             )
                         }
 
diff --git a/app/src/main/java/com/theveloper/pixelplay/presentation/components/UnifiedPlayerSheet.kt b/app/src/main/java/com/theveloper/pixelplay/presentation/components/UnifiedPlayerSheet.kt
@@ -61,8 +61,10 @@ import androidx.compose.runtime.key
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.runtime.snapshotFlow
 import com.theveloper.pixelplay.ui.theme.LocalPixelPlayDarkTheme
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -296,8 +298,12 @@ fun UnifiedPlayerSheet(
         )
     }
 
-    LaunchedEffect(sheetCollapsedTargetY) {
-        sheetMotionController.syncToExpansion(sheetCollapsedTargetY)
+    val sheetCollapsedTargetYState = rememberUpdatedState(sheetCollapsedTargetY)
+    LaunchedEffect(sheetMotionController) {
+        snapshotFlow { sheetCollapsedTargetYState.value }
+            .collect { collapsedTargetY ->
+                sheetMotionController.syncToExpansion(collapsedTargetY)
+            }
     }
 
     var previousSheetState by remember { mutableStateOf(currentSheetContentState) }
diff --git a/app/src/main/java/com/theveloper/pixelplay/presentation/components/UnifiedPlayerSheetV2.kt b/app/src/main/java/com/theveloper/pixelplay/presentation/components/UnifiedPlayerSheetV2.kt
@@ -32,7 +32,9 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.draw.shadow
@@ -267,8 +269,12 @@ fun UnifiedPlayerSheetV2(
         )
     }
 
-    LaunchedEffect(sheetCollapsedTargetY) {
-        sheetMotionController.syncToExpansion(sheetCollapsedTargetY)
+    val sheetCollapsedTargetYState = rememberUpdatedState(sheetCollapsedTargetY)
+    LaunchedEffect(sheetMotionController) {
+        snapshotFlow { sheetCollapsedTargetYState.value }
+            .collect { collapsedTargetY ->
+                sheetMotionController.syncToExpansion(collapsedTargetY)
+            }
     }
 
     var previousSheetState by remember { mutableStateOf(currentSheetContentState) }
diff --git a/app/src/main/java/com/theveloper/pixelplay/presentation/components/scoped/PlayerAlbumNavigationEffect.kt b/app/src/main/java/com/theveloper/pixelplay/presentation/components/scoped/PlayerAlbumNavigationEffect.kt
@@ -2,6 +2,8 @@ package com.theveloper.pixelplay.presentation.components.scoped
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.navigation.NavHostController
 import com.theveloper.pixelplay.presentation.navigation.Screen
 import com.theveloper.pixelplay.presentation.navigation.navigateSafely
@@ -15,9 +17,10 @@ internal fun PlayerAlbumNavigationEffect(
     sheetMotionController: SheetMotionController,
     playerViewModel: PlayerViewModel
 ) {
-    LaunchedEffect(navController, sheetCollapsedTargetY) {
+    val latestSheetCollapsedTargetY by rememberUpdatedState(sheetCollapsedTargetY)
+    LaunchedEffect(navController) {
         playerViewModel.albumNavigationRequests.collectLatest { albumId ->
-            sheetMotionController.snapCollapsed(sheetCollapsedTargetY)
+            sheetMotionController.snapCollapsed(latestSheetCollapsedTargetY)
             playerViewModel.collapsePlayerSheet()
 
             navController.navigateSafely(Screen.AlbumDetail.createRoute(albumId)) {
diff --git a/app/src/main/java/com/theveloper/pixelplay/presentation/components/scoped/PlayerArtistNavigationEffect.kt b/app/src/main/java/com/theveloper/pixelplay/presentation/components/scoped/PlayerArtistNavigationEffect.kt
@@ -4,6 +4,8 @@ import com.theveloper.pixelplay.presentation.navigation.navigateSafely
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.navigation.NavHostController
 import com.theveloper.pixelplay.presentation.navigation.Screen
 import com.theveloper.pixelplay.presentation.viewmodel.PlayerViewModel
@@ -16,9 +18,10 @@ internal fun PlayerArtistNavigationEffect(
     sheetMotionController: SheetMotionController,
     playerViewModel: PlayerViewModel
 ) {
-    LaunchedEffect(navController, sheetCollapsedTargetY) {
+    val latestSheetCollapsedTargetY by rememberUpdatedState(sheetCollapsedTargetY)
+    LaunchedEffect(navController) {
         playerViewModel.artistNavigationRequests.collectLatest { artistId ->
-            sheetMotionController.snapCollapsed(sheetCollapsedTargetY)
+            sheetMotionController.snapCollapsed(latestSheetCollapsedTargetY)
             playerViewModel.collapsePlayerSheet()
 
             navController.navigateSafely(Screen.ArtistDetail.createRoute(artistId)) {
