Add SimpleVideoGrid for perf testing
This commit is contained in:
		
					parent
					
						
							
								55bc3df2fc
							
						
					
				
			
			
				commit
				
					
						ff4c5bb9fc
					
				
			
		
					 1 changed files with 16 additions and 3 deletions
				
			
		
							
								
								
									
										19
									
								
								src/Room.jsx
									
										
									
									
									
								
							
							
						
						
									
										19
									
								
								src/Room.jsx
									
										
									
									
									
								
							|  | @ -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} /> | ||||||
|       )} |       )} | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue