Android YouTube player button to change video

104 Views Asked by At

Context

I'm building my first android app and one view in the app is supposed to be a YouTube Player at the top with a list of videos (that come from an API end point that I don't have control over). I need to make the items in the list trigger the player to load a different video.

Issue

Here's the code that I currently have, I've successfully add a video player at the top and have a list below it that displays the video titles, I just need to make the items clickable and the action be updating the video by using ID provided from the API.

fun VideoScreen(
    vm: VideoViewModel,
    videoId: String
) {
    LaunchedEffect(Unit, block = {
        vm.getVideoList()
    })

    if (vm.errorMessage.isEmpty()) {
        Column {
            AndroidView(factory = {
                var view = YouTubePlayerView(it)
                val fragment = view.addYouTubePlayerListener(
                    object : AbstractYouTubePlayerListener() {
                        override fun onReady(youTubePlayer: YouTubePlayer) {
                            super.onReady(youTubePlayer)
                            youTubePlayer.loadVideo(videoId, 0f)
                        }
                    }
                )
                view
            })
            LazyColumn(modifier = Modifier.fillMaxHeight()) {
                items(vm.videoList) { video ->
                    Column {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(16.dp),
                            horizontalArrangement = Arrangement.SpaceBetween
                        ) {
                            Text(
                                video.title,
                                modifier = Modifier
                                    .fillMaxWidth(.9f)
                            )
                        }
                        Divider()
                    }
                }
            }
        }
    } else {
        Text(vm.errorMessage)
    }
}

Data

Here's the JSON I'm getting from the API:

[
    {
        "title": "Homestead Fair 2022 \u2014 Friday Afternoon Music",
        "youtubeId": "9UOgiVIyv0A"
    },
    {
        "title": "Homestead Fair 2022 \u2014 Friday Evening Music",
        "youtubeId": "yP84StSJre4"
    },
    {
        "title": "\"Will He Find Faith on the Earth?\" When Economy Becomes Religion",
        "youtubeId": "Z_wlCnVpVYc"
    },
    {
        "title": "Is Freedom Killing Our Liberty?",
        "youtubeId": "8sNJGLBB5sA"
    },
    {
        "title": "The Roots of Industrialism and a Return to Sustainability",
        "youtubeId": "yyMZtfGziIc"
    },
    {
        "title": "The Perils of \u201cProgress\u201d \u2013 Unveiling Modern Culture",
        "youtubeId": "XBZt8bv_tzU"
    }
]

Things I've Tried

  • Read through the documentation, if there's an explanation for what to do, I'm blind!
  • I've searched Google and SO, but I'm only finding android xml code or really old code that seems to be deprecated.
0

There are 0 best solutions below