pdewey.com
forked from
baileytownsend.dev/pds-dash-fork
A fork of pds-dash-fork for arabica.systems
1<script lang="ts">
2 import type { AccountMetadata } from "./pdsfetch";
3 import { getTealNowListeningTo, getStatusSphere } from "./pdsfetch";
4 const { account }: { account: AccountMetadata } = $props();
5 import { Config } from "../../config";
6
7 let nowListeningTo: string | null = $state(null);
8 let statusEmoji: string | null = $state(null);
9
10 $effect(() => {
11 if (account.did) {
12 getTealNowListeningTo(account.did).then((res) => {
13 nowListeningTo = res;
14 });
15 getStatusSphere(account.did).then((res) => {
16 statusEmoji = res;
17 });
18 }
19 });
20</script>
21
22<a id="link" href="{Config.FRONTEND_PROFILE_URL}/{account.did}">
23 <div id="accountContainer">
24 {#if account.avatarCid}
25 <span class="avatar-wrapper">
26 {#if statusEmoji}
27 <span class="avatar-badge" aria-hidden="true" title="icon"
28 >{statusEmoji}</span
29 >
30 {/if}
31 <img
32 id="avatar"
33 alt="avatar of {account.displayName}"
34 src="https://cdn.bsky.app/img/feed_thumbnail/plain/{account.did}/{account.avatarCid}@jpeg"
35 />
36 </span>
37 <div class="name-block" style="margin-left: 12px;">
38 <div id="accountName" style="margin-left: 0;">
39 {account.displayName || account.handle || account.did}
40 </div>
41 {#if nowListeningTo}
42 <div class="now-playing"><span>{nowListeningTo}</span></div>
43 {/if}
44 </div>
45 {:else}
46 <span class="avatar-wrapper">
47 {#if statusEmoji}
48 <span class="avatar-badge" aria-hidden="true" title="icon"
49 >{statusEmoji}</span
50 >
51 {/if}
52
53 <img
54 id="avatar"
55 alt="unknown avatar of {account.displayName}"
56 src="/unknown.png"
57 />
58 </span>
59 <div class="name-block" style="margin-left: 12px;">
60 <div id="accountName" style="margin-left: 0;">
61 {account.displayName || account.handle || account.did}
62 </div>
63 {#if nowListeningTo}
64 <div class="now-playing"><span>{nowListeningTo}</span></div>
65 {/if}
66 </div>
67 {/if}
68 </div>
69</a>
70
71<style>
72 .avatar-wrapper {
73 position: relative;
74 display: inline-block;
75 }
76
77 .avatar-badge {
78 position: absolute;
79 top: 34px;
80 left: 40px;
81 font-size: 24px;
82 line-height: 1;
83 }
84
85 .name-block {
86 display: flex;
87 flex-direction: column;
88 min-width: 0;
89 flex: 1;
90 }
91
92 #accountName {
93 max-width: 100%;
94 overflow: hidden;
95 text-overflow: ellipsis;
96 white-space: nowrap;
97 }
98
99 .now-playing {
100 font-size: 0.8em;
101 opacity: 0.8;
102 margin-top: 2px;
103 white-space: nowrap;
104 overflow: hidden;
105 }
106
107 .now-playing > span {
108 display: inline-block;
109 padding-left: 100%;
110 animation: account-now-playing-marquee 25s linear infinite;
111 }
112
113 @keyframes account-now-playing-marquee {
114 from {
115 transform: translateX(0);
116 }
117 to {
118 transform: translateX(-100%);
119 }
120 }
121</style>