stream.place
Live video on the AT Protocol
Merge pull request #942 from streamplace/natb/fix-badge-display
hotfix: fix badge display crashing
authored by
Eli Mallon
and committed by
GitHub
86fb189d
7425b89e
+2
-2
js/components/src/components/chat/badge.tsx
+2
-2
js/components/src/components/chat/badge.tsx
···
1
-
import { Image } from "react-native";
1
+
import { Image, Platform } from "react-native";
2
2
import { ChatMessageViewHydrated } from "streamplace";
3
3
4
4
export const BADGE_IMAGES: Record<string, ReturnType<typeof require>> = {
···
22
22
style={{
23
23
height: size,
24
24
width: size,
25
-
marginBottom: -size / 5,
25
+
marginBottom: Platform.OS === "web" ? -size / 4 : 0,
26
26
marginRight: 2,
27
27
}}
28
28
/>
+13
-2
js/components/src/components/chat/chat-message.tsx
+13
-2
js/components/src/components/chat/chat-message.tsx
···
173
173
author={item.author}
174
174
badges={item.badges}
175
175
>
176
-
<Text>
176
+
<View
177
+
style={
178
+
{
179
+
// display: inline is a no-op on mobile
180
+
display: "inline",
181
+
alignItems: "center",
182
+
justifyContent: "flex-end",
183
+
flexDirection: "row",
184
+
marginBottom: -6.25,
185
+
} as any
186
+
}
187
+
>
177
188
<BadgeDisplayRow badges={item.badges} />
178
189
<Text
179
190
weight="bold"
···
184
195
>
185
196
{formatHandleWithAt(item.author)}
186
197
</Text>
187
-
</Text>
198
+
</View>
188
199
</UserProfileCard>
189
200
<Text weight="bold" color="default">
190
201
{": "}
+11
-2
js/components/src/components/chat/user-profile-card.tsx
+11
-2
js/components/src/components/chat/user-profile-card.tsx
···
70
70
};
71
71
72
72
const BadgeRow = ({
73
+
streamer,
73
74
badge,
74
75
serviceDid,
75
76
}: {
76
77
badge: NonNullable<ChatMessageViewHydrated["badges"]>[number];
77
78
serviceDid: string;
79
+
streamer?: ProfileViewBasic;
78
80
}) => {
79
-
const streamer = useLivestreamStore((x) => x.livestream?.author);
80
81
const isServiceIssued = badge.issuer === serviceDid;
81
82
const issuerDids = useMemo(
82
83
() => (isServiceIssued ? [] : [badge.issuer]),
···
141
142
? `did:web:${nodeUrl.replace(/^https?:\/\//, "")}`
142
143
: null;
143
144
145
+
const streamer = useLivestreamStore((x) => x.livestream?.author);
146
+
144
147
const { openUri, setOpenUri } = useContext(OpenCardContext);
145
148
const isOpen = openUri === uri;
146
149
const thisRef = useRef<TriggerRef>(null);
···
183
186
marginLeft: -3,
184
187
paddingLeft: 3,
185
188
marginRight: -2,
189
+
...(Platform.OS === "web" && { paddingBottom: 4 }),
186
190
...(Platform.OS === "web" && hovered
187
191
? { backgroundColor: "rgba(255,255,255,0.15)", borderRadius: 6 }
188
192
: {}),
···
264
268
}}
265
269
>
266
270
{serviceBadges.map((badge, i) => (
267
-
<BadgeRow key={i} badge={badge} serviceDid={serviceDid} />
271
+
<BadgeRow
272
+
key={i}
273
+
badge={badge}
274
+
serviceDid={serviceDid}
275
+
streamer={streamer}
276
+
/>
268
277
))}
269
278
</View>
270
279
) : null}