From 256675b2dee02f7b156f836a4582e0d254dc7ae1 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Mon, 16 May 2022 15:52:03 -0500
Subject: [PATCH] fixing sizing and stuff from messenger inspiration

---
 packages/desktop/src/components/lineIcon.tsx  |  4 +-
 .../desktop/src/providers/StreamProvider.tsx  | 69 +++++++++++++++++--
 .../protected/terminal/panels/MainPanel.tsx   |  2 +-
 .../protected/terminal/panels/SidePanel.tsx   | 33 ++++-----
 4 files changed, 79 insertions(+), 29 deletions(-)

diff --git a/packages/desktop/src/components/lineIcon.tsx b/packages/desktop/src/components/lineIcon.tsx
index 3514f4f..77edbc3 100644
--- a/packages/desktop/src/components/lineIcon.tsx
+++ b/packages/desktop/src/components/lineIcon.tsx
@@ -18,7 +18,7 @@ function LineIcon({
   return (
     <>
       {isMultiple ? (
-        <div className={`relative ${grayscale ? 'grayscale' : ''} h-[32px] w-[32px]`}>
+        <div className={`relative ${grayscale ? 'grayscale' : ''} h-[40px] w-[40px]`}>
           {sourceImages.map((avatarSrc, index) => {
             if (index === 0) {
               return (
@@ -52,7 +52,7 @@ function LineIcon({
             key={`lineIcon-${avatarSrc}-${index}`}
             src={avatarSrc}
             shape="square"
-            size={'default'}
+            size={'large'}
             className={`${grayscale && 'grayscale'} shadow-lg`}
           />
         ))
diff --git a/packages/desktop/src/providers/StreamProvider.tsx b/packages/desktop/src/providers/StreamProvider.tsx
index 19c1aac..780d7d0 100644
--- a/packages/desktop/src/providers/StreamProvider.tsx
+++ b/packages/desktop/src/providers/StreamProvider.tsx
@@ -109,7 +109,26 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
 
       Object.entries(peerMap).map(([userId, peer]) => {
         if (incomingSignals[userId]) {
-          peer.signal(incomingSignals[userId]);
+          // ! hack: if they are alphabetically higher, then they are initiator
+          if (userId > user._id.toString()) {
+            console.log('creating a local peer as the receiver and replacing mine');
+
+            peer.destroy();
+
+            const peerForMeAndNewbie = new Peer({
+              initiator: false,
+              trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times
+            });
+
+            peerForMeAndNewbie.signal(incomingSignals[userId]);
+
+            updatePeerMap((draft) => {
+              draft[userId] = peerForMeAndNewbie;
+            });
+          } else {
+            console.log('I won, just adding the signal to my local peer with that person');
+            peer.signal(incomingSignals[userId]);
+          }
 
           updateIncomingSignals((draft) => {
             delete draft[userId];
@@ -117,7 +136,7 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
         }
       });
     }
-  }, [peerMap, incomingSignals, updateIncomingSignals]);
+  }, [peerMap, incomingSignals, updateIncomingSignals, user, updatePeerMap]);
 
   useEffect(() => {
     $ws.on(ServerResponseChannels.RTC_RECEIVING_SIGNAL, (res: RtcReceiveSignalResponse) => {
@@ -146,10 +165,15 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
 
   return (
     <StreamProviderContext.Provider value={{ peerMap }}>
-      <div className="flex flex-row">
-        <video height={400} width={400} autoPlay muted ref={localStreamRef} />
+      {/* handles stream connections */}
+      <MemoStreamsConnector handleAddPeer={handleAddPeer} membersToCall={distinctPeerUserIds} />
 
-        <MemoStreamsConnector handleAddPeer={handleAddPeer} membersToCall={distinctPeerUserIds} />
+      <div className="flex flex-row">
+        {/* <video height={400} width={400} autoPlay muted ref={localStreamRef} /> */}
+
+        {Object.values(peerMap).map((peer, index) => (
+          <StreamPlayer key={`streamPlayer-${index}`} peer={peer} />
+        ))}
       </div>
 
       {children}
@@ -161,6 +185,35 @@ export default function useStreams() {
   return useContext(StreamProviderContext);
 }
 
+function StreamPlayer({ peer }: { peer: Peer }) {
+  const streamRef = useRef<HTMLVideoElement>(null);
+
+  console.log('re-rendering the stream player since peer likely changed', peer);
+
+  useEffect(() => {
+    peer.on('stream', (remotePeerStream: MediaStream) => {
+      console.log('stream coming in from remote peer');
+
+      console.log(remotePeerStream);
+
+      const audio = new Audio();
+      audio.autoplay = true;
+      audio.srcObject = remotePeerStream;
+
+      // if (streamRef?.current) streamRef.current.srcObject = remotePeerStream;
+    });
+
+    () => peer.destroy();
+  }, [peer]);
+
+  return (
+    <>
+      this is a stream component of one remote peer
+      {/* <video ref={streamRef} height={400} width={400} autoPlay muted /> */}
+    </>
+  );
+}
+
 const MemoStreamsConnector = React.memo(StreamsConnector);
 
 function StreamsConnector({
@@ -195,8 +248,12 @@ function StreamConnector({
   useEffect(() => {
     console.log('calling all of the initials until this component unmounts');
 
+    setInterval(() => {
+      console.log('still have this mediadevice in memory!');
+    });
+
     navigator.mediaDevices
-      .getUserMedia({ video: true, audio: true })
+      .getUserMedia({ video: false, audio: true })
       .then((localMediaStream: MediaStream) => {
         const localPeerConnection = new Peer({
           initiator: true,
diff --git a/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx
index 96868fe..bfe8a1f 100644
--- a/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx
+++ b/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx
@@ -280,7 +280,7 @@ function LineDetails() {
         </div>
 
         {/* change to show only the broadcasters */}
-        <LineStreams broadcasters={selectedLine.tunedInMemberIds} />
+        {/* <LineStreams broadcasters={selectedLine.tunedInMemberIds} /> */}
       </div>
 
       <button
diff --git a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx
index 0968f71..dcf2537 100644
--- a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx
+++ b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx
@@ -117,23 +117,6 @@ function LineRowTest({
     [line.tunedInMemberIds, user],
   );
 
-  /**
-   * TODO: slowly add to this and fix based on added features
-   * */
-  const renderActivityIcon = useMemo(() => {
-    // if there is someone or me broadcasting here
-    if (line.currentBroadcastersUserIds?.length > 0)
-      return <FiSun className="text-teal-500 animate-pulse" />;
-
-    if (isUserTunedIn) return <FiActivity className="text-black animate-pulse" />;
-
-    // if there is new activity blocks for me
-    if (line.currentUserMember.lastVisitDate)
-      return <span className="h-2 w-2 rounded-full bg-slate-800 animate-pulse"></span>;
-
-    return <span className="h-2 w-2 rounded-full bg-white animate-pulse"></span>;
-  }, [line, isUserTunedIn]);
-
   const renderRightActivity = useMemo(() => {
     // TODO: get the profile pictures of the broadcasters
     if (line.currentBroadcastersUserIds?.length > 0)
@@ -162,6 +145,18 @@ function LineRowTest({
         </Avatar.Group>
       );
 
+    // if there is someone or me broadcasting here
+    if (line.currentBroadcastersUserIds?.length > 0)
+      return <FiSun className="text-teal-500 animate-pulse" />;
+
+    if (isUserTunedIn) return <FiActivity className="text-black animate-pulse" />;
+
+    // if there is new activity blocks for me
+    if (line.currentUserMember.lastVisitDate)
+      return <span className="h-2 w-2 rounded-full bg-slate-800 animate-pulse"></span>;
+
+    return <span className="h-2 w-2 rounded-full bg-white animate-pulse"></span>;
+
     // if there is new activity/black dot, then show relative time as little bolder? or too much?
 
     // TODO: compare last visit date to latest audio block
@@ -196,14 +191,12 @@ function LineRowTest({
     <div
       onClick={() => handleSelectLine(line.lineDetails._id.toString())}
       role={'presentation'}
-      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 px-4 py-6 hover:bg-gray-200 cursor-pointer transition-all
 last:border-b-0 border-b border-b-gray-200 relative z-50 rounded ${
         isSelected && 'bg-gray-200 scale-110 shadow-2xl translate-x-3'
       }`}
     >
       {/* status dot */}
-      <div className="flex-shrink-0 h-4 w-4">{renderActivityIcon}</div>
-
       {profilePictures && <LineIcon grayscale={!isUserTunedIn} sourceImages={profilePictures} />}
 
       <h2