Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show preview of VideoEditScreen #23

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Show preview of VideoEditScreen #23

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cda5321
Fix: Render Error at VideoEditScreen
l2hyunwoo Feb 15, 2024
7313f1b
Fix: replace deprecated icon
l2hyunwoo Feb 15, 2024
427dc25
Remove redundant optin api
l2hyunwoo Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 70 additions & 39 deletions app/src/main/java/com/google/android/samples/socialite/ui/videoedit/VideoEditScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,11 @@ import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.VolumeMute
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.DonutLarge
import androidx.compose.material.icons.filled.FormatSize
import androidx.compose.material.icons.filled.Movie
import androidx.compose.material.icons.filled.VolumeMute
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.CircularProgressIndicator
Expand All @@ -59,7 +59,6 @@ import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
Expand All @@ -79,7 +78,6 @@ import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.media3.common.util.UnstableApi
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import com.google.android.samples.socialite.R

private const val TAG = "VideoEditScreen"
Expand All @@ -91,37 +89,67 @@ fun VideoEditScreen(
uri: String,
onCloseButtonClicked: () -> Unit,
navController: NavController,
viewModel: VideoEditScreenViewModel = hiltViewModel(),
) {
val context = LocalContext.current

val viewModel: VideoEditScreenViewModel = hiltViewModel()
viewModel.setChatId(chatId)
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this logic can replace with ViewModel's SavedStateHandle.get


val isFinishedEditing = viewModel.isFinishedEditing.collectAsStateWithLifecycle()
if (isFinishedEditing.value) {
navController.popBackStack("chat/$chatId", false)
}

val isProcessing = viewModel.isProcessing.collectAsState()

val isFinishedEditing by viewModel.isFinishedEditing.collectAsStateWithLifecycle()
val isProcessing by viewModel.isProcessing.collectAsStateWithLifecycle()
var removeAudioEnabled by rememberSaveable { mutableStateOf(false) }
var overlayText by rememberSaveable { mutableStateOf("") }
var redOverlayTextEnabled by rememberSaveable { mutableStateOf(false) }
var largeOverlayTextEnabled by rememberSaveable { mutableStateOf(false) }
val context = LocalContext.current
if (isFinishedEditing) {
navController.popBackStack("chat/$chatId", false)
}
Comment on lines +102 to +104
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also I this logic should be considered as side-effect caused by isFinishedEditing, so I think it should be isolated by LaunchedEffect


VideoEditScreen(
uri = uri,
isProcessing = isProcessing,
filterChipSelected = removeAudioEnabled,
onCloseButtonClicked = onCloseButtonClicked,
buttonOverlayText = overlayText,
redOverlayTextEnabled = redOverlayTextEnabled,
largeOverlayTextEnabled = largeOverlayTextEnabled,
onSendButtonClicked = {
viewModel.applyVideoTransformation(
context = context,
videoUri = uri,
removeAudio = removeAudioEnabled,
textOverlayText = overlayText,
textOverlayRedSelected = redOverlayTextEnabled,
textOverlayLargeSelected = largeOverlayTextEnabled,
)
},
onFilterChipPressed = { removeAudioEnabled = !removeAudioEnabled },
onButtonOverlayTextChanged = { overlayText = it },
onRedOverlayTextCheckedStateChanged = { redOverlayTextEnabled = !redOverlayTextEnabled },
onLargeOverlayTextCheckedStateChanged = {
largeOverlayTextEnabled = !largeOverlayTextEnabled
},
)
}

@androidx.annotation.OptIn(UnstableApi::class)
@Composable
fun VideoEditScreen(
uri: String,
isProcessing: Boolean,
filterChipSelected: Boolean,
buttonOverlayText: String,
redOverlayTextEnabled: Boolean,
largeOverlayTextEnabled: Boolean,
onCloseButtonClicked: () -> Unit,
onSendButtonClicked: () -> Unit,
onFilterChipPressed: () -> Unit,
onButtonOverlayTextChanged: (String) -> Unit,
onRedOverlayTextCheckedStateChanged: () -> Unit,
onLargeOverlayTextCheckedStateChanged: () -> Unit,
) {
Scaffold(
topBar = {
VideoEditTopAppBar(
onSendButtonClicked = {
viewModel.applyVideoTransformation(
context = context,
videoUri = uri,
removeAudio = removeAudioEnabled,
textOverlayText = overlayText,
textOverlayRedSelected = redOverlayTextEnabled,
textOverlayLargeSelected = largeOverlayTextEnabled,
)
},
onSendButtonClicked = onSendButtonClicked,
onCloseButtonClicked = onCloseButtonClicked,
)
},
Expand All @@ -136,7 +164,7 @@ fun VideoEditScreen(
horizontalAlignment = Alignment.CenterHorizontally,
) {
Spacer(modifier = Modifier.height(50.dp))
VideoMessagePreview(uri, isProcessing.value)
VideoMessagePreview(uri, isProcessing)
Spacer(modifier = Modifier.height(20.dp))

Column(
Expand All @@ -149,28 +177,24 @@ fun VideoEditScreen(
.padding(15.dp),
) {
VideoEditFilterChip(
icon = Icons.Filled.VolumeMute,
selected = removeAudioEnabled,
onClick = { removeAudioEnabled = !removeAudioEnabled },
icon = Icons.AutoMirrored.Filled.VolumeMute,
selected = filterChipSelected,
onClick = onFilterChipPressed,
label = stringResource(id = R.string.remove_audio),
)
Spacer(modifier = Modifier.height(10.dp))
TextOverlayOption(
inputtedText = overlayText,
inputtedText = buttonOverlayText,
inputtedTextChange = {
// Limit character count to 20
if (it.length <= 20) {
overlayText = it
onButtonOverlayTextChanged(it)
}
},
redTextCheckedState = redOverlayTextEnabled,
redTextCheckedStateChange = {
redOverlayTextEnabled = !redOverlayTextEnabled
},
redTextCheckedStateChange = onRedOverlayTextCheckedStateChanged,
largeTextCheckedState = largeOverlayTextEnabled,
largeTextCheckedStateChange = {
largeOverlayTextEnabled = !largeOverlayTextEnabled
},
largeTextCheckedStateChange = onLargeOverlayTextCheckedStateChanged,
)
}
}
Expand Down Expand Up @@ -308,7 +332,6 @@ fun TextOverlayOption(
}
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun VideoEditFilterChip(
icon: ImageVector,
Expand Down Expand Up @@ -343,9 +366,17 @@ private fun VideoEditFilterChip(
@Preview
fun VideoEditScreenPreview() {
VideoEditScreen(
chatId = 0L,
uri = "",
isProcessing = true,
buttonOverlayText = "",
filterChipSelected = true,
redOverlayTextEnabled = false,
largeOverlayTextEnabled = false,
onCloseButtonClicked = {},
navController = rememberNavController(),
onSendButtonClicked = {},
onFilterChipPressed = {},
onButtonOverlayTextChanged = {},
onRedOverlayTextCheckedStateChanged = {},
onLargeOverlayTextCheckedStateChanged = {},
)
}