Repository: android/compose-samples
File: Jetcaster/app/src/main/java/com/example/jetcaster/ui/player/PlayerScreen.kt (Kotlin)

Code before:
                podcastName = uiState.podcastName,
                titleTextStyle = MaterialTheme.typography.h6
            )
            Spacer(modifier = Modifier.weight(0.5f))
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.weight(10f)
            ) {
                PlayerButtons(playerButtonSize = 92.dp, modifier = Modifier.padding(top = 8.dp))
                PlayerSlider(uiState.duration)
            }
        }
    }
}

@Composable
private fun PlayerContentBook(
    uiState: PlayerUiState,
    bookPosture: DevicePosture.BookPosture,
    onBackPress: () -> Unit
) {
    val hingePosition = with(LocalDensity.current) { bookPosture.hingePosition.left.toDp() }
    val hingeWidth = with(LocalDensity.current) { bookPosture.hingePosition.width().toDp() }

    Row(modifier = Modifier.fillMaxSize()) {
        // Content for the left part of the screen
        Column(
            modifier = Modifier
                .width(hingePosition)
                .verticalGradientScrim(
                    color = MaterialTheme.colors.primary.copy(alpha = 0.50f),
                    startYPercentage = 1f,
                    endYPercentage = 0f
                )
                .systemBarsPadding(bottom = false)
                .padding(32.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.padding(horizontal = 8.dp)
            ) {
                Spacer(modifier = Modifier.weight(1f))
                Spacer(modifier = Modifier.height(32.dp))
                PodcastInformation(
                    uiState.title,
                    uiState.podcastName,
                    uiState.summary
                )
            }
        }

Review comment (refactor):
Nit: to make this composable more readable, would you mind extracting out the content on each part of the screen to a different composable? i.e.

```
Row {
    PlayerContentBookLeft(...)
    Spacer(hinge)
    PlayerContentBookRight(...)
}
```

WDYT?

Code after:
                podcastName = uiState.podcastName,
                titleTextStyle = MaterialTheme.typography.h6
            )
            Spacer(modifier = Modifier.weight(0.5f))
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.weight(10f)
            ) {
                PlayerButtons(playerButtonSize = 92.dp, modifier = Modifier.padding(top = 8.dp))
                PlayerSlider(uiState.duration)
            }
        }
    }
}

@Composable
private fun PlayerContentBook(
    uiState: PlayerUiState,
    bookPosture: DevicePosture.BookPosture,
    onBackPress: () -> Unit
) {
    val hingePosition = with(LocalDensity.current) { bookPosture.hingePosition.left.toDp() }
    val hingeWidth = with(LocalDensity.current) { bookPosture.hingePosition.width().toDp() }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalGradientScrim(
                color = MaterialTheme.colors.primary.copy(alpha = 0.50f),
                startYPercentage = 1f,
                endYPercentage = 0f
            )
            .systemBarsPadding()
            .padding(horizontal = 8.dp)
    ) {
        TopAppBar(onBackPress = onBackPress)

        Row(modifier = Modifier.fillMaxSize()) {
            // Content for the left part of the screen
            PlayerContentBookLeft(hingePosition, uiState)
            // Space for the hinge
            Spacer(modifier = Modifier.width(hingeWidth))
            // Content for the right part of the screen
            PlayerContentBookRight(uiState)
        }
    }
}

@Composable
private fun PlayerContentBookLeft(
    hingePosition: Dp,