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

fix: Improve GIF handling and display consistency in chat messages #984

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

Conversation

KrishnaShuk
Copy link

@KrishnaShuk KrishnaShuk commented Feb 12, 2025

This PR addresses issues with GIF rendering and display consistency in chat messages.

1.Enhanced GIF detection
2.Implemented consistent sizing
3.Fixed animation handling
4.Improved URL handling

Acceptance Criteria fulfillment

  • GIFs display consistently at 200x200px
  • GIF animations play correctly
  • Both uploaded and external GIFs work
  • Error handling works for invalid GIF URLs

Fixes #982

Before

Screenshot from 2025-02-12 16-29-26

After

Screenshot from 2025-02-12 16-55-22

PR Test Details

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-<pr_number> after approval. Contributors are requested to replace <pr_number> with the actual PR number.

@CLAassistant
Copy link

CLAassistant commented Feb 12, 2025

CLA assistant check
All committers have signed the CLA.

@KrishnaShuk KrishnaShuk force-pushed the fix/improve-gif-url-handling branch from c6a362c to 29751df Compare February 13, 2025 05:34
@Spiral-Memory Spiral-Memory added the nudge minor tweaks suggested label Mar 1, 2025
@KrishnaShuk
Copy link
Author

@Spiral-Memory I have made all the required changes and tested it. You can see in my latest commit.

@KrishnaShuk
Copy link
Author

Sorry removing it asap!

@Spiral-Memory
Copy link
Collaborator

N make sure you format your code with prettier extension otherwise format check workflow will fail

@KrishnaShuk
Copy link
Author

Removed all console logs and fixed the formatting of the files.

@KrishnaShuk
Copy link
Author

Hey @Spiral-Memory! I have made the required changes. You can merge this PR.

@Spiral-Memory Spiral-Memory added testing and removed nudge minor tweaks suggested labels Mar 14, 2025
if (url && url.includes('/file-upload/')) {
const fullUrl = url.startsWith('http')
? url
: `${host}/file-upload/${url.split('/file-upload/')[1]}`;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Can you explain the reasoning behind checking whether http is present, then extracting the full URL and everything else
Can't we do it without these manual interventions

Copy link
Author

Choose a reason for hiding this comment

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

The idea here was to handle two possible cases: absolute URLs (like https://example.com/file-upload/123) that are good to go as-is, and relative ones (like /file-upload/123) that need the host tacked on to work. I check for http to figure out which case I’m dealing with, so I don’t accidentally double up the host on an absolute URL or leave a relative one incomplete. The splitting part just grabs the file ID after /file-upload/ to rebuild the URL properly.
we could just assume everything’s relative and put host on front, though that’d break if an absolute URL slips in.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Why there will be a difference ? I mean once the image is uploaded, it will have any one of these URLs right ? Have you observed anything that in what cases, there could be a chance of absolute / relative URLs

Copy link
Author

Choose a reason for hiding this comment

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

No i haven't checked the cases. I have just guessed it. And you are right that once the image is uploaded it will have any one of these URLs. Should i make a commit in which url is put out directly without any condition?

Copy link
Collaborator

Choose a reason for hiding this comment

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

Yeah, check which kind of url is present after the upload and based on it, just use it

Copy link
Author

Choose a reason for hiding this comment

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

The url is of relative type. Sould i totally remove the conditions logic or use this instead -> const fullUrl = ${host}/file-upload/${url.split('/file-upload/')[1]};

Copy link
Collaborator

Choose a reason for hiding this comment

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

Sure, pls go ahead with the new change and once you're done, request a re-review

Thanks a lot for the contribution 😌😊

Copy link
Author

Choose a reason for hiding this comment

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

Thanks a lot @Spiral-Memory! These conversations surely help me in leveling up.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: GIF File type can not be detected
3 participants