Skip to content

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 <20212776+hugocostadev@users.noreply.github.com>
Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
@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 <20212776+hugocostadev@users.noreply.github.com>
Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
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