feat(ui): scroll to the currently reading article

Ashinch · Sep 26, 2024 · fea521d · fea521d
1 parent aca2028
commit fea521d
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 23 deletions.
diff --git a/app/src/main/java/me/ash/reader/ui/component/webview/RYWebView.kt b/app/src/main/java/me/ash/reader/ui/component/webview/RYWebView.kt
@@ -1,6 +1,7 @@
 package me.ash.reader.ui.component.webview
 
 import android.util.Log
+import android.view.View
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue

diff --git a/app/src/main/java/me/ash/reader/ui/page/common/HomeEntry.kt b/app/src/main/java/me/ash/reader/ui/page/common/HomeEntry.kt
@@ -190,10 +190,8 @@ fun HomeEntry(
 
  }
  animatedComposable(route = "${RouteName.READING}/{articleId}") {
- val articleId = it.arguments?.getString("articleId")
  ReadingPage(
  navController = navController,
- articleId = articleId,
  homeViewModel = homeViewModel
  )
  }

diff --git a/app/src/main/java/me/ash/reader/ui/page/home/adaptive/ArticleListReaderPage.kt b/app/src/main/java/me/ash/reader/ui/page/home/adaptive/ArticleListReaderPage.kt
@@ -8,10 +8,12 @@ import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
 import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
 import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavHostController
 import kotlinx.parcelize.Parcelize
+import me.ash.reader.ui.ext.collectAsStateValue
 import me.ash.reader.ui.page.common.RouteName
 import me.ash.reader.ui.page.home.HomeViewModel
 import me.ash.reader.ui.page.home.flow.FlowPage
@@ -35,7 +37,11 @@ fun ArticleListReaderPage(
  BackHandler(navigator.canNavigateBack()) {
  navigator.navigateBack()
  }
- val currentArticle = navigator.currentDestination?.content
+ val readerState = readingViewModel.readerStateStateFlow.collectAsStateValue()
+
+ LaunchedEffect(navigator.currentDestination?.content) {
+ navigator.currentDestination?.content?.id?.let { readingViewModel.initData(it) }
+ }
 
  ListDetailPaneScaffold(
  modifier = modifier,
@@ -46,7 +52,7 @@ fun ArticleListReaderPage(
  FlowPage(
  homeViewModel = homeViewModel,
  flowViewModel = flowViewModel,
- readingArticleId = currentArticle?.id,
+ readingArticleId = readerState.articleId,
  onNavigateToFeeds = {
  if (navController.previousBackStackEntry == null) {
  navController.navigate(RouteName.FEEDS) {
@@ -63,14 +69,11 @@ fun ArticleListReaderPage(
  },
  detailPane = {
  AnimatedPane {
- navigator.currentDestination?.content?.let {
- ReadingPage(
- navController = navController,
- articleId = it.id,
- homeViewModel = homeViewModel,
- readingViewModel = readingViewModel
- )
- }
+ ReadingPage(
+ navController = navController,
+ homeViewModel = homeViewModel,
+ readingViewModel = readingViewModel
+ )
  }
  }
  )

diff --git a/app/src/main/java/me/ash/reader/ui/page/home/flow/FlowPage.kt b/app/src/main/java/me/ash/reader/ui/page/home/flow/FlowPage.kt
@@ -38,6 +38,7 @@ import androidx.work.WorkInfo
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 import me.ash.reader.R
+import me.ash.reader.domain.model.article.ArticleFlowItem
 import me.ash.reader.domain.model.article.ArticleWithFeed
 import me.ash.reader.domain.model.general.Filter
 import me.ash.reader.domain.model.general.MarkAsReadConditions
@@ -177,6 +178,20 @@ fun FlowPage(
  }
  }
 
+ LaunchedEffect(readingArticleId) {
+ if (readingArticleId != null) {
+ val item =
+ listState.layoutInfo.visibleItemsInfo.firstOrNull { it.key == readingArticleId }
+
+ val index = item?.index
+ ?: pagingItems.itemSnapshotList.indexOfFirst { it is ArticleFlowItem.Article && it.articleWithFeed.article.id == readingArticleId }
+
+ if (index != -1) {
+ listState.animateScrollToItem(index, scrollOffset = -100)
+ }
+ }
+ }
+
  BackHandler(onSearch) {
  onSearch = false
  }

diff --git a/app/src/main/java/me/ash/reader/ui/page/home/reading/ReadingPage.kt b/app/src/main/java/me/ash/reader/ui/page/home/reading/ReadingPage.kt
@@ -23,7 +23,9 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.isSpecified
 import androidx.compose.ui.unit.sp
@@ -52,7 +54,6 @@ private const val DOWNWARD = -1
 @Composable
 fun ReadingPage(
  navController: NavHostController,
- articleId: String?,
  homeViewModel: HomeViewModel,
  readingViewModel: ReadingViewModel = hiltViewModel(),
 ) {
@@ -76,17 +77,13 @@ fun ReadingPage(
 
  val pagingItems = homeUiState.pagingData.collectAsLazyPagingItems().itemSnapshotList
 
- LaunchedEffect(articleId) {
- if (articleId == null) {
- navController.currentBackStackEntryFlow.collect {
- it.arguments?.getString("articleId")?.let { articleId ->
- if (readerState.articleId != articleId) {
- readingViewModel.initData(articleId)
- }
+ LaunchedEffect(Unit) {
+ navController.currentBackStackEntryFlow.collect {
+ it.arguments?.getString("articleId")?.let { articleId ->
+ if (readerState.articleId != articleId) {
+ readingViewModel.initData(articleId)
  }
  }
- } else {
- readingViewModel.initData(articleId)
  }
  }
 
@@ -177,7 +174,9 @@ fun ReadingPage(
  }
  ) {
  Box(
- modifier = Modifier.fillMaxSize(),
+ modifier = Modifier
+ .fillMaxSize()
+ .nestedScroll(rememberNestedScrollInteropConnection()),
  contentAlignment = Alignment.Center
  ) {
  Content(