Update react-client-sdk, fix room state viewer, remove media cards (#57)

fishjam-dev · Oct 31, 2023 · 42bd04d · 42bd04d
1 parent c9965d0
commit 42bd04d
Show file tree

Hide file tree

Showing 13 changed files with 136 additions and 120 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "lint": "eslint . --ext .ts,.tsx"
   },
   "dependencies": {
-    "@jellyfish-dev/react-client-sdk": "0.1.3",
+    "@jellyfish-dev/react-client-sdk": "^0.1.5",
     "@types/chartist": "^1.0.0",
     "@types/ramda": "^0.29.3",
     "axios": "^1.3.4",

diff --git a/src/components/AudioDevicePanel.tsx b/src/components/AudioDevicePanel.tsx
@@ -15,9 +15,9 @@ export const AudioDevicePanel = ({
   addLocalAudioStream,
   setSelectedAudioId,
 }: AudioDevicePanelProps) => (
-  <div className="card-body p-1 flex bg-base-100 shadow-xl m-2 w-full flex-row rounded-md flex-1 items-center indicator">
+  <div className="flex w-full flex-row flex-1 items-center gap-2">
     <button
-      className="btn btn-success btn-sm m-2"
+      className="btn btn-success btn-sm"
       onClick={() => {
         const id = deviceId + crypto.randomUUID();
         getUserMedia(id, "audio").then((stream) => {

diff --git a/src/components/CameraTest.tsx b/src/components/CameraTest.tsx
@@ -122,7 +122,7 @@ export const CameraTest = () => {
               <div>
                 <button
                   type="button"
-                  className="btn btn-success btn-sm m-2"
+                  className="btn btn-success btn-sm"
                   disabled={!selectedCameraId || !!cameraState.stream}
                   onClick={() => {
                     if (cameraId) {

diff --git a/src/components/MockVideoPanel.tsx b/src/components/MockVideoPanel.tsx
@@ -55,12 +55,12 @@ export const MockVideoPanel = ({ addLocalVideoStream, setSelectedDeviceId, id }:
   const [mockQuality, setMockQuality] = useState<Quality>(defaultMockQuality);
 
   return (
-    <div className="flex card-body  bg-base-100 shadow-xl rounded-md flex-row flex-wrap gap-2 p-4">
-      <div className=" p-1 flex m-2 w-full flex-row flex-1 items-center justify-evenly">
+    <div className="flex flex-row flex-wrap gap-2">
+      <div className="flex w-full flex-row flex-1 items-center justify-between">
         {mockStreams.map((stream, index) => (
           <button
             key={index}
-            className="btn btn-sm btn-success m-2"
+            className="btn btn-sm btn-success"
             onClick={() => {
               const uuid = crypto.randomUUID();
               const stream = mockStreams[index].create().stream;

diff --git a/src/components/ScreensharingPanel.tsx b/src/components/ScreensharingPanel.tsx
@@ -18,9 +18,9 @@ const SCREEENSHARING_VIDEO_CONSTRAINTS = {
 export const ScreensharingPanel = ({ label, addLocalStream, setSelectedDeviceId }: ScreensharingPanelProps) => {
   const [screenshareAudio, setScreenshareAudio] = useState<boolean>(false);
   return (
-    <div className="card-body p-1 flex bg-base-100 shadow-xl m-2 w-full flex-row rounded-md flex-1 items-center ">
+    <div className="flex w-full flex-row rounded-md flex-1 items-center gap-2">
       <button
-        className="btn btn-success btn-sm m-2"
+        className="btn btn-success btn-sm"
         onClick={() => {
           const videoId = "screenshare_" + crypto.randomUUID();
           const audioId = "screenshare_" + crypto.randomUUID();
@@ -47,16 +47,20 @@ export const ScreensharingPanel = ({ label, addLocalStream, setSelectedDeviceId
         Start
         <TbScreenShare className="ml-2" size="25" />
       </button>
-      <div className="p-1">{label}</div>
-      <span className="text ml-2">Screenshare audio:</span>
-      <input
-        type="checkbox"
-        className="checkbox"
-        checked={screenshareAudio}
-        onChange={() => {
-          setScreenshareAudio(!screenshareAudio);
-        }}
-      />
+      <div className="flex flex-row gap-1">
+        <div className="">{label}</div>
+        <span className="text">(Audio</span>
+
+        <input
+          type="checkbox"
+          className="checkbox checkbox-sm"
+          checked={screenshareAudio}
+          onChange={() => {
+            setScreenshareAudio(!screenshareAudio);
+          }}
+        />
+        <span className="text">)</span>
+      </div>
     </div>
   );
 };
diff --git a/src/components/StreamingDeviceSelector.tsx b/src/components/StreamingDeviceSelector.tsx
@@ -30,10 +30,10 @@ export const StreamingDeviceSelector = ({
   const [enumerateDevicesState, setEnumerateDevicesState] = useState<EnumerateDevices | null>(null);
 
   return (
-    <div>
+    <div className="flex flex-col gap-2">
       {enumerateDevicesState?.video?.type !== "OK" && (
         <button
-          className="btn btn-sm btn-info my-2 w-full"
+          className="btn btn-sm btn-info w-full"
           onClick={() => {
             enumerateDevices({}, {})
               .then((result) => {
@@ -51,7 +51,7 @@ export const StreamingDeviceSelector = ({
         </button>
       )}
 
-      <div className="flex place-content-center align-baseline flex-col  flex-wrap w-full">
+      <div className="flex place-content-center align-baseline flex-col flex-wrap w-full gap-3">
         {enumerateDevicesState?.video.type === "OK" &&
           enumerateDevicesState.video.devices.map(({ deviceId, label }) => (
             <div key={deviceId} className="join-item w-full">

diff --git a/src/components/VideoDevicePanel.tsx b/src/components/VideoDevicePanel.tsx
@@ -14,9 +14,9 @@ export const VideoDevicePanel = ({
   addLocalVideoStream,
   setSelectedVideoId,
 }: VideoDevicePanelProps) => (
-  <div className="card-body p-1 flex bg-base-100 shadow-xl m-2 w-full flex-row rounded-md flex-1 items-center ">
+  <div className="flex w-full flex-row flex-1 items-center gap-2">
     <button
-      className="btn btn-success btn-sm m-2"
+      className="btn btn-success btn-sm"
       onClick={() => {
         const id = deviceId + crypto.randomUUID();
         getUserMedia(deviceId, "video").then((stream) => {

diff --git a/src/containers/Client.tsx b/src/containers/Client.tsx
@@ -159,7 +159,7 @@ export const Client = ({ roomId, peerId, token, id, refetchIfNeeded, remove, rem
       track,
       trackInfo.stream,
       attachMetadata ? JSON.parse(trackMetadata?.trim() || DEFAULT_TRACK_METADATA(trackInfo.type)) : undefined,
-      { enabled: trackInfo.type === "video" && simulcastTransfer, active_encodings: currentEncodings },
+      { enabled: trackInfo.type === "video" && simulcastTransfer, activeEncodings: currentEncodings },
       parseInt(maxBandwidth || "0") || undefined,
     );
     dispatch({
@@ -386,7 +386,7 @@ export const Client = ({ roomId, peerId, token, id, refetchIfNeeded, remove, rem
           <div className="card-body p-4">
             <h1 className="card-title">Remote tracks:</h1>
             {Object.values(fullState?.tracks || {}).map(
-              ({ trackId, metadata, origin, stream, vadStatus, encoding, track }) => {
+              ({ trackId, metadata, origin, stream, vadStatus, encoding, track, simulcastConfig }) => {
                 return (
                   <div key={trackId}>
                     <h4>From: {origin.id}</h4>
@@ -401,6 +401,7 @@ export const Client = ({ roomId, peerId, token, id, refetchIfNeeded, remove, rem
                         trackMetadata={metadata}
                         changeEncodingReceived={changeEncodingReceived}
                         kind={track?.kind}
+                        simulcastConfig={simulcastConfig}
                       />
                     </div>
                   </div>

diff --git a/src/containers/ReceivedTrackPanel.tsx b/src/containers/ReceivedTrackPanel.tsx
@@ -1,13 +1,14 @@
 import { JsonComponent } from "../components/JsonComponent";
 import { TrackMetadata } from "../jellyfish.types";
 import { useState } from "react";
-import { TrackEncoding } from "@jellyfish-dev/react-client-sdk";
+import { SimulcastConfig, TrackEncoding } from "@jellyfish-dev/react-client-sdk";
 import { CopyToClipboardButton } from "../components/CopyButton";
 import VideoPlayer from "../components/VideoPlayer";
 import { atomFamily } from "jotai/utils";
 import { atom, useAtom } from "jotai";
 import AudioVisualizer from "../components/AudioVisualizer";
 import { BiSolidVolumeMute, BiSolidVolumeFull } from "react-icons/bi";
+
 type TrackPanelProps = {
   clientId: string;
   trackId: string;
@@ -17,6 +18,7 @@ type TrackPanelProps = {
   vadStatus: string | null;
   encodingReceived: TrackEncoding | null;
   kind: string | undefined;
+  simulcastConfig: SimulcastConfig | null;
 };
 
 const activeSimulcastAtom = atomFamily(() => atom(""));
@@ -30,6 +32,7 @@ export const ReceivedTrackPanel = ({
   encodingReceived,
   kind,
   changeEncodingReceived,
+  simulcastConfig,
 }: TrackPanelProps) => {
   const [simulcastReceiving, setSimulcastReceiving] = useAtom(activeSimulcastAtom(trackId));
   const [muted, setMuted] = useState<boolean>(false);
@@ -41,61 +44,63 @@ export const ReceivedTrackPanel = ({
         <CopyToClipboardButton text={trackId} />
       </label>
       {kind === "video" ? (
-        <div className="flex flex-row indicator justify-between">
+        <div className="flex flex-row indicator justify-between gap-2">
           <VideoPlayer size={"48"} stream={stream} />
-          <div className="ml-2 flex place-content-center flex-col ">
-            <h1 className="text-lg ml-3">Simulcast:</h1>
-            <div className="flex flex-row flex-wrap">
-              <h1 className="ml-1 text-lg">Current encoding:</h1>
-              <h1 className="ml-3 text-lg">{encodingReceived}</h1>
+          <div className="flex place-content-center flex-col ">
+            <h1 className="text-lg">Simulcast: {simulcastConfig?.enabled ? "true" : "false"} </h1>
+            <div className="flex flex-row flex-wrap gap-2">
+              <span className="text-lg">Current encoding:</span>
+              <span className="text-lg">{encodingReceived}</span>
             </div>
-            <div className="flex flex-row flex-wrap">
-              <h1 className="ml-1 align-middle place-items-center flex text-lg">Encoding preference:</h1>
-              <div className="flex flex-row flex-wrap w-44 ml-2 justify-between ">
-                <label className="label cursor-pointer flex-row">
-                  <span className="label-text mr-2">l</span>
-                  <input
-                    type="radio"
-                    value="l"
-                    name={`radio-${trackId}-${clientId}`}
-                    className="radio checked:bg-blue-500"
-                    checked={simulcastReceiving === "l"}
-                    onChange={(e) => {
-                      setSimulcastReceiving(e.target.value);
-                      changeEncodingReceived(trackId, "l");
-                    }}
-                  />
-                </label>
-                <label className="label cursor-pointer flex-row">
-                  <span className="label-text mr-2">m</span>
-                  <input
-                    type="radio"
-                    value="m"
-                    name={`radio-${trackId}-${clientId}`}
-                    className="radio checked:bg-blue-500"
-                    checked={simulcastReceiving === "m"}
-                    onChange={(e) => {
-                      setSimulcastReceiving(e.target.value);
-                      changeEncodingReceived(trackId, "m");
-                    }}
-                  />
-                </label>
-                <label className="label cursor-pointer flex-row">
-                  <span className="label-text mr-2">h</span>
-                  <input
-                    type="radio"
-                    value="h"
-                    name={`radio-${trackId}-${clientId}`}
-                    className="radio checked:bg-blue-500"
-                    checked={simulcastReceiving === "h" || simulcastReceiving === null}
-                    onChange={(e) => {
-                      setSimulcastReceiving(e.target.value);
-                      changeEncodingReceived(trackId, "h");
-                    }}
-                  />
-                </label>
+            {simulcastConfig?.enabled && (
+              <div className="flex flex-row flex-wrap">
+                <h1 className="align-middle place-items-center flex text-lg">Encoding preference:</h1>
+                <div className="flex flex-row flex-wrap w-44 ml-2 justify-between ">
+                  <label className="label cursor-pointer flex-row">
+                    <span className="label-text mr-2">l</span>
+                    <input
+                      type="radio"
+                      value="l"
+                      name={`radio-${trackId}-${clientId}`}
+                      className="radio checked:bg-blue-500"
+                      checked={simulcastReceiving === "l"}
+                      onChange={(e) => {
+                        setSimulcastReceiving(e.target.value);
+                        changeEncodingReceived(trackId, "l");
+                      }}
+                    />
+                  </label>
+                  <label className="label cursor-pointer flex-row">
+                    <span className="label-text mr-2">m</span>
+                    <input
+                      type="radio"
+                      value="m"
+                      name={`radio-${trackId}-${clientId}`}
+                      className="radio checked:bg-blue-500"
+                      checked={simulcastReceiving === "m"}
+                      onChange={(e) => {
+                        setSimulcastReceiving(e.target.value);
+                        changeEncodingReceived(trackId, "m");
+                      }}
+                    />
+                  </label>
+                  <label className="label cursor-pointer flex-row">
+                    <span className="label-text mr-2">h</span>
+                    <input
+                      type="radio"
+                      value="h"
+                      name={`radio-${trackId}-${clientId}`}
+                      className="radio checked:bg-blue-500"
+                      checked={simulcastReceiving === "h" || simulcastReceiving === null}
+                      onChange={(e) => {
+                        setSimulcastReceiving(e.target.value);
+                        changeEncodingReceived(trackId, "h");
+                      }}
+                    />
+                  </label>
+                </div>
               </div>
-            </div>
+            )}
             <button
               className="btn btn-sm m-2"
               onClick={() => {

diff --git a/src/containers/Room.tsx b/src/containers/Room.tsx
@@ -40,6 +40,7 @@ export const Room = ({ roomId, refetchIfNeeded, refetchRequested }: RoomProps) =
   const [showComponents, setShowComponents] = useLocalStorageState(`show-components-${roomId}`);
   const [token, setToken] = useState<Record<string, string>>({});
   const { roomApi } = useServerSdk();
+  const [roomState, setRoomState] = useState<RoomAPI | null>(null);
   const { refetchRooms } = useApi();
   const room = state.rooms[roomId];
 
@@ -50,6 +51,7 @@ export const Room = ({ roomId, refetchIfNeeded, refetchRequested }: RoomProps) =
       ?.getRoom(roomId)
       .then((response) => {
         dispatch({ type: "UPDATE_ROOM", room: response.data.data });
+        setRoomState(response.data.data);
       })
       .catch(() => {
         refetchRooms();
@@ -171,7 +173,7 @@ export const Room = ({ roomId, refetchIfNeeded, refetchRequested }: RoomProps) =
 
           {showRoomState && (
             <div className="mt-2">
-              <JsonComponent state={room} />
+              <JsonComponent state={roomState} />
             </div>
           )}
         </div>