boilerplate for video to show up

packages/desktop/src/providers/ConversationProvider.tsx

@@ -450,6 +450,7 @@ function Room({
       );
       toast.success('calling bunch of people');
 
+      // TODO : bring this stream object higher and add this later to the room
       navigator.mediaDevices
         .getUserMedia({ video: videoConstraints, audio: true })
         .then((localMediaStream: MediaStream) => {

packages/desktop/src/tree/MainPanel.tsx

@@ -1,12 +1,12 @@
 import { Container, Grid, Typography } from '@mui/material';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 
+import { MasterConversation } from '../util/types';
 // import ConversationDetails from './ConversationDetails';
 import { blueGrey } from '@mui/material/colors';
 import useAuth from '../providers/AuthProvider';
 import useConversations from '../providers/ConversationProvider';
 import { useRendersCount } from 'react-use';
-import useTerminal from './Terminal';
 
 export default function MainPanel() {
   const { user } = useAuth();
@@ -15,14 +15,13 @@ export default function MainPanel() {
 
   // if selected conversation, show details
   // do all fetching necessary to paint things here
-  // join the call so to speak
-
-  // show who is
+  // render room contents if there are people with video or other tracks
 
   const rendersCount = useRendersCount();
   console.warn('RENDER COUNT | MAINPANEL | ', rendersCount);
 
-  // if (selectedConversation) return <ConversationDetails />;
+  if (selectedConversation)
+    return <ConversationDetails masterConversation={selectedConversation} />;
 
   return (
     <Container
@@ -44,3 +43,34 @@ export default function MainPanel() {
     </Container>
   );
 }
+
+function ConversationDetails({ masterConversation }: { masterConversation: MasterConversation }) {
+  console.log('selected room contents', masterConversation.room);
+
+  return (
+    <Container maxWidth={'md'}>
+      <Grid container>
+        {masterConversation.room &&
+          Object.entries(masterConversation.room).map(([userId, userPeerContents]) => {
+            return (
+              <Grid item key={`userPeerRenderConvoDetails-${userId}`}>
+                <Video stream={userPeerContents.stream} />
+              </Grid>
+            );
+          })}
+      </Grid>
+    </Container>
+  );
+}
+
+function Video({ stream }: { stream: MediaStream }) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (stream && videoRef.current) {
+      videoRef.current.srcObject = stream;
+    }
+  }, [stream]);
+
+  return <video ref={videoRef} muted height={'400'} width={'600'} />;
+}