From 0ed8bd26f803181ca9ec952d19dbd05fce9473b2 Mon Sep 17 00:00:00 2001 From: sheikh-20 Date: Sat, 22 Jun 2024 12:51:27 +0530 Subject: [PATCH] comments screen UI integrated --- app/build.gradle.kts | 4 +- .../moviesapp/ui/detail/CommentsScreen.kt | 108 ++++++++++++++++++ .../moviesapp/ui/detail/DetailScreen.kt | 19 +-- .../moviesapp/ui/detail/DetailScreenApp.kt | 38 +++++- 4 files changed, 156 insertions(+), 13 deletions(-) create mode 100644 app/src/main/java/com/application/moviesapp/ui/detail/CommentsScreen.kt diff --git a/app/build.gradle.kts b/app/build.gradle.kts index 07f873c..bbeb4b7 100755 --- a/app/build.gradle.kts +++ b/app/build.gradle.kts @@ -53,8 +53,8 @@ android { applicationId = "com.application.moviesapp" minSdk = 24 targetSdk = 33 - versionCode = 19 - versionName = "1.0.18" + versionCode = 20 + versionName = "1.0.19" testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner" vectorDrawables { diff --git a/app/src/main/java/com/application/moviesapp/ui/detail/CommentsScreen.kt b/app/src/main/java/com/application/moviesapp/ui/detail/CommentsScreen.kt new file mode 100644 index 0000000..ca0382f --- /dev/null +++ b/app/src/main/java/com/application/moviesapp/ui/detail/CommentsScreen.kt @@ -0,0 +1,108 @@ +package com.application.moviesapp.ui.detail + +import android.content.res.Configuration +import androidx.compose.foundation.background +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +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.requiredHeight +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.wrapContentSize +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.KeyboardActions +import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material.FloatingActionButton +import androidx.compose.material.FloatingActionButtonDefaults +import androidx.compose.material.FloatingActionButtonElevation +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.rounded.EmojiEmotions +import androidx.compose.material.icons.rounded.Search +import androidx.compose.material.icons.rounded.Send +import androidx.compose.material3.ButtonColors +import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.Card +import androidx.compose.material3.ElevatedButton +import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.OutlinedTextField +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.focus.FocusRequester +import androidx.compose.ui.focus.focusRequester +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.platform.LocalFocusManager +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.input.ImeAction +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.application.moviesapp.ui.theme.MoviesAppTheme + +@Composable +fun CommentsScreen(modifier: Modifier = Modifier, paddingValues: PaddingValues = PaddingValues(),) { + + val focusRequest = remember { FocusRequester() } + + val context = LocalContext.current + val focusManager = LocalFocusManager.current + val interactionSource = remember { MutableInteractionSource() } + + Box(modifier = modifier + .fillMaxSize() + .padding(top = paddingValues.calculateTopPadding(), start = 0.dp, end = 0.dp, bottom = 0.dp)) { + + Card(modifier = modifier.fillMaxSize().wrapContentSize(align = Alignment.BottomCenter)) { + Row(modifier = modifier.padding(16.dp), horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.Top) { + OutlinedTextField(value = "", + label = { Text("Add comment...", style = MaterialTheme.typography.bodySmall) }, + onValueChange = { }, + modifier = Modifier + .requiredHeight(45.dp) + .weight(1f) + .focusRequester(focusRequest), + interactionSource = interactionSource, + shape = RoundedCornerShape(30), + textStyle = TextStyle(fontSize = MaterialTheme.typography.bodyLarge.fontSize, lineHeight = MaterialTheme.typography.bodyLarge.lineHeight), + trailingIcon = { Icon(imageVector = Icons.Rounded.EmojiEmotions, contentDescription = null) }, + keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Search), + keyboardActions = KeyboardActions(onSearch = { focusManager.clearFocus() }) + ) + + FloatingActionButton( + modifier = modifier.size(50.dp), + elevation = FloatingActionButtonDefaults.elevation(defaultElevation = 0.dp), + onClick = { /*TODO*/ }, + backgroundColor = MaterialTheme.colorScheme.primary) { + Icon(imageVector = Icons.Rounded.Send, contentDescription = null, tint = MaterialTheme.colorScheme.onPrimary) + } + + } + } + } +} + +@Preview(showBackground = true, showSystemUi = true) +@Composable +private fun CommentsLightThemePreview() { + MoviesAppTheme(darkTheme = false) { + CommentsScreen() + } +} + +@Preview(showBackground = true, showSystemUi = true, uiMode = Configuration.UI_MODE_NIGHT_YES) +@Composable +private fun CommentsDarkThemePreview() { + MoviesAppTheme(darkTheme = true) { + CommentsScreen() + } +} \ No newline at end of file diff --git a/app/src/main/java/com/application/moviesapp/ui/detail/DetailScreen.kt b/app/src/main/java/com/application/moviesapp/ui/detail/DetailScreen.kt index 739723d..cecfe35 100755 --- a/app/src/main/java/com/application/moviesapp/ui/detail/DetailScreen.kt +++ b/app/src/main/java/com/application/moviesapp/ui/detail/DetailScreen.kt @@ -138,7 +138,8 @@ fun DetailScreen(modifier: Modifier = Modifier, tvSeriesEpisodesUIState: Resource = Resource.Loading, onTvSeriesEpisode: (Int, Int) -> Unit = { _, _ -> }, onSeasonClick: () -> Unit = { }, - onCastClick: (Int) -> Unit = { _ -> } + onCastClick: (Int) -> Unit = { _ -> }, + onCommentsClick: (Int) -> Unit = { _ -> } ) { val coroutineScope = rememberCoroutineScope() @@ -455,7 +456,7 @@ fun DetailScreen(modifier: Modifier = Modifier, } } 2 -> { - CommentsCompose() + CommentsCompose(onCommentsClick = onCommentsClick) } } } @@ -845,7 +846,7 @@ fun DetailScreen(modifier: Modifier = Modifier, } } 2 -> { - CommentsCompose() + CommentsCompose(onCommentsClick = onCommentsClick) } } } @@ -1020,7 +1021,7 @@ private fun TvSeriesTrailerCard(modifier: Modifier = Modifier, @Preview @Composable -fun CommentsCompose(modifier: Modifier = Modifier) { +fun CommentsCompose(modifier: Modifier = Modifier, onCommentsClick: (Int) -> Unit = { _ -> }) { Column(modifier = modifier .fillMaxWidth() .padding(horizontal = 16.dp), @@ -1033,10 +1034,12 @@ fun CommentsCompose(modifier: Modifier = Modifier) { style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.SemiBold) - Text(text = "See all", - color = MaterialTheme.colorScheme.primary, - style = MaterialTheme.typography.titleSmall, - fontWeight = FontWeight.SemiBold) + TextButton(onClick = { onCommentsClick(0) }) { + Text(text = "See all", + color = MaterialTheme.colorScheme.primary, + style = MaterialTheme.typography.titleSmall, + fontWeight = FontWeight.SemiBold) + } } LazyColumn( diff --git a/app/src/main/java/com/application/moviesapp/ui/detail/DetailScreenApp.kt b/app/src/main/java/com/application/moviesapp/ui/detail/DetailScreenApp.kt index 14af94d..c75f6c5 100755 --- a/app/src/main/java/com/application/moviesapp/ui/detail/DetailScreenApp.kt +++ b/app/src/main/java/com/application/moviesapp/ui/detail/DetailScreenApp.kt @@ -22,6 +22,8 @@ import androidx.compose.material.icons.Icons import androidx.compose.material.icons.rounded.ArrowBack import androidx.compose.material.icons.rounded.Cast import androidx.compose.material.icons.rounded.Close +import androidx.compose.material.icons.rounded.Comment +import androidx.compose.material.icons.rounded.MoreVert import androidx.compose.material3.BottomSheetDefaults import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.ExperimentalMaterial3Api @@ -142,7 +144,10 @@ fun DetailScreenApp(modifier: Modifier = Modifier, onSeasonClick = { bottomSheetEnabled = true }, onCastClick = { viewModel.getCastDetail(it) - navController.navigate(DetailScreen.CastDetail.name) } + navController.navigate(DetailScreen.CastDetail.name) }, + onCommentsClick = { + navController.navigate(DetailScreen.Comments.name) + } ) } @@ -164,12 +169,19 @@ fun DetailScreenApp(modifier: Modifier = Modifier, selectedImage = selectedImage ) } + + composable(route = DetailScreen.Comments.name) { + CommentsScreen( + modifier = modifier, + paddingValues = paddingValues + ) + } } } } enum class DetailScreen { - Detail, CastDetail, Cast + Detail, CastDetail, Cast, Comments } @OptIn(ExperimentalMaterial3Api::class) @@ -208,12 +220,32 @@ private fun DetailTopAppbar(modifier: Modifier = Modifier, navController: NavHos TopAppBar( title = { }, navigationIcon = { - IconButton(onClick = { navController.navigateUp() }, modifier = modifier.padding(16.dp).background(color = Color(0xAABEBEBE), shape = RoundedCornerShape(50)).size(30.dp)) { + IconButton(onClick = { navController.navigateUp() }, modifier = modifier + .padding(16.dp) + .background(color = Color(0xAABEBEBE), shape = RoundedCornerShape(50)) + .size(30.dp)) { Icon(imageVector = Icons.Rounded.Close, contentDescription = null, tint = Color.White) } }, colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent)) } + DetailScreen.Comments.name -> { + TopAppBar( + title = { + Text(text = "24.6K Comments", fontWeight = FontWeight.SemiBold) + }, + navigationIcon = { + IconButton(onClick = { navController.navigateUp() }) { + Icon(imageVector = Icons.Rounded.ArrowBack, contentDescription = null) + } + }, + actions = { + IconButton(onClick = { }) { + Icon(imageVector = Icons.Rounded.MoreVert, contentDescription = null) + } + }, + colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent)) + } } }