Skip to content

Commit 54a8df7

Browse files
carlossantos74carlossantos74
committed
fix: subscribe to room callbacks in the room hook instead of room context
1 parent 8320f1b commit 54a8df7

2 files changed

Lines changed: 108 additions & 137 deletions

File tree

‎apps/playground/src/pages/superviz-react-room.tsx‎

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,52 @@ import { VideoConference } from '@superviz/sdk';
44
import { getConfig } from '../config';
55

66
import { v4 as generateId } from "uuid";
7-
import { useEffect } from 'react';
7+
import { useEffect, useState } from 'react';
88
const SUPERVIZ_KEY = getConfig<string>("keys.superviz");
99
const SUPERVIZ_ROOM_PREFIX = getConfig<string>("roomPrefix");
1010
const componentName = "new-room-react";
1111
const uuid = generateId();
1212

1313
export const Children = () => {
14+
const [joined, setJoined] = useState(false);
1415
const { room, joinRoom, leaveRoom, addComponent } = useRoom({
15-
onMyParticipantJoined: (participant) => console.log('Component: My participant joined', participant),
16-
onMyParticipantLeft: (participant) => console.log('Component: My participant left', participant),
17-
onMyParticipantUpdated: (participant) => console.log('Component: My participant updated', participant),
18-
onParticipantJoined: (participant) => console.log('Component: Participant joined', participant),
19-
onParticipantLeft: (participant) => console.log('Component: Participant left', participant),
20-
onParticipantUpdated: (participant) => console.log('Component: Participant updated', participant),
21-
onRoomUpdated: (data) => console.log('Component: Room updated', data),
22-
onError: (error) => console.error('Component: Room error', error),
16+
onMyParticipantJoined: (participant) => {
17+
setJoined(true);
18+
console.log('Component: My participant joined', participant)
19+
},
20+
onMyParticipantLeft: (participant) => {
21+
setJoined(false);
22+
console.log('Component: My participant left', participant)
23+
},
24+
onMyParticipantUpdated: (participant) => {
25+
console.log('Component: My participant updated', participant)
26+
},
27+
onParticipantJoined: (participant) => {
28+
console.log('Component: Participant joined', participant)
29+
},
30+
onParticipantLeft: (participant) => {
31+
console.log('Component: Participant left', participant)
32+
},
33+
onParticipantUpdated: (participant) => {
34+
console.log('Component: Participant updated', participant)
35+
},
36+
onRoomUpdated: (data) => {
37+
console.log('Component: Room updated', data)
38+
},
39+
onError: (error) => {
40+
console.error('Component: Room error', error)
41+
},
2342
});
2443

44+
console.log('joined', joined);
45+
2546
const handleJoin = async () => {
2647
await joinRoom({
2748
participant: {
2849
id: uuid,
2950
name: "Participant Name",
3051
email: 'carlos@superviz.com',
31-
avatar: {
52+
avatar: {
3253
model3DUrl: 'https://production.storage.superviz.com/readyplayerme/1.glb',
3354
imageUrl: 'https://production.cdn.superviz.com/static/default-avatars/1.png',
3455
}
@@ -38,19 +59,19 @@ export const Children = () => {
3859
id: SUPERVIZ_ROOM_PREFIX,
3960
},
4061
roomId: `${SUPERVIZ_ROOM_PREFIX}-${componentName}`,
41-
debug: true,
62+
debug: true,
4263
environment: 'dev',
4364
});
4465

45-
const video = new VideoConference({
46-
collaborationMode: { enabled: false },
66+
const video = new VideoConference({
67+
collaborationMode: { enabled: false },
4768
participantType: 'host'
4869
});
4970

5071
addComponent(video);
5172
};
5273

53-
useEffect(() => {
74+
useEffect(() => {
5475
handleJoin();
5576

5677
return () => leaveRoom();

‎packages/react-room/src/contexts/room.tsx‎

Lines changed: 73 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import React, {
99
useMemo,
1010
useRef,
1111
useState,
12+
useEffect,
1213
} from 'react';
1314

1415
type InitializeRoomParams = {
@@ -57,7 +58,6 @@ interface RoomContextInternalProps {
5758
leaveRoom: () => void;
5859
addComponent: (component: unknown) => void;
5960
removeComponent: (component: unknown) => void;
60-
setCallbacks: (callbacks: RoomCallbacks) => void;
6161
getParticipants: () => Promise<Participant[]>;
6262
room: Room | null;
6363
components: Record<string, unknown>;
@@ -70,17 +70,8 @@ const RoomProvider: React.FC<{
7070
developerToken: string
7171
}> = ({ children, developerToken }) => {
7272
const [components, setComponents] = useState<Record<string, unknown>>({});
73-
const callbacks = useRef<Record<keyof RoomCallbacks, Callback[]>>({
74-
onMyParticipantJoined: [],
75-
onMyParticipantLeft: [],
76-
onMyParticipantUpdated: [],
77-
onParticipantJoined: [],
78-
onParticipantLeft: [],
79-
onParticipantUpdated: [],
80-
onError: [],
81-
onRoomUpdated: [],
82-
});
83-
const room = useRef<Room | null>(null);
73+
const roomInstance = useRef<Room | null>(null);
74+
const [room, setRoom] = useState<Room | null>(null);
8475
const initialized = useRef<boolean>(false);
8576

8677
const joinRoom = useCallback(async (options: InitializeRoomParams) => {
@@ -91,48 +82,21 @@ const RoomProvider: React.FC<{
9182

9283
initialized.current = true;
9384

94-
room.current = await createRoom(
85+
roomInstance.current = await createRoom(
9586
Object.assign({}, options, { developerToken })
9687
);
9788

98-
room.current.subscribe('my-participant.joined', onMyParticipantJoined);
99-
room.current.subscribe('my-participant.left', onMyParticipantLeft);
100-
room.current.subscribe('my-participant.updated', onMyParticipantUpdated);
101-
room.current.subscribe('participant.joined', onParticipantJoined);
102-
room.current.subscribe('participant.left', onParticipantLeft);
103-
room.current.subscribe('participant.updated', onParticipantUpdated);
104-
room.current.subscribe('room.error', onError);
105-
room.current.subscribe('room.update', onRoomUpdated);
106-
}, [callbacks, initialized]);
89+
setRoom(roomInstance.current);
90+
}, [developerToken, setRoom, initialized.current, roomInstance.current]);
10791

10892
const leaveRoom = useCallback(() => {
10993
if (!initialized.current) {
11094
console.warn('[SuperViz] Room not initialized, nothing to leave');
11195
return;
11296
}
11397

114-
room.current?.leave();
115-
room.current?.unsubscribe('my-participant.joined', onMyParticipantJoined);
116-
room.current?.unsubscribe('my-participant.left', onMyParticipantLeft);
117-
room.current?.unsubscribe('my-participant.updated', onMyParticipantUpdated);
118-
room.current?.unsubscribe('participant.joined', onParticipantJoined);
119-
room.current?.unsubscribe('participant.left', onParticipantLeft);
120-
room.current?.unsubscribe('participant.updated', onParticipantUpdated);
121-
room.current?.unsubscribe('room.error', onError);
122-
room.current?.unsubscribe('room.update', onRoomUpdated);
123-
callbacks.current = {
124-
onMyParticipantJoined: [],
125-
onMyParticipantLeft: [],
126-
onMyParticipantUpdated: [],
127-
onParticipantJoined: [],
128-
onParticipantLeft: [],
129-
onParticipantUpdated: [],
130-
onError: [],
131-
onRoomUpdated: [],
132-
}
133-
134-
initialized.current = false;
135-
}, []);
98+
roomInstance.current?.leave();
99+
}, [initialized]);
136100

137101
const addComponent = useCallback((component: unknown) => {
138102
if (!initialized.current) {
@@ -145,10 +109,11 @@ const RoomProvider: React.FC<{
145109
return;
146110
}
147111

148-
setComponents(prev => ({ ...prev, [(component as Component)?.name]: component }));
112+
roomInstance.current?.addComponent(component);
149113

150-
room.current?.addComponent(component);
151-
}, []);
114+
console.log(roomInstance.current);
115+
setComponents(prev => ({ ...prev, [(component as Component)?.name]: component }));
116+
}, [room, initialized.current]);
152117

153118
const removeComponent = useCallback((component: unknown) => {
154119
if (!initialized.current) {
@@ -166,97 +131,28 @@ const RoomProvider: React.FC<{
166131
return prev;
167132
});
168133

169-
room.current?.removeComponent(component);
134+
roomInstance.current?.removeComponent(component);
170135
}, []);
171136

172-
const updateCallbacks = (newCallbacks: RoomCallbacks) => {
173-
Object.keys(newCallbacks).forEach((key) => {
174-
const callbackKey = key as keyof RoomCallbacks;
175-
176-
if (callbacks.current[callbackKey]) {
177-
const existingCallbacks = callbacks.current[callbackKey];
178-
179-
const callbackMap: Map<string, Callback> = new Map(
180-
existingCallbacks.map((cb) => [cb.toString(), cb])
181-
);
182-
183-
const newCallback = newCallbacks[callbackKey] as Callback;
184-
185-
if (newCallback && !callbackMap.has(newCallback.toString())) {
186-
callbackMap.set(newCallback.toString(), newCallback);
187-
callbacks.current[callbackKey] = Array.from(callbackMap.values());
188-
}
189-
}
190-
});
191-
192-
};
193-
194-
const onMyParticipantJoined = useCallback((participant: Participant) => {
195-
if (callbacks.current.onMyParticipantJoined) {
196-
callbacks.current.onMyParticipantJoined.forEach(cb => cb(participant));
197-
}
198-
}, [callbacks.current]);
199-
200-
const onMyParticipantLeft = useCallback((participant: Participant) => {
201-
if (callbacks.current.onMyParticipantLeft) {
202-
callbacks.current.onMyParticipantLeft.forEach(cb => cb(participant));
203-
}
204-
}, [callbacks.current]);
205-
206-
const onMyParticipantUpdated = useCallback((participant: Participant) => {
207-
if (callbacks.current.onMyParticipantUpdated) {
208-
callbacks.current.onMyParticipantUpdated.forEach(cb => cb(participant));
209-
}
210-
}, [callbacks.current]);
211-
212-
const onParticipantJoined = useCallback((participant: Participant) => {
213-
if (callbacks.current.onParticipantJoined) {
214-
callbacks.current.onParticipantJoined.forEach(cb => cb(participant));
215-
}
216-
}, [callbacks.current]);
217-
218-
const onParticipantLeft = useCallback((participant: Participant) => {
219-
if (callbacks.current.onParticipantLeft) {
220-
callbacks.current.onParticipantLeft.forEach(cb => cb(participant));
221-
}
222-
}, [callbacks.current]);
223-
224-
const onParticipantUpdated = useCallback((participant: Participant) => {
225-
if (callbacks.current.onParticipantUpdated) {
226-
callbacks.current.onParticipantUpdated.forEach(cb => cb(participant));
227-
}
228-
}, [callbacks.current]);
229-
230-
const onError = useCallback((error: RoomError) => {
231-
if (callbacks.current.onError) {
232-
callbacks.current.onError.forEach(cb => cb(error));
233-
}
234-
}, [callbacks.current]);
235137

236-
const onRoomUpdated = useCallback((data: RoomUpdate) => {
237-
if (callbacks.current.onRoomUpdated) {
238-
callbacks.current.onRoomUpdated.forEach(cb => cb(data));
239-
}
240-
}, [callbacks.current]);
241138

242139
const getParticipants = useCallback(async () => {
243-
if (!room.current) {
140+
if (!roomInstance.current) {
244141
console.warn('[SuperViz] Room not initialized, cannot get participants');
245142
return [];
246143
}
247144

248-
return room.current.getParticipants();
249-
}, [room.current]);
145+
return roomInstance.current?.getParticipants();
146+
}, [roomInstance.current]);
250147

251148
return (
252149
<RoomContext.Provider
253150
value={{
254151
joinRoom,
255152
leaveRoom,
256-
setCallbacks: updateCallbacks,
257153
addComponent,
258154
removeComponent,
259-
room: room.current,
155+
room: room,
260156
components,
261157
getParticipants
262158
}}
@@ -283,10 +179,64 @@ const useRoom = (callbacks?: RoomCallbacks) => {
283179
throw new Error('useRoom must be used within a RoomProvider');
284180
}
285181

286-
if (callbacks && Object.keys(callbacks).length) {
287-
context.setCallbacks(callbacks);
182+
const onMyParticipantJoined = (participant: Participant) => {
183+
callbacks?.onMyParticipantJoined?.(participant);
184+
}
185+
186+
const onMyParticipantLeft = (participant: Participant) => {
187+
callbacks?.onMyParticipantLeft?.(participant);
188+
}
189+
190+
const onMyParticipantUpdated = (participant: Participant) => {
191+
callbacks?.onMyParticipantUpdated?.(participant);
192+
}
193+
194+
const onParticipantJoined = (participant: Participant) => {
195+
callbacks?.onParticipantJoined?.(participant);
196+
}
197+
198+
const onParticipantLeft = (participant: Participant) => {
199+
callbacks?.onParticipantLeft?.(participant);
288200
}
289201

202+
const onParticipantUpdated = (participant: Participant) => {
203+
callbacks?.onParticipantUpdated?.(participant);
204+
}
205+
206+
const onRoomUpdated = (data: RoomUpdate) => {
207+
callbacks?.onRoomUpdated?.(data);
208+
}
209+
210+
const onError = (error: RoomError) => {
211+
callbacks?.onError?.(error);
212+
}
213+
214+
useEffect(() => {
215+
if (context.room) {
216+
context.room?.subscribe('my-participant.joined', onMyParticipantJoined);
217+
context.room?.subscribe('my-participant.left', onMyParticipantLeft);
218+
context.room?.subscribe('my-participant.updated', onMyParticipantUpdated);
219+
context.room?.subscribe('participant.joined', onParticipantJoined);
220+
context.room?.subscribe('participant.left', onParticipantLeft);
221+
context.room?.subscribe('participant.updated', onParticipantUpdated);
222+
context.room?.subscribe('room.error', onError);
223+
context.room?.subscribe('room.update', onRoomUpdated);
224+
}
225+
226+
return () => {
227+
context.room?.unsubscribe('my-participant.joined', onMyParticipantJoined);
228+
context.room?.unsubscribe('my-participant.left', onMyParticipantLeft);
229+
context.room?.unsubscribe('my-participant.updated', onMyParticipantUpdated);
230+
context.room?.unsubscribe('participant.joined', onParticipantJoined);
231+
context.room?.unsubscribe('participant.left', onParticipantLeft);
232+
context.room?.unsubscribe('participant.updated', onParticipantUpdated);
233+
context.room?.unsubscribe('room.error', onError);
234+
context.room?.unsubscribe('room.update', onRoomUpdated);
235+
}
236+
}, [context.room])
237+
238+
239+
290240
return {
291241
joinRoom: context.joinRoom,
292242
leaveRoom: context.leaveRoom,

0 commit comments

Comments
 (0)