Issue: onReady() not called for second video, showing black screen

[Satyamshakya0405]

I'm experiencing an issue where onReady() is not being triggered when playing sequential YouTube videos with a time interval between them.
Setup:

• Playing YouTube videos one after another with time intervals
• Releasing the player and creating a new YouTubePlayerView for each video
• Using Jetpack Compose with the YouTube Android Player API

Problem:

• First video plays correctly and onReady() is called
• When the second video is supposed to play, onReady() is never triggered
• Only a black screen is visible instead of the video

Here is the sample code.

@Composable
fun YouTubePlayer(modifier: Modifier, widgetContent: WidgetContent.YoutubeWidgetContent) {
  val context = LocalContext.current
  val lifecycleOwner = LocalLifecycleOwner.current
  var playerView by remember { mutableStateOf<YouTubePlayerView?>(null) }

  var youTubePlayer by remember { mutableStateOf<YouTubePlayer?>(null) }

  AndroidView(
      modifier = modifier,
      factory = { ctx ->
        YouTubePlayerView(ctx).apply {
          enableAutomaticInitialization = false

          val options =
              IFramePlayerOptions.Builder()
                  .origin("https://${context.packageName}")
                  .controls(1)
                  .fullscreen(1)
                  .autoplay(if (widgetContent.widget.autoPlay) 1 else 0)
                  .mute(if (widgetContent.widget.isMute) 1 else 0)
                  .ivLoadPolicy(3)
                  .build()

          val listener =
              object : AbstractYouTubePlayerListener() {
                override fun onReady(player: YouTubePlayer) {
                  youTubePlayer = player
                }

              }

          initialize(listener, options)
          playerView = this
        }
      },
  )

  // Use LaunchedEffect to react to changes in videoId or the player instance
  LaunchedEffect(youTubePlayer, widgetContent) {
    youTubePlayer?.loadVideo(widgetContent.widget.videoId, 0f)
  }

  DisposableEffect(widgetContent,lifecycleOwner) {
    onDispose {
      playerView?.release()
    }
  }
}

[PierfrancescoSoffritti]

Releasing the player and creating a new YouTubePlayerView for each video

why?

[Satyamshakya0405]

In my actual setup, I have a playlist containing different media types (images, videos, and YouTube videos) that play in a loop with configurable time intervals between them.
The sequence could be something like:

YouTube Video A → Image → YouTube Video B → Local Video → YouTube Video C → YouTube Video D

Since I'm switching between different media types and need to display the appropriate player/view for each media item, I'm releasing the YouTubePlayerView when moving to non-YouTube content (images or local videos) and creating a new instance when the next YouTube video comes up in the rotation.

[Satyamshakya0405]

Solution Found: Compose recomposition issue
I've resolved the issue. It was related to Jetpack Compose's recomposition behavior with AndroidView.
Root Cause:
When the state changed (switching between different media items), recomposition was occurring, but the AndroidView factory method was not being re-invoked. This is the expected behavior of AndroidView - it reuses the same view instance across recompositions by default to avoid unnecessary view recreation.
However, in my case, I needed a fresh YouTubePlayerView instance each time a new YouTube video was scheduled to play (after displaying other media types like images or local videos in between).
Solution:
Wrap the AndroidView in a key() composable with the changing state as the key. This forces Compose to treat it as a different composition, causing the factory to be called again:

    key(widgetContent) {
        AndroidView(
            modifier = modifier,
            factory = { ctx ->
                YouTubePlayerView(ctx).apply {
                    enableAutomaticInitialization = false

                    val options =
                        IFramePlayerOptions.Builder()
                            .origin("https://${context.packageName}")
                            .controls(1)
                            .fullscreen(1)
                            .autoplay(if (widgetContent.widget.autoPlay) 1 else 0)
                            .mute(if (widgetContent.widget.isMute) 1 else 0)
                            .ivLoadPolicy(3)
                            .build()
                    initialize(listener, options)
                    playerView = this
                }
            },
        )
    }

[Satyamshakya0405]

@PierfrancescoSoffritti Do you have any better solution in mind for this usecase or any limitation in my current solution. TIA!

[PierfrancescoSoffritti]

I see. You could keep an instance of view and keep reusing that, it would be preferable.

What you're doing is also fine but more resource intensive and slower since the player needs to be initialized each time.