Improve position of video controlling buttons when top bars are present.

app/src/main/java/com/vitorpamplona/amethyst/ui/components/VideoView.kt

@@ -29,6 +29,7 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.State
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
@@ -44,12 +45,11 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.LayoutCoordinates
 import androidx.compose.ui.layout.boundsInWindow
 import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.isFinite
 import androidx.compose.ui.unit.isSpecified
@@ -71,6 +71,7 @@ import com.vitorpamplona.amethyst.ui.note.MuteIcon
 import com.vitorpamplona.amethyst.ui.note.MutedIcon
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
 import com.vitorpamplona.amethyst.ui.theme.PinBottomIconSize
+import com.vitorpamplona.amethyst.ui.theme.Size0dp
 import com.vitorpamplona.amethyst.ui.theme.Size22Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size50Modifier
 import com.vitorpamplona.amethyst.ui.theme.VolumeBottomIconSize
@@ -536,23 +537,16 @@ private fun RenderVideoPlayer(
         mutableStateOf(false)
     }
 
-    val parentVideoPlaybackSize = remember {
-        mutableStateOf<IntSize>(IntSize.Zero)
+    val videoPlaybackHeight = remember {
+        mutableStateOf<Dp>(Dp.Unspecified)
     }
 
-    val videoPlaybackSize = remember {
-        mutableStateOf<IntSize>(IntSize.Zero)
-    }
+    val localDensity = LocalDensity.current
 
     BoxWithConstraints(
-        contentAlignment = Alignment.Center,
-        modifier = Modifier.fillMaxSize().onSizeChanged {
-            parentVideoPlaybackSize.value = it
-        }
-    ) {
-        BoxWithConstraints(
-            modifier = Modifier.onSizeChanged {
-                videoPlaybackSize.value = it
+        modifier = Modifier
+            .onGloballyPositioned { coordinates ->
+                videoPlaybackHeight.value = with(localDensity) { coordinates.size.height.toDp() }
             }
     ) {
         val borders = MaterialTheme.colorScheme.imageModifier
@@ -561,13 +555,13 @@ private fun RenderVideoPlayer(
             if (roundedCorner) {
                 modifier.then(
                     borders
-                            .defaultMinSize(minHeight = 100.dp)
+                        .defaultMinSize(minHeight = 75.dp)
                         .align(Alignment.Center)
                 )
             } else {
                 modifier
                     .fillMaxWidth()
-                        .defaultMinSize(minHeight = 100.dp)
+                    .defaultMinSize(minHeight = 75.dp)
                     .align(Alignment.Center)
             }
         }
@@ -616,23 +610,25 @@ private fun RenderVideoPlayer(
             controller.volume < 0.001
         }
 
-            val spaceModifier = remember {
-                if (topPaddingForControllers.isSpecified && videoPlaybackSize.value.height > 0) {
-                    val space = (abs(parentVideoPlaybackSize.value.height - videoPlaybackSize.value.height) / 2).dp
+        val topPadding = remember {
+            derivedStateOf {
+                if (topPaddingForControllers.isSpecified && videoPlaybackHeight.value.value > 0) {
+                    val space = (abs(this.maxHeight.value - videoPlaybackHeight.value.value) / 2).dp
                     if (space > topPaddingForControllers) {
-                        Modifier
+                        Size0dp
                     } else {
-                        Modifier.padding(top = topPaddingForControllers - space)
+                        topPaddingForControllers - space
                     }
                 } else {
-                    Modifier
+                    Size0dp
+                }
             }
         }
 
         MuteButton(
             controllerVisible,
             startingMuteState,
-                spaceModifier
+            topPadding
         ) { mute: Boolean ->
             // makes the new setting the default for new creations.
             DefaultMutedSetting.value = mute
@@ -650,7 +646,8 @@ private fun RenderVideoPlayer(
         KeepPlayingButton(
             keepPlaying,
             controllerVisible,
-                spaceModifier.align(Alignment.TopEnd)
+            topPadding,
+            Modifier.align(Alignment.TopEnd)
         ) { newKeepPlaying: Boolean ->
             // If something else is playing and the user marks this video to keep playing, stops the other one.
             if (newKeepPlaying) {
@@ -668,7 +665,6 @@ private fun RenderVideoPlayer(
             keepPlaying.value = newKeepPlaying
         }
     }
-    }
 }
 
 private fun pollCurrentDuration(controller: MediaController) = flow {
@@ -826,7 +822,7 @@ fun LayoutCoordinates.getDistanceToVertCenterIfVisible(view: View): Float? {
 private fun MuteButton(
     controllerVisible: MutableState<Boolean>,
     startingMuteState: Boolean,
-    modifier: Modifier,
+    topPadding: State<Dp>,
     toggle: (Boolean) -> Unit
 ) {
     val holdOn = remember {
@@ -846,7 +842,7 @@ private fun MuteButton(
 
     AnimatedVisibility(
         visible = holdOn.value || controllerVisible.value,
-        modifier = modifier,
+        modifier = Modifier.padding(top = topPadding.value),
         enter = remember { fadeIn() },
         exit = remember { fadeOut() }
     ) {
@@ -880,6 +876,7 @@ private fun MuteButton(
 private fun KeepPlayingButton(
     keepPlayingStart: MutableState<Boolean>,
     controllerVisible: MutableState<Boolean>,
+    topPadding: State<Dp>,
     alignment: Modifier,
     toggle: (Boolean) -> Unit
 ) {
@@ -887,7 +884,7 @@ private fun KeepPlayingButton(
 
     AnimatedVisibility(
         visible = controllerVisible.value,
-        modifier = alignment,
+        modifier = alignment.padding(top = topPadding.value),
         enter = remember { fadeIn() },
         exit = remember { fadeOut() }
     ) {