From 58bc5c5c3cf5b3483346c57fd66b990a4a8afe7a Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sun, 1 May 2022 09:52:15 -0500
Subject: [PATCH] fixing render error because of hook in wrong order

---
 packages/desktop/src/components/header/index.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/desktop/src/components/header/index.tsx b/packages/desktop/src/components/header/index.tsx
index f2126bb..a0588a3 100644
--- a/packages/desktop/src/components/header/index.tsx
+++ b/packages/desktop/src/components/header/index.tsx
@@ -21,7 +21,6 @@ export default function NirvanaHeader() {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [outputMode, setOutputMode] = useRecoilState($selectedOutputMode);
 
-  const userVideo = useRef<HTMLVideoElement>();
   const [userVideoStream, setUserVideoStream] =
     useState<MediaStream>(undefined);
 
@@ -30,11 +29,17 @@ export default function NirvanaHeader() {
     navigator.mediaDevices
       .getUserMedia({ video: true, audio: true })
       .then((stream: MediaStream) => {
-        if (userVideo?.current) userVideo.current.srcObject = stream;
         setUserVideoStream(stream);
       });
   }, []);
 
+  useEffect(() => {
+    if (userVideoStream && outputMode === "video")
+      document.querySelector("video").srcObject = userVideoStream;
+  }, [userVideoStream, outputMode]);
+
+  const menuOpen = useMemo(() => Boolean(anchorEl), [anchorEl]);
+
   const handleOpenMenu = useCallback((event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   }, []);
@@ -45,8 +50,6 @@ export default function NirvanaHeader() {
 
   if (isLoading) return <>loading</>;
 
-  const menuOpen = useMemo(() => Boolean(anchorEl), [anchorEl]);
-
   return (
     <div className="flex flex-row items-center h-12 bg-gray-100">
       <Logo type="small" className="scale-[0.2]" />
@@ -61,7 +64,6 @@ export default function NirvanaHeader() {
         {outputMode === "video" && (
           <video
             className="ml-2"
-            ref={userVideo}
             height={"50px"}
             width={"50px"}
             muted