요구사항

1. 뮤직비디오 화면에 노래 정보, 한마디를 보여준다.
2. 화면을 탭하면 페이드인/아웃으로 정보가 나타난다.
3. 영상 재생, 멈춤, 리플레이 제어가 가능하다.

1️⃣ 오버레이 UI 구현

MusicVideoScreen

MusicVideoScreen 컴포저블을 만들고 MusicVIdeoPlayer와 VideoPlayerOverlay를 Box로 감쌌다.

@OptIn(UnstableApi::class)
@Composable
fun MusicVideoScreen(
    pick: Pick,
    modifier: Modifier,
    onBackClick: () -> Unit,
    videoPlayerViewModel: VideoPlayerViewModel = hiltViewModel()
) {
    val isLoading by videoPlayerViewModel.isLoading.collectAsStateWithLifecycle()

    BackHandler { onBackClick() }

    Box(modifier = modifier.fillMaxSize()) {
        MusicVideoPlayer(pick)
        VideoPlayerOverlay(pick, onBackClick)

        if (isLoading) {
            CircularProgressIndicator(Modifier.align(Alignment.Center))
        }
    }
}

Preview 화면

2️⃣ 탭으로 페이드인/아웃

VideoPlayerOverlay의 투명도 조절

1. 오버레이를 탭했을 때 화면이 어두워지면서 오버레이가 나타나고, 사라질 때는 다시 밝아지길 원했다.

이 방식으로 투명도를 조절하기 위해서는 Animatable을 이용해야했다.

val alpha = remember **{** *Animatable*(1f) **}**

1. 이 값을 변화시키려면 탭 제스쳐를 인지하는 코드도 필요하다.

.pointerInput(Unit) {
    detectTapGestures(
        onTap = {
            coroutineScope.launch {
                // Fade In
                alpha.animateTo(1.0f, animationSpec = tween(durationMillis = 300))

                // 대기
                delay(3_000L)

                // Fade Out
                alpha.animateTo(0f, animationSpec = tween(durationMillis = 300))
            }
        }
    }

onTap 내부에 이벤트 발생 시 실행할 코드를 작성하면 된다.