blob info

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "atscan-fe",
-	"version": "0.7.3-alpha",
+	"version": "0.8.1-alpha",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "atscan-fe",
-			"version": "0.7.3-alpha",
+			"version": "0.8.1-alpha",
 			"dependencies": {
 				"i18next": "^23.2.6",
 				"js-yaml": "^4.1.0",

frontend/src/lib/api.js

@@ -8,3 +8,11 @@ export async function request(fetch, path, ...args) {
 	}
 	return res.json();
 }
+
+export async function requestBlob(fetch, path, ...args) {
+	const res = await fetch(config.blobApi + path, ...args);
+	if (!res || res.status !== 200) {
+		return null;
+	}
+	return res.json();
+}

frontend/src/lib/components/Avatar.svelte

@@ -41,7 +41,7 @@
 </script>
 
 {#if loaded}
-	<img {src} class="ratio-square w-full h-full rounded-full object-contains" />
+	<img {src} class="ratio-square w-full h-full rounded-full object-cover" />
 {:else if loading}
 	<div class="bg-white/20 w-full h-full rounded-full" />
 {/if}

frontend/src/lib/components/BlobInfo.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { filesize } from '$lib/utils';
+
+	export let data;
+</script>
+
+<div class="ml-4 mt-2 text-sm">
+	{#if data}
+		Size: {filesize(data.size)}<br />
+		Format: {data.mime}
+		{#if data.image}({data.image.width}x{data.image.height}px){/if}
+	{:else}
+		<span class="opacity-50 animate-pulse">Loading info about blob ..</span>
+	{/if}
+</div>

frontend/src/lib/components/UserList.svelte

@@ -29,7 +29,8 @@
 							<Avatar
 								id="image-{item.did}"
 								src={item.repo?.profile?.avatar?.ref?.$link
-									? blobUrl(item.did, item.repo?.profile?.avatar?.ref?.$link)
+									? blobUrl(item.did, item.repo?.profile?.avatar?.ref?.$link) +
+									  '?format=webp&size=160'
 									: '/avatar.svg'}
 							/>
 						</a>

frontend/src/routes/[id]/+page.svelte

@@ -7,13 +7,15 @@
 		formatNumber,
 		blobUrl
 	} from '$lib/utils.js';
-	import { Table } from '@skeletonlabs/skeleton';
+	import { AppRail, Table } from '@skeletonlabs/skeleton';
 	import { tableMapperValues, tableSourceValues } from '@skeletonlabs/skeleton';
 	import SourceSection from '$lib/components/SourceSection.svelte';
 	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
 	import PDSTable from '$lib/components/PDSTable.svelte';
 	import BasicPage from '$lib/components/BasicPage.svelte';
+	import BlobInfo from '$lib/components/BlobInfo.svelte';
 	import { onMount } from 'svelte';
+	import { requestBlob } from '$lib/api';
 
 	export let data;
 
@@ -127,6 +129,7 @@
 
 	let current;
 	let currentError;
+	let blobInfo = {};
 
 	$: records =
 		item.repo && item.repo.collections
@@ -155,6 +158,14 @@
 				historyTable = renderTable();
 			}
 		})();
+		['avatar', 'banner'].map(async (t) => {
+			if (item.repo?.profile && item.repo?.profile[t]) {
+				blobInfo[t] = await requestBlob(
+					fetch,
+					`/${item.did}/${item.repo.profile[t].ref.$link}/inspect`
+				);
+			}
+		});
 	});
 </script>
 
@@ -200,23 +211,27 @@
 					{#if item.repo.profile.avatar}
 						<tr>
 							<th class="text-right">Avatar</th>
-							<td
-								><img
-									src={blobUrl(item.did, item.repo.profile.avatar.ref.$link)}
-									class="w-40"
-								/></td
-							>
+							<td>
+								<div class="flex">
+									<img
+										src={blobUrl(item.did, item.repo.profile.avatar.ref.$link) +
+											'?format=webp&size=160'}
+										class="w-40"
+									/>
+									<BlobInfo data={blobInfo.avatar} />
+								</div>
+							</td>
 						</tr>
 					{/if}
 					{#if item.repo.profile.banner}
 						<tr>
 							<th class="text-right">Banner</th>
 							<td
-								><img
-									src={blobUrl(item.did, item.repo.profile.banner.ref.$link)}
-									class="w-40"
-								/></td
-							>
+								><div class="flex">
+									<img src={blobUrl(item.did, item.repo.profile.banner.ref.$link)} class="w-40" />
+									<BlobInfo data={blobInfo.banner} />
+								</div>
+							</td>
 						</tr>
 					{/if}
 				</tbody>