feat: 2차 qa 완료

bibbi-team · Feb 16, 2025 · c23a0df · c23a0df
1 parent e8d4fbf
commit c23a0df
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 60 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -122,11 +122,11 @@ dependencies {
     implementation("androidx.compose.runtime:runtime-saveable:1.6.3")
     implementation("androidx.compose.runtime:runtime:1.6.3")
     implementation("androidx.compose.ui:ui")
-    implementation("androidx.compose.ui:ui-geometry:1.6.3")
+    implementation("androidx.compose.ui:ui-geometry:1.7.8")
     implementation("androidx.compose.ui:ui-graphics")
-    implementation("androidx.compose.ui:ui-text:1.6.3")
+    implementation("androidx.compose.ui:ui-text:1.7.8")
     implementation("androidx.compose.ui:ui-tooling-preview")
-    implementation("androidx.compose.ui:ui-unit:1.6.3")
+    implementation("androidx.compose.ui:ui-unit:1.7.8")
     implementation("androidx.core:core-ktx:1.12.0")
     implementation("androidx.core:core-splashscreen:1.0.1")
     implementation("androidx.glance:glance-appwidget:1.0.0")

diff --git a/app/src/main/java/com/no5ing/bbibbi/presentation/feature/view/common/AudioPlayer.kt b/app/src/main/java/com/no5ing/bbibbi/presentation/feature/view/common/AudioPlayer.kt
@@ -15,6 +15,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import androidx.media3.common.MediaItem
@@ -37,11 +38,21 @@ fun EqualizerWithPlayerAndAmplitude(
     val mediaItem = MediaItem.fromUri(url)
     val context = LocalContext.current
     val density = LocalDensity.current
+    val view = LocalView.current
 
     var calculatedMaxSizeMillis by remember {
         mutableStateOf(0L)
     }
-    var maxBarSize by remember { mutableStateOf(0) }
+    val measuredWidth = remember { mutableStateOf(0) }
+    val maxBarSize by remember {
+        derivedStateOf {
+            if (measuredWidth.value > 0) {
+                (measuredWidth.value / with(density) { 6.dp.toPx() }).toInt()
+            } else {
+                0
+            }
+        }
+    }
     var amplitudes by remember {
         mutableStateOf(listOf(0.0f))
     }
@@ -53,6 +64,11 @@ fun EqualizerWithPlayerAndAmplitude(
         mutableStateOf(false)
     }
 
+    fun resetCurrentPlaybackStatus() {
+        if (calculatedMaxSizeMillis == 0L) return
+        timeRemainingMillis = calculatedMaxSizeMillis
+    }
+
     // Start playing when the component is launched
     LaunchedEffect(Unit) {
         withContext(Dispatchers.IO) {
@@ -75,6 +91,12 @@ fun EqualizerWithPlayerAndAmplitude(
         if (isPlaying) {
             while(true) {
                 if (player.currentMediaItem != mediaItem) {
+                    resetCurrentPlaybackStatus()
+                    isPlaying = false
+                    break
+                }
+                if (player.playbackState == ExoPlayer.STATE_ENDED) {
+                    resetCurrentPlaybackStatus()
                     isPlaying = false
                     break
                 }
@@ -115,77 +137,88 @@ fun EqualizerWithPlayerAndAmplitude(
     }
 
 
-    Row(
+    Box(
         modifier = Modifier
             .padding(top = 6.dp)
             .fillMaxWidth()
             .clip(RoundedCornerShape(100.dp))
             .background(MaterialTheme.bbibbiScheme.backgroundSecondary)
-            .padding(16.dp),
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(16.dp)
+            .padding(16.dp)
+            .onGloballyPositioned { coordinates ->
+                val newWidth = coordinates.size.width
+                // 변경된 경우에만 업데이트
+                view.post {
+                    if (newWidth != measuredWidth.value) {
+                        measuredWidth.value = newWidth
+                    }
+                }
+            }
     ) {
-        if (isPlaying) {
-            Icon(
-                painter = painterResource(id = R.drawable.pause_button),
-                contentDescription = null,
-                modifier = Modifier
-                    .size(12.dp)
-                    .clickable { tapPause() },
-                tint = MaterialTheme.bbibbiScheme.mainYellow
-            )
-        } else {
-            Icon(
-                painter = painterResource(id = R.drawable.play_button),
-                contentDescription = null,
-                modifier = Modifier
-                    .size(12.dp)
-                    .clickable { tapPlay() },
-                tint = MaterialTheme.bbibbiScheme.mainYellow
-            )
-        }
-        LazyRow(
+        Row(
             modifier = Modifier
-                .weight(1.0f)
-                .onGloballyPositioned {
-                    maxBarSize = with(density) {
-                        (it.size.width / 6.dp.toPx()).toInt()
-                    }
-                },
+              //  .padding(top = 6.dp)
+                .fillMaxWidth(),
+
             verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(4.dp)
+            horizontalArrangement = Arrangement.spacedBy(16.dp)
         ) {
-            items(scopedAmplitudes.size) { index ->
-                val barHeight = 2.dp + (scopedAmplitudes[index] * 22).dp
-                val barColor = if (index < highlightIndex) {
-                    MaterialTheme.bbibbiScheme.mainYellow
-                } else {
-                    MaterialTheme.bbibbiScheme.gray500
-                }
-                Box(
+            if (isPlaying) {
+                Icon(
+                    painter = painterResource(id = R.drawable.pause_button),
+                    contentDescription = null,
                     modifier = Modifier
-                        .width(2.dp)
-                        .height(barHeight)
-                        .clip(RoundedCornerShape(100.dp))
-                        .background(barColor)
+                        .size(12.dp)
+                        .clickable { tapPause() },
+                    tint = MaterialTheme.bbibbiScheme.mainYellow
                 )
-            }
-
-            items((maxBarSize - amplitudes.size).coerceAtLeast(0)) {
-                Box(
+            } else {
+                Icon(
+                    painter = painterResource(id = R.drawable.play_button),
+                    contentDescription = null,
                     modifier = Modifier
-                        .width(2.dp)
-                        .height(2.dp)
-                        .clip(RoundedCornerShape(100.dp))
-                        .background(MaterialTheme.bbibbiScheme.gray600)
+                        .size(12.dp)
+                        .clickable { tapPlay() },
+                    tint = MaterialTheme.bbibbiScheme.mainYellow
                 )
             }
+            LazyRow(
+                modifier = Modifier.weight(1.0f),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(4.dp)
+            ) {
+                items(scopedAmplitudes.size) { index ->
+                    val barHeight = 2.dp + (scopedAmplitudes[index] * 22).dp
+                    val barColor = if (index < highlightIndex) {
+                        MaterialTheme.bbibbiScheme.mainYellow
+                    } else {
+                        MaterialTheme.bbibbiScheme.gray500
+                    }
+                    Box(
+                        modifier = Modifier
+                            .width(2.dp)
+                            .height(barHeight)
+                            .clip(RoundedCornerShape(100.dp))
+                            .background(barColor)
+                    )
+                }
+
+                items((maxBarSize - amplitudes.size).coerceAtLeast(0)) {
+                    Box(
+                        modifier = Modifier
+                            .width(2.dp)
+                            .height(2.dp)
+                            .clip(RoundedCornerShape(100.dp))
+                            .background(MaterialTheme.bbibbiScheme.gray600)
+                    )
+                }
+            }
+            Text(
+                text = formatTime((timeRemainingMillis / 1000).toInt()),
+                style = MaterialTheme.bbibbiTypo.bodyOneRegular,
+                color = MaterialTheme.bbibbiScheme.gray500,
+            )
         }
-        Text(
-            text = formatTime((timeRemainingMillis / 1000).toInt()),
-            style = MaterialTheme.bbibbiTypo.bodyOneRegular,
-            color = MaterialTheme.bbibbiScheme.gray500,
-        )
     }
 
+
 }