forked from
pds.ls/pdsls
atmosphere explorer
add filesize underneath blob preview
+21
-11
+1
-8
src/components/create/file-upload.tsx
+1
-8
src/components/create/file-upload.tsx
···
2
2
import { remove } from "@mary/exif-rm";
3
3
import { createSignal, onCleanup, Show } from "solid-js";
4
4
import { agent } from "../../auth/state";
5
+
import { formatFileSize } from "../../utils/format";
5
6
import { Button } from "../button.jsx";
6
7
import { TextInput } from "../text-input.jsx";
7
8
import { editorInstance } from "./state";
···
15
16
const [error, setError] = createSignal("");
16
17
17
18
onCleanup(() => (props.blobInput.value = ""));
18
-
19
-
const formatFileSize = (bytes: number) => {
20
-
if (bytes === 0) return "0 Bytes";
21
-
const k = 1024;
22
-
const sizes = ["Bytes", "KB", "MB", "GB"];
23
-
const i = Math.floor(Math.log(bytes) / Math.log(k));
24
-
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
25
-
};
26
19
27
20
const uploadBlob = async () => {
28
21
let blob: Blob;
+11
-3
src/components/json.tsx
+11
-3
src/components/json.tsx
···
11
11
useContext,
12
12
} from "solid-js";
13
13
import { resolveLexiconAuthority } from "../utils/api";
14
+
import { formatFileSize } from "../utils/format";
14
15
import { hideMedia } from "../views/settings";
15
16
import { pds } from "./navbar";
16
17
import { addNotification, removeNotification } from "./notification";
···
30
31
$type: string;
31
32
ref: { $link: string };
32
33
mimeType: string;
34
+
size: number;
33
35
}
34
36
35
37
const isURL =
···
252
254
pds() && params.rkey && (blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4");
253
255
254
256
const MediaDisplay = () => (
255
-
<div>
257
+
<div class="flex flex-col gap-1">
256
258
<span class="group/media relative flex w-fit">
257
259
<Show when={!hide()}>
258
260
<Show when={blob.mimeType.startsWith("image/")}>
···
283
285
<Show when={hide()}>
284
286
<button
285
287
onclick={() => setHide(false)}
286
-
class="flex items-center rounded-lg bg-neutral-200 p-1.5 transition-colors hover:bg-neutral-300 active:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:active:bg-neutral-500"
288
+
class="flex items-center gap-1 rounded-lg bg-neutral-200 px-2 py-1.5 text-sm transition-colors hover:bg-neutral-300 active:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:active:bg-neutral-500"
287
289
>
288
-
<span class="iconify lucide--eye text-base"></span>
290
+
<span class="iconify lucide--image"></span>
291
+
<span class="font-sans">Show media</span>
289
292
</button>
290
293
</Show>
291
294
</span>
295
+
<Show when={blob.size}>
296
+
<span class="text-xs text-neutral-400 dark:text-neutral-500">
297
+
{formatFileSize(blob.size)}
298
+
</span>
299
+
</Show>
292
300
</div>
293
301
);
294
302
+9
src/utils/format.ts
+9
src/utils/format.ts
···
1
+
const formatFileSize = (bytes: number): string => {
2
+
if (bytes === 0) return "0 B";
3
+
const k = 1024;
4
+
const sizes = ["B", "KB", "MB", "GB"];
5
+
const i = Math.floor(Math.log(bytes) / Math.log(k));
6
+
return `${(bytes / Math.pow(k, i)).toFixed(i === 0 ? 0 : 1)} ${sizes[i]}`;
7
+
};
8
+
9
+
export { formatFileSize };