Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 Improve thumbnail upload; force 16:9 aspect ratio and fix overflow issues #865

Merged
merged 20 commits into from
Aug 26, 2024

Conversation

xannyxs
Copy link
Contributor

@xannyxs xannyxs commented Aug 13, 2024

Description

To prevent overflow and future complications, this PR implements a forced resize of images to 1280x720 pixels (16:9 ratio). If the original image is smaller than this size, black bars are added to maintain the aspect ratio. This approach aligns with YouTube's thumbnail guidelines.

Type of change

  • Bug fix (non-breaking change which fixes an issue)

Implementation Details

  • Images are resized to 1280x720 pixels (16:9 ratio)
  • Black bars are added if the original image of the thumbnail is smaller / bigger than 1280x720
  • This change addresses overflow issues and potential future complications
  • Better error feedback for the user
  • Give the ImageUpload component a Dropzone
  • Made the size of the file smaller

Future Work

Further in-depth work on this feature will be addressed in issue #868

Reference

The approach taken is based on YouTube's guidelines:

  • Make your thumbnail 1280 by 720 pixels (16:9 ratio)
  • Ensure that your thumbnail is less than 2MB
  • Use a JPG, PNG, or GIF file format

@xannyxs xannyxs self-assigned this Aug 13, 2024
Copy link

vercel bot commented Aug 13, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
streameth-platform ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 26, 2024 1:36pm

@xannyxs xannyxs marked this pull request as draft August 13, 2024 18:18
@xannyxs xannyxs linked an issue Aug 13, 2024 that may be closed by this pull request
@xannyxs
Copy link
Contributor Author

xannyxs commented Aug 13, 2024

Just noticing that uploading a thumbnail does not actually work before uploading a video

@xannyxs xannyxs requested a review from greatsamist August 15, 2024 15:36
@xannyxs xannyxs marked this pull request as ready for review August 15, 2024 15:37
@xannyxs xannyxs changed the title Improve thumbnail upload; force 16:9 aspect ratio and fix overflow issues 🐛 Improve thumbnail upload; force 16:9 aspect ratio and fix overflow issues Aug 21, 2024
@xannyxs xannyxs marked this pull request as ready for review August 21, 2024 10:52
@xannyxs xannyxs marked this pull request as ready for review August 22, 2024 09:49
Copy link
Contributor

@greatsamist greatsamist left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@xannyxs
Copy link
Contributor Author

xannyxs commented Aug 26, 2024

Found an new error in the tests. Will create an issue of it for another PR

@xannyxs xannyxs merged commit 45d8018 into develop Aug 26, 2024
5 of 7 checks passed
@xannyxs xannyxs deleted the fix/minor-fixes branch August 26, 2024 14:15
xannyxs added a commit that referenced this pull request Aug 28, 2024
# Pull Request Info

## Description

My last PR (#865) improved the image uploading UX. Those fixes were
apparently breaking the forms. I reread the documentation of
`react-dropzone` and hopefully found a solution. The automatic and
manual tests work as they normally do.

Fixes #902

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)
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.

[BUG] Thumbnail Upload Layout Issues
2 participants