Update react client sdk (#76)

Author: kamil-stasiak

package-lock.json

@@ -17,50 +17,50 @@
     "lint:check": "eslint . --ext .ts,.tsx"
   },
   "dependencies": {
-    "@jellyfish-dev/react-client-sdk": "^0.1.9",
+    "@jellyfish-dev/react-client-sdk": "^0.2.0",
     "@types/chartist": "^1.0.0",
     "@types/ramda": "^0.29.10",
     "axios": "^1.6.7",
     "chartist": "^1.3.0",
     "clsx": "^2.1.0",
     "daisyui": "^3.9.4",
     "events": "^3.3.0",
-    "hls.js": "^1.5.3",
-    "jotai": "^2.6.3",
+    "hls.js": "^1.5.7",
+    "jotai": "^2.7.0",
     "lodash.isequal": "^4.5.0",
-    "phoenix": "^1.7.10",
+    "phoenix": "^1.7.11",
     "qrcode.react": "^3.1.0",
-    "rambda": "^9.0.1",
+    "rambda": "^9.1.0",
     "ramda": "^0.29.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.0.1",
-    "react-router-dom": "^6.21.3",
+    "react-router-dom": "^6.22.2",
     "uuid": "^9.0.1",
-    "vite-plugin-mkcert": "^1.17.3"
+    "vite-plugin-mkcert": "^1.17.4"
   },
   "devDependencies": {
     "@openapitools/openapi-generator-cli": "^2.9.0",
     "@types/events": "^3.0.3",
     "@types/lodash.isequal": "^4.5.8",
     "@types/phoenix": "^1.6.4",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.2.60",
+    "@types/react-dom": "^18.2.19",
     "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.17",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "postcss": "^8.4.33",
-    "prettier": "3.2.4",
+    "postcss": "^8.4.35",
+    "prettier": "3.2.5",
     "tailwindcss": "^3.4.1",
-    "ts-proto": "^1.167.2",
+    "ts-proto": "^1.167.9",
     "typed-emitter": "^2.1.0",
     "typescript": "5.3.3",
-    "vite": "^5.0.12",
-    "vite-plugin-checker": "^0.6.2"
+    "vite": "^5.1.4",
+    "vite-plugin-checker": "^0.6.4"
   }
 }

package.json

@@ -19,7 +19,6 @@ import { DeviceInfo, StreamingSettingsCard } from "./StreamingSettingsCard";
 import { checkJSON } from "./StreamingSettingsPanel";
 import { atomFamily, atomWithStorage } from "jotai/utils";
 import { useSetAtom } from "jotai";
-import { TrackMetadata } from "../jellyfish.types";
 import { ComponentOptionsHLSSubscribeModeEnum } from "../server-sdk";
 
 type ClientProps = {
@@ -63,7 +62,7 @@ export type LocalTrack = {
 
 export type TrackId = string;
 export const trackMetadataAtomFamily = atomFamily((clientId) =>
-  atomWithStorage<Record<TrackId, TrackMetadata> | null>(`track-metadata-${clientId}`, null),
+  atomWithStorage<Record<TrackId, unknown> | null>(`track-metadata-${clientId}`, null),
 );
 
 const prepareHlsButtonMessage = (hlsMode?: ComponentOptionsHLSSubscribeModeEnum): string | null => {
@@ -215,19 +214,23 @@ export const Client = ({
   };
   const setUserTracksMetadata = useSetAtom(trackMetadataAtomFamily(id));
 
-  const addVideoTrack = (trackInfo: DeviceInfo) => {
+  const addVideoTrack = async (trackInfo: DeviceInfo) => {
     const track: MediaStreamTrack = trackInfo.stream?.getVideoTracks()[0];
     if (!trackInfo.stream || !track) return;
 
     const metadata = attachMetadata
       ? JSON.parse(trackMetadata?.trim() || createDefaultTrackMetadata(trackInfo.type))
       : undefined;
 
-    const trackId = api?.addTrack(
+    const trackId = await api?.addTrack(
       track,
       trackInfo.stream,
       metadata,
-      { enabled: trackInfo.type === "video" && simulcastTransfer, activeEncodings: currentEncodings },
+      {
+        enabled: trackInfo.type === "video" && simulcastTransfer,
+        activeEncodings: currentEncodings,
+        disabledEncodings: [],
+      },
       parseInt(maxBandwidth || "0") || undefined,
     );
     dispatch({
@@ -245,10 +248,10 @@ export const Client = ({
     }));
   };
 
-  const addAudioTrack = (trackInfo: DeviceInfo) => {
+  const addAudioTrack = async (trackInfo: DeviceInfo) => {
     const track: MediaStreamTrack = trackInfo.stream?.getAudioTracks()[0];
     if (!trackInfo.stream || !track) return;
-    const trackId = api?.addTrack(
+    const trackId = await api?.addTrack(
       track,
       trackInfo.stream,
       attachMetadata ? JSON.parse(trackMetadata?.trim() || createDefaultTrackMetadata(trackInfo.type)) : undefined,

src/containers/Client.tsx

@@ -1,5 +1,4 @@
 import { JsonComponent } from "../components/JsonComponent";
-import { TrackMetadata } from "../jellyfish.types";
 import { useState } from "react";
 import { SimulcastConfig, TrackEncoding } from "@jellyfish-dev/react-client-sdk";
 import { CopyToClipboardButton } from "../components/CopyButton";
@@ -14,7 +13,7 @@ type TrackPanelProps = {
   clientId: string;
   trackId: string;
   stream: MediaStream | null;
-  trackMetadata: TrackMetadata | null;
+  trackMetadata: unknown | undefined;
   changeEncodingReceived: (trackId: string, encoding: TrackEncoding) => void;
   vadStatus: string | null;
   encodingReceived: TrackEncoding | null;

src/containers/ReceivedTrackPanel.tsx

@@ -2,7 +2,6 @@ import { createContext, ReactNode, useContext, useReducer } from "react";
 import { groupBy } from "rambda";
 import { Peer as PeerApi, Room as RoomAPI } from "../server-sdk";
 import { create, CreateJellyfishClient } from "@jellyfish-dev/react-client-sdk/experimental";
-import { PeerMetadata, TrackMetadata } from "../jellyfish.types";
 import { LocalTrack } from "./Client";
 
 export type RoomContext = {
@@ -19,7 +18,7 @@ type Props = {
 export type PeerState = {
   id: string;
   peerStatus: PeerApi;
-  client: CreateJellyfishClient<PeerMetadata, TrackMetadata>;
+  client: CreateJellyfishClient<unknown, unknown>;
   tracks: Record<string, LocalTrack>;
 };
 
@@ -119,7 +118,7 @@ const roomReducer: Reducer = (state, action) => {
     const peersList: PeerState[] = action.room.peers.map((peer) => ({
       id: peer.id,
       peerStatus: peer,
-      client: prevPeers?.[peer.id]?.client || create<PeerMetadata, TrackMetadata>(),
+      client: prevPeers?.[peer.id]?.client || create<unknown, unknown>(),
       tracks: prevPeers?.[peer.id]?.tracks || [],
     }));
 

src/containers/RoomsContext.tsx

@@ -1,6 +1,5 @@
 import { Track } from "@jellyfish-dev/react-client-sdk";
 import { CloseButton } from "../components/CloseButton";
-import { TrackMetadata } from "../jellyfish.types";
 import { LocalTrack, trackMetadataAtomFamily } from "./Client";
 import VideoPlayer from "../components/VideoPlayer";
 import { JsonComponent } from "../components/JsonComponent";
@@ -18,7 +17,7 @@ type StreamedTrackCardProps = {
   roomId: string;
   peerId: string;
   trackMetadata: string;
-  allTracks: Record<string, Track<TrackMetadata>> | undefined;
+  allTracks: Record<string, Track<unknown>> | undefined;
   removeTrack: (trackId: string) => void;
   simulcastTransfer: boolean;
   changeEncoding: (trackId: string, encoding: TrackEncoding, desiredState: boolean) => void;

src/containers/StreamedTrackCard.tsx

@@ -14,8 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
+    "jsx": "react-jsx"
   },
   "include": ["./src"],
-  "references": [{ "path": "./tsconfig.node.json" }],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }