Fix CollapsedPlayerView UI being obsecured by navigation buttons

mr3y-the-programmer · Feb 15, 2024 · 8c14519 · 8c14519
1 parent 7043931
commit 8c14519
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/app/src/main/kotlin/com/mr3y/podcaster/ui/screens/HomeScreen.kt b/app/src/main/kotlin/com/mr3y/podcaster/ui/screens/HomeScreen.kt
@@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -53,6 +54,7 @@ import androidx.navigation.compose.rememberNavController
 import com.kiwi.navigationcompose.typed.createRoutePattern
 import com.kiwi.navigationcompose.typed.navigate
 import com.mr3y.podcaster.LocalStrings
+import com.mr3y.podcaster.ui.components.plus
 import com.mr3y.podcaster.ui.navigation.Destinations
 import com.mr3y.podcaster.ui.navigation.PodcasterNavGraph
 import com.mr3y.podcaster.ui.presenter.PodcasterAppState
@@ -157,7 +159,8 @@ fun HomeScreen(
             val density = LocalDensity.current
             val expandedPlayerViewHeight = maxHeight
             val collapsedPlayerViewHeight = 104.dp
-            val collapsedPlayerViewOffset = with(density) { expandedPlayerViewHeight.toPx() - collapsedPlayerViewHeight.toPx() }
+            val collapsedPlayerViewBottomInsets = WindowInsets.navigationBars
+            val collapsedPlayerViewOffset = with(density) { expandedPlayerViewHeight.toPx() - collapsedPlayerViewHeight.toPx() - collapsedPlayerViewBottomInsets.getBottom(this) }
 
             val anchors = DraggableAnchors {
                 PlayerViewState.Expanded at 0f
@@ -191,16 +194,16 @@ fun HomeScreen(
                     }
                 }
             }
-            val playerViewBottomInsets = WindowInsets.navigationBars
+
             PodcasterNavGraph(
                 navController = navController,
                 onNavDrawerClick = {
                     scope.launch { drawerState.open() }
                 },
                 appState = appState,
                 userPreferences = userPreferences,
-                contentPadding = PaddingValues(bottom = if (currentlyPlayingEpisode != null) collapsedPlayerViewHeight else 0.dp),
-                excludedWindowInsets = if (currentlyPlayingEpisode != null) playerViewBottomInsets else null,
+                contentPadding = PaddingValues(bottom = if (currentlyPlayingEpisode != null) collapsedPlayerViewHeight else 0.dp) + collapsedPlayerViewBottomInsets.asPaddingValues(density),
+                excludedWindowInsets = if (currentlyPlayingEpisode != null) collapsedPlayerViewBottomInsets else null,
             )
             currentlyPlayingEpisode?.let { activeEpisode ->
                 val isCollapsed = state.targetValue == PlayerViewState.Collapsed
@@ -231,7 +234,7 @@ fun HomeScreen(
                             onResume = appState::resume,
                             onPause = appState::pause,
                             progress = trackProgress,
-                            contentWindowInsets = playerViewBottomInsets,
+                            contentWindowInsets = collapsedPlayerViewBottomInsets,
                             containerColor = containerColor,
                         )
                     } else {

diff --git a/app/src/main/kotlin/com/mr3y/podcaster/ui/screens/PlayerViewScreen.kt b/app/src/main/kotlin/com/mr3y/podcaster/ui/screens/PlayerViewScreen.kt
@@ -17,14 +17,13 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.CornerSize
@@ -343,8 +342,8 @@ fun CollapsedPlayerView(
     ) {
         Column(
             modifier = Modifier
-                .fillMaxWidth()
-                .windowInsetsPadding(contentWindowInsets),
+                .padding(contentWindowInsets.asPaddingValues())
+                .fillMaxWidth(),
         ) {
             Row(
                 verticalAlignment = Alignment.CenterVertically,
@@ -399,7 +398,6 @@ fun CollapsedPlayerView(
             val progressColor = MaterialTheme.colorScheme.primaryTertiary
             Box(
                 modifier = Modifier
-                    .padding(bottom = 8.dp)
                     .fillMaxWidth()
                     .height(8.dp)
                     .background(MaterialTheme.colorScheme.inverseSurface.copy(alpha = 0.45f))