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

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"