I am currently working with Rive, the red box is a hitbox where clicking launches the animation, the blue box is the space required by Rive. But I want to detect event outside the red box but inside the blue box so I can pause or play the video, as I currently have an event that does that on the entire screen.
@Composable
fun VideoBox(modifier: Modifier = Modifier) {
var animation : RiveAnimationView? by remember { mutableStateOf(null) }
Box(
modifier = modifier.fillMaxSize()
) {
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.DarkGray)
.pointerInput(Unit){
detectTapGestures(
onDoubleTap = {
animation?.fireState(stateMachineName = "stateMachine", inputName = "tapTrigger")
},
onTap = {
Log.d("OverlappingBox" ,"Pause or play video")
}
)
}
)
Box(
modifier = Modifier
.padding(end = 24.dp, bottom = 96.dp)
.size(64.dp, 118.dp)
.background(Color.Blue)
.align(Alignment.BottomEnd)
){
AndroidView(
factory = { context ->
RiveAnimationView(context).apply {
setRiveResource(
resId = R.raw.likebutton_03,
artboardName = "heart_Particle",
stateMachineName = "stateMachine",
)
}
},
update = { view ->
animation = view
}
)
Box(
modifier = Modifier
.size(40.dp)
.background(Color.Red)
.align(Alignment.BottomCenter)
.clickable {
animation?.fireState(stateMachineName = "stateMachine", inputName = "tapTrigger")
}
)
}
}
}