Joystream / Joystream/atlas

Introduce separate poster image for videos

Open
#3,142 5 comments 0 reactions 0 assignees View on GitHub
enhancement icebox priority:low yt-parity
Dominant language
TypeScript
Stars
103
Forks
42
PR merge metrics
No merged PRs in 30d

Description

### Problem

Currently for each video we save 2 assets:
1. Media file (video itself)
2. Thumbnail image - image used for tiles in the app, currently it's 640x360

Thumbnail image being so small creates some issues:
1. We cannot use it as a placeholder for the video player when the playback hasn't started yet. We're forced to use first video frame instead and the publisher doesn't have an option to customise that
2. Thumbnail is used as a placeholder for the embedded player when the playback hasn't started yet. This can produce pixelated image if the embedded player is bigger in size than the image itself.

As a quick workaround we could just increase the thumbnail's size but we load tens of those on the home page so it's important to optimize its size.

### Proposal

I suggest we further reduce thumbnail image size and introduce 3rd asset called "poster image" which can be a bit bigger (like 1280x720). Then we can use poster image as a placeholder player state for both regular and embedded video player. This change is purely under the hood - the UX is exactly the same. User still selects a single image, we just crop it 2 times, for thumbnail and poster image and then we upload all 3 assets after publishing.

### Impact
1. Atlas - Low, we update the publishing flow to prepare one additional image and then we use it in the video player
2. QN - Low, we need to slightly modify the mappings to handle this 3rd asset and also include it in the `VideoMetadata` protobuf.
3. _Users_ - minimal, you only pay slightly bigger fee for one additional asset (marginal change) and need to upload one additional file (super small)

Feature can be implemented independently by the atlas dev team

Contributor guide

Open the contributing guide

Research direction

Start by tracing the Atlas video publishing flow and the QN mappings for VideoMetadata. The work is done when publishing creates thumbnail, media, and poster assets, and both regular and embedded video players use the poster image as their placeholder.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
full-stack
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.