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

Municipalize

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

Norway

Answer 2

This is latest solution with Coil and Jetpack compose which is working for me:

   val model = ImageRequest.Builder(context)
        .data(uri)
        .videoFrameMillis(10000)
        .decoderFactory { result, options, _ ->
            VideoFrameDecoder(
                result.source,
                options
            )
        }
        .build()

And Load image as:

           AsyncImage(
                modifier = Modifier.fillMaxSize(),
                model = model,
                contentDescription = "video thumbnail",
                contentScale = ContentScale.Crop
            )

Dorita

Answer 3

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

Plumcot

What should we use for model for video from phone local storage – Fairtrade

For video from phone local storage you should use the URI file from content Provider api or any other source – Plumcot

Answer 4

Follow the steps to load a thumbnail using coil in Jetpack Compose.

1. Adding requried dependencies

   def coil_version = '2.6.0'
   implementation("io.coil-kt:coil-compose:$coil_version")
   implementation("io.coil-kt:coil-video:$coil_version")
   

2. Build an image loader and pass it to AsyncImage

   val imageLoader = ImageLoader.Builder(LocalContext.current)
       .components { add(VideoFrameDecoder.Factory()) }
       .build()
   
   AsyncImage(
         model = path, // <========== Pass video path here
         imageLoader = imageLoader,
         contentDescription = "Video Thumbnail"
   )
   

And that's it. It will display video thumbnail.

Zubkoff