Merge pull request #50 from dyte-io/fix/sample-bugs

fix(live-auction): fixed live auction sample bugs

Author: ravindra-dyte

samples/live-auction/src/App.css

@@ -0,0 +1,7 @@
+rtk-ended-screen {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+}

samples/live-auction/src/App.tsx

@@ -1,14 +1,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useRef, useState } from 'react';
-import { RealtimeKitProvider, useRealtimeKitClient } from '@cloudflare/realtimekit-react';
-import { provideRtkDesignSystem } from '@cloudflare/realtimekit-react-ui';
+import { RealtimeKitProvider, useRealtimeKitClient, useRealtimeKitSelector } from '@cloudflare/realtimekit-react';
+import { provideRtkDesignSystem, RtkEndedScreen, RtkLeaveMeeting, RtkUiProvider } from '@cloudflare/realtimekit-react-ui';
 import { LoadingScreen } from './pages';
 import { Meeting, SetupScreen } from './pages';
+import './App.css';
 
 function App() {
   const meetingEl = useRef<HTMLDivElement>(null);
   const [meeting, initMeeting] = useRealtimeKitClient();
   const [roomJoined, setRoomJoined] = useState<boolean>(false);
+  const [roomLeft, setRoomLeft] = useState<boolean>(false);
 
   useEffect(() => {
     const searchParams = new URL(window.location.href).searchParams;
@@ -59,7 +61,7 @@ function App() {
       setRoomJoined(true);
     };
     const roomLeftListener = () => {
-      setRoomJoined(false);
+      setRoomLeft(true);
     };
     meeting.self.on('roomJoined', roomJoinedListener);
     meeting.self.on('roomLeft', roomLeftListener);
@@ -74,9 +76,11 @@ function App() {
   return (
     <div ref={meetingEl} >
       <RealtimeKitProvider value={meeting} fallback={<LoadingScreen />}>
-        {
-          !roomJoined ? <SetupScreen /> : <Meeting />
-        }
+        <RtkUiProvider meeting={meeting} showSetupScreen>
+          {
+            !roomJoined ? <SetupScreen /> : !roomLeft ? <Meeting /> : <RtkEndedScreen />
+          }
+        </RtkUiProvider>
       </RealtimeKitProvider>
     </div>
   );

samples/live-auction/src/pages/meeting/Meeting.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useState } from 'react'
-import './meeting.css'
 import {
   RtkCameraToggle,
   RtkChatToggle,
+  RtkDialogManager,
   RtkGrid,
   RtkHeader,
   RtkLeaveButton,
@@ -17,6 +17,7 @@ import {
 import { useRealtimeKitMeeting } from '@cloudflare/realtimekit-react';
 import { AuctionControlBar, Icon } from '../../components';
 import { bidItems } from '../../constants';
+import './meeting.css'
 
 interface Bid {
   bid: number;
@@ -133,7 +134,19 @@ const Meeting = () => {
     <div className='meeting-container'>
       <RtkParticipantsAudio meeting={meeting} />
       <RtkNotifications meeting={meeting} />
-      <RtkHeader meeting={meeting} size='lg'>
+      <RtkDialogManager meeting={meeting}/>
+      <RtkHeader
+        meeting={meeting}
+        size='lg'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          alignSelf: 'center',
+          justifyContent: 'space-between',
+          gap: 'var(--rtk-space-2, 8px)',
+          '--header-section-gap': 'var(--rtk-space-2, 8px)',
+        }}
+      >
         <div className="meeting-header">
           {
             auctionStarted && (