ui: Created SelectableSurface

refactor: Removed duplicated code

Signed-off-by: Gabriel Fontán <gabilessto@gmail.com>

app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/SpMetadataBottomSheetContent.kt

@@ -10,11 +10,11 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.SheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.SpMetadataBottomSheetContentViewModel.Companion.BottomSheetStage
+import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.stages.NoSongInformationProvided
 import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.stages.SpMetadataBsDetails
 import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.stages.SpMetadataBsSearch
 import com.bobbyesp.ui.motion.MotionConstants.DURATION_EXIT_SHORT
@@ -29,20 +29,27 @@ fun SpMetadataBottomSheetContent(
     state: SheetState,
     viewModel: SpMetadataBottomSheetContentViewModel = hiltViewModel()
 ) {
-    val scope = rememberCoroutineScope()
     val viewState = viewModel.viewStateFlow.collectAsStateWithLifecycle().value
+    val lazyListState = rememberLazyListState()
 
     val bottomSheetState = viewState.stage
 
-    val lazyListState = rememberLazyListState()
+    fun search(query: String) {
+        viewModel.updateStage(BottomSheetStage.SEARCH)
+        viewModel.searchTracks(query)
+    }
 
-    if (name.isEmpty() && artist.isEmpty()) return
+    if (name.isEmpty() && artist.isEmpty()) {
+        NoSongInformationProvided { providedName, providedArtist ->
+            val query = "$providedName $providedArtist"
+            search(query)
+        }
+    }
 
     LaunchedEffect(state.isVisible, name, artist) {
         val query = "$name $artist"
         if (state.isVisible && viewState.lastQuery != query) {
-            viewModel.updateStage(BottomSheetStage.SEARCH)
-            viewModel.searchTracks(query)
+            search(query)
         }
     }
 

app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/NoSongInformationProvided.kt

@@ -0,0 +1,84 @@
+package com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.stages
+
+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.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.MoodBad
+import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.bobbyesp.metadator.R
+import com.bobbyesp.ui.components.text.PreConfiguredOutlinedTextField
+
+@Composable
+fun NoSongInformationProvided(
+    onRetrySearch: (String, String) -> Unit
+) {
+    val (name, setName) = remember { mutableStateOf("") }
+    val (artist, setArtist) = remember { mutableStateOf("") }
+    Column(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterVertically)
+    ) {
+        Icon(
+            imageVector = Icons.Rounded.MoodBad,
+            contentDescription = stringResource(id = R.string.no_song_information_provided),
+            modifier = Modifier.size(48.dp),
+            tint = MaterialTheme.colorScheme.onSurface
+        )
+        Column(
+            modifier = Modifier.fillMaxWidth(0.9f),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Text(
+                text = stringResource(id = R.string.no_song_information_provided),
+                style = MaterialTheme.typography.bodyMedium,
+                fontWeight = FontWeight.SemiBold
+            )
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+            ) {
+                PreConfiguredOutlinedTextField(
+                    value = name,
+                    label = stringResource(id = R.string.title),
+                    modifier = Modifier.weight(0.5f)
+                ) { title ->
+                    setName(title)
+                }
+                Spacer(modifier = Modifier.width(8.dp))
+                PreConfiguredOutlinedTextField(
+                    value = artist,
+                    label = stringResource(id = R.string.artist),
+                    modifier = Modifier.weight(0.5f)
+                ) { artist ->
+                    setArtist(artist)
+                }
+            }
+        }
+        Button(
+            modifier = Modifier.fillMaxWidth(0.7f),
+            onClick = { onRetrySearch(name, artist) }
+        ) {
+            Text(
+                text = stringResource(id = R.string.retry_search),
+                style = MaterialTheme.typography.bodyMedium,
+                fontWeight = FontWeight.SemiBold
+            )
+        }
+    }
+}

app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/SpMetadataBsDetails.kt

@@ -1,10 +1,13 @@
 package com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.stages
 
 import androidx.activity.compose.BackHandler
-import androidx.compose.animation.ExperimentalSharedTransitionApi
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -13,14 +16,15 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.adamratzman.spotify.models.Track
-import com.bobbyesp.metadator.presentation.components.cards.songs.spotify.SpotifyHorizontalSongCard
+import com.bobbyesp.metadator.ext.formatArtistsName
+import com.bobbyesp.metadator.presentation.components.image.ArtworkAsyncImage
 import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.SpMetadataBottomSheetContentViewModel
+import com.bobbyesp.ui.components.text.MarqueeText
 
-@OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 fun SpMetadataBsDetails(
     modifier: Modifier = Modifier,
@@ -44,15 +48,53 @@ fun SpMetadataBsDetails(
         LaunchedEffect(viewState.selectedTrack) {
             selectedTrack = viewState.selectedTrack
         }
-        selectedTrack?.let {
-            SpotifyHorizontalSongCard(
-                innerModifier = Modifier.padding(8.dp),
-                surfaceColor = Color.Transparent,
-                track = it,
-                onClick = {
-
-                }
+        selectedTrack?.let { track ->
+            TrackInfo(
+                track = track
             )
         }
     }
+}
+
+@Composable
+private fun TrackInfo(
+    modifier: Modifier = Modifier,
+    track: Track,
+) {
+    val albumArtPath = track.album.images?.getOrNull(0)?.url
+
+    Row(
+        modifier = modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        ArtworkAsyncImage(
+            modifier = Modifier.size(64.dp),
+            artworkPath = albumArtPath,
+            shape = MaterialTheme.shapes.extraSmall
+        )
+        Row(
+            modifier = Modifier.weight(1f),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center
+        ) {
+            Column(
+                horizontalAlignment = Alignment.Start,
+                modifier = Modifier
+                    .padding(8.dp)
+                    .weight(1f)
+            ) {
+                MarqueeText(
+                    text = track.name,
+                    style = MaterialTheme.typography.bodyLarge,
+                    fontWeight = FontWeight.Bold,
+                )
+                MarqueeText(
+                    text = track.artists.formatArtistsName(),
+                    style = MaterialTheme.typography.bodyMedium.copy(
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f)
+                    )
+                )
+            }
+        }
+    }
 }

app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/SpMetadataBsSearch.kt

@@ -47,33 +47,35 @@ fun SpMetadataBsSearch(
         state = listState,
         modifier = Modifier.fillMaxSize()
     ) {
-        stickyHeader {
-            Row(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .background(
-                        brush = Brush.verticalGradient(
-                            colors = listOf(
-                                MaterialTheme.colorScheme.surfaceContainerLow, Color.Transparent
-                            ),
-                            startY = 0f,
+        if (name.isNotEmpty() && artist.isNotEmpty()) {
+            stickyHeader {
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .background(
+                            brush = Brush.verticalGradient(
+                                colors = listOf(
+                                    MaterialTheme.colorScheme.surfaceContainerLow, Color.Transparent
+                                ),
+                                startY = 0f,
+                            )
                         )
+                        .padding(8.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.Center
+                ) {
+                    Text(
+                        text = stringResource(
+                            id = R.string.showing_results_for,
+                            name,
+                            artist
+                        ),
+                        style = MaterialTheme.typography.bodyMedium,
+                        textAlign = TextAlign.Center,
+                        fontWeight = FontWeight.Bold,
+                        modifier = Modifier
                     )
-                    .padding(8.dp),
-                verticalAlignment = Alignment.CenterVertically,
-                horizontalArrangement = Arrangement.Center
-            ) {
-                Text(
-                    text = stringResource(
-                        id = R.string.showing_results_for,
-                        name,
-                        artist
-                    ),
-                    style = MaterialTheme.typography.bodyMedium,
-                    textAlign = TextAlign.Center,
-                    fontWeight = FontWeight.Bold,
-                    modifier = Modifier
-                )
+                }
             }
         }
 

app/src/main/res/values/strings.xml

@@ -62,5 +62,7 @@
     <string name="unknown">Unknown</string>
     <string name="showing_results_for">Showing results for %1$s by %2$s</string>
     <string name="loading">Loading</string>
+    <string name="no_song_information_provided">No song information provided</string>
+    <string name="retry_search">Retry search</string>
 
 </resources>

app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/DropdownMenuImplementation.kt

@@ -38,6 +38,10 @@ import androidx.compose.ui.util.fastMap
 import androidx.compose.ui.window.PopupPositionProvider
 import com.bobbyesp.ui.components.dropdown.MenuPosition.Horizontal
 import com.bobbyesp.ui.components.dropdown.MenuPosition.Vertical
+import com.bobbyesp.ui.motion.MotionConstants.DURATION_ENTER
+import com.bobbyesp.ui.motion.MotionConstants.DURATION_EXIT
+import com.bobbyesp.ui.motion.emphasizedAccelerate
+import com.bobbyesp.ui.motion.emphasizedDecelerate
 
 /**
  * Interfaces for positioning a menu within a window. This is the same purpose as the interface
@@ -420,7 +424,7 @@ fun DropdownMenuContent(
     AnimatedVisibility(
         visibleState = expandedState, label = "", enter = EnterTransition.None, exit = fadeOut(
             animationSpec = tween(
-                delayMillis = ExitDuration - FadeOutDuration,
+                delayMillis = DURATION_EXIT - FadeOutDuration,
                 durationMillis = FadeOutDuration,
                 easing = LinearEasing
             )
@@ -436,31 +440,31 @@ fun DropdownMenuContent(
             AnimatedVisibility(
                 visibleState = expandedState, label = "", enter = fadeIn(
                     animationSpec = tween(
-                        durationMillis = EnterDuration, easing = EmphasizedDecelerate
+                        durationMillis = DURATION_ENTER, easing = emphasizedDecelerate
                     )
                 ) + expandVertically(
                     animationSpec = tween(
-                        durationMillis = EnterDuration, easing = EmphasizedDecelerate
+                        durationMillis = DURATION_ENTER, easing = emphasizedDecelerate
                     ),
                     expandFrom = Alignment.Top,
                 ) + slideInVertically(
                     animationSpec = tween(
-                        durationMillis = EnterDuration, easing = EmphasizedDecelerate
+                        durationMillis = DURATION_ENTER, easing = emphasizedDecelerate
                     ),
                     initialOffsetY = { -it / 10 },
                 ), exit = fadeOut(
                     animationSpec = tween(
                         // Why ???
-                        durationMillis = ExitDuration - 20,
-                        easing = EmphasizedAccelerate
+                        durationMillis = DURATION_EXIT - 20,
+                        easing = emphasizedAccelerate
                     )
                 ) + shrinkVertically(
                     animationSpec = tween(
-                        durationMillis = ExitDuration, easing = EmphasizedAccelerate
+                        durationMillis = DURATION_EXIT, easing = emphasizedAccelerate
                     ),
                     shrinkTowards = Alignment.Top,
                 ) + slideOutVertically(animationSpec = tween(
-                    durationMillis = ExitDuration, easing = EmphasizedAccelerate
+                    durationMillis = DURATION_EXIT, easing = emphasizedAccelerate
                 ), targetOffsetY = { -it / 10 }), modifier = Modifier
             ) {
                 Column(

app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/M3ElevationTokens.kt

@@ -6,7 +6,6 @@ package com.bobbyesp.ui.components.dropdown
  * @see androidx.compose.material3.tokens.ElevationTokens
  */
 object ElevationTokens {
-
     const val Level0 = 0
     const val Level1 = 1
     const val Level2 = 3