🔀 Merge pull request #36 from snuhcs-course/feat/refactor-tts

♻️ Refactor tts screen and auto deletion
snuhcs-course · Nov 15, 2023 · 030281e · 030281e
2 parents 2a59fcf + e2d2df6
commit 030281e
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 40 deletions.
diff --git a/...tend/app/src/main/java/com/example/speechbuddy/compose/texttospeech/TextToSpeechScreen.kt b/...tend/app/src/main/java/com/example/speechbuddy/compose/texttospeech/TextToSpeechScreen.kt
@@ -1,8 +1,10 @@
 package com.example.speechbuddy.compose.texttospeech
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -13,9 +15,8 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material.icons.filled.PlayArrow
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -51,6 +52,9 @@ fun TextToSpeechScreen(
     val uiState by viewModel.uiState.collectAsState()
     val context = LocalContext.current
 
+    val activatedColor = MaterialTheme.colorScheme.onBackground
+    val deactivatedColor = MaterialTheme.colorScheme.outline
+
     Surface(
         modifier = modifier.fillMaxSize()
     ) {
@@ -83,60 +87,129 @@ fun TextToSpeechScreen(
                     modifier = Modifier
                         .fillMaxWidth()
                         .verticalScroll(rememberScrollState())
-                        .height(300.dp),
+                        .height(200.dp),
                     textStyle = MaterialTheme.typography.bodyMedium,
                     shape = RoundedCornerShape(10.dp),
                     colors = TextFieldDefaults.outlinedTextFieldColors(
-                        focusedBorderColor = MaterialTheme.colorScheme.tertiary,
+                        focusedBorderColor = MaterialTheme.colorScheme.primary,
                         unfocusedBorderColor = MaterialTheme.colorScheme.outline
                     )
                 )
 
                 Spacer(modifier = Modifier.height(20.dp))
 
-                TextToSpeechButton(buttonStatus = uiState.buttonStatus,
-                    onPlay = { viewModel.ttsStart(context) },
-                    onStop = { viewModel.ttsStop() })
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.SpaceBetween
+                ) {
+                    Spacer(modifier = Modifier.weight(1f))
+
+                    TextToSpeechButton(
+                        buttonStatus = uiState.buttonStatus,
+                        activatedColor = activatedColor,
+                        deactivatedColor = deactivatedColor,
+                        onPlay = { viewModel.ttsStart(context) },
+                        onStop = { viewModel.ttsStop() },
+                        isTextEmpty = viewModel.textInput.isEmpty()
+                    )
+
+                    Spacer(modifier = Modifier.weight(1f))
+
+                    TextClearButton(
+                        buttonStatus = uiState.buttonStatus,
+                        activatedColor = activatedColor,
+                        deactivatedColor = deactivatedColor,
+                        onClick = { viewModel.clearText() },
+                        isTextEmpty = viewModel.textInput.isEmpty()
+                    )
+
+                    Spacer(modifier = Modifier.weight(1f))
+                }
             }
         }
     }
 }
 
 @Composable
 private fun TextToSpeechButton(
-    buttonStatus: ButtonStatusType, onPlay: () -> Unit, onStop: () -> Unit
+    buttonStatus: ButtonStatusType,
+    activatedColor: Color,
+    deactivatedColor: Color,
+    onPlay: () -> Unit,
+    onStop: () -> Unit,
+    isTextEmpty: Boolean
 ) {
-    val textToSpeechButtonColors = ButtonDefaults.buttonColors(
-        containerColor = Color.Transparent, contentColor = MaterialTheme.colorScheme.onBackground
-    )
-
     when (buttonStatus) {
-        ButtonStatusType.PLAY -> Button(
-            onClick = onPlay, colors = textToSpeechButtonColors
-        ) {
-            Text(
-                style = MaterialTheme.typography.headlineMedium,
-                text = stringResource(id = R.string.play_text)
-            )
-            Icon(
-                Icons.Filled.PlayArrow,
-                contentDescription = stringResource(id = R.string.play_text),
-                modifier = Modifier.size(36.dp)
-            )
+        ButtonStatusType.PLAY -> {
+            Row(
+                modifier = Modifier
+                    .clickable(onClick = { if (!isTextEmpty) onPlay() })
+                    .height(38.dp),
+                horizontalArrangement = Arrangement.Center
+            ) {
+                Text(
+                    text = stringResource(id = R.string.play_text),
+                    color = if (isTextEmpty) deactivatedColor else activatedColor,
+                    style = MaterialTheme.typography.headlineSmall
+                )
+                Icon(
+                    imageVector = Icons.Filled.PlayArrow,
+                    contentDescription = stringResource(id = R.string.play_text),
+                    modifier = Modifier.size(38.dp),
+                    tint = if (isTextEmpty) deactivatedColor else activatedColor
+                )
+            }
         }
 
-        ButtonStatusType.STOP -> Button(
-            onClick = onStop, colors = textToSpeechButtonColors
-        ) {
-            Text(
-                style = MaterialTheme.typography.headlineMedium,
-                text = stringResource(id = R.string.stop_text)
-            )
-            Icon(
-                painterResource(R.drawable.stop_icon),
-                contentDescription = stringResource(id = R.string.stop_text),
-                modifier = Modifier.size(36.dp)
-            )
+        ButtonStatusType.STOP -> {
+            Row(
+                modifier = Modifier
+                    .clickable(onClick = onStop)
+                    .height(38.dp),
+                horizontalArrangement = Arrangement.Center
+            ) {
+                Text(
+                    text = stringResource(id = R.string.stop_text),
+                    color = activatedColor,
+                    style = MaterialTheme.typography.headlineSmall
+                )
+                Icon(
+                    painter = painterResource(R.drawable.stop_icon),
+                    contentDescription = stringResource(id = R.string.stop_text),
+                    modifier = Modifier.size(38.dp),
+                    tint = activatedColor
+                )
+            }
         }
     }
+}
+
+@Composable
+fun TextClearButton(
+    buttonStatus: ButtonStatusType,
+    activatedColor: Color,
+    deactivatedColor: Color,
+    onClick: () -> Unit,
+    isTextEmpty: Boolean
+) {
+    val isActivated = buttonStatus == ButtonStatusType.PLAY && !isTextEmpty
+
+    Row(
+        modifier = Modifier
+            .clickable(onClick = { if (isActivated) onClick() })
+            .height(38.dp),
+        horizontalArrangement = Arrangement.Center
+    ) {
+        Text(
+            text = stringResource(id = R.string.clear_text),
+            color = if (isActivated) activatedColor else deactivatedColor,
+            style = MaterialTheme.typography.headlineSmall
+        )
+        Icon(
+            imageVector = Icons.Filled.Delete,
+            contentDescription = stringResource(id = R.string.clear_text),
+            modifier = Modifier.size(38.dp),
+            tint = if (isActivated) activatedColor else deactivatedColor
+        )
+    }
 }
diff --git a/frontend/app/src/main/java/com/example/speechbuddy/viewmodel/TextToSpeechViewModel.kt b/frontend/app/src/main/java/com/example/speechbuddy/viewmodel/TextToSpeechViewModel.kt
@@ -34,9 +34,9 @@ class TextToSpeechViewModel @Inject internal constructor(
         textInput = input
     }
 
-private fun clearText() {
-    textInput = ""
-}
+    fun clearText() {
+        textInput = ""
+    }
 
     fun ttsStop() {
         textToSpeech?.stop()
@@ -79,7 +79,6 @@ private fun clearText() {
                                     buttonStatus = ButtonStatusType.PLAY
                                 )
                             }
-                            clearText()
                         }
 
                         @Deprecated("Deprecated in Java")

diff --git a/frontend/app/src/main/res/values/strings.xml b/frontend/app/src/main/res/values/strings.xml
@@ -51,6 +51,7 @@
     <string name="tts_text">소리로 말해보아요</string>
     <string name="tts_explain">키보드로 텍스트를 입력해주세요</string>
     <string name="play_text">재생하기</string>
+    <string name="clear_text">지우기</string>
     <string name="menu_talk_with_symbol">상징으로 말하기</string>
     <string name="menu_tts">음성으로 말하기</string>
     <string name="menu_add_symbol">새 상징 만들기</string>