improvements after review

fishjam-cloud · Sep 17, 2024 · f6a9f97 · f6a9f97
1 parent 2ff2066
commit f6a9f97
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 21 deletions.
diff --git a/guide/react/connecting.mdx b/guide/react/connecting.mdx
@@ -15,14 +15,16 @@ Use the `useConnect` hook to get the `connect` function.
 ```ts
 import { connect } from "@fishjam-cloud/react-native-client";
 
-const connect = useConnect();
-
-const joinRoom = async () => {
-  await connect({
-    token: PARTICIPANT_TOKEN,
-    url: FISHJAM_URL,
-  });
-};
+function Component() {
+  const connect = useConnect();
+
+  const joinRoom = async () => {
+    await connect({
+      token: PARTICIPANT_TOKEN,
+      url: FISHJAM_URL,
+    });
+  };
+}
 ```
 
 ## Disconnecting

diff --git a/guide/react/installation.mdx b/guide/react/installation.mdx
@@ -16,7 +16,7 @@ Install `@fishjam-cloud/react-client` package:
   <TabItem value="npm" label="NPM">
 
     ```
-    npm install @fishjam-cloud/react-native-client
+    npm install @fishjam-cloud/react-client
     ```
 
   </TabItem>

diff --git a/guide/react/list-other.mdx b/guide/react/list-other.mdx
@@ -11,6 +11,7 @@ They contain all tracks of other participants and all tracks of the local user,
 ### Example of playing all available media
 
 ```tsx
+import React from "react";
 import { useParticipants } from "@fishjam-cloud/react-client";
 
 function Component() {
@@ -20,21 +21,23 @@ function Component() {
 
   return (
       <ul>
-        {allParticipants.map((p) => {
+        {allParticipants.flatMap((p) => {
           const videoTracks = [...p.videoTracks, ...p.screenshareVideoTracks];
           const audioTracks = [...p.audioTracks, ...p.screenshareAudioTracks];
 
-          return (
-              <li key={p.id}>
-                {videoTracks.map(({ stream, trackId }) => (
-                  <VideoRenderer key={trackId} stream={stream} />
-                ))}
-
-                {audioTracks.map(({ stream, trackId }) => (
-                  <AudioPlayer key={trackId} stream={stream} />
-                ))}
-              </li>
-            ))
+          const videoTrackElements = videoTracks.map(({ stream, trackId }) => (
+            <li key={trackId}>
+              <VideoRenderer stream={stream} />
+            </li>
+          ));
+
+          const audioTrackElements = videoTracks.map(({ stream, trackId }) => (
+            <li key={trackId}>
+              <AudioPlayer stream={stream} />
+            </li>
+          ));
+
+          return [...videoTrackElements, ...audioTrackElements];
         }}
       </ul>
   );