diff --git a/examples/basic/src/components/Room.tsx b/examples/basic/src/components/Room.tsx index ecdb95aa..ce7aa7de 100644 --- a/examples/basic/src/components/Room.tsx +++ b/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} - + {showUserInfo && ( + + )} {isConnected && (renderLocalUser ? ( diff --git a/examples/basic/src/pages/hook/index.ts b/examples/basic/src/pages/hook/index.ts index d37f7c06..e7ac8681 100644 --- a/examples/basic/src/pages/hook/index.ts +++ b/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 }; diff --git a/examples/basic/src/pages/hook/useClientEvent/index.tsx b/examples/basic/src/pages/hook/useClientEvent/index.tsx new file mode 100644 index 00000000..4a5ebdbb --- /dev/null +++ b/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 ( + +
+ UseClientEvent + ( + + [{item.eventName}] {item.value} + + )} + style={{ height: "300px", overflow: "auto" }} + /> +
+ {calling && ( + + )} + { + setCalling(a => !a); + }} + /> + + ); +}; + +export default UseClientEvent; diff --git a/package.json b/package.json index 927b1c68..2edf8ea3 100644 --- a/package.json +++ b/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", diff --git a/packages/agora-rtc-react/package.json b/packages/agora-rtc-react/package.json index d371380b..62826fa3 100644 --- a/packages/agora-rtc-react/package.json +++ b/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": { diff --git a/packages/agora-rtc-react/src/hooks/events.ts b/packages/agora-rtc-react/src/hooks/events.ts index ba6f6502..985953d8 100644 --- a/packages/agora-rtc-react/src/hooks/events.ts +++ b/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, + 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, + event: "stream-message", + listener: Nullable<(uid: UID, payload: Uint8Array) => void>, +): void; + export function useClientEvent( client: Nullable, event: string, diff --git a/packages/agora-rtc-react/src/hooks/useRemoteAudioTracks.ts b/packages/agora-rtc-react/src/hooks/useRemoteAudioTracks.ts index 68ba5ed4..23b3b365 100644 --- a/packages/agora-rtc-react/src/hooks/useRemoteAudioTracks.ts +++ b/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) { diff --git a/packages/agora-rtc-react/src/hooks/useRemoteVideoTracks.ts b/packages/agora-rtc-react/src/hooks/useRemoteVideoTracks.ts index ef482406..2e4027d1 100644 --- a/packages/agora-rtc-react/src/hooks/useRemoteVideoTracks.ts +++ b/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) { diff --git a/packages/agora-rtc-react/src/misc/listen.ts b/packages/agora-rtc-react/src/misc/listen.ts index 255e2450..7987bec9 100644 --- a/packages/agora-rtc-react/src/misc/listen.ts +++ b/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. * diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 62f8d8d0..3f5d75c4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -95,8 +95,8 @@ importers: specifier: ^0.34.6 version: 0.34.6(vitest@0.34.6) agora-rtc-sdk-ng: - specifier: 4.20.0 - version: 4.20.0 + specifier: 4.21.0 + version: 4.21.0 agora-rtc-sdk-ng-fake: specifier: github:AgoraIO-Extensions/agora-rtc-sdk-ng-fake#semver:^1.0.4 version: github.com/AgoraIO-Extensions/agora-rtc-sdk-ng-fake/ab8f42f2b5c11d530b680c4da70f24eeead999ab @@ -174,7 +174,7 @@ importers: version: 5.1.6 vite: specifier: ^4.5.2 - version: 4.5.2(@types/node@20.5.0) + version: 4.5.2(@types/node@20.5.0)(sass@1.64.0) vitest: specifier: ^0.34.6 version: 0.34.6(@vitest/ui@0.34.6)(jsdom@22.1.0) @@ -241,7 +241,7 @@ importers: version: 13.3.2(sass@1.64.0)(webpack@5.89.0) unocss: specifier: ^0.53.5 - version: 0.53.5(postcss@8.4.31)(vite@4.5.1) + version: 0.53.5(postcss@8.4.31)(vite@4.5.2) examples/mobx: dependencies: @@ -287,10 +287,10 @@ importers: version: 4.1.1 unocss: specifier: ^0.53.5 - version: 0.53.5(postcss@8.4.31)(vite@4.5.1) + version: 0.53.5(postcss@8.4.31)(vite@4.5.2) vite-plugin-externals: specifier: ^0.6.2 - version: 0.6.2(vite@4.5.1) + version: 0.6.2(vite@4.5.2) packages/agora-rtc-react: dependencies: @@ -302,8 +302,8 @@ importers: specifier: workspace:* version: link:../agora-rtc-react-ui agora-rtc-sdk-ng: - specifier: 4.20.0 - version: 4.20.0 + specifier: 4.21.0 + version: 4.21.0 packages/agora-rtc-react-ui: dependencies: @@ -326,32 +326,32 @@ packages: resolution: {integrity: sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==} dev: true - /@agora-js/media@4.20.0: - resolution: {integrity: sha512-cprH3BmxiM2fEbbdSORCv0/LMl+7R4Zq5MUbCCRV4/BWDoDL+Fdp5otUi1GOoVV4jWNepDl7pkOOH64IfJ1n0Q==} + /@agora-js/media@4.21.0: + resolution: {integrity: sha512-X4aV84/gB4O7GOOkwP3+NGTHtT2IVkpa4DFBTlBNl7hrkjDwUeanzCQZyva92Zyw59N0NI6dKh9CjJKoIL5Now==} dependencies: - '@agora-js/report': 4.20.0 - '@agora-js/shared': 4.20.0 + '@agora-js/report': 4.21.0 + '@agora-js/shared': 4.21.0 agora-rte-extension: 1.2.4 - axios: 0.27.2 + axios: 1.7.2 pako: 2.1.0 webrtc-adapter: 8.2.0 transitivePeerDependencies: - debug dev: true - /@agora-js/report@4.20.0: - resolution: {integrity: sha512-TaY+4M1qEdAtM4xmYDUlmzQdGmao23ljnrcBGtS1BXdTrDTH/GbN6+/NAng5Zp5TmBniYwpMHvfPwfVW9LX8Gg==} + /@agora-js/report@4.21.0: + resolution: {integrity: sha512-c8KIdomuPItwvri431z5CPT7L4m+jLJrwWWt/QS3JN+sp/t49NnoOIyKQf3y5xCbyNPCNNeGofrwkaIRu4YE8g==} dependencies: - '@agora-js/shared': 4.20.0 - axios: 0.27.2 + '@agora-js/shared': 4.21.0 + axios: 1.7.2 transitivePeerDependencies: - debug dev: true - /@agora-js/shared@4.20.0: - resolution: {integrity: sha512-+Em8k8MJsYlZ5ItqJidXHdNbn/vmQi3/P0hjh0jsHsMZLwz0l9kETbo5Q7Lq/so8IyrHQw4DoK5Jen0/B4uW4w==} + /@agora-js/shared@4.21.0: + resolution: {integrity: sha512-oqaiuIhG9ai/NXUDEmj9b3uGxxU9I0OZZszNaJexjakJuVZPM7ypzrCLUi5SzkTh++QOf68yuvD488fjq5WQsA==} dependencies: - axios: 0.27.2 + axios: 1.7.2 ua-parser-js: 0.7.36 transitivePeerDependencies: - debug @@ -3631,7 +3631,7 @@ packages: magic-string: 0.27.0 react-docgen-typescript: 2.2.2(typescript@5.1.6) typescript: 5.1.6 - vite: 4.5.2(@types/node@20.5.0) + vite: 4.5.2(@types/node@20.5.0)(sass@1.64.0) dev: true /@jridgewell/gen-mapping@0.3.3: @@ -4413,7 +4413,7 @@ packages: remark-slug: 6.1.0 rollup: 3.29.4 typescript: 5.1.6 - vite: 4.5.2(@types/node@20.5.0) + vite: 4.5.2(@types/node@20.5.0)(sass@1.64.0) transitivePeerDependencies: - encoding - supports-color @@ -4789,7 +4789,7 @@ packages: react: 18.2.0 react-docgen: 6.0.0-alpha.3 react-dom: 18.2.0(react@18.2.0) - vite: 4.5.2(@types/node@20.5.0) + vite: 4.5.2(@types/node@20.5.0)(sass@1.64.0) transitivePeerDependencies: - '@preact/preset-vite' - encoding @@ -5437,12 +5437,12 @@ packages: eslint-visitor-keys: 3.4.3 dev: true - /@unocss/astro@0.53.5(vite@4.5.1): + /@unocss/astro@0.53.5(vite@4.5.2): resolution: {integrity: sha512-W4A0uIN4xAzVH6Vwf5ukG8rJpCeIwQZcpZPrEBWsqY5YcHZcLTFGMHcNmxyeG0qoXpXoxtvHyXXhgGU0BY5ZEw==} dependencies: '@unocss/core': 0.53.5 '@unocss/reset': 0.53.5 - '@unocss/vite': 0.53.5(vite@4.5.1) + '@unocss/vite': 0.53.5(vite@4.5.2) transitivePeerDependencies: - rollup - vite @@ -5606,7 +5606,7 @@ packages: '@unocss/core': 0.53.5 dev: true - /@unocss/vite@0.53.5(vite@4.5.1): + /@unocss/vite@0.53.5(vite@4.5.2): resolution: {integrity: sha512-ez0MVRatewLUQq79LI+XRAVRbXWaGbK1K1ht2B8vGyL9OrL6uieEwzxjHV7+rUa8i+FEHfD4Ntmtdpb3WuQSAA==} peerDependencies: vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 @@ -5621,7 +5621,7 @@ packages: chokidar: 3.5.3 fast-glob: 3.3.1 magic-string: 0.30.5 - vite: 4.5.1(@types/node@20.5.0)(sass@1.64.0) + vite: 4.5.2(@types/node@20.5.0)(sass@1.64.0) transitivePeerDependencies: - rollup dev: true @@ -5637,7 +5637,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.23.2) magic-string: 0.27.0 react-refresh: 0.14.0 - vite: 4.5.2(@types/node@20.5.0) + vite: 4.5.2(@types/node@20.5.0)(sass@1.64.0) transitivePeerDependencies: - supports-color dev: true @@ -5653,7 +5653,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.23.2) '@types/babel__core': 7.20.3 react-refresh: 0.14.0 - vite: 4.5.2(@types/node@20.5.0) + vite: 4.5.2(@types/node@20.5.0)(sass@1.64.0) transitivePeerDependencies: - supports-color dev: true @@ -5965,14 +5965,14 @@ packages: indent-string: 4.0.0 dev: true - /agora-rtc-sdk-ng@4.20.0: - resolution: {integrity: sha512-jgMn6NXuFKQ0nVkLP2hGn+Asxbx+DSV0gn5PY6X0iF7LC2xqsqEzGhehLASxliS81JjhMNKE72hHEzrQn0qtvQ==} + /agora-rtc-sdk-ng@4.21.0: + resolution: {integrity: sha512-EAZMdhbqIXl/PtFqEQn0O5Pmj3Tt+4oTXtd76MK1CozgbcDsc0TmFZK3qM25eaKqhzTz1wiVCwzBCWs3pF5OpQ==} dependencies: - '@agora-js/media': 4.20.0 - '@agora-js/report': 4.20.0 - '@agora-js/shared': 4.20.0 + '@agora-js/media': 4.21.0 + '@agora-js/report': 4.21.0 + '@agora-js/shared': 4.21.0 agora-rte-extension: 1.2.4 - axios: 0.27.2 + axios: 1.7.2 formdata-polyfill: 4.0.10 ua-parser-js: 0.7.36 webrtc-adapter: 8.2.0 @@ -6354,11 +6354,12 @@ packages: engines: {node: '>= 0.4'} dev: true - /axios@0.27.2: - resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==} + /axios@1.7.2: + resolution: {integrity: sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==} dependencies: - follow-redirects: 1.15.3 + follow-redirects: 1.15.6 form-data: 4.0.0 + proxy-from-env: 1.1.0 transitivePeerDependencies: - debug dev: true @@ -8617,8 +8618,8 @@ packages: engines: {node: '>=0.4.0'} dev: true - /follow-redirects@1.15.3: - resolution: {integrity: sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==} + /follow-redirects@1.15.6: + resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==} engines: {node: '>=4.0'} peerDependencies: debug: '*' @@ -14053,7 +14054,7 @@ packages: engines: {node: '>= 10.0.0'} dev: true - /unocss@0.53.5(postcss@8.4.31)(vite@4.5.1): + /unocss@0.53.5(postcss@8.4.31)(vite@4.5.2): resolution: {integrity: sha512-LXAdtzAaH8iEDWxW4t9i6TvJNw0OSrgdN+jw8rAZAWb73Nx51ZLoKPUB1rFvQMr2Li7LcsUj5hYpOrQbhhafYg==} engines: {node: '>=14'} peerDependencies: @@ -14062,7 +14063,7 @@ packages: '@unocss/webpack': optional: true dependencies: - '@unocss/astro': 0.53.5(vite@4.5.1) + '@unocss/astro': 0.53.5(vite@4.5.2) '@unocss/cli': 0.53.5 '@unocss/core': 0.53.5 '@unocss/extractor-arbitrary-variants': 0.53.5 @@ -14081,7 +14082,7 @@ packages: '@unocss/transformer-compile-class': 0.53.5 '@unocss/transformer-directives': 0.53.5 '@unocss/transformer-variant-group': 0.53.5 - '@unocss/vite': 0.53.5(vite@4.5.1) + '@unocss/vite': 0.53.5(vite@4.5.2) transitivePeerDependencies: - postcss - rollup @@ -14252,7 +14253,7 @@ packages: mlly: 1.4.2 pathe: 1.1.1 picocolors: 1.0.0 - vite: 4.5.2(@types/node@20.5.0) + vite: 4.5.2(@types/node@20.5.0)(sass@1.64.0) transitivePeerDependencies: - '@types/node' - less @@ -14264,7 +14265,7 @@ packages: - terser dev: true - /vite-plugin-externals@0.6.2(vite@4.5.1): + /vite-plugin-externals@0.6.2(vite@4.5.2): resolution: {integrity: sha512-R5oVY8xDJjLXLTs2XDYzvYbc/RTZuIwOx2xcFbYf+/VXB6eJuatDgt8jzQ7kZ+IrgwQhe6tU8U2fTyy72C25CQ==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: @@ -14274,47 +14275,10 @@ packages: es-module-lexer: 0.4.1 fs-extra: 10.1.0 magic-string: 0.25.9 - vite: 4.5.1(@types/node@20.5.0)(sass@1.64.0) + vite: 4.5.2(@types/node@20.5.0)(sass@1.64.0) dev: true - /vite@4.5.1(@types/node@20.5.0)(sass@1.64.0): - resolution: {integrity: sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==} - engines: {node: ^14.18.0 || >=16.0.0} - hasBin: true - peerDependencies: - '@types/node': '>= 14' - less: '*' - lightningcss: ^1.21.0 - sass: '*' - stylus: '*' - sugarss: '*' - terser: ^5.4.0 - peerDependenciesMeta: - '@types/node': - optional: true - less: - optional: true - lightningcss: - optional: true - sass: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true - dependencies: - '@types/node': 20.5.0 - esbuild: 0.18.20 - postcss: 8.4.31 - rollup: 3.29.4 - sass: 1.64.0 - optionalDependencies: - fsevents: 2.3.3 - dev: true - - /vite@4.5.2(@types/node@20.5.0): + /vite@4.5.2(@types/node@20.5.0)(sass@1.64.0): resolution: {integrity: sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -14346,6 +14310,7 @@ packages: esbuild: 0.18.20 postcss: 8.4.31 rollup: 3.29.4 + sass: 1.64.0 optionalDependencies: fsevents: 2.3.3 dev: true @@ -14413,7 +14378,7 @@ packages: strip-literal: 1.3.0 tinybench: 2.5.1 tinypool: 0.7.0 - vite: 4.5.2(@types/node@20.5.0) + vite: 4.5.2(@types/node@20.5.0)(sass@1.64.0) vite-node: 0.34.6(@types/node@20.5.0) why-is-node-running: 2.2.2 transitivePeerDependencies: