tangled
alpha
login
or
join now
danabra.mov
/
overreacted
51
fork
atom
my blog https://overreacted.io
51
fork
atom
overview
issues
pulls
2
pipelines
tweak
danabra.mov
1 month ago
d328d8e7
eb37c55d
+9
-13
1 changed file
expand all
collapse all
unified
split
public
a-social-filesystem
components.js
+9
-13
public/a-social-filesystem/components.js
···
57
57
did: data.did,
58
58
rkey: data.commit.rkey,
59
59
};
60
60
-
setPlays((prev) => [play, ...prev].slice(0, 5));
60
60
+
setPlays((prev) => [play, ...prev].slice(0, 3));
61
61
}
62
62
} catch (e) {
63
63
console.error("Failed to parse event:", e);
···
81
81
}, [isVisible]);
82
82
83
83
return (
84
84
-
<div ref={containerRef} className="my-6" style={{ fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' }}>
85
85
-
<p className="mb-3 flex items-center gap-2 text-[--text-secondary]" style={{ marginLeft: '-0.75rem' }}>
84
84
+
<div ref={containerRef} className="my-6 rounded-lg bg-black/[0.03] dark:bg-white/[0.03] px-4 py-3" style={{ fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif', minHeight: '13rem' }}>
85
85
+
<p className="flex items-center gap-2 text-[--text-secondary] text-sm">
86
86
{status === "connecting" && "tuning in..."}
87
87
{status === "connected" && (
88
88
<>
89
89
<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-green-500" />
90
90
-
live from the atmosphere
90
90
+
{plays.length === 0 ? "watching for new records..." : "live from the atmosphere"}
91
91
</>
92
92
)}
93
93
{status === "error" && "couldn't connect"}
94
94
{status === "idle" && "waiting to connect"}
95
95
</p>
96
96
97
97
-
{plays.length === 0 ? (
98
98
-
status === "connected" && (
99
99
-
<p className="text-[--text-secondary]">listening...</p>
100
100
-
)
101
101
-
) : (
102
102
-
<ul className="space-y-1 -mx-2">
97
97
+
{plays.length > 0 && (
98
98
+
<ul className="mt-2">
103
99
{plays.map((play) => (
104
100
<li key={play.id}>
105
101
<a
106
102
href={`https://pdsls.dev/at://${play.did}/fm.teal.alpha.feed.play/${play.rkey}`}
107
103
target="_blank"
108
104
rel="noopener noreferrer"
109
109
-
className="block px-2 py-1 rounded hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
105
105
+
className="block py-1.5 rounded hover:bg-black/5 dark:hover:bg-white/5 transition-colors -mx-2 px-2"
110
106
>
111
111
-
<div className="font-semibold">{play.trackName}</div>
112
112
-
<div className="text-[--text-secondary]">{play.artistNames.join(", ")}</div>
107
107
+
<div className="font-medium truncate leading-snug">{play.trackName}</div>
108
108
+
<div className="text-[--text] opacity-60 text-sm truncate leading-snug">{play.artistNames.join(", ")}</div>
113
109
</a>
114
110
</li>
115
111
))}
danabra.mov