feat: useClientEvent add stream-message and `image-moderation-conne…

…ction-state-change`

examples/basic/src/components/Room.tsx

@@ -20,6 +20,7 @@ interface RoomProps {
   renderRemoteUsers?: () => ReactNode;
   micOn: boolean;
   cameraOn: boolean;
+  showUserInfo?: boolean;
 }
 
 export function Room({
@@ -28,6 +29,7 @@ export function Room({
   renderAction,
   renderLocalUser,
   renderRemoteUsers,
+  showUserInfo = true,
 }: RoomProps) {
   const isConnected = useIsConnected();
 
@@ -46,10 +48,12 @@ export function Room({
   return (
     <>
       {renderAction ? renderAction() : undefined}
-      <UsersInfo
-        published={publishedUsers.length + (selfPublished ? 1 : 0)}
-        total={remoteUsers.length + 1}
-      />
+      {showUserInfo && (
+        <UsersInfo
+          published={publishedUsers.length + (selfPublished ? 1 : 0)}
+          total={remoteUsers.length + 1}
+        />
+      )}
       <AutoLayout>
         {isConnected &&
           (renderLocalUser ? (

examples/basic/src/pages/hook/index.ts

@@ -1,5 +1,6 @@
 import UseAutoPlayAudioTrack from "./useAutoPlayAudioTrack";
 import UseAutoPlayVideoTrack from "./useAutoPlayVideoTrack";
+import UseClientEvent from "./useClientEvent";
 import UseConnectionState from "./useConnectionState";
 import UseCurrentUID from "./useCurrentUID";
 import UseIsConnected from "./useIsConnected";
@@ -49,6 +50,10 @@ const Hooks = [
     label: "useLocalScreenTrack",
     component: UseLocalScreenTrack,
   },
+  {
+    label: "UseClientEvent",
+    component: UseClientEvent,
+  },
 ];
 
 export { Hooks };

examples/basic/src/pages/hook/useClientEvent/index.tsx

@@ -0,0 +1,86 @@
+import type { ConnectionDisconnectedReason, ConnectionState } from "agora-rtc-react";
+import { useClientEvent, useJoin, useRTCClient } from "agora-rtc-react";
+import { List, Typography } from "antd";
+import { useEffect, useState } from "react";
+
+import { Container, MediaControl, Room } from "../../../components";
+import { appConfig } from "../../../utils";
+
+const { Title } = Typography;
+
+export const UseClientEvent = () => {
+  const [calling, setCalling] = useState(false);
+  const [logSink, setLogSink] = useState<
+    Array<{
+      eventName: string;
+      value: string;
+    }>
+  >([]);
+  const client = useRTCClient();
+  useClientEvent(
+    client,
+    "connection-state-change",
+    (
+      curState: ConnectionState,
+      revState: ConnectionState,
+      reason?: ConnectionDisconnectedReason,
+    ) => {
+      console.log(
+        `connection-state-change,curState: ${curState},revState: ${revState},reason: ${reason}`,
+      );
+      setLogSink(logs =>
+        logs.concat({
+          eventName: "connection-state-change",
+          value: `curState: ${curState},revState: ${revState},reason: ${reason}`,
+        }),
+      );
+    },
+  );
+
+  //local
+  useJoin(
+    {
+      appid: appConfig.appId,
+      channel: appConfig.channel,
+      token: appConfig.token,
+    },
+    calling,
+  );
+  const renderLocalUser = () => {
+    return <></>;
+  };
+
+  return (
+    <Container>
+      <div className="h-screen p-3">
+        <Title>UseClientEvent</Title>
+        <List
+          bordered
+          dataSource={logSink}
+          renderItem={item => (
+            <List.Item>
+              <Typography.Text mark>[{item.eventName}]</Typography.Text> {item.value}
+            </List.Item>
+          )}
+          style={{ height: "300px", overflow: "auto" }}
+        />
+      </div>
+      {calling && (
+        <Room
+          cameraOn={false}
+          micOn={false}
+          renderLocalUser={renderLocalUser}
+          showUserInfo={false}
+        />
+      )}
+      <MediaControl
+        calling={calling}
+        setCalling={() => {
+          setCalling(a => !a);
+        }}
+      />
+    </Container>
+  );
+};
+
+export default UseClientEvent;

package.json

@@ -71,7 +71,7 @@
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.7",
     "@types/testing-library__jest-dom": "^5.14.8",
-    "agora-rtc-sdk-ng": "4.20.0",
+    "agora-rtc-sdk-ng": "4.21.0",
     "agora-rtc-sdk-ng-fake": "github:AgoraIO-Extensions/agora-rtc-sdk-ng-fake#semver:^1.0.4",
     "react-test-renderer": "^18.2.0",
     "storybook": "^7.0.26",

packages/agora-rtc-react/package.json

@@ -54,7 +54,7 @@
   },
   "main": "src/index.ts",
   "devDependencies": {
-    "agora-rtc-sdk-ng": "4.20.0",
+    "agora-rtc-sdk-ng": "4.21.0",
     "agora-rtc-react-ui": "workspace:*"
   },
   "release-it": {

packages/agora-rtc-react/src/hooks/events.ts

@@ -26,6 +26,28 @@ import type { Fn, Nullable } from "../misc/utils";
 
 import { useIsomorphicLayoutEffect } from "./tools";
 
+/**
+ * Connection state between the SDK and the third-party video moderation service.
+ */
+export declare enum ImageModerationConnectionState {
+  /**
+   * The SDK is connecting to the third-party service.
+   */
+  CONNECTING = "CONNECTING",
+  /**
+   * The SDK is reconnecting to the third-party service.
+   */
+  RECONNECTING = "RECONNECTING",
+  /**
+   * The SDK is connected to the third-party service.
+   */
+  CONNECTED = "CONNECTED",
+  /**
+   * The SDK has disconnected from the third-party service.
+   */
+  CLOSED = "CLOSED",
+}
+
 /**
  * Occurs when the state of the connection between the SDK and the server changes.
  */
@@ -413,6 +435,27 @@ export function useClientEvent(
   event: "content-inspect-error",
   listener: Nullable<(error?: IAgoraRTCError) => void>,
 ): void;
+
+/**
+ * @ignore
+ */
+export function useClientEvent(
+  client: Nullable<IAgoraRTCClient>,
+  event: "image-moderation-connection-state-change",
+  listener: Nullable<
+    (newState: ImageModerationConnectionState, preState: ImageModerationConnectionState) => void
+  >,
+): void;
+
+/**
+ * Callback for receiving the DataStream message.
+ */
+export function useClientEvent(
+  client: Nullable<IAgoraRTCClient>,
+  event: "stream-message",
+  listener: Nullable<(uid: UID, payload: Uint8Array) => void>,
+): void;
+
 export function useClientEvent(
   client: Nullable<IAgoraRTCClient>,
   event: string,

packages/agora-rtc-react/src/hooks/useRemoteAudioTracks.ts

@@ -85,7 +85,7 @@ export function useRemoteAudioTracks(
         });
 
         if (!isUnmountRef.current) {
-          setTracks(nextTracks.current);
+          setTracks([...nextTracks.current]);
           setIsLoading(false);
         }
       }
@@ -95,7 +95,7 @@ export function useRemoteAudioTracks(
       if (users.some(({ uid }) => user.uid === uid)) {
         if (!isUnmountRef.current) {
           nextTracks.current = nextTracks.current.filter(track => track.getUserId() !== user.uid);
-          setTracks(nextTracks.current);
+          setTracks([...nextTracks.current]);
         }
         try {
           if (!isUnmountRef.current) {

packages/agora-rtc-react/src/hooks/useRemoteVideoTracks.ts

@@ -83,7 +83,7 @@ export function useRemoteVideoTracks(
           }
         });
         if (!isUnmountRef.current) {
-          setTracks(nextTracks.current);
+          setTracks([...nextTracks.current]);
           setIsLoading(false);
         }
       }
@@ -93,7 +93,7 @@ export function useRemoteVideoTracks(
       if (users.some(({ uid }) => user.uid === uid)) {
         if (!isUnmountRef.current) {
           nextTracks.current = nextTracks.current.filter(track => track.getUserId() !== user.uid);
-          setTracks(nextTracks.current);
+          setTracks([...nextTracks.current]);
         }
         try {
           if (!isUnmountRef.current) {

packages/agora-rtc-react/src/misc/listen.ts

@@ -20,6 +20,8 @@ import type {
   UID,
 } from "agora-rtc-sdk-ng";
 
+import type { ImageModerationConnectionState } from "../hooks";
+
 import type { Disposer, Fn } from "./utils";
 
 export declare enum InspectState {
@@ -542,6 +544,27 @@ export function listen(
   ) => void,
 ): Disposer;
 
+/**
+ * @ignore
+ */
+export function listen(
+  client: IAgoraRTCClient,
+  event: "image-moderation-connection-state-change",
+  listener: (
+    newState: ImageModerationConnectionState,
+    preState: ImageModerationConnectionState,
+  ) => void,
+): Disposer;
+
+/**
+ * Callback for receiving the DataStream message.
+ */
+export function listen(
+  client: IAgoraRTCClient,
+  event: "stream-message",
+  listener: (uid: UID, payload: Uint8Array) => void,
+): Disposer;
+
 /**
  * Occurs when a audio or video track ends.
  *