add navbar listener

src/composables/useIpcMain.ts

@@ -71,12 +71,10 @@ export class IpcListener<InputParam> implements IIpcListener<InputParam> {
       ipcMain.removeAllListeners(this.channel);
   }
 
-  private _onPost = (_e: IpcMainEvent, payload?: string | null): void => {
+  private _onPost = (_e: IpcMainEvent, payload: InputParam): void => {
 
       console.log(`[IPC] Post: ${this.channel}`);
-
-      const params = payload ? JSON.parse(payload) : null;
-      this._listenerCallback(params);
+      this._listenerCallback(payload);
   }
 
 }

src/ipc/listeners.ts

@@ -3,10 +3,13 @@ import { IpcListener } from "@/composables/useIpcMain"
 import { sendMessage } from '@/session';
 import { collect } from "@/audio";
 import { updateAppState } from "@/account";
+import { onNavBar } from "@/window";
 
 const CLIENT_MESSAGE_CHANNEL = "post-session-send"
 const GET_AUDIO_CHANNEL = "post-audio-collect";
 const APP_MOUNT_CHANNEL = "post-app-mount";
+const NAV_BAR_CHANNEL = "post-nav-bar";
+const WINDOW_BLUR_CHANNEL = "post-window-focus";
 
 export const messageListener = new IpcListener<Message>({
     channel: CLIENT_MESSAGE_CHANNEL,
@@ -22,3 +25,22 @@ export const appMountListener = new IpcListener<null>({
     channel: APP_MOUNT_CHANNEL,
     listenerCallback: updateAppState
 });
+
+export const navBarListener = new IpcListener({
+    channel: NAV_BAR_CHANNEL,
+    listenerCallback: onNavBar
+});
+
+
+const onWindowFocus: IpcListenerCallback<{ isFocused: boolean }> = (payload) => {
+    if (payload.isFocused) {
+        console.log('window is focused')
+    } else {
+        console.log('window is blurred')
+    }
+}
+
+export const windowFocusListener = new IpcListener({
+    channel: WINDOW_BLUR_CHANNEL,
+    listenerCallback: onWindowFocus
+});

src/render/App.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts">
 
-import { defineComponent, onMounted } from "vue";
+import { defineComponent, onMounted, onUnmounted } from "vue";
 import { IpcRendererEvent } from "electron";
 
 import Splash from "@/render/components/splash.vue";
@@ -43,7 +43,26 @@ export default defineComponent({
 
   setup() {
 
-    onMounted(() => postAppMount());
+    const onFocus = () => {
+        console.log('window is focused');
+    }
+
+    const onBlur = () => {
+        console.log('window is blurred');
+    }
+
+    onMounted(() => {
+        // subscribe to visibility change events
+        window.addEventListener('blur', onBlur);
+        window.addEventListener('focus', onFocus);
+
+        postAppMount()
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener("blur", onBlur);
+        window.removeEventListener("focus", onFocus);
+    });
 
     return {
         authComplete,

src/render/components/header.vue

@@ -16,16 +16,17 @@
 
     // import { postNavBarExit, postNavBarMin } from "@/render/ipc";
     import { defineComponent } from "vue";
+    import { postNavBar } from "@/render/ipc";
 
     export default defineComponent({
         name: "Header",
         setup() {
-        const postNavBarExit = () => {};
-        const postNavBarMin = () => {};
-        return {
-            postNavBarExit,
-            postNavBarMin
-        }
+            const postNavBarExit = () => postNavBar('close');
+            const postNavBarMin = () => postNavBar('min');
+            return {
+                postNavBarExit,
+                postNavBarMin
+            }
         }
 
     });

src/render/composables/useIpcRend.ts

@@ -34,16 +34,16 @@ export class IpcRendererListener<InputParam> implements IIpcListener<InputParam>
 
 export default function useIpcRenderer () {
 
-    const invoke = async (endpoint: string, payload: any) => {
+    const invoke = async <T>(endpoint: string, payload: T) => {
         try {
-            const res = await window.ipcRenderer.invoke(endpoint, payload);
+            const res = await window.ipcRenderer.invoke(endpoint, payload? JSON.stringify(payload) : null);
             return res;
         } catch (e) {
             throw e;
         }
     }
 
-    const post = (endpoint: string, payload: any) => {
+    const post = <T>(endpoint: string, payload: T) => {
         window.ipcRenderer.send(endpoint, payload);
     };
 

src/render/ipc.ts

@@ -14,7 +14,7 @@ const { post, invoke } = useIpc();
 export const invokeLogin = async (
     payload: LoginPayload
 ): Promise<Profile | Error> => (
-    await invoke('invoke-account-login', JSON.stringify(payload))
+    await invoke('invoke-account-login', payload)
 );
 
 export const invokeLogout = async (): Promise<void> => (
@@ -41,10 +41,6 @@ export const invokeReturnAudio = async (): Promise<ArrayBuffer[] | Error> => (
  *
  */
 
-export const invokeSession = async (cid: string): Promise<Profile | Error> => (
-    await invoke("messenger-init", cid)
-);
-
 export const postMessage = (payload: Message): void => (
     post('post-session-send', payload)
 );
@@ -53,6 +49,25 @@ export const postAppMount = (): void => (
     post('post-app-mount', null)
 );
 
+/**
+ *
+ * Nav bar endpoints
+ *
+ */
+
+export const postNavBar = (payload: string): void => (
+    post('post-nav-bar', payload)
+);
+
+/**
+ *
+ * Window focus endpoint
+ *
+ */
+
+export const postWindowBlur = (payload: { isFocused: boolean; }): void => (
+    post('post-window-focus', payload)
+);
 
 /**
  *

src/session.ts

@@ -34,7 +34,6 @@ const isAddMessage = (message: any): boolean => {
 const onMessageCallback = (payload: string) => {
 
     const message  = JSON.parse(payload);
-    console.log(typeof message);
 
     /* if the platform fails to authenticate, we must back down */
     if (message === "CLOSE_AUTH_FAIL") {

src/types.ts

@@ -47,7 +47,7 @@ interface IpcHandlerCallback<I, O> {
 }
 
 interface IpcListenerCallback<T> {
-    (payload: T | null): void;
+    (payload: T): void;
 }
 
 interface IIpcHandler<I, O> {

src/window.ts

@@ -33,20 +33,20 @@ const loadWinState = (fileName: string): WindowState => {
 }
 
 // Called when a NavBar button is pressed.
-const onNavBar = (_event: any, action: string): void => {
+export const onNavBar: IpcListenerCallback<string> = (payload): void => {
   if (win) {
-    if (action === "close") {
-      win.close()
+    if (payload === "close") {
+      win.close();
     } else {
-      win.minimize()
+      win.minimize();
     }
   }
 }
 
 // Util function to render message on ipc-renderer event.
-const postToWindow = <T>(event: IpcRendererEvent<T>): void => {
+const postToWindow = <T>(e: IpcRendererEvent<T>): void => {
     if (win) {
-        win.webContents.send(event.channel, event.payload);
+        win.webContents.send(e.channel, e.payload);
     }
 }
 
@@ -75,10 +75,6 @@ const onWindowMount = (): void => {
     // Must tell initApp that window exists.
     backgroundMitt.emit('window-active', true);
 
-    // Handle win nav-bar event.
-    ipcMain.removeAllListeners("nav-bar") // avoid setting duplicate handlers
-    ipcMain.on("nav-bar", onNavBar);
-
     // Gateway for messages to the frontend.
     backgroundMitt.removeAllListeners("ipc-renderer")
     backgroundMitt.on("ipc-renderer", postToWindow);