starting off header with the full window dimensions

2022-04-30 21:14:03 -05:00
parent b9141d643d
commit 66db28cd7c
14 changed files with 262 additions and 25 deletions
@@ -0,0 +1,38 @@
+import { Header, HeaderName } from "carbon-components-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { Avatar } from "antd";
+import Logo from "../Logo";
+import { useGetUserDetails } from "../../controller/index";
+
+export default function NirvanaHeader() {
+  const { data: userDetailsRes, isLoading } = useGetUserDetails();
+
+  const userVideo = useRef<HTMLVideoElement>();
+  const [userVideoStream, setUserVideoStream] =
+    useState<MediaStream>(undefined);
+
+  // todo: show user local video stream
+  useEffect(() => {
+    navigator.mediaDevices
+      .getUserMedia({ video: true, audio: true })
+      .then((stream: MediaStream) => {
+        if (userVideo) userVideo.current.srcObject = stream;
+        setUserVideoStream(stream);
+      });
+  }, []);
+
+  if (isLoading) return <>loading</>;
+
+  const userRepresentation = useMemo(() => {
+    if (userVideoStream) return;
+  }, []);
+
+  return (
+    <div className="flex flex-row items-center h-12 bg-gray-100">
+      <Logo type="small" className="scale-[0.2]" />
+
+      {userDetailsRes?.user?.picture && <></>}
+    </div>
+  );
+}