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

Chore: Update Image and link previews #27019

Merged
merged 12 commits into from
Oct 19, 2022
Merged

Chore: Update Image and link previews #27019

merged 12 commits into from
Oct 19, 2022

Conversation

filipemarins
Copy link
Contributor

@filipemarins filipemarins commented Oct 6, 2022

Proposed changes (including videos or screenshots)

  • Add message generic cover image preview component to OEmbed Links
  • Add new functionalities to URL Image preview, like click to open preview and arrows to move between images in the current chat
  • Design changes to keep the original aspect ratio of the image to prevent loss of important image pieces of information
  • Add fallback to common issues related to meta tags like og:image and others

Issue(s)

closes #26838

TC-29 TC-95 TC-171

Steps to test or reproduce

Send links with previews to see the behavior of the messages.

Image URL preview:
Current Behavior
Images being cropped and not able to click to preview

image

Expected Behavior
Images with the original aspect ratio without cropping anything and it can be clicked to preview the image

image

image

--

URL preview:
Current Behavior
image

Expected Behavior
image

Further comments

It's necessary to sync with the fuselage pull request to see all changes if the PR was not merged

Fuselage Pull Request: RocketChat/fuselage#863

@filipemarins filipemarins changed the title Update/oembed [IMPROVE] Image share preview Oct 6, 2022
@hugocostadev hugocostadev changed the title [IMPROVE] Image share preview [IMPROVE] Image previews Oct 13, 2022
@hugocostadev hugocostadev marked this pull request as ready for review October 13, 2022 12:59
@hugocostadev hugocostadev requested review from a team as code owners October 13, 2022 12:59
@filipemarins filipemarins changed the title [IMPROVE] Image previews [IMPROVE] Image previews and link preview Oct 17, 2022
@ggazzo ggazzo added the stat: ready to merge PR tested and approved waiting for merge label Oct 18, 2022
@gabriellsh gabriellsh added this to the 5.3.0 milestone Oct 19, 2022
…te/oembed

* 'develop' of github.com:RocketChat/Rocket.Chat:
  [FIX] Livechat CurrentChats infinity re-rendering (#27076)
  [NEW] Add new endpoint 'livechat/room.saveInfo' & deprecate 'livechat:saveInfo' meteor method (#26789)
@gabriellsh gabriellsh changed the title [IMPROVE] Image previews and link preview Chore: Update Image and link previews Oct 19, 2022
@codecov
Copy link

codecov bot commented Oct 19, 2022

Codecov Report

Merging #27019 (92e4e65) into develop (f6bea29) will increase coverage by 0.63%.
The diff coverage is 28.57%.

Impacted file tree graph

@@             Coverage Diff             @@
##           develop   #27019      +/-   ##
===========================================
+ Coverage    40.55%   41.19%   +0.63%     
===========================================
  Files          827      803      -24     
  Lines        18250    17826     -424     
  Branches      2031     1972      -59     
===========================================
- Hits          7402     7344      -58     
+ Misses       10552    10184     -368     
- Partials       296      298       +2     
Flag Coverage Δ
e2e 41.19% <28.57%> (+0.63%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

@kodiakhq kodiakhq bot merged commit ed5aa1c into develop Oct 19, 2022
@kodiakhq kodiakhq bot deleted the update/oembed branch October 19, 2022 14:15
MartinSchoeler pushed a commit that referenced this pull request Oct 25, 2022
Co-authored-by: Hugo Costa <[email protected]>
Co-authored-by: gabriellsh <[email protected]>
@ggazzo ggazzo mentioned this pull request Nov 1, 2022
@phriedrich
Copy link

Unfortunately I think this is the culprit for breaking the messageList views on Safari: #27172

The lookbehind used in line 60 of PreviewList.tsx doesn't work:

const normalizedUrl = imgURL.replace(/(?<!:)\/+/gm, '/');

MartinSchoeler pushed a commit that referenced this pull request Nov 28, 2022
Co-authored-by: Hugo Costa <[email protected]>
Co-authored-by: gabriellsh <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
squad: team-collab stat: ready to merge PR tested and approved waiting for merge
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Link previews of images in new message parser are cropped and can't be clicked to enlarge.
6 participants