fix: run transformation of deprecated methods

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 =

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 =

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) {

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();
     });
   }, []);
 

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"
         >

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) =>

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);

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();
       }
     });
   }, []);

samples/clubhouse/src/components/Meeting.tsx

@@ -81,15 +81,15 @@ 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
             </button>
           </div>
 
           <div className="flex items-center gap-2">
-            {meeting.self.permissions.acceptPresentRequests && (
+            {meeting.self.permissions.acceptStageRequests && (
               <button
                 className="icon-btn"
                 onClick={() => setShowRequests((r) => !r)}

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;
   }
 

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 });

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 (

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(() => {

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 (

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) =>

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 {

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 {

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) =>

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.