From aba1ba3d87d373ac2d8d16f995995ce378f2817f Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sun, 19 Jun 2022 10:16:08 -0500
Subject: [PATCH] boilerplate for video to show up

---
 .../src/providers/ConversationProvider.tsx    |  1 +
 packages/desktop/src/tree/MainPanel.tsx       | 42 ++++++++++++++++---
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/packages/desktop/src/providers/ConversationProvider.tsx b/packages/desktop/src/providers/ConversationProvider.tsx
index 62b162f..2c5d903 100644
--- a/packages/desktop/src/providers/ConversationProvider.tsx
+++ b/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) => {
diff --git a/packages/desktop/src/tree/MainPanel.tsx b/packages/desktop/src/tree/MainPanel.tsx
index e44b739..a19cc99 100644
--- a/packages/desktop/src/tree/MainPanel.tsx
+++ b/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'} />;
+}