stream.place
Live video on the AT Protocol
replace everything with formatHandle
+2
-2
js/app/components/create-livestream.tsx
+2
-2
js/app/components/create-livestream.tsx
···
1
-
import { zero } from "@streamplace/components";
1
+
import { formatHandleWithAt, zero } from "@streamplace/components";
2
2
import ThumbnailSelector from "components/thumbnail-selector";
3
3
import { useCaptureVideoFrame } from "hooks/useCaptureVideoFrame";
4
4
import { useLiveUser } from "hooks/useLiveUser";
···
123
123
Streamer
124
124
</Text>
125
125
<Text style={[{ paddingBottom: 8, fontWeight: "bold" }]}>
126
-
@{profile?.handle}
126
+
{profile && formatHandleWithAt(profile)}
127
127
</Text>
128
128
</View>
129
129
+7
-2
js/app/components/edit-livestream.tsx
+7
-2
js/app/components/edit-livestream.tsx
···
1
-
import { Text, useLivestream, zero } from "@streamplace/components";
1
+
import {
2
+
formatHandleWithAt,
3
+
Text,
4
+
useLivestream,
5
+
zero,
6
+
} from "@streamplace/components";
2
7
import { useLiveUser } from "hooks/useLiveUser";
3
8
import { useEffect, useState } from "react";
4
9
import { Pressable, ScrollView, TextInput, View } from "react-native";
···
86
91
Streamer
87
92
</Text>
88
93
<Text style={[{ paddingBottom: 8, fontWeight: "bold" }]}>
89
-
@{profile?.handle}
94
+
{profile && formatHandleWithAt(profile)}
90
95
</Text>
91
96
</View>
92
97
+4
-2
js/app/components/live-dashboard/livestream-panel.tsx
+4
-2
js/app/components/live-dashboard/livestream-panel.tsx
···
2
2
Button,
3
3
Checkbox,
4
4
ContentMetadataForm,
5
+
formatHandle,
6
+
formatHandleWithAt,
5
7
Input,
6
8
Textarea,
7
9
Tooltip,
···
184
186
livestream?.record.canonicalUrl || "",
185
187
);
186
188
const defaultCanonicalUrl = useMemo(() => {
187
-
return `${url}/${profile?.handle}`;
189
+
return `${url}/${profile && formatHandle(profile)}`;
188
190
}, [url, profile?.handle]);
189
191
190
192
useEffect(() => {
···
418
420
{ fontWeight: "bold", paddingBottom: 8 },
419
421
]}
420
422
>
421
-
@{profile?.handle || "streamer"}
423
+
{profile && formatHandleWithAt(profile)}
422
424
</Text>
423
425
</View>
424
426
<View
+4
-2
js/app/components/mobile/bottom-metadata.tsx
+4
-2
js/app/components/mobile/bottom-metadata.tsx
···
2
2
Button,
3
3
ContentRights,
4
4
ContentWarnings,
5
+
formatHandle,
6
+
formatHandleWithAt,
5
7
layout,
6
8
PlayerUI,
7
9
ShareSheet,
···
90
92
<Pressable
91
93
onPress={() => {
92
94
if (profile?.handle) {
93
-
const url = `https://bsky.app/profile/${profile.handle}`;
95
+
const url = `https://bsky.app/profile/${formatHandle(profile)}`;
94
96
Linking.openURL(url);
95
97
}
96
98
}}
97
99
>
98
100
<Text style={{ color: "white", fontWeight: "600" }}>
99
-
@{profile?.handle || "user"}
101
+
{profile ? formatHandleWithAt(profile) : "@user"}
100
102
</Text>
101
103
</Pressable>
102
104
{did && profile && (
+2
-2
js/app/components/name-color-picker/name-color-picker.tsx
+2
-2
js/app/components/name-color-picker/name-color-picker.tsx
···
1
-
import { Button, zero } from "@streamplace/components";
1
+
import { Button, formatHandleWithAt, zero } from "@streamplace/components";
2
2
import { Palette, SwatchBook, X } from "lucide-react-native";
3
3
import { useEffect, useState } from "react";
4
4
import {
···
185
185
]}
186
186
>
187
187
<Text style={[{ color: tempColor, fontWeight: "600" }]}>
188
-
@{profile.handle}
188
+
{formatHandleWithAt(profile)}
189
189
</Text>
190
190
<Text
191
191
style={[
+3
-2
js/components/src/components/chat/chat-message.tsx
+3
-2
js/components/src/components/chat/chat-message.tsx
···
8
8
import { ChatMessageViewHydrated } from "streamplace";
9
9
import { RichtextSegment, segmentize } from "../../lib/facet";
10
10
import { borders, flex, gap, ml, mr, opacity, pl } from "../../lib/theme/atoms";
11
+
import { formatHandleWithAt } from "../../utils/format-handle";
11
12
import { atoms, colors, layout } from "../ui";
12
13
13
14
interface Facet {
···
138
139
fontWeight: "thin",
139
140
}}
140
141
>
141
-
@{(replyTo.author as any).handle}
142
+
{formatHandleWithAt(replyTo.author)}
142
143
</Text>{" "}
143
144
<Text
144
145
style={{
···
181
182
},
182
183
]}
183
184
>
184
-
@{item.author.handle}
185
+
{formatHandleWithAt(item.author)}
185
186
</Text>
186
187
:{" "}
187
188
<RichTextMessage
+4
-3
js/components/src/components/chat/mod-view.tsx
+4
-3
js/components/src/components/chat/mod-view.tsx
···
12
12
import { ChatMessageViewHydrated } from "streamplace";
13
13
import { useDeleteChatMessage } from "../../livestream-store";
14
14
import { useStreamplaceStore } from "../../streamplace-store";
15
+
import { formatHandle, formatHandleWithAt } from "../../utils/format-handle";
15
16
import {
16
17
atoms,
17
18
DropdownMenu,
···
113
114
minute: "2-digit",
114
115
hour12: false,
115
116
})}{" "}
116
-
@{message.author.handle}: {message.record.text}
117
+
{formatHandleWithAt(message.author)}: {message.record.text}
117
118
</Text>
118
119
</View>
119
120
</DropdownMenuItem>
···
159
160
<Text color="destructive">
160
161
{isBlockLoading
161
162
? "Blocking..."
162
-
: `Block user @${message.author.handle} from this channel`}
163
+
: `Block user ${formatHandleWithAt(message.author)} from this channel`}
163
164
</Text>
164
165
)}
165
166
</DropdownMenuItem>
···
170
171
<DropdownMenuItem
171
172
onPress={() => {
172
173
Linking.openURL(
173
-
`https://${BSKY_FRONTEND_DOMAIN}/profile/${message.author.handle}`,
174
+
`https://${BSKY_FRONTEND_DOMAIN}/profile/${formatHandle(message.author)}`,
174
175
);
175
176
}}
176
177
>
+2
js/components/src/index.tsx
+2
js/components/src/index.tsx
···
37
37
export { default as VideoRetry } from "./components/mobile-player/video-retry";
38
38
export * from "./lib/system-messages";
39
39
40
+
export * from "./utils/format-handle";
41
+
40
42
export { DanmuOverlay } from "./components/danmu/danmu-overlay";
41
43
export { DanmuOverlayOBS } from "./components/danmu/danmu-overlay-obs";
42
44
+5
-3
js/components/src/utils/format-handle.ts
+5
-3
js/components/src/utils/format-handle.ts
···
5
5
*/
6
6
export function formatHandle(
7
7
profile: Pick<AppBskyActorDefs.ProfileViewBasic, "handle" | "did">,
8
+
prefix: string = "",
8
9
): string {
9
10
if (profile.handle === "handle.invalid") {
10
11
return profile.did;
11
12
}
12
-
return profile.handle;
13
+
return prefix + profile.handle;
13
14
}
14
15
15
16
/**
16
-
* formats a user's handle with @ prefix for display, falling back to DID if handle is invalid
17
+
* convenience function for formatting a user's handle with @ prefix for display,
18
+
* falling back to DID if handle is invalid
17
19
*/
18
20
export function formatHandleWithAt(
19
21
profile: Pick<AppBskyActorDefs.ProfileViewBasic, "handle" | "did">,
20
22
): string {
21
-
return `@${formatHandle(profile)}`;
23
+
return formatHandle(profile, "@");
22
24
}