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.

Sign up for GitHub

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

Jump to bottom

Fixed UI Inconsistencies while quoting messages #605

Merged
merged 16 commits into from
Oct 1, 2024
Merged

Fixed UI Inconsistencies while quoting messages #605

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
1cf7fc2
Fixed the issue of not displaying image, video and audio preview when…
devanshkansagra Jul 9, 2024
43079bc
Formatted using prettier
devanshkansagra Jul 9, 2024
456f7eb
Fixed lint error
devanshkansagra Jul 9, 2024
5884464
Added border in quoted attachments to look proper
devanshkansagra Jul 10, 2024
34bf50f
Fixed Lint error
devanshkansagra Jul 10, 2024
c719df9
Fixed no-shadow and no-else-return lint issue
devanshkansagra Jul 10, 2024
613239d
Implemented Recursive quoting
devanshkansagra Jul 10, 2024
fe8c398
Implemented recursive quoted message preview and fixed unwanted link …
devanshkansagra Jul 12, 2024
22362ef
CSS fix for recursive quoting in curved variants
devanshkansagra Jul 13, 2024
586850e
Fixed the curved appearence in recursive quoted messages in curved va…
devanshkansagra Jul 13, 2024
a2ed7d0
Fixed the rendering of quoted image while quoting
devanshkansagra Jul 14, 2024
9fc4908
Minor Fix
devanshkansagra Jul 14, 2024
9134057
Removed renderMessageContent and used JSX
devanshkansagra Jul 17, 2024
3c7c200
Using one prop author in attachments instead of authorName and author…
devanshkansagra Jul 17, 2024
5b8e7d4
Fixed after conflicts issue
devanshkansagra Sep 30, 2024
af4edbe
Merge branch 'develop' into fix#563
Spiral-Memory Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions packages/react/src/views/AttachmentHandler/Attachment.js
View file
Open in desktop
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) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Why introduce redundant rendering of a component? Instead, you can add the required condition where we are already using ImageAttachment, AudioAttachment, and VideoAttachment.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It was easier for me to implement like this and this is also a conditional based rendering

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
Open in desktop
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();
Copy link
Collaborator

Choose a reason for hiding this comment

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

prop name such as authorUrl here will be better.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Okay will change this

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
Open in desktop
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
Loading