use constraint layout

This commit is contained in:
AbdallahMehiz 2024-07-08 02:06:45 +01:00
parent ba330d7db5
commit dce3983749
No known key found for this signature in database
GPG key ID: 975266399F5BAF34
3 changed files with 55 additions and 30 deletions

View file

@ -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)

View file

@ -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) {
LockedPlayerControls { activity.viewModel.updateSeekState(SeekState.NONE) }
} else {
if (timerState.controls > 0L) UnlockedPlayerControls(activity)
}
Text(timerState.controls.toString())
if (state.seekState == SeekState.LOCKED) {
LockedPlayerControls { activity.viewModel.updateSeekState(SeekState.NONE) }
} else if(timerState.controls > 0L) {
UnlockedPlayerControls(activity)
} else {
Box(Modifier.fillMaxSize().then(playerModifier))
}
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)) {
TopPlayerControls(activity)
MiddlePlayerControls(activity)
BottomPlayerControls(activity)
ConstraintLayout(modifier) {
val (
topControls,
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)

View file

@ -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" }