passing down the user local stream to show in the header

packages/desktop/src/providers/StreamProvider.tsx

@@ -38,6 +38,7 @@ type PeerMap = {
 };
 interface IStreamProvider {
   peerMap: PeerMap;
+  userLocalStream?: MediaStream;
 }
 
 const StreamProviderContext = React.createContext<IStreamProvider>({
@@ -54,7 +55,6 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
   const [incomingSignals, updateIncomingSignals] = useImmer<{ [peerUserId: string]: any }>({});
 
   const [userLocalStream, setUserLocalStream] = useState<MediaStream>();
-  const localStreamRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
     navigator.mediaDevices.enumerateDevices().then((devices) => {
@@ -72,31 +72,11 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
     });
 
     navigator.mediaDevices
-      .getUserMedia({ video: false, audio: true })
+      .getUserMedia({ video: true, audio: true })
       .then((localMediaStream: MediaStream) => {
         setUserLocalStream(localMediaStream);
-
-        setTimeout(() => {
-          localMediaStream.getTracks().forEach((track) => {
-            track.stop();
-          });
-        }, 2000);
-
-        if (localStreamRef.current) localStreamRef.current.srcObject = localMediaStream;
       });
-  }, [localStreamRef]);
-
-  const handleStartBroadcast = () => {
-    userLocalStream.getTracks().forEach((track) => {
-      track.enabled = true;
-    });
-  };
-
-  const stopBroadcast = () => {
-    userLocalStream.getTracks().forEach((track) => {
-      track.enabled = false;
-    });
-  };
+  }, []);
 
   useEffect(() => {
     if (userLocalStream) {
@@ -196,17 +176,11 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
   );
 
   return (
-    <StreamProviderContext.Provider value={{ peerMap }}>
+    <StreamProviderContext.Provider value={{ peerMap, userLocalStream }}>
       {/* handles stream connections */}
       <MemoStreamsConnector handleAddPeer={handleAddPeer} membersToCall={distinctPeerUserIds} />
 
       <div className="flex flex-row gap-5">
-        {/* <button onClick={handleStartBroadcast}>start</button>
-
-        <button onClick={stopBroadcast}>stop</button> */}
-
-        {/* <audio autoPlay ref={localStreamRef} /> */}
-
         {Object.values(peerMap).map((peer, index) => (
           <StreamPlayer key={`streamPlayer-${index}`} peer={peer} />
         ))}

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

@@ -1,6 +1,6 @@
 import { LineMemberState } from '@nirvana/core/models/line.model';
 import { Avatar, Dropdown, Skeleton, Tooltip } from 'antd';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { FiActivity, FiPlus, FiSearch } from 'react-icons/fi';
 import useRooms from '../../../../providers/RoomsProvider';
 import NavBar from '../navbar/Navbar';
@@ -10,6 +10,7 @@ import useTerminalProvider from '../../../../providers/TerminalProvider';
 import useAuth from '../../../../providers/AuthProvider';
 import useSockets from '../../../../providers/SocketProvider';
 import useElectron from '../../../../providers/ElectronProvider';
+import useStreams from '../../../../providers/StreamProvider';
 
 export default function SidePanel() {
   // using merely for loading state...better to add to realtimeroom context?
@@ -91,16 +92,7 @@ export default function SidePanel() {
           flow
         </button>
 
-        {user.picture && (
-          <Avatar
-            key={`userHeaderProfilePicture`}
-            className="shadow-md hover:scale-110 transition-all"
-            size={'default'}
-            alt={user.name}
-            src={user.picture}
-            shape="square"
-          />
-        )}
+        <UserProfileAvatar />
       </div>
 
       {/* search + other stuff  */}
@@ -173,3 +165,33 @@ shadow-xl bg-gray-800 p-2 text-white text-xs"
     </div>
   );
 }
+
+// todo if audio only mode, show avatar
+// if problem, show error
+function UserProfileAvatar() {
+  const { user } = useAuth();
+  const { userLocalStream } = useStreams();
+
+  const videoRef = useRef<HTMLVideoElement>();
+
+  useEffect(() => {
+    if (videoRef.current && userLocalStream) videoRef.current.srcObject = userLocalStream;
+  }, [userLocalStream]);
+
+  if (userLocalStream) return <video ref={videoRef} muted height={'60'} width={'60'} autoPlay />;
+
+  return (
+    <>
+      {user.picture && (
+        <Avatar
+          key={`userHeaderProfilePicture`}
+          className="shadow-md hover:scale-110 transition-all"
+          size={'default'}
+          alt={user.name}
+          src={user.picture}
+          shape="square"
+        />
+      )}
+    </>
+  );
+}