How to load video thumbnails using square picasso library?

Question

Currently I'm loading MediaStore Image Thumbnails using picasso into the ListView with the following snippet: (video.getData() returns the actual path of the image such as mnt/sdcard/...)

Picasso.with(this.context)
       .load(new File(photo.getData()))
       .resize(50, 50).config(config)
       .centerCrop()
       .into(viewHolder.imageViewItem);

Now I'm and unable to load the MediaStore Video Thumbnails by just passing the video.getData() instead of photo.getData()?

Answer 1

First You need to create VideoRequestHandler

public class VideoRequestHandler extends RequestHandler{
    public String SCHEME_VIDEO="video";
    @Override
    public boolean canHandleRequest(Request data) 
    {
        String scheme = data.uri.getScheme();
        return (SCHEME_VIDEO.equals(scheme));
    }

    @Override
    public Result load(Request data, int arg1) throws IOException 
    {
         Bitmap bm;
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
         try {
            Size size = new Size(250, 250);
            bm = ThumbnailUtils.createVideoThumbnail(new File(data.uri.getPath()), size, null);
         } catch (IOException e) {
            e.printStackTrace();
        }
        }
        else
        {
         bm = ThumbnailUtils.createVideoThumbnail(data.uri.getPath(), MediaStore.Images.Thumbnails.MINI_KIND);
        }
         return new Result(bm,LoadedFrom.DISK);  
    }
}

After That

 VideoRequestHandler videoRequestHandler;
 Picasso picassoInstance;

Build only once

 videoRequestHandler = new VideoRequestHandler();
 picassoInstance = new Picasso.Builder(context.getApplicationContext())
  .addRequestHandler(videoRequestHandler)
  .build();

Then load file from path

 picassoInstance.load(VideoRequestHandler.SCHEME_VIDEO+":"+filepath).into(holder.videoThumbnailView);

Updated October 2020

ThumbnailUtils.createVideoThumbnail(data.uri.getPath(), MediaStore.Images.Thumbnails.MINI_KIND);

is deprecated in Android Q. I will write in Kotlin:

val bm = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
            ThumbnailUtils.createVideoThumbnail(
                File(data.uri.path!!),
                Size(200f.toPx(), 200f.toPx()),
                CancellationSignal()
            )
        } else {
            ThumbnailUtils.createVideoThumbnail(
                data.uri.path!!,
                MediaStore.Images.Thumbnails.MINI_KIND
            )
        }

to Px is an extension function which is like below;

fun Float.toPx() =
    TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, this, Resources.getSystem().displayMetrics)
        .toInt()

You can use any dp value for it :) I hope this can help you :)

Answer 2

Before, you had two options:

1) Do a call beforehand, when you were retrieving your videos for example and storing the bitmap:

Bitmap thumbnailBitmap = MediaStore.Video.Thumbnails.getThumbnail(content, id, MediaStore.Video.Thumbnails.MINI_KIND, options);

2) Creating a custom Downloader (not verified for local media)

But now, with Picasso 2.4, you can create a RequestHandler. You can have a look at this page for example: http://blog.jpardogo.com/requesthandler-api-for-picasso-library/

In my current usage, I fetch the thumbnail path and then call Picasso with that path. To get the thumbnail path, I referred to: android get video thumbnail PATH, not Bitmap.

Answer 3

public void bindTo(MediaListHolder mediaListRowHolder, int i) {
    DataPictures message = itemList.get(i);
    try {
        Uri uri = Uri.fromFile(new File(message.getFilePath()));
        if (message.getFileType().equalsIgnoreCase("video")) {
            Bitmap bmThumbnail = ThumbnailUtils.extractThumbnail(ThumbnailUtils.createVideoThumbnail(message.getFilePath(),
                    MediaStore.Video.Thumbnails.FULL_SCREEN_KIND), MAX_WIDTH, MAX_HEIGHT);
            mediaListRowHolder.thumbnail.setImageBitmap(bmThumbnail);
        } else {
            Picasso.with(ApplicationSingleton.getInstance()).load(uri)
                    .resize(size, size)
                    .placeholder(R.drawable.logo_slogan)
                    .into(mediaListRowHolder.thumbnail);
        }
        Log.i(TAG, "bindTo: ");
    } catch (Exception e) {
        e.printStackTrace();
    }
}

Answer 4

Note - Follow this comment if you simply want to show thumbnail in your image view and apply no extra Picasso functions on it . I just modified it a little to show circular thumbnail coz it looks cool .

Don't use Picasso . Here's a very simple way to do it .

videoPathUrl = /*your Video File Url */
Bitmap bMap = ThumbnailUtils.createVideoThumbnail(videoPathUrl , MediaStore.Video.Thumbnails.MICRO_KIND);
bMap = transformBitmapToCircularBitmap(bMap);
yourImageView.setImageBitmap(bMap);

and transformBitmapToCircularBitmap function is as follows -

public static Bitmap transformBitmapToCircularBitmap(Bitmap source)
{
    int size = Math.min(source.getWidth(), source.getHeight());

    int x = (source.getWidth() - size) / 2;
    int y = (source.getHeight() - size) / 2;

    Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
    if (squaredBitmap != source) {
        source.recycle();
    }

    Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());

    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    BitmapShader shader = new BitmapShader(squaredBitmap,
            BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
    paint.setShader(shader);
    paint.setAntiAlias(true);

    float r = size / 2f;
    canvas.drawCircle(r, r, r, paint);

    squaredBitmap.recycle();
    return bitmap;
}