From 7bb37d0bcd09d6f53e6d9bb8d1fcd6b06b8aed6f Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sun, 19 Jun 2022 12:10:47 -0500
Subject: [PATCH] using mui for video player

---
 packages/desktop/src/tree/MainPanel.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/desktop/src/tree/MainPanel.tsx b/packages/desktop/src/tree/MainPanel.tsx
index b111db5..e917e85 100644
--- a/packages/desktop/src/tree/MainPanel.tsx
+++ b/packages/desktop/src/tree/MainPanel.tsx
@@ -1,6 +1,7 @@
-import { Container, Grid, Typography } from '@mui/material';
+import { CardMedia, Container, Grid, Typography } from '@mui/material';
 import React, { useEffect, useMemo, useRef } from 'react';
 
+import { Box } from '@mui/system';
 import { MasterConversation } from '../util/types';
 // import ConversationDetails from './ConversationDetails';
 import { blueGrey } from '@mui/material/colors';
@@ -70,8 +71,19 @@ function Video({ stream }: { stream: MediaStream }) {
   useEffect(() => {
     if (stream && videoRef.current) {
       videoRef.current.srcObject = stream;
+      videoRef.current.autoplay = true;
+      videoRef.current.muted = true;
     }
   }, [stream]);
 
-  return <video ref={videoRef} muted autoPlay height={'400'} width={'600'} />;
+  return (
+    <Box
+      component={'video'}
+      ref={videoRef}
+      sx={{
+        height: 300,
+        boxShadow: 20,
+      }}
+    />
+  );
 }