♻️ Refactor tts screen and auto deletion

snuhcs-course · Nov 10, 2023 · 3a76ec0 · 3a76ec0
1 parent 179e466
commit 3a76ec0
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 15 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
@@ -3,6 +3,7 @@ package com.example.speechbuddy.compose.texttospeech
 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,6 +14,7 @@ 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
@@ -83,7 +85,7 @@ fun TextToSpeechScreen(
                     modifier = Modifier
                         .fillMaxWidth()
                         .verticalScroll(rememberScrollState())
-                        .height(300.dp),
+                        .height(200.dp),
                     textStyle = MaterialTheme.typography.bodyMedium,
                     shape = RoundedCornerShape(10.dp),
                     colors = TextFieldDefaults.outlinedTextFieldColors(
@@ -94,9 +96,19 @@ fun TextToSpeechScreen(
 
                 Spacer(modifier = Modifier.height(20.dp))
 
-                TextToSpeechButton(buttonStatus = uiState.buttonStatus,
-                    onPlay = { viewModel.ttsStart(context) },
-                    onStop = { viewModel.ttsStop() })
+                Row {
+                    TextToSpeechButton(
+                        buttonStatus = uiState.buttonStatus,
+                        onPlay = { viewModel.ttsStart(context) },
+                        onStop = { viewModel.ttsStop() }
+                    )
+
+                    TextClearButton(
+                        buttonStatus = uiState.buttonStatus,
+                        onPlay = { viewModel.clearText() },
+                        onStop = {}
+                    )
+                }
             }
         }
     }
@@ -107,16 +119,22 @@ private fun TextToSpeechButton(
     buttonStatus: ButtonStatusType, onPlay: () -> Unit, onStop: () -> Unit
 ) {
     val textToSpeechButtonColors = ButtonDefaults.buttonColors(
-        containerColor = Color.Transparent, contentColor = MaterialTheme.colorScheme.onBackground
+        containerColor = Color.Transparent,
+        contentColor = MaterialTheme.colorScheme.onBackground
     )
 
     when (buttonStatus) {
         ButtonStatusType.PLAY -> Button(
-            onClick = onPlay, colors = textToSpeechButtonColors
+            onClick = onPlay,
+            modifier = Modifier.size(
+                width = 200.dp,
+                height = 50.dp
+            ),
+            colors = textToSpeechButtonColors
         ) {
             Text(
-                style = MaterialTheme.typography.headlineMedium,
-                text = stringResource(id = R.string.play_text)
+                text = stringResource(id = R.string.play_text),
+                style = MaterialTheme.typography.headlineMedium
             )
             Icon(
                 Icons.Filled.PlayArrow,
@@ -126,11 +144,16 @@ private fun TextToSpeechButton(
         }
 
         ButtonStatusType.STOP -> Button(
-            onClick = onStop, colors = textToSpeechButtonColors
+            onClick = onStop,
+            modifier = Modifier.size(
+                width = 200.dp,
+                height = 50.dp
+            ),
+            colors = textToSpeechButtonColors
         ) {
             Text(
-                style = MaterialTheme.typography.headlineMedium,
-                text = stringResource(id = R.string.stop_text)
+                text = stringResource(id = R.string.stop_text),
+                style = MaterialTheme.typography.headlineMedium
             )
             Icon(
                 painterResource(R.drawable.stop_icon),
@@ -139,4 +162,55 @@ private fun TextToSpeechButton(
             )
         }
     }
+}
+
+@Composable
+fun TextClearButton(
+    buttonStatus: ButtonStatusType, onPlay: () -> Unit, onStop: () -> Unit
+) {
+    when (buttonStatus) {
+        ButtonStatusType.PLAY -> Button(
+            onClick = onPlay,
+            modifier = Modifier.size(
+                width = 200.dp,
+                height = 50.dp
+            ),
+            colors = ButtonDefaults.buttonColors(
+                containerColor = Color.Transparent,
+                contentColor = MaterialTheme.colorScheme.onBackground
+            )
+        ) {
+            Text(
+                text = stringResource(id = R.string.clear_text),
+                style = MaterialTheme.typography.headlineMedium
+            )
+            Icon(
+                Icons.Filled.Delete,
+                contentDescription = stringResource(id = R.string.clear_text),
+                modifier = Modifier.size(36.dp)
+            )
+        }
+
+        ButtonStatusType.STOP -> Button(
+            onClick = onStop,
+            modifier = Modifier.size(
+                width = 200.dp,
+                height = 50.dp
+            ),
+            colors = ButtonDefaults.buttonColors(
+                containerColor = Color.Transparent,
+                contentColor = MaterialTheme.colorScheme.outline
+            )
+        ) {
+            Text(
+                text = stringResource(id = R.string.clear_text),
+                style = MaterialTheme.typography.headlineMedium
+            )
+            Icon(
+                Icons.Filled.Delete,
+                contentDescription = stringResource(id = R.string.clear_text),
+                modifier = Modifier.size(36.dp)
+            )
+        }
+    }
 }
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
@@ -50,6 +50,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>