[feature/optimize-gallery-paging3-android] Integrate Paging3 for PeekabooGallery in Android

gradle/libs.versions.toml

@@ -7,6 +7,7 @@ compose-ui = "1.5.4"
 compose-foundation = "1.5.4"
 compose-material3 = "1.1.2"
 androidx-activityCompose = "1.8.2"
+androidx-lifecycleViewmodelCompose = "2.7.0"
 nexus-publish = "2.0.0-rc-1"
 spotless = "6.25.0"
 ktlint = "1.0.1"
@@ -22,6 +23,7 @@ material = "1.11.0"
 accompanist = "0.32.0"
 camerax = "1.3.1"
 exifinterface = "1.3.7"
+multiplatform-paging = "3.3.0-alpha02-0.4.0"
 
 [libraries]
 kotlin-test = { module = "org.jetbrains.kotlin:kotlin-test", version.ref = "kotlin" }
@@ -44,6 +46,9 @@ camera-camera2 = { group = "androidx.camera", name = "camera-camera2", version.r
 camera-lifecycle = { group = "androidx.camera", name = "camera-lifecycle", version.ref = "camerax" }
 camera-view = { group = "androidx.camera", name = "camera-view", version.ref = "camerax" }
 androidx-exifinterface = { group = "androidx.exifinterface", name = "exifinterface", version.ref = "exifinterface" }
+androidx-lifecycle-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "androidx-lifecycleViewmodelCompose" }
+paging-common = { module = "app.cash.paging:paging-common", version.ref = "multiplatform-paging" }
+paging-compose-common = { module = "app.cash.paging:paging-compose-common", version.ref = "multiplatform-paging" }
 
 [plugins]
 androidApplication = { id = "com.android.application", version.ref = "agp" }

peekaboo-ui/build.gradle.kts

@@ -40,12 +40,15 @@ kotlin {
             implementation(compose.foundation)
             implementation(compose.material)
             implementation(libs.components.resources)
+            implementation(libs.paging.common)
+            implementation(libs.paging.compose.common)
         }
         commonTest.dependencies {
             implementation(libs.kotlin.test)
         }
         androidMain.dependencies {
             implementation(libs.androidx.activity.compose)
+            implementation(libs.androidx.lifecycle.viewmodel.compose)
             implementation(libs.accompanist.permissions)
             implementation(libs.camera.camera2)
             implementation(libs.camera.lifecycle)

peekaboo-ui/src/androidMain/kotlin/com/preat/peekaboo/ui/gallery/PeekabooGallery.android.kt

@@ -27,33 +27,35 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.lazy.grid.GridCells
-import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
-import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
+import androidx.lifecycle.viewmodel.compose.viewModel
+import app.cash.paging.compose.LazyPagingItems
+import app.cash.paging.compose.collectAsLazyPagingItems
 import com.google.accompanist.permissions.ExperimentalPermissionsApi
 import com.google.accompanist.permissions.isGranted
 import com.google.accompanist.permissions.rememberPermissionState
 import com.google.accompanist.permissions.shouldShowRationale
+import com.preat.peekaboo.ui.gallery.model.PeekabooMediaImage
+import com.preat.peekaboo.ui.gallery.repository.PeekabooGalleryRepositoryImpl
+import com.preat.peekaboo.ui.gallery.viewmodel.PeekabooGalleryViewModel
+import com.preat.peekaboo.ui.gallery.viewmodel.PeekabooGalleryViewModelFactory
 import java.io.ByteArrayOutputStream
 
 @OptIn(ExperimentalMaterialApi::class, ExperimentalPermissionsApi::class)
@@ -70,7 +72,6 @@ actual fun PeekabooGallery(
     onImageSelected: (ByteArray?) -> Unit,
 ) {
     val context = LocalContext.current
-    var isLoading by remember { mutableStateOf(true) }
 
     val storagePermissionState =
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
@@ -83,46 +84,59 @@ actual fun PeekabooGallery(
             )
         }
 
+    val peekabooGalleryViewModel: PeekabooGalleryViewModel =
+        viewModel(
+            factory =
+                PeekabooGalleryViewModelFactory(
+                    PeekabooGalleryRepositoryImpl(
+                        context,
+                    ),
+                ),
+        )
+
+    val lazyPeekabooGalleryImages: LazyPagingItems<PeekabooMediaImage> =
+        peekabooGalleryViewModel.getImages().collectAsLazyPagingItems()
+
     Box(modifier = modifier.background(backgroundColor)) {
         if (storagePermissionState.status.isGranted) {
-            val photos =
-                rememberMediaPhotos(
-                    context = context,
-                    onPhotosLoaded = { loaded ->
-                        isLoading = !loaded
-                    },
-                )
+            Column(modifier = modifier.background(backgroundColor)) {
+                header()
 
-            if (isLoading) {
-                progressIndicator()
-            } else {
                 LazyVerticalGrid(
                     columns = GridCells.Fixed(state.columns),
                     state = lazyGridState,
                     contentPadding = PaddingValues(horizontal = state.contentPadding.dp),
                     horizontalArrangement = Arrangement.spacedBy(state.itemSpacing.dp),
                     verticalArrangement = Arrangement.spacedBy(state.itemSpacing.dp),
                 ) {
-                    item(span = { GridItemSpan(maxLineSpan) }) {
-                        header()
-                    }
                     items(
-                        items = photos,
-                        key = { it.uri },
-                    ) { photo ->
-                        val bitmap = getOriginalImageByteArray(context, photo.uri)?.toBitmap()
-                        bitmap?.let {
-                            Card(
-                                shape = RoundedCornerShape(state.cornerSize.dp),
-                                modifier = Modifier.aspectRatio(1f),
-                                onClick = { onImageSelected(getOriginalImageByteArray(context, photo.uri)) },
-                            ) {
-                                Image(
-                                    bitmap = it.asImageBitmap(),
-                                    contentDescription = null,
-                                    contentScale = ContentScale.Crop,
-                                    modifier = Modifier.clip(shape = RoundedCornerShape(state.cornerSize.dp)),
-                                )
+                        count = lazyPeekabooGalleryImages.itemCount,
+                        key = { index ->
+                            lazyPeekabooGalleryImages.peek(index)?.id ?: index
+                        },
+                    ) { index ->
+                        lazyPeekabooGalleryImages[index]?.let { photo ->
+                            val bitmap = getOriginalImageByteArray(context, photo.uri)?.toBitmap()
+                            bitmap?.let {
+                                Card(
+                                    shape = RoundedCornerShape(state.cornerSize.dp),
+                                    modifier = Modifier.aspectRatio(1f),
+                                    onClick = {
+                                        onImageSelected(
+                                            getOriginalImageByteArray(
+                                                context,
+                                                photo.uri,
+                                            ),
+                                        )
+                                    },
+                                ) {
+                                    Image(
+                                        bitmap = it.asImageBitmap(),
+                                        contentDescription = null,
+                                        contentScale = ContentScale.Crop,
+                                        modifier = Modifier.clip(shape = RoundedCornerShape(state.cornerSize.dp)),
+                                    )
+                                }
                             }
                         }
                     }

peekaboo-ui/src/androidMain/kotlin/com/preat/peekaboo/ui/gallery/datasource/PeekabooGalleryDataSource.kt

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2024 onseok
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.preat.peekaboo.ui.gallery.datasource
+
+import app.cash.paging.PagingSource
+import app.cash.paging.PagingState
+import com.preat.peekaboo.ui.gallery.model.PeekabooMediaImage
+
+internal class PeekabooGalleryDataSource(
+    private val onFetch: (limit: Int, offset: Int) -> List<PeekabooMediaImage>,
+) : PagingSource<Int, PeekabooMediaImage>() {
+    override fun getRefreshKey(state: PagingState<Int, PeekabooMediaImage>): Int? {
+        return state.anchorPosition?.let {
+            state.closestPageToPosition(it)?.prevKey?.plus(1)
+                ?: state.closestPageToPosition(it)?.nextKey?.minus(1)
+        }
+    }
+
+    override suspend fun load(params: LoadParams<Int>): LoadResult<Int, PeekabooMediaImage> {
+        val pageNumber = params.key ?: 0
+        val pageSize = params.loadSize
+        val pictures = onFetch.invoke(pageSize, pageNumber * pageSize)
+        val prevKey = if (pageNumber > 0) pageNumber.minus(1) else null
+        val nextKey = if (pictures.isNotEmpty()) pageNumber.plus(1) else null
+
+        return LoadResult.Page(
+            data = pictures,
+            prevKey = prevKey,
+            nextKey = nextKey,
+        )
+    }
+}

peekaboo-ui/src/androidMain/kotlin/com/preat/peekaboo/ui/gallery/model/PeekabooMediaImage.kt

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2024 onseok
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.preat.peekaboo.ui.gallery.model
+
+import android.net.Uri
+
+internal data class PeekabooMediaImage(
+    val id: Long,
+    val uri: Uri,
+    val name: String?,
+)

peekaboo-ui/src/androidMain/kotlin/com/preat/peekaboo/ui/gallery/repository/PeekabooGalleryRepository.kt

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2024 onseok
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package com.preat.peekaboo.ui.gallery.repository
+
+import app.cash.paging.PagingSource
+import com.preat.peekaboo.ui.gallery.model.PeekabooMediaImage
+
+internal interface PeekabooGalleryRepository {
+    suspend fun getCount(): Int
+
+    suspend fun getByOffset(offset: Int): PeekabooMediaImage?
+
+    fun getPicturePagingSource(): PagingSource<Int, PeekabooMediaImage>
+}