feat/Implement TTS feature

frontend/app/src/main/java/com/example/speechbuddy/compose/SpeechBuddyApp.kt

@@ -5,14 +5,13 @@ import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
+import com.example.speechbuddy.compose.emailverification.EmailVerificationScreen
 import com.example.speechbuddy.compose.home.HomeScreen
 import com.example.speechbuddy.compose.landing.LandingScreen
 import com.example.speechbuddy.compose.login.LoginScreen
-import com.example.speechbuddy.compose.emailverification.EmailVerificationScreen
 import com.example.speechbuddy.compose.resetpassword.ResetPasswordScreen
 import com.example.speechbuddy.compose.signup.SignupScreen
 
-
 @Composable
 fun SpeechBuddyApp() {
     val navController = rememberNavController()
@@ -26,9 +25,12 @@ fun SpeechBuddyNavHost(
     navController: NavHostController
 ) {
     // val activity = (LocalContext.current as Activity)
-    NavHost(navController = navController, startDestination = "home") {
+    NavHost(navController = navController, startDestination = "landing") {
         composable("landing") {
             LandingScreen(
+                onGuestClick = {
+                    navController.navigate("home")
+                },
                 onLoginClick = {
                     navController.navigate("login")
                 }
@@ -57,7 +59,7 @@ fun SpeechBuddyNavHost(
                 navController = navController,
             )
         }
-        composable("signup/{emailInput}") {backStackEntry ->
+        composable("signup/{emailInput}") { backStackEntry ->
             val emailInput = backStackEntry.arguments?.getString("emailInput")
             SignupScreen(
                 onBackClick = {
@@ -72,7 +74,6 @@ fun SpeechBuddyNavHost(
                     navController.navigateUp()
                 },
                 onNextClick = {}
-
             )
         }
         composable("home") {

frontend/app/src/main/java/com/example/speechbuddy/compose/landing/LandingScreen.kt

@@ -22,6 +22,7 @@ import com.example.speechbuddy.ui.SpeechBuddyTheme
 @Composable
 fun LandingScreen(
     modifier: Modifier = Modifier,
+    onGuestClick: () -> Unit,
     onLoginClick: () -> Unit,
 ) {
     Surface(modifier = modifier.fillMaxSize(), color = MaterialTheme.colorScheme.primaryContainer) {
@@ -38,7 +39,8 @@ fun LandingScreen(
             ) {
                 ButtonUi(
                     text = stringResource(id = R.string.guess_mode_action),
-                    onClick = { /*TODO*/ })
+                    onClick = onGuestClick
+                )
                 ButtonUi(text = stringResource(id = R.string.login_action), onClick = onLoginClick)
             }
         }
@@ -49,6 +51,6 @@ fun LandingScreen(
 @Composable
 private fun LandingScreenPreview() {
     SpeechBuddyTheme {
-        LandingScreen(onLoginClick = {})
+        LandingScreen(onGuestClick = {}, onLoginClick = {})
     }
 }

frontend/app/src/main/java/com/example/speechbuddy/compose/texttospeech/TextToSpeechScreen.kt

@@ -2,16 +2,15 @@ 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
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.sizeIn
+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.PlayArrow
 import androidx.compose.material3.Button
@@ -22,29 +21,41 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 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.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
 import com.example.speechbuddy.R
 import com.example.speechbuddy.compose.utils.TitleUi
-import com.example.speechbuddy.ui.SpeechBuddyTheme
+import com.example.speechbuddy.ui.models.ButtonStatusType
+import com.example.speechbuddy.viewmodel.TextToSpeechViewModel
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun TextToSpeechScreen(
-    modifier: Modifier = Modifier
+    viewModel: TextToSpeechViewModel = hiltViewModel()
 ) {
-    Surface(modifier = modifier.fillMaxSize()) {
+    val uiState by viewModel.uiState.collectAsState()
+    val context = LocalContext.current
+
+    Surface(
+        modifier = Modifier
+            .fillMaxSize()
+    ) {
         Column(
             modifier = Modifier
                 .padding(24.dp)
                 .fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center,
-            horizontalAlignment = Alignment.CenterHorizontally
         ) {
             TitleUi(
                 title = stringResource(id = R.string.tts_text),
@@ -54,49 +65,73 @@ fun TextToSpeechScreen(
             Spacer(modifier = Modifier.height(20.dp))
 
             OutlinedTextField(
-                value = "",
-                onValueChange = {},
+                value = viewModel.textInput,
+                onValueChange = {
+                    viewModel.setText(it)
+                },
                 modifier = Modifier
                     .fillMaxWidth()
-                    .sizeIn(minHeight = 300.dp, maxHeight = 500.dp),
+                    .verticalScroll(rememberScrollState())
+                    .height(300.dp),
                 textStyle = MaterialTheme.typography.bodyMedium,
-                shape = RoundedCornerShape(10.dp)
+                shape = RoundedCornerShape(10.dp),
+                colors = TextFieldDefaults.outlinedTextFieldColors(
+                    focusedBorderColor = MaterialTheme.colorScheme.tertiary,
+                    unfocusedBorderColor = MaterialTheme.colorScheme.outline
+                )
             )
 
             Spacer(modifier = Modifier.height(20.dp))
 
-            Button(
-                onClick = {},
-                colors = ButtonDefaults.buttonColors(
-                    containerColor = Color.Transparent,
-                    contentColor = MaterialTheme.colorScheme.onBackground
-                ),
-                contentPadding = PaddingValues(0.dp)
-            ) {
-                Row(
-                    horizontalArrangement = Arrangement.Center,
-                    verticalAlignment = Alignment.CenterVertically
-                ) {
-                    val textStyle = MaterialTheme.typography.headlineMedium
-                    Text(
-                        text = stringResource(id = R.string.play_text),
-                        style = textStyle
-                    )
-                    Icon(
-                        imageVector = Icons.Filled.PlayArrow,
-                        contentDescription = stringResource(id = R.string.play_text),
-                        modifier = Modifier.size(textStyle.lineHeight.value.dp)
-                    )
-                }
-            }
+            TextToSpeechButton(
+                buttonStatus = uiState.buttonStatus,
+                onPlay = { viewModel.ttsStart(context) },
+                onStop = { viewModel.ttsStop() }
+            )
         }
     }
 }
 
-@Preview
 @Composable
-private fun TextToSpeechScreenPreview() {
-    SpeechBuddyTheme {
-        TextToSpeechScreen()
+private fun TextToSpeechButton(
+    buttonStatus: ButtonStatusType,
+    onPlay: () -> Unit,
+    onStop: () -> Unit
+) {
+    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.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)
+            )
+        }
     }
 }

frontend/app/src/main/java/com/example/speechbuddy/ui/models/TextToSpeechUiState.kt

@@ -0,0 +1,10 @@
+package com.example.speechbuddy.ui.models
+
+data class TextToSpeechUiState(
+    val buttonStatus: ButtonStatusType = ButtonStatusType.PLAY
+)
+
+enum class ButtonStatusType {
+    PLAY,
+    STOP
+}

frontend/app/src/main/java/com/example/speechbuddy/viewmodel/LoginViewModel.kt

@@ -81,7 +81,7 @@ class LoginViewModel @Inject internal constructor(
     }
 
     fun login() {
-        if (!isValidEmail(emailInput) && emailInput.isEmpty()) {
+        if (!isValidEmail(emailInput)) {
             _uiState.update { currentState ->
                 currentState.copy(
                     isValidEmail = false,

frontend/app/src/main/java/com/example/speechbuddy/viewmodel/TextToSpeechViewModel.kt

@@ -0,0 +1,114 @@
+package com.example.speechbuddy.viewmodel
+
+import android.content.Context
+import android.os.Bundle
+import android.speech.tts.TextToSpeech
+import android.speech.tts.UtteranceProgressListener
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.lifecycle.ViewModel
+import com.example.speechbuddy.ui.models.ButtonStatusType
+import com.example.speechbuddy.ui.models.TextToSpeechUiState
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import java.util.Locale
+import javax.inject.Inject
+
+@HiltViewModel
+class TextToSpeechViewModel @Inject internal constructor(
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(TextToSpeechUiState())
+    val uiState: StateFlow<TextToSpeechUiState> = _uiState.asStateFlow()
+
+    private var textToSpeech: TextToSpeech? = null
+
+    var textInput by mutableStateOf("")
+        private set
+
+    fun setText(input: String) {
+        textInput = input
+    }
+
+private fun clearText() {
+    textInput = ""
+}
+
+    fun ttsStop() {
+        textToSpeech?.stop()
+    }
+
+    fun ttsStart(context: Context) {
+        // disable button
+        _uiState.update { currentState ->
+            currentState.copy(
+                buttonStatus = ButtonStatusType.STOP
+            )
+        }
+
+        textToSpeech = TextToSpeech(context) {
+            if (it == TextToSpeech.SUCCESS) {
+                textToSpeech?.let { txtToSpeech ->
+                    txtToSpeech.language = Locale.KOREAN
+                    txtToSpeech.setSpeechRate(1.0f)
+
+                    val params = Bundle()
+                    params.putString(TextToSpeech.Engine.KEY_PARAM_UTTERANCE_ID, "")
+                    txtToSpeech.setOnUtteranceProgressListener(object :
+                        UtteranceProgressListener() {
+                        override fun onStart(utteranceId: String?) {
+                            // Speech has started, button is already disabled
+                        }
+
+                        override fun onStop(utteranceId: String?, interrupted: Boolean) {
+                            _uiState.update { currentState ->
+                                currentState.copy(
+                                    buttonStatus = ButtonStatusType.PLAY
+                                )
+                            }
+                        }
+
+                        override fun onDone(utteranceId: String?) {
+                            // Speech has finished, re-enable the button
+                            _uiState.update { currentState ->
+                                currentState.copy(
+                                    buttonStatus = ButtonStatusType.PLAY
+                                )
+                            }
+                            clearText()
+                        }
+
+                        @Deprecated("Deprecated in Java")
+                        override fun onError(utteranceId: String?) {
+                            // There was an error, re-enable the button
+                            _uiState.update { currentState ->
+                                currentState.copy(
+                                    buttonStatus = ButtonStatusType.PLAY
+                                )
+                            }
+                        }
+                    })
+
+                    txtToSpeech.speak(
+                        textInput,
+                        TextToSpeech.QUEUE_ADD,
+                        params,
+                        "UniqueID"
+                    )
+                }
+            } else {
+                // Initialization failed, re-enable the button
+                _uiState.update { currentState ->
+                    currentState.copy(
+                        buttonStatus = ButtonStatusType.PLAY
+                    )
+                }
+            }
+        }
+    }
+
+}