feat: add the focus requester support

Author: succlz123

README.md

@@ -5,7 +5,7 @@
 <br/>
 <br/>
 <div align="center">
-<img src="https://img.shields.io/static/v1?label=version&message=1.0.4&color=success"/>
+<img src="https://img.shields.io/static/v1?label=version&message=1.0.5&color=success"/>
 <img src="https://img.shields.io/static/v1?label=platform&message=Android&color=green"/>   <img src="https://img.shields.io/static/v1?label=platform&message=Desktop&color=blue"/>
 </div>
 <br/>
@@ -77,11 +77,10 @@ https://github.com/succlz123/AcFun-Client-Multiplatform/releases
 - 首页展示，分区内容展示，视频详情展示，UP主投稿视频查看。
 - 视频播放，直播，弹幕 (简易弹幕-实验性质)，播放功能增强，变速等。
 - 搜索，下载。
-- Android Phone, Android Pad,Desktop 适配。
+- Android Phone, Android Pad, Android TV, Desktop 适配。
 
 ## 开发中功能
 
 - 支持播放选集功能。
-- Android TV 适配。
 - DLNA 投屏。
 - 番剧，文章区。

android/build.gradle.kts

@@ -5,7 +5,7 @@ plugins {
 }
 
 group = "io.github.succlz123"
-version = "1.0.4"
+version = "1.0.5"
 
 repositories {
     mavenCentral()
@@ -27,8 +27,8 @@ android {
         applicationId = "org.succlz123.app.acfun"
         minSdk = 21
         targetSdk = 30
-        versionCode = 4
-        versionName = "1.0.4"
+        versionCode = 5
+        versionName = "1.0.5"
 
         resourceConfigurations += mutableSetOf("en", "zh")
     }

build.gradle.kts

@@ -1,5 +1,5 @@
 group = "io.github.succlz123"
-version = "1.0.4"
+version = "1.0.5"
 
 allprojects {
     repositories {

desktop/build.gradle.kts

@@ -6,7 +6,7 @@ plugins {
 }
 
 group = "io.github.succlz123"
-version = "1.0.4"
+version = "1.0.5"
 
 kotlin {
     jvm {
@@ -42,7 +42,7 @@ compose.desktop {
                 iconFile.set(project.file("ic_acfun.png"))
             }
             packageName = "AcFun"
-            packageVersion = "1.0.4"
+            packageVersion = "1.0.5"
             copyright = "Copyright © 2022"
 
             modules("java.sql", "jdk.unsupported")

shared/build.gradle.kts

@@ -8,7 +8,7 @@ plugins {
 }
 
 group = "io.github.succlz123"
-version = "1.0.4"
+version = "1.0.5"
 
 kotlin {
     android()

shared/src/commonMain/kotlin/org/succlz123/app/acfun/SharedApp.kt

@@ -39,7 +39,7 @@ fun SharedApp() {
         Box(modifier = Modifier.fillMaxSize()) {
             ScreenHost(screenNavigator = screenNavigator, rootScreenName = Manifest.MainScreen) {
                 groupScreen(screenName = (Manifest.MainScreen)) {
-                    MainScreen(modifier = Modifier.fillMaxSize())
+                    MainScreen()
                 }
                 groupScreen(screenName = (Manifest.VideoDetailScreen)) {
                     VideoDetailScreen()

shared/src/commonMain/kotlin/org/succlz123/app/acfun/theme/ColorResource.kt

@@ -3,13 +3,16 @@ package org.succlz123.app.acfun.theme
 import androidx.compose.ui.graphics.Color
 
 object ColorResource {
+    val white = Color(0xFFFFFFFF)
     val background = Color(0xFFF6F7F8)
     val acRed = Color(0xFFFF4444)
+    val acRed30 = Color(0x4dFF4444)
     val divider = Color(0xFFF1F2F3)
     val text = Color(0xFF000000)
     val subText = Color(0xFF9499A0)
     val border = Color(0xFFF1F2F3)
 
+    val black = Color(0xFF000000)
     val black20 = Color(0x33000000)
     val black30 = Color(0x4d000000)
     val black60 = Color(0x99000000)

shared/src/commonMain/kotlin/org/succlz123/app/acfun/ui/area/AreaContentScreen.kt

@@ -19,6 +19,7 @@ import org.succlz123.app.acfun.base.AcBackButton
 import org.succlz123.app.acfun.base.LoadingFailView
 import org.succlz123.app.acfun.base.LoadingView
 import org.succlz123.app.acfun.theme.ColorResource
+import org.succlz123.app.acfun.ui.main.GlobalFocusViewModel
 import org.succlz123.app.acfun.ui.main.tab.item.MainHomeContentItem
 import org.succlz123.lib.click.noRippleClickable
 import org.succlz123.lib.screen.LocalScreenNavigator
@@ -47,6 +48,13 @@ fun AreaContentScreen() {
         viewModel.getData(id)
     }
 
+    val focusVm = viewModel(GlobalFocusViewModel::class) {
+        GlobalFocusViewModel()
+    }
+    LaunchedEffect(Unit) {
+        focusVm.curFocusRequesterParent.value = viewModel.contentFocusParent
+    }
+
     Box(modifier = Modifier.fillMaxSize().background(Color.White)) {
         val state = viewModel.areaVideosState.collectAsState().value
         when (state) {
@@ -109,6 +117,10 @@ fun AreaContentScreen() {
                     } else {
                         MainHomeContentItem(result = ScreenResult.Success(acContentList),
                             isExpandedScreen = isExpandedScreen,
+
+                            thisRequester = viewModel.contentFocusParent,
+                            otherRequester = null,
+
                             onRefresh = {
                                 viewModel.getData(
                                     id,

shared/src/commonMain/kotlin/org/succlz123/app/acfun/ui/area/AreaContentViewModel.kt

@@ -1,5 +1,6 @@
 package org.succlz123.app.acfun.ui.area
 
+import androidx.compose.ui.focus.FocusRequester
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.toImmutableList
 import kotlinx.coroutines.Dispatchers
@@ -40,6 +41,8 @@ class AreaContentViewModel : ScreenPageViewModel() {
 
     val rankSelectIndex: MutableStateFlow<Int> = MutableStateFlow(0)
 
+    val contentFocusParent = FocusRequester()
+
     init {
         page = 1
     }

shared/src/commonMain/kotlin/org/succlz123/app/acfun/ui/detail/VideoDetailScreen.kt

@@ -13,6 +13,10 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.focusTarget
+import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -23,11 +27,16 @@ import org.succlz123.app.acfun.base.AcBackButton
 import org.succlz123.app.acfun.base.LoadingFailView
 import org.succlz123.app.acfun.base.LoadingView
 import org.succlz123.app.acfun.theme.ColorResource
+import org.succlz123.app.acfun.ui.main.GlobalFocusViewModel
 import org.succlz123.lib.click.noRippleClickable
 import org.succlz123.lib.common.getPlatformName
 import org.succlz123.lib.filedownloader.core.DownloadRequest
 import org.succlz123.lib.filedownloader.core.DownloadStateType
 import org.succlz123.lib.filedownloader.core.FileDownLoader
+import org.succlz123.lib.focus.FocusNode
+import org.succlz123.lib.focus.notAllowMove
+import org.succlz123.lib.focus.onFocusKeyEventMove
+import org.succlz123.lib.focus.onFocusParent
 import org.succlz123.lib.image.AsyncImageUrlMultiPlatform
 import org.succlz123.lib.screen.LocalScreenNavigator
 import org.succlz123.lib.screen.LocalScreenRecord
@@ -54,6 +63,7 @@ fun VideoDetailScreen() {
     LaunchedEffect(Unit) {
         viewModel.getDetail(acContent)
     }
+
     Box(modifier = Modifier.fillMaxSize().background(Color.White).noRippleClickable {
         screenNavigation.cancelPopupWindow()
     }) {
@@ -74,7 +84,9 @@ fun VideoDetailScreen() {
             is ScreenResult.Success -> {
                 val vc = videoContent.invoke()
                 Box(contentAlignment = Alignment.Center) {
-                    videoDetailContent(acContent, vc, viewModel)
+                    videoDetailContent(
+                        acContent, vc, viewModel, viewModel.userSpaceFocusParent, viewModel.episodeFocusParent
+                    )
 
                     val showPlayerLoading = remember { mutableStateOf(false) }
                     if (showPlayerLoading.value) {
@@ -113,7 +125,13 @@ fun VideoDetailScreen() {
 }
 
 @Composable
-fun videoDetailContent(acContent: AcContent, vContent: VideoContent, viewModel: VideoDetailViewModel) {
+fun videoDetailContent(
+    acContent: AcContent,
+    vContent: VideoContent,
+    viewModel: VideoDetailViewModel,
+    userSpaceFocusParent: FocusRequester,
+    episodeFocusParent: FocusRequester
+) {
     val screenNavigation = LocalScreenNavigator.current
     Column(modifier = Modifier.fillMaxSize().padding(24.dp, 48.dp, 24.dp, 48.dp)) {
         Row(verticalAlignment = Alignment.CenterVertically) {
@@ -131,18 +149,50 @@ fun videoDetailContent(acContent: AcContent, vContent: VideoContent, viewModel:
                 )
             }
             Spacer(modifier = Modifier.width(16.dp))
-            Text(
-                modifier = Modifier.noRippleClickable {
-                    screenNavigation.push(
-                        Manifest.UserSpaceScreen,
-                        screenKey = vContent.user?.id.orEmpty(),
-                        arguments = ScreenArgs.putValue("KEY_USER_NAME", vContent.user?.name)
-                            .putValue("KEY_USER_ID", vContent.user?.id),
-                        pushOptions = PushOptions(
-                            removePredicate = PushOptions.RemoveAnyPredicate(Manifest.UserSpaceScreen)
-                        )
+            val isFocused = remember { mutableStateOf(false) }
+            val userSpaceFocusNode = remember { FocusNode(tag = "UserSpace") }
+            SideEffect {
+                if (viewModel.currentFocusNode.value == userSpaceFocusNode) {
+                    userSpaceFocusParent.requestFocus()
+                }
+            }
+            Text(modifier = Modifier.onFocusParent(userSpaceFocusParent, "video detail - user space") {
+                isFocused.value = (it.isFocused)
+                if (it.isFocused) {
+                    viewModel.currentFocusNode.value = userSpaceFocusNode
+                }
+            }.onFocusKeyEventMove(leftCanMove = notAllowMove,
+                rightCanMove = notAllowMove,
+                upCanMove = notAllowMove,
+                downCanMove = {
+                    viewModel.currentFocusNode.value = FocusNode(tag = "Episode")
+                    episodeFocusParent.requestFocus()
+                    false
+                }).noRippleClickable {
+                screenNavigation.push(
+                    Manifest.UserSpaceScreen,
+                    screenKey = vContent.user?.id.orEmpty(),
+                    arguments = ScreenArgs.putValue("KEY_USER_NAME", vContent.user?.name)
+                        .putValue("KEY_USER_ID", vContent.user?.id),
+                    pushOptions = PushOptions(
+                        removePredicate = PushOptions.RemoveAnyPredicate(Manifest.UserSpaceScreen)
                     )
-                }, text = vContent.user?.name.orEmpty(), fontSize = 20.sp, color = ColorResource.acRed
+                )
+                userSpaceFocusParent.requestFocus()
+            }.background(
+                if (isFocused.value) {
+                    ColorResource.acRed
+                } else {
+                    Color.Transparent
+                }, shape = RoundedCornerShape(6.dp)
+            ).padding(12.dp, 6.dp),
+                text = vContent.user?.name.orEmpty(),
+                fontSize = 20.sp,
+                color = if (isFocused.value) {
+                    Color.White
+                } else {
+                    ColorResource.acRed
+                }
             )
             Spacer(modifier = Modifier.width(16.dp))
             Column {
@@ -216,28 +266,77 @@ fun videoDetailContent(acContent: AcContent, vContent: VideoContent, viewModel:
         }
         val isExpandedScreen = rememberIsWindowExpanded()
 
+        val focusVm = viewModel(GlobalFocusViewModel::class) {
+            GlobalFocusViewModel()
+        }
+        LaunchedEffect(Unit) {
+            if (focusVm.curFocusRequesterParent.value == null) {
+                viewModel.episodeFocusParent.requestFocus()
+            }
+        }
+
+        val grid = remember {
+            if (isExpandedScreen) {
+                6
+            } else {
+                2
+            }
+        }
         LazyVerticalGrid(
-            columns = GridCells.Fixed(
-                if (isExpandedScreen) {
-                    6
-                } else {
-                    2
-                }
-            ),
-            modifier = Modifier.fillMaxSize(),
+            columns = GridCells.Fixed(grid),
+            modifier = Modifier.fillMaxSize().onFocusParent(episodeFocusParent, "video detail - episode")
+                .onFocusKeyEventMove(upCanMove = {
+                    if (viewModel.currentFocusNode.value.index < grid) {
+                        viewModel.currentFocusNode.value = FocusNode(tag = "UserSpace")
+                        userSpaceFocusParent.requestFocus()
+                    }
+                    true
+                }),
             contentPadding = PaddingValues(top = 12.dp, bottom = 12.dp),
             verticalArrangement = Arrangement.spacedBy(12.dp),
             horizontalArrangement = Arrangement.spacedBy(12.dp)
         ) {
             itemsIndexed(vContent.videoList.orEmpty()) { index, item ->
+
+                val focusRequester = remember { FocusRequester() }
+                val episodeFocusNode = remember { FocusNode(tag = "Episode", index = index) }
+
+                val curParentFocused = focusVm.curFocusRequesterParent.collectAsState()
+                if (curParentFocused.value == episodeFocusParent && (viewModel.currentFocusNode.value == episodeFocusNode)) {
+                    SideEffect {
+                        focusRequester.requestFocus()
+                    }
+                }
+
+                val isFocused = viewModel.currentFocusNode.collectAsState().value == episodeFocusNode
+
                 Box(
-                    modifier = Modifier.weight(1f).height(52.dp).clip(MaterialTheme.shapes.medium)
-                        .background(ColorResource.background)
+                    modifier = Modifier.weight(1f).height(52.dp).clip(MaterialTheme.shapes.medium).background(
+                        if (isFocused) {
+                            ColorResource.acRed
+                        } else {
+                            ColorResource.background
+                        }
+                    )
                 ) {
-                    Box(modifier = Modifier.align(Alignment.Center).noRippleClickable {
-                        viewModel.play(acContent, index + 1)
-                    }, contentAlignment = Alignment.Center) {
-                        Text(text = (index + 1).toString(), style = MaterialTheme.typography.h3)
+                    Box(modifier = Modifier.align(Alignment.Center).fillMaxSize().padding(0.dp, 0.dp, 32.dp, 0.dp)
+                        .focusRequester(focusRequester).onFocusChanged {
+                            if (it.isFocused) {
+                                viewModel.currentFocusNode.value = FocusNode(tag = "Episode", index = index)
+                            }
+                        }.focusTarget().noRippleClickable {
+                            viewModel.play(acContent, index + 1)
+                        }, contentAlignment = Alignment.Center
+                    ) {
+                        Text(
+                            text = (index + 1).toString(),
+                            style = MaterialTheme.typography.h3,
+                            color = if (isFocused) {
+                                ColorResource.white
+                            } else {
+                                ColorResource.black
+                            }
+                        )
                     }
                     PopupWindowLayout(modifier = Modifier.align(Alignment.CenterEnd), displayContent = {
                         Card(