Feature/15 swipe away mini player (#73)

GrakovNe · Dec 2, 2024 · d140fd9 · d140fd9
1 parent 5cc540a
commit d140fd9
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 79 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -25,8 +25,8 @@ android {
         applicationId = "org.grakovne.lissen"
         minSdk = 28
         targetSdk = 35
-        versionCode = 45
-        versionName = "1.1.14"
+        versionCode = 46
+        versionName = "1.1.15"
 
         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
@@ -25,6 +25,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.MaterialTheme.colorScheme
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
@@ -235,12 +236,14 @@ fun LibraryScreen(
         },
         bottomBar = {
             playingBook?.let {
-                MiniPlayerComposable(
-                    navController = navController,
-                    book = it,
-                    imageLoader = imageLoader,
-                    playerViewModel = playerViewModel,
-                )
+                Surface(shadowElevation = 4.dp) {
+                    MiniPlayerComposable(
+                        navController = navController,
+                        book = it,
+                        imageLoader = imageLoader,
+                        playerViewModel = playerViewModel,
+                    )
+                }
             }
         },
         modifier = Modifier

diff --git a/app/src/main/java/org/grakovne/lissen/ui/screens/library/composables/MiniPlayerComposable.kt b/app/src/main/java/org/grakovne/lissen/ui/screens/library/composables/MiniPlayerComposable.kt
@@ -1,28 +1,41 @@
 package org.grakovne.lissen.ui.screens.library.composables
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.material.icons.outlined.Close
 import androidx.compose.material.icons.outlined.Pause
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
+import androidx.compose.material3.MaterialTheme.colorScheme
+import androidx.compose.material3.MaterialTheme.typography
+import androidx.compose.material3.SwipeToDismissBox
+import androidx.compose.material3.SwipeToDismissBoxValue
 import androidx.compose.material3.Text
+import androidx.compose.material3.rememberSwipeToDismissBoxState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -43,87 +56,160 @@ import org.grakovne.lissen.viewmodel.PlayerViewModel
 @Composable
 fun MiniPlayerComposable(
     navController: AppNavigationService,
-    modifier: Modifier = Modifier,
     book: DetailedItem,
     imageLoader: ImageLoader,
     playerViewModel: PlayerViewModel,
 ) {
     val isPlaying: Boolean by playerViewModel.isPlaying.observeAsState(false)
+    var backgroundVisible by remember { mutableStateOf(true) }
 
-    Surface(
-        shadowElevation = 4.dp,
-        modifier = modifier.clickable { navController.showPlayer(book.id, book.title) },
-    ) {
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(horizontal = 20.dp, vertical = 8.dp),
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            val context = LocalContext.current
-            val imageRequest = remember(book.id) {
-                ImageRequest.Builder(context)
-                    .data(book.id)
-                    .size(coil.size.Size.ORIGINAL)
-                    .build()
-            }
+    val dismissState = rememberSwipeToDismissBoxState(
+        positionalThreshold = { it * 0.2f },
+        confirmValueChange = { newValue: SwipeToDismissBoxValue ->
+            when (newValue) {
+                SwipeToDismissBoxValue.EndToStart,
+                SwipeToDismissBoxValue.StartToEnd,
+                -> {
+                    backgroundVisible = false
+                    true
+                }
 
-            AsyncShimmeringImage(
-                imageRequest = imageRequest,
-                imageLoader = imageLoader,
-                contentDescription = "${book.title} cover",
-                contentScale = ContentScale.FillBounds,
-                modifier = Modifier
-                    .size(48.dp)
-                    .aspectRatio(1f)
-                    .clip(RoundedCornerShape(4.dp)),
-                error = painterResource(R.drawable.cover_fallback),
-            )
+                else -> false
+            }
+        },
+    )
 
-            Spacer(modifier = Modifier.width(16.dp))
+    LaunchedEffect(dismissState.currentValue) {
+        if (dismissState.currentValue != SwipeToDismissBoxValue.Settled) {
+            playerViewModel.clearPlayingBook()
+        }
+    }
 
-            Column(
-                modifier = Modifier.weight(1f),
+    SwipeToDismissBox(
+        state = dismissState,
+        backgroundContent = {
+            Row(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(horizontal = 12.dp),
+                horizontalArrangement = when (dismissState.targetValue) {
+                    SwipeToDismissBoxValue.StartToEnd -> Arrangement.Start
+                    SwipeToDismissBoxValue.EndToStart -> Arrangement.End
+                    SwipeToDismissBoxValue.Settled -> Arrangement.Center
+                },
+                verticalAlignment = Alignment.CenterVertically,
             ) {
-                Text(
-                    text = book.title,
-                    style = MaterialTheme.typography.bodyMedium.copy(
-                        fontWeight = FontWeight.SemiBold,
-                        color = MaterialTheme.colorScheme.onBackground,
-                    ),
-                    maxLines = 2,
-                    overflow = TextOverflow.Ellipsis,
-                )
-                book
-                    .author
-                    ?.let {
-                        Text(
-                            text = it,
-                            style = MaterialTheme.typography.bodyMedium.copy(
-                                color = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.6f),
-                            ),
-                            maxLines = 1,
-                            overflow = TextOverflow.Ellipsis,
-                        )
-                    }
+                AnimatedVisibility(
+                    visible = backgroundVisible,
+                    exit = fadeOut(animationSpec = tween(300)),
+                ) {
+                    CloseActionBackground()
+                }
             }
-
-            Column(
-                horizontalAlignment = Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.Center,
+        },
+    ) {
+        AnimatedVisibility(
+            visible = backgroundVisible,
+            exit = fadeOut(animationSpec = tween(300)),
+        ) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(colorScheme.background)
+                    .clickable { navController.showPlayer(book.id, book.title) }
+                    .padding(horizontal = 20.dp, vertical = 8.dp),
+                verticalAlignment = Alignment.CenterVertically,
             ) {
-                Row {
-                    IconButton(
-                        onClick = { playerViewModel.togglePlayPause() },
-                    ) {
-                        Icon(
-                            imageVector = if (isPlaying) Icons.Outlined.Pause else Icons.Filled.PlayArrow,
-                            contentDescription = if (isPlaying) "Pause" else "Play",
-                            modifier = Modifier.size(36.dp),
-                        )
+                val context = LocalContext.current
+                val imageRequest = remember(book.id) {
+                    ImageRequest.Builder(context)
+                        .data(book.id)
+                        .size(coil.size.Size.ORIGINAL)
+                        .build()
+                }
+
+                AsyncShimmeringImage(
+                    imageRequest = imageRequest,
+                    imageLoader = imageLoader,
+                    contentDescription = "${book.title} cover",
+                    contentScale = ContentScale.FillBounds,
+                    modifier = Modifier
+                        .size(48.dp)
+                        .aspectRatio(1f)
+                        .clip(RoundedCornerShape(4.dp)),
+                    error = painterResource(R.drawable.cover_fallback),
+                )
+
+                Spacer(modifier = Modifier.width(16.dp))
+
+                Column(
+                    modifier = Modifier.weight(1f),
+                ) {
+                    Text(
+                        text = book.title,
+                        style = typography.bodyMedium.copy(
+                            fontWeight = FontWeight.SemiBold,
+                            color = colorScheme.onBackground,
+                        ),
+                        maxLines = 2,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                    book
+                        .author
+                        ?.let {
+                            Text(
+                                text = it,
+                                style = typography.bodyMedium.copy(
+                                    color = colorScheme.onBackground.copy(alpha = 0.6f),
+                                ),
+                                maxLines = 1,
+                                overflow = TextOverflow.Ellipsis,
+                            )
+                        }
+                }
+
+                Column(
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.Center,
+                ) {
+                    Row {
+                        IconButton(
+                            onClick = { playerViewModel.togglePlayPause() },
+                        ) {
+                            Icon(
+                                imageVector = if (isPlaying) Icons.Outlined.Pause else Icons.Filled.PlayArrow,
+                                contentDescription = if (isPlaying) "Pause" else "Play",
+                                modifier = Modifier.size(36.dp),
+                            )
+                        }
                     }
                 }
             }
         }
     }
 }
+
+@Composable
+fun CloseActionBackground() {
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = Modifier
+            .width(80.dp)
+            .padding(vertical = 8.dp),
+    ) {
+        Icon(
+            imageVector = Icons.Outlined.Close,
+            contentDescription = "Close",
+            tint = colorScheme.onSurface,
+            modifier = Modifier.size(24.dp),
+        )
+
+        Spacer(modifier = Modifier.height(4.dp))
+
+        Text(
+            text = "Close",
+            style = typography.labelSmall,
+            color = colorScheme.onSurface,
+        )
+    }
+}
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -22,7 +22,7 @@ loggingInterceptor = "4.11.0"
 material = "1.7.5"
 material3 = "1.3.1"
 materialVersion = "1.12.0"
-media3Exoplayer = "1.4.1"
+media3Exoplayer = "1.5.0"
 navigationCompose = "2.8.4"
 okhttp = "4.12.0"
 pagingCompose = "3.3.4"
@@ -31,8 +31,8 @@ retrofit = "2.9.0"
 roomRuntime = "2.6.1"
 rules = "1.6.1"
 runtimeLivedata = "1.7.5"
-media3Session = "1.4.1"
-media3DatasourceOkhttp = "1.4.1"
+media3Session = "1.5.0"
+media3DatasourceOkhttp = "1.5.0"
 
 [libraries]
 accompanist-systemuicontroller = { module = "com.google.accompanist:accompanist-systemuicontroller", version.ref = "accompanistSystemuicontroller" }