Ответы, аудио, голосовые

This commit is contained in:
Халимов Рустам
2026-04-14 12:29:32 +03:00
parent 58bbdae26c
commit d7e75797ef
16 changed files with 553 additions and 282 deletions
@@ -19,15 +19,13 @@ import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Popup
import chats.domain.model.Message
import chats.domain.model.MediaType
import chats.domain.model.Media
import coil.compose.AsyncImage
import core.presentation.components.AppVideoPlayer
import core.presentation.components.AppAudioPlayer
import core.presentation.components.AppAvatar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Description
import androidx.compose.material.icons.filled.Download
import androidx.compose.material.icons.filled.Done
import androidx.compose.material.icons.filled.DoneAll
import androidx.compose.material.icons.filled.*
import chats.presentation.components.LinkPreview
import android.content.Intent
import android.net.Uri
@@ -35,31 +33,33 @@ import androidx.compose.ui.platform.LocalContext
import androidx.compose.material3.Icon
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material.icons.filled.VolumeOff
import core.presentation.components.AppMediaLightbox
import java.time.Instant
import java.time.ZoneId
import java.time.format.DateTimeFormatter
@OptIn(androidx.compose.foundation.ExperimentalFoundationApi::class)
@Composable
fun MessageBubble(
message: Message,
isCurrentUser: Boolean,
senderAvatar: String? = null,
onReactionClick: (String) -> Unit = {}
onReactionClick: (String) -> Unit = {},
autoPlay: Boolean = false,
initialPlaybackSpeed: Float = 1.0f,
onVoiceFinished: (Float) -> Unit = {}
) {
val context = LocalContext.current
var showReactionPicker by remember { mutableStateOf(false) }
var lightboxMedia by remember { mutableStateOf<Pair<String, String>?>(null) }
var lightboxMediaIndex by remember { mutableStateOf<Int?>(null) }
val backgroundColor = if (isCurrentUser) {
Color(0xFF3096E5) // Updated Blue
Color(0xFF3096E5)
} else {
Color(0xFF212121) // Updated Dark Grey
Color(0xFF212121)
}
val contentColor = Color.White
val alignment = if (isCurrentUser) Alignment.CenterEnd else Alignment.CenterStart
val shape = if (isCurrentUser) {
RoundedCornerShape(16.dp, 16.dp, 4.dp, 16.dp)
} else {
@@ -76,15 +76,8 @@ fun MessageBubble(
horizontalArrangement = if (isCurrentUser) Arrangement.End else Arrangement.Start,
verticalAlignment = Alignment.Bottom
) {
if (!isCurrentUser) {
AppAvatar(
url = senderAvatar,
name = message.senderName,
size = 32.dp,
modifier = Modifier.padding(end = 8.dp, bottom = 4.dp)
)
}
// No avatars here as per user request (web parity)
Column(
modifier = Modifier
.widthIn(max = 300.dp)
@@ -118,6 +111,7 @@ fun MessageBubble(
.clip(RoundedCornerShape(4.dp))
.background(contentColor.copy(alpha = 0.1f))
.height(IntrinsicSize.Min)
.clickable { /* Scroll to reply */ }
) {
Box(
modifier = Modifier
@@ -135,10 +129,11 @@ fun MessageBubble(
fontWeight = androidx.compose.ui.text.font.FontWeight.Bold
)
Text(
text = reply.content ?: "[Media]",
text = reply.content ?: if (reply.media.isNotEmpty()) "\uD83D\uDCCE Media" else "",
style = MaterialTheme.typography.bodySmall,
color = contentColor.copy(alpha = 0.8f),
maxLines = 1
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
}
}
@@ -148,78 +143,69 @@ fun MessageBubble(
if (message.media.isNotEmpty()) {
val mediaCount = message.media.size
if (mediaCount == 1) {
val mediaUrl = message.media[0]
when (message.mediaType) {
MediaType.IMAGE -> {
val mediaItem = message.media[0]
when {
mediaItem.type.startsWith("image") || message.mediaType == MediaType.IMAGE -> {
AsyncImage(
model = mediaUrl,
model = mediaItem.url,
contentDescription = null,
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(12.dp))
.clickable {
lightboxMedia = mediaUrl to "image"
},
.clickable { lightboxMediaIndex = 0 },
contentScale = ContentScale.FillWidth
)
}
MediaType.VIDEO -> {
mediaItem.type.startsWith("video") || message.mediaType == MediaType.VIDEO -> {
Box(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.clip(RoundedCornerShape(12.dp))
.background(Color.Black)
.clickable {
lightboxMedia = mediaUrl to "video"
},
.clickable { lightboxMediaIndex = 0 },
contentAlignment = Alignment.Center
) {
AppVideoPlayer(
url = mediaUrl,
url = mediaItem.url,
modifier = Modifier.fillMaxSize(),
useController = false,
autoPlay = true,
isMuted = true
)
// Volume Off icon in top right
Icon(
imageVector = Icons.Default.VolumeOff,
contentDescription = null,
tint = Color.White.copy(alpha = 0.7f),
modifier = Modifier
.align(Alignment.TopEnd)
.padding(8.dp)
.size(20.dp)
modifier = Modifier.align(Alignment.TopEnd).padding(8.dp).size(20.dp)
)
}
}
MediaType.AUDIO -> {
mediaItem.type.startsWith("audio") || mediaItem.filename?.endsWith(".mp3", true) == true || message.mediaType == MediaType.AUDIO -> {
AppAudioPlayer(
url = mediaUrl,
url = mediaItem.url,
name = mediaItem.filename,
size = mediaItem.size,
isVoiceMessage = isVoiceMessage,
initialPlaybackSpeed = initialPlaybackSpeed,
autoPlay = autoPlay,
onFinished = onVoiceFinished,
contentColor = contentColor
)
}
MediaType.FILE -> {
FileItem(mediaUrl = mediaUrl, isCurrentUser = isCurrentUser, contentColor = contentColor)
else -> {
FileItem(media = mediaItem, isCurrentUser = isCurrentUser, contentColor = contentColor)
}
else -> {}
}
} else if (mediaCount > 1) {
// Photo Grid for multiple images
} else {
// Multi-media grid
PhotoGrid(
urls = message.media,
onMediaClick = { lightboxMedia = it to "image" },
modifier = Modifier
.fillMaxWidth()
.height(300.dp)
.clip(RoundedCornerShape(12.dp))
message.media,
onMediaClick = { index -> lightboxMediaIndex = index },
modifier = Modifier.fillMaxWidth().height(300.dp).clip(RoundedCornerShape(12.dp))
)
}
if (mediaCount > 0) {
Spacer(modifier = Modifier.height(4.dp))
}
Spacer(modifier = Modifier.height(4.dp))
}
// Text Content
@@ -245,11 +231,11 @@ fun MessageBubble(
}
val formattedTime = remember(message.createdAt) {
try {
// Handle ISO 8601 strings like 2024-05-14T10:49:02.12Z
val timePart = message.createdAt.substringAfter('T').take(5)
if (timePart.contains(':')) timePart else "00:00"
val instant = Instant.parse(message.createdAt)
val zonedDateTime = instant.atZone(ZoneId.systemDefault())
zonedDateTime.format(DateTimeFormatter.ofPattern("HH:mm"))
} catch (e: Exception) {
"00:00"
message.createdAt.substringAfter('T').take(5)
}
}
Text(
@@ -271,11 +257,11 @@ fun MessageBubble(
}
}
lightboxMedia?.let { (url, type) ->
lightboxMediaIndex?.let { index ->
AppMediaLightbox(
url = url,
type = type,
onClose = { lightboxMedia = null }
mediaList = message.media,
initialIndex = index,
onClose = { lightboxMediaIndex = null }
)
}
}
@@ -302,11 +288,7 @@ fun MessageReactions(
Text(text = emoji, fontSize = 12.sp)
if (count > 1) {
Spacer(modifier = Modifier.width(2.dp))
Text(
text = count.toString(),
fontSize = 10.sp,
color = Color.White
)
Text(text = count.toString(), fontSize = 10.sp, color = Color.White)
}
}
}
@@ -315,7 +297,7 @@ fun MessageReactions(
}
@Composable
fun FileItem(mediaUrl: String, isCurrentUser: Boolean, contentColor: Color) {
fun FileItem(media: Media, isCurrentUser: Boolean, contentColor: Color) {
Row(
modifier = Modifier
.fillMaxWidth()
@@ -331,25 +313,12 @@ fun FileItem(mediaUrl: String, isCurrentUser: Boolean, contentColor: Color) {
.background(if (isCurrentUser) Color.White.copy(alpha = 0.2f) else Color(0xFF3390EC).copy(alpha = 0.2f)),
contentAlignment = Alignment.Center
) {
Icon(
Icons.Default.Description,
contentDescription = null,
tint = contentColor
)
Icon(Icons.Default.Description, contentDescription = null, tint = contentColor)
}
Column(
modifier = Modifier
.weight(1f)
.padding(horizontal = 8.dp)
modifier = Modifier.weight(1f).padding(horizontal = 8.dp)
) {
val fileName = remember(mediaUrl) {
val decoded = Uri.decode(mediaUrl.substringAfterLast("/"))
if (decoded.length > 30) {
decoded.take(15) + "..." + decoded.takeLast(10)
} else {
decoded
}
}
val fileName = media.filename ?: "File"
Text(
text = fileName,
style = MaterialTheme.typography.bodySmall,
@@ -357,48 +326,38 @@ fun FileItem(mediaUrl: String, isCurrentUser: Boolean, contentColor: Color) {
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
val sizeStr = media.size?.let {
if (it > 1024 * 1024) "${it / (1024 * 1024)} MB" else "${it / 1024} KB"
} ?: "File"
Text(
text = if (mediaUrl.endsWith(".mp3", ignoreCase = true) || mediaUrl.contains("audio")) "Audio" else "File",
text = sizeStr,
style = MaterialTheme.typography.labelSmall,
color = contentColor.copy(alpha = 0.6f)
)
}
Icon(
Icons.Default.Download,
contentDescription = null,
tint = contentColor,
modifier = Modifier.size(20.dp)
)
Icon(Icons.Default.Download, contentDescription = null, tint = contentColor, modifier = Modifier.size(20.dp))
}
}
@Composable
fun PhotoGrid(urls: List<String>, onMediaClick: (String) -> Unit, modifier: Modifier = Modifier) {
val items = urls.take(4)
fun PhotoGrid(media: List<Media>, onMediaClick: (Int) -> Unit, modifier: Modifier = Modifier) {
val items = media.take(4)
Column(modifier = modifier) {
val rows = (items.size + 1) / 2
for (i in 0 until rows) {
Row(modifier = Modifier.weight(1f)) {
val firstIndex = i * 2
AsyncImage(
model = items[firstIndex],
model = items[firstIndex].url,
contentDescription = null,
modifier = Modifier
.weight(1f)
.fillMaxHeight()
.padding(1.dp)
.clickable { onMediaClick(items[firstIndex]) },
modifier = Modifier.weight(1f).fillMaxHeight().padding(1.dp).clickable { onMediaClick(firstIndex) },
contentScale = ContentScale.Crop
)
if (firstIndex + 1 < items.size) {
AsyncImage(
model = items[firstIndex + 1],
model = items[firstIndex + 1].url,
contentDescription = null,
modifier = Modifier
.weight(1f)
.fillMaxHeight()
.padding(1.dp)
.clickable { onMediaClick(items[firstIndex + 1]) },
modifier = Modifier.weight(1f).fillMaxHeight().padding(1.dp).clickable { onMediaClick(firstIndex + 1) },
contentScale = ContentScale.Crop
)
} else if (rows > 1) {
@@ -408,4 +367,3 @@ fun PhotoGrid(urls: List<String>, onMediaClick: (String) -> Unit, modifier: Modi
}
}
}