Video, document item images

[kenara]

Videos uploaded to R2 don't get a thumbnail by default (unlike Cloudflare Stream).

Lacking any knowledge of React, I can't submit a pull request but it might not be too hard to integrate something like the code here: https://github.com/fraigo/online-video-thumbnail-generator that would occupy the Item image input.

I accept and support that it's in everyone's interest to keep Microfeed simple! Still, I would suggest that adding/choosing a thumbnail is a typical - if not integral - part of the video upload process.

Similarly, while it's easy enough to screenshot a PDF (probably the most commonly added document type), here's an example using pdf.js that would allow the user to choose their preferred page and be done with it.

[wenbinf]

Thank you for your thoughtful suggestions!

However, in the short term, we may not include screenshot generation support in the core microfeed codebase due to the limited 10ms processing time for free accounts on Cloudflare Pages/Worker. However, the idea could be feasible for paid accounts with a more flexible pricing model (i.e., 50ms for Bundled and 30 seconds for Unbound).

Looking ahead, we are considering a plugin system for microfeed, where users could create separate Cloudflare Worker projects to implement features like video or PDF screenshots.

[kenara]

Interesting to learn more about Workers and the new possibilities using plugins. Microfeed makes it easy to use workers without knowing anything about them!

It looks to me though like the examples I gave for image generation happen on the client, and are uploaded along with the Item just as an image selected from the filesystem in the current setup. Maybe I don't understand what's happening in the background worker-wise...

[wenbinf]

Ah, i sss.

If it were all client side processing, then i think it's doable to generate thumbnails for video / pdf to preview.

Actually, custom js client code can be added to templates without updating microfeed source code -

You can go to admin -> settings -> code editor , and write custom js code to generate video / pdf thumbnails - assuming it's all js client side code and you don't need to upload thumbnails to r2.

[kenara]

The client-side code would need to be added to the Add new item page, not the web view of the item! Sorry I wasn't clear.

I just did a quick experiment. I began the video upload process, adding a video. Then I added a random image as "Item image".

Using the tool here:
https://fraigo.github.io/online-video-thumbnail-generator/, I uploaded the same video and snapped a thumbnail. The result appears in a canvas as a Base64 encoded image. Pretty sure all that happens client-side. Using Firefox developer tools, I replaced the Cloudflare image url with the Base64 and hit Create. It worked!

Of course the image is added as an extra and appears by default under "About" and not as a thumbnail for the video but you get the idea.

The PDF image generator works the same way (client-side). The Base64 gets uploaded to Cloudflare instead of a
filesystem selected image, and gets converted to PNG.

[wenbinf]

I believe I have a clear understanding of the proposed workflow:

• On the /admin/items/new/ page, the client-side JavaScript will automatically generate a thumbnail from either a video or a PDF file.
• Both the thumbnail and the original file (video or PDF) will be uploaded to R2 as two separate files: a thumbnail PNG and either a video or a PDF.

Could you please confirm if this understanding is accurate?

This approach is definitely feasible, but there are some specific details to consider -

• At present, file upload occurs once a file is selected. Should we add an extra step to allow users to preview the thumbnail before file upload? Or would it be preferable to generate the thumbnail simultaneously with the file upload?
• Should the thumbnail be made publicly accessible via RSS/JSON/web, or restricted to the /admin interface?
• Regarding thumbnail selection, our initial approach could be to use the first frame of a video, with plans to develop a UI in subsequent versions (v2/v3/v4...) for users to select different frames.

[kenara]

Yes, @wenbinf, you've got the idea right.

For PDF (and HTML webpages too, using something like HTML2Canvas) the process could be automatic, without any action by the user. Otherwise, the item is just a link. We can do better!

Often, the first page of a PDF is colorful and professionally designed. If the user wants to go back and choose a different page, that could be possible using the editing tool mentioned earlier. A screenshot can be easy but requires more steps and getting the dimensions right. An integrated page selector tool could be an attractive plus for Microfeed...

For video thumbnails, one has to consider how they would be used. The videos I've uploaded and played with the R2 player show the first frame of the video and then download some initial part of the video. I see "206 Partial Content" as the response status.

YouTube thumbnails are taken from the midpoint of the video. Sometimes the first frame is black or blank or otherwise uninteresting.

And there can be problems showing a player instead of a thumbnail. I have a page showing multiple YouTube embedded videos. There's nothing to stop the visitor playing more than one video at a time! That's not only bad UX but it's against YouTube's TOS. We solved that using thumbnails with a 'play' gif in front, which when clicked swaps the clicked thumbnail for its player, and swaps the currently playing video for its thumbnail. Those YouTube thumbnails are in webp format so they're especially lightweight.

The video thumbnail should be part of the feed payload. RSS 2.0 has the <media:thumbnail url="..." /> element, so feedreaders can handle that. I guess JSON can include anything...