Box doesn't overlap

[theapache64]

Composable placed on top of SwingPanel or vlcj media player ( I don't know which one is causing the issue) doesn't respect the rules of Box

Structure:

Box{
  VideoPlayer() // visible
  Button() // not visible
}

Reproducible Code:

import androidx.compose.desktop.SwingPanel
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application
import uk.co.caprica.vlcj.factory.discovery.NativeDiscovery
import uk.co.caprica.vlcj.player.component.CallbackMediaPlayerComponent

@ExperimentalComposeUiApi
fun main(args: Array<String>) = application {
    Window {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            val playerState = remember { PlayerState() }

            VideoPlayer(
                modifier = Modifier.fillMaxSize(),
                url = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
                playerState = playerState
            )

            @Suppress("SameParameterValue")
            PlayPauseButton(
                modifier = Modifier.align(Alignment.BottomCenter).padding(bottom = 30.dp),
                isPlay = playerState.isPlay(),
                onPlayClicked = {
                    playerState.play()
                },
                onPauseClicked = {
                    playerState.pause()
                }
            )

        }
    }
}

@Composable
fun PlayPauseButton(
    modifier: Modifier = Modifier,
    isPlay: Boolean,
    onPlayClicked: () -> Unit,
    onPauseClicked: () -> Unit
) {
    Button(
        modifier = modifier,
        onClick = {
            if (isPlay) {
                onPauseClicked()
            } else {
                onPlayClicked()
            }
        },
    ) {
        Text(
            if (isPlay) {
                "PAUSE"
            } else {
                "PLAY"
            }
        )
    }
}

private class PlayerState {
    var playPause by mutableStateOf(true)

    fun play() {
        playPause = true
    }


    fun pause() {
        playPause = false
    }

    fun isPlay() = playPause
    fun isPause() = !playPause
}


@Composable
private fun VideoPlayer(
    modifier: Modifier = Modifier,
    url: String,
    playerState: PlayerState
) {
    println("Video player for $url")
    NativeDiscovery().discover()
    val mediaPlayerComponent = remember { CallbackMediaPlayerComponent() }

    LaunchedEffect(Unit) {
        val ok = mediaPlayerComponent.mediaPlayer().media().play(url)
        println("play gave $ok")
    }

    // Play/Pause control
    mediaPlayerComponent.mediaPlayer().controls().let { controls ->
        if (playerState.isPlay()) {
            controls.play()
        }

        if (playerState.isPause()) {
            controls.pause()
        }
    }

    return SwingPanel(
        background = Color.Transparent,
        modifier = modifier,
        factory = {
            mediaPlayerComponent
        }
    )
}

[JoeSteven]

had same issue here, looks like VideoPlayer always on top level of the screen, when i put video player in a lazy column and put a floatingActionButton outside LazyColumn, the VideoPlayer also covered it。like this:

And there is another problem, VideoPlayer has no response to click events, here is my code:

 VideoPlayer(
     modifier = Modifier
                .fillMaxSize()
                .clickable( onClick = { //do something here } ),
     url = it,
) 

[HuixingWong]

This is an issue that is seriously affecting people starting to use the compose desktop, please consider raising its priority, similar issues have been around for dozens of months

[wispborne]

Here is another screenshot to show how jarring this is.
The webview is a SwingPanel, everything else is Compose. The webview should be dimmed, with the AlertDialog in front of it.
Instead, the webview stands above everything, cutting off any Compose content, which doesn't know that it's being cut off.

[akurasov]

@DavidWhitman have you seen Swing interop tutorial hear?

[wispborne]

@DavidWhitman have you seen Swing interop tutorial hear?

It simply says that this is the way that SwingPanel works and you should design around the limitation or try to implement it in Compose (good luck to anyone with building a WebView component in Compose - that's no small thing).

Link: https://github.com/JetBrains/compose-jb/tree/master/tutorials/Swing_Integration

Did I miss your point @akurasov?

[egorikftp]

Any updates?

[KevinnZou]

Any updates? Facing the same issue with WebView wrapped in SwingPanel.

[MatkovIvan]

With some limitations (due to OS level blending) it's available under the flag now - JetBrains/compose-multiplatform-core#915

[tangshimin]

I'm using windows, and when I upgraded compose to v1.6.0, and use EmbeddedMediaPlayerComponent to render the video, the video doesn't show up, only the sound is heard.

[MatkovIvan]

@tangshimin it's not enabled by default and has some limitations (because of OS blending). See #4389 (comment)