Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { useContext } from 'preact/hooks';
import styles from './Attachment.module.scss';
import IconButton from '../../../ui/IconButton';
import { Attachment } from "revolt.js/dist/api/objects";
import { AppContext } from '../../../../context/revoltjs/RevoltClient';
import { Download, ExternalLink, File, Headphones, Video } from '@styled-icons/feather';
interface Props {
attachment: Attachment;
}
export function determineFileSize(size: number) {
if (size > 1e6) {
return `${(size / 1e6).toFixed(2)} MB`;
} else if (size > 1e3) {
return `${(size / 1e3).toFixed(2)} KB`;
}
return `${size} B`;
}
export default function AttachmentActions({ attachment }: Props) {
const client = useContext(AppContext);
const { filename, metadata, size } = attachment;
const url = client.generateFileURL(attachment) as string;
const open_url = `${url}/${filename}`;
const download_url = url.replace('attachments', 'attachments/download')
const filesize = determineFileSize(size as any);
switch (metadata.type) {
case 'Image':
return (
<div className={styles.actions}>
<div className={styles.info}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{metadata.width + 'x' + metadata.height} ({filesize})</span>
</div>
<a href={open_url} target="_blank">
<IconButton>
<ExternalLink size={24} />
</IconButton>
</a>
<a href={download_url} download target="_blank">
<IconButton>
<Download size={24} />
</IconButton>
</a>
</div>
)
case 'Audio':
return (
<div className={styles.actions}>
<Headphones size={24} strokeWidth={1.5} />
<div className={styles.info}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{filesize}</span>
</div>
<a href={download_url} download target="_blank">
<IconButton>
<Download size={24} strokeWidth={1.5} />
</IconButton>
</a>
</div>
)
case 'Video':
return (
<div className={styles.actions}>
<Video size={24} strokeWidth={1.5} />
<div className={styles.info}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{metadata.width + 'x' + metadata.height} ({filesize})</span>
</div>
<a href={download_url} download target="_blank">
<IconButton>
<Download size={24} strokeWidth={1.5}/>
</IconButton>
</a>
</div>
)
default:
return (
<div className={styles.actions}>
<File size={24} strokeWidth={1.5} />
<div className={styles.info}>
<span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{filesize}</span>
</div>
<a href={download_url} download target="_blank">
<IconButton>
<Download size={24} strokeWidth={1.5} />
</IconButton>
</a>
</div>
)
}
}