Merge remote-tracking branch 'origin/main' into config-changes

fishjam-cloud · Sep 23, 2024 · 559d9b3 · 559d9b3
2 parents 0cb8e82 + c190da2
commit 559d9b3
Show file tree

Hide file tree

Showing 14 changed files with 401 additions and 87 deletions.
diff --git a/.spelling b/.spelling
@@ -20,3 +20,9 @@ js-server-sdk
 Docusaurus
 pre-configured
 TabItem
+AndroidManifest.xml
+iOS
+Xcode
+UI
+dev
+Podfile
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -37,6 +37,9 @@ const config: Config = {
           path: "guide",
           routeBasePath: "guide",
           editUrl: "https://github.com/fishjam-cloud/documentation/",
+          remarkPlugins: [
+            [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }],
+          ],
         },
         blog: {
           showReadingTime: true,
@@ -56,26 +59,7 @@ const config: Config = {
     ],
   ],
 
-  plugins: [
-    // [
-    //   "@docusaurus/plugin-content-docs",
-    //   {
-    //     id: "react",
-    //     path: "react-docs",
-    //     routeBasePath: "react",
-    //     sidebarPath: "./sidebars/react.ts",
-    //   },
-    // ],
-    // [
-    //   "@docusaurus/plugin-content-docs",
-    //   {
-    //     id: "react-native",
-    //     path: "react-native-docs",
-    //     routeBasePath: "react-native",
-    //     sidebarPath: "./sidebars/react-native.ts",
-    //   },
-    // ],
-  ],
+  plugins: [],
 
   themeConfig: {
     image: "img/social-card.png",
@@ -96,18 +80,7 @@ const config: Config = {
           position: "left",
           sidebarId: "guideSidebar",
         },
-        // {
-        //   to: "/react-native",
-        //   label: "React Native",
-        //   position: "left",
-        //   sidebarId: "reactNativeSidebar",
-        // },
-        // {
-        //   to: "/react",
-        //   label: "React",
-        //   position: "left",
-        //   sidebarId: "reactSidebar",
-        // },
+
         {
           href: "https://fishjam.io/app/",
           label: "Fishjam Dashboard",
@@ -163,6 +136,7 @@ const config: Config = {
     prism: {
       theme: prismThemes.gruvboxMaterialLight,
       darkTheme: prismThemes.gruvboxMaterialDark,
+      additionalLanguages: ["bash"],
     },
   } satisfies Preset.ThemeConfig,
 };

diff --git a/guide/react-native/assets/ios-new-folder.png b/guide/react-native/assets/ios-new-folder.png
diff --git a/guide/react-native/assets/ios-new-group.png b/guide/react-native/assets/ios-new-group.png
diff --git a/guide/react-native/assets/ios-new-target.png b/guide/react-native/assets/ios-new-target.png
diff --git a/guide/react-native/background.mdx b/guide/react-native/background.mdx
@@ -0,0 +1,56 @@
+---
+sidebar_position: 6
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Streaming from background
+
+On Android, it is possible to continue streaming when app is in background. Unfortunately this functionality is not available on iOS (due to Apple limitations)
+
+Below is configuration required to make it work:
+
+<Tabs groupId="app-type">
+
+  <TabItem value="expo" label="Expo">
+
+You need to modify `app.json` file and add our plugin:
+
+```json
+{
+  "expo": {
+    ...
+    "plugins": {
+      ...
+      [
+        "@fishjam-cloud/react-native-client",
+        {
+          "android": {
+            "enableForegroundService": true
+          }
+        }
+      ],
+      ...
+    }
+  }
+}
+```
+
+  </TabItem>
+  <TabItem value="rn" label="Bare workflow">
+
+You need to modify `AndroidManifest.xml` file and add below service:
+
+```xml
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  ...
+  <application ...>
+    ...
+    <service android:name="io.fishjam.reactnative.FishjamForegroundService" android:foregroundServiceType="camera|microphone|mediaProjection"/>
+  </application>
+</manifest>
+```
+
+  </TabItem>
+</Tabs>
diff --git a/guide/react-native/connecting.mdx b/guide/react-native/connecting.mdx
@@ -2,6 +2,9 @@
 sidebar_position: 2
 ---
 
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
 # Connecting
 
 How to connect to Fishjam Cloud
@@ -10,7 +13,9 @@ How to connect to Fishjam Cloud
 
 In order to connect, you need to retrieve URL (multimedia server address) and token (token that will authenticate you in your Room)
 
-### Using sandbox app
+<Tabs groupId="app-type">
+
+  <TabItem value="sandbox" label="Sandbox App">
 
 Once you get your account on [Fishjam Cloud](https://fishjam.io), you will have access to Sandbox App.
 This app comes with pre-configured test service called Room Manager. This is basically service that will
@@ -20,12 +25,21 @@ To use that simply call `fetch`:
 
 ```ts
 const response = await fetch(
-  `https://fishjam.io/api/v1/connect/*YOUR_ID*/room-manager/*ROOM_NAME*/users/*USER_NAME*`,
+  `https://fishjam.io/api/v1/connect/*YOUR_ID*/room-manager?room=*ROOM_NAME&user=*USER_NAME*`,
 );
 
-const { url, token } = await response.json();
+const { fishjamUrl, participantToken } = await response.json();
 ```
 
+  </TabItem>
+  <TabItem value="production" label="Production App">
+
+For production app, you need to implement your own backend service that will provide user with `participantToken`.
+To do that, follow our [server setup instructions](/guide/server).
+
+  </TabItem>
+</Tabs>
+
 ## Connecting
 
 In order to connect, you just need to call `joinRoom` method with data from previous step:

diff --git a/guide/react-native/installation.mdx b/guide/react-native/installation.mdx
@@ -7,55 +7,125 @@ import TabItem from "@theme/TabItem";
 
 # Installation
 
-If you don't have an existing project, you can create a new Expo app using a template:
+How to install package in your mobile app
 
-<Tabs groupId="package-managers">
-  <TabItem value="npm" label="NPM">
-
-    ```
-    npx create-expo-app@latest my-video-app
-    ```
+## Optional: Create new App
 
-  </TabItem>
-  <TabItem value="yarn" label="YARN">
+<details>
+  <summary>Follow these steps to create a new mobile app</summary>
 
-    ```
-    yarn create expo-app my-video-app
-    ```
+If you don't have an existing project, you can create a new Expo app using a template
 
-  </TabItem>
-</Tabs>
+```bash
+npx create-expo-app@latest my-video-app
+```
+
+As the next step, you have to generate native files with `expo prepare` command:
+
+```bash
+npx expo prebuild
+```
+
+You can also follow more detailed [expo instructions](https://docs.expo.dev/get-started/introduction/).
 
-## Installation
+</details>
 
-### Step 1: Install the package
+## Step 1: Install the package
 
 Install `@fishjam-cloud/react-native-client` package:
 
-<Tabs groupId="package-managers">
+```bash npm2yarn
+npm install @fishjam-cloud/react-native-client
+```
+
+## Step 2: Configure App permissions
+
+Your app must have permissions configured to use the microphone and camera.
+
+### Android
+
+For android you need to ask for certain permissions:
+
+- `android.permission.CAMERA`
+- `android.permission.RECORD_AUDIO`
+- `android.permission.MODIFY_AUDIO_SETTINGS`
 
-  <TabItem value="npm" label="NPM">
+<Tabs groupId="app-type">
 
-    ```
-    npm install @fishjam-cloud/react-native-client
-    ```
+  <TabItem value="expo" label="Expo">
+
+You need to modify `app.json` file and add all permissions:
+
+```json
+{
+  "expo": {
+    ...
+    "android": {
+      ...
+      "permissions": {
+        "android.permission.CAMERA",
+        "android.permission.RECORD_AUDIO",
+        "android.permission.MODIFY_AUDIO_SETTINGS"
+      }
+    }
+  }
+}
+```
 
   </TabItem>
-  <TabItem value="yarn" label="YARN">
+  <TabItem value="rn" label="Bare workflow">
+
+You need to modify `AndroidManifest.xml` file, and these lines:
 
-    ```
-    yarn add @fishjam-cloud/react-native-client
-    ```
+```xml
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  ...
+  <uses-permission android:name="android.permission.CAMERA"/>
+  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTING"/>
+  ...
+</manifest>
+```
 
   </TabItem>
 </Tabs>
 
-### Step 2: Configure screen sharing
+### iOS
 
-If you plan to use Screen Sharing feature, there are few extra steps required to configure it.
+<Tabs groupId="app-type">
 
-:::warning missing docs
+  <TabItem value="expo" label="Expo">
 
-This part of docs will be updated
+You don't have to make any changes to run app on iOS.
+To update default content of permission alert, you can add these settings to `app.json`:
+
+```json
+{
+  "expo": {
+    ...
+   "ios": {
+      ...
+      "infoPlist": {
+        "NSCameraUsageDescription": "Your message.",
+        "NSMicrophoneUsageDescription": "Your message"
+      }
+    },
+  }
+}
+```
+
+  </TabItem>
+  <TabItem value="rn" label="Bare workflow">
 
-:::
+You need to make sure that `info.plist` contain these entries:
+
+```xml
+    <key>NSCameraUsageDescription</key>
+    <string>Allow $(PRODUCT_NAME) to access your camera.</string>
+    <key>NSMicrophoneUsageDescription</key>
+    <string>Allow $(PRODUCT_NAME) to access your microphone</string>
+
+```
+
+  </TabItem>
+</Tabs>