Merge pull request #252 from ddhp/react-demo-minor-fixes

minor fixes for React demo
AgoraIO · Jan 30, 2021 · efe7c83 · efe7c83
2 parents b1c595c + d8c70d3
commit efe7c83
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/One-to-One-Video/Agora-Web-Tutorial-1to1-React/src/App.tsx b/One-to-One-Video/Agora-Web-Tutorial-1to1-React/src/App.tsx
@@ -200,6 +200,9 @@ function App() {
  // initializes the client with appId
  await client.init(state.appId);
 
+ // TBC: some errors in client.join might be caught without throwing the error again
+ // e.g invalid token
+ // which causing error handling in this function not working
  // joins a channel with a token, channel, user id
  await client.join(state.token, state.channel, uid);
 

diff --git a/One-to-One-Video/Agora-Web-Tutorial-1to1-React/src/hooks/useMediaStream.ts b/One-to-One-Video/Agora-Web-Tutorial-1to1-React/src/hooks/useMediaStream.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 
 const useMediaStream = (client: any, filter?: (streamId: number) => boolean): any[] => {
  const [localStream, setLocalStream] = useState<any>(undefined);
@@ -16,14 +16,16 @@ const useMediaStream = (client: any, filter?: (streamId: number) => boolean): an
  };
  // remove stream
  const removeRemote = (evt: any) => {
- const { stream } = evt;
- if (stream) {
- const id = stream.getId();
- const index = remoteStreamList.findIndex(item => item.getId() === id);
+ const { stream, uid } = evt;
+ // when "peer-leave", stream is undefined
+ const targetId = stream ? stream.getId() : uid;
+ if (targetId) {
+ const index = remoteStreamList.findIndex(item => item.getId() === targetId);
  if (index !== -1) {
  setRemoteStreamList(streamList => {
  streamList.splice(index, 1);
- return streamList;
+ // a new reference in order to re-render
+ return [...streamList];
  });
  }
  }
@@ -79,9 +81,11 @@ const useMediaStream = (client: any, filter?: (streamId: number) => boolean): an
  client.gatewayClient.removeEventListener("stream-removed", removeRemote);
  }
  };
- }, [client, filter]);
+ // a missing dependency
+ }, [client, filter, remoteStreamList]);
 
- return [localStream, remoteStreamList, [localStream].concat(remoteStreamList)];
+ // memorization for better performance
+ return useMemo(() => [localStream, remoteStreamList], [localStream, remoteStreamList]);
 };
 
 export default useMediaStream;