mirror of
https://github.com/KRTirtho/spotube.git
synced 2026-11-04 10:13:59 +00:00
feat(player): refactor artist display and improve search field labels
This commit is contained in:
parent
d720467338
commit
93dfea9a30
@ -93,12 +93,13 @@ fun LibraryAlbumsScreen(
|
|||||||
}
|
}
|
||||||
|
|
||||||
Column(modifier = modifier) {
|
Column(modifier = modifier) {
|
||||||
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"
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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...")
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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...")
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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...")
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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(
|
||||||
|
|||||||
@ -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 ->
|
||||||
|
|||||||
@ -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(
|
||||||
|
|||||||
@ -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))
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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,
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -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)
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user