[FCE-931] Document useConnection on web (#62)

## Description

- Add documentation for `useConnection` hook on web.
- Fix how connection status is returned in mobile SDK.
- Unify code formatting with how it is done on mobile part.

docs/react-native/quick-setup.mdx

@@ -101,7 +101,7 @@ export function StartStreamingButton({
 Once you are connected, you can check connection status with `useConnection` hook
 
 ```ts
-const { connectionStatus } = useConnection();
+const { peerStatus } = useConnection();
 ```
 
 ### 4. Show other peers
@@ -217,7 +217,7 @@ function StartStreamingButton({
 
 export default function HomeScreen() {
   const [permission, requestPermission] = useCameraPermissions();
-  const { connectionStatus } = useConnection();
+  const { peerStatus } = useConnection();
 
   useEffect(() => {
     requestPermission();
@@ -229,7 +229,7 @@ export default function HomeScreen() {
 
   return (
     <SafeAreaView style={styles.container}>
-      {connectionStatus !== "connected" && (
+      {peerStatus !== "connected" && (
         <StartStreamingButton roomName="Room Name" peerName="Peer Name" />
       )}
       <TracksView />

docs/react-native/reconnect.mdx

@@ -19,20 +19,20 @@ export function useLogConnectionStatus() {
   const prevStatus = useRef<ConnectionStatus>("idle");
 
   // highlight-next-line
-  const { connectionStatus } = useConnection();
+  const { reconnectionStatus } = useConnection();
 
   useEffect(() => {
-    if (prevStatus.current === connectionStatus) return;
-    prevStatus.current = connectionStatus;
+    if (prevStatus.current === reconnectionStatus) return;
+    prevStatus.current = reconnectionStatus;
 
-    switch (connectionStatus) {
+    switch (reconnectionStatus) {
       case "error":
         return console.log("Failed to reconnect");
       case "reconnecting":
         return console.log("Connection is broken, reconnecting...");
       default:
         return console.log("Connected successfully");
     }
-  }, [connectionStatus]);
+  }, [reconnectionStatus]);
 }
 ```

docs/react/connecting.mdx

@@ -10,31 +10,46 @@ In order to connect, you need a `PEER_TOKEN` and the `FISHJAM_URL`.
 
 ## Connecting
 
-Use the `useConnect` hook to get the `connect` function.
+Use the `useConnection` hook to get the `joinRoom` function.
 
-```ts
-import { connect } from "@fishjam-cloud/react-client";
+```tsx
+import { useConnection } from "@fishjam-cloud/react-client";
+import { useCallback } from "react";
 
-function Component() {
-  const connect = useConnect();
+export function JoinRoomButton() {
+  // highlight-next-line
+  const { joinRoom } = useConnection();
 
-  const joinRoom = async () => {
-    await connect({
+  const onJoinRoomPress = useCallback(async () => {
+    // highlight-next-line
+    await joinRoom({
       token: PEER_TOKEN,
       url: FISHJAM_URL,
     });
-  };
+  }, [joinRoom]);
+
+  return <button onClick={onJoinRoomPress}>Join room</button>;
 }
 ```
 
 ## Disconnecting
 
-In order to close connection, use the `useDisconnect` hook.
+In order to close connection, use the `leaveRoom` method from `useConnection` hook.
 
 ```ts
-import { useDisconnect } from "@fishjam-cloud/react-client";
+import { useConnection } from "@fishjam-cloud/react-client";
+import { useCallback } from "react";
+
+export function LeaveRoomButton() {
+  // highlight-next-line
+  const { leaveRoom } = useConnection();
 
-const disconnect = useDisconnect();
+  const onLeaveRoomPress = useCallback(() => {
+    // highlight-next-line
+    leaveRoom();
+  }, [leaveRoom]);
+
+  return <button onClick={onLeaveRoomPress}>Leave room</button>;
+}
 
-await disconnect();
 ```

docs/react/installation.mdx

@@ -7,25 +7,27 @@ import TabItem from "@theme/TabItem";
 
 # Installation
 
-### 1. Install the package
-
-Install `@fishjam-cloud/react-client` package:
+## 1. Install the package
 
 ```bash npm2yarn
 npm install @fishjam-cloud/react-client
 ```
 
-### 2. Setup Fishjam context
+## 2. Setup Fishjam context
 
 Wrap your app in our `FishjamProvider` component.
 
 ```tsx
+import React from "react";
+import ReactDOM from "react-dom/client";
 import { FishjamProvider } from "@fishjam-cloud/react-client";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
+    // highlight-next-line
     <FishjamProvider>
       <App />
+      // highlight-next-line
     </FishjamProvider>
   </React.StrictMode>,
 );

docs/react/list-other.mdx

@@ -5,21 +5,20 @@ sidebar_position: 5
 # Display media of other peers
 
 To access data and media of other peers, use the `usePeers` hook.
-It returns two properties, `peers` and `localPeer`.
+It returns two properties, `remotePeers` and `localPeer`.
 They contain all the tracks of other peers and all the tracks of the local user, respectively.
 
 ### Example of playing other peers' available media
 
 ```tsx
-import React from "react";
 import { usePeers } from "@fishjam-cloud/react-client";
 
-function Component() {
-  const { peers } = usePeers();
+export function Component() {
+  const { remotePeers } = usePeers();
 
   return (
     <ul>
-      {peers.map(({ id, cameraTrack, microphoneTrack }) => (
+      {remotePeers.map(({ id, cameraTrack, microphoneTrack }) => (
         <li key={id}>
           <VideoRenderer stream={cameraTrack?.stream} />
 

docs/react/start-streaming.mdx

@@ -10,9 +10,10 @@ Fishjam provides an API to browse and manage media devices you can use.
 To ask the browser for permission to list the available devices, call the `initializeDevices` function.
 
 ```ts
+import { useEffect } from "react";
 import { useInitializeDevices } from "@fishjam-cloud/react-client";
 
-function useExample() {
+export function useExample() {
   const { initializeDevices } = useInitializeDevices();
 
   useEffect(() => {
@@ -31,26 +32,35 @@ To manage users' camera and microphone devices, use the respective `useCamera` a
 Both of them has the same API. To keep things simple, let's just use the camera hook.
 
 ```tsx
+import { useEffect, useRef } from "react";
 import { useCamera } from "@fishjam-cloud/react-client";
 
-function ExampleComponent() {
-  const camera = useCamera();
+export function ExampleComponent() {
+  const videoRef = useRef<HTMLVideoElement>(null);
 
-  return (
-    <div>
-      {camera.isStreaming && <p>You are going live!</p>}
+  // highlight-next-line
+  const { isStreaming, activeDevice, initialize, stream, devices } =
+    // highlight-next-line
+    useCamera();
 
-      <p>Active device: {camera.activeDevice?.label ?? "None"}</p>
+  useEffect(() => {
+    if (!videoRef.current) return;
+    videoRef.current.srcObject = stream ?? null;
+  }, [stream]);
 
-      <select onChange={(e) => camera.initialize(e.target.value)}>
-        {camera.devices.map(({ label, deviceId }) => (
+  return (
+    <div>
+      {isStreaming && <p>You are going live!</p>}
+      <p>Active device: {activeDevice?.label ?? "None"}</p>
+      <select onChange={(e) => initialize(e.target.value)}>
+        {devices.map(({ label, deviceId }) => (
           <option key={deviceId} value={deviceId}>
             {label}
           </option>
         ))}
       </select>
-
-      {camera.stream && <VideoPlayer stream={camera.stream} />}
+      // highlight-next-line
+      {stream && <video ref={videoRef} autoPlay />}
     </div>
   );
 }

docs/react/stream-middleware.mdx

@@ -29,18 +29,27 @@ You can set the middleware for your media tracks using `setTrackMiddleware` meth
 The following example demonstrates how to apply a custom blur effect to the camera track using the `useCamera` hook and middleware.
 
 ```tsx
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
+import type { TrackMiddleware } from "@fishjam-cloud/react-client";
 import { useCamera } from "@fishjam-cloud/react-client";
 import { BlurProcessor } from "path-to-blur-processor"; // Adjust import based on actual implementation
 
-function CameraWithBlurEffect() {
-  const camera = useCamera();
+export function CameraWithBlurEffect() {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  // highlight-next-line
+  const { stream, currentMiddleware, setTrackMiddleware } = useCamera();
+
+  useEffect(() => {
+    if (!videoRef.current) return;
+    videoRef.current.srcObject = stream ?? null;
+  }, [stream]);
 
   // Define blur middleware
   const blurMiddleware: TrackMiddleware = useCallback(
     (track: MediaStreamTrack) => {
-      const stream = new MediaStream([track]);
-      const blurProcessor = new BlurProcessor(stream);
+      const streamToBlur = new MediaStream([track]);
+      const blurProcessor = new BlurProcessor(streamToBlur);
 
       return {
         track: blurProcessor.track,
@@ -51,11 +60,12 @@ function CameraWithBlurEffect() {
   );
 
   // Check if the current middleware is blur
-  const isBlurEnabled = camera.currentMiddleware === blurMiddleware;
+  const isBlurEnabled = currentMiddleware === blurMiddleware;
 
   // Toggle blur effect
   const toggleBlur = () => {
-    camera.setTrackMiddleware(isBlurEnabled ? null : blurMiddleware);
+    // highlight-next-line
+    setTrackMiddleware(isBlurEnabled ? null : blurMiddleware);
   };
 
   return (
@@ -64,7 +74,7 @@ function CameraWithBlurEffect() {
         {isBlurEnabled ? "Disable Blur" : "Enable Blur"}
       </button>
 
-      {camera.stream && <video src={stream} />}
+      {stream && <video ref={videoRef} />}
     </>
   );
 }

docs/react/toggling-devices.mdx

@@ -19,9 +19,9 @@ Both APIs are available for camera as well as for the microphone.
 
 ## Muting and unmuting - `toggleMute()`
 
-The toggle mute function allows you to enable or disable the media stream without affecting the device's operational status.  
-If the device is muted, it starts the device, enables the media stream, and starts (or resumes) streaming.  
-When it's unmuted, it disables the media stream and pauses streaming but does not stop the device.  
+The toggle mute function allows you to enable or disable the media stream without affecting the device's operational status.
+If the device is muted, it starts the device, enables the media stream, and starts (or resumes) streaming.
+When it's unmuted, it disables the media stream and pauses streaming but does not stop the device.
 In the case when the device is off, it starts the device, enables the media stream, and starts (or resumes) streaming.
 
 ### Usage example
@@ -31,12 +31,11 @@ Use this function to programmatically toggle the mute state based on user intera
 ```tsx
 import { useCamera } from "@fishjam-cloud/react-client";
 
-function CameraControl() {
-  const camera = useCamera();
+export function CameraControl() {
+  // highlight-next-line
+  const { toggleMute } = useCamera();
 
-  return (
-    <button onClick={() => camera.toggleMute()}>Toggle camera mute</button>
-  );
+  return <button onClick={() => toggleMute()}>Toggle camera mute</button>;
 }
 ```
 
@@ -55,12 +54,11 @@ This function allows you to control the device's power state directly from your
 ```tsx
 import { useMicrophone } from "@fishjam-cloud/react-client";
 
-function MicrophoneControl() {
-  const microphone = useMicrophone();
+export function MicrophoneControl() {
+  // highlight-next-line
+  const { toggleDevice } = useMicrophone();
 
-  return (
-    <button onClick={() => microphone.toggleDevice()}>Toggle microphone</button>
-  );
+  return <button onClick={() => toggleDevice()}>Toggle microphone</button>;
 }
 ```