Update useParticipiants to show all video tracks (#67)

## Description

For random reason, `useParticipiants` only returned single audio/video
track per peer. This change updates code so it returns all tracks.

I also refactored videoroom example, to extract `App` into smaller
components.


## Motivation and Context

Fix bug, that prevented testing videoshare

## Types of changes

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to
      not work as expected)

examples/react-client/videoroom/src/App.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from "react";
 import { useClient, useParticipants } from "./client";
-import { DevicePicker } from "./DevicePicker";
-import { RoomConnector } from "./RoomConnector";
-import VideoPlayer from "./VideoPlayer";
-import AudioPlayer from "./AudioPlayer";
+import { DevicePicker } from "./components/DevicePicker";
+import { RoomConnector } from "./components/RoomConnector";
+import { VideoTracks } from "./components/VideoTracks";
+import { AudioTracks } from "./components/AudioTracks";
 
 function App() {
   const client = useClient();
@@ -15,7 +15,6 @@ function App() {
       audioTrackConstraints: true,
     });
   }, [client]);
-
   return (
     <main className="w-screen h-screen flex">
       <section className="w-1/3 bg-zinc-200 p-4 h-full space-y-8">
@@ -29,51 +28,23 @@ function App() {
       <div className="w-full h-full p-4">
         <section className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
           {localParticipant && (
-            <div className="aspect-video overflow-hidden grid place-content-center bg-zinc-300 rounded-md relative">
-              {localParticipant.videoTrack && (
-                <VideoPlayer
-                  className="rounded-md z-20"
-                  key={localParticipant.videoTrack.trackId}
-                  stream={localParticipant.videoTrack.stream}
-                  peerId={"0"}
-                />
-              )}
-
-              <div className="absolute bottom-2 left-0 w-full grid place-content-center text-center text-xs z-30">
-                <p className="bg-slate-100/60 px-1 rounded-sm">You</p>
-              </div>
-            </div>
+            <VideoTracks
+              videoTracks={localParticipant.videoTracks}
+              name="You"
+              id="0"
+            />
           )}
 
-          {participants.map(({ id, audioTrack, videoTrack, metadata }) => {
-            return (
-              <div
-                className="aspect-video overflow-hidden grid place-content-center relative bg-zinc-300 rounded-md"
-                style={{
-                  outline:
-                    audioTrack?.vadStatus === "speech" ? "solid red 2px" : "",
-                }}
-                key={id}
-              >
-                {audioTrack && <AudioPlayer stream={audioTrack.stream} />}
-
-                {videoTrack && (
-                  <VideoPlayer
-                    className="rounded-md z-20"
-                    key={videoTrack.trackId}
-                    stream={videoTrack.stream}
-                    peerId={id}
-                  />
-                )}
-
-                <div className="absolute bottom-2 left-0 w-full grid place-content-center text-center text-xs z-30">
-                  <p className="bg-slate-100/60 px-1 rounded-sm">
-                    {(metadata as { name?: string })?.name ?? id}
-                  </p>
-                </div>
-              </div>
-            );
-          })}
+          {participants.map(({ id, videoTracks, metadata }) => (
+            <VideoTracks
+              videoTracks={videoTracks}
+              name={(metadata as { name?: string })?.name ?? id}
+              id={id}
+            />
+          ))}
+          {participants.map(({ id, audioTracks }) => (
+            <AudioTracks audioTracks={audioTracks} key={id} />
+          ))}
         </section>
       </div>
     </main>

examples/react-client/videoroom/src/components/AudioTracks.tsx

@@ -0,0 +1,12 @@
+import AudioPlayer from "./AudioPlayer";
+import { Track } from "@fishjam-cloud/react-client";
+
+type Props = {
+  audioTracks: Track<unknown>[] | undefined;
+};
+
+export function AudioTracks({ audioTracks }: Props) {
+  return audioTracks?.map((audioTrack) => (
+    <AudioPlayer stream={audioTrack.stream} key={audioTrack.trackId} />
+  ));
+}

examples/react-client/videoroom/src/DevicePicker.tsx → examples/react-client/videoroom/src/components/DevicePicker.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import AudioVisualizer from "./AudioVisualizer";
-import { useCamera, useMicrophone, useScreenShare, useStatus } from "./client";
+import { useCamera, useMicrophone, useScreenShare, useStatus } from "../client";
 import VideoPlayer from "./VideoPlayer";
 import { GenericTrackManager, UserMediaAPI } from "@fishjam-cloud/react-client";
 import { Button } from "./Button";

examples/react-client/videoroom/src/RoomConnector.tsx → examples/react-client/videoroom/src/components/RoomConnector.tsx

@@ -1,5 +1,5 @@
 import { Button } from "./Button";
-import { useConnect, useStatus, useDisconnect } from "./client";
+import { useConnect, useStatus, useDisconnect } from "../client";
 
 type FormProps = {
   roomName: string;

examples/react-client/videoroom/src/components/VideoTracks.tsx

@@ -0,0 +1,30 @@
+import VideoPlayer from "./VideoPlayer";
+import { Track } from "@fishjam-cloud/react-client";
+
+type Props = {
+  id: string;
+  name: string;
+  videoTracks: Track<unknown>[];
+};
+
+export function VideoTracks({ videoTracks, name, id }: Props) {
+  return videoTracks.map((videoTrack) => (
+    <div
+      className="aspect-video overflow-hidden grid place-content-center relative bg-zinc-300 rounded-md"
+      key={videoTrack.trackId}
+    >
+      {videoTrack && (
+        <VideoPlayer
+          className="rounded-md z-20"
+          key={videoTrack.trackId}
+          stream={videoTrack.stream}
+          peerId={id}
+        />
+      )}
+
+      <div className="absolute bottom-2 left-0 w-full grid place-content-center text-center text-xs z-30">
+        <p className="bg-slate-100/60 px-1 rounded-sm">{name}</p>
+      </div>
+    </div>
+  ));
+}

packages/react-client/src/create.tsx

@@ -207,10 +207,10 @@ export function create<PeerMetadata, TrackMetadata>(
   ): PeerStateWithTracks<PeerMetadata, TrackMetadata> {
     const localTracks = Object.values(peerState.tracks ?? {});
 
-    const videoTrack = localTracks.find(({ track }) => track?.kind === "video");
-    const audioTrack = localTracks.find(({ track }) => track?.kind === "audio");
+    const videoTracks = localTracks.filter(({ track }) => track?.kind === "video");
+    const audioTracks = localTracks.filter(({ track }) => track?.kind === "audio");
 
-    return { ...peerState, videoTrack, audioTrack };
+    return { ...peerState, videoTracks, audioTracks };
   }
 
   function useParticipants() {

packages/react-client/src/types.ts

@@ -216,8 +216,8 @@ export type FishjamContextType<PeerMetadata, TrackMetadata> = {
 export type UseConnect<PeerMetadata> = (config: ConnectConfig<PeerMetadata>) => () => void;
 
 type DistinguishedTracks<TrackMetadata> = {
-  videoTrack?: Track<TrackMetadata>;
-  audioTrack?: Track<TrackMetadata>;
+  videoTracks: Track<TrackMetadata>[];
+  audioTracks: Track<TrackMetadata>[];
 };
 
 export type PeerStateWithTracks<PeerMetadata, TrackMetadata> = PeerState<PeerMetadata, TrackMetadata> &