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: created thumbnail using expo-video-thumbnail #5893

Merged
merged 7 commits into from
Oct 25, 2024

Conversation

OtavioStasiak
Copy link
Contributor

@OtavioStasiak OtavioStasiak commented Oct 2, 2024

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

Basic

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

Others

  • Media auto download (disable/enable auto download of videos)
  • E2EE video
  • Tablet

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

CLAassistant commented Oct 2, 2024

CLA assistant check
All committers have signed the CLA.

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)

@OtavioStasiak OtavioStasiak force-pushed the improve-video-component branch from 4a2db10 to 073cf34 Compare October 9, 2024 21:04
@OtavioStasiak OtavioStasiak changed the title feat: crated thumbnail using expo-video-thumbnail feat: created thumbnail using expo-video-thumbnail Oct 10, 2024
@OtavioStasiak OtavioStasiak force-pushed the improve-video-component branch 2 times, most recently from 233fa4c to 2df934b Compare October 10, 2024 20:55
isReply?: boolean;
msg?: string;
}
type Image = string | null;
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
type Image = string | null;
type TThumbnailImage = string | null;

fontSize: 12
playerIcon: {
position: 'absolute',
shadowColor: themes.light.backdropColor,
Copy link
Member

Choose a reason for hiding this comment

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

light?

playerIcon: {
position: 'absolute',
shadowColor: themes.light.backdropColor,
shadowOpacity: 0.3,
Copy link
Member

Choose a reason for hiding this comment

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

use theme

@OtavioStasiak OtavioStasiak force-pushed the improve-video-component branch 2 times, most recently from 35e3dff to 300d9f2 Compare October 16, 2024 15:18
@OtavioStasiak OtavioStasiak force-pushed the improve-video-component branch from 300d9f2 to 411d7ff Compare October 18, 2024 02:13
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.

One last missing change requested and you can merge it.

@OtavioStasiak OtavioStasiak merged commit c34a110 into develop Oct 25, 2024
4 of 9 checks passed
@OtavioStasiak OtavioStasiak deleted the improve-video-component branch October 25, 2024 17:45
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