Video thumbnails missing in posts list and preview for video shortcodes such as `[wpvideo]`

[hoverduck]

Expected behavior

To see a video thumbnail in the Posts list or post preview

Actual behavior

The shortcode is shown instead

Steps to reproduce the behavior

1) Create a new post with a wpvideo shortcode and publish it 2) Look at the card on the Posts page

It would be nice to see a thumbnail of the video, but instead all I see is the shortcode like [wpvideo] (note that it's not even the full shortcode, it's missing the video code itself).

Tested on Nexus 6P, Android 7.1.2, wp alpha-38

[hoverduck]

Also note that there are likely other shortcodes/embeds that could benefit from some other representation here as well.

[daniloercoli]

The Post list shows the [video] tag when the post is finished uploading in Aztec as of #6358, or the [wpvideo] tag in the Visual Editor.

• We need to check what are the required changes to ReaderImageScanner to be able to parse and extract video urls from [wpvideo] or [video] tags. RegExp used in Aztec here https://github.com/wordpress-mobile/AztecEditor-Android/commit/b0e2c1dc3d874b75b871a5443b27d5736831f412

• Find a way to download a thumb for a video. Aztec is using Glide to retrieve thumbs from videos. We may want to use the same library. We've already added a method to retrieve Video Preview from both remote and local videos. https://github.com/wordpress-mobile/WordPress-Android/blob/8f331dd2c12d3670bf3e300c1c9f6db48b6fa19d/libs/utils/WordPressUtils/src/main/java/org/wordpress/android/util/ImageUtils.java#L603

Details:

The standard WordPress [video] shortcode

• support [video src="video-source.mp4"] or [video mp4="source.mp4" ogv="source.ogv" webm="source.webm"] syntax.
• It may contain the poster attribute with the URL of the thumbnail on it.
• We need to check if the URLs in the attributes could be in their short form, like source.mp4 (without the full path to the wp-content folder - how we can get the permalinks structure then?). I've seen that short form in the doc here: https://codex.wordpress.org/Video_Shortcode but not on my blog. EX: [video src="https://eritreocazzulati.files.wordpress.com/2017/07/vid_20170625_1203541.mp4"]

VideoPress [wpvideo] shortcode

• Has the form of [wpvideo AbgzvExE] that could probably be changed in https://videopress.com/v/AbgzvExE in order to retrieve the thumb for the video.

@nbradbury Would you mind to take the lead on this?

[daniloercoli]

As brought up by @mzorz in this other PR here https://github.com/wordpress-mobile/WordPress-Android/pull/6412#issuecomment-318375557 we should probably cache video thumbnails for remote videos. It's "kind" of OK-ish loading the previews by using the real video URL in the Editor, but probably in posts list we should use another approach, and create a cache somewhere that maps video urls --> video preview images.

[nbradbury]

Changed to low priority as per Slack discussion.

[designsimply]

Tested and confirmed that videos don't show in the Posts List for wpvideo shortcodes or for video blocks added using Gutenberg Mobile on a WordPress.com Premium site.

^{Tested with WPAndroid 13.5-rc-1 using Pixel 3 Android 10 on a aboutmakingmovies.movie.blog WordPress.com Premium site.}

Removing [Pri] Low as the video block becomes more and more used with more mentions from users starting to come in.