How to display video thumbnail in Jetpack Compose?

Question

I'm implementing a simple gallery screen using Jetpack Compose which shows all video and image thumbnails on the screen

I have displayed image from file path successfully. However, I've got trouble in showing video thumbnail. How can I do that using Coil?

Here's my code to show image thumbnails:

@Composable
fun ImageLoaderFromLocal(
    url: String,
    placeHolderResId: Int,
    modifier: Modifier,
    transformation: Transformation
) {
    val painter = rememberImagePainter(data = File(url),
        builder = {
            placeholder(placeHolderResId)
            crossfade(true)
            transformations(transformation)
        })

    Image(
        painter = painter,
        contentDescription = null,
        modifier = modifier,
        contentScale = ContentScale.Inside
    )
}

Answer 1

According to Coil documentation, you need to add following dependency:

implementation("io.coil-kt:coil-video:$coil_version")

and specify fetcher in the builder:

val context = LocalContext.current
val painter = rememberImagePainter(
    data = url,
    builder = {
        fetcher(VideoFrameUriFetcher(context))
        // optionally set frame location
        videoFrameMillis(1000)

        placeholder(placeHolderResId)
        crossfade(true)
        transformations(transformation)
    }
)