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

feat: crated thumbnail using expo-video-thumbnail #5893

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

OtavioStasiak
Copy link
Contributor

Proposed changes

Create a thumbnail to improve the video component UX.

Issue(s)

https://rocketchat.atlassian.net/browse/NATIVE-226

How to test or reproduce

  • Open the app;
  • Open a room that has a video;

Screenshots

IOS:

Before:

videoIosBefore.mov

After:

Gravacao.de.Tela.2024-10-02.as.17.52.36.mov

Android:

Before:

android_before.webm

After:

videoPrAndroid.webm

Types of changes

  • Bugfix (non-breaking change which fixes an issue)
  • Improvement (non-breaking change which improves a current function)
  • New feature (non-breaking change which adds functionality)
  • Documentation update (if none of the other choices apply)

Checklist

  • I have read the CONTRIBUTING doc
  • I have signed the CLA
  • Lint and unit tests pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works (if applicable)
  • I have added necessary documentation (if applicable)
  • Any dependent changes have been merged and published in downstream modules

Further comments

@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.


Otavio Stasiak seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

Copy link
Member

@diegolmello diegolmello left a comment

Choose a reason for hiding this comment

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

Almost there.
Lint is failing.

},
playerIcon: {
position: 'absolute',
shadowColor: '#000',
Copy link
Member

Choose a reason for hiding this comment

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

Don't use fixed colors. Everything should come from themes.

flex: 1
},
image: {
width: '100%',
Copy link
Member

Choose a reason for hiding this comment

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

Can you use flex?

encrypted?: boolean;
};

const Thumbnail = ({ url, encrypted = false }: ThumbnailProps) => {
Copy link
Member

Choose a reason for hiding this comment

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

You asked my opinion about splitting Thumbnail in a separate file.
I said we should either keep on Video file (it's a small file, so it's ok) or we create a Video folder so message/Components/Attachments is organized with one file per feature.

You create Thumbnail file without a Video folder, so Attachments now have

- CollapsibleQuote (folder)
- Image (folder) 
- AttachedActions.tsx
- Attachments.tsx
- Audio.tsx
- Reply.tsx
- Video.tsx
- Thumbnail.tsx (this one is only related to Video)

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.

3 participants