working recording and just playing, now have to just upload and add to to database and cs

packages/desktop/src/app.tsx

@@ -16,23 +16,23 @@ connectCore();
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
-  <React.StrictMode>
+  <ThemeProvider theme={NirvanaTheme}>
-    <ThemeProvider theme={NirvanaTheme}>
+    <SnackbarProvider
-      <SnackbarProvider
+      maxSnack={3}
-        maxSnack={3}
+      anchorOrigin={{
-        anchorOrigin={{
+        vertical: 'top',
-          vertical: 'top',
+        horizontal: 'right',
-          horizontal: 'right',
+      }}
-        }}
+    >
-      >
+      <ErrorParent>
-        <ErrorParent>
+        <ElectronProvider>
-          <ElectronProvider>
+          <AuthProvider>
-            <AuthProvider>
+            <TerminalProvider>
-              <TerminalProvider />
+              <></>
-            </AuthProvider>
+            </TerminalProvider>
-          </ElectronProvider>
+          </AuthProvider>
-        </ErrorParent>
+        </ElectronProvider>
-      </SnackbarProvider>
+      </ErrorParent>
-    </ThemeProvider>
+    </SnackbarProvider>
-  </React.StrictMode>,
+  </ThemeProvider>,
 );

packages/desktop/src/components/Terminal.tsx

@@ -62,7 +62,7 @@ import { User } from '@nirvana/core/src/models/user.model';
 import { onSnapshot } from 'firebase/firestore';
 
 import NirvanaAvatar from './NirvanaAvatar';
-import { useDebounce, useKeyPressEvent } from 'react-use';
+import { useDebounce, useEffectOnce, useKeyPressEvent } from 'react-use';
 
 import KeyboardShortcutLabel from './KeyboardShortcutLabel';
 import Channels from '../electron/constants';
@@ -97,6 +97,23 @@ const TerminalContext = React.createContext<ITerminalContext>({
   isUserSpeaking: false,
 });
 
+// global audio data in memory
+let audioChunks: Blob[] = [];
+const handleMediaRecorderData = (e: BlobEvent) => {
+  audioChunks.push(e.data);
+};
+
+const handleOnStopRecording = (e: BlobEvent) => {
+  console.log(audioChunks);
+  const blob = new Blob(audioChunks);
+  const audioUrl = URL.createObjectURL(blob);
+  const player = new Audio(audioUrl);
+  player.autoplay = true;
+};
+const handleOnStartRecording = (e: BlobEvent) => {
+  audioChunks = [];
+};
+
 // TODOS
 // fetch all conversations that I am part of
 
@@ -248,29 +265,73 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
   const [isUserSpeaking, setIsUserSpeaking] = useState<boolean>(false);
 
   const [userAudioStream, setUserAudioStream] = useState<MediaStream>(null);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>(null);
 
   const handleAskForMicrophonePermissions = useCallback(() => {
-    window.electronAPI.send(Channels.ASK_MICROPHONE_PERMISSIONS);
+    // fix this...has to do with mac configuration
-  }, []);
+    // window.electronAPI.send(Channels.ASK_MICROPHONE_PERMISSIONS);
 
-  // when user wants to talk,
+    navigator.mediaDevices
+      .getUserMedia({ audio: true })
+      .then((localUserMedia: MediaStream) => {
+        setUserAudioStream(localUserMedia);
+
+        const userMediaRecoder = new MediaRecorder(localUserMedia);
+        setMediaRecorder(userMediaRecoder);
+        userMediaRecoder.ondataavailable = handleMediaRecorderData;
+        userMediaRecoder.onstop = handleOnStopRecording;
+        userMediaRecoder.onstart = handleOnStartRecording;
+
+        enqueueSnackbar('got mic');
+
+        console.log(localUserMedia);
+      })
+      .catch((error) => {
+        enqueueSnackbar('Check your audio mic permissions in preferences!!', { variant: 'error' });
+        console.error(error);
+      });
+  }, [setUserAudioStream, enqueueSnackbar, setMediaRecorder]);
+
+  // on load, try getting microphone access
+  useEffect(() => {
+    handleAskForMicrophonePermissions();
+  }, [handleAskForMicrophonePermissions]);
+
+  // const handleRecorderStopped = useCallback(async () => {
+  //  await
+
+  // }, [])
+
+  //  when user wants to talk,
   //  unmute them and send clip for everyone to hear in the distance
   const handleBroadcast = useCallback(() => {
     if (!userAudioStream) {
-      enqueueSnackbar('Check your audio mic permissions!', { variant: 'error' });
+      enqueueSnackbar('Check your audio mic permissions in preferences!!', { variant: 'error' });
+
       handleAskForMicrophonePermissions();
       return;
     }
+
+    // prevent while delaying stopping
+    // ? better to just start after 200 ms as put below for the delay of stopping recording?
+    if (mediaRecorder.state === 'recording') return;
+
+    mediaRecorder.start();
+
     setIsUserSpeaking(true);
 
     enqueueSnackbar('started recording');
-  }, [setIsUserSpeaking, userAudioStream, handleAskForMicrophonePermissions]);
+  }, [setIsUserSpeaking, userAudioStream, mediaRecorder, handleAskForMicrophonePermissions]);
 
   const handleStopBroadcast = useCallback(() => {
     if (isUserSpeaking) {
       setIsUserSpeaking(false);
-
       enqueueSnackbar('stopped...', { variant: 'info' });
+
+      // actually stop talking after 2 seconds to capture everything
+      setTimeout(() => {
+        mediaRecorder.stop();
+      }, 200);
     }
   }, [setIsUserSpeaking, isUserSpeaking]);
 

packages/desktop/src/providers/AuthProvider.tsx

@@ -134,9 +134,11 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
       </Container>
     );
 
+  if (!currentUser || !currentNirvanaUser) return <Login />;
+
   return (
     <AuthContext.Provider value={{ user: currentUser, logout, nirvanaUser: currentNirvanaUser }}>
-      {currentUser && currentNirvanaUser ? <>{children}</> : <Login />}
+      {children}
     </AuthContext.Provider>
   );
 };