feat(ui): рестайл всех экранов + плеер + официальные mono-логотипы сервисов
- экраны (Станции/Избранное/История/Записи/Настройки/Вход): двухцветные заголовки, токены темы, EmptyState, анимации появления и перестановки - AuthScreen: брендовый локап (AppMark + RadiolaWordmark) - PlayerBottomSheet: живой эфир — LiveEqualizer вместо перемотки, Crossfade трека и play/pause, pressScale, анимация избранного/записи - кнопки музыкальных сервисов: монохромные официальные логотипы (vector drawable из Simple Icons CC0 + Yandex), маппинг serviceLogoRes - DeeplinkBottomSheet: сетка сервисов с логотипами
This commit is contained in:
@@ -1,7 +1,12 @@
|
||||
package com.radiola.ui.player
|
||||
|
||||
import android.util.Log
|
||||
import androidx.compose.animation.Crossfade
|
||||
import androidx.compose.animation.animateColorAsState
|
||||
import androidx.compose.animation.core.tween
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.foundation.lazy.LazyRow
|
||||
import androidx.compose.foundation.lazy.items
|
||||
@@ -12,27 +17,34 @@ import androidx.compose.runtime.*
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import android.util.Log
|
||||
import androidx.compose.ui.graphics.vector.ImageVector
|
||||
import androidx.compose.ui.layout.ContentScale
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
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 androidx.compose.ui.unit.sp
|
||||
import androidx.hilt.navigation.compose.hiltViewModel
|
||||
import coil.compose.AsyncImage
|
||||
import com.composables.icons.lucide.Heart
|
||||
import com.composables.icons.lucide.Lucide
|
||||
import com.composables.icons.lucide.Mic
|
||||
import com.composables.icons.lucide.MicOff
|
||||
import com.composables.icons.lucide.Music
|
||||
import com.composables.icons.lucide.Pause
|
||||
import com.composables.icons.lucide.Play
|
||||
import com.composables.icons.lucide.Radio
|
||||
import com.composables.icons.lucide.SkipBack
|
||||
import com.composables.icons.lucide.SkipForward
|
||||
import com.composables.icons.lucide.Circle
|
||||
import com.composables.icons.lucide.Square
|
||||
import com.radiola.deeplink.DeeplinkNavigator
|
||||
import com.radiola.domain.model.DeeplinkService
|
||||
import com.radiola.domain.model.Station
|
||||
import com.radiola.deeplink.DeeplinkNavigator
|
||||
import com.radiola.domain.model.Track
|
||||
import com.radiola.ui.theme.LiveEqualizer
|
||||
import com.radiola.ui.theme.Motion
|
||||
import com.radiola.ui.theme.RadiolaTheme
|
||||
import com.radiola.ui.theme.pressScale
|
||||
|
||||
@Composable
|
||||
fun PlayerBottomSheet(
|
||||
@@ -51,176 +63,250 @@ fun PlayerBottomSheet(
|
||||
) {
|
||||
val context = LocalContext.current
|
||||
val enabledServices by viewModel.enabledServices.collectAsState()
|
||||
val colors = RadiolaTheme.colors
|
||||
|
||||
Column(
|
||||
modifier = modifier
|
||||
.fillMaxWidth()
|
||||
.background(
|
||||
brush = Brush.verticalGradient(
|
||||
colors = listOf(Color(0xFF1a1a2e), Color(0xFF121212))
|
||||
)
|
||||
)
|
||||
.padding(24.dp),
|
||||
.background(colors.bgBase)
|
||||
.padding(horizontal = 24.dp, vertical = 20.dp),
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
) {
|
||||
station?.let { s ->
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp)
|
||||
) {
|
||||
Text(
|
||||
text = s.name,
|
||||
style = MaterialTheme.typography.labelMedium,
|
||||
color = Color(0xFF888888)
|
||||
)
|
||||
IconButton(
|
||||
onClick = onToggleFavorite,
|
||||
modifier = Modifier.size(24.dp)
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Lucide.Heart,
|
||||
contentDescription = "Избранное",
|
||||
tint = if (isFavorite) Color(0xFFFF4081) else Color.White,
|
||||
modifier = Modifier.size(16.dp)
|
||||
)
|
||||
}
|
||||
IconButton(
|
||||
onClick = onToggleRecording,
|
||||
modifier = Modifier.size(24.dp)
|
||||
) {
|
||||
Icon(
|
||||
imageVector = if (isRecording) Lucide.Square else Lucide.Circle,
|
||||
contentDescription = if (isRecording) "Остановить запись" else "Запись",
|
||||
tint = if (isRecording) Color(0xFFFF5252) else Color(0xFFFF5252),
|
||||
modifier = Modifier.size(16.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
Spacer(modifier = Modifier.height(24.dp))
|
||||
// Метка «В ЭФИРЕ»
|
||||
Text(
|
||||
text = "В ЭФИРЕ",
|
||||
style = MaterialTheme.typography.labelSmall,
|
||||
color = colors.accent,
|
||||
letterSpacing = 2.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
)
|
||||
Spacer(Modifier.height(16.dp))
|
||||
|
||||
// Обложка станции/трека
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(240.dp)
|
||||
.clip(RoundedCornerShape(20.dp))
|
||||
.background(
|
||||
Brush.linearGradient(listOf(Color(0xFF667eea), Color(0xFF764ba2)))
|
||||
.size(220.dp)
|
||||
.clip(RoundedCornerShape(24.dp))
|
||||
.background(colors.surface2),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
val coverModel = track?.coverUrl ?: station?.coverUrl
|
||||
if (!coverModel.isNullOrBlank()) {
|
||||
AsyncImage(
|
||||
model = coverModel,
|
||||
contentDescription = station?.name,
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
contentScale = ContentScale.Crop
|
||||
)
|
||||
) {
|
||||
AsyncImage(
|
||||
model = track?.coverUrl ?: station?.coverUrl,
|
||||
contentDescription = null,
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
contentScale = ContentScale.Crop
|
||||
)
|
||||
}
|
||||
Spacer(modifier = Modifier.height(24.dp))
|
||||
Text(
|
||||
text = track?.song ?: "",
|
||||
style = MaterialTheme.typography.headlineMedium,
|
||||
maxLines = 1
|
||||
)
|
||||
Text(
|
||||
text = track?.artist ?: "",
|
||||
style = MaterialTheme.typography.bodyLarge,
|
||||
color = Color(0xFF888888),
|
||||
maxLines = 1
|
||||
)
|
||||
Spacer(modifier = Modifier.height(20.dp))
|
||||
LazyRow(
|
||||
horizontalArrangement = Arrangement.spacedBy(12.dp),
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
contentPadding = PaddingValues(horizontal = 8.dp)
|
||||
) {
|
||||
items(enabledServices) { service ->
|
||||
DeeplinkButton(
|
||||
service = service,
|
||||
onClick = {
|
||||
track?.let { t ->
|
||||
Log.d("PlayerBottomSheet", "DeeplinkButton clicked, track=${t.artist} - ${t.song}")
|
||||
DeeplinkNavigator.openSearch(context, t, service)
|
||||
} ?: Log.d("PlayerBottomSheet", "DeeplinkButton clicked but track is null")
|
||||
}
|
||||
} else {
|
||||
Icon(
|
||||
imageVector = Lucide.Radio,
|
||||
contentDescription = null,
|
||||
tint = colors.textMuted,
|
||||
modifier = Modifier.size(56.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
Spacer(modifier = Modifier.height(30.dp))
|
||||
Spacer(Modifier.height(22.dp))
|
||||
|
||||
// Название трека и исполнитель с Crossfade при смене
|
||||
Crossfade(
|
||||
targetState = track?.song to track?.artist,
|
||||
animationSpec = tween(Motion.Medium),
|
||||
label = "trackInfo"
|
||||
) { (song, artist) ->
|
||||
Column(horizontalAlignment = Alignment.CenterHorizontally) {
|
||||
Text(
|
||||
text = song ?: (station?.name ?: ""),
|
||||
style = MaterialTheme.typography.headlineLarge,
|
||||
color = colors.textPrimary,
|
||||
maxLines = 1,
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
textAlign = androidx.compose.ui.text.style.TextAlign.Center
|
||||
)
|
||||
Spacer(Modifier.height(4.dp))
|
||||
Text(
|
||||
text = artist ?: (station?.genre ?: ""),
|
||||
style = MaterialTheme.typography.bodyLarge,
|
||||
color = colors.textSecondary,
|
||||
maxLines = 1,
|
||||
overflow = TextOverflow.Ellipsis,
|
||||
textAlign = androidx.compose.ui.text.style.TextAlign.Center
|
||||
)
|
||||
}
|
||||
}
|
||||
Spacer(Modifier.height(20.dp))
|
||||
|
||||
// Живой эквалайзер — вместо прогресс-бара (эфир нельзя перематывать)
|
||||
LiveEqualizer(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(40.dp),
|
||||
playing = isPlaying,
|
||||
color = colors.accent
|
||||
)
|
||||
Spacer(Modifier.height(24.dp))
|
||||
|
||||
// Управление воспроизведением
|
||||
Row(
|
||||
horizontalArrangement = Arrangement.spacedBy(24.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
ControlButton(
|
||||
size = 56.dp,
|
||||
icon = Lucide.SkipBack,
|
||||
onClick = onPrevious
|
||||
// Кнопка избранного
|
||||
val heartTint by animateColorAsState(
|
||||
targetValue = if (isFavorite) colors.accent else colors.textSecondary,
|
||||
animationSpec = tween(Motion.Medium),
|
||||
label = "heartTint"
|
||||
)
|
||||
ControlButton(
|
||||
size = 72.dp,
|
||||
isPlay = true,
|
||||
isPlaying = isPlaying,
|
||||
onClick = onPlayPause
|
||||
)
|
||||
ControlButton(
|
||||
size = 56.dp,
|
||||
icon = Lucide.SkipForward,
|
||||
onClick = onNext
|
||||
PlayerIconBtn(size = 44.dp) {
|
||||
IconButton(onClick = onToggleFavorite, modifier = Modifier.size(44.dp)) {
|
||||
Icon(Lucide.Heart, "Избранное", tint = heartTint, modifier = Modifier.size(22.dp))
|
||||
}
|
||||
}
|
||||
|
||||
// Кнопка «предыдущая станция»
|
||||
PlayerIconBtn(size = 48.dp) {
|
||||
IconButton(onClick = onPrevious, modifier = Modifier.size(48.dp)) {
|
||||
Icon(Lucide.SkipBack, "Предыдущая", tint = colors.textPrimary, modifier = Modifier.size(24.dp))
|
||||
}
|
||||
}
|
||||
|
||||
// Главная кнопка play/pause
|
||||
val playInteraction = remember { MutableInteractionSource() }
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(68.dp)
|
||||
.clip(CircleShape)
|
||||
.background(colors.accent)
|
||||
.pressScale(interactionSource = playInteraction)
|
||||
.clickable(interactionSource = playInteraction, indication = null, onClick = onPlayPause),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Crossfade(
|
||||
targetState = isPlaying,
|
||||
animationSpec = tween(Motion.Fast),
|
||||
label = "playPause"
|
||||
) { playing ->
|
||||
Icon(
|
||||
imageVector = if (playing) Lucide.Pause else Lucide.Play,
|
||||
contentDescription = if (playing) "Пауза" else "Воспроизвести",
|
||||
tint = colors.bgBase,
|
||||
modifier = Modifier.size(30.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Кнопка «следующая станция»
|
||||
PlayerIconBtn(size = 48.dp) {
|
||||
IconButton(onClick = onNext, modifier = Modifier.size(48.dp)) {
|
||||
Icon(Lucide.SkipForward, "Следующая", tint = colors.textPrimary, modifier = Modifier.size(24.dp))
|
||||
}
|
||||
}
|
||||
|
||||
// Кнопка записи
|
||||
val recordTint by animateColorAsState(
|
||||
targetValue = if (isRecording) colors.live else colors.textSecondary,
|
||||
animationSpec = tween(Motion.Medium),
|
||||
label = "recordTint"
|
||||
)
|
||||
PlayerIconBtn(size = 44.dp) {
|
||||
IconButton(onClick = onToggleRecording, modifier = Modifier.size(44.dp)) {
|
||||
Crossfade(
|
||||
targetState = isRecording,
|
||||
animationSpec = tween(Motion.Fast),
|
||||
label = "recordIcon"
|
||||
) { recording ->
|
||||
Icon(
|
||||
imageVector = if (recording) Lucide.MicOff else Lucide.Mic,
|
||||
contentDescription = if (recording) "Остановить запись" else "Запись",
|
||||
tint = recordTint,
|
||||
modifier = Modifier.size(20.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Spacer(Modifier.height(20.dp))
|
||||
|
||||
// Ряд кнопок музыкальных сервисов
|
||||
if (enabledServices.isNotEmpty()) {
|
||||
LazyRow(
|
||||
horizontalArrangement = Arrangement.spacedBy(12.dp),
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
contentPadding = PaddingValues(horizontal = 4.dp)
|
||||
) {
|
||||
items(enabledServices) { service ->
|
||||
ServiceDeeplinkBtn(
|
||||
service = service,
|
||||
onClick = {
|
||||
track?.let { t ->
|
||||
Log.d("PlayerBottomSheet", "Deeplink: ${t.artist} - ${t.song}")
|
||||
DeeplinkNavigator.openSearch(context, t, service)
|
||||
} ?: Log.d("PlayerBottomSheet", "Deeplink нажат, но трек null")
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Обёртка для иконок-кнопок управления — прозрачный фон. */
|
||||
@Composable
|
||||
private fun DeeplinkButton(
|
||||
service: DeeplinkService,
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier
|
||||
private fun PlayerIconBtn(
|
||||
size: Dp,
|
||||
content: @Composable () -> Unit
|
||||
) {
|
||||
Box(
|
||||
modifier = modifier
|
||||
.size(48.dp)
|
||||
.clip(RoundedCornerShape(12.dp))
|
||||
.background(Color(0xFF2A2A2A))
|
||||
.clickable(onClick = onClick),
|
||||
contentAlignment = Alignment.Center
|
||||
Box(modifier = Modifier.size(size), contentAlignment = Alignment.Center) {
|
||||
content()
|
||||
}
|
||||
}
|
||||
|
||||
/** Монохромная кнопка сервиса для поиска трека (без официальных логотипов). */
|
||||
@Composable
|
||||
private fun ServiceDeeplinkBtn(
|
||||
service: DeeplinkService,
|
||||
onClick: () -> Unit
|
||||
) {
|
||||
val colors = RadiolaTheme.colors
|
||||
val interaction = remember { MutableInteractionSource() }
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.pressScale(interactionSource = interaction)
|
||||
.clickable(interactionSource = interaction, indication = null, onClick = onClick),
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
verticalArrangement = Arrangement.spacedBy(4.dp)
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(44.dp)
|
||||
.clip(CircleShape)
|
||||
.background(colors.surface2),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
val logoRes = com.radiola.ui.components.serviceLogoRes(service)
|
||||
if (logoRes != null) {
|
||||
Icon(
|
||||
painter = androidx.compose.ui.res.painterResource(logoRes),
|
||||
contentDescription = service.displayName,
|
||||
tint = colors.textSecondary,
|
||||
modifier = Modifier.size(22.dp)
|
||||
)
|
||||
} else {
|
||||
Icon(
|
||||
imageVector = Lucide.Music,
|
||||
contentDescription = service.displayName,
|
||||
tint = colors.textSecondary,
|
||||
modifier = Modifier.size(20.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
Text(
|
||||
text = service.displayName.take(2),
|
||||
text = service.displayName.take(8),
|
||||
style = MaterialTheme.typography.labelSmall,
|
||||
color = Color(0xFF888888)
|
||||
color = colors.textSecondary,
|
||||
maxLines = 1,
|
||||
overflow = TextOverflow.Ellipsis
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun ControlButton(
|
||||
size: androidx.compose.ui.unit.Dp,
|
||||
isPlay: Boolean = false,
|
||||
isPlaying: Boolean = false,
|
||||
icon: androidx.compose.ui.graphics.vector.ImageVector? = null,
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
Box(
|
||||
modifier = modifier
|
||||
.size(size)
|
||||
.clip(CircleShape)
|
||||
.background(if (isPlay) Color.White else Color(0xFF2A2A2A))
|
||||
.clickable(onClick = onClick),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
if (isPlay) {
|
||||
Icon(
|
||||
imageVector = if (isPlaying) Lucide.Pause else Lucide.Play,
|
||||
contentDescription = if (isPlaying) "Pause" else "Play",
|
||||
tint = Color.Black,
|
||||
modifier = Modifier.size(size * 0.4f)
|
||||
)
|
||||
} else if (icon != null) {
|
||||
Icon(
|
||||
imageVector = icon,
|
||||
contentDescription = null,
|
||||
tint = Color.White,
|
||||
modifier = Modifier.size(size * 0.4f)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user