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