How to implement full screen in compose

[Sviat98]

When I rotate device in a FullScreen Mode, the fullScreenView gets gone, and I have no idea how to draw new fullScreenView again, because there is no onEnterFullScreen trigger. I know that fullScreenView must be deleted due to Android lifecycle, but there should be mechanism how to restore it. Here is my code:

@composable
fun YouTubePanel(
modifier: Modifier = Modifier
) {
// Состояние для хранения введенного URL
var videoUrl by rememberSaveable { mutableStateOf("") }
// Состояние для хранения распаршенного videoId
var videoId by rememberSaveable { mutableStateOf<String?>(null) }
var isFullscreen by rememberSaveable { mutableStateOf(false) }

val lifecycleOwner = LocalLifecycleOwner.current

// Контекст для показа Toast
val context = LocalContext.current

var fullscreenView by remember { mutableStateOf<View?>(null) }

        // YouTube плеер
        videoId?.let { id ->
            //YouTubePlayerViewComponent(videoId = id)
            YouTubePlayerViewComponent(
                videoId = id,
                isFullScreen = isFullscreen,
                onEnterFullscreen = { view ->
                    isFullscreen = true
                    fullscreenView = view
                },
                onExitFullscreen = {
                    isFullscreen = false
                    fullscreenView = null
                }
            )
        } ?: run {
            // Placeholder, если videoId еще нет
            Text(
                text = "Введите ссылку на YouTube видео",
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center,
                style = MaterialTheme.typography.bodyLarge,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    if (isFullscreen) {
        AndroidViewBinding(
            factory = FullscreenContainerBinding::inflate,
            modifier = Modifier.fillMaxSize()
        ) {
            fullscreenView?.let { fullScreenViewContainer.addView(it) }
        }
    }

}

@composable
fun YouTubePlayerViewComponent(
videoId: String,
isFullScreen: Boolean,
onEnterFullscreen: (View) -> Unit,
onExitFullscreen: () -> Unit
) {
val lifecycleOwner = LocalLifecycleOwner.current
val activity = LocalActivity.current
var player: YouTubePlayer? by remember { mutableStateOf(null) }
var currentSecond by rememberSaveable { mutableFloatStateOf(0f) }

AndroidView(
    factory = { context ->
        YouTubePlayerView(context).apply {
            enableAutomaticInitialization = false

            val playerOptions = IFramePlayerOptions.Builder().controls(1).fullscreen(1).build()


            lifecycleOwner.lifecycle.addObserver(this)

            val youTubePlayerListener = object : AbstractYouTubePlayerListener() {
                override fun onReady(youTubePlayer: YouTubePlayer) {
                    println("ON READY TRIGGER")
                    player = youTubePlayer
                    player?.loadVideo(videoId, currentSecond)
                }

                override fun onCurrentSecond(
                    youTubePlayer: YouTubePlayer,
                    second: Float
                ) {
                    currentSecond = second
                }

                override fun onStateChange(
                    youTubePlayer: YouTubePlayer,
                    state: PlayerConstants.PlayerState
                ) {
                    super.onStateChange(youTubePlayer, state)
                    //println(state.toString())
                }
            }

            addFullscreenListener(object : FullscreenListener {
                override fun onEnterFullscreen(
                    fullscreenView: View,
                    exitFullscreen: () -> Unit
                ) {
                    //activity?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE
                    onEnterFullscreen(fullscreenView)
                    player?.play()
                }

                override fun onExitFullscreen() {
                    //activity?.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED
                    onExitFullscreen()
                }

            })

            initialize(youTubePlayerListener, playerOptions)
        }
    },
    update = { view ->
        // При обновлении videoId перезагружаем видео
        view.getYouTubePlayerWhenReady(object : YouTubePlayerCallback {
            override fun onYouTubePlayer(youTubePlayer: YouTubePlayer) {
                youTubePlayer.loadOrCueVideo(lifecycleOwner.lifecycle,videoId, 0f)
            }
        })
    },
    modifier = Modifier
        .height(150.dp)
        .aspectRatio(16f / 9f)
)

}

[PierfrancescoSoffritti]

We have a full view example in the sample app.

[Sviat98]

You' re right. In your sample everything works perfectly. But is it impossible to adapt this behaviour to Jetpack Compose? It has an interop with view system.

[PierfrancescoSoffritti]

I haven't tried yet to implement this in compose. But there probably is a way :)