Skip to content
This repository was archived by the owner on Oct 30, 2025. It is now read-only.

Commit 66fabfa

Browse files
tarushnagpaltarushnagpal
authored
Merge pull request #40 from dyte-io/feat/run-code-mod
Code mod to new cloudflare packages + some fixes
2 parents 1162e20 + 8c6ca17 commit 66fabfa

89 files changed

Lines changed: 4557 additions & 9584 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package-lock.json‎

Lines changed: 3406 additions & 2289 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/active-speaker-ui/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"@dytesdk/react-ui-kit": "^2.0.3",
13-
"@dytesdk/react-web-core": "^2.0.7",
12+
"@cloudflare/realtimekit": "^0.2.0",
13+
"@cloudflare/realtimekit-ui": "^0.1.0",
14+
"@cloudflare/realtimekit-react": "^0.2.0",
15+
"@cloudflare/realtimekit-react-ui": "^0.1.0",
1416
"clsx": "^2.1.0",
1517
"react": "^18.2.0",
1618
"react-dom": "^18.2.0",

‎samples/active-speaker-ui/src/App.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import Meeting from './components/Meeting';
2-
import { DyteSpinner } from '@dytesdk/react-ui-kit';
3-
import { DyteProvider, useDyteClient } from '@dytesdk/react-web-core';
2+
import { RtkSpinner } from '@cloudflare/realtimekit-react-ui';
3+
import { RealtimeKitProvider, useRealtimeKitClient } from '@cloudflare/realtimekit-react';
44
import { useEffect } from 'react';
55

66
function App() {
7-
const [meeting, initMeeting] = useDyteClient();
7+
const [meeting, initMeeting] = useRealtimeKitClient();
88

99
useEffect(() => {
1010
const searchParams = new URLSearchParams(window.location.search);
@@ -33,17 +33,17 @@ function App() {
3333
// To avoid that and to make it fill a parent container, pass the prop:
3434
// `mode="fill"` to the component.
3535
return (
36-
<DyteProvider
36+
<RealtimeKitProvider
3737
value={meeting}
3838
fallback={
3939
<div className="size-full flex flex-col gap-3 place-items-center justify-center">
40-
<DyteSpinner className="w-12 h-12 text-blue-600" />
40+
<RtkSpinner className="w-12 h-12 text-blue-600" />
4141
<p className="text-lg">Joining...</p>
4242
</div>
4343
}
4444
>
4545
<Meeting />
46-
</DyteProvider>
46+
</RealtimeKitProvider>
4747
);
4848
}
4949

‎samples/active-speaker-ui/src/components/ActiveSpeaker.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
import { useMeetingStore } from '../lib/meeting-store';
22
import { useActiveSpeaker } from '../lib/useActiveSpeaker';
3-
import { DyteParticipantTile } from '@dytesdk/react-ui-kit';
4-
import { useDyteMeeting } from '@dytesdk/react-web-core';
3+
import { RtkParticipantTile } from '@cloudflare/realtimekit-react-ui';
4+
import { useRealtimeKitMeeting } from '@cloudflare/realtimekit-react';
55
import { HTMLAttributes } from 'react';
66

77
export default function ActiveSpeaker(
8-
props: Omit<HTMLAttributes<HTMLDyteParticipantTileElement>, 'style'> & {
8+
props: Omit<HTMLAttributes<HTMLRtkParticipantTileElement>, 'style'> & {
99
isSmall?: true;
1010
}
1111
) {
1212
const activeSpeaker = useActiveSpeaker();
13-
const { meeting } = useDyteMeeting();
13+
const { meeting } = useRealtimeKitMeeting();
1414
const [size, states] = useMeetingStore((s) => [s.size, s.states]);
1515
const isActiveMode = useMeetingStore((s) => s.isActiveSpeakerMode);
1616

1717
if (!activeSpeaker || !isActiveMode) return null;
1818

1919
return (
20-
<DyteParticipantTile
20+
<RtkParticipantTile
2121
participant={activeSpeaker}
2222
meeting={meeting}
2323
size={props.isSmall ? 'sm' : size}

‎samples/active-speaker-ui/src/components/Controlbar.tsx‎

Lines changed: 34 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
import { useMeetingStore } from '../lib/meeting-store';
22
import {
3-
DyteSettingsToggle,
4-
DyteScreenShareToggle,
5-
DyteStageToggle,
6-
DyteMicToggle,
7-
DyteCameraToggle,
8-
DyteParticipantsToggle,
9-
DytePollsToggle,
10-
DyteChatToggle,
11-
DytePluginsToggle,
12-
DyteControlbarButton,
13-
} from '@dytesdk/react-ui-kit';
14-
import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';
3+
RtkSettingsToggle,
4+
RtkScreenShareToggle,
5+
RtkStageToggle,
6+
RtkMicToggle,
7+
RtkCameraToggle,
8+
RtkParticipantsToggle,
9+
RtkPollsToggle,
10+
RtkChatToggle,
11+
RtkPluginsToggle,
12+
RtkControlbarButton,
13+
} from '@cloudflare/realtimekit-react-ui';
14+
import { useRealtimeKitMeeting, useRealtimeKitSelector } from '@cloudflare/realtimekit-react';
1515
import HOST_PRESET, { iconPack, saveWhiteboard, WHITEBOARD_ID } from '../lib/const';
1616

1717
export default function Controlbar() {
18-
const { meeting } = useDyteMeeting();
18+
const { meeting } = useRealtimeKitMeeting();
1919
const size = useMeetingStore((s) => s.size);
2020
const isMobile = useMeetingStore((s) => s.isMobile);
2121
const states = useMeetingStore((s) => s.states);
2222
const isDarkMode = useMeetingStore((s) => s.darkMode);
2323
const toggleDarkMode = useMeetingStore((s) => s.toggleDarkMode);
2424
const setStates = useMeetingStore((s) => s.setStates);
25-
const whiteboardPlugin = useDyteSelector(m => m.plugins.active.get(WHITEBOARD_ID))
25+
const whiteboardPlugin = useRealtimeKitSelector(m => m.plugins.active.get(WHITEBOARD_ID))
2626

2727
const buttonSize = size === 'lg' ? 'lg' : 'sm';
2828

@@ -38,9 +38,7 @@ export default function Controlbar() {
3838
}
3939

4040
const LeaveButton = () => {
41-
return (
42-
<DyteControlbarButton icon={iconPack.call_end} size={buttonSize} label='Leave' onClick={leaveMeeting}/>
43-
)
41+
return (<RtkControlbarButton icon={iconPack.call_end} size={buttonSize} label='Leave' onClick={leaveMeeting}/>);
4442
}
4543

4644

@@ -50,44 +48,42 @@ export default function Controlbar() {
5048
<div className="flex flex-col lg:flex-row items-center">
5149
{isHost && (
5250
<>
53-
<DyteParticipantsToggle
51+
<RtkParticipantsToggle
5452
meeting={meeting}
5553
size={buttonSize}
5654
states={states}
5755
/>
58-
<DytePluginsToggle
56+
<RtkPluginsToggle
5957
meeting={meeting}
6058
size={buttonSize}
6159
states={states}
6260
/>
6361
</>
6462
)}
65-
<DyteChatToggle meeting={meeting} size={buttonSize} states={states} />
66-
<DytePollsToggle
63+
<RtkChatToggle meeting={meeting} size={buttonSize} states={states} />
64+
<RtkPollsToggle
6765
meeting={meeting}
6866
size={buttonSize}
6967
states={states}
7068
/>
7169
</div>
72-
7370
<div className="flex flex-col lg:flex-row items-center justify-center">
74-
<DyteMicToggle meeting={meeting} size={buttonSize} />
75-
<DyteCameraToggle meeting={meeting} size={buttonSize} />
76-
<DyteScreenShareToggle
71+
<RtkMicToggle meeting={meeting} size={buttonSize} />
72+
<RtkCameraToggle meeting={meeting} size={buttonSize} />
73+
<RtkScreenShareToggle
7774
meeting={meeting}
7875
size={buttonSize}
7976
states={states}
8077
/>
8178
</div>
82-
8379
<div className="flex flex-col lg:flex-row items-center justify-end">
84-
<DyteStageToggle
80+
<RtkStageToggle
8581
meeting={meeting}
8682
size={buttonSize}
8783
iconPack={iconPack}
8884
/>
8985
<LeaveButton/>
90-
<DyteSettingsToggle size={buttonSize} states={states} />
86+
<RtkSettingsToggle size={buttonSize} states={states} />
9187
</div>
9288
</>
9389
);
@@ -96,15 +92,15 @@ export default function Controlbar() {
9692
return (
9793
<>
9894
<div className="flex flex-col lg:flex-row items-center">
99-
<DyteSettingsToggle size={buttonSize} states={states} />
100-
<DyteScreenShareToggle
95+
<RtkSettingsToggle size={buttonSize} states={states} />
96+
<RtkScreenShareToggle
10197
meeting={meeting}
10298
size={buttonSize}
10399
states={states}
104100
/>
105101
{
106102
isHost
107-
&& <DyteControlbarButton
103+
&& <RtkControlbarButton
108104
icon={isDarkMode ? iconPack.dark : iconPack.light}
109105
label= {isDarkMode ? 'Dark' : 'Light'}
110106
onClick={() => {
@@ -113,35 +109,33 @@ export default function Controlbar() {
113109
/>
114110
}
115111
</div>
116-
117112
<div className="flex flex-col lg:flex-row items-center justify-center">
118-
<DyteStageToggle
113+
<RtkStageToggle
119114
meeting={meeting}
120115
size={buttonSize}
121116
iconPack={iconPack}
122117
/>
123-
<DyteMicToggle meeting={meeting} size={buttonSize} />
124-
<DyteCameraToggle meeting={meeting} size={buttonSize} />
118+
<RtkMicToggle meeting={meeting} size={buttonSize} />
119+
<RtkCameraToggle meeting={meeting} size={buttonSize} />
125120
<LeaveButton />
126121
</div>
127-
128122
<div className="flex flex-col lg:flex-row items-center justify-end">
129123
{isHost && (
130124
<>
131-
<DyteParticipantsToggle
125+
<RtkParticipantsToggle
132126
meeting={meeting}
133127
size={buttonSize}
134128
states={states}
135129
/>
136-
<DytePluginsToggle
130+
<RtkPluginsToggle
137131
meeting={meeting}
138132
size={buttonSize}
139133
states={states}
140134
/>
141135
</>
142136
)}
143-
<DyteChatToggle meeting={meeting} size={buttonSize} states={states} />
144-
<DytePollsToggle meeting={meeting} size={buttonSize} states={states} />
137+
<RtkChatToggle meeting={meeting} size={buttonSize} states={states} />
138+
<RtkPollsToggle meeting={meeting} size={buttonSize} states={states} />
145139
</div>
146140
</>
147141
);

‎samples/active-speaker-ui/src/components/Grid.tsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import { useMeetingStore } from '../lib/meeting-store';
22
import {
3-
DyteGrid,
4-
DyteSimpleGrid,
5-
DyteSpotlightGrid,
6-
} from '@dytesdk/react-ui-kit';
7-
import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';
3+
RtkGrid,
4+
RtkSimpleGrid,
5+
RtkSpotlightGrid,
6+
} from '@cloudflare/realtimekit-react-ui';
7+
import { useRealtimeKitMeeting, useRealtimeKitSelector } from '@cloudflare/realtimekit-react';
88

99
export default function Grid() {
10-
const { meeting } = useDyteMeeting();
10+
const { meeting } = useRealtimeKitMeeting();
1111

1212
const size = useMeetingStore((s) => s.size);
13-
const stageStatus = useDyteSelector((m) => m.stage.status);
14-
const isPinned = useDyteSelector((m) => m.self.isPinned);
13+
const stageStatus = useRealtimeKitSelector((m) => m.stage.status);
14+
const isPinned = useRealtimeKitSelector((m) => m.self.isPinned);
1515

16-
const activeParticipants = useDyteSelector((m) =>
16+
const activeParticipants = useRealtimeKitSelector((m) =>
1717
m.participants.active.toArray()
1818
);
1919

@@ -22,14 +22,14 @@ export default function Grid() {
2222
? [...activeParticipants, meeting.self]
2323
: activeParticipants;
2424

25-
const pinned = useDyteSelector((m) => m.participants.pinned.toArray());
25+
const pinned = useRealtimeKitSelector((m) => m.participants.pinned.toArray());
2626

2727
const pinnedParticipants =
2828
isPinned && stageStatus === 'ON_STAGE' ? [...pinned, meeting.self] : pinned;
2929

3030
if (pinnedParticipants.length > 0) {
3131
return (
32-
<DyteSpotlightGrid
32+
<RtkSpotlightGrid
3333
participants={participants}
3434
pinnedParticipants={pinnedParticipants}
3535
meeting={meeting}
@@ -38,7 +38,5 @@ export default function Grid() {
3838
);
3939
}
4040

41-
return (
42-
<DyteSimpleGrid participants={participants} meeting={meeting} size={size} />
43-
);
41+
return (<RtkSimpleGrid participants={participants} meeting={meeting} size={size} />);
4442
}

0 commit comments

Comments
 (0)