xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add SimpleVideoGrid for perf testing

Browse source
This commit is contained in:
Robert Long 2021-11-08 10:53:47 -08:00
parent 55bc3df2fc
commit ff4c5bb9fc
1 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/Room.jsx
View file

@ -32,6 +32,7 @@ import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
import VideoGrid, { import VideoGrid, {
useVideoGridLayout, useVideoGridLayout,
} from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid"; } from "matrix-react-sdk/src/components/views/voip/GroupCallView/VideoGrid";
import SimpleVideoGrid from "matrix-react-sdk/src/components/views/voip/GroupCallView/SimpleVideoGrid";
import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss"; import "matrix-react-sdk/res/css/views/voip/GroupCallView/_VideoGrid.scss";
import { useGroupCall } from "matrix-react-sdk/src/hooks/useGroupCall"; import { useGroupCall } from "matrix-react-sdk/src/hooks/useGroupCall";
import { useCallFeed } from "matrix-react-sdk/src/hooks/useCallFeed"; import { useCallFeed } from "matrix-react-sdk/src/hooks/useCallFeed";
@ -66,9 +67,13 @@ function useLoadGroupCall(client, roomId) {
export function Room({ client }) { export function Room({ client }) {
const { roomId: maybeRoomId } = useParams(); const { roomId: maybeRoomId } = useParams();
const { hash } = useLocation(); const { hash, search } = useLocation();
const roomId = maybeRoomId || hash; const roomId = maybeRoomId || hash;
const { loading, error, groupCall } = useLoadGroupCall(client, roomId); const { loading, error, groupCall } = useLoadGroupCall(client, roomId);
const simpleGrid = useMemo(
() => new URLSearchParams(search).has("simple"),
[search]
);
useEffect(() => { useEffect(() => {
window.groupCall = groupCall; window.groupCall = groupCall;
@ -92,12 +97,16 @@ export function Room({ client }) {
return ( return (
<div className={styles.room}> <div className={styles.room}>
<GroupCallView client={client} groupCall={groupCall} /> <GroupCallView
client={client}
groupCall={groupCall}
simpleGrid={simpleGrid}
/>
</div> </div>
); );
} }
export function GroupCallView({ client, groupCall }) { export function GroupCallView({ client, groupCall, simpleGrid }) {
const { const {
state, state,
error, error,
@ -155,6 +164,7 @@ export function GroupCallView({ client, groupCall }) {
isScreensharing={isScreensharing} isScreensharing={isScreensharing}
localScreenshareFeed={localScreenshareFeed} localScreenshareFeed={localScreenshareFeed}
screenshareFeeds={screenshareFeeds} screenshareFeeds={screenshareFeeds}
simpleGrid={simpleGrid}
/> />
); );
} else if (state === GroupCallState.Entering) { } else if (state === GroupCallState.Entering) {
@ -340,6 +350,7 @@ function InRoomView({
toggleScreensharing, toggleScreensharing,
isScreensharing, isScreensharing,
screenshareFeeds, screenshareFeeds,
simpleGrid,
}) { }) {
const [showInspector, setShowInspector] = useState(false); const [showInspector, setShowInspector] = useState(false);
@ -434,6 +445,8 @@ function InRoomView({
<div className={styles.centerMessage}> <div className={styles.centerMessage}>
<p>Waiting for other participants...</p> <p>Waiting for other participants...</p>
</div> </div>
) : simpleGrid ? (
<SimpleVideoGrid items={items} />
) : ( ) : (
<VideoGrid items={items} layout={layout} onFocusTile={onFocusTile} /> <VideoGrid items={items} layout={layout} onFocusTile={onFocusTile} />
)} )}