Improve sleep timer menu entry UI

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/MediaItemMenu.kt

@@ -1,11 +1,11 @@
 package it.vfsfitvnm.vimusic.ui.components.themed
 
 import android.content.Intent
-import android.text.format.DateUtils
 import androidx.activity.compose.BackHandler
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedContentScope
 import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.animation.animateContentSize
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.with
 import androidx.compose.foundation.Image
@@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredHeight
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicText
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -41,6 +42,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import androidx.media3.common.MediaItem
+import it.vfsfitvnm.innertube.models.NavigationEndpoint
 import it.vfsfitvnm.vimusic.Database
 import it.vfsfitvnm.vimusic.LocalPlayerServiceBinder
 import it.vfsfitvnm.vimusic.R
@@ -63,9 +65,10 @@ import it.vfsfitvnm.vimusic.utils.addNext
 import it.vfsfitvnm.vimusic.utils.asMediaItem
 import it.vfsfitvnm.vimusic.utils.enqueue
 import it.vfsfitvnm.vimusic.utils.forcePlay
+import it.vfsfitvnm.vimusic.utils.formatAsDuration
+import it.vfsfitvnm.vimusic.utils.medium
 import it.vfsfitvnm.vimusic.utils.semiBold
 import it.vfsfitvnm.vimusic.utils.thumbnail
-import it.vfsfitvnm.innertube.models.NavigationEndpoint
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.flowOf
@@ -348,10 +351,7 @@ fun MediaItemMenu(
                             secondaryText = "${playlistPreview.songCount} songs",
                             onClick = {
                                 onDismiss()
-                                onAddToPlaylist(
-                                    playlistPreview.playlist,
-                                    playlistPreview.songCount
-                                )
+                                onAddToPlaylist(playlistPreview.playlist, playlistPreview.songCount)
                             }
                         )
                     }
@@ -493,19 +493,16 @@ fun MediaItemMenu(
                                 text = "Do you want to stop the sleep timer?",
                                 cancelText = "No",
                                 confirmText = "Stop",
-                                onDismiss = {
-                                    isShowingSleepTimerDialog = false
-                                    onDismiss()
-                                },
+                                onDismiss = { isShowingSleepTimerDialog = false },
                                 onConfirm = {
                                     binder?.cancelSleepTimer()
                                     onDismiss()
                                 }
                             )
                         } else {
-                            DefaultDialog(onDismiss = {
-                                isShowingSleepTimerDialog = false
-                            }) {
+                            DefaultDialog(
+                                onDismiss = { isShowingSleepTimerDialog = false }
+                            ) {
                                 var amount by remember {
                                     mutableStateOf(1)
                                 }
@@ -577,10 +574,7 @@ fun MediaItemMenu(
                                 ) {
                                     DialogTextButton(
                                         text = "Cancel",
-                                        onClick = {
-                                            isShowingSleepTimerDialog = false
-                                            onDismiss()
-                                        }
+                                        onClick = { isShowingSleepTimerDialog = false }
                                     )
 
                                     DialogTextButton(
@@ -590,7 +584,6 @@ fun MediaItemMenu(
                                         onClick = {
                                             binder?.startSleepTimer(amount * 10 * 60 * 1000L)
                                             isShowingSleepTimerDialog = false
-                                            onDismiss()
                                         }
                                     )
                                 }
@@ -601,15 +594,18 @@ fun MediaItemMenu(
                     MenuEntry(
                         icon = R.drawable.alarm,
                         text = "Sleep timer",
-                        secondaryText = sleepTimerMillisLeft?.let {
-                            "${
-                                DateUtils.formatElapsedTime(
-                                    it / 1000
+                        onClick = { isShowingSleepTimerDialog = true },
+                        trailingContent = sleepTimerMillisLeft?.let {
+                            {
+                                BasicText(
+                                    text = "${formatAsDuration(it)} left",
+                                    style = typography.xxs.medium,
+                                    modifier = modifier
+                                        .background(color = colorPalette.background0, shape = RoundedCornerShape(16.dp))
+                                        .padding(horizontal = 16.dp, vertical = 8.dp)
+                                        .animateContentSize()
                                 )
-                            } left"
-                        },
-                        onClick = {
-                            isShowingSleepTimerDialog = true
+                            }
                         }
                     )
                 }

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/Menu.kt

@@ -1,7 +1,6 @@
 package it.vfsfitvnm.vimusic.ui.components.themed
 
 import androidx.annotation.DrawableRes
-import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -65,7 +64,7 @@ fun MenuEntry(
             .clickable(enabled = enabled, onClick = onClick)
             .fillMaxWidth()
             .alpha(if (enabled) 1f else 0.4f)
-            .padding(horizontal = 24.dp, vertical = 16.dp)
+            .padding(horizontal = 24.dp)
     ) {
         Image(
             painter = painterResource(icon),
@@ -77,6 +76,7 @@ fun MenuEntry(
 
         Column(
             modifier = Modifier
+                .padding(vertical = 16.dp)
                 .weight(1f)
         ) {
             BasicText(

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/player/Controls.kt

@@ -1,6 +1,5 @@
 package it.vfsfitvnm.vimusic.ui.screens.player
 
-import android.text.format.DateUtils
 import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.animateDp
 import androidx.compose.animation.core.tween
@@ -49,6 +48,7 @@ import it.vfsfitvnm.vimusic.utils.DisposableListener
 import it.vfsfitvnm.vimusic.utils.bold
 import it.vfsfitvnm.vimusic.utils.forceSeekToNext
 import it.vfsfitvnm.vimusic.utils.forceSeekToPrevious
+import it.vfsfitvnm.vimusic.utils.formatAsDuration
 import it.vfsfitvnm.vimusic.utils.secondary
 import it.vfsfitvnm.vimusic.utils.semiBold
 import kotlinx.coroutines.Dispatchers
@@ -171,8 +171,7 @@ fun Controls(
                 .fillMaxWidth()
         ) {
             BasicText(
-                text = DateUtils.formatElapsedTime((scrubbingPosition ?: position) / 1000)
-                    .removePrefix("0"),
+                text = formatAsDuration(scrubbingPosition ?: position),
                 style = typography.xxs.semiBold,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
@@ -180,7 +179,7 @@ fun Controls(
 
             if (duration != C.TIME_UNSET) {
                 BasicText(
-                    text = DateUtils.formatElapsedTime(duration / 1000).removePrefix("0"),
+                    text = formatAsDuration(duration),
                     style = typography.xxs.semiBold,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis,

app/src/main/kotlin/it/vfsfitvnm/vimusic/utils/Utils.kt

@@ -1,6 +1,7 @@
 package it.vfsfitvnm.vimusic.utils
 
 import android.net.Uri
+import android.text.format.DateUtils
 import androidx.core.net.toUri
 import androidx.core.os.bundleOf
 import androidx.media3.common.MediaItem
@@ -92,6 +93,8 @@ fun Uri?.thumbnail(size: Int): Uri? {
     return toString().thumbnail(size)?.toUri()
 }
 
+fun formatAsDuration(millis: Long) = DateUtils.formatElapsedTime(millis / 1000).removePrefix("0")
+
 suspend fun Result<Innertube.PlaylistOrAlbumPage>.completed(): Result<Innertube.PlaylistOrAlbumPage>? {
     var playlistPage = getOrNull() ?: return null