docs: rewrite video-calling tutorial

sample-apps/react/stream-video-react-tutorial/src/App.tsx

@@ -1,72 +1,73 @@
 import { useEffect, useState } from 'react';
 import {
   Call,
+  CallControls,
+  CallingState,
+  SpeakerLayout,
   StreamCall,
   StreamTheme,
   StreamVideo,
   StreamVideoClient,
-  PaginatedGridLayout,
-  CallControls,
-  CallingState,
+  useCallCallingState,
+  User,
 } from '@stream-io/video-react-sdk';
 
+import '@stream-io/video-react-sdk/dist/css/styles.css';
 import './style.css';
 
-export default function App() {
-  const [client, setClient] = useState<StreamVideoClient | undefined>();
-  const [call, setCall] = useState<Call | undefined>();
-
-  useEffect(() => {
-    const user = {
-      id: import.meta.env.VITE_STREAM_USER_ID,
-    };
-    const token = import.meta.env.VITE_STREAM_USER_TOKEN;
+const apiKey = 'REPLACE_WITH_API_KEY'; // the API key can be found in the "Credentials" section
+const token = 'REPLACE_WITH_TOKEN'; // the token can be found in the "Credentials" section
+const userId = 'REPLACE_WITH_USER_ID'; // the user id can be found in the "Credentials" section
+const callId = 'REPLACE_WITH_CALL_ID'; // the call id can be found in the "Credentials" section
 
-    const client = new StreamVideoClient({
-      apiKey: import.meta.env.VITE_STREAM_API_KEY,
-      user,
-      token,
-    });
-    setClient(client);
+const user: User = {
+  id: userId,
+  name: 'Oliver',
+  image: 'https://getstream.io/random_svg/?id=oliver&name=Oliver',
+};
 
-    return () => {
-      client?.disconnectUser();
-    };
-  }, []);
+// initialize the StreamVideoClient
+const client = new StreamVideoClient({ apiKey, user, token });
 
+export default function App() {
+  const [call, setCall] = useState<Call>();
   useEffect(() => {
-    const call = client?.call('default', import.meta.env.VITE_STREAM_CALL_ID);
-    call?.join({ create: true });
-    setCall(call);
+    const myCall = client.call('default', callId);
+    myCall.join({ create: true }).catch((err) => {
+      console.error(`Failed to join the call`, err);
+    });
+
+    setCall(myCall);
 
     return () => {
-      if (call?.state?.callingState !== CallingState.LEFT) {
-        call?.leave();
-      }
       setCall(undefined);
+      myCall.leave().catch((err) => {
+        console.error(`Failed to leave the call`, err);
+      });
     };
-  }, [client]);
+  }, []);
 
-  if (!client || !call) {
-    return null;
-  }
+  if (!call) return null;
 
   return (
     <StreamVideo client={client}>
       <StreamCall call={call}>
-        <StreamTheme className="video__call">
-          <UI />
-        </StreamTheme>
+        <UILayout />
       </StreamCall>
     </StreamVideo>
   );
 }
 
-export const UI = () => {
+export const UILayout = () => {
+  const callingState = useCallCallingState();
+  if (callingState !== CallingState.JOINED) {
+    return <div>Loading...</div>;
+  }
+
   return (
-    <>
-      <PaginatedGridLayout />
+    <StreamTheme>
+      <SpeakerLayout participantsBarPosition="bottom" />
       <CallControls />
-    </>
+    </StreamTheme>
   );
 };

sample-apps/react/stream-video-react-tutorial/src/style.css

@@ -1,29 +1,18 @@
-@import '@stream-io/video-react-sdk/dist/css/styles.css';
-
-body, html {
+body,
+html {
   height: 100%;
   width: 100%;
   margin: 0;
   font-family: sans-serif;
 }
 
-#root {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 100%;
+.str-video {
+  background-color: #272a30;
+  color: #ffffff;
+  height: 100dvh;
   width: 100%;
-  background-color: black;
-
-}
-
-.video__call {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 15px;
-  height: 100%;
-  width: 100%;
+  min-width: 0;
+  max-width: 100%;
 }
-

sample-apps/react/stream-video-react-tutorial/tsconfig.json

@@ -7,7 +7,7 @@
     "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
     "moduleResolution": "Node",