Add horizontal paging to reader

- Paging works, shows correct articles - Full content works via [onRequestArticle] Open questions - [scrollToPage] works, but does update article list as it goes?
jocmp · Jan 12, 2025 · 20c723e · 20c723e
1 parent a05ad45
commit 20c723e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 9 deletions.
diff --git a/app/src/main/java/com/capyreader/app/ui/articles/IndexedArticles.kt b/app/src/main/java/com/capyreader/app/ui/articles/IndexedArticles.kt
@@ -2,11 +2,8 @@ package com.capyreader.app.ui.articles
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
-import androidx.paging.PagingData
 import androidx.paging.compose.LazyPagingItems
-import androidx.paging.compose.collectAsLazyPagingItems
 import com.jocmp.capy.Article
-import kotlinx.coroutines.flow.Flow
 
 data class IndexedArticles(
     val index: Int,
@@ -26,6 +23,8 @@ data class IndexedArticles(
         return next < size
     }
 
+    fun find(page: Int) = articles.getOrNull(page)
+
     val size = articles.size
 }
 

diff --git a/app/src/main/java/com/capyreader/app/ui/articles/detail/ArticleReader.kt b/app/src/main/java/com/capyreader/app/ui/articles/detail/ArticleReader.kt
@@ -43,6 +43,10 @@ fun ArticleReader(
 
     var lastScrollY by rememberSaveable { mutableIntStateOf(0) }
 
+    val webViewState = rememberWebViewState(
+        onNavigateToMedia = onNavigateToMedia,
+    )
+
     ReaderPagingBox(
         maxArticleHeight = maxHeight,
         scrollState = scrollState,

diff --git a/app/src/main/java/com/capyreader/app/ui/articles/detail/ArticleView.kt b/app/src/main/java/com/capyreader/app/ui/articles/detail/ArticleView.kt
@@ -13,6 +13,8 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.rounded.Article
 import androidx.compose.material.icons.rounded.KeyboardArrowUp
@@ -22,12 +24,13 @@ import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.material3.TopAppBarState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.key
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.hapticfeedback.HapticFeedbackType
@@ -42,6 +45,7 @@ import com.capyreader.app.ui.components.pullrefresh.SwipeRefresh
 import com.capyreader.app.ui.settings.panels.ArticleVerticalSwipe
 import com.capyreader.app.ui.settings.panels.ArticleVerticalSwipe.LOAD_FULL_CONTENT
 import com.jocmp.capy.Article
+import com.jocmp.capy.logging.CapyLog
 import org.koin.compose.koinInject
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -80,6 +84,11 @@ fun ArticleView(
 
     val toolbars = rememberToolbarPreferences(articleID = article.id)
 
+    val pagerState = rememberPagerState(
+        pageCount = {
+            articles.size
+        })
+
     ArticleViewScaffold(
         topBar = {
             ArticleTopBar(
@@ -92,18 +101,27 @@ fun ArticleView(
             )
         },
         reader = {
-            key(article.id) {
+            HorizontalPager(state = pagerState) { page ->
+                CapyLog.info("page", mapOf("page" to page.toString()))
                 ArticlePullRefresh(
                     toolbars.show && !toolbars.pinned,
                     onToggleFullContent = onToggleFullContent,
                     onRequestNext = onRequestNext,
                     onRequestPrevious = onRequestPrevious,
                     articles = articles,
                 ) {
-                    ArticleReader(
-                        article = article,
-                        onNavigateToMedia = onNavigateToMedia,
-                    )
+                    articles.find(page)?.let { pagedArticle ->
+                        val presented = if (article.id == pagedArticle.id) {
+                            article
+                        } else {
+                            pagedArticle
+                        }
+
+                        ArticleReader(
+                            article = presented,
+                            onNavigateToMedia = onNavigateToMedia,
+                        )
+                    }
                 }
             }
         },
@@ -116,6 +134,22 @@ fun ArticleView(
         toolbarPreferences = toolbars
     )
 
+    /** TODO: jumps to index=0 when no articles are selected */
+    LaunchedEffect(pagerState) {
+        snapshotFlow { pagerState.currentPage }.collect { page ->
+            val currentArticle = articles.find(page) ?: return@collect
+//            if (currentArticle.id != article.id) {
+//                onRequestArticle(currentArticle.id)
+//            }
+        }
+    }
+
+    LaunchedEffect(article.id) {
+        CapyLog.info("new_article", mapOf("title" to article.title.split(" ").take(13).joinToString(" ")))
+
+        pagerState.scrollToPage(articles.index)
+    }
+
     BackHandler(enableBackHandler) {
         onBackPressed()
     }