From 8041a9b6d2e4f39e973d9e574f90896308ea1753 Mon Sep 17 00:00:00 2001 From: Anna Olak <15946812+anna1901@users.noreply.github.com> Date: Mon, 12 Jan 2026 17:19:09 +0100 Subject: [PATCH 01/14] Add new mobile package --- .gitmodules | 1 + docusaurus.config.ts | 4 ++-- package.json | 1 + yarn.lock | 7 +++++++ 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/.gitmodules b/.gitmodules index 6c7a308b..6f03827e 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,6 +1,7 @@ [submodule "packages/web-client-sdk"] path = packages/web-client-sdk url = https://github.com/fishjam-cloud/web-client-sdk.git + branch = mobile-sdk-2-0 [submodule "packages/mobile-client-sdk"] path = packages/mobile-client-sdk url = https://github.com/fishjam-cloud/mobile-client-sdk.git diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 9c1aead3..b8081ab4 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -327,10 +327,10 @@ const config: Config = { id: "mobile-api", out: "docs/api/mobile", entryPoints: [ - "./packages/mobile-client-sdk/packages/react-native-client/src/index.tsx", + "./packages/web-client-sdk/packages/mobile-client/src/index.ts", ], tsconfig: - "./packages/mobile-client-sdk/packages/react-native-client/tsconfig.json", + "./packages/web-client-sdk/packages/mobile-client/tsconfig.json", ...typedocConfig, }, ], diff --git a/package.json b/package.json index 74cf2195..ac2c1037 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@docusaurus/theme-mermaid": "^3.8.1", "@fastify/env": "^5.0.2", "@fishjam-cloud/js-server-sdk": "link:./packages/js-server-sdk/packages/js-server-sdk", + "@fishjam-cloud/mobile-client": "link:./packages/web-client-sdk/packages/mobile-client", "@fishjam-cloud/react-client": "link:./packages/web-client-sdk/packages/react-client", "@fishjam-cloud/react-native-client": "link:./packages/mobile-client-sdk/packages/react-native-client", "@mdx-js/react": "^3.1.0", diff --git a/yarn.lock b/yarn.lock index 51fe628e..4c05bfc5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3560,6 +3560,12 @@ __metadata: languageName: node linkType: soft +"@fishjam-cloud/mobile-client@link:./packages/web-client-sdk/packages/mobile-client::locator=fishjam-docs%40workspace%3A.": + version: 0.0.0-use.local + resolution: "@fishjam-cloud/mobile-client@link:./packages/web-client-sdk/packages/mobile-client::locator=fishjam-docs%40workspace%3A." + languageName: node + linkType: soft + "@fishjam-cloud/react-client@link:./packages/web-client-sdk/packages/react-client::locator=fishjam-docs%40workspace%3A.": version: 0.0.0-use.local resolution: "@fishjam-cloud/react-client@link:./packages/web-client-sdk/packages/react-client::locator=fishjam-docs%40workspace%3A." @@ -11334,6 +11340,7 @@ __metadata: "@docusaurus/types": "npm:^3.8.1" "@fastify/env": "npm:^5.0.2" "@fishjam-cloud/js-server-sdk": "link:./packages/js-server-sdk/packages/js-server-sdk" + "@fishjam-cloud/mobile-client": "link:./packages/web-client-sdk/packages/mobile-client" "@fishjam-cloud/react-client": "link:./packages/web-client-sdk/packages/react-client" "@fishjam-cloud/react-native-client": "link:./packages/mobile-client-sdk/packages/react-native-client" "@google/genai": "npm:^1.35.0" From a90b941219e87b9149aba991ac1e79abb1a5dd89 Mon Sep 17 00:00:00 2001 From: Anna Olak <15946812+anna1901@users.noreply.github.com> Date: Tue, 13 Jan 2026 14:45:47 +0100 Subject: [PATCH 02/14] wip --- .gitmodules | 3 - docs/explanation/public-livestreams.mdx | 4 +- docs/how-to/features/sandbox-api-testing.mdx | 10 +- .../_components/install-package.mdx | 26 +- .../react-native/background-streaming.mdx | 20 +- docs/how-to/react-native/connecting.mdx | 24 +- docs/how-to/react-native/installation.mdx | 6 +- docs/how-to/react-native/list-other-peers.mdx | 51 ++-- docs/how-to/react-native/metadata.mdx | 9 +- .../react-native/picture-in-picture.mdx | 239 +++++++++++------- .../react-native/reconnection-handling.mdx | 2 +- docs/how-to/react-native/screensharing.mdx | 25 +- docs/how-to/react-native/start-streaming.mdx | 73 ++++-- docs/tutorials/livestreaming.mdx | 153 ++++++++--- docs/tutorials/react-native-quick-start.mdx | 234 +++++++---------- package.json | 1 - packages/mobile-client-sdk | 1 - scripts/prepare.sh | 2 +- 18 files changed, 473 insertions(+), 410 deletions(-) delete mode 160000 packages/mobile-client-sdk diff --git a/.gitmodules b/.gitmodules index 6f03827e..5056c22a 100644 --- a/.gitmodules +++ b/.gitmodules @@ -2,9 +2,6 @@ path = packages/web-client-sdk url = https://github.com/fishjam-cloud/web-client-sdk.git branch = mobile-sdk-2-0 -[submodule "packages/mobile-client-sdk"] - path = packages/mobile-client-sdk - url = https://github.com/fishjam-cloud/mobile-client-sdk.git [submodule "packages/js-server-sdk"] path = packages/js-server-sdk url = https://github.com/fishjam-cloud/js-server-sdk.git diff --git a/docs/explanation/public-livestreams.mdx b/docs/explanation/public-livestreams.mdx index bb990e11..39ace577 100644 --- a/docs/explanation/public-livestreams.mdx +++ b/docs/explanation/public-livestreams.mdx @@ -142,7 +142,7 @@ Once you've created a viewer token, you can connect to a room using the Fishjam import { LivestreamViewer, useLivestreamViewer, - } from '@fishjam-cloud/react-native-client/livestream'; + } from '@fishjam-cloud/mobile-client'; // ... @@ -206,7 +206,7 @@ Once you've created a room of type `livestream` with the `public` flag enabled, import { LivestreamViewer, useLivestreamViewer, - } from '@fishjam-cloud/react-native-client/livestream'; + } from '@fishjam-cloud/mobile-client/livestream'; // ... diff --git a/docs/how-to/features/sandbox-api-testing.mdx b/docs/how-to/features/sandbox-api-testing.mdx index a9b5ac71..7f7b37e5 100644 --- a/docs/how-to/features/sandbox-api-testing.mdx +++ b/docs/how-to/features/sandbox-api-testing.mdx @@ -36,11 +36,12 @@ The Sandbox API is a development tool that lets you create rooms and peers for t const roomName = "testRoom"; const peerName = "testUser"; // ---cut--- - import { useSandbox } from '@fishjam-cloud/react-native-client'; + import { useSandbox } from '@fishjam-cloud/mobile-client'; // ... - const { getSandboxPeerToken } = useSandbox({ fishjamId: FISHJAM_ID }); + // fishjamId is provided through FishjamProvider + const { getSandboxPeerToken } = useSandbox(); const peerToken = await getSandboxPeerToken(roomName, peerName); ``` @@ -115,11 +116,12 @@ Below are examples on how to use tokens from the Sandbox API in your frontend ap const RoomView = (props: {peerToken: string}) => null; // ---cut--- - import { useSandbox } from "@fishjam-cloud/react-native-client"; + import { useSandbox } from "@fishjam-cloud/mobile-client"; export default function TestScreen() { const [peerToken, setPeerToken] = useState(null); - const { getSandboxPeerToken } = useSandbox({ fishjamId: FISHJAM_ID }); + // fishjamId is provided through FishjamProvider + const { getSandboxPeerToken } = useSandbox(); useEffect(() => { const fetchPeerToken = async () => { diff --git a/docs/how-to/react-native/_components/install-package.mdx b/docs/how-to/react-native/_components/install-package.mdx index 356da871..b6d49c63 100644 --- a/docs/how-to/react-native/_components/install-package.mdx +++ b/docs/how-to/react-native/_components/install-package.mdx @@ -1,27 +1,3 @@ -import Tabs from "@theme/Tabs"; -import TabItem from "@theme/TabItem"; - - - - ```bash npm2yarn -npm install @fishjam-cloud/react-native-client +npm install @fishjam-cloud/mobile-client ``` - - - - - -### Install Expo dependencies - -Follow instructions from official [Expo documentation](https://docs.expo.dev/bare/installing-expo-modules/). - -### Install Fishjam - - ```sh - npx expo install @fishjam-cloud/react-native-client - ``` - - - - diff --git a/docs/how-to/react-native/background-streaming.mdx b/docs/how-to/react-native/background-streaming.mdx index 9b43c516..37d39c8e 100644 --- a/docs/how-to/react-native/background-streaming.mdx +++ b/docs/how-to/react-native/background-streaming.mdx @@ -27,7 +27,7 @@ You need to modify `app.json` file and add our plugin: "plugins": { ... [ - "@fishjam-cloud/react-native-client", + "@fishjam-cloud/mobile-client", { "android": { "enableForegroundService": true @@ -92,22 +92,14 @@ granted and only then allow to start a service. ```tsx import { - useForegroundService, useCamera, useMicrophone, -} from "@fishjam-cloud/react-native-client"; +} from "@fishjam-cloud/mobile-client"; const { isCameraOn } = useCamera(); const { isMicrophoneOn } = useMicrophone(); -useForegroundService({ - channelId: "io.fishjam.example.fishjamchat.foregroundservice.channel", - channelName: "Fishjam Chat Notifications", - notificationTitle: "Your video call is ongoing", - notificationContent: "Tap to return to the call.", - enableCamera: isCameraOn, - enableMicrophone: isMicrophoneOn, -}); + ``` @@ -120,7 +112,7 @@ On iOS, background calls are achieved through CallKit integration. You can use t Use the [`useCallKit`](../../api/mobile/variables/useCallKit) hook for fine-grained control over CallKit sessions: ```tsx -import { useCallKit } from "@fishjam-cloud/react-native-client"; +import { useCallKit } from "@fishjam-cloud/mobile-client"; const { startCallKitSession, endCallKitSession } = useCallKit(); @@ -146,7 +138,7 @@ Use the [`useCallKitService`](../../api/mobile/variables/useCallKitService) hook ```tsx import React from "react"; -import { useCallKitService } from "@fishjam-cloud/react-native-client"; +import { useCallKitService } from "@fishjam-cloud/mobile-client"; import { View } from "react-native"; function CallScreen({ username }: { username: string }) { @@ -171,7 +163,7 @@ import { useCamera, useMicrophone, useConnection, -} from "@fishjam-cloud/react-native-client"; +} from "@fishjam-cloud/mobile-client"; const { toggleCamera } = useCamera(); const { startMicrophone, stopMicrophone } = useMicrophone(); diff --git a/docs/how-to/react-native/connecting.mdx b/docs/how-to/react-native/connecting.mdx index e8d6481a..f04dcebd 100644 --- a/docs/how-to/react-native/connecting.mdx +++ b/docs/how-to/react-native/connecting.mdx @@ -24,14 +24,14 @@ This is basically a service that will create a Room, add your app as the Room's Peer, and return the token required to use that Room. ```ts -import { useSandbox } from "@fishjam-cloud/react-native-client"; -const SANDBOX_FISHJAM_ID = "..."; +import { useSandbox } from "@fishjam-cloud/mobile-client"; const roomName = "room"; const peerName = "user"; // ---cut--- -// The `useSandbox` hook will work ONLY with the FISHJAM_ID of the Sandbox environment -const { getSandboxPeerToken } = useSandbox({ fishjamId: SANDBOX_FISHJAM_ID }); +// The `useSandbox` hook gets the fishjamId from FishjamProvider +// It will work ONLY with the FISHJAM_ID of the Sandbox environment +const { getSandboxPeerToken } = useSandbox(); const peerToken = await getSandboxPeerToken(roomName, peerName); ``` @@ -46,26 +46,24 @@ follow our [server setup instructions](../../how-to/backend/server-setup). ## Connecting -In order to connect, call [`joinRoom`](../../api/mobile/functions/useConnection#joinroom) method with the `peerToken` and the fishjam ID: +In order to connect, call [`joinRoom`](../../api/mobile/functions/useConnection#joinroom) method with the `peerToken`: ```tsx import React, { useCallback } from "react"; import { Button } from "react-native"; -import { useConnection, useSandbox } from "@fishjam-cloud/react-native-client"; - -// Check https://fishjam.io/app/ for your Fishjam ID -const FISHJAM_ID = "..."; +import { useConnection, useSandbox } from "@fishjam-cloud/mobile-client"; export function JoinRoomButton() { const { joinRoom } = useConnection(); // [!code highlight] - const { getSandboxPeerToken } = useSandbox({ fishjamId: FISHJAM_ID }); + // fishjamId is provided through FishjamProvider + const { getSandboxPeerToken } = useSandbox(); const onPressJoin = useCallback(async () => { // in production environment, get the peerToken from your backend const peerToken = await getSandboxPeerToken("Room", "User"); - await joinRoom({ fishjamId: FISHJAM_ID, peerToken }); // [!code highlight] - }, [joinRoom]); + await joinRoom({ peerToken }); // [!code highlight] + }, [joinRoom, getSandboxPeerToken]); return ; +} +``` + + + ```tsx import React, { useCallback } from "react"; @@ -69,9 +118,30 @@ export function JoinRoomButton() { } ``` + + + ## Disconnecting -In order to close the connection, you have to call [`leaveRoom`](../../api/mobile/functions/useConnection#leaveroom) method. +In order to close connection, use the [`leaveRoom`](../../api/web/functions/useConnection#leaveroom) method +from [`useConnection`](../../api/web/functions/useConnection) hook. + + + + +```tsx +import { useConnection } from "@fishjam-cloud/react-client"; +import React, { useCallback } from "react"; + +export function LeaveRoomButton() { + const { leaveRoom } = useConnection(); // [!code highlight] + + return ; +} +``` + + + ```tsx import React, { useCallback } from "react"; @@ -89,11 +159,15 @@ export function LeaveRoomButton() { } ``` + + + ## Next Steps Now that you're connected to a room, you can explore additional features: - [Start Streaming](./start-streaming) - Enable your camera and microphone - [List Other Peers](./list-other-peers) - Display video from other participants -- [Picture in Picture](./picture-in-picture) - Allow users to watch video in a floating window -- [Background Streaming](./background-streaming) - Keep calls active when the app is backgrounded +- [Picture in Picture](./picture-in-picture) - Allow users to watch video in a floating window (Mobile) +- [Background Streaming](./background-streaming) - Keep calls active when the app is backgrounded (Mobile) + diff --git a/docs/how-to/react/custom-sources.mdx b/docs/how-to/client/custom-sources.mdx similarity index 96% rename from docs/how-to/react/custom-sources.mdx rename to docs/how-to/client/custom-sources.mdx index 14e7fde0..ee4b7d6f 100644 --- a/docs/how-to/react/custom-sources.mdx +++ b/docs/how-to/client/custom-sources.mdx @@ -1,15 +1,16 @@ --- -sidebar_position: 8 +sidebar_position: 10 +sidebar_label: "Custom sources 🌐" --- import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -# Custom sources +# Custom sources Web :::important -If you only wish to send camera, microphone or screen share output through Fishjam, then you most likely should refer to the documentation in [Streaming media](../../how-to/react/start-streaming) and [Managing devices](../../how-to/react/managing-devices) instead of this page. +If you only wish to send camera, microphone or screen share output through Fishjam, then you most likely should refer to the documentation in [Streaming media](./start-streaming) and [Managing devices](./managing-devices) instead of this page. ::: @@ -173,3 +174,4 @@ If you have a `