Skip to content

Generate poster thumbnails for reels (<name>_thumb.png) and use on the player - #11

Merged
ralyodio merged 1 commit into
masterfrom
feat/video-thumbnails
Jul 10, 2026
Merged

Generate poster thumbnails for reels (<name>_thumb.png) and use on the player#11
ralyodio merged 1 commit into
masterfrom
feat/video-thumbnails

Conversation

@ralyodio

Copy link
Copy Markdown
Collaborator

What

When a reel is uploaded, generate a poster thumbnail and use it as the <video poster> so the gallery shows a still frame instead of a black box.

  • On upload, ffmpeg extracts a frame (~1s in, 640px wide) into <name>_thumb.png next to the video on the DATA_DIR volume.
  • Served at GET /api/media/[id]/thumb; mediaView exposes a thumb URL.
  • Used as poster on the <video> in both the public /videos gallery and the dashboard Videos tab.
  • Deleting a reel now also removes its thumbnail.
  • Committed posters for the two built-in brand reels (public/videos/*_thumb.png), used as their posters too.

Notes

  • Generation is best-effort: if ffmpeg is unavailable the upload still succeeds (poster just null).
  • Dockerfile installs ffmpeg in the runtime image (needed for generation on Railway).

Verified

Built clean, then ran end-to-end against a local server with an isolated DATA_DIR:

  • upload a real 9 MB mp4 → 201, response thumb: /api/media/<id>/thumb, and <id>_thumb.png (640×360) written next to <id>.mp4
  • GET /api/media/<id>/thumb → 200 image/png
  • /videos HTML emits poster="…/thumb" for the upload and poster="/videos/…_thumb.png" for built-ins (both served 200)
  • delete → both .mp4 and _thumb.png removed

🤖 Generated with Claude Code

On upload, ffmpeg extracts a poster frame into <name>_thumb.png next to the
video on the DATA_DIR volume; it's served at /api/media/[id]/thumb and set as
the <video poster> on the /videos gallery and the dashboard. Generation is
best-effort — if ffmpeg is missing the upload still succeeds with no poster.
Deleting a reel also removes its thumbnail. Committed posters for the two
built-in brand reels too.

- lib/media.ts: thumbFilename/generateThumbnail/hasThumb (ffmpeg, 640px wide)
- POST /api/media generates the thumb; DELETE removes it; mediaView exposes it
- GET /api/media/[id]/thumb serves the PNG
- /videos + dashboard set <video poster>
- Dockerfile: install ffmpeg in the runtime image

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown

vu1nz Security Review

0 finding(s) in PR #?

No security issues found.

@ralyodio
ralyodio merged commit 7dc9c81 into master Jul 10, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant