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

2026-04-14 12:29:32 +03:00
parent 58bbdae26c
commit d7e75797ef
16 changed files with 553 additions and 282 deletions
@@ -8,6 +8,8 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Pause
 import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.material.icons.filled.Download
+import androidx.compose.material.icons.filled.VolumeUp
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -17,66 +19,110 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.unit.IntSize
 import androidx.media3.common.MediaItem
 import androidx.media3.common.PlaybackParameters
 import androidx.media3.common.Player
 import androidx.media3.exoplayer.ExoPlayer
 import kotlinx.coroutines.delay

-import androidx.compose.material.icons.filled.Download
-import androidx.compose.material.icons.filled.GraphicEq
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.foundation.gestures.detectTapGestures
-import androidx.compose.ui.layout.onSizeChanged
-import androidx.compose.ui.unit.IntSize
-
@Composable
 fun AppAudioPlayer(
    url: String,
+    name: String? = null,
+    size: Long? = null,
    isVoiceMessage: Boolean = false,
+    initialPlaybackSpeed: Float = core.utils.PlaybackManager.globalPlaybackSpeed.value,
+    autoPlay: Boolean = false,
+    onFinished: (Float) -> Unit = {},
    modifier: Modifier = Modifier,
    contentColor: Color = Color.White
 ) {
    val context = LocalContext.current
+    var playbackSpeed by remember { mutableFloatStateOf(initialPlaybackSpeed) }
+    
+    // Update global speed when changed locally
+    LaunchedEffect(playbackSpeed) {
+        core.utils.PlaybackManager.globalPlaybackSpeed.value = playbackSpeed
+    }
+
    val exoPlayer = remember {
        ExoPlayer.Builder(context).build().apply {
            val mediaItem = MediaItem.fromUri(url)
            setMediaItem(mediaItem)
+            playbackParameters = PlaybackParameters(playbackSpeed)
+            val savedPos = core.utils.PlaybackManager.getPosition(url)
+            seekTo(savedPos)
            prepare()
        }
    }

+    // Обработка сигнала авто-запуска
+    LaunchedEffect(autoPlay) {
+        if (autoPlay) {
+            exoPlayer.play()
+            core.utils.PlaybackManager.currentPlayingUrl.value = url
+        }
+    }
+
    var isPlaying by remember { mutableStateOf(false) }
-    var currentPosition by remember { mutableLongStateOf(0L) }
+    var currentPosition by remember { mutableLongStateOf(core.utils.PlaybackManager.getPosition(url)) }
    var duration by remember { mutableLongStateOf(0L) }
-    var playbackSpeed by remember { mutableFloatStateOf(1.0f) }
    var layoutSize by remember { mutableStateOf(IntSize.Zero) }

-    val fileName = remember(url) { url.substringAfterLast("/") }
+    // Глобальная синхронизация: если играет кто-то другой, ставим паузу
+    val globalPlayingUrl by core.utils.PlaybackManager.currentPlayingUrl
+    LaunchedEffect(globalPlayingUrl) {
+        if (globalPlayingUrl != url && isPlaying) {
+            exoPlayer.pause()
+        }
+    }
+
+    val fileName = remember(url, name) { 
+        name ?: url.substringAfterLast("/") 
+    }

    DisposableEffect(Unit) {
        val listener = object : Player.Listener {
            override fun onIsPlayingChanged(playing: Boolean) {
                isPlaying = playing
+                if (playing) {
+                    core.utils.PlaybackManager.currentPlayingUrl.value = url
+                }
            }
            override fun onPlaybackStateChanged(state: Int) {
                if (state == Player.STATE_READY) {
                    duration = exoPlayer.duration
+                } else if (state == Player.STATE_ENDED) {
+                    exoPlayer.pause() // Явно останавливаем, чтобы не было авто-реплея при seekTo
+                    if (isVoiceMessage) {
+                        exoPlayer.seekTo(0)
+                        currentPosition = 0
+                        core.utils.PlaybackManager.resetPosition(url)
+                    }
+                    onFinished(playbackSpeed)
                }
            }
        }
        exoPlayer.addListener(listener)
        onDispose {
+            core.utils.PlaybackManager.savePosition(url, exoPlayer.currentPosition)
            exoPlayer.removeListener(listener)
            exoPlayer.release()
        }
    }

    LaunchedEffect(isPlaying) {
-        while (isPlaying) {
-            currentPosition = exoPlayer.currentPosition
-            delay(100)
+        if (isPlaying) {
+            while (isPlaying) {
+                currentPosition = exoPlayer.currentPosition
+                core.utils.PlaybackManager.savePosition(url, currentPosition)
+                delay(200)
+            }
        }
    }

@@ -84,38 +130,39 @@ fun AppAudioPlayer(
        modifier = modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(12.dp))
-            .background(Color.Black.copy(alpha = 0.2f))
+            .background(Color.White.copy(alpha = 0.12f))
            .padding(8.dp)
    ) {
-        if (!isVoiceMessage) {
-            Row(
-                verticalAlignment = Alignment.CenterVertically,
-                modifier = Modifier.padding(bottom = 4.dp)
-            ) {
-                Icon(
-                    Icons.Default.GraphicEq,
-                    contentDescription = null,
-                    tint = contentColor.copy(alpha = 0.7f),
-                    modifier = Modifier.size(16.dp)
-                )
-                Spacer(modifier = Modifier.width(4.dp))
-                Text(
-                    text = fileName,
-                    fontSize = 12.sp,
-                    fontWeight = FontWeight.Bold,
-                    color = contentColor,
-                    maxLines = 1,
-                    modifier = Modifier.weight(1f)
-                )
-            }
+        // Header: Icon and Name
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.padding(bottom = 8.dp)
+        ) {
+            Icon(
+                imageVector = Icons.Default.VolumeUp,
+                contentDescription = null,
+                tint = contentColor.copy(alpha = 0.6f),
+                modifier = Modifier.size(14.dp)
+            )
+            Spacer(modifier = Modifier.width(6.dp))
+            Text(
+                text = if (isVoiceMessage) "Голосовое сообщение" else fileName,
+                fontSize = 13.sp,
+                fontWeight = FontWeight.Bold,
+                color = contentColor,
+                maxLines = 1,
+                modifier = Modifier.weight(1f)
+            )
        }

        Row(
-            verticalAlignment = Alignment.CenterVertically
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.fillMaxWidth()
        ) {
+            // Play/Pause Button
            Box(
                modifier = Modifier
-                    .size(40.dp)
+                    .size(44.dp)
                    .clip(CircleShape)
                    .background(Color.White)
                    .clickable { if (isPlaying) exoPlayer.pause() else exoPlayer.play() },
@@ -124,21 +171,19 @@ fun AppAudioPlayer(
                Icon(
                    imageVector = if (isPlaying) Icons.Default.Pause else Icons.Default.PlayArrow,
                    contentDescription = null,
-                    tint = Color(0xFF3096E5),
+                    tint = Color(0xFF3390EC),
                    modifier = Modifier.size(28.dp)
                )
            }

-            Column(
-                modifier = Modifier
-                    .weight(1f)
-                    .padding(horizontal = 12.dp)
-            ) {
-                // Waveform / Progress
+            Spacer(modifier = Modifier.width(12.dp))
+
+            Column(modifier = Modifier.weight(1f)) {
+                // Waveform
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
-                        .height(32.dp)
+                        .height(30.dp)
                        .onSizeChanged { layoutSize = it }
                        .pointerInput(duration) {
                            detectTapGestures { offset ->
@@ -153,28 +198,27 @@ fun AppAudioPlayer(
                    contentAlignment = Alignment.CenterStart
                ) {
                    androidx.compose.foundation.Canvas(modifier = Modifier.fillMaxSize()) {
-                        val barCount = 35
+                        val barCount = 40
                        val barSpacing = 2.dp.toPx()
-                        val barWidth = (size.width - (barCount - 1) * barSpacing) / barCount
+                        val barWidth = (this.size.width - (barCount - 1) * barSpacing) / barCount
                        val progress = if (duration > 0) currentPosition.toFloat() / duration.toFloat() else 0f
                        
-                        // Fake consistent waveform items
                        val barHeights = listOf(
-                            0.4f, 0.6f, 0.3f, 0.8f, 0.5f, 0.9f, 0.4f, 0.7f, 0.5f, 0.8f, 
-                            0.3f, 0.7f, 0.6f, 0.9f, 0.4f, 0.8f, 0.5f, 0.7f, 0.3f, 0.9f,
-                            0.5f, 0.6f, 0.4f, 0.8f, 0.6f, 0.7f, 0.5f, 0.4f, 0.5f, 0.7f,
-                            0.4f, 0.3f, 0.5f, 0.6f, 0.4f
+                            0.3f, 0.5f, 0.2f, 0.7f, 0.4f, 0.8f, 0.3f, 0.6f, 0.4f, 0.7f, 
+                            0.2f, 0.6f, 0.5f, 0.8f, 0.3f, 0.7f, 0.4f, 0.6f, 0.2f, 0.8f,
+                            0.4f, 0.5f, 0.3f, 0.7f, 0.5f, 0.6f, 0.4f, 0.3f, 0.4f, 0.6f,
+                            0.3f, 0.2f, 0.4f, 0.5f, 0.3f, 0.6f, 0.4f, 0.7f, 0.3f, 0.5f
                        )

                        for (i in 0 until barCount) {
                            val x = i * (barWidth + barSpacing)
                            val heightPct = barHeights[i % barHeights.size]
-                            val barHeight = size.height * heightPct
+                            val barHeight = this.size.height * heightPct
                            val isActive = (i.toFloat() / barCount) <= progress
                            
                            drawRoundRect(
                                color = if (isActive) Color.White else Color.White.copy(alpha = 0.25f),
-                                topLeft = androidx.compose.ui.geometry.Offset(x, (size.height - barHeight) / 2),
+                                topLeft = androidx.compose.ui.geometry.Offset(x, (this.size.height - barHeight) / 2),
                                size = androidx.compose.ui.geometry.Size(barWidth, barHeight),
                                cornerRadius = androidx.compose.ui.geometry.CornerRadius(2.dp.toPx())
                            )
@@ -182,56 +226,79 @@ fun AppAudioPlayer(
                    }
                }

+                Spacer(modifier = Modifier.height(2.dp))
+
+                // Footer: Time, Size, Download
                Row(
                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
-                    Text(
-                        text = "${formatDuration(currentPosition)} / ${formatDuration(duration)}",
-                        fontSize = 11.sp,
-                        color = contentColor.copy(alpha = 0.7f)
-                    )
+                    Row(verticalAlignment = Alignment.CenterVertically) {
+                        Text(
+                            text = formatDuration(if (isPlaying || currentPosition > 0) currentPosition else duration),
+                            fontSize = 11.sp,
+                            color = contentColor.copy(alpha = 0.7f)
+                        )
+                        if (!isVoiceMessage) {
+                            size?.let {
+                                Spacer(modifier = Modifier.width(12.dp))
+                                val sizeStr = if (it > 1024 * 1024) String.format("%.1f MB", it / (1024.0 * 1024.0)) else "${it / 1024} KB"
+                                Text(
+                                    text = sizeStr,
+                                    fontSize = 11.sp,
+                                    fontWeight = FontWeight.Bold,
+                                    color = contentColor.copy(alpha = 0.7f)
+                                )
+                            }
+                        }
+                    }
+                    
                    if (!isVoiceMessage) {
                        Icon(
-                            Icons.Default.Download,
+                            imageVector = Icons.Default.Download,
                            contentDescription = null,
-                            tint = contentColor.copy(alpha = 0.7f),
-                            modifier = Modifier.size(14.dp)
+                            tint = contentColor.copy(alpha = 0.6f),
+                            modifier = Modifier.size(14.dp).clickable { /* Handle download */ }
                        )
                    }
                }
            }

-            Surface(
-                onClick = {
-                    playbackSpeed = when (playbackSpeed) {
-                        1.0f -> 1.5f
-                        1.5f -> 2.0f
-                        else -> 1.0f
+            // Speed toggle (only for voice messages or if user wants)
+            if (isVoiceMessage || playbackSpeed > 1.0f) {
+                Spacer(modifier = Modifier.width(8.dp))
+                Surface(
+                    onClick = {
+                        playbackSpeed = when (playbackSpeed) {
+                            1.0f -> 1.5f
+                            1.5f -> 2.0f
+                            else -> 1.0f
+                        }
+                        exoPlayer.playbackParameters = PlaybackParameters(playbackSpeed)
+                    },
+                    color = Color.White.copy(alpha = 0.1f),
+                    shape = CircleShape,
+                    modifier = Modifier.size(32.dp)
+                ) {
+                    Box(contentAlignment = Alignment.Center) {
+                        Text(
+                            text = "${if (playbackSpeed % 1.0f == 0.0f) playbackSpeed.toInt() else playbackSpeed}x",
+                            fontSize = 10.sp,
+                            fontWeight = FontWeight.Bold,
+                            color = Color.White
+                        )
                    }
-                    exoPlayer.playbackParameters = PlaybackParameters(playbackSpeed)
-                },
-                color = Color.White.copy(alpha = 0.15f),
-                shape = CircleShape,
-                modifier = Modifier.size(36.dp)
-            ) {
-                Box(contentAlignment = Alignment.Center) {
-                    Text(
-                        text = "${if (playbackSpeed % 1.0f == 0.0f) playbackSpeed.toInt() else playbackSpeed}x",
-                        fontSize = 11.sp,
-                        fontWeight = FontWeight.Black,
-                        color = Color.White
-                    )
                }
            }
        }
    }
 }

-
 private fun formatDuration(durationMs: Long): String {
+    if (durationMs <= 0) return "0:00"
    val totalSeconds = durationMs / 1000
    val minutes = totalSeconds / 60
    val seconds = totalSeconds % 60
-    return String.format("%02d:%02d", minutes, seconds)
+    return String.format("%d:%02d", minutes, seconds)
 }
@@ -22,13 +22,19 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import androidx.compose.ui.window.DialogProperties
 import coil.compose.AsyncImage
+import chats.domain.model.Media
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState

+@OptIn(androidx.compose.foundation.ExperimentalFoundationApi::class)
@Composable
 fun AppMediaLightbox(
-    url: String,
-    type: String = "image",
+    mediaList: List<Media>,
+    initialIndex: Int = 0,
    onClose: () -> Unit
 ) {
+    val pagerState = rememberPagerState(initialPage = initialIndex, pageCount = { mediaList.size })
+    
    Dialog(
        onDismissRequest = onClose,
        properties = DialogProperties(
@@ -36,41 +42,61 @@ fun AppMediaLightbox(
            decorFitsSystemWindows = false
        )
    ) {
-        var scale by remember { mutableFloatStateOf(1f) }
-        var offset by remember { mutableStateOf(androidx.compose.ui.geometry.Offset.Zero) }
-
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Black)
-                .pointerInput(Unit) {
-                    detectTransformGestures { _, pan, zoom, _ ->
-                        scale = (scale * zoom).coerceIn(1f, 5f)
-                        offset += pan
+        ) {
+            HorizontalPager(
+                state = pagerState,
+                modifier = Modifier.fillMaxSize(),
+                pageSpacing = 16.dp,
+                beyondBoundsPageCount = 1
+            ) { page ->
+                val media = mediaList[page]
+
+                Box(
+                    modifier = Modifier.fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                ) {
+                    if (media.type.startsWith("video")) {
+                        AppVideoPlayer(
+                            url = media.url,
+                            modifier = Modifier.fillMaxSize(),
+                            useController = true,
+                            autoPlay = true
+                        )
+                    } else {
+                        var scale by remember { mutableFloatStateOf(1f) }
+                        var offset by remember { mutableStateOf(androidx.compose.ui.geometry.Offset.Zero) }
+
+                        AsyncImage(
+                            model = media.url,
+                            contentDescription = null,
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .pointerInput(Unit) {
+                                    detectTransformGestures(
+                                        onGesture = { _, pan, zoom, _ ->
+                                            scale = (scale * zoom).coerceIn(1f, 5f)
+                                            if (scale > 1f) {
+                                                offset += pan
+                                            } else {
+                                                offset = androidx.compose.ui.geometry.Offset.Zero
+                                            }
+                                        }
+                                    )
+                                }
+                                .graphicsLayer(
+                                    scaleX = scale,
+                                    scaleY = scale,
+                                    translationX = offset.x,
+                                    translationY = offset.y
+                                ),
+                            contentScale = ContentScale.Fit
+                        )
                    }
                }
-        ) {
-            if (type == "video") {
-                AppVideoPlayer(
-                    url = url,
-                    modifier = Modifier.fillMaxSize(),
-                    useController = true,
-                    autoPlay = true
-                )
-            } else {
-                AsyncImage(
-                    model = url,
-                    contentDescription = null,
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .graphicsLayer(
-                            scaleX = scale,
-                            scaleY = scale,
-                            translationX = offset.x,
-                            translationY = offset.y
-                        ),
-                    contentScale = ContentScale.Fit
-                )
            }

            // Top Bar
@@ -91,8 +117,16 @@ fun AppMediaLightbox(
                    Icon(Icons.Default.Close, contentDescription = null, tint = Color.White)
                }

+                if (mediaList.isNotEmpty()) {
+                    Text(
+                        text = "${pagerState.currentPage + 1} / ${mediaList.size}",
+                        color = Color.White,
+                        style = MaterialTheme.typography.titleMedium
+                    )
+                }
+
                IconButton(
-                    onClick = { /* Handle download */ },
+                    onClick = { /* Handle download of mediaList[pagerState.currentPage] */ },
                    modifier = Modifier
                        .clip(CircleShape)
                        .background(Color.Black.copy(alpha = 0.5f))
@@ -1,17 +1,32 @@
 package core.presentation.components

-import androidx.annotation.OptIn
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.animation.*
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material.icons.rounded.*
+import androidx.compose.material3.*
 import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.media3.common.MediaItem
 import androidx.media3.common.Player
-import androidx.media3.common.util.UnstableApi
 import androidx.media3.exoplayer.ExoPlayer
 import androidx.media3.ui.PlayerView
 import androidx.media3.ui.AspectRatioFrameLayout
+import kotlinx.coroutines.delay
+import androidx.annotation.OptIn
+import androidx.media3.common.util.UnstableApi
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.ui.draw.clip

@OptIn(UnstableApi::class)
@Composable
@@ -24,7 +39,6 @@ fun AppVideoPlayer(
    onVideoFinished: () -> Unit = {}
 ) {
    val context = LocalContext.current
-    
    val exoPlayer = remember {
        ExoPlayer.Builder(context).build().apply {
            val mediaItem = MediaItem.fromUri(url)
@@ -32,36 +46,158 @@ fun AppVideoPlayer(
            volume = if (isMuted) 0f else 1f
            prepare()
            playWhenReady = autoPlay
-            addListener(object : Player.Listener {
-                override fun onPlaybackStateChanged(state: Int) {
-                    if (state == Player.STATE_ENDED) {
-                        onVideoFinished()
-                    }
-                }
-            })
        }
    }

-    LaunchedEffect(isMuted) {
-        exoPlayer.volume = if (isMuted) 0f else 1f
-    }
+    var isPlaying by remember { mutableStateOf(autoPlay) }
+    var currentPosition by remember { mutableLongStateOf(0L) }
+    var duration by remember { mutableLongStateOf(0L) }
+    var isControlsVisible by remember { mutableStateOf(true) }
+    var isDragging by remember { mutableStateOf(false) }

-    // Очистка ресурсов при выходе
    DisposableEffect(Unit) {
+        val listener = object : Player.Listener {
+            override fun onIsPlayingChanged(playing: Boolean) {
+                isPlaying = playing
+            }
+            override fun onPlaybackStateChanged(state: Int) {
+                if (state == Player.STATE_READY) {
+                    duration = exoPlayer.duration
+                } else if (state == Player.STATE_ENDED) {
+                    onVideoFinished()
+                }
+            }
+        }
+        exoPlayer.addListener(listener)
        onDispose {
+            exoPlayer.removeListener(listener)
            exoPlayer.release()
        }
    }

-    AndroidView(
-        factory = {
-            PlayerView(it).apply {
-                player = exoPlayer
-                this.useController = useController
-                // Для сторис используем заполнение экрана
-                resizeMode = AspectRatioFrameLayout.RESIZE_MODE_ZOOM
+    LaunchedEffect(isPlaying, isDragging) {
+        if (isPlaying && !isDragging) {
+            while (isPlaying) {
+                currentPosition = exoPlayer.currentPosition
+                delay(500)
            }
-        },
-        modifier = modifier
-    )
+        }
+    }
+
+    Box(modifier = modifier.background(Color.Black)) {
+        AndroidView(
+            factory = {
+                PlayerView(it).apply {
+                    player = exoPlayer
+                    this.useController = false // Use our custom UI
+                    this.resizeMode = AspectRatioFrameLayout.RESIZE_MODE_FIT
+                    setBackgroundColor(android.graphics.Color.BLACK)
+                }
+            },
+            modifier = Modifier.fillMaxSize().clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = null
+            ) {
+                isControlsVisible = !isControlsVisible
+            }
+        )
+
+        AnimatedVisibility(
+            visible = isControlsVisible,
+            enter = fadeIn(),
+            exit = fadeOut()
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(Color.Black.copy(alpha = 0.3f))
+            ) {
+                // Center Controls
+                Row(
+                    modifier = Modifier.align(Alignment.Center),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(24.dp)
+                ) {
+                    IconButton(
+                        onClick = { exoPlayer.seekTo((exoPlayer.currentPosition - 10000).coerceAtLeast(0)) },
+                        modifier = Modifier.size(48.dp)
+                    ) {
+                        Icon(Icons.Rounded.Replay10, contentDescription = null, tint = Color.White, modifier = Modifier.size(36.dp))
+                    }
+
+                    Box(
+                        modifier = Modifier
+                            .size(64.dp)
+                            .clip(CircleShape)
+                            .background(Color.White.copy(alpha = 0.2f))
+                            .clickable { if (isPlaying) exoPlayer.pause() else exoPlayer.play() },
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Icon(
+                            imageVector = if (isPlaying) Icons.Rounded.Pause else Icons.Rounded.PlayArrow,
+                            contentDescription = null,
+                            tint = Color.White,
+                            modifier = Modifier.size(44.dp)
+                        )
+                    }
+
+                    IconButton(
+                        onClick = { exoPlayer.seekTo((exoPlayer.currentPosition + 10000).coerceAtMost(duration)) },
+                        modifier = Modifier.size(48.dp)
+                    ) {
+                        Icon(Icons.Rounded.Forward10, contentDescription = null, tint = Color.White, modifier = Modifier.size(36.dp))
+                    }
+                }
+
+                // Bottom Controls
+                Column(
+                    modifier = Modifier
+                        .align(Alignment.BottomCenter)
+                        .padding(bottom = 16.dp, start = 16.dp, end = 16.dp)
+                ) {
+                    Slider(
+                        value = currentPosition.toFloat(),
+                        onValueChange = {
+                            isDragging = true
+                            currentPosition = it.toLong()
+                        },
+                        onValueChangeFinished = {
+                            exoPlayer.seekTo(currentPosition)
+                            isDragging = false
+                        },
+                        valueRange = 0f..(duration.toFloat().coerceAtLeast(1f)),
+                        colors = SliderDefaults.colors(
+                            thumbColor = Color.White,
+                            activeTrackColor = Color.White,
+                            inactiveTrackColor = Color.White.copy(alpha = 0.3f)
+                        ),
+                        modifier = Modifier.height(24.dp)
+                    )
+
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.SpaceBetween,
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Text(
+                            text = "${formatTime(currentPosition)} · ${formatTime(duration)}",
+                            color = Color.White,
+                            fontSize = 12.sp
+                        )
+                        
+                        IconButton(onClick = { /* Settings */ }) {
+                            Icon(Icons.Rounded.Settings, contentDescription = null, tint = Color.White, modifier = Modifier.size(20.dp))
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+private fun formatTime(ms: Long): String {
+    val totalSeconds = ms / 1000
+    val minutes = totalSeconds / 60
+    val seconds = totalSeconds % 60
+    return String.format("%02d:%02d", minutes, seconds)
 }