feat(desktop): add flash frame when receive message

.github/workflows/desktop-build.yml

@@ -5,7 +5,7 @@ on:
     branches:
       - master
     paths:
-      - "client/desktop/**"
+      - "client/desktop/release/app/package.json" # build when version upgrade
   workflow_dispatch:
 
 jobs:

client/desktop/src/main/inject/message-handler.ts

@@ -1,11 +1,13 @@
 import { generateInstallPluginScript } from '.';
 import log from 'electron-log';
 import { startScreenshots } from '../screenshots';
+import { BrowserWindow } from 'electron';
 
 export function handleTailchatMessage(
   type: string,
   payload: any,
-  webview: Electron.WebContents
+  webview: Electron.WebContents,
+  win: BrowserWindow
 ) {
   log.info('onMessage receive:', type, payload);
 
@@ -18,4 +20,11 @@ export function handleTailchatMessage(
     startScreenshots();
     return;
   }
+
+  if (type === 'receiveUnmutedMessage') {
+    if (!win.isFocused) {
+      win.flashFrame(true);
+    }
+    return;
+  }
 }

client/desktop/src/main/main.ts

@@ -182,11 +182,20 @@ const createMainWindow = async (url: string) => {
       if (channel === 'webview-message') {
         const obj = JSON.parse(data);
         if (typeof obj === 'object' && obj._isTailchat === true && mainWindow) {
-          handleTailchatMessage(obj.type, obj.payload, mainWindow.webContents);
+          handleTailchatMessage(
+            obj.type,
+            obj.payload,
+            mainWindow.webContents,
+            mainWindow
+          );
         }
       }
     });
 
+    mainWindow.on('focus', () => {
+      mainWindow?.flashFrame(false);
+    });
+
     mainWindow.on('ready-to-show', () => {
       if (!mainWindow) {
         throw new Error('"mainWindow" is not defined');

client/web/plugins/com.msgbyte.env.electron/src/index.tsx

@@ -7,6 +7,7 @@ import { Icon } from '@capital/component';
 import React from 'react';
 import { DeviceInfoPanel } from './DeviceInfoPanel';
 import { Translate } from './translate';
+import { forwardSharedEvent } from './utils';
 
 const PLUGIN_NAME = 'Electron Support';
 
@@ -34,3 +35,5 @@ regChatInputButton({
     );
   },
 });
+
+forwardSharedEvent('receiveUnmutedMessage');

client/web/plugins/com.msgbyte.env.electron/src/utils.ts

@@ -0,0 +1,25 @@
+import { sharedEvent, postMessageEvent } from '@capital/common';
+
+/**
+ * 转发事件
+ */
+export function forwardSharedEvent(
+  eventName: string,
+  processPayload?: (payload: any) => Promise<{ type: string; payload: any }>
+) {
+  sharedEvent.on(eventName, async (payload: any) => {
+    let type = eventName;
+    if (processPayload) {
+      const res = await processPayload(payload);
+      if (!res) {
+        // Skip if res is undefined
+        return;
+      }
+
+      payload = res.payload;
+      type = res.type;
+    }
+
+    postMessageEvent(type, payload);
+  });
+}

client/web/plugins/com.msgbyte.env.rn/src/index.tsx

@@ -1,6 +1,5 @@
 import {
   getGlobalState,
-  sharedEvent,
   getCachedUserInfo,
   getCachedBaseGroupInfo,
   getMessageTextDecorators,
@@ -9,6 +8,7 @@ import {
 } from '@capital/common';
 import { DeviceInfoPanel } from './DeviceInfoPanel';
 import { Translate } from './translate';
+import { forwardSharedEvent } from './utils';
 
 const PLUGIN_NAME = 'ReactNative Support';
 
@@ -22,40 +22,6 @@ regCustomPanel({
   render: DeviceInfoPanel,
 });
 
-/**
- * 转发事件
- */
-function forwardSharedEvent(
-  eventName: string,
-  processPayload?: (payload: any) => Promise<{ type: string; payload: any }>
-) {
-  if (!(window as any).ReactNativeWebView) {
-    return;
-  }
-
-  sharedEvent.on(eventName, async (payload: any) => {
-    let type = eventName;
-    if (processPayload) {
-      const res = await processPayload(payload);
-      if (!res) {
-        // Skip if res is undefined
-        return;
-      }
-
-      payload = res.payload;
-      type = res.type;
-    }
-
-    (window as any).ReactNativeWebView.postMessage(
-      JSON.stringify({
-        _isTailchat: true,
-        type,
-        payload,
-      })
-    );
-  });
-}
-
 forwardSharedEvent('loadColorScheme');
 forwardSharedEvent('loginSuccess', async (payload) => {
   let token = window.localStorage.getItem('jsonwebtoken');

client/web/plugins/com.msgbyte.env.rn/src/utils.ts

@@ -0,0 +1,35 @@
+import { sharedEvent } from '@capital/common';
+
+/**
+ * 转发事件
+ */
+export function forwardSharedEvent(
+  eventName: string,
+  processPayload?: (payload: any) => Promise<{ type: string; payload: any }>
+) {
+  if (!(window as any).ReactNativeWebView) {
+    return;
+  }
+
+  sharedEvent.on(eventName, async (payload: any) => {
+    let type = eventName;
+    if (processPayload) {
+      const res = await processPayload(payload);
+      if (!res) {
+        // Skip if res is undefined
+        return;
+      }
+
+      payload = res.payload;
+      type = res.type;
+    }
+
+    (window as any).ReactNativeWebView.postMessage(
+      JSON.stringify({
+        _isTailchat: true,
+        type,
+        payload,
+      })
+    );
+  });
+}