updated some ui on tv

DatL4g · Jul 22, 2024 · e1eb9b7 · e1eb9b7
1 parent 3b346c2
commit e1eb9b7
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 89 deletions.
diff --git a/.../androidMain/kotlin/dev/datlag/burningseries/ui/navigation/screen/video/BottomControls.kt b/.../androidMain/kotlin/dev/datlag/burningseries/ui/navigation/screen/video/BottomControls.kt
@@ -31,6 +31,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.media3.common.util.UnstableApi
 import dev.datlag.burningseries.common.toDuration
+import dev.datlag.tooling.compose.platform.PlatformText
+import dev.datlag.tooling.compose.platform.ProvideNonTvContentColor
 import dev.datlag.tooling.decompose.lifecycle.collectAsStateWithLifecycle
 import io.github.aakira.napier.Napier
 import kotlinx.coroutines.flow.StateFlow
@@ -58,42 +60,44 @@ fun BottomControls(
             containerColor = Color.Black.copy(alpha = 0.5F),
             contentColor = Color.White
         ) {
-            val source = remember { MutableInteractionSource() }
-            val dragging by source.collectIsDraggedAsState()
-            var changingProgress by remember { mutableLongStateOf(progress) }
-            val displayProgress = remember(dragging, progress, changingProgress) {
-                if (dragging) {
-                    changingProgress
-                } else {
-                    progress
-                }
-            }
-
-            Text(
-                text = displayProgress.toDuration(),
-                maxLines = 1
-            )
-            Slider(
-                modifier = Modifier.weight(1F),
-                value = displayProgress.toFloat(),
-                valueRange = 0F..length.toFloat(),
-                onValueChange = {
-                    if (dragging) {
-                        changingProgress = it.toLong()
-                        playerWrapper.showControls()
-                    }
-                },
-                onValueChangeFinished = {
+            ProvideNonTvContentColor {
+                val source = remember { MutableInteractionSource() }
+                val dragging by source.collectIsDraggedAsState()
+                var changingProgress by remember { mutableLongStateOf(progress) }
+                val displayProgress = remember(dragging, progress, changingProgress) {
                     if (dragging) {
-                        playerWrapper.seekTo(changingProgress)
+                        changingProgress
+                    } else {
+                        progress
                     }
-                },
-                interactionSource = source
-            )
-            Text(
-                text = length.toDuration(),
-                maxLines = 1
-            )
+                }
+
+                PlatformText(
+                    text = displayProgress.toDuration(),
+                    maxLines = 1
+                )
+                Slider(
+                    modifier = Modifier.weight(1F),
+                    value = displayProgress.toFloat(),
+                    valueRange = 0F..length.toFloat(),
+                    onValueChange = {
+                        if (dragging) {
+                            changingProgress = it.toLong()
+                            playerWrapper.showControls()
+                        }
+                    },
+                    onValueChangeFinished = {
+                        if (dragging) {
+                            playerWrapper.seekTo(changingProgress)
+                        }
+                    },
+                    interactionSource = source
+                )
+                PlatformText(
+                    text = length.toDuration(),
+                    maxLines = 1
+                )
+            }
         }
     }
 }
diff --git a/.../androidMain/kotlin/dev/datlag/burningseries/ui/navigation/screen/video/CenterControls.kt b/.../androidMain/kotlin/dev/datlag/burningseries/ui/navigation/screen/video/CenterControls.kt
@@ -25,11 +25,20 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusProperties
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.BlendMode
 import androidx.compose.ui.graphics.Color
@@ -41,9 +50,15 @@ import dev.datlag.burningseries.common.drawProgress
 import dev.datlag.burningseries.model.Series
 import dev.datlag.burningseries.network.state.EpisodeState
 import dev.datlag.skeo.DirectLink
+import dev.datlag.tooling.Platform
+import dev.datlag.tooling.compose.platform.PlatformIcon
+import dev.datlag.tooling.compose.platform.PlatformIconButton
+import dev.datlag.tooling.compose.platform.localContentColor
+import dev.datlag.tooling.compose.platform.rememberIsTv
 import dev.datlag.tooling.decompose.lifecycle.collectAsStateWithLifecycle
 import kotlinx.collections.immutable.ImmutableCollection
 
+@ExperimentalComposeUiApi
 @OptIn(UnstableApi::class)
 @Composable
 fun CenterControls(
@@ -58,6 +73,9 @@ fun CenterControls(
     onNext: (Series.Episode, ImmutableCollection<DirectLink>) -> Unit
 ) {
     val isFinished by playerWrapper.isFinished.collectAsStateWithLifecycle()
+    val (replay, play, forward) = remember { FocusRequester.createRefs() }
+
+    var focusPlay by remember { mutableStateOf(true) }
 
     AnimatedVisibility(
         modifier = modifier,
@@ -69,31 +87,44 @@ fun CenterControls(
             horizontalArrangement = Arrangement.SpaceEvenly,
             verticalAlignment = Alignment.CenterVertically
         ) {
-            IconButton(
+            PlatformIconButton(
                 modifier = Modifier.background(
                     color = Color.Black.copy(alpha = 0.5F),
                     shape = CircleShape
-                ),
+                ).focusRequester(replay).focusProperties {
+                    next = play
+                },
                 onClick = onReplayClick
             ) {
-                Icon(
+                PlatformIcon(
                     imageVector = Icons.Rounded.FastRewind,
                     contentDescription = null,
-                    tint = Color.White
+                    tint = if (Platform.rememberIsTv()) {
+                        Platform.localContentColor()
+                    } else {
+                        Color.White
+                    }
                 )
             }
 
-            IconButton(
+            PlatformIconButton(
                 modifier = Modifier.background(
                     color = Color.Black.copy(alpha = 0.5F),
                     shape = CircleShape
-                ),
+                ).focusRequester(play).focusProperties {
+                    previous = replay
+                    next = forward
+                },
                 onClick = onPauseToggle
             ) {
-                Icon(
+                PlatformIcon(
                     imageVector = if (isPlaying) Icons.Rounded.Pause else Icons.Rounded.PlayArrow,
                     contentDescription = null,
-                    tint = Color.White
+                    tint = if (Platform.rememberIsTv()) {
+                        Platform.localContentColor()
+                    } else {
+                        Color.White
+                    }
                 )
             }
 
@@ -112,38 +143,72 @@ fun CenterControls(
                 }
             )
             if (isFinished && nextState is EpisodeState.SuccessStream) {
-                IconButton(
+                PlatformIconButton(
                     modifier = Modifier.background(
                         color = Color.Black.copy(alpha = 0.5F),
                         shape = CircleShape
-                    ),
+                    ).focusRequester(forward).focusProperties {
+                        previous = play
+                    },
                     onClick = {
                         onNext(nextState.episode, nextState.results)
                     }
                 ) {
-                    Icon(
-                        modifier = Modifier.fillMaxSize().drawProgress(Color.White, animatedProgress).padding(8.dp),
+                    PlatformIcon(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .drawProgress(
+                                if (Platform.rememberIsTv()) {
+                                    Platform.localContentColor()
+                                } else {
+                                    Color.White
+                                },
+                                animatedProgress
+                            ).padding(8.dp),
                         imageVector = Icons.Rounded.SkipNext,
                         contentDescription = null,
-                        tint = Color.White
+                        tint = if (Platform.rememberIsTv()) {
+                            Platform.localContentColor()
+                        } else {
+                            Color.White
+                        }
                     )
                 }
             } else {
-                IconButton(
+                PlatformIconButton(
                     modifier = Modifier.background(
                         color = Color.Black.copy(alpha = 0.5F),
                         shape = CircleShape
-                    ),
+                    ).focusRequester(forward).focusProperties {
+                        previous = play
+                    },
                     onClick = onForwardClick,
                     enabled = !isFinished
                 ) {
-                    Icon(
+                    PlatformIcon(
                         imageVector = Icons.Rounded.FastForward,
                         contentDescription = null,
-                        tint = Color.White
+                        tint = if (Platform.rememberIsTv()) {
+                            Platform.localContentColor()
+                        } else {
+                            Color.White
+                        }
                     )
                 }
             }
         }
+
+        SideEffect {
+            if (focusPlay) {
+                play.requestFocus()
+                focusPlay = false
+            }
+        }
+
+        DisposableEffect(focusPlay) {
+            onDispose {
+                focusPlay = true
+            }
+        }
     }
 }
diff --git a/...src/androidMain/kotlin/dev/datlag/burningseries/ui/navigation/screen/video/TopControls.kt b/...src/androidMain/kotlin/dev/datlag/burningseries/ui/navigation/screen/video/TopControls.kt
@@ -50,6 +50,10 @@ import dev.datlag.kast.DeviceType
 import dev.datlag.kast.Kast
 import dev.datlag.kast.UnselectReason
 import dev.datlag.tooling.Platform
+import dev.datlag.tooling.compose.platform.PlatformIcon
+import dev.datlag.tooling.compose.platform.PlatformIconButton
+import dev.datlag.tooling.compose.platform.PlatformText
+import dev.datlag.tooling.compose.platform.ProvideNonTvContentColor
 import dev.datlag.tooling.compose.platform.typography
 import dev.datlag.tooling.decompose.lifecycle.collectAsStateWithLifecycle
 import org.jetbrains.compose.resources.stringResource
@@ -79,34 +83,38 @@ fun TopControls(
             Box(modifier = Modifier.matchParentSize().background(Color.Black.copy(alpha = 0.5F)))
             TopAppBar(
                 navigationIcon = {
-                    IconButton(
-                        onClick = onBack
-                    ) {
-                        Icon(
-                            imageVector = Icons.Rounded.ArrowBackIosNew,
-                            contentDescription = null
-                        )
+                    ProvideNonTvContentColor {
+                        PlatformIconButton(
+                            onClick = onBack
+                        ) {
+                            PlatformIcon(
+                                imageVector = Icons.Rounded.ArrowBackIosNew,
+                                contentDescription = null
+                            )
+                        }
                     }
                 },
                 title = {
-                    Column(
-                        modifier = Modifier.fillMaxWidth(),
-                        verticalArrangement = Arrangement.spacedBy(4.dp, Alignment.CenterVertically)
-                    ) {
-                        Text(
-                            text = mainTitle,
-                            softWrap = true,
-                            overflow = TextOverflow.Ellipsis,
-                            maxLines = 1
-                        )
-                        subTitle?.ifBlank { null }?.let { sub ->
-                            Text(
-                                text = sub,
+                    ProvideNonTvContentColor {
+                        Column(
+                            modifier = Modifier.fillMaxWidth(),
+                            verticalArrangement = Arrangement.spacedBy(4.dp, Alignment.CenterVertically)
+                        ) {
+                            PlatformText(
+                                text = mainTitle,
                                 softWrap = true,
                                 overflow = TextOverflow.Ellipsis,
-                                maxLines = 1,
-                                style = Platform.typography().labelMedium
+                                maxLines = 1
                             )
+                            subTitle?.ifBlank { null }?.let { sub ->
+                                PlatformText(
+                                    text = sub,
+                                    softWrap = true,
+                                    overflow = TextOverflow.Ellipsis,
+                                    maxLines = 1,
+                                    style = Platform.typography().labelMedium
+                                )
+                            }
                         }
                     }
                 },

diff --git a/...oidMain/kotlin/dev/datlag/burningseries/ui/navigation/screen/video/VideoScreen.android.kt b/...oidMain/kotlin/dev/datlag/burningseries/ui/navigation/screen/video/VideoScreen.android.kt
@@ -32,9 +32,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.focus.FocusRequester
-import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.key.onKeyEvent
 import androidx.compose.ui.platform.LocalContext
@@ -85,6 +84,7 @@ import kotlinx.coroutines.isActive
 import kotlinx.datetime.Clock
 import kotlin.random.Random
 
+@ExperimentalComposeUiApi
 @OptIn(UnstableApi::class)
 @Composable
 actual fun VideoScreen(component: VideoComponent) {
@@ -179,6 +179,9 @@ actual fun VideoScreen(component: VideoComponent) {
     }
 
     Scaffold(
+        modifier = Modifier.focusable().onKeyEvent { key ->
+            playerWrapper.dispatchKey(controlsVisible, key)
+        },
         topBar = {
             TopControls(
                 isVisible = controlsVisible,
@@ -205,11 +208,7 @@ actual fun VideoScreen(component: VideoComponent) {
             AndroidView(
                 modifier = Modifier
                     .fillMaxSize()
-                    .background(Color.Black)
-                    .focusable()
-                    .onKeyEvent { key ->
-                        playerWrapper.dispatchKey(controlsVisible, key)
-                    },
+                    .background(Color.Black),
                 factory = { viewContext ->
                     PlayerView(viewContext)
                 },