Skip to content

Commit

Permalink
Fixed UI Inconsistencies while quoting messages (#605)
Browse files Browse the repository at this point in the history 
* Fixed the issue of not displaying image, video and audio preview when the message is quoted, also implemented the preview of image, audio and video attachment while quoting

* Formatted using prettier

* Fixed lint error

* Added border in quoted attachments to look proper

* Fixed Lint error

* Fixed no-shadow and no-else-return lint issue

* Implemented Recursive quoting

* Implemented recursive quoted message preview and fixed unwanted link display while quoting

* CSS fix for recursive quoting in curved variants

* Fixed the curved appearence in recursive quoted messages in curved variants

* Fixed the rendering of quoted image while quoting

* Minor Fix

* Removed renderMessageContent and used JSX

* Using one prop author in attachments instead of authorName and authorIcon

* Fixed after conflicts issue

---------

Co-authored-by: Zishan Ahmad <zishan.barun@gmail.com>
  • Loading branch information
@devanshkansagra @Spiral-Memory
devanshkansagra and Spiral-Memory authored Oct 1, 2024
1 parent 0aafed8 commit d84157f
Show file tree
Hide file tree
Showing 7 changed files with 584 additions and 64 deletions.
41 changes: 41 additions & 0 deletions packages/react/src/views/AttachmentHandler/Attachment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,17 @@ import VideoAttachment from './VideoAttachment';
import TextAttachment from './TextAttachment';

const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
const author = {
authorIcon: attachment?.author_icon,
authorName: attachment?.author_name,
};
if (attachment && attachment.audio_url) {
return (
<AudioAttachment
attachment={attachment}
host={host}
variantStyles={variantStyles}
author={author}
/>
);
}
Expand All @@ -23,15 +28,18 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
attachment={attachment}
host={host}
variantStyles={variantStyles}
author={author}
/>
);
}
if (attachment && attachment.image_url) {
return (
<ImageAttachment
attachment={attachment}
type={type}
host={host}
variantStyles={variantStyles}
author={author}
/>
);
}
Expand All @@ -44,6 +52,39 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
/>
);
}
if (attachment && attachment.attachments[0]?.image_url) {
return (
<ImageAttachment
attachment={attachment.attachments[0]}
host={host}
type={attachment.attachments[0].type}
variantStyles={variantStyles}
author={author}
/>
);
}
if (attachment && attachment.attachments[0]?.audio_url) {
return (
<AudioAttachment
attachment={attachment.attachments[0]}
host={host}
type={attachment.attachments[0].type}
variantStyles={variantStyles}
author={author}
/>
);
}
if (attachment && attachment.attachments[0]?.video_url) {
return (
<VideoAttachment
attachment={attachment.attachments[0]}
host={host}
type={attachment.attachments[0].type}
variantStyles={variantStyles}
author={author}
/>
);
}
return (
<Box
css={css`
Expand Down
135 changes: 123 additions & 12 deletions packages/react/src/views/AttachmentHandler/AudioAttachment.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,129 @@
import React from 'react';
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { Box } from '@embeddedchat/ui-elements';
import { css } from '@emotion/react';
import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
import AttachmentMetadata from './AttachmentMetadata';
import RCContext from '../../context/RCInstance';

const AudioAttachment = ({ attachment, host, variantStyles }) => (
<Box>
<AttachmentMetadata
attachment={attachment}
url={host + (attachment.title_url || attachment.audio_url)}
variantStyles={variantStyles}
/>
<audio src={host + attachment.audio_url} width="100%" controls />
</Box>
);
const AudioAttachment = ({ attachment, host, type, author, variantStyles }) => {
const { RCInstance } = useContext(RCContext);
const { colors } = useTheme();
const getUserAvatarUrl = (icon) => {
const instanceHost = RCInstance.getHost();
const URL = `${instanceHost}${icon}`;
return URL;
};
const { authorIcon, authorName } = author;
return (
<Box>
<Box
css={[
css`
line-height: 0;
border-radius: inherit;
padding: 0.5rem;
`,
(type ? variantStyles.pinnedContainer : '') ||
css`
${type === 'file' ? `border: 3px solid ${colors.border};` : ''}
`,
]}
>
{type === 'file' ? (
<>
<Box
css={[
css`
display: flex;
gap: 0.3rem;
align-items: center;
`,
variantStyles.textUserInfo,
]}
>
<Avatar
url={getUserAvatarUrl(authorIcon)}
alt="avatar"
size="1.2em"
/>
<Box>@{authorName}</Box>
</Box>
</>
) : (
''
)}
<AttachmentMetadata
attachment={attachment}
url={host + (attachment.title_url || attachment.audio_url)}
variantStyles={variantStyles}
/>
<audio src={host + attachment.audio_url} width="100%" controls />

{attachment.attachments ? (
<Box>
<Box
css={[
css`
line-height: 0;
border-radius: inherit;
padding: 0.5rem;
`,
(attachment.attachments[0].type
? variantStyles.pinnedContainer
: variantStyles.quoteContainer) ||
css`
${attachment.attachments[0].type === 'file'
? `border: 3px solid ${colors.border};`
: ''}
`,
]}
>
{attachment.attachments[0].type === 'file' ? (
<>
<Box
css={[
css`
display: flex;
gap: 0.3rem;
align-items: center;
`,
variantStyles.textUserInfo,
]}
>
<Avatar
url={getUserAvatarUrl(attachment.author_icon)}
alt="avatar"
size="1.2em"
/>
<Box>@{attachment.author_name}</Box>
</Box>
</>
) : (
''
)}
<AttachmentMetadata
attachment={attachment.attachments[0]}
url={
host +
(attachment.attachments[0].title_url ||
attachment.attachments[0].audio_url)
}
variantStyles={variantStyles}
/>
<audio
src={host + attachment.attachments[0].audio_url}
width="100%"
controls
/>
</Box>
</Box>
) : (
<></>
)}
</Box>
</Box>
);
};

export default AudioAttachment;

Expand Down
150 changes: 137 additions & 13 deletions packages/react/src/views/AttachmentHandler/ImageAttachment.js
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,81 @@
import React, { useState } from 'react';
import React, { useState, useContext } from 'react';
import { css } from '@emotion/react';
import PropTypes from 'prop-types';
import { Box } from '@embeddedchat/ui-elements';
import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
import AttachmentMetadata from './AttachmentMetadata';
import ImageGallery from '../ImageGallery/ImageGallery';
import RCContext from '../../context/RCInstance';

const ImageAttachment = ({ attachment, host, variantStyles = {} }) => {
const ImageAttachment = ({
attachment,
host,
type,
author,
variantStyles = {},
}) => {
const { RCInstance } = useContext(RCContext);
const [showGallery, setShowGallery] = useState(false);
const getUserAvatarUrl = (icon) => {
const instanceHost = RCInstance.getHost();
const URL = `${instanceHost}${icon}`;
return URL;
};
const extractIdFromUrl = (url) => {
const match = url.match(/\/file-upload\/(.*?)\//);
return match ? match[1] : null;
};

const { theme } = useTheme();

const { authorIcon, authorName } = author;

return (
<Box css={variantStyles.imageAttachmentContainer}>
<AttachmentMetadata
attachment={attachment}
url={host + (attachment.title_link || attachment.image_url)}
variantStyles={variantStyles}
/>
<Box
onClick={() => setShowGallery(true)}
css={css`
cursor: pointer;
border-radius: inherit;
line-height: 0;
`}
css={[
css`
cursor: pointer;
border-radius: inherit;
line-height: 0;
padding: 0.5rem;
`,
(type ? variantStyles.pinnedContainer : '') ||
css`
${type === 'file'
? `border: 2px solid ${theme.colors.border};`
: ''}
`,
]}
>
{type === 'file' ? (
<>
<Box
css={[
css`
display: flex;
gap: 0.3rem;
align-items: center;
`,
variantStyles.textUserInfo,
]}
>
<Avatar
url={getUserAvatarUrl(authorIcon)}
alt="avatar"
size="1.2em"
/>
<Box>@{authorName}</Box>
</Box>
</>
) : (
''
)}
<AttachmentMetadata
attachment={attachment}
url={host + (attachment.title_link || attachment.image_url)}
variantStyles={variantStyles}
/>
<img
src={host + attachment.image_url}
style={{
Expand All @@ -36,6 +85,81 @@ const ImageAttachment = ({ attachment, host, variantStyles = {} }) => {
borderBottomRightRadius: 'inherit',
}}
/>
{attachment.attachments ? (
<Box css={variantStyles.imageAttachmentContainer}>
<Box
onClick={() => setShowGallery(true)}
css={[
css`
cursor: pointer;
border-radius: inherit;
line-height: 0;
padding: 0.5rem;
`,
(attachment.attachments[0].type
? variantStyles.pinnedContainer
: variantStyles.quoteContainer) ||
css`
${attachment.attachments[0].type === 'file'
? `border: 2px solid ${theme.colors.border};`
: ''}
`,
]}
>
{attachment.attachments[0].type === 'file' ? (
<>
<Box
css={[
css`
display: flex;
gap: 0.3rem;
align-items: center;
`,
variantStyles.textUserInfo,
]}
>
<Avatar
url={getUserAvatarUrl(attachment.author_icon)}
alt="avatar"
size="1.2em"
/>
<Box>@{attachment.author_name}</Box>
</Box>
</>
) : (
''
)}
<AttachmentMetadata
attachment={attachment.attachments[0]}
url={
host +
(attachment.attachments[0].title_link ||
attachment.attachments[0].image_url)
}
variantStyles={variantStyles}
/>
<img
src={host + attachment.attachments[0].image_url}
style={{
maxWidth: '100%',
objectFit: 'contain',
borderBottomLeftRadius: 'inherit',
borderBottomRightRadius: 'inherit',
}}
/>
</Box>
{showGallery && (
<ImageGallery
currentFileId={extractIdFromUrl(
attachment.attachments[0].title_link
)}
setShowGallery={setShowGallery}
/>
)}
</Box>
) : (
<></>
)}
</Box>
{showGallery && (
<ImageGallery
Expand Down
Loading

0 comments on commit d84157f

Please sign in to comment.