diff --git a/src/Room.jsx b/src/Room.jsx
index 0fea53f..fa5b081 100644
--- a/src/Room.jsx
+++ b/src/Room.jsx
@@ -93,6 +93,10 @@ export function GroupCallView({ groupCall }) {
leave,
toggleLocalVideoMuted,
toggleMicrophoneMuted,
+ toggleScreensharing,
+ isScreensharing,
+ localScreenshareFeed,
+ screenshareFeeds,
} = useGroupCall(groupCall);
if (error) {
@@ -108,6 +112,10 @@ export function GroupCallView({ groupCall }) {
userMediaFeeds={userMediaFeeds}
activeSpeaker={activeSpeaker}
onLeave={leave}
+ toggleScreensharing={toggleScreensharing}
+ isScreensharing={isScreensharing}
+ localScreenshareFeed={localScreenshareFeed}
+ screenshareFeeds={screenshareFeeds}
/>
);
} else if (state === GroupCallState.Entering) {
@@ -235,18 +243,35 @@ function InRoomView({
userMediaFeeds,
activeSpeaker,
onLeave,
+ toggleScreensharing,
+ isScreensharing,
+ screenshareFeeds,
}) {
const [layout, toggleLayout] = useVideoGridLayout();
- const items = useMemo(
- () =>
- userMediaFeeds.map((callFeed) => ({
+ const items = useMemo(() => {
+ const participants = [];
+
+ for (const callFeed of userMediaFeeds) {
+ participants.push({
id: callFeed.userId,
callFeed,
isActiveSpeaker: callFeed.userId === activeSpeaker,
- })),
- [userMediaFeeds, activeSpeaker]
- );
+ });
+ }
+
+ for (const callFeed of screenshareFeeds) {
+ participants.push({
+ id: callFeed.userId + "-screenshare",
+ callFeed,
+ isActiveSpeaker: callFeed.userId === activeSpeaker,
+ });
+ }
+
+ console.log("items changed", participants);
+
+ return participants;
+ }, [userMediaFeeds, activeSpeaker, screenshareFeeds]);
return (
<>
@@ -276,6 +301,7 @@ function InRoomView({
enabled={localVideoMuted}
onClick={toggleLocalVideoMuted}
/>
+
>
diff --git a/vite.config.js b/vite.config.js
index 29d6058..ef94da1 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -30,6 +30,6 @@ export default defineConfig({
alias: {
"$(res)": path.resolve(__dirname, "node_modules/matrix-react-sdk/res"),
},
- dedupe: ["react", "react-dom"],
+ dedupe: ["react", "react-dom", "matrix-js-sdk"],
},
});