One pager, layered pages

A now-playing screen stacks three things over the same rectangle: a colour backdrop, a full-bleed video or image for tracks that have one, and the centred square cover. Making that swipeable, the tempting shape is one pager per layer with their states kept in sync. Don't. One pager, and each page composes all three layers, so a swipe moves them as a unit because they are a unit.

// adapted
HorizontalPager(
    state = pagerState,
    modifier = Modifier.height(screenHeight.dp).fillMaxWidth(),
    beyondViewportPageCount = 1,
    userScrollEnabled = !isRepeatOne && queue.isNotEmpty(),
    key = { idx -> "artwork_${queue.getOrNull(idx)?.videoId.orEmpty()}_$idx" },
) { page ->
    val pageTrack = queue.getOrNull(page)
    val isCurrentPage = page == currentIndex
    val pageHasVideo = isCurrentPage && videoBackdrop != null