setting simple stuff up at the start

packages/desktop/src/components/lines/lineRow.tsx/index.tsx

@@ -1,12 +1,14 @@
 import { FiActivity, FiSun } from "react-icons/fi";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { $selectedLineId } from "../../../controller/recoil";
 import { Avatar } from "antd";
 import LineIcon from "../lineIcon";
 import { LineMemberState } from "@nirvana/core/models/line.model";
 import MasterLineData from "@nirvana/core/models/masterLineData.model";
+import Peer from "simple-peer";
 import moment from "moment";
+import toast from "react-hot-toast";
 import { useGetUserDetails } from "../../../controller/index";
 import { useLineDataProvider } from "../../../controller/lineDataProvider";
 import { useRecoilState } from "recoil";
@@ -111,37 +113,140 @@ export default function LineRow({
   }, [masterLineData, userData]);
 
   return (
-    <div
+    <>
-      onClick={() =>
+      <div
-        handleSelectLine(masterLineData.lineDetails._id.toString())
+        onClick={() =>
-      }
+          handleSelectLine(masterLineData.lineDetails._id.toString())
-      className={`flex flex-row items-center justify-start gap-2 p-2 px-4 h-14 hover:bg-gray-200 cursor-pointer transition-all
+        }
+        className={`flex flex-row items-center justify-start gap-2 p-2 px-4 h-14 hover:bg-gray-200 cursor-pointer transition-all
   last:border-b-0 border-b border-b-gray-200 relative z-50 ${
     selectedLineId === masterLineData.lineDetails._id.toString() &&
     "bg-gray-200 scale-110 shadow-2xl translate-x-3"
   }`}
-    >
+      >
-      {/* status dot */}
+        {/* status dot */}
-      {renderActivityIcon}
+        {renderActivityIcon}
 
-      <span className="flex flex-row gap-2 items-center justify-start text-slate-800">
+        <span className="flex flex-row gap-2 items-center justify-start text-slate-800">
-        {profilePictures && (
+          {profilePictures && (
-          <LineIcon grayscale={!isUserTunedIn} sourceImages={profilePictures} />
+            <LineIcon
-        )}
+              grayscale={!isUserTunedIn}
+              sourceImages={profilePictures}
+            />
+          )}
 
-        <h2
+          <h2
-          className={`text-inherit text-md truncate ${
+            className={`text-inherit text-md truncate ${
-            masterLineData.currentUserMember.lastVisitDate
+              masterLineData.currentUserMember.lastVisitDate
-              ? "font-semibold"
+                ? "font-semibold"
-              : ""
+                : ""
-          }`}
+            }`}
-        >
+          >
-          {masterLineData.lineDetails.name ||
+            {masterLineData.lineDetails.name ||
-            masterLineData.otherUserObjects[0].givenName}
+              masterLineData.otherUserObjects[0].givenName}
-        </h2>
+          </h2>
-      </span>
+        </span>
 
-      <div className="ml-auto">{renderRightActivity}</div>
+        <div className="ml-auto">{renderRightActivity}</div>
-    </div>
+      </div>
+
+      {/* mounts and unmounts based on if in the room or now */}
+      {isUserTunedIn && (
+        <StreamRoom
+          currentBroadcasters={masterLineData.currentBroadcastersUserIds}
+          initialTunedInUserIds={masterLineData.tunedInMemberIds}
+        />
+      )}
+    </>
+  );
+}
+
+function StreamRoom({
+  initialTunedInUserIds,
+  currentBroadcasters,
+}: {
+  initialTunedInUserIds?: string[];
+  currentBroadcasters?: string[];
+}) {
+  // ?could move this up the tree and pass it down? or set it in the header?
+  // local stream specifically for this stream room
+  const [localStream, setLocalStream] = useState<MediaStream>();
+  const userStreamTagRef = useRef<HTMLVideoElement>(null);
+
+  // local peer map of userIds to peers
+  const [userPeers, setUserPeers] = useState<{ [userId: string]: Peer }>({});
+
+  useEffect(() => {
+    navigator.mediaDevices
+      .getUserMedia({ video: false, audio: true })
+      .then((userStream) => {
+        setLocalStream(userStream);
+
+        if (userStreamTagRef?.current)
+          userStreamTagRef.current.srcObject = userStream;
+
+        // const audio = new Audio();
+        // audio.autoplay = true;
+        // audio.srcObject = userStream;
+      })
+      .catch((error) => {
+        console.error(error);
+
+        toast.error(
+          "Make sure that you have permissions enabled and microphone connected"
+        );
+      });
+  }, []);
+
+  // we only loop through peers that are associated to user Ids which exist in the currentBroadcasters array
+  return (
+    <>
+      <audio autoPlay ref={userStreamTagRef} muted />
+      this is the video of people
+      {Object.entries(userPeers).map(([userId, peer]) => (
+        <PeerStreamRenderer
+          key={userId}
+          isBroadcasting={currentBroadcasters?.includes(userId)}
+          peer={peer}
+        />
+      ))}
+    </>
+  );
+}
+
+/**
+ * take in the specified peer and whether or not he is broadcasting
+ */
+function PeerStreamRenderer({
+  peer,
+  isBroadcasting,
+}: {
+  peer: Peer;
+  isBroadcasting: boolean;
+}) {
+  const streamRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    peer.on("stream", (remotePeerStream: MediaStream) => {
+      console.log(
+        "stream coming in from remote peer...BUT, only going to show once they broadcast"
+      );
+
+      if (streamRef?.current) streamRef.current.srcObject = remotePeerStream;
+    });
+  }, [streamRef]);
+
+  // when someone is broadcasting, we enable their stream
+
+  return (
+    <>
+      <video
+        muted={!isBroadcasting}
+        autoPlay
+        ref={streamRef}
+        height={"400"}
+        width={"500"}
+      />
+    </>
   );
 }