stream.place
Live video on the AT Protocol
components: assign a random color on first interaction
+77
-8
+6
-1
js/components/src/streamplace-provider/index.tsx
+6
-1
js/components/src/streamplace-provider/index.tsx
···
1
1
import { SessionManager } from "@atproto/api/dist/session-manager";
2
2
import { useEffect, useRef } from "react";
3
+
import { useGetChatProfile } from "../streamplace-store";
3
4
import { makeStreamplaceStore } from "../streamplace-store/streamplace-store";
4
5
import { StreamplaceContext } from "./context";
5
6
import Poller from "./poller";
···
13
14
url: string;
14
15
oauthSession?: SessionManager | null;
15
16
}) {
16
-
console.log("session in provider is", oauthSession);
17
+
const getChatProfile = useGetChatProfile();
17
18
// todo: handle url changes?
18
19
const store = useRef(makeStreamplaceStore({ url })).current;
19
20
···
23
24
24
25
useEffect(() => {
25
26
store.setState({ oauthSession });
27
+
// possibly their first login, trigger this so we create a chat profile record for them
28
+
if (oauthSession) {
29
+
getChatProfile();
30
+
}
26
31
}, [oauthSession]);
27
32
28
33
return (
+71
-7
js/components/src/streamplace-store/user.tsx
+71
-7
js/components/src/streamplace-store/user.tsx
···
10
10
const did = useDID();
11
11
const pdsAgent = usePDSAgent();
12
12
const store = getStreamplaceStoreFromContext();
13
+
const createEmptyChatProfile = useCreateEmptyChatProfile();
13
14
14
15
return async () => {
15
16
if (!did || !pdsAgent) {
16
17
throw new Error("No DID or PDS agent");
17
18
}
18
-
const res = await pdsAgent.com.atproto.repo.getRecord({
19
-
repo: did,
20
-
collection: "place.stream.chat.profile",
21
-
rkey: "self",
22
-
});
23
-
if (!res.success) {
24
-
throw new Error("Failed to get chat profile record");
19
+
let res;
20
+
try {
21
+
res = await pdsAgent.com.atproto.repo.getRecord({
22
+
repo: did,
23
+
collection: "place.stream.chat.profile",
24
+
rkey: "self",
25
+
});
26
+
} catch (e) {
27
+
console.error(
28
+
"Failed to get chat profile record, attempting creation",
29
+
e,
30
+
);
31
+
}
32
+
if (!res || !res.success) {
33
+
try {
34
+
await createEmptyChatProfile();
35
+
res = await pdsAgent.com.atproto.repo.getRecord({
36
+
repo: did,
37
+
collection: "place.stream.chat.profile",
38
+
rkey: "self",
39
+
});
40
+
} catch (e) {
41
+
console.error("Failed to create empty chat profile record", e);
42
+
}
25
43
}
26
44
27
45
if (PlaceStreamChatProfile.isRecord(res.data.value)) {
···
32
50
};
33
51
}
34
52
53
+
export function useCreateEmptyChatProfile() {
54
+
const did = useDID();
55
+
const pdsAgent = usePDSAgent();
56
+
57
+
return async () => {
58
+
if (!did || !pdsAgent) {
59
+
throw new Error("No DID or PDS agent");
60
+
}
61
+
const res = await pdsAgent.com.atproto.repo.putRecord({
62
+
repo: did,
63
+
collection: "place.stream.chat.profile",
64
+
rkey: "self",
65
+
record: {
66
+
$type: "place.stream.chat.profile",
67
+
color:
68
+
DEFAULT_COLORS[Math.floor(Math.random() * DEFAULT_COLORS.length)],
69
+
},
70
+
});
71
+
if (!res.success) {
72
+
throw new Error("Failed to create empty chat profile record");
73
+
}
74
+
};
75
+
}
76
+
35
77
export function useGetBskyProfile() {
36
78
const did = useDID();
37
79
const pdsAgent = usePDSAgent();
···
55
97
export function useChatProfile() {
56
98
return useStreamplaceStore((x) => x.chatProfile);
57
99
}
100
+
101
+
const DEFAULT_COLORS: PlaceStreamChatProfile.Color[] = [
102
+
{ red: 244, green: 67, blue: 54 },
103
+
{ red: 233, green: 30, blue: 99 },
104
+
{ red: 156, green: 39, blue: 176 },
105
+
{ red: 103, green: 58, blue: 183 },
106
+
{ red: 63, green: 81, blue: 181 },
107
+
{ red: 33, green: 150, blue: 243 },
108
+
{ red: 3, green: 169, blue: 244 },
109
+
{ red: 0, green: 188, blue: 212 },
110
+
{ red: 0, green: 150, blue: 136 },
111
+
{ red: 76, green: 175, blue: 80 },
112
+
{ red: 139, green: 195, blue: 74 },
113
+
{ red: 205, green: 220, blue: 57 },
114
+
{ red: 255, green: 235, blue: 59 },
115
+
{ red: 255, green: 193, blue: 7 },
116
+
{ red: 255, green: 152, blue: 0 },
117
+
{ red: 255, green: 87, blue: 34 },
118
+
{ red: 121, green: 85, blue: 72 },
119
+
{ red: 158, green: 158, blue: 158 },
120
+
{ red: 96, green: 125, blue: 139 },
121
+
];