CustomStyle

StyleStateKeySample

@Composable
fun StyleStateKeySample() {
    // Create a new StyleStateKey
    val playingStateKey = StyleStateKey(false)
    // In the module scope are the following declarations:
    //
    //    // A custom style scope which has all the properties of StyleScope
    //    interface MediaPlayerStyleScope : StyleScope
    //
    //    // A custom style type
    //    fun interface MediaPlayerStyle : CustomStyle<MediaPlayerStyleScope> {
    //        companion object : MediaPlayerStyle {
    //            override fun MediaPlayerStyleScope.applyStyle() { }
    //        }
    //    }
    // Introduce a function to convert the custom style to a Style
    fun MediaPlayerStyle.toStyle(): Style = Style {
        val scope = object : StyleScope by this, MediaPlayerStyleScope {}
        with(scope) { applyStyle() }
    }
    // Introduce an extension function to read the style state. This will only be
    // available in a MediaPlayerStyle.
    fun MediaPlayerStyleScope.playerPlaying(block: () -> Unit) {
        state(playingStateKey, block)
    }
    // The MediaPlayer composable
    @Suppress("UNUSED_PARAMETER")
    @Composable
    fun MediaPlayer(
        url: String,
        modifier: Modifier = Modifier,
        style: MediaPlayerStyle = MediaPlayerStyle,
        playing: Boolean = true,
    ) {
        val styleState =
            rememberUpdatedStyleState(null) { state -> state[playingStateKey] = playing }
        Box(modifier = modifier.styleable(styleState, style.toStyle())) {
            // Implementation of the media player
        }
    }
    // Using the style in a composable that sets the state.
    MediaPlayer(
        url = "https://example.com/media/video",
        style = {
            borderColor(Color.Gray)
            // This only sets the border color to green when the media player is playing
            playerPlaying { borderColor(Color.Green) }
        },
    )
}