From 769c91b5e21b99086ff15f5da7766e2207fb6af3 Mon Sep 17 00:00:00 2001 From: Dawid Matyjasik Date: Thu, 26 Jun 2025 17:12:52 +0200 Subject: [PATCH 1/7] docs: use camera permissions --- docs/react-native/installation.mdx | 35 +++++++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 3 deletions(-) diff --git a/docs/react-native/installation.mdx b/docs/react-native/installation.mdx index 30755829..f176cc1e 100644 --- a/docs/react-native/installation.mdx +++ b/docs/react-native/installation.mdx @@ -42,14 +42,43 @@ Install `@fishjam-cloud/react-native-client` with your preferred package manager ## Step 3: Request App Permissions -Before using the camera or microphone, ask the user for permissions. +Before using the camera or microphone, ask the user for permissions. The `useCameraPermissions` hook returns an array with three elements: + +1. `permission`: The current permission status (`null` or a `PermissionResponse` object) +2. `requestPermission`: A function to request permission +3. `getPermission`: A function to get the current permission status + +Here's an example of how to use it: ```tsx -import { useCameraPermissions } from "expo-camera"; +import { useCameraPermissions } from "@fishjam-cloud/react-native-client"; -const [permission, requestPermission] = useCameraPermissions(); +const [permission, requestPermission, getPermission] = useCameraPermissions(); useEffect(() => { + // Request permission when the component mounts requestPermission(); }, []); ``` + +The `permission` object has the following properties: + +- `canAskAgain`: Indicates if the user can be asked again for this permission. If `false`, direct the user to the Settings app to enable/disable the permission. +- `expires`: When the permission expires. +- `granted`: Indicates if the permission is granted. +- `status`: The current status of the permission. + +> **Note:** +> You can control whether the hook automatically fetches the current permission status (`getMethod`) or requests permission (`requestMethod`) by passing an `options` object to the hook. By default, `getMethod` is called automatically (auto fetch is `true`), and `requestMethod` is not (auto request is `false`). +> +> For example: +> +> ```tsx +> // Do not auto-fetch permission status, do not auto-request +> const [permission, requestPermission] = useCameraPermissions({ +> get: false, // disables auto-fetch +> request: true, // enables auto-request +> }); +> ``` +> +> Adjust these options to fit your app's needs. From a79eb4cb7465c42a54371aec6a95f260b2aa8f89 Mon Sep 17 00:00:00 2001 From: Dawid Matyjasik Date: Thu, 26 Jun 2025 17:15:24 +0200 Subject: [PATCH 2/7] feat: use microphone permissions --- docs/react-native/installation.mdx | 41 +++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/docs/react-native/installation.mdx b/docs/react-native/installation.mdx index f176cc1e..ceb847b2 100644 --- a/docs/react-native/installation.mdx +++ b/docs/react-native/installation.mdx @@ -40,7 +40,7 @@ Install `@fishjam-cloud/react-native-client` with your preferred package manager -## Step 3: Request App Permissions +## Step 3: Request Camera Permissions Before using the camera or microphone, ask the user for permissions. The `useCameraPermissions` hook returns an array with three elements: @@ -82,3 +82,42 @@ The `permission` object has the following properties: > ``` > > Adjust these options to fit your app's needs. + +## Step 4: Request Microphone Permissions + +To use the microphone, you should also request permissions using the `useMicrophonePermissions` hook. This hook works the same way as `useCameraPermissions` and returns an array with three elements: + +1. `permission`: The current permission status (`null` or a `PermissionResponse` object) +2. `requestPermission`: A function to request permission +3. `getPermission`: A function to get the current permission status + +Here's an example of how to use it: + +```tsx +import { useMicrophonePermissions } from "@fishjam-cloud/react-native-client"; + +const [permission, requestPermission, getPermission] = + useMicrophonePermissions(); +``` + +The `permission` object has the following properties: + +- `canAskAgain`: Indicates if the user can be asked again for this permission. If `false`, direct the user to the Settings app to enable/disable the permission. +- `expires`: When the permission expires. +- `granted`: Indicates if the permission is granted. +- `status`: The current status of the permission. + +> **Note:** +> You can control whether the hook automatically fetches the current permission status (`getMethod`) or requests permission (`requestMethod`) by passing an `options` object to the hook. By default, `getMethod` is called automatically (auto fetch is `true`), and `requestMethod` is not (auto request is `false`). +> +> For example: +> +> ```tsx +> // Do not auto-fetch permission status, enable auto-request +> const [permission, requestPermission] = useMicrophonePermissions({ +> get: false, // disables auto-fetch +> request: true, // enables auto-request +> }); +> ``` +> +> Adjust these options to fit your app's needs. From 0cc3cd3912f89d4676e280663c95034c0720544c Mon Sep 17 00:00:00 2001 From: Dawid Matyjasik Date: Thu, 26 Jun 2025 17:16:22 +0200 Subject: [PATCH 3/7] docs: important note --- docs/react-native/installation.mdx | 32 ++++-------------------------- 1 file changed, 4 insertions(+), 28 deletions(-) diff --git a/docs/react-native/installation.mdx b/docs/react-native/installation.mdx index ceb847b2..b037a9ca 100644 --- a/docs/react-native/installation.mdx +++ b/docs/react-native/installation.mdx @@ -68,20 +68,8 @@ The `permission` object has the following properties: - `granted`: Indicates if the permission is granted. - `status`: The current status of the permission. -> **Note:** -> You can control whether the hook automatically fetches the current permission status (`getMethod`) or requests permission (`requestMethod`) by passing an `options` object to the hook. By default, `getMethod` is called automatically (auto fetch is `true`), and `requestMethod` is not (auto request is `false`). -> -> For example: -> -> ```tsx -> // Do not auto-fetch permission status, do not auto-request -> const [permission, requestPermission] = useCameraPermissions({ -> get: false, // disables auto-fetch -> request: true, // enables auto-request -> }); -> ``` -> -> Adjust these options to fit your app's needs. +> **Important:** +> If you use the default options, you don't need to manually ask for permissions—permission will be requested automatically when the component mounts. ## Step 4: Request Microphone Permissions @@ -107,17 +95,5 @@ The `permission` object has the following properties: - `granted`: Indicates if the permission is granted. - `status`: The current status of the permission. -> **Note:** -> You can control whether the hook automatically fetches the current permission status (`getMethod`) or requests permission (`requestMethod`) by passing an `options` object to the hook. By default, `getMethod` is called automatically (auto fetch is `true`), and `requestMethod` is not (auto request is `false`). -> -> For example: -> -> ```tsx -> // Do not auto-fetch permission status, enable auto-request -> const [permission, requestPermission] = useMicrophonePermissions({ -> get: false, // disables auto-fetch -> request: true, // enables auto-request -> }); -> ``` -> -> Adjust these options to fit your app's needs. +> **Important:** +> If you use the default options, you don't need to manually ask for permissions—permission will be requested automatically when the component mounts. From efb523d1e62a1406caea41805880e76585b82076 Mon Sep 17 00:00:00 2001 From: Dawid Matyjasik Date: Fri, 27 Jun 2025 09:09:41 +0200 Subject: [PATCH 4/7] docs: improve readability --- docs/react-native/installation.mdx | 73 +++++++++++++++--------------- 1 file changed, 37 insertions(+), 36 deletions(-) diff --git a/docs/react-native/installation.mdx b/docs/react-native/installation.mdx index b037a9ca..9d87e05c 100644 --- a/docs/react-native/installation.mdx +++ b/docs/react-native/installation.mdx @@ -40,53 +40,42 @@ Install `@fishjam-cloud/react-native-client` with your preferred package manager -## Step 3: Request Camera Permissions +## Optional: Request Camera and Microphone Permissions -Before using the camera or microphone, ask the user for permissions. The `useCameraPermissions` hook returns an array with three elements: +> **Important:** +> You usually don't need to explicitly ask for camera or microphone permissions in your code. By default, the user will be prompted for permissions automatically when the relevant component mounts. + +If you want more control, you can use the `useCameraPermissions` and `useMicrophonePermissions` hooks to manage permissions manually. Both hooks return an array with three elements: -1. `permission`: The current permission status (`null` or a `PermissionResponse` object) +1. `permission`: The current permission status 2. `requestPermission`: A function to request permission 3. `getPermission`: A function to get the current permission status -Here's an example of how to use it: +Here's an example of how to use both hooks: ```tsx -import { useCameraPermissions } from "@fishjam-cloud/react-native-client"; +import { + useCameraPermissions, + useMicrophonePermissions, +} from "@fishjam-cloud/react-native-client"; +import { useEffect } from "react"; + +const [cameraPermission, requestCameraPermission, getCameraPermission] = + useCameraPermissions(); -const [permission, requestPermission, getPermission] = useCameraPermissions(); +const [ + microphonePermission, + requestMicrophonePermission, + getMicrophonePermission, +] = useMicrophonePermissions(); useEffect(() => { - // Request permission when the component mounts - requestPermission(); + requestCameraPermission(); + requestMicrophonePermission(); }, []); ``` -The `permission` object has the following properties: - -- `canAskAgain`: Indicates if the user can be asked again for this permission. If `false`, direct the user to the Settings app to enable/disable the permission. -- `expires`: When the permission expires. -- `granted`: Indicates if the permission is granted. -- `status`: The current status of the permission. - -> **Important:** -> If you use the default options, you don't need to manually ask for permissions—permission will be requested automatically when the component mounts. - -## Step 4: Request Microphone Permissions - -To use the microphone, you should also request permissions using the `useMicrophonePermissions` hook. This hook works the same way as `useCameraPermissions` and returns an array with three elements: - -1. `permission`: The current permission status (`null` or a `PermissionResponse` object) -2. `requestPermission`: A function to request permission -3. `getPermission`: A function to get the current permission status - -Here's an example of how to use it: - -```tsx -import { useMicrophonePermissions } from "@fishjam-cloud/react-native-client"; - -const [permission, requestPermission, getPermission] = - useMicrophonePermissions(); -``` +**PermissionResponse** The `permission` object has the following properties: @@ -95,5 +84,17 @@ The `permission` object has the following properties: - `granted`: Indicates if the permission is granted. - `status`: The current status of the permission. -> **Important:** -> If you use the default options, you don't need to manually ask for permissions—permission will be requested automatically when the component mounts. +> **Note:** +> You can control whether the hook automatically fetches the current permission status or requests permission by passing an `options` object to the hook. By default, `get` is called automatically (auto fetch is `true`), and `request` is not (auto request is `false`). +> +> For example: +> +> ```tsx +> // Do not auto-fetch permission status, enable auto-request +> const [permission, requestPermission] = useCameraPermissions({ +> get: false, // disables auto-fetch +> request: true, // enables auto-request +> }); +> ``` +> +> Adjust these options to fit your app's needs. From 7f23e807859c93e6212be5b6be7c6e2d57fdf8de Mon Sep 17 00:00:00 2001 From: Dawid Matyjasik Date: Fri, 27 Jun 2025 09:17:38 +0200 Subject: [PATCH 5/7] fix: spelling --- docs/react-native/installation.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react-native/installation.mdx b/docs/react-native/installation.mdx index 9d87e05c..35bbea0a 100644 --- a/docs/react-native/installation.mdx +++ b/docs/react-native/installation.mdx @@ -75,7 +75,7 @@ useEffect(() => { }, []); ``` -**PermissionResponse** +**Permission Response** The `permission` object has the following properties: From 3a1ce76013605a303625b3a574fec0ecb12a8edb Mon Sep 17 00:00:00 2001 From: Dawid Matyjasik Date: Fri, 27 Jun 2025 16:13:15 +0200 Subject: [PATCH 6/7] docs: improve docs --- docs/react-native/installation.mdx | 37 ++++++++++++++++-------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/docs/react-native/installation.mdx b/docs/react-native/installation.mdx index 35bbea0a..241cabb2 100644 --- a/docs/react-native/installation.mdx +++ b/docs/react-native/installation.mdx @@ -42,9 +42,9 @@ Install `@fishjam-cloud/react-native-client` with your preferred package manager ## Optional: Request Camera and Microphone Permissions -> **Important:** -> You usually don't need to explicitly ask for camera or microphone permissions in your code. By default, the user will be prompted for permissions automatically when the relevant component mounts. - +:::info +You don't need to explicitly ask for permissions because it is done automatically on mounting. You can opt for asking them at a different time if you want to customize the user experience. +::: If you want more control, you can use the `useCameraPermissions` and `useMicrophonePermissions` hooks to manage permissions manually. Both hooks return an array with three elements: 1. `permission`: The current permission status @@ -84,17 +84,20 @@ The `permission` object has the following properties: - `granted`: Indicates if the permission is granted. - `status`: The current status of the permission. -> **Note:** -> You can control whether the hook automatically fetches the current permission status or requests permission by passing an `options` object to the hook. By default, `get` is called automatically (auto fetch is `true`), and `request` is not (auto request is `false`). -> -> For example: -> -> ```tsx -> // Do not auto-fetch permission status, enable auto-request -> const [permission, requestPermission] = useCameraPermissions({ -> get: false, // disables auto-fetch -> request: true, // enables auto-request -> }); -> ``` -> -> Adjust these options to fit your app's needs. +:::info +You can control when and how permissions are requested by passing an `options` object to the hook. +::: + +### Customizing Permission Request Behavior + +By default, `get` is called automatically (auto fetch is `true`), and `request` is not (auto request is `false`). You can change this behavior: + +```tsx +// Do not auto-fetch permission status, enable auto-request +const [permission, requestPermission] = useCameraPermissions({ + get: false, // disables auto-fetch + request: true, // enables auto-request +}); +``` + +Adjust these options to fit your app's needs. From 7c9ca50713db47cd88bd5a3436e1ea3b15837d20 Mon Sep 17 00:00:00 2001 From: Dawid Matyjasik Date: Mon, 30 Jun 2025 10:40:36 +0200 Subject: [PATCH 7/7] docs: improve language --- docs/react-native/installation.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/react-native/installation.mdx b/docs/react-native/installation.mdx index 241cabb2..d985ce28 100644 --- a/docs/react-native/installation.mdx +++ b/docs/react-native/installation.mdx @@ -43,8 +43,9 @@ Install `@fishjam-cloud/react-native-client` with your preferred package manager ## Optional: Request Camera and Microphone Permissions :::info -You don't need to explicitly ask for permissions because it is done automatically on mounting. You can opt for asking them at a different time if you want to customize the user experience. +You don’t need to explicitly request permissions as they’re automatically asked for when your app needs them. ::: + If you want more control, you can use the `useCameraPermissions` and `useMicrophonePermissions` hooks to manage permissions manually. Both hooks return an array with three elements: 1. `permission`: The current permission status @@ -79,7 +80,7 @@ useEffect(() => { The `permission` object has the following properties: -- `canAskAgain`: Indicates if the user can be asked again for this permission. If `false`, direct the user to the Settings app to enable/disable the permission. +- `canAskAgain`: Indicates if the user can be asked again for this permission. If `false`, it is recommended to direct the user to Settings app to enable/disable the permission. - `expires`: When the permission expires. - `granted`: Indicates if the permission is granted. - `status`: The current status of the permission.