Feature/97 show percentage progress on recent audiobooks (#111)

GrakovNe · Jan 27, 2025 · 42312d5 · 42312d5
1 parent 2d071b4
commit 42312d5
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 55 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -29,8 +29,8 @@ android {
         applicationId = "org.grakovne.lissen"
         minSdk = 28
         targetSdk = 35
-        versionCode = 63
-        versionName = "1.2.2"
+        versionCode = 64
+        versionName = "1.2.3"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
         vectorDrawables {

diff --git a/app/src/main/java/org/grakovne/lissen/ui/screens/library/LibraryScreen.kt b/app/src/main/java/org/grakovne/lissen/ui/screens/library/LibraryScreen.kt
@@ -273,7 +273,9 @@ fun LibraryScreen(
 
                         when {
                             isPlaceholderRequired -> {
-                                RecentBooksPlaceholderComposable()
+                                RecentBooksPlaceholderComposable(
+                                    libraryViewModel = libraryViewModel,
+                                )
                                 Spacer(modifier = Modifier.height(20.dp))
                             }
 

diff --git a/...src/main/java/org/grakovne/lissen/ui/screens/library/composables/RecentBooksComposable.kt b/...src/main/java/org/grakovne/lissen/ui/screens/library/composables/RecentBooksComposable.kt
@@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.MaterialTheme.typography
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -106,53 +107,71 @@ fun RecentBookItemComposable(
                 .build()
         }
 
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .clip(RoundedCornerShape(8.dp))
-                .aspectRatio(1f),
+        Column(
+            modifier = Modifier.fillMaxWidth(),
         ) {
-            AsyncShimmeringImage(
-                imageRequest = imageRequest,
-                imageLoader = imageLoader,
-                contentDescription = "${book.title} cover",
-                contentScale = ContentScale.FillBounds,
+            Box(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .clip(RoundedCornerShape(8.dp)),
-                error = painterResource(R.drawable.cover_fallback),
-                onLoadingStateChanged = { coverLoading = it },
-            )
+                    .clip(RoundedCornerShape(8.dp))
+                    .aspectRatio(1f),
+            ) {
+                AsyncShimmeringImage(
+                    imageRequest = imageRequest,
+                    imageLoader = imageLoader,
+                    contentDescription = "${book.title} cover",
+                    contentScale = ContentScale.FillBounds,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .clip(RoundedCornerShape(8.dp)),
+                    error = painterResource(R.drawable.cover_fallback),
+                    onLoadingStateChanged = { coverLoading = it },
+                )
+            }
 
-            if (!coverLoading && shouldShowProgress(book, libraryViewModel.fetchPreferredLibraryType())) {
-                Box(
+            if (libraryViewModel.fetchPreferredLibraryType() == LibraryType.LIBRARY) {
+                Row(
                     modifier = Modifier
                         .fillMaxWidth()
-                        .height(4.dp)
-                        .align(Alignment.BottomCenter),
+                        .padding(horizontal = 2.dp),
+                    verticalAlignment = Alignment.CenterVertically,
                 ) {
                     Box(
                         modifier = Modifier
-                            .fillMaxSize()
-                            .background(Color.Gray.copy(alpha = 0.4f)),
-                    )
+                            .weight(1f)
+                            .height(2.dp),
+                    ) {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .clip(RoundedCornerShape(8.dp))
+                                .background(Color.Gray.copy(alpha = 0.4f)),
+                        )
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth(calculateProgress(book))
+                                .clip(RoundedCornerShape(8.dp))
+                                .fillMaxHeight()
+                                .background(FoxOrange),
+                        )
+                    }
 
-                    Box(
-                        modifier = Modifier
-                            .fillMaxWidth(calculateProgress(book))
-                            .fillMaxHeight()
-                            .background(FoxOrange),
+                    Text(
+                        text = "${(calculateProgress(book) * 100).toInt()}%",
+                        fontSize = typography.bodySmall.fontSize,
+                        fontWeight = FontWeight.SemiBold,
+                        modifier = Modifier.padding(start = 12.dp),
                     )
                 }
+            } else {
+                Spacer(modifier = Modifier.height(8.dp))
             }
         }
 
-        Spacer(modifier = Modifier.height(8.dp))
-
         Column(modifier = Modifier.padding(horizontal = 4.dp)) {
             Text(
                 text = book.title,
-                style = MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.SemiBold),
+                style = typography.bodyMedium.copy(fontWeight = FontWeight.SemiBold),
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
             )
@@ -178,8 +197,3 @@ fun RecentBookItemComposable(
 private fun calculateProgress(book: RecentBook): Float {
     return book.listenedPercentage?.div(100.0f) ?: 0.0f
 }
-
-private fun shouldShowProgress(book: RecentBook, libraryType: LibraryType): Boolean =
-    book.listenedPercentage != null &&
-        libraryType == LibraryType.LIBRARY &&
-        book.listenedPercentage > 0
diff --git a/...vne/lissen/ui/screens/library/composables/placeholder/RecentBooksPlaceholderComposable.kt b/...vne/lissen/ui/screens/library/composables/placeholder/RecentBooksPlaceholderComposable.kt
@@ -24,10 +24,13 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.valentinilk.shimmer.shimmer
+import org.grakovne.lissen.channel.common.LibraryType
+import org.grakovne.lissen.viewmodel.LibraryViewModel
 
 @Composable
 fun RecentBooksPlaceholderComposable(
     itemCount: Int = 5,
+    libraryViewModel: LibraryViewModel,
 ) {
     val configuration = LocalConfiguration.current
     val screenWidth = remember { configuration.screenWidthDp.dp }
@@ -42,13 +45,19 @@ fun RecentBooksPlaceholderComposable(
         horizontalArrangement = Arrangement.spacedBy(16.dp),
         modifier = Modifier.fillMaxWidth(),
     ) {
-        items(itemCount) { RecentBookItemComposable(width = itemWidth) }
+        items(itemCount) {
+            RecentBookItemComposable(
+                width = itemWidth,
+                libraryViewModel = libraryViewModel,
+            )
+        }
     }
 }
 
 @Composable
 fun RecentBookItemComposable(
     width: Dp,
+    libraryViewModel: LibraryViewModel,
 ) {
     Column(
         modifier = Modifier
@@ -63,7 +72,11 @@ fun RecentBookItemComposable(
                 .background(Color.Gray),
         )
 
-        Spacer(modifier = Modifier.height(8.dp))
+        if (libraryViewModel.fetchPreferredLibraryType() == LibraryType.LIBRARY) {
+            Spacer(modifier = Modifier.height(14.dp))
+        } else {
+            Spacer(modifier = Modifier.height(8.dp))
+        }
 
         Column(modifier = Modifier.padding(horizontal = 4.dp)) {
             Text(
@@ -76,23 +89,19 @@ fun RecentBookItemComposable(
                     .shimmer()
                     .background(Color.Gray),
             )
+            if (libraryViewModel.fetchPreferredLibraryType() == LibraryType.LIBRARY) {
+                Spacer(modifier = Modifier.height(6.dp))
 
-            Spacer(modifier = Modifier.height(4.dp))
-
-            Text(
-                color = Color.Transparent,
-                text = "Fyodor Dostoevsky",
-                style = MaterialTheme.typography.bodySmall.copy(
-                    color = MaterialTheme.colorScheme.onBackground.copy(
-                        alpha = 0.6f,
-                    ),
-                ),
-                maxLines = 1,
-                modifier = Modifier
-                    .clip(RoundedCornerShape(4.dp))
-                    .shimmer()
-                    .background(Color.Gray),
-            )
+                Text(
+                    color = Color.Transparent,
+                    text = "Fyodor Dostoevsky",
+                    maxLines = 1,
+                    modifier = Modifier
+                        .clip(RoundedCornerShape(4.dp))
+                        .shimmer()
+                        .background(Color.Gray),
+                )
+            }
         }
     }
 }