fix: align portrait player controls

Author: Priveetee

app/src/androidTest/java/dev/typetype/android/feature/player/components/PlayerControlsLayoutTest.kt

@@ -5,6 +5,7 @@ import androidx.activity.ComponentActivity
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.test.junit4.v2.createAndroidComposeRule
 import androidx.compose.ui.test.onNodeWithTag
 import androidx.compose.ui.unit.dp
@@ -15,6 +16,7 @@ import androidx.media3.common.Tracks
 import androidx.media3.common.VideoSize
 import androidx.test.ext.junit.runners.AndroidJUnit4
 import java.lang.reflect.Proxy
+import org.junit.Assert.assertEquals
 import org.junit.Assert.assertTrue
 import org.junit.Rule
 import org.junit.Test
@@ -29,7 +31,11 @@ class PlayerControlsLayoutTest {
     fun portraitControlsDoNotOverlapInsideShortVideoViewport() {
         val player = controlsLayoutPlayer()
         composeRule.setContent {
-            Box(Modifier.size(width = 360.dp, height = 202.dp)) {
+            Box(
+                Modifier
+                    .size(width = 360.dp, height = 202.dp)
+                    .testTag(PLAYER_CONTROLS_VIEWPORT_TAG),
+            ) {
                 PlayerControls(
                     player = player,
                     title = "Portrait controls",
@@ -50,9 +56,14 @@ class PlayerControlsLayoutTest {
         val bottom = composeRule.onNodeWithTag(PLAYER_BOTTOM_CONTROLS_TAG, useUnmergedTree = true)
             .fetchSemanticsNode()
             .boundsInRoot
+        val viewport = composeRule.onNodeWithTag(
+            PLAYER_CONTROLS_VIEWPORT_TAG,
+            useUnmergedTree = true,
+        ).fetchSemanticsNode().boundsInRoot
 
         assertTrue("Top controls overlap center controls", top.bottom <= center.top)
         assertTrue("Center controls overlap bottom controls", center.bottom <= bottom.top)
+        assertEquals("Portrait controls stop at the viewport bottom", viewport.bottom, bottom.bottom, 1f)
     }
 }
 

app/src/main/java/dev/typetype/android/feature/player/components/PlayerControls.kt

@@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
@@ -108,13 +107,6 @@ fun PlayerControls(
                 .align(Alignment.BottomCenter)
                 .fillMaxWidth()
                 .testTag(PLAYER_BOTTOM_CONTROLS_TAG)
-                .then(
-                    if (isFullscreen) {
-                        Modifier
-                    } else {
-                        Modifier.windowInsetsPadding(WindowInsets.navigationBars)
-                    },
-                )
                 .padding(
                     start = if (isFullscreen) 12.dp else 4.dp,
                     end = if (isFullscreen) 8.dp else 4.dp,
@@ -185,7 +177,11 @@ private fun BottomBar(
                 },
             )
             .padding(start = if (isFullscreen) 8.dp else 2.dp, end = 2.dp),
-        verticalAlignment = Alignment.CenterVertically,
+        verticalAlignment = if (isFullscreen) {
+            Alignment.CenterVertically
+        } else {
+            Alignment.Bottom
+        },
     ) {
         PlayerTimeBar(
             player = player,
@@ -221,4 +217,5 @@ private fun BottomBar(
 internal const val PLAYER_TOP_CONTROLS_TAG = "player_top_controls"
 internal const val PLAYER_CENTER_CONTROLS_TAG = "player_center_controls"
 internal const val PLAYER_BOTTOM_CONTROLS_TAG = "player_bottom_controls"
+internal const val PLAYER_CONTROLS_VIEWPORT_TAG = "player_controls_viewport"
 private val COMPACT_CONTROLS_HEIGHT = 180.dp

app/src/main/java/dev/typetype/android/feature/player/components/PlayerSurfaceBox.kt

@@ -10,10 +10,7 @@ import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
@@ -301,9 +298,7 @@ internal fun PlayerSurfaceBox(
                         if (isFullscreen) {
                             Modifier.padding(start = 12.dp, end = 8.dp, bottom = 6.dp)
                         } else {
-                            Modifier
-                                .windowInsetsPadding(WindowInsets.navigationBars)
-                                .padding(start = 4.dp, end = 4.dp)
+                            Modifier.padding(start = 4.dp, end = 4.dp)
                         },
                     ),
             )