Skip to content

Commit

Permalink
Revert "Fixed UI Inconsistencies while quoting messages (#605)"
Browse files Browse the repository at this point in the history 
This reverts commit d84157f.
  • Loading branch information
@Spiral-Memory
Spiral-Memory authored Oct 1, 2024
1 parent d84157f commit cfc6c3e
Show file tree
Hide file tree
Showing 7 changed files with 64 additions and 584 deletions.
41 changes: 0 additions & 41 deletions packages/react/src/views/AttachmentHandler/Attachment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,12 @@ 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 @@ -28,18 +23,15 @@ 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 @@ -52,39 +44,6 @@ 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: 12 additions & 123 deletions packages/react/src/views/AttachmentHandler/AudioAttachment.js
View file
Original file line number Diff line number Diff line change
@@ -1,129 +1,18 @@
import React, { useContext } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@emotion/react';
import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
import { Box } from '@embeddedchat/ui-elements';
import AttachmentMetadata from './AttachmentMetadata';
import RCContext from '../../context/RCInstance';

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>
);
};
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>
);

export default AudioAttachment;

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

const ImageAttachment = ({
attachment,
host,
type,
author,
variantStyles = {},
}) => {
const { RCInstance } = useContext(RCContext);
const ImageAttachment = ({ attachment, host, variantStyles = {} }) => {
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;
padding: 0.5rem;
`,
(type ? variantStyles.pinnedContainer : '') ||
css`
${type === 'file'
? `border: 2px solid ${theme.colors.border};`
: ''}
`,
]}
css={css`
cursor: pointer;
border-radius: inherit;
line-height: 0;
`}
>
{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 @@ -85,81 +36,6 @@ const ImageAttachment = ({
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 cfc6c3e

Please sign in to comment.