FCE-1368/improve and fix snippets (#107)

## Description

Update snippets in react client

Author: czerwiukk

docs/react/connecting.mdx

@@ -46,12 +46,7 @@ export function LeaveRoomButton() {
   // highlight-next-line
   const { leaveRoom } = useConnection();
 
-  const onLeaveRoomPress = useCallback(() => {
-    // highlight-next-line
-    leaveRoom();
-  }, [leaveRoom]);
-
-  return <button onClick={onLeaveRoomPress}>Leave room</button>;
+  return <button onClick={leaveRoom}>Leave room</button>;
 }
 
 ```

docs/react/managing-devices.mdx

@@ -46,7 +46,7 @@ import { useCamera } from "@fishjam-cloud/react-client";
 export function CameraControl() {
   const { toggleCamera } = useCamera();
 
-  return <button onClick={() => toggleCamera()}>Toggle Camera Power</button>;
+  return <button onClick={() => toggleCamera()}>Toggle Camera Device</button>;
 }
 ```
 
@@ -76,7 +76,7 @@ export function MicrophoneControl() {
   return (
     <div>
       <button onClick={() => toggleMicrophone()}>
-        Toggle Microphone Power
+        Toggle Microphone Device
       </button>
       <button onClick={() => toggleMicrophoneMute()}>
         Toggle Microphone Mute

docs/react/start-streaming.mdx

@@ -32,38 +32,37 @@ The code above will make the browser ask the user for camera and microphone perm
 
 To manage users' camera and microphone devices, use the respective [`useCamera`](/api/web/functions/useCamera)
 and [`useMicrophone`](/api/web/functions/useMicrophone) hooks.  
-Both of them has the same API. To keep things simple, let's just use the camera hook.
+Both of them has similar API. To keep things simple, we will just use the camera hook.
 
 ```tsx
 import { useEffect, useRef } from "react";
 import { useCamera } from "@fishjam-cloud/react-client";
 
-export function ExampleComponent() {
+export function ExampleCameraPreview() {
   const videoRef = useRef<HTMLVideoElement>(null);
 
   // highlight-next-line
-  const { isStreaming, activeDevice, initialize, stream, devices } =
+  const { activeCamera, selectCamera, cameraStream, cameraDevices } =
     // highlight-next-line
     useCamera();
 
   useEffect(() => {
     if (!videoRef.current) return;
-    videoRef.current.srcObject = stream ?? null;
-  }, [stream]);
+    videoRef.current.srcObject = cameraStream ?? null;
+  }, [cameraStream]);
 
   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 }) => (
+      <p>Active camera: {activeCamera?.label ?? "None"}</p>
+      <select onChange={(e) => selectCamera(e.target.value)}>
+        {cameraDevices.map(({ label, deviceId }) => (
           <option key={deviceId} value={deviceId}>
             {label}
           </option>
         ))}
       </select>
       // highlight-next-line
-      {stream && <video ref={videoRef} autoPlay />}
+      {cameraStream && <video ref={videoRef} autoPlay />}
     </div>
   );
 }

docs/react/stream-middleware.mdx

@@ -38,12 +38,14 @@ export function CameraWithBlurEffect() {
   const videoRef = useRef<HTMLVideoElement>(null);
 
   // highlight-next-line
-  const { stream, currentMiddleware, setTrackMiddleware } = useCamera();
+  const { cameraStream, currentCameraMiddleware, setCameraTrackMiddleware } =
+    // highlight-next-line
+    useCamera();
 
   useEffect(() => {
     if (!videoRef.current) return;
-    videoRef.current.srcObject = stream ?? null;
-  }, [stream]);
+    videoRef.current.srcObject = cameraStream ?? null;
+  }, [cameraStream]);
 
   // Define blur middleware
   const blurMiddleware: TrackMiddleware = useCallback(
@@ -60,12 +62,12 @@ export function CameraWithBlurEffect() {
   );
 
   // Check if the current middleware is blur
-  const isBlurEnabled = currentMiddleware === blurMiddleware;
+  const isBlurEnabled = currentCameraMiddleware === blurMiddleware;
 
   // Toggle blur effect
   const toggleBlur = () => {
     // highlight-next-line
-    setTrackMiddleware(isBlurEnabled ? null : blurMiddleware);
+    setCameraTrackMiddleware(isBlurEnabled ? null : blurMiddleware);
   };
 
   return (
@@ -74,7 +76,7 @@ export function CameraWithBlurEffect() {
         {isBlurEnabled ? "Disable Blur" : "Enable Blur"}
       </button>
 
-      {stream && <video ref={videoRef} />}
+      {cameraStream && <video ref={videoRef} autoPlay />}
     </>
   );
 }