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
    )
}

Phil Dukhov · Accepted Answer · 2021-09-27T08:41:01.437

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)
    }
)

score 4 · Answer 2 · edited Jul 16 '23 at 23:27

4

The other answer doesn't really work any more. so i tried this one and it worked

val context = LocalContext.current
var visible by rememberSaveable { mutableStateOf(false) }

val imageLoader = ImageLoader.Builder(context)
    .components {
        add(VideoFrameDecoder.Factory())
    }.crossfade(true)
    .build()

val painter = rememberAsyncImagePainter(
    model = "Your file here",
    imageLoader = imageLoader,

The painter should be called in the image composable like this

Image(
      painter = painter,
      contentDescription = "",
      contentScale = ContentScale.Crop,
      alignment = Alignment.Center,
      modifier = Modifier.fillMaxSize()
     )

edited Jul 16 '23 at 23:27

desertnaut

57,590
26
140
166

answered Nov 01 '22 at 18:34

RJnr

670
6
19

1

What should we use for model for video from phone local storage – 1234567 Mar 03 '23 at 07:03
1

For video from phone local storage you should use the URI file from content Provider api or any other source – RJnr Mar 04 '23 at 08:38

How to display video thumbnail in Jetpack Compose?

2 Answers2