Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-22 02:12:38 +01:00
Code Issues Releases Activity

fix previews for non-image file types

Browse Source
This commit is contained in:
Puyodead1 2023-09-02 22:53:14 -04:00
parent b1a6f318be
commit 2be41a1e6b
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
1 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/messaging/AttachmentUploadList.tsx
View File

@ -1,3 +1,4 @@
import React from "react";
import styled from "styled-components";
import Icon from "../Icon";
import IconButton from "../IconButton";
@ -24,9 +25,10 @@ const InnerWrapper = styled.div`
`;
const MediaContainer = styled.div`
position: relative;
margin-top: auto;
min-height: 0;
display: flex;
justify-content: center;
`;
const Image = styled.img`
@ -35,6 +37,13 @@ const Image = styled.img`
object-fit: contain;
`;
const Video = styled.video`
border-radius: 3px;
max-width: 100%;
object-fit: contain;
height: 100%;
`;
const ActionsContainer = styled.div`
position: absolute;
top: 0;
@ -69,15 +78,23 @@ interface Props {
}
function AttachmentUploadList({ file, remove }: Props) {
// create a preview url for the file
const previewUrl = URL.createObjectURL(file);
const generatePreviewElement = React.useCallback(() => {
const previewUrl = URL.createObjectURL(file);
if (file.type.startsWith("image")) return <Image src={previewUrl} />;
else if (file.type.startsWith("video"))
return <Video preload="metadata" aria-hidden="true" src={previewUrl}></Video>;
else
return (
<div>
<Icon size="48px" icon="mdiFile" />
</div>
);
}, [file]);
return (
<Container>
<InnerWrapper>
<MediaContainer>
<Image src={previewUrl} />
</MediaContainer>
<MediaContainer>{generatePreviewElement()}</MediaContainer>
<ActionsContainer>
<ActionBarWrapper>
<IconButton onClick={remove}>