How to use VLCJ embedded media list player properly

124 Views Asked by At

I'm making a Kotlin Compose Multiplatform app (desktop only) using VLCJ to display videos. I want to be able to jump around between different videos (stored locally) with minimal delay, and from my reading medialistplayer seems to be the best way to do this. However, i'm not able to make it properly embed the same way a regular media player does.

import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.awt.SwingPanel
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application
import kotlinx.coroutines.delay
import uk.co.caprica.vlcj.player.component.EmbeddedMediaListPlayerComponent
import uk.co.caprica.vlcj.player.component.EmbeddedMediaPlayerComponent


fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        MaterialTheme {

            val mrl1 = "" // insert some video path
            val mrl2 = "" // insert some video path
            Column {
                // regular embedded media player
                Row(Modifier.weight(1f)) {
                    VideoPlayerRegular(mrl1)
                }
                
                Spacer(Modifier.height(1.dp))
                
                // embedded media list player (not working properly)
                Row(Modifier.weight(1f)) {
                    VideoPlayerList(mrl1, mrl2)
                }
            }
        }
    }
}

@Composable
fun VideoPlayerList(mrl1: String, mrl2: String) {
    val mediaPlayerComponent = remember { EmbeddedMediaListPlayerComponent() }

    // play video when composable is ready
    LaunchedEffect(Unit) {
        mediaPlayerComponent.mediaListPlayer().list().media().add(mrl1)
        mediaPlayerComponent.mediaListPlayer().list().media().add(mrl2)

        // play first video then go to next after a few sec
        mediaPlayerComponent.mediaListPlayer().controls().play()
        delay(3000)
        mediaPlayerComponent.mediaListPlayer().controls().playNext()
    }

    SwingPanel(
        factory = { mediaPlayerComponent },
        modifier = Modifier.fillMaxWidth().fillMaxHeight()
    )
}

@Composable
fun VideoPlayerRegular(mrl: String) {
    val mediaPlayerComponent = remember { EmbeddedMediaPlayerComponent() }

    // play video when composable is ready
    LaunchedEffect(Unit) {
        mediaPlayerComponent.mediaPlayer().media().play(mrl)
    }

    SwingPanel(
        factory = { mediaPlayerComponent },
        modifier = Modifier.fillMaxWidth().fillMaxHeight()
    )
}

In this minimal example, the regular mediaplayer embeds just fine but the medialistplayer opens the video in a new window instead of embedding in the bottom half of the main window, even though the component i used was EmbeddedMediaPlayerComponent. enter image description here

Can anyone help me fix this?

0

There are 0 best solutions below