jakubjanczyk commented 2 years ago

Problem/Feature

Embedded video in Message Card

Added possibility to embed Video in a Message, by setting provided iframe HTML code on the MessageCard. There is a handler to not show a Message until the video iframe is fully loaded.

This can be tested by opening newly added stories: MessageCard -> With video and With iframely video url.

The second story is added for the purpose of showing difference between embedding video directly from service URL vs. using Iframely hosted ones. In the second case, waiting for video to load before showing a Message, and you can observe a moment where empty element is visible on the Message (which should not happen on the first story). This is something that has be dealt with outside of HSDS, but I'm leaving those two here so we have easy comparison.

Screenshot from 2022-04-27 16-37-20

New icon

Additionally, new icon play-video-large has been added to the set of icons - this would be used in Messages builder.

Screenshot from 2022-04-27 16-37-43

Attachment custom content

Again, for the purpose of Message usage I modified Attachment component so that it can take custom content to be render within the container. Here can be find example of what we need to render in the end: https://www.figma.com/file/WiSBxBAFZgk1iX4RFdF2hl/WIP%2F-Video-Support-for-Messages?node-id=28%3A12711

I've figured out it doesn't make much sense to provide some prefix or whatever properties, but just let user set the content they need in given case.

There is a story for this change: Attachment -> Preview theme with custom content

Screenshot from 2022-04-28 11-14-11

Guidelines

Make sure the pull request:

[ ] Follows the established folder/file structure
[ ] Adds unit tests
[ ] If it is a refactor or change to an existing component, have you verified it won't break existing Cypress tests or have you updated them?
[ ] Did you verify some accessibility (a11y) basics?
[ ] Adds/updates stories. Guidelines
[ ] Adds/updates documentation (ie proptypes) Guidelines
[ ] Has it been tested in Help Scout's supported browsers?
[ ] Requests review from designer of the feature
[ ] Add label (bug? feature?)

jakubjanczyk commented 2 years ago

@Charca @tinkertrain just remembered that there is one other change I need to make to Attachment component in HSDS for Messages, so I'm marking this one as WIP for now :)