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.

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

Fix bug 190: Brightness & Volume gestures only work when controls are… #200

Merged
merged 4 commits into from
Oct 19, 2024

Conversation

tungnk123
Copy link
Contributor

Fix bug 190: Brightness & Volume gestures only work when controls are are displayed

Copy link
Owner

@oxyroid oxyroid left a comment

Choose a reason for hiding this comment

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

I leaved some review comments. Please fix them and I am going to build your branch to verify your changes.

)
Spacer(modifier = Modifier.width(4.dp))
MonoText(
text = value, color = Color.White, fontSize = 20.sp
Copy link
Owner

Choose a reason for hiding this comment

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

You should use the "surface" color because its container is themed by onSurface color. Or just warp the whole component with a Surface and add colors params, it will pass the contentColor automatically, so that we needn't pass the textColor and iconTint by ourselves. I prefer the second way.

horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Image(
Copy link
Owner

Choose a reason for hiding this comment

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

You should use Icon component.

)
Spacer(modifier = Modifier.width(4.dp))
MonoText(
text = value, color = Color.White, fontSize = 20.sp
Copy link
Owner

Choose a reason for hiding this comment

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

The text size can be 14sp. It looks nicer~

verticalAlignment = Alignment.CenterVertically
) {
Image(
imageVector = icon,
Copy link
Owner

Choose a reason for hiding this comment

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

You can use LocalSpacing.current.small so that it will be scaled if user want to enable compact mode in settings.

@oxyroid
Copy link
Owner

oxyroid commented Oct 2, 2024

The touch areas are somewhat confusing.

  • The green area controls volume or brightness.
  • The red area is for toggling visibility.

There are overlapping areas, making it difficult for users to control volume/brightness or dismiss the mask.
The red area is not visible on the mask, and the green area covers the red area beneath the mask, all scroll events are intercepted by the green area.

photo_2024-10-03_00-30-59
photo_2024-10-03_00-31-04
photo_2024-10-03_00-31-06
photo_2024-10-03_00-31-08

@oxyroid oxyroid self-assigned this Oct 2, 2024
@tungnk123
Copy link
Contributor Author

Do you mean that the users are confused because the volume/brightness control area (green area) overlaps with the mask visibility toggle area (red area)? Shouldn't the mask only appear when users tap in the center of the screen, while swiping on the sides should adjust brightness and volume without showing the mask? And when swiping, users don't want the mask to appear and disrupt their experience, right?
Could you pls suggest me some solution for this problem?

@oxyroid
Copy link
Owner

oxyroid commented Oct 4, 2024

The user should be able to tap to show or hide the controls and swipe to adjust the volume and brightness, regardless of whether the controls are visible. Ensure some areas of the top layer remain empty to allow tap events to reach the bottom layer, and there’s no need to restrict the width of the bottom layer.

@oxyroid
Copy link
Owner

oxyroid commented Oct 4, 2024

And in other hands, the controls layer in the front of the gesture layer has also scroll event need to be consume in the center so that we can enter the EPG panel.
So

  1. tap the any position to show and hide controls whatever the controls is visible or not.
  2. swap the left or right sides to control the volume and brightness whatever the controls is visible or not.
  3. swap the center area to expand the EPG panel whatever the controls is visible or not.

@tungnk123
Copy link
Contributor Author

@oxyroid I have just pushed the new commit. Could you pls check it for me pls? Thanks very much for these comments ❤

@oxyroid oxyroid merged commit ca92e34 into oxyroid:master Oct 19, 2024
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants