this repo has no description
statusphere
+48
-13
+28
-12
src/lib/AccountComponent.svelte
+28
-12
src/lib/AccountComponent.svelte
···
1
1
<script lang="ts">
2
2
import type { AccountMetadata } from "./pdsfetch";
3
-
import { getTealNowListeningTo } from "./pdsfetch";
3
+
import { getTealNowListeningTo, getStatusSphere } from "./pdsfetch";
4
4
const { account }: { account: AccountMetadata } = $props();
5
5
import { Config } from "../../config";
6
6
7
7
let nowListeningTo: string | null = $state(null);
8
+
let statusEmoji: string | null = $state(null);
8
9
9
10
$effect(() => {
10
11
if(account.did){
11
12
getTealNowListeningTo(account.did).then(res => {
12
13
nowListeningTo = res;
13
14
});
15
+
getStatusSphere(account.did).then(res => {
16
+
statusEmoji = res;
17
+
})
14
18
}
15
19
})
16
20
</script>
···
18
22
<a id="link" href="{Config.FRONTEND_URL}/profile/{account.did}">
19
23
<div id="accountContainer">
20
24
{#if account.avatarCid}
21
-
<img
22
-
id="avatar"
23
-
alt="avatar of {account.displayName}"
24
-
src="https://cdn.bsky.app/img/feed_thumbnail/plain/{account.did}/{account.avatarCid}@jpeg"
25
-
/>
25
+
<span class="avatar-wrapper">
26
+
{#if statusEmoji}
27
+
<span class="avatar-badge" aria-hidden="true" title="icon">{statusEmoji}</span>
28
+
{/if}
29
+
<img
30
+
id="avatar"
31
+
alt="avatar of {account.displayName}"
32
+
src="https://cdn.bsky.app/img/feed_thumbnail/plain/{account.did}/{account.avatarCid}@jpeg"
33
+
/>
34
+
</span>
26
35
<div id="accountName">
27
36
{account.displayName || account.handle || account.did}
28
37
</div>
29
38
{:else}
30
-
<img
31
-
id="avatar"
32
-
alt="unknown avatar of {account.displayName}"
33
-
src="/unknown.png"
34
-
/>
39
+
<span class="avatar-wrapper">
40
+
{#if statusEmoji}
41
+
<span class="avatar-badge" aria-hidden="true" title="icon">{statusEmoji}</span>
42
+
{/if}
43
+
44
+
<img
45
+
id="avatar"
46
+
alt="unknown avatar of {account.displayName}"
47
+
src="/unknown.png"
48
+
/>
49
+
</span>
35
50
<div id="accountName" class="no-avatar">
36
51
{account.displayName || account.handle || account.did}
37
52
</div>
···
40
55
</a>
41
56
42
57
<style>
43
-
58
+
.avatar-wrapper { position: relative; display: inline-block; }
59
+
.avatar-badge { position: absolute; top: 34px; left: 40px; font-size: 24px; line-height: 1; }
44
60
</style>
+20
-1
src/lib/pdsfetch.ts
+20
-1
src/lib/pdsfetch.ts
···
407
407
return null;
408
408
}
409
409
410
+
type statusSphere = {
411
+
status: string;
412
+
}
413
+
414
+
const getStatusSphere = async (did: At.Did) => {
415
+
const { data } = await rpc.get("com.atproto.repo.listRecords", {
416
+
params: {
417
+
repo: did as At.Identifier,
418
+
collection: "xyz.statusphere.status",
419
+
limit: 1
420
+
},
421
+
});
422
+
if (data.records.length > 0) {
423
+
const record = data.records[0].value as statusSphere;
424
+
return record.status;
425
+
}
426
+
return null;
427
+
}
428
+
410
429
type CacheEntry<T> = {
411
430
data: T;
412
431
expire_timestamp: number;
···
448
467
}
449
468
}
450
469
451
-
export { getAllMetadataFromPds, getNextPosts, Post, blueskyHandleFromDid, getTealNowListeningTo };
470
+
export { getAllMetadataFromPds, getNextPosts, Post, blueskyHandleFromDid, getTealNowListeningTo, getStatusSphere };
452
471
export type { AccountMetadata };