Change useSandbox hook api (#525)

Magmusacy · czerwiukk · web-flow · commit 6d28d1910d39 · 2026-05-12T15:49:34.000+02:00
## Description

Changed the api of useSandbox hook as well as updated e2e livestream
tests to support this new api

## Motivation and Context

we've changed how users communicate with room manager

## Documentation impact

- [X] Documentation update required
- [ ] Documentation updated [in another PR](_)
- [ ] No documentation update required

## Types of changes

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

---------

Co-authored-by: adrian &lt;33912477+czerwiukk@users.noreply.github.com&gt;
diff --git a/.github/workflows/tests.yaml b/.github/workflows/tests.yaml
@@ -46,7 +46,7 @@ jobs:
         run: yarn test:e2e
         env:
           VITE_FISHJAM_URL: ${{ secrets.TEST_FISHJAM_URL }}
-
+          VITE_SANDBOX_API_URL: ${{ secrets.TEST_SANDBOX_API_URL }}
       - uses: actions/upload-artifact@v4
         if: always()
         with:
diff --git a/e2e-tests/livestream-client/config.ts b/e2e-tests/livestream-client/config.ts
@@ -1,2 +1,4 @@
 export const FISHJAM_URL =
   import.meta.env.VITE_FISHJAM_URL || "http://localhost:4000";
+export const SANDBOX_API_URL =
+  import.meta.env.VITE_SANDBOX_API_URL || "http://localhost:4000";
diff --git a/e2e-tests/livestream-client/src/App.tsx b/e2e-tests/livestream-client/src/App.tsx
@@ -6,13 +6,16 @@ import {
 import { LivestreamError } from "@fishjam-cloud/ts-client";
 import { useEffect, useRef, useState } from "react";
 
+import { SANDBOX_API_URL } from "../config";
 import { createCanvasStream, stopCanvasStream } from "./canvasStream";
 
 const roomName =
   new URLSearchParams(window.location.search).get("room") ?? "livestream-e2e";
 
 export function App() {
-  const { getSandboxLivestream, getSandboxViewerToken } = useSandbox();
+  const { getSandboxLivestream, getSandboxViewerToken } = useSandbox({
+    sandboxApiUrl: SANDBOX_API_URL,
+  });
   const viewer = useLivestreamViewer();
   const streamer = useLivestreamStreamer();
 
diff --git a/e2e-tests/react-client/config.ts b/e2e-tests/react-client/config.ts
@@ -1,7 +1,13 @@
 const fishjamUrl = process.env.VITE_FISHJAM_URL;
+const sandboxApiUrl = process.env.VITE_SANDBOX_API_URL;
 
 if (!fishjamUrl) {
   throw new Error("VITE_FISHJAM_URL environment variable is not set");
 }
 
+if (!sandboxApiUrl) {
+  throw new Error("VITE_SANDBOX_API_URL environment variable is not set");
+}
+
 export const FISHJAM_URL = fishjamUrl;
+export const SANDBOX_API_URL = sandboxApiUrl;
diff --git a/e2e-tests/react-client/scenarios/utils.ts b/e2e-tests/react-client/scenarios/utils.ts
@@ -1,8 +1,9 @@
 import type { Page } from "@playwright/test";
-import { v4 as uuidv4 } from "uuid";
 import { expect, test } from "@playwright/test";
+import { v4 as uuidv4 } from "uuid";
+
+import { SANDBOX_API_URL } from "../config.ts";
 
-import { FISHJAM_URL } from "../config.ts"
 
 export const joinRoomAndAddScreenShare = async (
   page: Page,
@@ -83,7 +84,7 @@ export const createPeer = async (
 ) =>
   await test.step("Create room", async () => {
     const roomRequest = await page.request.get(
-      `${FISHJAM_URL}/room-manager?roomName=${roomId}&peerName=${uuidv4()}`,
+      `${SANDBOX_API_URL}?roomName=${roomId}&peerName=${uuidv4()}`,
         );
     return roomRequest;
   });
diff --git a/e2e-tests/webrtc-client/config.ts b/e2e-tests/webrtc-client/config.ts
@@ -6,12 +6,25 @@ function getFishjamUrl() {
   }
 }
 
+function getSandboxApiUrl() {
+  try {
+    return import.meta.env.VITE_SANDBOX_API_URL;
+  } catch {
+    return process.env.VITE_SANDBOX_API_URL;
+  }
+}
+
 const fishjamUrl = getFishjamUrl();
+const sandboxApiUrl = getSandboxApiUrl();
 
 if (!fishjamUrl) {
   throw new Error("VITE_FISHJAM_URL environment variable is not set");
 }
 
-export const FISHJAM_URL = fishjamUrl;
+if (!sandboxApiUrl) {
+  throw new Error("VITE_SANDBOX_API_URL environment variable is not set");
+}
 
+export const FISHJAM_URL = fishjamUrl;
+export const SANDBOX_API_URL = sandboxApiUrl;
 export const FISHJAM_WS_URL = `${FISHJAM_URL}/socket/peer/websocket`;
diff --git a/e2e-tests/webrtc-client/scenarios/utils.ts b/e2e-tests/webrtc-client/scenarios/utils.ts
@@ -2,7 +2,7 @@ import type { Page, TestInfo } from "@playwright/test";
 import { expect, test } from "@playwright/test";
 import { v4 as uuidv4 } from "uuid";
 
-import { FISHJAM_URL } from "../config.ts";
+import { SANDBOX_API_URL } from "../config.ts";
 
 const TO_PASS_TIMEOUT_MILLIS = 10 * 1000;
 
@@ -12,7 +12,7 @@ const expectWithLongerTimeout = expect.configure({
 
 export const createPeer = async (page: Page, peerName: string, roomName: string) =>
   await test.step("Create peer", async () => {
-    return await page.request.get(`${FISHJAM_URL}/room-manager?roomName=${roomName}&peerName=${peerName}`);
+    return await page.request.get(`${SANDBOX_API_URL}?roomName=${roomName}&peerName=${peerName}`);
   });
 
 export const createAndJoinPeer = async (
diff --git a/examples/mobile-client/fishjam-chat/.env.example b/examples/mobile-client/fishjam-chat/.env.example
@@ -1,2 +1,3 @@
 EXPO_PUBLIC_FISHJAM_ID=
-EXPO_PUBLIC_VIDEOROOM_STAGING_SANDBOX_URL=
+EXPO_PUBLIC_VIDEOROOM_STAGING_SANDBOX_URL=
+EXPO_PUBLIC_SANDBOX_API_URL=
diff --git a/examples/mobile-client/fishjam-chat/README.md b/examples/mobile-client/fishjam-chat/README.md
@@ -4,9 +4,13 @@
 
 Copy `.env.example` to `.env` in the `examples/mobile-client/fishjam-chat` directory and fill in the required value:
 
-- `EXPO_PUBLIC_FISHJAM_ID` - Fishjam ID for production environment
+- `EXPO_PUBLIC_FISHJAM_ID` - Fishjam ID for connecting to fishjam platform
+- `EXPO_PUBLIC_SANDBOX_API_URL` - Sandbox API URL used by `useSandbox` to create rooms and fetch peer, viewer, and streamer tokens
 
-You can find the value for this variable by creating an account on [fishjam.io](https://fishjam.io) and copying it from the sandbox dashboard.
+You can find these values in the Fishjam dashboard:
+
+- `Fishjam ID` is available at [fishjam.io/app](https://fishjam.io/app).
+- `Sandbox API url` is available at [fishjam.io/app/sandbox](https://fishjam.io/app/sandbox).
 
 There also exists this additional environment variable, which is used for internal testing purposes:
 
diff --git a/examples/mobile-client/fishjam-chat/app/livestream/screen-sharing.tsx b/examples/mobile-client/fishjam-chat/app/livestream/screen-sharing.tsx
@@ -5,7 +5,7 @@ import {
   useScreenShare,
 } from '@fishjam-cloud/react-native-client';
 import { useLocalSearchParams } from 'expo-router';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -19,7 +19,9 @@ export default function LivestreamScreenSharingScreen() {
   }>();
 
   const { initializeDevices } = useInitializeDevices();
-  const { getSandboxLivestream } = useSandbox();
+  const { getSandboxLivestream } = useSandbox({
+    sandboxApiUrl: process.env.EXPO_PUBLIC_SANDBOX_API_URL ?? '',
+  });
   const { connect, disconnect, isConnected, error } = useLivestreamStreamer();
   const {
     startStreaming: startScreenCapture,
diff --git a/examples/mobile-client/fishjam-chat/app/livestream/streamer.tsx b/examples/mobile-client/fishjam-chat/app/livestream/streamer.tsx
@@ -7,7 +7,7 @@ import {
   useSandbox,
 } from '@fishjam-cloud/react-native-client';
 import { useLocalSearchParams } from 'expo-router';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -20,7 +20,9 @@ export default function LivestreamStreamerScreen() {
     roomName: string;
   }>();
 
-  const { getSandboxLivestream } = useSandbox();
+  const { getSandboxLivestream } = useSandbox({
+    sandboxApiUrl: process.env.EXPO_PUBLIC_SANDBOX_API_URL ?? '',
+  });
 
   const { connect, disconnect, isConnected, error } = useLivestreamStreamer();
 
diff --git a/examples/mobile-client/fishjam-chat/app/livestream/viewer.tsx b/examples/mobile-client/fishjam-chat/app/livestream/viewer.tsx
@@ -4,7 +4,7 @@ import {
   useSandbox,
 } from '@fishjam-cloud/react-native-client';
 import { useLocalSearchParams } from 'expo-router';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -16,7 +16,9 @@ export default function LivestreamViewerScreen() {
     roomName: string;
   }>();
 
-  const { getSandboxViewerToken } = useSandbox({});
+  const { getSandboxViewerToken } = useSandbox({
+    sandboxApiUrl: process.env.EXPO_PUBLIC_SANDBOX_API_URL ?? '',
+  });
 
   const { connect, disconnect, stream, isConnected, error } =
     useLivestreamViewer();
diff --git a/examples/mobile-client/fishjam-chat/app/room/preview.tsx b/examples/mobile-client/fishjam-chat/app/room/preview.tsx
@@ -7,7 +7,7 @@ import {
   useSandbox,
 } from '@fishjam-cloud/react-native-client';
 import { router, useLocalSearchParams } from 'expo-router';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -21,7 +21,9 @@ export default function PreviewScreen() {
     userName: string;
   }>();
 
-  const { getSandboxPeerToken } = useSandbox();
+  const { getSandboxPeerToken } = useSandbox({
+    sandboxApiUrl: process.env.EXPO_PUBLIC_SANDBOX_API_URL ?? '',
+  });
 
   const { initializeDevices } = useInitializeDevices();
   const { cameraStream, startCamera, stopCamera, isCameraOn, toggleCamera } =
diff --git a/packages/react-client/src/hooks/useSandbox.ts b/packages/react-client/src/hooks/useSandbox.ts
@@ -1,8 +1,5 @@
 import { useCallback } from "react";
 
-import { useFishjamId } from "../contexts/fishjamId";
-import { resolveFishjamUrl } from "../utils/fishjamUrl";
-
 type BasicInfo = { id: string; name: string };
 type RoomManagerResponse = {
   peerToken: string;
@@ -12,18 +9,17 @@ type RoomManagerResponse = {
 };
 
 export type UseSandboxProps = {
-  // overrides the Sandbox API URL derived from the `fishjamId` prop of `FishjamProvider`
-  configOverride?: { sandboxApiUrl?: string };
+  sandboxApiUrl: string;
 };
 
 export type RoomType = "conference" | "livestream" | "audio_only";
 
-export const useSandbox = (props?: UseSandboxProps) => {
-  const fishjamId = useFishjamId();
-
-  const fishjamUrl = resolveFishjamUrl(fishjamId);
+export const useSandbox = (props: UseSandboxProps) => {
+  const sandboxApiUrl = props?.sandboxApiUrl;
 
-  const sandboxApiUrl = props?.configOverride?.sandboxApiUrl ?? `${fishjamUrl}/room-manager`;
+  if (!sandboxApiUrl) {
+    throw new Error("useSandbox requires a sandboxApiUrl, you can get it at: https://fishjam.io/app/sandbox");
+  }
 
   const getSandboxPeerToken = useCallback(
     async (roomName: string, peerName: string, roomType: RoomType = "conference") => {
