diff --git a/docs/explanation/public-livestreams.mdx b/docs/explanation/public-livestreams.mdx index a6e1a7a..c556be0 100644 --- a/docs/explanation/public-livestreams.mdx +++ b/docs/explanation/public-livestreams.mdx @@ -139,7 +139,7 @@ Once you've created a viewer token, you can connect to a room using the Fishjam const viewerToken = ''; // ---cut--- - import { useLivestreamViewer, RTCView } from '@fishjam-cloud/mobile-client'; + import { useLivestreamViewer, RTCView } from '@fishjam-cloud/react-native-client'; // Inside your component: const { connect, stream } = useLivestreamViewer(); @@ -199,7 +199,7 @@ Once you've created a room of type `livestream` with the `public` flag enabled, const roomId = ''; // ---cut--- - import { useLivestreamViewer, RTCView } from '@fishjam-cloud/mobile-client'; + import { useLivestreamViewer, RTCView } from '@fishjam-cloud/react-native-client'; // Inside your component: const { connect, stream } = useLivestreamViewer(); diff --git a/docs/how-to/client/background-streaming.mdx b/docs/how-to/client/background-streaming.mdx index 3c1429d..423f9a5 100644 --- a/docs/how-to/client/background-streaming.mdx +++ b/docs/how-to/client/background-streaming.mdx @@ -32,7 +32,7 @@ You need to modify `app.json` file and add our plugin: "plugins": { ... [ - "@fishjam-cloud/mobile-client", + "@fishjam-cloud/react-native-client", { "android": { "enableForegroundService": true @@ -96,7 +96,7 @@ granted and only then allow to start a service. ::: ```tsx -import { useCamera, useMicrophone } from "@fishjam-cloud/mobile-client"; +import { useCamera, useMicrophone } from "@fishjam-cloud/react-native-client"; const { isCameraOn } = useCamera(); const { isMicrophoneOn } = useMicrophone(); diff --git a/docs/how-to/client/connecting.mdx b/docs/how-to/client/connecting.mdx index 8aa59af..546a89f 100644 --- a/docs/how-to/client/connecting.mdx +++ b/docs/how-to/client/connecting.mdx @@ -42,7 +42,7 @@ const peerToken = await getSandboxPeerToken(roomName, peerName); ```ts -import { useSandbox } from "@fishjam-cloud/mobile-client"; +import { useSandbox } from "@fishjam-cloud/react-native-client"; const roomName = "room"; const peerName = "user"; // ---cut--- @@ -100,7 +100,7 @@ export function JoinRoomButton() { ```tsx import React, { useCallback } from "react"; import { Button } from "react-native"; -import { useConnection, useSandbox } from "@fishjam-cloud/mobile-client"; +import { useConnection, useSandbox } from "@fishjam-cloud/react-native-client"; export function JoinRoomButton() { const { joinRoom } = useConnection(); // [!code highlight] @@ -146,7 +146,7 @@ export function LeaveRoomButton() { ```tsx import React, { useCallback } from "react"; import { Button } from "react-native"; -import { useConnection } from "@fishjam-cloud/mobile-client"; +import { useConnection } from "@fishjam-cloud/react-native-client"; export function LeaveRoomButton() { const { leaveRoom } = useConnection(); // [!code highlight] diff --git a/docs/how-to/client/installation.mdx b/docs/how-to/client/installation.mdx index a94d355..415560d 100644 --- a/docs/how-to/client/installation.mdx +++ b/docs/how-to/client/installation.mdx @@ -77,10 +77,10 @@ You can also follow more detailed [Expo instructions](https://docs.expo.dev/get- ## Step 1: Install the Package -Install `@fishjam-cloud/mobile-client` with your preferred package manager. +Install `@fishjam-cloud/react-native-client` with your preferred package manager. ```bash npm2yarn -npm install @fishjam-cloud/mobile-client +npm install @fishjam-cloud/react-native-client ``` ## Step 2: Configure App Permissions @@ -184,7 +184,7 @@ Wrap your app in the [`FishjamProvider`](../../api/mobile/functions/FishjamProvi ```tsx import React from "react"; -import { FishjamProvider } from "@fishjam-cloud/mobile-client"; +import { FishjamProvider } from "@fishjam-cloud/react-native-client"; // Check https://fishjam.io/app/ for your Fishjam ID const FISHJAM_ID = "your-fishjam-id"; diff --git a/docs/how-to/client/list-other-peers.mdx b/docs/how-to/client/list-other-peers.mdx index 815d464..ba6dbcb 100644 --- a/docs/how-to/client/list-other-peers.mdx +++ b/docs/how-to/client/list-other-peers.mdx @@ -49,7 +49,7 @@ export function Component() { ```tsx import React from "react"; import { View, Text } from "react-native"; -import { usePeers, RTCView } from "@fishjam-cloud/mobile-client"; +import { usePeers, RTCView } from "@fishjam-cloud/react-native-client"; function VideoPlayer({ stream }: { stream: MediaStream | null }) { if (!stream) return No video; diff --git a/docs/how-to/client/managing-devices.mdx b/docs/how-to/client/managing-devices.mdx index d336ec7..a5559cb 100644 --- a/docs/how-to/client/managing-devices.mdx +++ b/docs/how-to/client/managing-devices.mdx @@ -51,7 +51,7 @@ The list of the available camera devices is available via the [`cameraDevices`]( ```tsx import React, { useCallback, useState } from "react"; import { Button } from "react-native"; -import { useCamera } from "@fishjam-cloud/mobile-client"; +import { useCamera } from "@fishjam-cloud/react-native-client"; export function FlipButton() { const { cameraDevices, selectCamera } = useCamera(); // [!code highlight] @@ -109,7 +109,7 @@ You can use [`toggleCamera`](../../api/mobile/functions/useCamera#togglecamera) ```tsx import { Button } from "react-native"; import React from "react"; -import { useCamera } from "@fishjam-cloud/mobile-client"; +import { useCamera } from "@fishjam-cloud/react-native-client"; export function ToggleCameraButton() { const { isCameraOn, toggleCamera } = useCamera(); // [!code highlight] @@ -128,7 +128,7 @@ export function ToggleCameraButton() { ```tsx import { Button, View } from "react-native"; import React from "react"; -import { useCamera } from "@fishjam-cloud/mobile-client"; +import { useCamera } from "@fishjam-cloud/react-native-client"; export function CameraControls() { const { startCamera, stopCamera, isCameraOn } = useCamera(); @@ -174,7 +174,7 @@ You can use [`toggleMicrophone`](../../api/mobile/variables/useMicrophone) to to ```tsx import { Button } from "react-native"; import React from "react"; -import { useMicrophone } from "@fishjam-cloud/mobile-client"; +import { useMicrophone } from "@fishjam-cloud/react-native-client"; export function ToggleMicrophoneButton() { const { isMicrophoneOn, toggleMicrophone } = useMicrophone(); // [!code highlight] @@ -193,7 +193,7 @@ export function ToggleMicrophoneButton() { ```tsx import { Button, View } from "react-native"; import React from "react"; -import { useMicrophone } from "@fishjam-cloud/mobile-client"; +import { useMicrophone } from "@fishjam-cloud/react-native-client"; export function MicrophoneControls() { const { startMicrophone, stopMicrophone, isMicrophoneOn } = useMicrophone(); diff --git a/docs/how-to/client/metadata.mdx b/docs/how-to/client/metadata.mdx index baf4c5b..a80ae16 100644 --- a/docs/how-to/client/metadata.mdx +++ b/docs/how-to/client/metadata.mdx @@ -57,7 +57,7 @@ const PEER_TOKEN = "some-peer-token"; // ---cut--- import React, { useCallback } from "react"; import { Button } from "react-native"; -import { useConnection } from "@fishjam-cloud/mobile-client"; +import { useConnection } from "@fishjam-cloud/react-native-client"; type PeerMetadata = { displayName: string; @@ -113,7 +113,7 @@ export function JoinRoomButton() { ```tsx import React, { useCallback } from "react"; import { Button } from "react-native"; -import { useUpdatePeerMetadata } from "@fishjam-cloud/mobile-client"; +import { useUpdatePeerMetadata } from "@fishjam-cloud/react-native-client"; type PeerMetadata = { displayName: string; @@ -180,7 +180,7 @@ export function ListAllNames() { ```tsx import React from "react"; import { Text, View } from "react-native"; -import { usePeers } from "@fishjam-cloud/mobile-client"; +import { usePeers } from "@fishjam-cloud/react-native-client"; type PeerMetadata = { displayName: string; diff --git a/docs/how-to/client/migration-guide.mdx b/docs/how-to/client/migration-guide.mdx new file mode 100644 index 0000000..ee86a15 --- /dev/null +++ b/docs/how-to/client/migration-guide.mdx @@ -0,0 +1,474 @@ +--- +sidebar_position: 0 +sidebar_label: "Migration Guide" +--- + +# Migration Guide: Upgrading @fishjam-cloud/react-native-client from 0.24 to 0.25 + +This guide will help you upgrade your React Native application from `@fishjam-cloud/react-native-client@0.24.x` to `@fishjam-cloud/react-native-client@0.25.x`. + +## Overview + +Version `0.25` of `@fishjam-cloud/react-native-client` introduces API changes that may require code updates. + +## Required Android Permissions + +Add the following WebRTC permissions to your Android configuration in `app.json`: + +```json +{ + "expo": { + "android": { + "permissions": [ + "android.permission.CAMERA", + "android.permission.RECORD_AUDIO", + "android.permission.MODIFY_AUDIO_SETTINGS", + "android.permission.ACCESS_NETWORK_STATE", + "android.permission.ACCESS_WIFI_STATE" + ] + } + } +} +``` + +## FishjamProvider Setup + +In `0.25`, wrapping your app with `FishjamProvider` is required to provide the Fishjam ID context. + +### Before + +```tsx +// @noErrors +import React from "react"; +// ---cut--- +import { useConnection } from "@fishjam-cloud/react-native-client"; + +const { joinRoom } = useConnection(); +// fishjamId was passed directly to joinRoom +await joinRoom({ fishjamId: "your-fishjam-id", peerToken: "..." }); +``` + +### After + +```tsx +import React from "react"; +import { Text } from "react-native"; +// ---cut--- +import { FishjamProvider } from "@fishjam-cloud/react-native-client"; // [!code highlight] + +// Wrap your app with FishjamProvider +export default function App() { + return ( + + {" "} + // [!code highlight] + + // [!code highlight] + ); +} + +const YourApp = () => { + return ( + <> + Your app content + + ); +}; +``` + +The `fishjamId` is now provided through the context, so you no longer need to pass it to `joinRoom` or `useSandbox`. + +## Device Initialization + +### Before + +```tsx +// @noErrors +import { useCamera } from "@fishjam-cloud/react-native-client"; + +const { prepareCamera } = useCamera(); + +await prepareCamera({ cameraEnabled: true }); +``` + +### After + +```tsx +import { useInitializeDevices } from "@fishjam-cloud/react-native-client"; + +const { initializeDevices } = useInitializeDevices(); + +// Initialize devices when you first want to stream +await initializeDevices({ enableAudio: false }); // or initializeDevices() for both +``` + +:::important +On mobile, you should use `initializeDevices()` when you first want to stream. This gives your app access to all available devices and automatically requests camera and microphone permissions. After initialization, you can use `startCamera`/`stopCamera` or `startMicrophone`/`stopMicrophone` to manage device state. +::: + +## Video Rendering and Accessing Peer Tracks + +### Before + +```tsx +// @noErrors +import React from "react"; +import { View } from "react-native"; +// ---cut--- +import { + usePeers, + VideoRendererView, +} from "@fishjam-cloud/react-native-client"; + +const { remotePeers, localPeer } = usePeers(); + +const videoTracks = remotePeers.flatMap((peer) => + peer.tracks.filter((track) => track.type === "Video" && track.isActive), +); +const localTrack = localPeer?.tracks.find((t) => t.type === "Video"); + + + {localTrack && ( + + )} + {videoTracks.map((track) => ( + + ))} +; +``` + +### After + +```tsx +import React from "react"; +// ---cut--- +import { usePeers, RTCView } from "@fishjam-cloud/react-native-client"; + +function VideoPlayer({ stream }: { stream: MediaStream | null | undefined }) { + return ( + <> + {stream && ( + + )} + + ); +} + +const { localPeer, remotePeers } = usePeers(); +{ + localPeer?.cameraTrack?.stream && ( + + ); +} + +{ + remotePeers.map((peer) => ( + <> + {peer.cameraTrack?.stream && ( + + )} + + )); +} +``` + +Key changes: + +- `VideoRendererView` → `RTCView` +- `trackId` prop → `mediaStream` prop +- `peer.tracks` array → `peer.cameraTrack` and `peer.microphoneTrack` properties +- `track.isActive` removed (check if stream exists instead) +- `track.type` removed (use specific track properties) + +## Connection API + +### Before + +```tsx +// @noErrors +import { useConnection, useSandbox } from "@fishjam-cloud/react-native-client"; + +const { joinRoom } = useConnection(); +const { getSandboxPeerToken } = useSandbox({ fishjamId: "your-id" }); + +const peerToken = await getSandboxPeerToken("roomName", "peerName"); +await joinRoom({ fishjamId: "your-id", peerToken }); +``` + +### After + +```tsx +import { useConnection, useSandbox } from "@fishjam-cloud/react-native-client"; + +const { joinRoom } = useConnection(); +// fishjamId is now provided through FishjamProvider +const { getSandboxPeerToken } = useSandbox(); + +const peerToken = await getSandboxPeerToken("roomName", "peerName"); +await joinRoom({ peerToken }); // fishjamId passed through FishjamProvider +``` + +## Device Management + +### Camera Device Selection + +### Before + +```tsx +// @noErrors +import { useCamera } from "@fishjam-cloud/react-native-client"; + +const { cameras, switchCamera, currentCamera } = useCamera(); + +// find first camera facing opposite direction than current camera +const otherCamera = cameras.find( + (camera) => camera.facingDirection !== currentCamera?.facingDirection, +); +if (otherCamera) { + switchCamera(otherCamera.id); +} +``` + +### After + +```tsx +import { useCamera } from "@fishjam-cloud/react-native-client"; +const { cameraDevices, selectCamera } = useCamera(); + +// Select camera by deviceId +const nextCamera = cameraDevices[0]; +if (nextCamera) { + selectCamera(nextCamera.deviceId); +} +``` + +Key changes: + +- `cameras` → `cameraDevices` +- `switchCamera` → `selectCamera` (takes `deviceId` instead of direction) +- `facingDirection` property removed + +### Camera Control + +### Before + +```tsx +// @noErrors +import React from "react"; +import { Button } from "react-native"; +// ---cut--- +import { useCamera } from "@fishjam-cloud/react-native-client"; +const { isCameraOn, toggleCamera } = useCamera(); + +