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

better file type detection, and util functions for files

Browse Source
This commit is contained in:
Puyodead1 2023-09-10 23:08:47 -04:00
parent c272d97453
commit ec564739a1
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
3 changed files with 48 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/messaging/attachments/AttachmentUploadPreview.tsx
View File

@ -1,7 +1,7 @@
import { observer } from "mobx-react-lite";
import React, { Fragment } from "react";
import styled from "styled-components";
import { bytesToSize } from "../../../utils/Utils";
import { bytesToSize, getFileDetails, getFileIcon } from "../../../utils/Utils";
import { HorizontalDivider } from "../../Divider";
import Icon from "../../Icon";
import IconButton from "../../IconButton";
@ -102,23 +102,12 @@ interface FileProps {
function File({ file, remove }: FileProps) {
const generatePreviewElement = React.useCallback(() => {
const previewUrl = URL.createObjectURL(file);
console.log(file.type);
if (file.type.startsWith("image")) return <Image src={previewUrl} />;
// these are the only supported video formats by most browsers (safari doesn't support ogg)
else if (["video/webm", "video/ogg", "video/mp4"].includes(file.type.toLowerCase()))
return <Video preload="metadata" aria-hidden="true" src={previewUrl}></Video>;
else if (file.type.startsWith("audio")) {
return (
<div>
<Icon size="48px" icon="mdiVolumeHigh" />
</div>
);
} else
return (
<div>
<Icon size="48px" icon="mdiFile" />
</div>
);
const fileDetails = getFileDetails(file);
if (fileDetails.isEmbeddable) {
if (fileDetails.isVideo) return <Video preload="metadata" aria-hidden="true" src={previewUrl}></Video>;
if (fileDetails.isImage) return <Image src={previewUrl} />;
}
return <Icon size={5} icon={getFileIcon(file)} />;
}, [file]);
return (

38
src/utils/Utils.ts
View File

@ -1,3 +1,6 @@
import * as Icons from "@mdi/js";
import { ARCHIVE_MIMES, EMBEDDABLE_IMAGE_MIMES, EMBEDDABLE_VIDEO_MIMES } from "./constants";
export const decimalColorToHex = (decimal: number) => {
return `#${decimal.toString(16)}`;
};
@ -9,3 +12,38 @@ export const bytesToSize = (bytes: number) => {
const i = Math.floor(Math.log(bytes) / Math.log(1024));
return `${Math.round(bytes / Math.pow(1024, i))} ${sizes[i]}`;
};
type IconsType = keyof typeof Icons;
// returns the icon for a file based on its mimetype
export const getFileIcon = (file: File): IconsType => {
const isImage = file.type.startsWith("image/");
const isVideo = file.type.startsWith("video/");
const isAudio = file.type.startsWith("audio/");
// check if the file is an archive based on its extension
const isArchive = ARCHIVE_MIMES.includes(file.name.split(".").pop() || "");
if (isImage) return "mdiFileImage";
if (isVideo) return "mdiFileVideo";
if (isAudio) return "mdiFileMusic";
if (isArchive) return "mdiFolderZip";
return "mdiFile";
};
export const isFileEmbeddable = (file: File) => {
return (
(file.type.startsWith("image/") &&
EMBEDDABLE_IMAGE_MIMES.includes(file.type.toLowerCase().split("/").pop() || "")) ||
(file.type.startsWith("video/") &&
EMBEDDABLE_VIDEO_MIMES.includes(file.type.toLowerCase().split("/").pop() || ""))
);
};
export const getFileDetails = (file: File) => {
return {
icon: getFileIcon(file),
isEmbeddable: isFileEmbeddable(file),
isVideo: file.type.startsWith("video/"),
isImage: file.type.startsWith("image/"),
isAudio: file.type.startsWith("audio/"),
};
};

3
src/utils/constants.ts
View File

@ -31,3 +31,6 @@ export const USER_JOIN_MESSAGES = [
// TODO: this should come from the server
export const MAX_UPLOAD_SIZE = 1024 * 1024 * 1024; // 1GB, taken from spacebar server default
export const EMBEDDABLE_VIDEO_MIMES = ["webm", "ogg", "mp4"]; // list of the mimetypes that can be used in a video element
export const EMBEDDABLE_IMAGE_MIMES = ["png", "jpg", "jpeg", "gif", "webp"]; // list of mimetypes that can be used in an image element
export const ARCHIVE_MIMES = ["zip", "tar", "tar.gz", "tar.xz", "tar.bz2", "rar", "7z"]; // list of mimetypes to associate with archives