cleaning up stream provider and starting imnplementation for stream calling and such

packages/desktop/package.json

@@ -42,8 +42,8 @@
         [
           "@electron-forge/plugin-webpack",
           {
-            "port": "4005",
+            "port": "4000",
-            "loggerPort": "9005",
+            "loggerPort": "9000",
             "mainConfig": "./webpack.main.config.js",
             "devContentSecurityPolicy": "connect-src 'self' http://localhost:5000 ws://localhost:5000 https://api.quotable.io/random 'unsafe-eval'",
             "renderer": {

packages/desktop/src/providers/StreamProvider.tsx

@@ -31,7 +31,6 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
   const { $ws } = useSockets();
 
   const [peerMap, updatePeerMap] = useImmer<PeerMap>({});
-  const [incomingSignals, updateIncomingSignals] = useImmer<{ [peerUserId: string]: any }>({});
 
   const [userLocalStream, setUserLocalStream] = useState<MediaStream>();
 
@@ -92,59 +91,6 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
 
   console.log(`peer map: `, peerMap);
 
-  // on changes of the peer map ("we called someone and created local peer connection"), see if we have an incoming signal
-  // and set signal if we have already gotten it and remove from the signals if used
-  useEffect(() => {
-    if (Object.keys(incomingSignals).length > 0) {
-      console.log('going to clear queue of incoming signals');
-
-      Object.entries(peerMap).map(([userId, peer]) => {
-        if (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];
-          });
-        }
-      });
-    }
-  }, [peerMap, incomingSignals, updateIncomingSignals, user, updatePeerMap]);
-
-  useEffect(() => {
-    $ws.on(ServerResponseChannels.RTC_RECEIVING_SIGNAL, (res: RtcReceiveSignalResponse) => {
-      console.log(`getting signal from someone`, res);
-
-      updateIncomingSignals((draft) => {
-        draft[res.senderUserId] = res.simplePeerSignal;
-      });
-    });
-
-    return () => {
-      $ws.removeListener(ServerResponseChannels.RTC_RECEIVING_SIGNAL);
-    };
-  }, [$ws, updateIncomingSignals]);
-
-  console.log(`peer map: `, peerMap);
-
   const handleAddPeer = useCallback(
     (userId: string, peerObj: Peer) => {
       updatePeerMap((draft) => {
@@ -157,13 +103,9 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
   return (
     <StreamProviderContext.Provider value={{ peerMap, userLocalStream }}>
       {/* handles stream connections */}
-      <MemoStreamsConnector handleAddPeer={handleAddPeer} membersToCall={distinctPeerUserIds} />
+      {distinctPeerUserIds?.length > 0 && (
-
+        <MemoStreamsConnector handleAddPeer={handleAddPeer} membersToCall={distinctPeerUserIds} />
-      <div className="flex flex-row gap-5">
+      )}
-        {Object.values(peerMap).map((peer, index) => (
-          <StreamPlayer key={`streamPlayer-${index}`} peer={peer} />
-        ))}
-      </div>
 
       {children}
     </StreamProviderContext.Provider>
@@ -174,35 +116,6 @@ 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({

packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useState, useCallback } from 'react';
+import React, { useMemo, useEffect, useState, useCallback, useRef } from 'react';
 import useAuth from '../../../../providers/AuthProvider';
 import useStreams from '../../../../providers/StreamProvider';
 
@@ -19,6 +19,7 @@ import {
 import { Avatar, Tooltip } from 'antd';
 import { useKeyPressEvent } from 'react-use';
 import useTerminalProvider from '../../../../providers/TerminalProvider';
+import Peer from 'simple-peer';
 
 export default function LineDetails() {
   const { user } = useAuth();
@@ -152,7 +153,11 @@ export default function LineDetails() {
         {/* <LineHistory /> */}
 
         {/* live line */}
-        <div className="flex flex-col"></div>
+        <div className="flex flex-col">
+          {Object.values(peerMap).map((peer, index) => (
+            <StreamPlayer key={`streamPlayer-${index}`} peer={peer} />
+          ))}
+        </div>
 
         {/* canvas action buttons */}
         <div className="flex flex-row gap-3 p-10 justify-end items-center ">
@@ -195,6 +200,28 @@ export default function LineDetails() {
   );
 }
 
+function StreamPlayer({ peer }: { peer: Peer }) {
+  const streamRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    peer.on('stream', (remotePeerStream: MediaStream) => {
+      console.log('stream coming in from remote peer');
+      console.log(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={600} width={600} autoPlay muted />
+    </>
+  );
+}
+
 // function LineHistory() {
 //   return (
 //     <div

packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx

@@ -16,7 +16,7 @@ export default function SidePanel() {
   // using merely for loading state...better to add to realtimeroom context?
   const { rooms: initialRoomsFetch } = useRooms();
 
-  const { user } = useAuth();
+  const { user, handleLogout } = useAuth();
 
   const { roomsMap, handleSelectLine, selectedLineId, handleShowNewChannelForm } =
     useTerminalProvider();
@@ -85,6 +85,13 @@ export default function SidePanel() {
           <span className="text-gray-800 font-semibold mx-auto">Channels</span>
         )}
 
+        <button
+          onClick={handleLogout}
+          className="text-gray-300 text-xs px-3 py-2 transition-all hover:bg-gray-200"
+        >
+          log out
+        </button>
+
         <button
           onClick={handleFlowState}
           className="text-gray-300 text-xs px-3 py-2 transition-all hover:bg-gray-200"