Update mobile documentation (#13)

## Description Add more info about mobile docs Add plugin for npm/yarn tab generation Enable `bash` syntax coloring Add new social card (two lines of text, instead of three
fishjam-cloud · Sep 23, 2024 · bd251b4 · bd251b4
1 parent 9c16194
commit bd251b4
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 87 deletions.
diff --git a/.spelling b/.spelling
@@ -20,3 +20,5 @@ js-server-sdk
 Docusaurus
 pre-configured
 TabItem
+AndroidManifest.xml
+iOS
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",
@@ -159,6 +132,7 @@ const config: Config = {
     prism: {
       theme: prismThemes.gruvboxMaterialLight,
       darkTheme: prismThemes.gruvboxMaterialDark,
+      additionalLanguages: ["bash"],
     },
   } satisfies Preset.ThemeConfig,
 };

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="sanbox" 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,123 @@ import TabItem from "@theme/TabItem";
 
 # Installation
 
-If you don't have an existing project, you can create a new Expo app using a template:
+## Create new App
 
-<Tabs groupId="package-managers">
-  <TabItem value="npm" label="NPM">
-
-    ```
-    npx create-expo-app@latest my-video-app
-    ```
+<details>
+  <summary>Follow these steps to create a new mobile app</summary>
 
-  </TabItem>
-  <TabItem value="yarn" label="YARN">
+If you don't have an existing project, you can create a new Expo app using a template
 
-    ```
-    yarn create expo-app my-video-app
-    ```
+```bash
+npx create-expo-app@latest my-video-app
+```
 
-  </TabItem>
-</Tabs>
+As the next step, you have to generate native files with `expo prepare` command:
 
-## Installation
+```bash
+npx expo prebuild
+```
 
-### Step 1: Install the package
+You can also follow more detailed [expo instructions](https://docs.expo.dev/get-started/introduction/).
+
+</details>
+
+## 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`
+
+<Tabs groupId="app-type">
 
-  <TabItem value="npm" label="NPM">
+  <TabItem value="expo" label="Expo">
 
-    ```
-    npm install @fishjam-cloud/react-native-client
-    ```
+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
+
+<Tabs groupId="app-type">
+
+  <TabItem value="expo" label="Expo">
+
+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`:
 
-If you plan to use Screen Sharing feature, there are few extra steps required to configure it.
+```json
+{
+  "expo": {
+    ...
+   "ios": {
+      ...
+      "infoPlist": {
+        "NSCameraUsageDescription": "Your message.",
+        "NSMicrophoneUsageDescription": "Your message"
+      }
+    },
+  }
+}
+```
 
-:::warning missing docs
+  </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>
 
-This part of docs will be updated
+```
 
-:::
+  </TabItem>
+</Tabs>
diff --git a/guide/react/installation.mdx b/guide/react/installation.mdx
@@ -11,24 +11,9 @@ import TabItem from "@theme/TabItem";
 
 Install `@fishjam-cloud/react-client` package:
 
-<Tabs groupId="package-managers">
-
-  <TabItem value="npm" label="NPM">
-
-    ```
-    npm install @fishjam-cloud/react-client
-    ```
-
-  </TabItem>
-
-  <TabItem value="yarn" label="YARN">
-
-    ```
-    yarn add @fishjam-cloud/react-client
-    ```
-
-  </TabItem>
-</Tabs>
+```bash npm2yarn
+npm install @fishjam-cloud/react-client
+```
 
 ### 2. Setup Fishjam context
 

diff --git a/guide/server.mdx b/guide/server.mdx
@@ -15,31 +15,31 @@ It's also possible to use the bare REST API, in this case you can skip this step
 <Tabs groupId="sdk">
   <TabItem value="npm" label="NPM">
 
-    ```
+    ```bash
     npm install @fishjam-cloud/js-server-sdk
     ```
 
   </TabItem>
 
   <TabItem value="yarn" label="YARN">
 
-    ```
+    ```bash
     yarn add @fishjam-cloud/js-server-sdk
     ```
 
   </TabItem>
 
   <TabItem value="pip" label="PIP">
 
-    ```
+    ```bash
     pip install fishjam-server-sdk
     ```
 
   </TabItem>
 
   <TabItem value="poetry" label="POETRY">
 
-    ```
+    ```bash
     poetry add fishjam-server-sdk
     ```
 

diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "@docusaurus/core": "3.5.2",
     "@docusaurus/preset-classic": "3.5.2",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.5.2",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",

diff --git a/static/img/social-card.png b/static/img/social-card.png
diff --git a/yarn.lock b/yarn.lock
@@ -1498,6 +1498,17 @@
     "@docusaurus/theme-search-algolia" "3.5.2"
     "@docusaurus/types" "3.5.2"
 
+"@docusaurus/remark-plugin-npm2yarn@^3.5.2":
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/remark-plugin-npm2yarn/-/remark-plugin-npm2yarn-3.5.2.tgz#892a63a9b53475d7c59957bd67277656dcd91079"
+  integrity sha512-EAD7R/skPuhW3lWZyDhRuFs3m2EGaR008tuoe6SrFre7PifoxmSCwXk8Nb4VtVRKnnbn4IgHyqq+ma47gGmKwg==
+  dependencies:
+    mdast-util-mdx "^3.0.0"
+    npm-to-yarn "^2.2.1"
+    tslib "^2.6.0"
+    unified "^11.0.3"
+    unist-util-visit "^5.0.0"
+
 "@docusaurus/theme-classic@3.5.2":
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/@docusaurus/theme-classic/-/theme-classic-3.5.2.tgz#602ddb63d987ab1f939e3760c67bc1880f01c000"
@@ -6248,6 +6259,11 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+npm-to-yarn@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/npm-to-yarn/-/npm-to-yarn-2.2.1.tgz#048843a6630621daffc6a239dfc89698b8abf7e8"
+  integrity sha512-O/j/ROyX0KGLG7O6Ieut/seQ0oiTpHF2tXAcFbpdTLQFiaNtkyTXXocM1fwpaa60dg1qpWj0nHlbNhx6qwuENQ==
+
 nprogress@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"