How to show video thumbnail using Coil in compose

Question

I am trying this code to show video thumbnail from the Phone

Where video.uri = ContentUris.withAppendedId(MediaStore.Video.Media.EXTERNAL_CONTENT_URI, cursor.getColumnIndexOrThrow(MediaStore.Video.Media._ID).tolong())

val painter = rememberAsyncImagePainter(
                model =  video.uri ,
                imageLoader = imageLoader,)
            Image(
                painter = painter,
                contentDescription = video.displayName,
                contentScale = ContentScale.Crop,
                alignment = Alignment.Center,
                modifier = Modifier.size(48.dp).background(Color.Cyan)
            )

I am using

implementation("io.coil-kt:coil-compose:2.2.2")
implementation("io.coil-kt:coil-video:2.2.2")

What should we use for model = File(video.uri),

score 0 · Answer 1 · answered May 03 '23 at 10:38

Try this code. I have implemented It. It's Working For Me

Gradle Dependencies

implementation("io.coil-kt:coil-compose:2.2.2")
implementation("io.coil-kt:coil-video:2.2.2")

Compose Code

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

                                val painter = rememberAsyncImagePainter(
                                    model = message.uri,
                                    imageLoader = imageLoader,
                                )
                                
                                val imageState = painter.state

                                if (imageState is AsyncImagePainter.State.Loading) {
                                    Box(
                                        modifier = Modifier
                                            .clip(shape = RoundedCornerShape(12.dp))
                                            .background(color = Color.LightGray)
                                            .fillMaxWidth()
                                            .height(165.dp),
                                        contentAlignment = Alignment.Center
                                    ) {
                                        CircularProgressIndicator(
                                            color = Color.Black,
                                            modifier = Modifier.size(30.dp),
                                            strokeWidth = 2.dp
                                        )
                                    }
                                }

                                Image(
                                    painter = painter,
                                    contentDescription = "",
                                    contentScale = ContentScale.Crop,
                                    modifier = Modifier
                                        .clip(shape = RoundedCornerShape(12.dp))
                                        .fillMaxWidth()
                                        .height(165.dp)
                                        .clickable {

                                        }
                                )

How to show video thumbnail using Coil in compose

1 Answers1