A stream.place VOD client inspired by icarly.com
Fix live streams - API returns data.streams not data.users
- Updated to use correct API response structure (data.streams)
- Fixed viewerCount access to use .count property
- Fixed stream URL to use record.url field
+16
-18
+16
-18
src/components/IStream.tsx
+16
-18
src/components/IStream.tsx
···
19
19
title?: string;
20
20
createdAt?: string;
21
21
canonicalUrl?: string;
22
+
url?: string;
22
23
thumb?: {
23
-
ref: string;
24
-
mimeType: string;
25
-
size: number;
24
+
$type?: string;
25
+
ref?: {
26
+
$link?: string;
27
+
};
28
+
mimeType?: string;
29
+
size?: number;
26
30
};
27
31
};
28
-
viewerCount?: number;
32
+
viewerCount?: {
33
+
$type?: string;
34
+
count: number;
35
+
};
29
36
}
30
37
31
38
export default function IStream() {
···
47
54
48
55
const data = await response.json();
49
56
50
-
// Transform the data into our format
51
-
const streams: LiveStream[] = data.users?.map((user: LiveUser) => ({
52
-
uri: `at://${user.did}/place.stream.livestream/self`,
53
-
cid: '',
54
-
author: user,
55
-
record: {
56
-
title: `${user.displayName || user.handle} is live!`,
57
-
createdAt: new Date().toISOString(),
58
-
canonicalUrl: `https://stream.place/stream/${user.handle}`,
59
-
},
60
-
})) || [];
57
+
// The API returns streams directly
58
+
const streams: LiveStream[] = data.streams || [];
61
59
62
60
setLiveStreams(streams);
63
61
} catch (e) {
···
155
153
{liveStreams.map((stream) => (
156
154
<a
157
155
key={stream.uri}
158
-
href={stream.record.canonicalUrl || `https://stream.place/stream/${stream.author.handle}`}
156
+
href={stream.record.url || stream.record.canonicalUrl || `https://stream.place/${stream.author.handle}`}
159
157
target="_blank"
160
158
rel="noopener noreferrer"
161
159
style={{
···
234
232
</div>
235
233
236
234
{/* Viewer Count */}
237
-
{stream.viewerCount !== undefined && (
235
+
{stream.viewerCount?.count !== undefined && (
238
236
<div style={{
239
237
position: 'absolute',
240
238
bottom: '10px',
···
245
243
fontSize: '14px',
246
244
borderRadius: '4px',
247
245
}}>
248
-
👥 {stream.viewerCount}
246
+
👥 {stream.viewerCount.count}
249
247
</div>
250
248
)}
251
249
</div>