From fff268bade1011932f2a081062fd4f035a132497 Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec <33912477+czerwiukk@users.noreply.github.com> Date: Fri, 10 Jan 2025 10:22:18 +0100 Subject: [PATCH] FCE-987 improve legibility of quick setup (#81) ## Description As in the title, improves the quick start section. --- .../_components/configure-permissions.mdx | 17 ++++++------- .../_components/install-package.mdx | 6 ++--- docs/react-native/connecting.mdx | 12 ++++----- docs/react-native/installation.mdx | 2 -- docs/react-native/quick-setup.mdx | 25 +++++++++++-------- package.json | 2 +- src/css/custom.css | 2 +- 7 files changed, 34 insertions(+), 32 deletions(-) diff --git a/docs/react-native/_components/configure-permissions.mdx b/docs/react-native/_components/configure-permissions.mdx index 77c73b1..bd5debc 100644 --- a/docs/react-native/_components/configure-permissions.mdx +++ b/docs/react-native/_components/configure-permissions.mdx @@ -1,11 +1,11 @@ import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -Your app must have permissions configured to use the microphone and camera. +Your app needs to have permissions configured in order to use the microphone and camera. ### Android -For android you need to ask for certain permissions: +Permissions below are required to stream audio and video with Fishjam on Android. - `android.permission.CAMERA` - `android.permission.RECORD_AUDIO` @@ -15,7 +15,7 @@ For android you need to ask for certain permissions: -You need to modify `app.json` file and add all permissions: +Add required permissions to the `app.json` file. ```json title='app.json' { @@ -36,7 +36,7 @@ You need to modify `app.json` file and add all permissions: -You need to modify `AndroidManifest.xml` file, and these lines: +Add required permissions to the `AndroidManifest.xml` file. ```xml title='AndroidManifest.xml' @@ -67,8 +67,8 @@ To update default content of permission alert, you can add these settings to `ap "ios": { ... "infoPlist": { - "NSCameraUsageDescription": "Your message.", - "NSMicrophoneUsageDescription": "Your message" + "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to access your camera.", + "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to access your microphone." } }, } @@ -78,14 +78,13 @@ To update default content of permission alert, you can add these settings to `ap -You need to make sure that `Info.plist` contains these entries: +Ensure `Info.plist` contains camera and microphone usage description entries: ```xml title='Info.plist' NSCameraUsageDescription Allow $(PRODUCT_NAME) to access your camera. NSMicrophoneUsageDescription - Allow $(PRODUCT_NAME) to access your microphone - + Allow $(PRODUCT_NAME) to access your microphone. ``` diff --git a/docs/react-native/_components/install-package.mdx b/docs/react-native/_components/install-package.mdx index ef65a81..deb3b08 100644 --- a/docs/react-native/_components/install-package.mdx +++ b/docs/react-native/_components/install-package.mdx @@ -12,16 +12,16 @@ npm install @fishjam-cloud/react-native-client -#### Install Expo dependencies +### Install Expo dependencies Follow instructions form official [Expo documentation](https://docs.expo.dev/bare/installing-expo-modules/). -#### Install Fishjam +### Install Fishjam ```sh npx expo install @fishjam-cloud/react-native-client ``` - + diff --git a/docs/react-native/connecting.mdx b/docs/react-native/connecting.mdx index 0474abc..33e5275 100644 --- a/docs/react-native/connecting.mdx +++ b/docs/react-native/connecting.mdx @@ -7,12 +7,12 @@ import TabItem from "@theme/TabItem"; # Connecting -How to connect to Fishjam +This article will guide you through the process of connecting to a Fishjam room. ## Getting URL and token -In order to connect, you need to retrieve URL (multimedia server address) and token (token that will authenticate you in -your Room) +In order to connect, you need to retrieve `FISHJAM_URL` (multimedia server address) and `PEER_TOKEN` (token that will authenticate the peer in +your Room). @@ -35,7 +35,7 @@ const { fishjamUrl, peerToken } = await response.json(); -For production app, you need to implement your own backend service that will provide user with `peerToken`. To do that, +For production app, you need to implement your own backend service that will provide user with `PEER_TOKEN`. To do that, follow our [server setup instructions](/production/server). @@ -43,7 +43,7 @@ follow our [server setup instructions](/production/server). ## Connecting -In order to connect, you just need to call [`joinRoom`](/api/mobile/functions/useConnection#joinroom) method with data from previous step: +In order to connect, call [`joinRoom`](/api/mobile/functions/useConnection#joinroom) method with data from previous step: ```tsx import { useCallback } from "react"; @@ -79,7 +79,7 @@ async function getRoomDetails(roomName: string, peerName: string) { ## Disconnecting -In order to close connection, you have to call [`leaveRoom`](/api/mobile/functions/useConnection#leaveroom) method. +In order to close the connection, you have to call [`leaveRoom`](/api/mobile/functions/useConnection#leaveroom) method. ```tsx import { useCallback } from "react"; diff --git a/docs/react-native/installation.mdx b/docs/react-native/installation.mdx index 3cdd7ff..27f8d76 100644 --- a/docs/react-native/installation.mdx +++ b/docs/react-native/installation.mdx @@ -9,8 +9,6 @@ import ConfigurePermissions from "./_components/configure-permissions.mdx"; # Installation -How to install package in your mobile app - ## Optional: Create new App
diff --git a/docs/react-native/quick-setup.mdx b/docs/react-native/quick-setup.mdx index 6db0d7b..72db25f 100644 --- a/docs/react-native/quick-setup.mdx +++ b/docs/react-native/quick-setup.mdx @@ -7,32 +7,37 @@ import ConfigurePermissions from "./_components/configure-permissions.mdx"; # Quick Setup -Integrate Fishjam into your React Native application. +This article is a fast track to integrate Fishjam into your React Native application. +It contains all required steps to start streaming video with Fishjam. +You can also [see a full example](#full-example) at the end of the article. -## Install the package +## Prerequisites + +In this part, let's focus on all the things you need to prepare to use Fishjam in your project. + +### 1. Install the package -## Build native dependencies +### 2. Build native dependencies ```bash npx expo prebuild ``` -## Configure App permissions +### 3. Configure required app permissions -### Get Room Manager URL - -Login to [Fishjam Dashboard](https://fishjam.io/app) and get your Room Manager URL. +### 4. Get Room Manager URL -## TL;DR - -Checkout [complete example below:](#full-example) +Login to [Fishjam Dashboard](https://fishjam.io/app) and get your [Room Manager](/glossary#room-manager) URL. ## Step by step instructions +Now you are good to jump right into your IDE and integrate Fishjam into your app. +In few simple steps, you will be able to implement a simple video call functionality. + ### 1. Fetch peer token Use your room manager URL to fetch peer token to get a new room: diff --git a/package.json b/package.json index 30aecb0..5e89b1c 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "typecheck": "tsc", "format": "prettier . --write", "format:check": "prettier . --check", - "spellcheck": "mdspell '**/*.md' '**/*.mdx' '!node_modules/**' '!packages/**' --en-us", + "spellcheck": "mdspell '**/*.md' '**/*.mdx' '!node_modules/**' '!packages/**' '!docs/api/**' --en-us", "spellcheck:report": "yarn spellcheck -r" }, "dependencies": { diff --git a/src/css/custom.css b/src/css/custom.css index e5b4b16..1140742 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -14,7 +14,7 @@ --ifm-color-primary-lighter: #359962; --ifm-color-primary-lightest: #3cad6e; --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.5); } /* For readability concerns, you should choose a lighter palette in dark mode. */