-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Replaced song cards with compact song cards
feat: Added Settings This commit introduces compact cards to replace the previous vertical cards for displaying songs. The size of the cards can be configured in the Settings. Additionally, this change adds conditional marquee text, to give the user the option to disable the marque text animation.
- Loading branch information
Showing
17 changed files
with
443 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
...ava/com/bobbyesp/metadator/presentation/components/cards/songs/compact/CompactCardSize.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
package com.bobbyesp.metadator.presentation.components.cards.songs.compact | ||
|
||
import androidx.compose.foundation.shape.CornerBasedShape | ||
import androidx.compose.material3.MaterialTheme | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.unit.Dp | ||
import androidx.compose.ui.unit.dp | ||
|
||
enum class CompactCardSize(val value: Dp) { | ||
SMALL(96.dp), | ||
MEDIUM(120.dp), | ||
LARGE(144.dp), | ||
EXTRA_LARGE(168.dp); | ||
|
||
companion object { | ||
|
||
fun Int.toCompactCardSize(): CompactCardSize = CompactCardSize.entries.first { it.ordinal == this } | ||
|
||
@Composable | ||
fun CompactCardSize.toShape(): CornerBasedShape = when(this) { | ||
SMALL -> MaterialTheme.shapes.small | ||
MEDIUM -> MaterialTheme.shapes.medium | ||
LARGE -> MaterialTheme.shapes.large | ||
EXTRA_LARGE -> MaterialTheme.shapes.extraLarge | ||
} | ||
} | ||
} |
118 changes: 118 additions & 0 deletions
118
...ava/com/bobbyesp/metadator/presentation/components/cards/songs/compact/CompactSongCard.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
package com.bobbyesp.metadator.presentation.components.cards.songs.compact | ||
|
||
import android.net.Uri | ||
import android.util.Log | ||
import androidx.compose.animation.animateContentSize | ||
import androidx.compose.foundation.background | ||
import androidx.compose.foundation.clickable | ||
import androidx.compose.foundation.layout.Arrangement | ||
import androidx.compose.foundation.layout.Box | ||
import androidx.compose.foundation.layout.Column | ||
import androidx.compose.foundation.layout.fillMaxSize | ||
import androidx.compose.foundation.layout.padding | ||
import androidx.compose.foundation.layout.size | ||
import androidx.compose.material3.MaterialTheme | ||
import androidx.compose.material3.Text | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.runtime.LaunchedEffect | ||
import androidx.compose.runtime.getValue | ||
import androidx.compose.runtime.mutableStateOf | ||
import androidx.compose.runtime.remember | ||
import androidx.compose.ui.Alignment | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.draw.clip | ||
import androidx.compose.ui.draw.shadow | ||
import androidx.compose.ui.graphics.Brush | ||
import androidx.compose.ui.graphics.Color | ||
import androidx.compose.ui.graphics.Shape | ||
import androidx.compose.ui.text.font.FontWeight | ||
import androidx.compose.ui.text.style.TextOverflow | ||
import androidx.compose.ui.unit.Dp | ||
import androidx.compose.ui.unit.dp | ||
import com.bobbyesp.metadator.presentation.components.cards.songs.compact.CompactCardSize.Companion.toShape | ||
import com.bobbyesp.metadator.presentation.components.image.AsyncImage | ||
import com.bobbyesp.metadator.presentation.components.text.ConditionedMarqueeText | ||
|
||
@Composable | ||
fun CompactSongCard( | ||
modifier: Modifier = Modifier, | ||
name: String, | ||
artists: String, | ||
artworkUri: Uri? = null, | ||
listIndex: Int? = null, | ||
shadow: Dp? = 4.dp, | ||
size: CompactCardSize = CompactCardSize.LARGE, | ||
shape: Shape? = MaterialTheme.shapes.large, | ||
onClick: () -> Unit | ||
) { | ||
val cardSize by remember(size) { | ||
mutableStateOf(size.value) | ||
} | ||
|
||
val formalizedShape = shape ?: size.toShape() | ||
|
||
Box( | ||
modifier = modifier | ||
.shadow( | ||
elevation = shadow ?: 0.dp, | ||
shape = formalizedShape | ||
) | ||
.clip(formalizedShape) | ||
.size(cardSize) | ||
.clickable(onClick = onClick) | ||
|
||
) { | ||
AsyncImage( | ||
modifier = Modifier.fillMaxSize(), | ||
imageModel = artworkUri, | ||
) | ||
|
||
listIndex?.let { | ||
Text( | ||
text = "$it.", | ||
style = MaterialTheme.typography.bodySmall, | ||
color = Color.White.copy(alpha = 0.8f), | ||
fontWeight = FontWeight.Bold, | ||
modifier = Modifier | ||
.padding(8.dp) | ||
.align(Alignment.TopEnd) | ||
) | ||
} | ||
Column( | ||
modifier = Modifier | ||
.background( | ||
brush = Brush.verticalGradient( | ||
colors = listOf( | ||
Color.Transparent, | ||
MaterialTheme.colorScheme.scrim | ||
), | ||
startY = 0f, | ||
endY = 500f | ||
), | ||
alpha = 0.6f | ||
) | ||
.fillMaxSize() | ||
.padding(horizontal = 8.dp, vertical = 6.dp), | ||
verticalArrangement = Arrangement.Bottom, | ||
horizontalAlignment = Alignment.Start | ||
) { | ||
ConditionedMarqueeText( | ||
text = name, | ||
style = MaterialTheme.typography.titleSmall, | ||
color = Color.White, | ||
overflow = TextOverflow.Ellipsis, | ||
maxLines = 1 | ||
) | ||
|
||
if(artists.isNotEmpty()) { | ||
ConditionedMarqueeText( | ||
text = artists, | ||
style = MaterialTheme.typography.bodySmall, | ||
color = Color.White.copy(alpha = 0.6f), | ||
overflow = TextOverflow.Ellipsis, | ||
maxLines = 1 | ||
) | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93 changes: 93 additions & 0 deletions
93
...c/main/java/com/bobbyesp/metadator/presentation/components/text/ConditionedMarqueeText.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
package com.bobbyesp.metadator.presentation.components.text | ||
|
||
import androidx.compose.animation.core.Easing | ||
import androidx.compose.material3.LocalTextStyle | ||
import androidx.compose.material3.Text | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.graphics.Color | ||
import androidx.compose.ui.text.TextLayoutResult | ||
import androidx.compose.ui.text.TextStyle | ||
import androidx.compose.ui.text.font.FontFamily | ||
import androidx.compose.ui.text.font.FontStyle | ||
import androidx.compose.ui.text.font.FontWeight | ||
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.unit.TextUnit | ||
import com.bobbyesp.ui.components.text.MarqueeText | ||
import com.bobbyesp.ui.components.text.MarqueeTextGradientOptions | ||
import com.bobbyesp.utilities.preferences.PreferencesKeys.MARQUEE_TEXT | ||
import com.bobbyesp.utilities.preferences.booleanState | ||
|
||
@Composable | ||
fun ConditionedMarqueeText( | ||
text: String, | ||
modifier: Modifier = Modifier, | ||
textModifier: Modifier = Modifier, | ||
color: Color = Color.Unspecified, | ||
fontSize: TextUnit = TextUnit.Unspecified, | ||
fontStyle: FontStyle? = null, | ||
fontWeight: FontWeight? = null, | ||
fontFamily: FontFamily? = null, | ||
letterSpacing: TextUnit = TextUnit.Unspecified, | ||
textDecoration: TextDecoration? = null, | ||
textAlign: TextAlign? = null, | ||
lineHeight: TextUnit = TextUnit.Unspecified, | ||
maxLines: Int = 1, | ||
overflow: TextOverflow = TextOverflow.Clip, | ||
softWrap: Boolean = true, | ||
onTextLayout: (TextLayoutResult) -> Unit = {}, | ||
style: TextStyle = LocalTextStyle.current.plus(TextStyle()), | ||
sideGradient: MarqueeTextGradientOptions = MarqueeTextGradientOptions(), | ||
customEasing: Easing? = null, | ||
animationDuration: Float = 4000f, | ||
delayBetweenAnimations: Long = 500L | ||
) { | ||
val useMarqueeText = MARQUEE_TEXT.booleanState | ||
|
||
if(useMarqueeText.value) { | ||
MarqueeText( | ||
text, | ||
modifier, | ||
textModifier, | ||
color, | ||
fontSize, | ||
fontStyle, | ||
fontWeight, | ||
fontFamily, | ||
letterSpacing, | ||
textDecoration, | ||
textAlign, | ||
lineHeight, | ||
maxLines, | ||
overflow, | ||
softWrap, | ||
onTextLayout, | ||
style, | ||
sideGradient, | ||
customEasing, | ||
animationDuration, | ||
delayBetweenAnimations | ||
) | ||
} else { | ||
Text( | ||
text = text, | ||
modifier = textModifier, | ||
color = color, | ||
fontSize = fontSize, | ||
fontStyle = fontStyle, | ||
fontWeight = fontWeight, | ||
fontFamily = fontFamily, | ||
letterSpacing = letterSpacing, | ||
textDecoration = textDecoration, | ||
textAlign = textAlign, | ||
lineHeight = lineHeight, | ||
maxLines = maxLines, | ||
overflow = overflow, | ||
softWrap = softWrap, | ||
onTextLayout = onTextLayout, | ||
style = style | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.