Skip to content

Commit

Permalink
Merge pull request #3895 from knighthat/master
Browse files Browse the repository at this point in the history 
Improve UX of playlist search
  • Loading branch information
@fast4x
fast4x authored Oct 7, 2024
2 parents fed9798 + 127a21f commit aad7602
Showing 1 changed file with 58 additions and 38 deletions.
96 changes: 58 additions & 38 deletions composeApp/src/androidMain/kotlin/it/fast4x/rimusic/ui/screens/home/HomeLibraryModern.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,13 @@ import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextRange
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.media3.common.util.UnstableApi
import androidx.room.util.copy
import com.github.doyaaaaaken.kotlincsv.dsl.csvReader
import it.fast4x.compose.persist.persistList
import it.fast4x.rimusic.Database
Expand Down Expand Up @@ -194,21 +197,19 @@ fun HomeLibraryModern(
var sortOrder by rememberEncryptedPreference(pipedApiTokenKey, SortOrder.Descending)

var searching by rememberSaveable { mutableStateOf(false) }
var filter: String? by rememberSaveable { mutableStateOf(null) }
var isSearchInputFocused by rememberSaveable { mutableStateOf( false ) }
var filter by rememberSaveable { mutableStateOf("") }

var items by persistList<PlaylistPreview>("home/playlists")

LaunchedEffect(sortBy, sortOrder, filter) {
Database.playlistPreviews(sortBy, sortOrder).collect { items = it }
}

val filterCharSequence: CharSequence
filterCharSequence = filter.toString()
//Log.d("mediaItemFilter", "<${filter}> <${filterCharSequence}>")
if (!filter.isNullOrBlank())
if ( filter.isNotBlank() )
items = items
.filter {
it.playlist.name.contains(filterCharSequence, true)
it.playlist.name.contains( filter, true )
}

val sortOrderIconRotation by animateFloatAsState(
Expand Down Expand Up @@ -447,7 +448,10 @@ fun HomeLibraryModern(
)

HeaderIconButton(
onClick = { searching = !searching },
onClick = {
searching = !searching
isSearchInputFocused = searching
},
icon = R.drawable.search_circle,
color = colorPalette().text,
iconSize = 24.dp,
Expand Down Expand Up @@ -603,22 +607,27 @@ fun HomeLibraryModern(
AnimatedVisibility(visible = searching) {
val focusRequester = remember { FocusRequester() }
val focusManager = LocalFocusManager.current
val keyboardController = LocalSoftwareKeyboardController.current

LaunchedEffect(searching) {
focusRequester.requestFocus()
if( isSearchInputFocused ) focusRequester.requestFocus()
}

var searchInput by remember { mutableStateOf( TextFieldValue( filter ) ) }
BasicTextField(
value = filter ?: "",
onValueChange = { filter = it },
value = searchInput,
onValueChange = {
searchInput = it.copy(
selection = TextRange( it.text.length )
)
filter = it.text
},
textStyle = typography().xs.semiBold,
singleLine = true,
maxLines = 1,
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions(onDone = {
if (filter.isNullOrBlank()) filter = ""
focusManager.clearFocus()
searching = filter.isNotBlank()
}),
cursorBrush = SolidColor(colorPalette().text),
decorationBox = { innerTextField ->
Expand All @@ -644,7 +653,7 @@ fun HomeLibraryModern(
.padding(horizontal = 30.dp)
) {
androidx.compose.animation.AnimatedVisibility(
visible = filter?.isEmpty() ?: true,
visible = filter.isBlank(),
enter = fadeIn(tween(100)),
exit = fadeOut(tween(100)),
) {
Expand All @@ -667,30 +676,9 @@ fun HomeLibraryModern(
shape = thumbnailRoundness.shape()
)
.focusRequester(focusRequester)
.onFocusChanged {
if (!it.hasFocus) {
keyboardController?.hide()
if (filter?.isBlank() == true) {
filter = null
searching = false
}
}
}
)
}
/*
else {
HeaderIconButton(
onClick = { searching = true },
icon = R.drawable.search_circle,
color = colorPalette().text,
iconSize = 24.dp
)
}
*/
}
/* */
}

item(
Expand Down Expand Up @@ -722,7 +710,15 @@ fun HomeLibraryModern(
thumbnailSizePx = thumbnailSizePx,
alternative = true,
modifier = Modifier
.clickable(onClick = { onPlaylistClick(playlistPreview.playlist) })
.clickable(onClick = {
onPlaylistClick(playlistPreview.playlist)

if( searching )
if( filter.isBlank() )
searching = false
else
isSearchInputFocused = false
})
.animateItem(fadeInSpec = null, fadeOutSpec = null)
.fillMaxSize()
)
Expand All @@ -739,7 +735,15 @@ fun HomeLibraryModern(
thumbnailSizePx = thumbnailSizePx,
alternative = true,
modifier = Modifier
.clickable(onClick = { onPlaylistClick(playlistPreview.playlist) })
.clickable(onClick = {
onPlaylistClick(playlistPreview.playlist)

if( searching )
if( filter.isBlank() )
searching = false
else
isSearchInputFocused = false
})
.animateItem(fadeInSpec = null, fadeOutSpec = null)
.fillMaxSize()
)
Expand All @@ -755,7 +759,15 @@ fun HomeLibraryModern(
thumbnailSizePx = thumbnailSizePx,
alternative = true,
modifier = Modifier
.clickable(onClick = { onPlaylistClick(playlistPreview.playlist) })
.clickable(onClick = {
onPlaylistClick(playlistPreview.playlist)

if( searching )
if( filter.isBlank() )
searching = false
else
isSearchInputFocused = false
})
.animateItem(fadeInSpec = null, fadeOutSpec = null)
.fillMaxSize()
)
Expand All @@ -771,7 +783,15 @@ fun HomeLibraryModern(
thumbnailSizePx = thumbnailSizePx,
alternative = true,
modifier = Modifier
.clickable(onClick = { onPlaylistClick(playlistPreview.playlist) })
.clickable(onClick = {
onPlaylistClick(playlistPreview.playlist)

if( searching )
if( filter.isBlank() )
searching = false
else
isSearchInputFocused = false
})
.animateItem(fadeInSpec = null, fadeOutSpec = null)
.fillMaxSize()
)
Expand Down

0 comments on commit aad7602

Please sign in to comment.