Not compatible with Compose

[edwoollard]

Firstly, thanks so much for creating this library. This is super useful and exactly what I was looking for to make handling StorageReferences and their subsequent retrieval of download URLs a breeze.

However, I've written a screen in Compose where I want to utilise this library and image loading. Typically you would do this: Image(painter = rememberImagePainter(thumbnailUrl))

But passing a StorageReference to rememberImagePainter which is Coil's solution to loading images in Compose does not work. Are you planning to add support for Compose?

Thanks in advance!

[thatfiredev]

@edwoollard I'm glad you found this library useful :)

I'll definitely work on a Compose module for the library. But in the meantime, you can try something like this:

val fireCoilLoader = ImageLoader.Builder(context)
    .componentRegistry {
        add(StorageReferenceFetcher())
    }
    .build()

// And in your Composable:
Image(
    painter = rememberImagePainter(
        data = thumbnailUrl, // this should be your StorageReference
        imageLoader = fireCoilLoader // the loader we created above
    )
)

I haven't tested this code yet, but I'll definitely do it to add support for Compose

[edwoollard]

Wow! Thank you so much. Such a speedy response. 🙏

Just tried it out and this works perfectly. Really appreciate it. A true legend.

[edwoollard]

@thatfiredev Sorry to bother you, but do you know how this should work in Coil 2.0.0 now that it uses .components { } instead of .componentRegistry{ } when constructing the ImageLoader?

[thatfiredev]

@edwoollard don't apologise, you're not bothering at all. Questions are always welcome :)

Your question just reminded me that this library is not getting enough love. I'll need to refactor some code to make it compatible with .components {}. I should be able to get it done this weekend, I'll let you know when it's ready.

[thatfiredev]

Hey @edwoollard I've just released firecoil v2.0.0-rc2 which should be compatible with coil 2.0.0-rc2. So you can now update your project and use this:

.components {
    add(StorageReferenceKeyer()) // this is necessary for local caching
    add(StorageReferenceFetcher.Factory())
}

[edwoollard]

Thank you so much, Rosário! I can't thank you enough. 🌟

[jmy2022]

@edwoollard I configured it according to your way, no problem. But it's slower than when I convert firestroe directly to a download url, and it doesn't cache ` val context = LocalContext.current val imageLoader = ImageLoader.Builder(context) .components { if (Build.VERSION.SDK_INT >= 28) { add(ImageDecoderDecoder.Factory()) } else { add(GifDecoder.Factory()) } // This is the core of firecoil. Don't forget to add it add(StorageReferenceKeyer()) add(StorageReferenceFetcher.Factory())

    }
    .build()

items(data.size) { index -> val painter = rememberAsyncImagePainter( imageLoader = imageLoader, model = ImageRequest.Builder(LocalContext.current) .placeholder(R.drawable.placeholder) .data(viewModel.storage.reference.child(data[index].filepath)) //here is .size(Size.ORIGINAL) // Set the target size to load the image at. .build() )

                        when (painter.state) {
                            is AsyncImagePainter.State.Success -> {
                                Image(
                                    painter = painter,
                                    contentDescription = "Zoomable image",
                                    contentScale = ContentScale.Fit,
                                    alignment = Alignment.Center,
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .wrapContentHeight()
                                        .clickable(
                                            onClick = {
                                                openScreen("$POST_Photos_Zoom_SCREEN?$PHOTO_INDEX={$index}")
                                            },
                                            onClickLabel = "Open it"
                                        )
                                )
                            }
                            is AsyncImagePainter.State.Loading -> {
                                Text(text = "Loading")
                                Box(Modifier.fillMaxSize()) {
                                    CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
                                }
                            }is  AsyncImagePainter.State.Error->{
                            Text(text = "Error")
                            }is  AsyncImagePainter.State.Empty->{
                                    Text(text = "Empty")
                            }
                        }

} `