coracle/flotilla
1
6
Fork 23
Code Issues 42 Pull Requests 2 Actions Packages Projects 5 Releases Wiki Activity

73-video-thumbnails #142

Merged
hodlbod merged 3 commits from priyanshu_bharti/flotilla:73-video-thumbnails into dev 2026-04-08 16:07:12 +00:00
Conversation 12 Commits 3 Files Changed 3
+25 -2
priyanshu_bharti commented 2026-04-03 17:09:02 +00:00
Contributor
Copy Link
Copy Source

This PR implements video thumbnails for .mov, .webm, and .mp4 files in the ContentLinkBlock component.

Changes:

  • Added the poster attribute to the <video> tag.
  • Set the poster source to {url}#t=1 to capture a clear preview frame at the 1-second mark.
  • Verified locally that thumbnails are now correctly displayed instead of a black/empty box.

Closes #73

This PR implements video thumbnails for `.mov`, `.webm`, and `.mp4` files in the `ContentLinkBlock` component. Changes: - Added the `poster` attribute to the `<video>` tag. - Set the poster source to `{url}#t=1` to capture a clear preview frame at the 1-second mark. - Verified locally that thumbnails are now correctly displayed instead of a black/empty box. Closes #73
Screenshot from 2026-04-03 22-38-13.png
174 KiB
Screenshot from 2026-04-03 22-38-13.png
priyanshu_bharti marked the pull request as work in progress 2026-04-03 17:39:42 +00:00
hodlbod commented 2026-04-03 18:31:49 +00:00
Owner
Copy Link
Copy Source

@priyanshu_bharti have you tested this on Android? I don't think it'll work there. Thumbnails work ok on web, but Android has a hard time with them. I think what we'll need to do is create a microservice that can be run independently and which can process video thumnails. We can then use an env var to request thumbnails from the service when the user is on android.

@priyanshu_bharti have you tested this on Android? I don't think it'll work there. Thumbnails work ok on web, but Android has a hard time with them. I think what we'll need to do is create a microservice that can be run independently and which can process video thumnails. We can then use an env var to request thumbnails from the service when the user is on android.
priyanshu_bharti commented 2026-04-03 20:46:29 +00:00
Author
Contributor
Copy Link
Copy Source

@hodlbod
Thank you for the detailed suggestion! ✅

I've implemented the video thumbnail microservice exactly as you mentioned so that it works independently and handles Android support properly.

  • Latest commit: feat: add video thumbnail microservice for Android support (#73)
@hodlbod Thank you for the detailed suggestion! ✅ I've implemented the **video thumbnail microservice** exactly as you mentioned so that it works independently and handles Android support properly. - Latest commit: `feat: add video thumbnail microservice for Android support (#73)`
priyanshu_bharti marked the pull request as ready for review 2026-04-03 20:46:38 +00:00
hodlbod commented 2026-04-04 14:23:27 +00:00
Owner
Copy Link
Copy Source

Thanks, this looks good! I've gone ahead and created a new repository for this project at https://gitea.coracle.social/coracle/vthumbs. Can you update this PR to just be the usage directions for flotilla, and do the following for the new repository:

  • Add a Dockerfile
  • Add a gitea build workflow (look at flotilla's .gitea directory for an example)
  • Remove the reference to flotilla in the readme, explain how to configure the environment
Thanks, this looks good! I've gone ahead and created a new repository for this project at https://gitea.coracle.social/coracle/vthumbs. Can you update this PR to just be the usage directions for flotilla, and do the following for the new repository: - Add a Dockerfile - Add a gitea build workflow (look at flotilla's .gitea directory for an example) - Remove the reference to flotilla in the readme, explain how to configure the environment
priyanshu_bharti commented 2026-04-04 16:59:45 +00:00
Author
Contributor
Copy Link
Copy Source

@hodlbod
Thanks for creating the new repo!
I'll update this PR to only keep the usage instructions for flotilla.
Moving the microservice code to oracle/vthumbs and will add:
Dockerfile
Gitea build workflow
Updated README (removing flotilla references + environment config)
Will push the changes shortly. 👍

@hodlbod Thanks for creating the new repo! I'll update this PR to only keep the usage instructions for flotilla. Moving the microservice code to oracle/vthumbs and will add: Dockerfile Gitea build workflow Updated README (removing flotilla references + environment config) Will push the changes shortly. 👍
hodlbod commented 2026-04-07 17:46:42 +00:00
Owner
Copy Link
Copy Source

Hey @priyanshu_bharti are you still working on this? The diff only includes the env var and there aren't any open PRs on vthumbs

Hey @priyanshu_bharti are you still working on this? The diff only includes the env var and there aren't any open PRs on vthumbs
priyanshu_bharti commented 2026-04-07 17:50:17 +00:00
Author
Contributor
Copy Link
Copy Source

hii @hodlbod
Yes, I am working on it and raise the pr shortly under new repo

hii @hodlbod Yes, I am working on it and raise the pr shortly under new repo
👍 1
priyanshu_bharti commented 2026-04-07 19:48:53 +00:00
Author
Contributor
Copy Link
Copy Source

Hi @hodlbod ,
Done! ✅

Raised a complete PR in oracle/vthumbs repo with Dockerfile, Gitea workflow, and proper README.
Updated this Flotilla PR to keep only the usage instructions.

Please review both when possible.
Thanks! 👍

Hi @hodlbod , Done! ✅ Raised a complete PR in oracle/vthumbs repo with Dockerfile, Gitea workflow, and proper README. Updated this Flotilla PR to keep only the usage instructions. Please review both when possible. Thanks! 👍
hodlbod commented 2026-04-07 19:52:13 +00:00
Owner
Copy Link
Copy Source

I know you had built an implementation which used the thumbnail service, but it looks like that's missing now, this is only a README update.

I know you had built an implementation which used the thumbnail service, but it looks like that's missing now, this is only a README update.
priyanshu_bharti commented 2026-04-07 20:49:19 +00:00
Author
Contributor
Copy Link
Copy Source

Hi @hodlbod , thanks for flagging this. You were right, I had accidentally force-pushed a README-only state. I have
now restored the Flotilla implementation that uses the thumbnail service on Android via VITE_THUMBNAIL_URL, and
this PR again contains the integration changes. I will handle the separate vthumbs repository updates in another PR.

Hi @hodlbod , thanks for flagging this. You were right, I had accidentally force-pushed a README-only state. I have now restored the Flotilla implementation that uses the thumbnail service on Android via VITE_THUMBNAIL_URL, and this PR again contains the integration changes. I will handle the separate vthumbs repository updates in another PR.
hodlbod commented 2026-04-08 16:06:38 +00:00
Owner
Copy Link
Copy Source

Just tested this, it all works and looks good, the one thing that still needs to be done is to add caching to the vthumbs project. A plain in-memory cache with an expiration time of maybe 1 hour is fine for now. To cut down on memory requirements, you can set the quality of the thumbnail to something pretty conservative, maybe 65%.

Just tested this, it all works and looks good, the one thing that still needs to be done is to add caching to the vthumbs project. A plain in-memory cache with an expiration time of maybe 1 hour is fine for now. To cut down on memory requirements, you can set the quality of the thumbnail to something pretty conservative, maybe 65%.
👍 1
hodlbod commented 2026-04-08 16:06:52 +00:00
Owner
Copy Link
Copy Source

I'll go ahead and merge this, go ahead and open a new PR on the vthumbs project.

I'll go ahead and merge this, go ahead and open a new PR on the vthumbs project.
👍 1
hodlbod closed this pull request 2026-04-08 16:06:52 +00:00
hodlbod reopened this pull request 2026-04-08 16:07:00 +00:00
hodlbod added 3 commits 2026-04-08 16:07:08 +00:00
feat: generate video thumbnails using poster attribute (#73) da269b4309
feat: adjust video poster offset to 1s for better thumbnail 37117ef6a3
feat: add video thumbnail microservice for Android support (#73) b8e949b1d4 
- Use preload="metadata" on web for native browser thumbnails
- Add VITE_THUMBNAIL_URL env var for configurable thumbnail service
- On Android, use thumbnail microservice to generate poster images
- Add standalone Express + ffmpeg thumbnail service in services/video-thumbnails/
hodlbod force-pushed 73-video-thumbnails from 075c2f4cb0 to b8e949b1d4 2026-04-08 16:07:08 +00:00 Compare
hodlbod merged commit 4c19ee823b into dev 2026-04-08 16:07:12 +00:00
hodlbod deleted branch 73-video-thumbnails 2026-04-08 16:07:12 +00:00
hodlbod referenced this issue from a commit 2026-04-08 16:07:13 +00:00
73-video-thumbnails (#142)
priyanshu_bharti commented 2026-04-08 16:57:30 +00:00
Author
Contributor
Copy Link
Copy Source

Thanks @hodlbod ,I will raise the PR for vthumbs soon when I am done.

Thanks @hodlbod ,I will raise the PR for vthumbs soon when I am done.
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
design
For issues related to design work. Development should be done in another issue and refer back to this one.
 dev
Issues related to development work
 easy
Issues that can be executed on by new contributors
 idea
For issues that aren't yet actionable
 priority
For issues related to high priority features and bugs
 usability
Issues that have to be validated with real live human beings.
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
hodlbod (hodlbod) mplorentz (Matt Lorentz) sakshamjain (Saksham Jain) sondreb triesap userAdityaa (Aditya Chaudhary)
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: coracle/flotilla#142
Delete Branch "priyanshu_bharti/flotilla:73-video-thumbnails"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?