From eeb920be7243c2e86c44fac7ec3307450af1d9c3 Mon Sep 17 00:00:00 2001
From: Tarush <tarush.nagpal7@gmail.com>
Date: Sat, 17 May 2025 16:56:27 +0530
Subject: [PATCH] fix: run transformation of deprecated methods

---
 samples/active-speaker-ui/src/components/Grid.tsx           | 2 +-
 samples/active-speaker-ui/src/components/MainArea.tsx       | 2 +-
 samples/active-speaker-ui/src/lib/useActiveSpeaker.ts       | 2 +-
 samples/async-video-survey/src/App.tsx                      | 2 +-
 samples/audio-room/src/components/AudioRoom.tsx             | 2 +-
 samples/audio-room/src/components/Stage.tsx                 | 2 +-
 samples/chat-widget/src/components/ChatPopup.tsx            | 2 +-
 samples/clubhouse/src/App.tsx                               | 2 +-
 samples/clubhouse/src/components/Meeting.tsx                | 4 ++--
 samples/clubhouse/src/components/Requests.tsx               | 2 +-
 samples/facetime/src/App.tsx                                | 2 +-
 samples/facetime/src/components/Facetime.tsx                | 4 ++--
 samples/live-auction/src/pages/meeting/Meeting.tsx          | 6 +++---
 samples/live-auction/src/pages/setupScreen/SetupScreen.tsx  | 2 +-
 .../src/components/custom-dyte-grid.tsx                     | 2 +-
 .../src/components/in-meeting.tsx                           | 2 +-
 .../src/components/setup-screen.tsx                         | 4 ++--
 samples/simple-group-call/src/components/Meeting.tsx        | 2 +-
 samples/simple-ui/src/App.tsx                               | 4 ++--
 19 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/samples/active-speaker-ui/src/components/Grid.tsx b/samples/active-speaker-ui/src/components/Grid.tsx
index a5a5ea9..599c862 100644
--- a/samples/active-speaker-ui/src/components/Grid.tsx
+++ b/samples/active-speaker-ui/src/components/Grid.tsx
@@ -14,7 +14,7 @@ export default function Grid() {
   const isPinned = useRealtimeKitSelector((m) => m.self.isPinned);
 
   const activeParticipants = useRealtimeKitSelector((m) =>
-    m.participants.active.toArray()
+    m.participants.videoSubscribed.toArray()
   );
 
   const participants =
diff --git a/samples/active-speaker-ui/src/components/MainArea.tsx b/samples/active-speaker-ui/src/components/MainArea.tsx
index 3e89bd9..a8a4eed 100644
--- a/samples/active-speaker-ui/src/components/MainArea.tsx
+++ b/samples/active-speaker-ui/src/components/MainArea.tsx
@@ -266,7 +266,7 @@ export default function MainArea() {
   const stageStatus = useRealtimeKitSelector((m) => m.stage.status);
 
   const activeParticipants = useRealtimeKitSelector((m) =>
-    m.participants.active.toArray()
+    m.participants.videoSubscribed.toArray()
   );
 
   const participants =
diff --git a/samples/active-speaker-ui/src/lib/useActiveSpeaker.ts b/samples/active-speaker-ui/src/lib/useActiveSpeaker.ts
index fb44daa..776b5d4 100644
--- a/samples/active-speaker-ui/src/lib/useActiveSpeaker.ts
+++ b/samples/active-speaker-ui/src/lib/useActiveSpeaker.ts
@@ -13,7 +13,7 @@ export function useActiveSpeaker() {
   );
 
   const activeParticipants = useRealtimeKitSelector((m) =>
-    m.participants.active.toArray()
+    m.participants.videoSubscribed.toArray()
   );
 
   if (isPinned) {
diff --git a/samples/async-video-survey/src/App.tsx b/samples/async-video-survey/src/App.tsx
index c305dfb..22d2b95 100644
--- a/samples/async-video-survey/src/App.tsx
+++ b/samples/async-video-survey/src/App.tsx
@@ -302,7 +302,7 @@ export default function App() {
     }).then((meeting) => {
       Object.assign(window, { meeting });
       // automatically join room
-      meeting?.joinRoom();
+      meeting?.join();
     });
   }, []);
 
diff --git a/samples/audio-room/src/components/AudioRoom.tsx b/samples/audio-room/src/components/AudioRoom.tsx
index b079187..162879b 100644
--- a/samples/audio-room/src/components/AudioRoom.tsx
+++ b/samples/audio-room/src/components/AudioRoom.tsx
@@ -29,7 +29,7 @@ export default function AudioRoom() {
         <p>By default you will join with your mic disabled.</p>
         <RtkButton
           size="lg"
-          onClick={() => meeting.joinRoom()}
+          onClick={() => meeting.join()}
           kind="wide"
           className="max-w-sm"
         >
diff --git a/samples/audio-room/src/components/Stage.tsx b/samples/audio-room/src/components/Stage.tsx
index f76ecde..4284e80 100644
--- a/samples/audio-room/src/components/Stage.tsx
+++ b/samples/audio-room/src/components/Stage.tsx
@@ -5,7 +5,7 @@ import clsx from 'clsx';
 export default function Stage() {
   const { meeting } = useRealtimeKitMeeting();
   const activeParticipants = useRealtimeKitSelector((meeting) =>
-    meeting.participants.active.toArray()
+    meeting.participants.videoSubscribed.toArray()
   );
 
   const joinedParticipants = useRealtimeKitSelector((meeting) =>
diff --git a/samples/chat-widget/src/components/ChatPopup.tsx b/samples/chat-widget/src/components/ChatPopup.tsx
index 4b49728..d602ecb 100644
--- a/samples/chat-widget/src/components/ChatPopup.tsx
+++ b/samples/chat-widget/src/components/ChatPopup.tsx
@@ -13,7 +13,7 @@ const ChatPopup = ({ meeting }: { meeting: RtkMeeting }) => {
 		if (channel) return;
 		const createChannel = async () => {
 			if (!meeting.self.roomJoined) {
-				await meeting.joinRoom();
+				await meeting.join();
 			}
 			const memberIds = meeting.participants.all.toArray().map((p) => p.userId);
 			const createdChannel = await meeting.chat.createChannel(meeting.meta.meetingTitle, memberIds);
diff --git a/samples/clubhouse/src/App.tsx b/samples/clubhouse/src/App.tsx
index 0d53237..7b76620 100644
--- a/samples/clubhouse/src/App.tsx
+++ b/samples/clubhouse/src/App.tsx
@@ -32,7 +32,7 @@ function App() {
       Object.assign(window, { meeting: m });
 
       if (!window.location.search.includes('showSetupScreen')) {
-        m?.joinRoom();
+        m?.join();
       }
     });
   }, []);
diff --git a/samples/clubhouse/src/components/Meeting.tsx b/samples/clubhouse/src/components/Meeting.tsx
index 22b2012..f7a03aa 100644
--- a/samples/clubhouse/src/components/Meeting.tsx
+++ b/samples/clubhouse/src/components/Meeting.tsx
@@ -81,7 +81,7 @@ export default function Meeting() {
           <div className="flex items-center gap-2">
             <button
               className="icon-btn text-red-500"
-              onClick={() => meeting.leaveRoom()}
+              onClick={() => meeting.leave()}
             >
               <XSquare />
               Leave
@@ -89,7 +89,7 @@ export default function Meeting() {
           </div>
 
           <div className="flex items-center gap-2">
-            {meeting.self.permissions.acceptPresentRequests && (
+            {meeting.self.permissions.acceptStageRequests && (
               <button
                 className="icon-btn"
                 onClick={() => setShowRequests((r) => !r)}
diff --git a/samples/clubhouse/src/components/Requests.tsx b/samples/clubhouse/src/components/Requests.tsx
index bb0065f..8cd10bd 100644
--- a/samples/clubhouse/src/components/Requests.tsx
+++ b/samples/clubhouse/src/components/Requests.tsx
@@ -10,7 +10,7 @@ export default function Requests() {
     (p) => p.stageStatus === 'REQUESTED_TO_JOIN_STAGE'
   );
 
-  if (!meeting.self.permissions.acceptPresentRequests) {
+  if (!meeting.self.permissions.acceptStageRequests) {
     return null;
   }
 
diff --git a/samples/facetime/src/App.tsx b/samples/facetime/src/App.tsx
index baef273..a85e8b5 100644
--- a/samples/facetime/src/App.tsx
+++ b/samples/facetime/src/App.tsx
@@ -23,7 +23,7 @@ function App() {
         video: false,
         audio: false,
       },
-    }).then((m) => m?.joinRoom());
+    }).then((m) => m?.join());
   }, []);
 
   Object.assign(window, { meeting });
diff --git a/samples/facetime/src/components/Facetime.tsx b/samples/facetime/src/components/Facetime.tsx
index 6d96b7e..cfbf4ef 100644
--- a/samples/facetime/src/components/Facetime.tsx
+++ b/samples/facetime/src/components/Facetime.tsx
@@ -15,7 +15,7 @@ import { Mic, Video, X } from 'react-feather';
 
 function Grid() {
   const { meeting } = useRealtimeKitMeeting();
-  const participants = useRealtimeKitSelector((m) => m.participants.active);
+  const participants = useRealtimeKitSelector((m) => m.participants.videoSubscribed);
 
   return (
     <div className="relative flex place-items-center justify-center flex-1 overflow-hidden -m-4">
@@ -61,7 +61,7 @@ function Controlbar() {
   };
 
   const leaveMeeting = () => {
-    meeting.leaveRoom();
+    meeting.leave();
   };
 
   return (
diff --git a/samples/live-auction/src/pages/meeting/Meeting.tsx b/samples/live-auction/src/pages/meeting/Meeting.tsx
index 505479b..0c7dad8 100644
--- a/samples/live-auction/src/pages/meeting/Meeting.tsx
+++ b/samples/live-auction/src/pages/meeting/Meeting.tsx
@@ -92,12 +92,12 @@ const Meeting = () => {
         }
     }
 
-    document.body.addEventListener('dyteStateUpdate', handleDyteStateUpdate);
+    document.body.addEventListener('rtkStateUpdate', handleDyteStateUpdate);
 
     return () => {
-      document.body.removeEventListener('dyteStateUpdate', handleDyteStateUpdate);
+      document.body.removeEventListener('rtkStateUpdate', handleDyteStateUpdate);
       meeting.participants.removeListener('broadcastedMessage', handleBroadcastedMessage);
-    }
+    };
   }, [meeting])
 
   useEffect(() => {
diff --git a/samples/live-auction/src/pages/setupScreen/SetupScreen.tsx b/samples/live-auction/src/pages/setupScreen/SetupScreen.tsx
index 2e953e7..5b06c9f 100644
--- a/samples/live-auction/src/pages/setupScreen/SetupScreen.tsx
+++ b/samples/live-auction/src/pages/setupScreen/SetupScreen.tsx
@@ -28,7 +28,7 @@ const SetupScreen = () => {
 
   const joinMeeting = () => {
     meeting?.self.setName(name);
-    meeting.joinRoom();
+    meeting.join();
   }
 
   return (
diff --git a/samples/screenshare-focused-ui-with-custom-addons/src/components/custom-dyte-grid.tsx b/samples/screenshare-focused-ui-with-custom-addons/src/components/custom-dyte-grid.tsx
index 3ff85c8..3244f25 100644
--- a/samples/screenshare-focused-ui-with-custom-addons/src/components/custom-dyte-grid.tsx
+++ b/samples/screenshare-focused-ui-with-custom-addons/src/components/custom-dyte-grid.tsx
@@ -27,7 +27,7 @@ function CustomDyteGridScreenshareFocused({
     const [reactions, setReactions] = useState<{[key: string]: string}>({});
 
     const activeParticipants = useRealtimeKitSelector((meeting) =>
-        meeting.participants.active.toArray()
+        meeting.participants.videoSubscribed.toArray()
     );
 
     const pinnedParticipants = useRealtimeKitSelector((meeting) =>
diff --git a/samples/screenshare-focused-ui-with-custom-addons/src/components/in-meeting.tsx b/samples/screenshare-focused-ui-with-custom-addons/src/components/in-meeting.tsx
index 5c32203..0766a94 100644
--- a/samples/screenshare-focused-ui-with-custom-addons/src/components/in-meeting.tsx
+++ b/samples/screenshare-focused-ui-with-custom-addons/src/components/in-meeting.tsx
@@ -23,7 +23,7 @@ function InMeeting({
     <div
       className="flex flex-col w-full h-full"
       ref={(el) => {
-        el?.addEventListener('dyteStateUpdate', (e) => {
+        el?.addEventListener('rtkStateUpdate', (e) => {
           const { detail: newStateUpdate } = e as unknown as { detail: CustomStates };
           console.log('dyteStateUpdateSetup:: ', newStateUpdate);
           setStates((oldState: CustomStates) => { return {
diff --git a/samples/screenshare-focused-ui-with-custom-addons/src/components/setup-screen.tsx b/samples/screenshare-focused-ui-with-custom-addons/src/components/setup-screen.tsx
index 67968e5..e6f23db 100644
--- a/samples/screenshare-focused-ui-with-custom-addons/src/components/setup-screen.tsx
+++ b/samples/screenshare-focused-ui-with-custom-addons/src/components/setup-screen.tsx
@@ -17,7 +17,7 @@ export function SetupScreenPreBuilt({
             backgroundColor: '#272727',
             color: '#ffffff',
         }} ref={(el) => {
-          el?.addEventListener('dyteStateUpdate', (e) => {
+          el?.addEventListener('rtkStateUpdate', (e) => {
             const { detail: newStateUpdate } = e as unknown as { detail: CustomStates };
             console.log('dyteStateUpdateSetup:: ', newStateUpdate);
             setStates((oldState: CustomStates) => { return {
@@ -49,7 +49,7 @@ export function CustomSetupScreenWithPrebuiltMediaPreviewModal({
 
     return (
         <main ref={(el) => {
-            el?.addEventListener('dyteStateUpdate', (e) => {
+            el?.addEventListener('rtkStateUpdate', (e) => {
               const { detail: newStateUpdate } = e as unknown as { detail: CustomStates };
               console.log('dyteStateUpdateSetup:: ', newStateUpdate);
               setStates((oldState: CustomStates) => { return {
diff --git a/samples/simple-group-call/src/components/Meeting.tsx b/samples/simple-group-call/src/components/Meeting.tsx
index e5dda4d..b146362 100644
--- a/samples/simple-group-call/src/components/Meeting.tsx
+++ b/samples/simple-group-call/src/components/Meeting.tsx
@@ -24,7 +24,7 @@ function UI() {
   const { meeting } = useRealtimeKitMeeting();
   const self = useRealtimeKitSelector((meeting) => meeting.self);
   const activeParticipants = useRealtimeKitSelector((meeting) =>
-    meeting.participants.active.toArray()
+    meeting.participants.videoSubscribed.toArray()
   );
 
   const pinnedParticipants = useRealtimeKitSelector((meeting) =>
diff --git a/samples/simple-ui/src/App.tsx b/samples/simple-ui/src/App.tsx
index 128366e..04e8f8d 100644
--- a/samples/simple-ui/src/App.tsx
+++ b/samples/simple-ui/src/App.tsx
@@ -53,7 +53,7 @@ function Meeting() {
     <div
       className="flex flex-col w-full h-full"
       ref={(el) => {
-        el?.addEventListener('dyteStateUpdate', (e: any) => {
+        el?.addEventListener('rtkStateUpdate', (e: any) => {
           updateStates(e.detail);
         });
       }}
@@ -102,7 +102,7 @@ function App() {
         audio: false,
         video: false,
       },
-    }).then((m) => m?.joinRoom());
+    }).then((m) => m?.join());
   }, []);
 
   // By default this component will cover the entire viewport.