feat(player): refactor artist display and improve search field labels

This commit is contained in:
Kingkor Roy Tirtho 2026-10-14 13:53:19 +06:00
parent d720467338
commit 93dfea9a30
12 changed files with 152 additions and 27 deletions

View File

@ -96,9 +96,10 @@ fun LibraryAlbumsScreen(
AnimatedVisibility(searchMode) { AnimatedVisibility(searchMode) {
MillenniumTextField( MillenniumTextField(
state = searchState, state = searchState,
label = "Search",
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
placeholder = "Search saved albums...") placeholder = "Search saved albums..."
)
} }
Spacer(modifier = Modifier.height(12.dp)) Spacer(modifier = Modifier.height(12.dp))
when (state) { when (state) {
@ -119,7 +120,8 @@ fun LibraryAlbumsScreen(
PlayableCard( PlayableCard(
title = "Album Title", title = "Album Title",
subtitle = "Artist Name", subtitle = "Artist Name",
imageURL = "https://placehold.co/600x400") imageURL = "https://placehold.co/600x400"
)
} }
} }
} }
@ -168,7 +170,8 @@ fun LibraryAlbumsScreen(
PlayableCard( PlayableCard(
title = "Album Title", title = "Album Title",
subtitle = "Artist Name", subtitle = "Artist Name",
imageURL = "https://placehold.co/600x400") imageURL = "https://placehold.co/600x400"
)
} }
} }
} }

View File

@ -95,7 +95,7 @@ fun LibraryArtistsScreen(
AnimatedVisibility(searchMode){ AnimatedVisibility(searchMode){
MillenniumTextField( MillenniumTextField(
state = searchState, state = searchState,
label = "Search",
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
placeholder = "Search saved artists...") placeholder = "Search saved artists...")
} }

View File

@ -106,7 +106,7 @@ fun LibraryLocalTracksScreen(modifier: Modifier = Modifier, searchMode: Boolean
contentDescription = "Search") contentDescription = "Search")
MillenniumTextField( MillenniumTextField(
state = searchState, state = searchState,
label = "Search",
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
placeholder = if (state.currentFolderPath == null) { placeholder = if (state.currentFolderPath == null) {
"Search folders or tracks" "Search folders or tracks"

View File

@ -129,7 +129,7 @@ fun AddToPlaylistPicker(
contentDescription = "Search") contentDescription = "Search")
MillenniumTextField( MillenniumTextField(
state = searchState, state = searchState,
label = "Search",
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
placeholder = "Search your playlists...") placeholder = "Search your playlists...")
} }

View File

@ -110,7 +110,7 @@ fun LibraryPlaylistsScreen(
modifier = Modifier.weight(1f)) { modifier = Modifier.weight(1f)) {
MillenniumTextField( MillenniumTextField(
state = searchState, state = searchState,
label = "Search",
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
placeholder = "Search saved playlists...") placeholder = "Search saved playlists...")
} }

View File

@ -143,7 +143,6 @@ fun AddTracksToPlaylistDialog(
verticalAlignment = Alignment.CenterVertically) { verticalAlignment = Alignment.CenterVertically) {
MillenniumTextField( MillenniumTextField(
state = queryState, state = queryState,
label = "Search",
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
placeholder = "Search tracks...") placeholder = "Search tracks...")
MillenniumIconButton( MillenniumIconButton(

View File

@ -478,7 +478,7 @@ private fun SearchBar(
.padding(bottom = 8.dp)) { .padding(bottom = 8.dp)) {
MillenniumAutocomplete( MillenniumAutocomplete(
state = searchState, state = searchState,
label = "Search",
suggestions = suggestions, suggestions = suggestions,
onSuggestionSelected = { entry -> entry.onClick() }, onSuggestionSelected = { entry -> entry.onClick() },
suggestionLabel = { entry -> suggestionLabel = { entry ->

View File

@ -481,12 +481,13 @@ fun AppExpandedPlayer(
maxLines = 1, maxLines = 1,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Center) textAlign = TextAlign.Center)
Text( PlayerArtistsText(
text = playerUiState.artists, artists = playerUiState.artistList,
onArtistClick = { artistId ->
navigationCommands.navigateTo(Routes.Artist(artistId))
},
style = AppTheme.typography.bodyLarge, style = AppTheme.typography.bodyLarge,
color = AppTheme.colors.onSurfaceVariant, color = AppTheme.colors.onSurfaceVariant,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Center) textAlign = TextAlign.Center)
} }
MillenniumIconButton( MillenniumIconButton(

View File

@ -252,19 +252,24 @@ fun AppLargePlayer(
contentScale = ContentScale.Crop contentScale = ContentScale.Crop
) )
} }
Column(modifier = Modifier.padding(start = 12.dp)) { Column(
modifier = Modifier
.weight(1f, fill = false)
.padding(start = 12.dp)
) {
Text( Text(
text = playerUiState.title, text = playerUiState.title,
style = AppTheme.typography.bodyLarge, style = AppTheme.typography.bodyLarge,
maxLines = 1, maxLines = 1,
overflow = TextOverflow.Ellipsis overflow = TextOverflow.Ellipsis
) )
Text( PlayerArtistsText(
text = playerUiState.artists, artists = playerUiState.artistList,
onArtistClick = { artistId ->
navigationCommands.navigateTo(Routes.Artist(artistId))
},
style = AppTheme.typography.bodySmall, style = AppTheme.typography.bodySmall,
color = AppTheme.colors.onSurfaceVariant, color = AppTheme.colors.onSurfaceVariant
maxLines = 1,
overflow = TextOverflow.Ellipsis
) )
} }
Spacer(modifier = Modifier.width(10.dp)) Spacer(modifier = Modifier.width(10.dp))

View File

@ -20,21 +20,25 @@ package dev.krtirtho.spotube.modules.shell
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import dev.krtirtho.spotube.core.audioplayer.AudioPlayer
import dev.krtirtho.spotube.core.audioplayer.AudioPlayerInterface import dev.krtirtho.spotube.core.audioplayer.AudioPlayerInterface
import dev.krtirtho.spotube.core.audioplayer.AudioPlayerQueue import dev.krtirtho.spotube.core.audioplayer.AudioPlayerQueue
import dev.krtirtho.spotube.core.audioplayer.LoopState import dev.krtirtho.spotube.core.audioplayer.LoopState
import dev.krtirtho.spotube.core.audioplayer.PlayerState import dev.krtirtho.spotube.core.audioplayer.PlayerState
import dev.krtirtho.spotube.core.audioplayer.QueueEntry import dev.krtirtho.spotube.core.audioplayer.QueueEntry
import dev.krtirtho.spotube.core.di.rememberLogger
import kotlin.time.Duration import kotlin.time.Duration
import kotlin.time.Duration.Companion.milliseconds import kotlin.time.Duration.Companion.milliseconds
internal data class PlayerArtist(
val id: String?,
val name: String
)
internal data class PlayerUiState( internal data class PlayerUiState(
val queue: List<QueueEntry> = emptyList(), val queue: List<QueueEntry> = emptyList(),
val currentQueueEntry: QueueEntry? = null, val currentQueueEntry: QueueEntry? = null,
val title: String = "No-op track title", val title: String = "No-op track title",
val artists: String = "No-op artists", val artists: String = "No-op artists",
val artistList: List<PlayerArtist> = emptyList(),
val album: String = "", val album: String = "",
val coverUrl: String = "", val coverUrl: String = "",
val position: Duration = 0.milliseconds, val position: Duration = 0.milliseconds,
@ -43,7 +47,8 @@ internal data class PlayerUiState(
val playerState: PlayerState = PlayerState.IDLE, val playerState: PlayerState = PlayerState.IDLE,
val loopState: LoopState = LoopState.NONE, val loopState: LoopState = LoopState.NONE,
val isShuffling: Boolean = false, val isShuffling: Boolean = false,
val volume: Float = 0f) { val volume: Float = 0f
) {
val isPlaying: Boolean get() = playerState == PlayerState.PLAYING val isPlaying: Boolean get() = playerState == PlayerState.PLAYING
val displayDuration: Duration val displayDuration: Duration
get() = if (actualDuration.inWholeMilliseconds > 0L) actualDuration else metadataDuration get() = if (actualDuration.inWholeMilliseconds > 0L) actualDuration else metadataDuration
@ -73,7 +78,8 @@ internal data class PlayerUiState(
@Composable @Composable
internal fun rememberPlayerUiState( internal fun rememberPlayerUiState(
audioPlayer: AudioPlayerInterface, audioPlayer: AudioPlayerInterface,
audioPlayerQueue: AudioPlayerQueue): PlayerUiState { audioPlayerQueue: AudioPlayerQueue
): PlayerUiState {
val queue by audioPlayerQueue.queueFlow.collectAsState(initial = emptyList()) val queue by audioPlayerQueue.queueFlow.collectAsState(initial = emptyList())
val currentQueueEntry by audioPlayerQueue.currentQueueEntryFlow.collectAsState(initial = null) val currentQueueEntry by audioPlayerQueue.currentQueueEntryFlow.collectAsState(initial = null)
val playerState by audioPlayer.playerStateFlow.collectAsState() val playerState by audioPlayer.playerStateFlow.collectAsState()
@ -89,6 +95,7 @@ internal fun rememberPlayerUiState(
currentQueueEntry = currentQueueEntry, currentQueueEntry = currentQueueEntry,
title = currentQueueEntry?.displayTitle().orEmpty().ifBlank { "No-op track title" }, title = currentQueueEntry?.displayTitle().orEmpty().ifBlank { "No-op track title" },
artists = currentQueueEntry?.displayArtists().orEmpty().ifBlank { "No-op artists" }, artists = currentQueueEntry?.displayArtists().orEmpty().ifBlank { "No-op artists" },
artistList = currentQueueEntry?.displayArtistList().orEmpty(),
album = currentQueueEntry?.displayAlbum().orEmpty(), album = currentQueueEntry?.displayAlbum().orEmpty(),
coverUrl = currentQueueEntry?.coverUrl().orEmpty(), coverUrl = currentQueueEntry?.coverUrl().orEmpty(),
position = position, position = position,
@ -97,7 +104,8 @@ internal fun rememberPlayerUiState(
playerState = playerState, playerState = playerState,
loopState = loopState, loopState = loopState,
isShuffling = isShuffling, isShuffling = isShuffling,
volume = volume) volume = volume
)
// val logger = rememberLogger<PlayerUiState>() // val logger = rememberLogger<PlayerUiState>()
// logger.d { state.toDebugString() } // logger.d { state.toDebugString() }
@ -118,6 +126,14 @@ private fun QueueEntry.displayArtists(): String {
} }
} }
private fun QueueEntry.displayArtistList(): List<PlayerArtist> {
return when (this) {
is QueueEntry.StreamingTrack -> track.artists.map { PlayerArtist(it.id, it.name) }
// Local tracks have no artist ids, so they are shown but not navigable.
is QueueEntry.LocalTrack -> artists.map { PlayerArtist(id = null, name = it) }
}
}
private fun QueueEntry.displayAlbum(): String { private fun QueueEntry.displayAlbum(): String {
return when (this) { return when (this) {
is QueueEntry.StreamingTrack -> track.album?.title ?: "Unknown Album" is QueueEntry.StreamingTrack -> track.album?.title ?: "Unknown Album"

View File

@ -0,0 +1,82 @@
/*
* Copyright (C) 2026 Kingkor Roy Tirtho and Spotube Contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
package dev.krtirtho.spotube.modules.shell
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.LinkAnnotation
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.TextLinkStyles
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.text.withLink
import com.composeunstyled.Text
import dev.krtirtho.spotube.core.ui.theming.AppTheme
/**
* Renders a track's artists on a single, ellipsized line. Artists that have an [PlayerArtist.id]
* are tappable links that open their artist page; local tracks (no ids) render as plain text.
*/
@Composable
internal fun PlayerArtistsText(
artists: List<PlayerArtist>,
onArtistClick: (String) -> Unit,
style: TextStyle,
color: Color,
modifier: Modifier = Modifier,
textAlign: TextAlign = TextAlign.Unspecified) {
if (artists.isEmpty()) return
val hoverColor = AppTheme.colors.primary
val annotatedArtists = buildAnnotatedString {
artists.forEachIndexed { index, artist ->
if (index > 0) append(", ")
val artistId = artist.id
if (artistId == null) {
append(artist.name)
} else {
withLink(
LinkAnnotation.Clickable(
tag = artistId,
styles = TextLinkStyles(
style = SpanStyle(textDecoration = TextDecoration.Underline),
hoveredStyle = SpanStyle(
color = hoverColor,
textDecoration = TextDecoration.Underline),
),
linkInteractionListener = { onArtistClick(artistId) },
)
) {
append(artist.name)
}
}
}
}
Text(
text = annotatedArtists,
modifier = modifier,
style = style,
color = color,
textAlign = textAlign,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
}

View File

@ -39,5 +39,24 @@ class JVMPlatform : Platform {
actual fun getPlatform(): Platform = JVMPlatform() actual fun getPlatform(): Platform = JVMPlatform()
actual fun openUrlInBrowser(url: String) { actual fun openUrlInBrowser(url: String) {
Desktop.getDesktop().browse(URI(url)) // The app runs on a native (Tao) window, not an AWT frame, so java.awt.Desktop is not a
// reliable way to hand a URL to the OS. Prefer the platform's own opener process and only
// fall back to AWT when no opener is available on PATH.
if (openWithSystemOpener(url)) return
runCatching { Desktop.getDesktop().browse(URI(url)) }
}
private fun openWithSystemOpener(url: String): Boolean {
val osName = System.getProperty("os.name").lowercase()
val command = when {
osName.contains("win") -> listOf("rundll32", "url.dll,FileProtocolHandler", url)
osName.contains("mac") -> listOf("open", url)
osName.contains("nux") || osName.contains("nix") || osName.contains("aix") ->
listOf("xdg-open", url)
else -> return false
}
return runCatching {
ProcessBuilder(command).start()
true
}.getOrDefault(false)
} }