[Glide] Add Gif support with GlideImage

[jaredsburrows]

The LocalGlideProvider only supports Drawable?:

public val LocalGlideRequestBuilder: ProvidableCompositionLocal<RequestBuilder<Drawable>?> =
  staticCompositionLocalOf { null }

By changing this to support GifDrawable?, we can support Glide's .asGif():

/**
 * Local containing the preferred [RequestOptions] for providing the same instance
 * in our composable hierarchy.
 */
public val LocalGlideGifRequestOptions: ProvidableCompositionLocal<RequestOptions?> =
  staticCompositionLocalOf { null }

/**
 * Local containing the preferred [RequestBuilder] for providing the same instance
 * in our composable hierarchy.staticCompositionLocalOf
 */
public val LocalGlideGifRequestBuilder: ProvidableCompositionLocal<RequestBuilder<GifDrawable>?> =
  staticCompositionLocalOf { null }

/**
 * Local containing the preferred [RequestManager] for providing the same instance
 * in our composable hierarchy.staticCompositionLocalOf
 */
public val LocalGlideGifRequestManager: ProvidableCompositionLocal<RequestManager?> =
  staticCompositionLocalOf { null }

/** A provider for taking the local instances related to the `GlideImage`. */
internal object LocalGlideGifProvider {

  /** Returns the current or default [RequestOptions] for the `GlideImage` parameter. */
  @Composable
  fun getGlideRequestOptions(): RequestOptions {
    return LocalGlideGifRequestOptions.current ?: RequestOptions()
  }

  /** Returns the current or default [RequestBuilder] for the `GlideImage` parameter. */
  @Composable
  fun getGlideRequestBuilder(): RequestBuilder<GifDrawable> {
    return LocalGlideGifRequestBuilder.current
           ?: getGlideRequestManager()
             .asGif()
  }

  /** Returns the current or default [RequestManager] for the `GlideImage` processor. */
  @Composable
  fun getGlideRequestManager(): RequestManager {
    // By default Glide tries to install lifecycle listeners to automatically re-trigger
    // requests when resumed. We don't want that with Compose, since we rely on composition
    // for our 'lifecycle'. We can stop Glide doing this by using the application context.
    return LocalGlideGifRequestManager.current
           ?: GlideApp.with(LocalContext.current.applicationContext)
  }
}

Can we provide a LocalGlideGifProvider, LocalGlideBitmapProvider and LocalGlideDrawableProvider providers?

[skydoves]

Hey @jaredsburrows,
I'm currently working on this, and I have a question about this. I was thinking Glide automatically loads either a GifDrawable or a BitmapDrawable depending on the type of the underlying image. Do we have any problems loading gif images now? Thank you for reporting this issue!

[skydoves]

Since version 2.0.2, you can set glideRequestType parameter as the below:

GlideImage(
    imageModel = { poster.gif },
    glideRequestType = GlideRequestType.DRAWABLE,
    previewPlaceholder = R.drawable.poster
  )

GlideRequestType supports three different request types:

GlideRequestType.DRAWABLE // request image as Drawable type.
GlideRequestType.BITMAP // request image as Bitmap type.
GlideRequestType.GIF // request image as GifDrawable type.

Thanks!

[jaredsburrows]

@skydoves Thanks. I have tried the following but the gifs are not animating:

val glide = Glide.with(LocalView.current)
  .asGif()
  .override(135.dp.value.roundToInt())
  .signature(ObjectKey(item.tinyGifPreviewUrl))

CompositionLocalProvider(LocalGlideRequestBuilder provides glide) {
  GlideImage(
    imageModel = { item.tinyGifPreviewUrl },
    glideRequestType = GlideRequestType.GIF,
    modifier = Modifier
      .padding(1.dp)
      .size(135.dp),
    imageOptions = ImageOptions(contentScale = ContentScale.Crop),
    loading = {
      Box(modifier = Modifier.matchParentSize()) {
        CircularProgressIndicator(
          modifier = Modifier.align(Alignment.Center)
        )
      }
    },
  )
}

[skydoves]

@jaredsburrows
Thanks for the reporting with details! I'm not sure what I'm missing, but the codes below work well. Let me check out more details!

  GlideImage(
    imageModel = { "https://media.giphy.com/media/WNur0b03KntlK/giphy.gif" },
    modifier = Modifier
      .height(500.dp)
      .padding(8.dp)
      .clip(RoundedCornerShape(8.dp)),
    previewPlaceholder = R.drawable.poster
  )

[skydoves]

The example below works well for me 🤔

  val glide = Glide.with(LocalView.current)
    .asGif()
    .override(135.dp.value.roundToInt())
    .signature(ObjectKey("https://media.giphy.com/media/WNur0b03KntlK/giphy.gif"))

  CompositionLocalProvider(LocalGlideRequestBuilder provides glide) {

    GlideImage(
      imageModel = { "https://media.giphy.com/media/WNur0b03KntlK/giphy.gif" },
      glideRequestType = GlideRequestType.GIF,
      modifier = Modifier
        .padding(1.dp)
        .size(135.dp),
      imageOptions = ImageOptions(contentScale = ContentScale.Crop),
      loading = {
        Box(modifier = Modifier.matchParentSize()) {
          CircularProgressIndicator(
            modifier = Modifier.align(Alignment.Center)
          )
        }
      },
    )
  }

[jaredsburrows]

@skydoves Thanks. I got it working. I appreciate the update.