Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-25 19:52:31 +01:00
Code Issues Releases Activity

generic file attachment embed

Browse Source
This commit is contained in:
Puyodead1 2023-09-28 10:29:24 -04:00
parent b634b2d665
commit 0311bf8ce1
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
2 changed files with 71 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/media/File.tsx Normal file
View File

@ -0,0 +1,69 @@
import { APIAttachment } from "@spacebarchat/spacebar-api-types/v9";
import styled from "styled-components";
import { bytesToSize } from "../../utils/Utils";
import Icon from "../Icon";
import Link from "../Link";
const Container = styled.div`
margin-top: 10px;
display: flex;
background-color: var(--background-secondary);
padding: 12px;
border-radius: 5px;
flex: auto;
border: 1px solid var(--background-secondary-alt);
justify-content: space-between;
box-sizing: border-box;
flex-direction: column;
min-width: 300px;
width: 420px;
@media only screen and (max-width: 420px) {
width: 100%;
}
`;
const FileInfo = styled.div`
display: flex;
`;
const FileMetadata = styled.div`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-self: center;
color: var(--text-link);
`;
const FileSize = styled.div`
color: var(--text-secondary);
font-size: 12px;
opacity: 0.8;
font-weight: var(--font-weight-medium);
text-overflow: ellipsis;
overflow: hidden;
`;
interface Props {
attachment: APIAttachment;
}
function File({ attachment }: Props) {
const url = attachment.proxy_url && attachment.proxy_url.length > 0 ? attachment.proxy_url : attachment.url;
return (
<Container>
<FileInfo>
<Icon icon="mdiFile" size={2} />
<FileMetadata>
<Link href={url} target="_blank" rel="noreferer noopener" color="var(--text-link)">
{attachment.filename}
</Link>
<FileSize>{bytesToSize(attachment.size)}</FileSize>
</FileMetadata>
</FileInfo>
</Container>
);
}
export default File;

3
src/components/messaging/MessageAttachment.tsx
View File

@ -8,6 +8,7 @@ import { calculateImageRatio, calculateScaledDimensions } from "../../utils/Mess
import { getFileDetails } from "../../utils/Utils";
import { IContextMenuItem } from "../ContextMenuItem";
import Audio from "../media/Audio";
import File from "../media/File";
import Video from "../media/Video";
import AttachmentPreviewModal from "../modals/AttachmentPreviewModal";
@ -54,7 +55,7 @@ export default function MessageAttachment({ attachment, contextMenuItems, maxWid
} else if (details.isAudio && details.isEmbeddable) {
finalElement = <Audio attachment={attachment} />;
} else {
logger.warn(`Unknown attachment type: ${attachment.content_type}`);
finalElement = <File attachment={attachment} />;
}
return (