영상URL에서 샘플 이미지 가져오기 ( 코일 )

영상 URL로부터 샘플 이미지를 가져와서 로드하는 방법 

 

glide는 영상 URL 도 인식하여 메타데이터에서 샘플 이미지를 가져올 수 있다.

 

하지만 coil은 ImageLoader를 커스텀해야한다.

 

해당 프로젝트에서는 coil을 사용하였으므로 가능하다면 변경하고 싶지 않았다.

---

기본 지식 

 

1. coil 라이브러리는 단순히 load()를 사용하면 내부에서 만들어진 ImageLoader 객체를 사용한다. 

 

2. 바인딩 어댑터와 같이 사용할때 아래와 같이 함수로 정의하여 사용한다. 

@BindingAdapter(
    value = [
        "src",
        "placeholder"
    ],
    requireAll = false
)
fun ImageView.bindSrc(
    src: Any?,
    placeholder: Drawable? = null,
) {
    load(src) {
        placeholder(placeholder)
        error(placeholder)
    }
}

<ImageView
    src="@{vm.state.profileImage}" >

---

방법

 

1. Dependency 추가 

"io.coil-kt:coil-video:2.2.2"

 

2. 기존 BindingAdapter를 object 로 감싼다 

object ImageViewBindingAdapter {

    private var imageLoader: ImageLoader? = null

    @JvmStatic
    @BindingAdapter(
        value = [
            "src",
            "placeholder",
        ],
        requireAll = false
    )
    fun ImageView.bindSrc(
        src: Any?,
        placeholder: Drawable? = null,
     {
    
        load(videoUrl, getVideoImageLoaderInstance(context.applicationContext)) {
            videoFrameMillis(0)
       }
    }

    @Synchronized
    fun getVideoImageLoaderInstance(context: Context): ImageLoader {
        imageLoader?.let { return it }
        return ImageLoader(context).newBuilder().components {
            add(VideoFrameDecoder.Factory())
        }.build().also {
            imageLoader = it
        }
    }
}

-> ImageLoader를 싱글톤으로 만들어 VidoeFrameDecoder를 붙인다. 

 

-> 그리고 해당 함수에 @JvmStatic 을 추가한다. 

 

videoFrameMillis(0) : 0초의 썸네일을 가져온다.