Add quick setup instruction (#15)

## Description

Add quick setup instruction and few small configuration changes

Author: mironiasty

.gitignore

@@ -130,5 +130,3 @@ dist
 .pnp.*
 
 build
-
-.vscode

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Docusarus",
+      "skipFiles": ["<node_internals>/**"],
+      "runtimeExecutable": "yarn",
+      "args": ["start"]
+    }
+  ]
+}

docusaurus.config.ts

@@ -100,11 +100,15 @@ const config: Config = {
           items: [
             {
               label: "React Native",
-              to: "/guide/category/quick-setup---react-native",
+              to: "/guide/category/react-native-integration",
             },
             {
               label: "React",
-              to: "/guide/category/quick-setup---react",
+              to: "/guide/category/react-integration",
+            },
+            {
+              label: "Backend",
+              to: "/guide/server",
             },
           ],
         },
@@ -118,7 +122,7 @@ const config: Config = {
             },
             {
               label: "GitHub",
-              href: "https://github.com/",
+              href: "https://github.com/fishjam-cloud",
             },
             {
               label: "Software Mansion",

guide/index.md

@@ -2,4 +2,85 @@
 sidebar_position: 1
 ---
 
-# Setup
+# Quick Setup
+
+Integrate Fishjam Cloud into your React Native application.
+
+### Install package
+
+```bash npm2yarn
+npm install @fishjam-cloud/react-native-client
+```
+
+### Fetch participant token
+
+Login to [Fishjam Cloud Dashboard](https://fishjam.io/app) and get your Room Manager url. Next, use it to fetch
+participant token for new room:
+
+```ts
+const response = await fetch(
+  `https://fishjam.io/api/v1/connect/*YOUR_ID*/room-manager/?room=ROOM_NAME&user=USER_NAME`,
+);
+
+const { fishjamUrl, participantToken } = await response.json();
+```
+
+### Join Room and start streaming
+
+To start streaming, you have to prepare your camera and join room:
+
+```ts
+import { joinRoom, useCamera } from "@fishjam-cloud/react-native-client";
+
+
+function StartStreamingButton({ roomName, userName }) {
+
+  const { prepareCamera } = useCamera();
+
+
+  const startStreaming = useCallback(async () => {
+    const response = await fetch(
+      `https://fishjam.io/api/v1/connect/*YOUR_ID*/room-manager/?room=${roomName}&user=${userName}`
+    );
+    const { fishjamUrl, participantToken } = await response.json();
+
+    await prepareCamera({ enableCamera: true });
+
+    await joinRoom(fishjamUrl, participantToken);
+
+  });
+
+  return <Button onPress={startStreaming}>Start Streaming</Button>
+}
+```
+
+### Show other participants
+
+Fetching other participants of your room, can be done with `useParticipants` hook. And to display their video stream,
+you can use `VideoRendererView` component. Example code could look like this:
+
+```ts
+import { useParticipants, VideoRendererView } from '@fishjam-cloud/react-native-client';
+
+function Component() {
+  const { participants } = useParticipants();
+
+  const videoTracks = participants.flatMap((participant) =>
+    participant.tracks.filter(
+      (track) => track.type === 'Video' && track.isActive,
+    ),
+  );
+
+  return (
+    <View>
+      {videoTracks.map((track) => (
+        <VideoRendererView key={track.id} trackId={track.id} videoLayout="FIT" />
+      ))}
+    </View>
+  );
+}
+```
+
+### More
+
+Checkout our [full documentation](/guide/category/react-native-integration) for more details.

guide/react-native/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "Quick Setup - React Native",
+  "label": "React Native Integration",
   "position": 3,
   "link": {
     "type": "generated-index",

guide/react-native/start-streaming.mdx

@@ -16,17 +16,17 @@ enabled camera and microphone will start streaming to Room.
 
 ## Enable your camera
 
-First, you have to enable your camera by calling `startCamera` method.
+First, you have to enable your camera by calling `prepareCamera` method.
 You can open show camera preview with `VideoPreviewView` component
 
 ```ts
 import { useCamera, VideoPreviewView } from '@fishjam-cloud/react-native-client';
 
 function Component() {
-  const { startCamera } = useCamera();
+  const { prepareCamera } = useCamera();
 
   useEffect(() => {
-    startCamera({ enableCamera: true });
+    prepareCamera({ enableCamera: true });
   }, [])
 
   return <VideoPreviewView />

guide/react/_category_.json

@@ -1,8 +1,8 @@
 {
-  "label": "Quick Setup - React",
+  "label": "React Integration",
   "position": 4,
   "link": {
     "type": "generated-index",
-    "description": "How to integrate Fishjam Cloud into your React mobile app."
+    "description": "How to integrate Fishjam Cloud into your React web app."
   }
 }

src/pages/index.tsx

@@ -17,10 +17,7 @@ function HomepageHeader() {
         </Heading>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/guide/react-native/installation"
-          >
+          <Link className="button button--secondary button--lg" to="/guide/">
             Setup React Native App - 5min ⏱️
           </Link>
         </div>