Fixes glitches when scrolling on the home page (#882)

## Description
Fixes the possible glitch on some devices when scrolling left-right on
rows on the home page

### Related issues
Fixes #367
Fixes #872

### Testing
Emulator & shield 2019

## Screenshots
N/A

## AI or LLM usage
None

app/src/main/java/com/github/damontecres/wholphin/ui/discover/SeerrDiscoverPage.kt

@@ -1,6 +1,8 @@
 package com.github.damontecres.wholphin.ui.discover
 
 import android.content.Context
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.gestures.LocalBringIntoViewSpec
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -11,6 +13,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -23,6 +26,7 @@ import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.focusRestorer
 import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
@@ -47,6 +51,7 @@ import com.github.damontecres.wholphin.ui.listToDotString
 import com.github.damontecres.wholphin.ui.main.HomePageHeader
 import com.github.damontecres.wholphin.ui.rememberPosition
 import com.github.damontecres.wholphin.ui.tryRequestFocus
+import com.github.damontecres.wholphin.ui.util.ScrollToTopBringIntoViewSpec
 import com.github.damontecres.wholphin.util.DataLoadingState
 import com.google.common.cache.CacheBuilder
 import dagger.hilt.android.lifecycle.HiltViewModel
@@ -186,6 +191,7 @@ data class DiscoverState(
     val upcomingTv: DiscoverRowData = DiscoverRowData.EMPTY,
 )
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun SeerrDiscoverPage(
     preferences: UserPreferences,
@@ -249,6 +255,16 @@ fun SeerrDiscoverPage(
                     .padding(top = 24.dp, bottom = 16.dp, start = 32.dp)
                     .fillMaxHeight(.25f),
         )
+        val density = LocalDensity.current
+        val spaceAbovePx =
+            with(density) {
+                // The size of the row titles & spacing
+                50.dp.toPx()
+            }
+        val defaultBringIntoViewSpec = LocalBringIntoViewSpec.current
+        CompositionLocalProvider(
+            LocalBringIntoViewSpec provides ScrollToTopBringIntoViewSpec(spaceAbovePx),
+        ) {
             LazyColumn(
                 verticalArrangement = Arrangement.spacedBy(8.dp),
                 contentPadding = PaddingValues(start = 16.dp, end = 16.dp, bottom = 40.dp),
@@ -258,6 +274,7 @@ fun SeerrDiscoverPage(
                         .fillMaxSize(),
             ) {
                 itemsIndexed(rows) { rowIndex, row ->
+                    CompositionLocalProvider(LocalBringIntoViewSpec provides defaultBringIntoViewSpec) {
                         DiscoverRow(
                             row = row,
                             onClickItem = { index, item ->
@@ -274,6 +291,8 @@ fun SeerrDiscoverPage(
                     }
                 }
             }
+        }
+    }
 }
 
 @Composable

app/src/main/java/com/github/damontecres/wholphin/ui/main/HomePage.kt

@@ -1,8 +1,10 @@
 package com.github.damontecres.wholphin.ui.main
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.focusGroup
 import androidx.compose.foundation.focusable
+import androidx.compose.foundation.gestures.LocalBringIntoViewSpec
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -19,6 +21,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
@@ -34,6 +37,7 @@ import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.key.onKeyEvent
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.font.FontWeight
@@ -69,6 +73,7 @@ import com.github.damontecres.wholphin.ui.playback.isPlayKeyUp
 import com.github.damontecres.wholphin.ui.playback.playable
 import com.github.damontecres.wholphin.ui.rememberPosition
 import com.github.damontecres.wholphin.ui.tryRequestFocus
+import com.github.damontecres.wholphin.ui.util.ScrollToTopBringIntoViewSpec
 import com.github.damontecres.wholphin.util.HomeRowLoadingState
 import com.github.damontecres.wholphin.util.LoadingState
 import kotlinx.coroutines.delay
@@ -183,6 +188,7 @@ fun HomePage(
     }
 }
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun HomePageContent(
     homeRows: List<HomeRowLoadingState>,
@@ -223,14 +229,15 @@ fun HomePageContent(
             }
         }
     }
-    LaunchedEffect(position) {
-        if (position.row >= 0) {
-            listState.animateScrollToItem(position.row)
-        }
-    }
     LaunchedEffect(onUpdateBackdrop, focusedItem) {
         focusedItem?.let { onUpdateBackdrop.invoke(it) }
     }
+    val density = LocalDensity.current
+    val spaceAbovePx =
+        with(density) {
+            // The size of the row titles & spacing
+            50.dp.toPx()
+        }
     Box(modifier = modifier) {
         Column(modifier = Modifier.fillMaxSize()) {
             HomePageHeader(
@@ -240,6 +247,10 @@ fun HomePageContent(
                         .padding(top = 48.dp, bottom = 32.dp, start = 8.dp)
                         .fillMaxHeight(.33f),
             )
+            val defaultBringIntoViewSpec = LocalBringIntoViewSpec.current
+            CompositionLocalProvider(
+                LocalBringIntoViewSpec provides ScrollToTopBringIntoViewSpec(spaceAbovePx),
+            ) {
                 LazyColumn(
                     state = listState,
                     verticalArrangement = Arrangement.spacedBy(8.dp),
@@ -252,6 +263,7 @@ fun HomePageContent(
                             .focusRestorer(),
                 ) {
                     itemsIndexed(homeRows) { rowIndex, row ->
+                        CompositionLocalProvider(LocalBringIntoViewSpec provides defaultBringIntoViewSpec) {
                             when (val r = row) {
                                 is HomeRowLoadingState.Loading,
                                 is HomeRowLoadingState.Pending,
@@ -313,7 +325,10 @@ fun HomePageContent(
                                                 onClickItem.invoke(RowColumn(rowIndex, index), item)
                                             },
                                             onLongClickItem = { index, item ->
-                                        onLongClickItem.invoke(RowColumn(rowIndex, index), item)
+                                                onLongClickItem.invoke(
+                                                    RowColumn(rowIndex, index),
+                                                    item,
+                                                )
                                             },
                                             modifier =
                                                 Modifier
@@ -338,7 +353,8 @@ fun HomePageContent(
                                                         cardModifier
                                                             .onFocusChanged {
                                                                 if (it.isFocused) {
-                                                            position = RowColumn(rowIndex, index)
+                                                                    position =
+                                                                        RowColumn(rowIndex, index)
 //                                                            item?.let(onUpdateBackdrop)
                                                                 }
                                                                 if (it.isFocused && onFocusPosition != null) {
@@ -358,7 +374,10 @@ fun HomePageContent(
                                                             }.onKeyEvent {
                                                                 if (isPlayKeyUp(it) && item?.type?.playable == true) {
                                                                     Timber.v("Clicked play on ${item.id}")
-                                                            onClickPlay.invoke(position, item)
+                                                                    onClickPlay.invoke(
+                                                                        position,
+                                                                        item,
+                                                                    )
                                                                     return@onKeyEvent true
                                                                 }
                                                                 return@onKeyEvent false
@@ -374,6 +393,8 @@ fun HomePageContent(
                         }
                     }
                 }
+            }
+        }
         when (loadingState) {
             LoadingState.Pending,
             LoadingState.Loading,

app/src/main/java/com/github/damontecres/wholphin/ui/util/ScrollToTopBringIntoViewSpec.kt

@@ -0,0 +1,44 @@
+package com.github.damontecres.wholphin.ui.util
+
+import androidx.compose.foundation.gestures.BringIntoViewSpec
+import androidx.compose.foundation.gestures.LocalBringIntoViewSpec
+import androidx.compose.foundation.lazy.LazyColumn
+
+/**
+ * Overrides scrolling so that the item being scrolled to is at the top of the view offset by the provided pixels
+ *
+ * Note: the offset is necessary for anything that is focuseable, but has content before (eg a title) that needs to be displayed too
+ *
+ * Note: this applies to ALL scrollable composables within its scope, so a [LazyColumn] of [androidx.compose.foundation.lazy.LazyRow]s likely needs nested [LocalBringIntoViewSpec] overrides
+ *
+ * Example:
+ * ```kotlin
+ * val defaultBringIntoViewSpec = LocalBringIntoViewSpec.current
+ * CompositionLocalProvider(LocalBringIntoViewSpec provides ScrollToTopBringIntoViewSpec(spaceAbovePx)) {
+ *     LazyColumn{
+ *         items(list){
+ *             CompositionLocalProvider(LocalBringIntoViewSpec provides defaultBringIntoViewSpec) {
+ *                 // Content
+ *             }
+ *         }
+ *     }
+ * }
+ * ```
+ */
+class ScrollToTopBringIntoViewSpec(
+    val spaceAbovePx: Float = 100f,
+) : BringIntoViewSpec {
+    override fun calculateScrollDistance(
+        offset: Float,
+        size: Float,
+        containerSize: Float,
+    ): Float {
+//        Timber.v(
+//            "calculateScrollDistance: offset=%s, size=%s, containerSize=%s",
+//            offset,
+//            size,
+//            containerSize,
+//        )
+        return offset - spaceAbovePx
+    }
+}