Feat 1322 Initial Prototype Code Review

[kntndrsn]

Description

This is a prototype of the Thumbnail/Preview selection from video frame feature documented in #1322. I need some initial feedback on the design to verify this aligns with your expectations.

I've created a new ThumbnailManagerComponent with a FrameSelectorComponent component.

The Thumbnail Manager has two features:

• Upload image - References existing file upload mechanism to update thumbnail image.
• Select from video - Loads frame selector where user can select the frame they wish to use and click Use frame. At the moment, this calls a PUT api to update. This updates the thumbnail and preview immediately instead of waiting for the overall Update operation. This will be corrected, but I want to get alignment first that I've setup the controller and core lib code meeting your expectation.

On the back-end, I've implemented a new controller for thumbnails. Currently I just have a PUT method that gets the image and updates. Another way we could do would be to implement a GET that could return images in a compatible format to preview for the user, then update the thumbnail when the Update button for the page is clicked.

Related issues

#1322

Has this been tested?

• 👍 yes, I added tests to the test suite
• 💭 no, because this PR is a draft and still needs work
• 🙅 no, because this PR does not update server code
• 🙋 no, because I need help

Screenshots

[kntndrsn]

@Chocobozzz Hello. I've submitted to get some feedback on the design. Would appreciate your guidance as this is my first contribution.

[kntndrsn]

@Chocobozzz Hello. Just following up to see if there is anything more I can do on this request or if I'm headed in the right direction. Thanks.

[Chocobozzz]

Hi @kntndrsn and sorry for the late review.

Can we imagine using the embed player instead of using directly video.js? Then we can use the embed api where we can add a method that captures a video frame using a canvas (example: https://stackoverflow.com/questions/70162503/get-frame-from-video-using-js) and send it back to the parent as an image URI (embed api code is here: https://github.com/Chocobozzz/PeerTube/blob/develop/client/src/standalone/videos/embed-api.ts)

With this method everything is built in the client so you don't need to add another route to generate the thumbnail on server side + we don't have to maintain another video.js instantiation and just use the classic peertube embed.

[kntndrsn]

@Chocobozzz Thank you for the feedback. I can try this out to see how it goes.

I did experiment with grabbing a frame from the video but didn't go that way for two reasons.

1. Small screen sizes like mobile devices will have a small viewport resulting in a lower resolution image. However, I realize that may be a niche situation, so if it works well enough, maybe that is fine.
2. The other feature requested in Choose thumbnail/preview from a video frame #1322 was to generate some default suggested frames from which the user can select. That would require automatically scrubbing through the video to fetch.

Those points aside, this approach could simplify the code significantly, so I'll set it up in a fresh branch to see how it could be.

[lcaylat]

Hi,
This development is an excellent idea. This would simplify setting up a custom thumbnail. I don't know how to code but I'm willing to test it as soon as you have a piece of installable code.
Thank you both for your commitment.
(Google Traduction)

[Chocobozzz]

@kntndrsn Do you have any blocking points to close this PR?

[kntndrsn]

No issue at this point. I have a new branch for the alternative approach recommended. I'll submit a new PR from that location. I just didn't want to leave this one hanging.