use constraint layout

app/build.gradle.kts

@@ -174,6 +174,7 @@ dependencies {
     implementation(compose.accompanist.webview)
     implementation(compose.accompanist.systemuicontroller)
     lintChecks(compose.lintchecks)
+    implementation(compose.constraint.layout)
 
     implementation(androidx.paging.runtime)
     implementation(androidx.paging.compose)

app/src/main/java/eu/kanade/tachiyomi/ui/player/controls/PlayerControls.kt

@@ -1,13 +1,12 @@
 package eu.kanade.tachiyomi.ui.player.controls
 
 import android.annotation.SuppressLint
-import androidx.compose.foundation.gestures.awaitEachGesture
-import androidx.compose.foundation.gestures.awaitFirstDown
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
@@ -15,7 +14,6 @@ import androidx.compose.material.icons.outlined.LockOpen
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -26,17 +24,13 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.input.pointer.PointerEventPass
-import androidx.compose.ui.input.pointer.PointerInputScope
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.unit.dp
+import androidx.constraintlayout.compose.ConstraintLayout
 import eu.kanade.presentation.components.commonClickable
 import eu.kanade.tachiyomi.ui.player.PlayerActivity
 import eu.kanade.tachiyomi.ui.player.viewer.SeekState
-import kotlinx.coroutines.coroutineScope
 import kotlinx.coroutines.delay
 
 @Composable
@@ -50,18 +44,18 @@ fun PlayerControls(
     val onPlayerPressed = { timerState.controls = if (timerState.controls > 0L) 0L else 3500L }
     val playerModifier = modifier.pointerInput(Unit) { detectTapGestures(onPress = { onPlayerPressed() }) }
 
-    Surface(modifier = playerModifier, color = Color.Transparent) {
+    if (state.seekState == SeekState.LOCKED) {
-        if (state.seekState == SeekState.LOCKED) {
+        LockedPlayerControls { activity.viewModel.updateSeekState(SeekState.NONE) }
-            LockedPlayerControls { activity.viewModel.updateSeekState(SeekState.NONE) }
+    } else if(timerState.controls > 0L) {
-        } else {
+        UnlockedPlayerControls(activity)
-            if (timerState.controls > 0L) UnlockedPlayerControls(activity)
+    } else {
-        }
+        Box(Modifier.fillMaxSize().then(playerModifier))
-
-        Text(timerState.controls.toString())
     }
 
+    Text(timerState.controls.toString())
+
     LaunchedEffect(key1 = timerState.controls, key2 = state.timeData.paused) {
-        if(timerState.controls > 0L && !state.timeData.paused) {
+        if (timerState.controls > 0L && !state.timeData.paused) {
             delay(500L)
             timerState.controls -= 500L
         }
@@ -75,7 +69,7 @@ private fun LockedPlayerControls(
 ) {
     Box(
         contentAlignment = Alignment.TopStart,
-        modifier = modifier.padding(all = 10.dp)
+        modifier = modifier.padding(all = 10.dp),
     ) {
         PlayerIcon(icon = Icons.Outlined.LockOpen, onClick = onClick)
     }
@@ -87,10 +81,37 @@ private fun UnlockedPlayerControls(
     activity: PlayerActivity,
     modifier: Modifier = Modifier,
 ) {
-    Surface(color = Color(color = 0x70000000)) {
+    ConstraintLayout(modifier) {
-        TopPlayerControls(activity)
+        val (
-        MiddlePlayerControls(activity)
+            topControls,
-        BottomPlayerControls(activity)
+            middleControls,
+            bottomControls,
+        ) = createRefs()
+        TopPlayerControls(
+            activity,
+            modifier = Modifier.constrainAs(topControls) {
+                top.linkTo(parent.top)
+                start.linkTo(parent.start)
+                end.linkTo(parent.end)
+            },
+        )
+        MiddlePlayerControls(
+            activity,
+            modifier = Modifier.constrainAs(middleControls) {
+                top.linkTo(parent.top)
+                bottom.linkTo(parent.bottom)
+                start.linkTo(parent.start)
+                end.linkTo(parent.end)
+            },
+        )
+        BottomPlayerControls(
+            activity,
+            modifier = Modifier.constrainAs(bottomControls) {
+                bottom.linkTo(parent.bottom)
+                start.linkTo(parent.start)
+                end.linkTo(parent.end)
+            },
+        )
     }
 }
 
@@ -110,13 +131,15 @@ fun PlayerIcon(
     val iconSize = iconSize * multiplier
     val buttonSize = iconSize + 30.dp
     val onPlayerPressed = { timerState.controls = if (timerState.controls > 0L) 0L else 3500L }
-    val buttonModifier = modifier.size(buttonSize).pointerInput(Unit) { detectTapGestures { onClick() } }
+    val buttonModifier = modifier
+        .size(buttonSize)
+        .pointerInput(Unit) { detectTapGestures { onClick() } }
 
-        IconButton(onClick = { onClick(); onPlayerPressed() }, modifier = modifier.size(buttonSize), enabled = enabled){
+    IconButton(onClick = { onClick(); onPlayerPressed() }, modifier = modifier.size(buttonSize), enabled = enabled) {
         Icon(
             imageVector = icon,
             contentDescription = null,
-            modifier = Modifier.size(iconSize)
+            modifier = Modifier.size(iconSize),
         )
     }
 }
@@ -126,12 +149,12 @@ fun PlayerRow(
     modifier: Modifier = Modifier,
     horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
     verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
-    content: @Composable RowScope.() -> Unit
+    content: @Composable RowScope.() -> Unit,
 ) = Row(
     modifier = modifier,
     horizontalArrangement = horizontalArrangement,
     verticalAlignment = verticalAlignment,
-    content = content
+    content = content,
 )
 
 @Composable
@@ -141,7 +164,7 @@ fun PlayerTextButton(
     enabled: Boolean = true,
     onClick: () -> Unit = {},
     onLongClick: () -> Unit = {},
-){
+) {
     Box(
         contentAlignment = Alignment.Center,
         modifier = modifier
@@ -150,7 +173,7 @@ fun PlayerTextButton(
                 enabled = enabled,
                 onClick = onClick,
                 onLongClick = onLongClick,
-            )
+            ),
     ) {
         Text(
             text = text,
@@ -159,7 +182,7 @@ fun PlayerTextButton(
     }
 }
 
-class TimerState (
+class TimerState(
     controls: Long = 3500L,
 ) {
     var controls by mutableStateOf(controls)

gradle/compose.versions.toml

@@ -12,6 +12,7 @@ animation-graphics = { module = "androidx.compose.animation:animation-graphics"
 ui-tooling = { module = "androidx.compose.ui:ui-tooling" }
 ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview" }
 ui-util = { module = "androidx.compose.ui:ui-util" }
+constraint-layout = "androidx.constraintlayout:constraintlayout-compose:1.0.1"
 
 material3-core = { module = "androidx.compose.material3:material3" }
 material-icons = { module = "androidx.compose.material:material-icons-extended" }