fix splash screen

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-if="!loading">
+  <div id="app" v-if="ready">
 
     <button class="titlebar">
 
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue';
+import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
 import { useIpc } from "@/modules/ipc";
 import { useAuth } from "@/modules/auth";
 import Splash from "@/components/splash.vue"
@@ -28,9 +28,18 @@ export default defineComponent({
   components: { Splash },
 
   setup() {
-
     const { invoke } = useIpc();
-    const { loading } = useAuth();
+    const ready = ref(false);
+
+    onMounted(() => {
+        window.ipcRenderer.on('window-ready', (_event, payload: {message: boolean}) => {
+            ready.value = payload.message;
+        })
+    });
+
+    onUnmounted(() => {
+        window.ipcRenderer.removeAllListeners('window-ready')
+    })
 
     const callNavbar = (action: string) => {
       invoke('nav-bar', action);
@@ -38,7 +47,7 @@ export default defineComponent({
 
     return {
         callNavbar,
-        loading
+        ready
     }
   }
 })

src/background/audio.ts

@@ -4,16 +4,14 @@
 
 import { sendAudio } from './session'
 import { ipcMain } from "electron";
-import { backgroundMitt } from './emitter';
 const portAudio = require('naudiodon');
 
 let ai: typeof portAudio.AudioIO | null = null;
 let ao: typeof portAudio.AudioIO | null = null;
-const audioInput: Buffer[] = [];
+let record = false;
 const audioContainer = {
     input: '',
 }
-const audio: Buffer | null = null;
 const encoding = "base64";
 const audioOptions = {
     channelCount: 1,
@@ -23,64 +21,49 @@ const audioOptions = {
     closeOnError: false,
 }
 
-backgroundMitt.once('window-active', (active: boolean) => {
-    if(!active) {
-        stopStream();
-    }
-});
-
-// main audio function run by run.ts module.
-export function initAudioIO(): void {
-
-    if (ai != null) {
-        ai.quit();
-    }
-
-    ai = new portAudio.AudioIO({ inOptions: audioOptions });
-
-    // base64 encoding needed for google speech to text.
-    ai.setEncoding(encoding);
-
-    // pause the portAudio data flow as soon as stream is initiated.
-    ai.start();
-    ai.pause();
-
-    ai.on('data', (chunk: string) => {
-        // turn string base64 data into buffer object.
-        audioContainer.input += chunk;
-        // const buf = Buffer.from(chunk, encoding);
-        // audioInput.push(buf);
-    });
-
-    if (ao != null) {
-        ao.end();
-    }
-    ao = new portAudio.AudioIO({ outOptions: audioOptions });
-    ao.start();
-}
-
 // callback run on space bar key up and down.
-const updateRecorder = (_event, record: boolean): void => {
-    if (record) {
-        // resume mic data flow on space bar key down.
-        // while(audioInput.length) { audioInput.pop() }
-        if(audioContainer.input.length) audioContainer.input = '';
-        ai.resume();
-    } else {
-        // stop mic data flow on space bar key up.
-        ai.pause();
-        const buf = Buffer.from(audioContainer.input, encoding);
-        sendAudio(buf);
-        // clear audioInput.
-        audioContainer.input = '';
-        // while(audioInput.length) { audioInput.pop() }
-    }
-}
+const updateRecorder = (_event, payload: boolean): void => { record = payload };
 
 // listen for space key up/down event.
 ipcMain.removeAllListeners('update-recorder');
 ipcMain.on('update-recorder', updateRecorder);
 
+// utility function used by play func.
+function bufSplit(input: Array<Buffer>): Array<Buffer> {
+    const result: Buffer[] = [];
+    input.forEach((b: Buffer) => {
+        // split buffer into two.
+        result.push(b.slice(0, b.length / 2), b.slice(b.length / 2, b.length));
+    });
+    return result;
+}
+
+// main audio function run by run.ts module.
+export function initAudioIO(): void {
+
+    if (!ai) {
+        ai = new portAudio.AudioIO({ inOptions: audioOptions });
+
+        // base64 encoding needed for google speech to text.
+        ai.setEncoding(encoding);
+        ai.start();
+
+        ai.on('data', (chunk: string) => {
+            if (record) {
+                console.log('recording data')
+                audioContainer.input += chunk;
+            } else {
+                if (audioContainer.input.length) audioContainer.input = "";
+            }
+        });
+    }
+
+    if (!ao) {
+        ao = new portAudio.AudioIO({ outOptions: audioOptions });
+        ao.start();
+    }
+}
+
 // play audio buffers.
 export function play(input: Array<Buffer>): void {
     let i = 0;
@@ -116,7 +99,7 @@ export function play(input: Array<Buffer>): void {
     }
 }
 
-function stopStream() {
+export function stopStream() {
     if(ai != null) {
         ai.quit();
         ai = null;
@@ -127,12 +110,3 @@ function stopStream() {
     }
 }
 
-// utility function used by play func.
-function bufSplit(input: Array<Buffer>): Array<Buffer> {
-    const result: Buffer[] = [];
-    input.forEach((b: Buffer) => {
-        // split buffer into two.
-        result.push(b.slice(0, b.length / 2), b.slice(b.length / 2, b.length));
-    });
-    return result;
-}

src/background/init.ts

@@ -4,10 +4,11 @@
 import { app } from "electron";
 import { main } from './run';
 import { backgroundMitt } from './emitter';
+import { stopStream } from './audio';
 
 let winActive: boolean;
 
-backgroundMitt.once('window-active', (state: boolean) => {
+backgroundMitt.on('window-active', (state: boolean) => {
     winActive =  state;
 });
 
@@ -20,11 +21,11 @@ export function initApp(dev: boolean): void {
     // Quit when all windows are closed.
     app.on("window-all-closed", () => {
       if (process.platform !== "darwin") {
+        stopStream();
         app.quit();
       }
     });
 
-    // Might have to de-reference window object
     app.on("activate", () => {
       if (winActive === false) {
         main();

src/background/window.ts

@@ -55,7 +55,7 @@ const windowMount = (): void => {
     ipcMain.removeHandler('nav-bar'); // avoid setting duplicate handlers
     ipcMain.handle('nav-bar', navBarHandler);
     // render messages through ipc-renderer.
-    backgroundMitt.once('ipc-renderer', renderMessage);
+    backgroundMitt.on('ipc-renderer', renderMessage);
 }
 
 // do this on window dismount.
@@ -64,7 +64,7 @@ const windowDismount = (): void => {
     backgroundMitt.emit('window-active', false);
 }
 
-// function used by run.ts to create the main window. 
+// function used by run.ts to create the main window.
 export async function createWindow(options: WindowSettings): Promise<void> {
   return new Promise((resolve, _reject) => {
 
@@ -88,6 +88,7 @@ export async function createWindow(options: WindowSettings): Promise<void> {
       }
     });
 
+
     if (process.env.WEBPACK_DEV_SERVER_URL) {
       // Load the url of the dev server if in development mode
       win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
@@ -105,7 +106,10 @@ export async function createWindow(options: WindowSettings): Promise<void> {
     })
 
     win.webContents.on('did-finish-load', () => {
-      windowMount();      
+        if (win) win.webContents.send('window-ready', {
+            message: true
+        });
+      windowMount();
       resolve();
     });
 

src/main.ts

@@ -7,6 +7,7 @@ import mitt from "mitt";
 import anime from "animejs";
 import { createApp } from "vue";
 
+
 // Handle events.
 const emitter = mitt();
 

src/modules/auth.ts

@@ -11,8 +11,6 @@ const state = reactive<AuthState>({
     error: undefined,
 });
 
-const loading = ref(true);
-
 const AUTH_KEY = 'crimata_token';
 
 const token = window.localStorage.getItem(AUTH_KEY);
@@ -22,7 +20,6 @@ if (token) {
 }
 
 const authToken = async () => {
-   loading.value = true;
    const { invoke  } = useIpc();
     try {
         const res = await invoke('auth-session', token);
@@ -35,7 +32,6 @@ const authToken = async () => {
         window.localStorage.removeItem(AUTH_KEY);
         state.accessToken = null;
     }
-    loading.value = false;
 }
 
 // authenticate on auth event
@@ -60,6 +56,5 @@ export const useAuth = () => {
         setToken,
         logout,
         ...toRefs(state), // accessToken, error
-        loading
     }
 }

src/views/messenger.vue

@@ -3,7 +3,7 @@
     <TextAudioInput />
 
     <!-- List of message bubbles. -->
-    <div id="messenger" >
+    <div id="messenger">
       <MessageItem v-for="message in messages" :message="message" :key="message.id"/>
     </div>
  

tests/audio.js

@@ -71,7 +71,7 @@ ia.on('data', (chunk) => {
 const ao = new portAudio.AudioIO({
     outOptions: {
         sampleFormat: 16,
-            channelCount: 1,
+        channelCount: 1,
         sampleRate: 16000,
         deviceId: -1,
         closeOnError: false,