Update react-client

.env.example

@@ -1,4 +1,4 @@
-#JELLYFISH
+#FISHJAM
 # TURN default configuration
 # note: loopback address as EXTERNAL_IP cannot be used inside a Docker container
 # EXTERNAL_IP=<your_public_ip_address>

.github/workflows/production_build_and_deploy.yml

@@ -29,7 +29,7 @@ jobs:
         run: |
           echo "DOMAIN=${{env.DOMAIN}} 
           FISHJAM_ROOM_VERSION=${{ steps.versions.outputs.fishjam_room }}
-          JELLYFISH_VERSION=${{ steps.versions.outputs.fishjam }}
+          FISHJAM_VERSION=${{ steps.versions.outputs.fishjam }}
           JF_SERVER_API_TOKEN=${{secrets.SERVER_API_TOKEN_CLOUD_PRODUCTION}}
           BE_HOST=${{env.BE_HOST}}
           BE_JF_SECURE_CONNECTION=true

.github/workflows/sandbox_build_and_deploy.yml

@@ -31,7 +31,7 @@ jobs:
         run: |
           echo "DOMAIN=${{env.DOMAIN}} 
           FISHJAM_ROOM_VERSION=${{ steps.versions.outputs.fishjam_room }}
-          JELLYFISH_VERSION=${{ steps.versions.outputs.fishjam }}
+          FISHJAM_VERSION=${{ steps.versions.outputs.fishjam }}
           JF_SERVER_API_TOKEN=${{secrets.SERVER_API_TOKEN_CLOUD_SANDBOX}}
           BE_HOST=${{env.BE_HOST}}
           BE_JF_SECURE_CONNECTION=true

.github/workflows/staging_build_and_deploy.yml

@@ -29,7 +29,7 @@ jobs:
         run: |
           echo "DOMAIN=${{env.DOMAIN}} 
           FISHJAM_ROOM_VERSION=${{ steps.versions.outputs.fishjam_room }}
-          JELLYFISH_VERSION=${{ steps.versions.outputs.fishjam }}
+          FISHJAM_VERSION=${{ steps.versions.outputs.fishjam }}
           JF_SERVER_API_TOKEN=${{secrets.SERVER_API_TOKEN_CLOUD_STAGING}}
           BE_HOST=${{env.BE_HOST}}
           BE_JF_SECURE_CONNECTION=true

README.md

@@ -68,8 +68,8 @@ DOMAIN=<FRONTEND_DOMAIN>
 JF1_IP=<NODE1_IP> # IP address of first node on which fishjam will be run
 JF2_IP=<NODE2_IP> # IP address of second node on which fishjam will be run
 JF_SERVER_API_TOKEN=<API_TOKEN> #The same API token is used for all fishjams
-JF1_HOST=<DOMAIN_JELLYFISH1> OR <JF1_IP>:<JELLYFISH1_PORT> # Value passed to fishjam and returns by it when creating a room on this speicific fishjam
-JF2_HOST=<DOMAIN_JELLYFISH2> OR <JF2_IP>:<JELLYFISH2_PORT>
+JF1_HOST=<DOMAIN_FISHJAM1> OR <JF1_IP>:<FISHJAM1_PORT> # Value passed to fishjam and returns by it when creating a room on this speicific fishjam
+JF2_HOST=<DOMAIN_FISHJAM2> OR <JF2_IP>:<FISHJAM2_PORT>
 BE_JF_ADDRESSES=<JF1_HOST> <JF2_HOST> #Used by backend to create a notifier to one of fishjams
 PROMETHEUS_TARGETS=<JF1_IP>:9568,<JF2_IP>:9568 #Addresses on which prometheus will query for data
 BE_HOST=<BACKEND_DOMAIN>

assets/Dockerfile

@@ -5,10 +5,10 @@ WORKDIR '/app'
 
 ARG FE_BE_HOST
 ARG FISHJAM_ROOM_VERSION
-ARG JELLYFISH_VERSION
+ARG FISHJAM_VERSION
 ENV VITE_BE_HOST=$FE_BE_HOST
 ENV VITE_FISHJAM_ROOM_VERSION=$FISHJAM_ROOM_VERSION
-ENV VITE_JELLYFISH_VERSION=$JELLYFISH_VERSION
+ENV VITE_FISHJAM_VERSION=$FISHJAM_VERSION
 
 # Install nodejs and npm
 RUN apk add --no-cache nodejs npm

assets/package.json

@@ -11,7 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@jellyfish-dev/react-client-sdk": "^0.3.1",
+    "@fishjam-dev/react-client": "^0.4.0",
     "@mediapipe/tasks-vision": "^0.10.12",
     "axios": "^1.6.8",
     "chartist": "^1.3.0",

assets/src/App.tsx

@@ -12,7 +12,7 @@ import ReactModal from "react-modal";
 import "./index.css";
 
 import { StreamingErrorBoundary } from "./features/streaming/StreamingErrorBoundary";
-import { JellyfishContextProvider } from "./jellyfish.types";
+import { FishjamContextProvider } from "./fishjam";
 
 // When returning to the videoroom page from another domain using the 'Back' button on the Safari browser,
 // the page is served from the cache, which prevents lifecycle events from being triggered.
@@ -24,7 +24,7 @@ const App: FC = () => {
   return (
     <UserProvider>
       <DeveloperInfoProvider>
-        <JellyfishContextProvider>
+        <FishjamContextProvider>
           <LocalPeerMediaProvider>
             <ToastProvider>
               <ModalProvider>
@@ -36,7 +36,7 @@ const App: FC = () => {
               </ModalProvider>
             </ToastProvider>
           </LocalPeerMediaProvider>
-        </JellyfishContextProvider>
+        </FishjamContextProvider>
       </DeveloperInfoProvider>
     </UserProvider>
   );

assets/src/features/devices/LocalMediaMessagesBoundary.tsx

@@ -7,8 +7,8 @@ import {
   useCamera,
   useClient,
   useMicrophone
-} from "../../jellyfish.types.ts";
-import { ClientEvents } from "@jellyfish-dev/react-client-sdk";
+} from "../../fishjam.ts";
+import { ClientEvents } from "@fishjam-dev/react-client";
 
 const prepareErrorMessage = (videoDeviceError: string | null, audioDeviceError: string | null): null | string => {
   if (videoDeviceError && audioDeviceError) {

assets/src/features/devices/LocalPeerMediaContext.tsx

@@ -4,8 +4,8 @@ import {
   SCREENSHARING_TRACK_CONSTRAINTS,
   VIDEO_TRACK_CONSTRAINTS
 } from "../../pages/room/consts";
-import { PeerMetadata, TrackMetadata, useCamera, useClient, useMicrophone, useSetupMedia } from "../../jellyfish.types";
-import { ClientEvents, UseCameraResult, SimulcastConfig } from "@jellyfish-dev/react-client-sdk";
+import { PeerMetadata, TrackMetadata, useCamera, useClient, useMicrophone, useSetupMedia } from "../../fishjam";
+import { ClientEvents, UseCameraResult, SimulcastConfig } from "@fishjam-dev/react-client";
 import { BlurProcessor } from "./BlurProcessor";
 import { selectBandwidthLimit } from "../../pages/room/bandwidth.tsx";
 import { useDeveloperInfo } from "../../contexts/DeveloperInfoContext.tsx";

assets/src/features/devices/MediaSettingsModal.tsx

@@ -6,7 +6,7 @@ import { Modal } from "../shared/components/modal/Modal";
 import { Checkbox } from "../shared/components/Checkbox";
 import { useRecording } from "../recording/useRecording";
 import Button from "../shared/components/Button";
-import { useCamera, useMicrophone } from "../../jellyfish.types.ts";
+import { useCamera, useMicrophone } from "../../fishjam.ts";
 
 export const MediaSettingsModal: React.FC = () => {
   const { setOpen, isOpen } = useModal();

assets/src/features/home-page/components/HomePageLayout.tsx

@@ -4,7 +4,7 @@ import BlockingScreen from "../../shared/components/BlockingScreen";
 
 import Navbar from "./Navbar";
 import useSmartphoneViewport from "../../shared/hooks/useSmartphoneViewport";
-import { JELLYFISH_VERSION, FISHJAM_ROOM_VERSION } from "../../../pages/room/consts";
+import { FISHJAM_VERSION, FISHJAM_ROOM_VERSION } from "../../../pages/room/consts";
 
 const HomePageLayout: FC<PropsWithChildren> = ({ children }) => {
   const { isSmartphone, isHorizontal } = useSmartphoneViewport();
@@ -25,7 +25,7 @@ const HomePageLayout: FC<PropsWithChildren> = ({ children }) => {
         <div className="top-4 mb-4 self-start flex justify-between sm:absolute sm:inset-x-4 sm:mb-0">
           <Navbar />
           <div className="ml-4 text-right">
-            {`${FISHJAM_ROOM_VERSION} (jellyfish ${JELLYFISH_VERSION})`}
+            {`${FISHJAM_ROOM_VERSION} (fishjam ${FISHJAM_VERSION})`}
           </div>
         </div>
 

assets/src/features/home-page/components/HomePageVideoTile.tsx

@@ -9,7 +9,7 @@ import MicrophoneOff from "../../room-page/icons/MicrophoneOff";
 import Settings from "../../room-page/icons/Settings";
 import { useModal } from "../../../contexts/ModalContext";
 import GenericMediaPlayerTile from "../../../pages/room/components/StreamPlayer/GenericMediaPlayerTile";
-import { useMicrophone } from "../../../jellyfish.types.ts";
+import { useMicrophone } from "../../../fishjam.ts";
 import { useLocalPeer } from "../../devices/LocalPeerMediaContext.tsx";
 
 type HomePageVideoTileProps = {

assets/src/features/home-page/components/VideoroomHomePage.tsx

@@ -15,7 +15,7 @@ import HomePageLayout from "./HomePageLayout";
 
 import HomePageVideoTile from "./HomePageVideoTile";
 import { useLocalPeer } from "../../devices/LocalPeerMediaContext";
-import { useMicrophone } from "../../../jellyfish.types.ts";
+import { useMicrophone } from "../../../fishjam.ts";
 
 const VideoroomHomePage: FC = () => {
   const lastDisplayName: string | null = localStorage.getItem("displayName");

assets/src/features/recording/useRecording.ts

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
-import { PeerMetadata, TrackMetadata, useClient, useStatus } from "../../jellyfish.types";
+import { PeerMetadata, TrackMetadata, useClient, useStatus } from "../../fishjam";
 import { useParams } from "react-router-dom";
 import useToast from "../shared/hooks/useToast";
 import { startRecording as startRecordingOpenApi } from "../../room.api";
-import { ClientEvents } from "@jellyfish-dev/react-client-sdk";
+import { ClientEvents } from "@fishjam-dev/react-client";
 
 type UseRecording = {
   canStartRecording: boolean;

assets/src/features/room-page/components/PeopleComponent.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { FC } from "react";
 import { computeInitials } from "./InitialsImage";
-import { useSelector } from "../../../jellyfish.types";
+import { useSelector } from "../../../fishjam";
 
 type PeopleListItem = {
   peerId: string;

assets/src/features/room-page/components/Sidebar.tsx

@@ -3,7 +3,7 @@ import { FC } from "react";
 import Button from "../../shared/components/Button";
 import ChevronDown from "../icons/ChevronDown";
 import PeopleComponent from "./PeopleComponent";
-import { useSelector } from "../../../jellyfish.types";
+import { useSelector } from "../../../fishjam";
 
 type SidebarProps = {
   onClose?: () => void;

assets/src/features/streaming/StreamingErrorBoundary.tsx

@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren, useCallback, useEffect, useState } from "react";
 import useToast from "../shared/hooks/useToast";
 import { ErrorMessage, messageComparator } from "../../pages/room/errorMessage";
-import { useClient } from "../../jellyfish.types";
+import { useClient } from "../../fishjam";
 import useEffectOnChange from "../shared/hooks/useEffectOnChange";
 
 export const StreamingErrorBoundary: FC<PropsWithChildren> = ({ children }) => {

assets/src/jellyfish.types.ts → assets/src/fishjam.ts

@@ -1,7 +1,7 @@
 import { toPairs } from "ramda";
 import { TrackWithId } from "./pages/types";
 import { ApiTrack, RemotePeer } from "./pages/room/hooks/usePeerState";
-import { create, State } from "@jellyfish-dev/react-client-sdk";
+import { create, State } from "@fishjam-dev/react-client";
 import { z } from "zod";
 
 const trackTypeSchema = z.union([z.literal("screensharing"), z.literal("camera"), z.literal("audio")]);
@@ -33,7 +33,7 @@ export const {
   useScreenShare,
   useTracks,
   useClient,
-  JellyfishContextProvider
+  FishjamContextProvider
 } = create<PeerMetadata, TrackMetadata>({
   peerMetadataParser: (obj) => peerMetadataSchema.parse(obj),
   trackMetadataParser: (obj) => trackMetadataSchema.parse(obj),

assets/src/pages/room/RoomPage.tsx

@@ -6,7 +6,7 @@ import PageLayout from "../../features/room-page/components/PageLayout";
 import { useAcquireWakeLockAutomatically } from "./hooks/useAcquireWakeLockAutomatically";
 import clsx from "clsx";
 import RoomSidebar from "./RoomSidebar";
-import { useClient, useConnect, useDisconnect } from "../../jellyfish.types.ts";
+import { useClient, useConnect, useDisconnect } from "../../fishjam.ts";
 import { useUser } from "../../contexts/UserContext";
 import { useLocalPeer } from "../../features/devices/LocalPeerMediaContext.tsx";
 import { InboundRtpId, useDeveloperInfo } from "../../contexts/DeveloperInfoContext.tsx";

assets/src/pages/room/VideochatSection.tsx

@@ -9,7 +9,7 @@ import { MediaPlayerTileConfig, PeerTileConfig, ScreenShareTileConfig, TrackWith
 import UnpinnedTilesSection from "./components/StreamPlayer/UnpinnedTilesSection";
 import PinnedTilesSection from "./components/StreamPlayer/PinnedTilesSection";
 import useTilePinning from "./hooks/useTilePinning";
-import { toLocalTrackSelector, toRemotePeerSelector, TrackType, useSelector } from "../../jellyfish.types";
+import { toLocalTrackSelector, toRemotePeerSelector, TrackType, useSelector } from "../../fishjam";
 
 type Props = {
   showSimulcast: boolean;

assets/src/pages/room/bandwidth.tsx

@@ -1,5 +1,5 @@
-import { BandwidthLimit, SimulcastBandwidthLimit, TrackBandwidthLimit } from "@jellyfish-dev/react-client-sdk";
-import { TrackType } from "../../jellyfish.types.ts";
+import { BandwidthLimit, SimulcastBandwidthLimit, TrackBandwidthLimit } from "@fishjam-dev/react-client";
+import { TrackType } from "../../fishjam.ts";
 
 const NO_LIMIT: BandwidthLimit = 0;
 const DEFAULT_LIMIT: BandwidthLimit = 1500;

assets/src/pages/room/components/MediaControlButtons.tsx

@@ -21,8 +21,8 @@ import {
   useClient,
   useMicrophone,
   useScreenShare
-} from "../../../jellyfish.types.ts";
-import { UseCameraResult, UseMicrophoneResult, UseScreenShareResult, Client } from "@jellyfish-dev/react-client-sdk";
+} from "../../../fishjam.ts";
+import { UseCameraResult, UseMicrophoneResult, UseScreenShareResult, Client } from "@fishjam-dev/react-client";
 import { LocalPeerContext, useLocalPeer } from "../../../features/devices/LocalPeerMediaContext.tsx";
 import { useUser } from "../../../contexts/UserContext.tsx";
 

assets/src/pages/room/components/StreamPlayer/PinnedTilesSection.tsx

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from "react";
 import { MediaPlayerTileConfig } from "../../../types";
-import { TrackEncoding } from "@jellyfish-dev/react-client-sdk";
+import { TrackEncoding } from "@fishjam-dev/react-client";
 import { PinTileLayer } from "../../../../features/room-page/components/PinComponents";
 import { getGridConfig, GridConfigType } from "../../../../features/room-page/utils/getVideoGridConfig";
 import clsx from "clsx";

assets/src/pages/room/components/StreamPlayer/RemoteMediaPlayerTile.tsx

@@ -1,9 +1,9 @@
 import { ComponentProps, FC } from "react";
-import { TrackEncoding } from "@jellyfish-dev/react-client-sdk";
+import { TrackEncoding } from "@fishjam-dev/react-client";
 import { useAutomaticEncodingSwitching } from "../../hooks/useAutomaticEncodingSwitching";
 import { SimulcastEncodingToReceive } from "./simulcast/SimulcastEncodingToReceive";
 import GenericMediaPlayerTile from "./GenericMediaPlayerTile";
-import { useTracks } from "../../../../jellyfish.types.ts";
+import { useTracks } from "../../../../fishjam.ts";
 import { StatisticsLayer } from "./StatisticsLayer.tsx";
 import { useDeveloperInfo } from "../../../../contexts/DeveloperInfoContext.tsx";
 

assets/src/pages/room/components/StreamPlayer/UnpinnedTilesSection.tsx

@@ -1,6 +1,6 @@
 import { FC, useMemo } from "react";
 import RemoteMediaPlayerTile from "./RemoteMediaPlayerTile";
-import { TrackEncoding } from "@jellyfish-dev/react-client-sdk";
+import { TrackEncoding } from "@fishjam-dev/react-client";
 import clsx from "clsx";
 import { MediaPlayerTileConfig, TrackWithId } from "../../../types";
 import PeerInfoLayer from "./PeerInfoLayer";

assets/src/pages/room/components/StreamPlayer/simulcast/SimulcastEncodingToReceive.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { TrackEncoding } from "@jellyfish-dev/react-client-sdk";
+import { TrackEncoding } from "@fishjam-dev/react-client";
 import { Tooltip } from "./Tooltip";
 import { LayerButton } from "./LayerButton";
 

assets/src/pages/room/components/StreamPlayer/simulcast/SimulcastReceivingEncoding.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { TrackEncoding } from "@jellyfish-dev/react-client-sdk";
+import { TrackEncoding } from "@fishjam-dev/react-client";
 
 type Props = {
   encoding?: TrackEncoding;

assets/src/pages/room/consts.ts

@@ -46,7 +46,7 @@ export const BACKEND_URL = isDevEnv ?
   new URL(`${protocol}://${import.meta.env.VITE_BE_HOST}`)
 
   // @ts-ignore
-export const JELLYFISH_VERSION = import.meta.env.VITE_JELLYFISH_VERSION
+export const FISHJAM_VERSION = import.meta.env.VITE_FISHJAM_VERSION
 // @ts-ignore
 export const FISHJAM_ROOM_VERSION = import.meta.env.VITE_FISHJAM_ROOM_VERSION
 
@@ -63,7 +63,7 @@ export const getSignalingAddress = (serverAddress: String) => {
   }
 }
 
-export const JELLYFISH_WEBSOCKET_PROTOCOL = isSecure ? "wss" : "ws";
+export const FISHJAM_WEBSOCKET_PROTOCOL = isSecure ? "wss" : "ws";
 
 export const MAX_TILE_HEIGHT_FOR_MEDIUM_ENCODING = 600;
 export const MAX_TILE_HEIGHT_FOR_LOW_ENCODING = 250;

assets/src/pages/room/hooks/useAutomaticEncodingSwitching.tsx

@@ -1,4 +1,4 @@
-import { TrackEncoding } from "@jellyfish-dev/react-client-sdk";
+import { TrackEncoding } from "@fishjam-dev/react-client";
 import { useCallback, useEffect, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { useStoreFirstNonNullValue } from "./useStoreFirstNonNullValue";

assets/src/pages/room/hooks/usePeerState.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from "react";
-import { TrackEncoding, VadStatus} from "@jellyfish-dev/react-client-sdk";
-import { PeerMetadata, TrackType } from "../../../jellyfish.types.ts";
+import { TrackEncoding, VadStatus} from "@fishjam-dev/react-client";
+import { PeerMetadata, TrackType } from "../../../fishjam.ts";
 
 export type ApiTrack = {
   trackId: string;