zerosoul
102 lines
2.8 KiB
JavaScript
102 lines
2.8 KiB
JavaScript
// import React from 'react'
|
|
import dayjs from "dayjs";
|
|
import relativeTime from "dayjs/plugin/relativeTime";
|
|
import { useSelector } from "react-redux";
|
|
import Styled from "./styled";
|
|
import {
|
|
VideoPreview,
|
|
AudioPreview,
|
|
ImagePreview,
|
|
PdfPreview,
|
|
CodePreview,
|
|
DocPreview
|
|
} from "./preview";
|
|
import { getFileIcon, formatBytes } from "../../utils";
|
|
import IconDownload from "../../../assets/icons/download.svg";
|
|
dayjs.extend(relativeTime);
|
|
const renderPreview = (data) => {
|
|
const { file_type, name, content } = data;
|
|
let preview = null;
|
|
|
|
const checks = {
|
|
image: /^image/gi,
|
|
audio: /^audio/gi,
|
|
video: /^video/gi,
|
|
code: /(json|javascript|java|rb|c|php|xml|css|html)$/gi,
|
|
doc: /^text/gi,
|
|
pdf: /\/pdf$/gi
|
|
};
|
|
const _arr = name.split(".");
|
|
const _type = file_type || _arr[_arr.length - 1];
|
|
switch (true) {
|
|
case checks.image.test(_type):
|
|
{
|
|
console.log("image");
|
|
preview = <ImagePreview url={content} />;
|
|
}
|
|
break;
|
|
case checks.pdf.test(_type):
|
|
preview = <PdfPreview url={content} />;
|
|
break;
|
|
case checks.code.test(_type):
|
|
preview = <CodePreview url={content} />;
|
|
break;
|
|
case checks.doc.test(_type):
|
|
preview = <DocPreview url={content} />;
|
|
break;
|
|
case checks.audio.test(_type):
|
|
preview = <AudioPreview url={content} />;
|
|
break;
|
|
case checks.video.test(_type):
|
|
preview = <VideoPreview url={content} />;
|
|
break;
|
|
|
|
// default:
|
|
// icon = <IconUnkown className="icon" />;
|
|
// break;
|
|
}
|
|
return preview;
|
|
};
|
|
export default function FileBox({
|
|
preview = false,
|
|
flex,
|
|
file_type = "",
|
|
name,
|
|
size,
|
|
created_at,
|
|
from_uid,
|
|
content
|
|
}) {
|
|
const fromUser = useSelector((store) => store.contacts.byId[from_uid]);
|
|
const icon = getFileIcon(file_type, name);
|
|
if (!content || !fromUser || !name) return null;
|
|
console.log("file content", content, name, flex);
|
|
const previewContent = renderPreview({ file_type, content, name });
|
|
const withPreview = preview && previewContent;
|
|
return (
|
|
<Styled
|
|
className={`file_box ${flex ? "flex" : ""} ${withPreview ? "preview" : ""} ${
|
|
file_type.startsWith("audio") ? "audio" : ""
|
|
}`}
|
|
>
|
|
<div className="basic">
|
|
{icon}
|
|
<div className="info">
|
|
<span className="name">{name}</span>
|
|
<span className="details">
|
|
<i className="size">{formatBytes(size)}</i>
|
|
<i className="time">{dayjs(created_at).fromNow()}</i>
|
|
<i className="from">
|
|
by <strong>{fromUser.name}</strong>
|
|
</i>
|
|
</span>
|
|
</div>
|
|
<a className="download" download={name} href={`${content}&download=true`}>
|
|
<IconDownload />
|
|
</a>
|
|
</div>
|
|
{withPreview && <div className="preview">{previewContent}</div>}
|
|
</Styled>
|
|
);
|
|
}
|