-
Notifications
You must be signed in to change notification settings - Fork 9
/
useJoin.ts
100 lines (94 loc) · 3.36 KB
/
useJoin.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import type { IAgoraRTCClient, IAgoraRTCError, UID } from "agora-rtc-sdk-ng";
import { useState } from "react";
import { AgoraRTCReactError } from "../error";
import { useRTCClient } from "../hooks/useRTCClient";
import type { FetchArgs } from "../types";
import { useAsyncEffect, useIsUnmounted } from "./tools";
import { useIsConnected } from "./useIsConnected";
/**
* This hook lets a user automatically join a channel when the component is ready and automatically leaves the channel when the component is unmounted.
* You can customize the conditions required to join a channel using fetchArgs. For example, generating a token and other asynchronous operations can be performed before joining the channel.
*
* @param fetchArgs - The parameters or asynchronous function required to join the channel. See [`JoinOptions`](https://api-ref.agora.io/en/video-sdk/reactjs/2.x/interfaces/JoinOptions.html) for details.
* @param ready - Whether the user is ready to join the channel. The default value is `true`.
* @param client - Created using the Web SDK's [`IAgoraRTC.createClient`](https://api-ref.agora.io/en/video-sdk/web/4.x/interfaces/iagorartc.html#createclient) method.
* @example
* ```jsx
* import { useJoin } from "agora-rtc-react";
*
* function App() {
* // Example: passing a function as first argument
* // useJoin(async () => {
* // Fetch the token before joining the channel. Note that the data type of getData must be fetchArgs
* // const getData = await getToken();
* // return getData;
* // }, calling);
*
* useJoin(
* {
* appid: YOUR_APPID,
* channel: YOUR_CHANNEL,
* token: YOUR_TOKEN,
* },
* ready,
* );
*
* return <></>;
* }
* ```
*/
export function useJoin(
fetchArgs: FetchArgs,
ready = true,
client?: IAgoraRTCClient | null,
): { data: UID; isLoading: boolean; isConnected: boolean; error: AgoraRTCReactError | null } {
const resolvedClient = useRTCClient(client);
const isConnected = useIsConnected(client);
const [isLoading, setIsLoading] = useState(false);
const [joinResult, setJoinResult] = useState<UID>(0);
const [error, setError] = useState<AgoraRTCReactError | null>(null);
const isUnmountRef = useIsUnmounted();
useAsyncEffect(async () => {
if (!isUnmountRef.current) {
setError(null);
setJoinResult(0);
setIsLoading(false);
}
if (ready && resolvedClient) {
try {
if (!isUnmountRef.current) {
setIsLoading(true);
}
const { appid, channel, token, uid } =
typeof fetchArgs === "function" ? await fetchArgs() : fetchArgs;
const result = await resolvedClient.join(appid, channel, token, uid);
if (!isUnmountRef.current) {
setJoinResult(result);
}
} catch (err) {
console.error(err);
if (!isUnmountRef.current) {
setError(new AgoraRTCReactError("IAgoraRTCClient.join", err as IAgoraRTCError));
}
}
if (!isUnmountRef.current) {
setIsLoading(false);
}
return () => {
for (const track of resolvedClient.localTracks) {
if (track.isPlaying) {
track.stop();
}
track.close();
}
return resolvedClient.leave();
};
}
}, [ready, client]);
return {
data: joinResult,
isLoading: isLoading,
isConnected: isConnected,
error: error,
};
}