Skip to content

Commit

Permalink
Refactor: uiState, models, and views
Browse files Browse the repository at this point in the history
  • Loading branch information
@zwarm
zwarm committed Jun 9, 2024
1 parent fd307b7 commit 79a46fb
Show file tree
Hide file tree
Showing 5 changed files with 371 additions and 507 deletions.
264 changes: 52 additions & 212 deletions WordPress/src/main/java/org/wordpress/android/ui/voicetocontent/MicToStopIcon.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.ContentAlpha
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
Expand All @@ -31,216 +32,47 @@ import org.wordpress.android.ui.compose.theme.AppTheme
@OptIn(ExperimentalAnimationApi::class)
@Suppress("DEPRECATION")
@Composable
fun MicToStopIcon(state: VoiceToContentUiState.ReadyToRecord) {
val isEnabled = state.isEligibleForFeature
var isTapped by remember { mutableStateOf(false) }
fun MicToStopIcon(model: RecordingPanelUIModel) {
val isEnabled = model.isEnabled
var isMic by remember { mutableStateOf(true) }
val isLight = !isSystemInDarkTheme()

// For tries 1-3
// val innerCircleColor by animateColorAsState(
// targetValue = if (isMic) MaterialTheme.colors.primary else if (isLight) Color.Black else Color.White
// )

// For try 4
val circleColor by animateColorAsState(
targetValue = if (isMic) MaterialTheme.colors.primary else if (isLight) Color.Black else Color.White, label = ""
targetValue = if (!isEnabled) MaterialTheme.colors.onSurface.copy(alpha = 0.3f) //ContentAlpha.disabled or 0.3f)
else if (isMic) MaterialTheme.colors.primary
else if (isLight) Color.Black
else Color.White, label = ""
)

val iconColor by animateColorAsState(
targetValue =
if (isMic) Color.White else if (isLight) Color.White else Color.Black, label = ""
targetValue = if (!isEnabled) MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
else if (isMic) Color.White
else if (isLight) Color.White
else Color.Black, label = ""
)

val micIcon: Painter = painterResource(id = R.drawable.v2c_mic)
val stopIcon: Painter = painterResource(id = R.drawable.v2c_stop)

// Tries 1-5
// val icon: Painter = if (isMic) painterResource(id = R.drawable.v2c_mic) else painterResource(id = R.drawable.v2c_stop)

// First try with the box showing that is not transparent
// Box(
// contentAlignment = Alignment.Center,
// modifier = Modifier
// .size(100.dp) // Adjust the size as needed
// .background(MaterialTheme.colors.primary, shape = CircleShape)
// .clickable { isMic = !isMic }
// .animateContentSize() // Ensures smooth resizing if needed
// ) {
// Box(
// contentAlignment = Alignment.Center,
// modifier = Modifier
// .size(80.dp) // Adjust the size to make space for the inner circle
// .background(innerCircleColor, shape = CircleShape)
// ) {
// Image(
// painter = icon,
// contentDescription = null,
// modifier = Modifier.size(50.dp), // Adjust the size as needed
// colorFilter = androidx.compose.ui.graphics.ColorFilter.tint(iconColor)
// )
// }
// }

// Second attempt with the box being transparent
// Box(
// contentAlignment = Alignment.Center,
// modifier = Modifier
// .size(100.dp) // Adjust the size as needed
// .clickable {
// isMic = !isMic
// // todo myViewModel.onMicOrStopIconClicked(isMic)
// }
// .animateContentSize() // Ensures smooth resizing if needed
// ) {
// Box(
// contentAlignment = Alignment.Center,
// modifier = Modifier
// .size(80.dp) // Adjust the size to make space for the inner circle
// .background(MaterialTheme.colors.primary, shape = CircleShape)
// ) {
// Box(
// contentAlignment = Alignment.Center,
// modifier = Modifier
// .size(70.dp) // Adjust the size to make space for the inner circle
// .background(innerCircleColor, shape = CircleShape)
// ) {
// Image(
// painter = icon,
// contentDescription = null,
// modifier = Modifier.size(50.dp), // Adjust the size as needed
// colorFilter = ColorFilter.tint(iconColor)
// )
// }
// }
// }

// Third attempt with the box being transparent and the inner circle being animated
// Box(
// contentAlignment = Alignment.Center,
// modifier = Modifier
// .size(100.dp) // Adjust the size as needed
// .clickable {
// isMic = !isMic
// // myViewModel.onMicOrStopIconClicked(isMic)
// }
// ) {
// // Outer Circle
// Box(
// contentAlignment = Alignment.Center,
// modifier = Modifier
// .size(100.dp)
// .background(MaterialTheme.colors.primary, shape = CircleShape)
// ) {
// // Inner Circle
// Box(
// contentAlignment = Alignment.Center,
// modifier = Modifier
// .size(80.dp)
// .background(innerCircleColor, shape = CircleShape)
// ) {
// Image(
// painter = icon,
// contentDescription = null,
// modifier = Modifier.size(50.dp), // Adjust the size as needed
// colorFilter = ColorFilter.tint(iconColor)
// )
// }
// }
// }

// Four attempt
// Box(
// contentAlignment = Alignment.Center,
// modifier = Modifier
// .size(100.dp) // Adjust the size as needed
// .background(circleColor, shape = CircleShape)
// .clickable {
// isMic = !isMic
// // myViewModel.onMicOrStopIconClicked(isMic)
// }
// ) {
// Image(
// painter = icon,
// contentDescription = null,
// modifier = Modifier.size(50.dp), // Adjust the size as needed
// colorFilter = ColorFilter.tint(iconColor)
// )
// }

// Attempt five
// Box(
// contentAlignment = Alignment.Center,
// modifier = Modifier
// .size(100.dp) // Adjust the size as needed
// .clickable {
// isMic = !isMic
// // myViewModel.onMicOrStopIconClicked(isMic)
// }
// ) {
// Box(
// modifier = Modifier
// .size(100.dp)
// .background(circleColor, shape = CircleShape)
// .align(Alignment.Center)
// ) {
// Image(
// painter = icon,
// contentDescription = null,
// modifier = Modifier
// .size(50.dp) // Adjust the size as needed
// .align(Alignment.Center),
// colorFilter = ColorFilter.tint(iconColor)
// )
// }
// }

// // Attempt six
// Box(
// contentAlignment = Alignment.Center,
// modifier = Modifier
// .size(100.dp) // Adjust the size as needed
// .clickable {
// isMic = !isMic
// // myViewModel.onMicOrStopIconClicked(isMic)
// }
// ) {
// Box(
// modifier = Modifier
// .size(100.dp)
// .background(circleColor, shape = CircleShape)
// )
//
// AnimatedContent(
// targetState = isMic,
// transitionSpec = {
// fadeIn(animationSpec = tween(300)) with fadeOut(animationSpec = tween(300))
// }, label = ""
// ) { targetState ->
// val icon: Painter = if (targetState) painterResource(id = R.drawable.v2c_mic) else painterResource(id = R.drawable.v2c_stop)
// Image(
// painter = icon,
// contentDescription = null,
// modifier = Modifier.size(50.dp), // Adjust the size as needed
// colorFilter = ColorFilter.tint(iconColor)
// )
// }
// }
// Attempt 7
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.size(100.dp)
.background(Color.Transparent) // Ensure transparent background
.clickable(
enabled = isEnabled && !isTapped,
enabled = isEnabled,
onClick = {
if (isMic) {
isMic = false
isTapped = true
// todo: state.onMicTap()
if (model.hasPermission) {
if (isMic) {
model.onMicTap?.invoke()
} else {
model.onStopTap?.invoke()
}
// isMic = !isMic
} else {
// todo: nothing yet state.onMicTap
model.onRequestPermission?.invoke()
}
isMic = !isMic
}
)
) {
Expand All @@ -249,19 +81,28 @@ fun MicToStopIcon(state: VoiceToContentUiState.ReadyToRecord) {
.size(100.dp)
.background(circleColor, shape = CircleShape)
)

AnimatedContent(
targetState = isMic,
transitionSpec = {
fadeIn(animationSpec = tween(300)) with fadeOut(animationSpec = tween(300))
}, label = ""
) { targetState ->
val icon: Painter = if (targetState) micIcon else stopIcon
val iconSize = if (targetState) 50.dp else 35.dp
if (model.hasPermission) {
AnimatedContent(
targetState = isMic,
transitionSpec = {
fadeIn(animationSpec = tween(300)) with fadeOut(animationSpec = tween(300))
}, label = ""
) { targetState ->
val icon: Painter = if (targetState) micIcon else stopIcon
val iconSize = if (targetState) 50.dp else 35.dp
Image(
painter = icon,
contentDescription = null,
modifier = Modifier.size(iconSize),
colorFilter = ColorFilter.tint(iconColor)
)
}
} else {
// Display mic icon statically if permission is not granted
Image(
painter = icon,
painter = micIcon,
contentDescription = null,
modifier = Modifier.size(iconSize),
modifier = Modifier.size(50.dp),
colorFilter = ColorFilter.tint(iconColor)
)
}
Expand All @@ -274,16 +115,15 @@ fun MicToStopIcon(state: VoiceToContentUiState.ReadyToRecord) {
@Composable
fun ExistingLayoutPreview() {
AppTheme {
MicToStopIcon(VoiceToContentUiState.ReadyToRecord(
header = R.string.voice_to_content_ready_to_record,
labelText = R.string.voice_to_content_ready_to_record_label,
subLabelText = R.string.voice_to_content_tap_to_start,
requestsAvailable = 0,
isEligibleForFeature = true,
onMicTap = {},
onCloseAction = {},
hasPermission = true,
onRequestPermission = {}
))
MicToStopIcon(
RecordingPanelUIModel(
isEligibleForFeature = true,
onMicTap = {},
onStopTap = {},
hasPermission = true,
onRequestPermission = {},
actionLabel = R.string.voice_to_content_ready_to_record_label, isEnabled = false
)
)
}
}
Loading

0 comments on commit 79a46fb

Please sign in to comment.