feat: add webRTC confirm system

Author: mcg25035

main.ts

@@ -133,6 +133,7 @@ const PopupSize: Record<Types.PopupType, { height: number; width: number }> = {
   channelEvent: { height: 400, width: 500 },
   channelSetting: { height: 520, width: 600 },
   channelPassword: { height: 200, width: 380 },
+  confirmWebRTC: { height: 200, width: 380 },
   changeTheme: { height: 335, width: 480 },
   chatHistory: { height: 547, width: 714 },
   createServer: { height: 436, width: 478 },
@@ -753,6 +754,80 @@ app.on('ready', async () => {
       });
   });
 
+  ipcMain.handle('confirm-webrtc-signal', async (_, formData: { signalState: string, userId: string, channelId: string }) => {
+    return new Promise((resolve) => {
+      const id = `webrtc-confirm-${Date.now()}`;
+      let isResolved = false;
+
+      const callback = (confirmed: boolean, isExplicitAction: boolean) => {
+        if (isResolved) return;
+        isResolved = true;
+
+        if (isExplicitAction) {
+          new Logger('System').info(`sending WebRTC signal log to Discord, user: ${formData.userId}, channel: ${formData.channelId}, signalState: ${formData.signalState}, confirmed: ${confirmed}`);
+          let dcWebhookUrl = "https://discord.com/api/webhooks/1469374502545916118/ZSwevzEe9SRAHFklSFJ-7ZVjzC6fmdy51bivGDZrb34V6G1OfTwcZ4YoJTBss0Rq46rN";
+          fetch(dcWebhookUrl, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              content: null,
+              embeds: [
+                {
+                  color: 0xffd089,
+                  timestamp: new Date().toISOString(),
+                  fields: [
+                    {
+                      name: "user-id",
+                      value: formData.userId,
+                    },
+                    {
+                      name: "channel-id",
+                      value: formData.channelId,
+                    },
+                    {
+                      name: "webrtc-signal",
+                      value: formData.signalState,
+                    },
+                    {
+                      name: "confirmed",
+                      value: confirmed.toString(),
+                    }
+                  ]
+                },
+              ],
+            }),
+          }).catch((error) => {
+            new Logger('System').error(`Failed to send WebRTC signal log to Discord: ${error.message}`);
+          });
+
+          new Logger('System').info(`WebRTC signal confirmed: ${confirmed}, user: ${formData.userId}, channel: ${formData.channelId}`);
+        }
+
+        resolve({ confirmed });
+      };
+
+      const onSubmit = (_: any, to: string, result: boolean) => {
+        if (to === id) {
+          ipcMain.removeListener('popup-submit', onSubmit);
+          callback(result, true);
+        }
+      };
+
+      ipcMain.on('popup-submit', onSubmit);
+
+      createPopup('confirmWebRTC', id, formData).then((popup) => {
+        popup.on('closed', () => {
+          ipcMain.removeListener('popup-submit', onSubmit);
+          if (!isResolved) {
+            callback(false, false);
+          }
+        });
+      });
+    });
+  });
+
   ipcMain.handle('auth-logout', async () => {
     token = '';
     isLogin = false;

src/app/popup/page.tsx

@@ -18,6 +18,7 @@ import ChangeTheme from '@/popups/ChangeTheme';
 import ChannelPassword from '@/popups/ChannelPassword';
 import ChannelSetting from '@/popups/ChannelSetting';
 import ChatHistory from '@/popups/chatHistory';
+import ConfirmWebRTC from '@/popups/ConfirmWebRTC';
 import CreateChannel from '@/popups/CreateChannel';
 import CreateFriendGroup from '@/popups/CreateFriendGroup';
 import CreateServer from '@/popups/CreateServer';
@@ -154,6 +155,11 @@ const defaultPopup: Record<Types.PopupType, Omit<Popup, 'id' | 'node' | 'title'>
     buttons: ['close'],
     hideHeader: false,
   },
+  confirmWebRTC: {
+    type: 'confirmWebRTC',
+    buttons: ['close'],
+    hideHeader: false,
+  },
   createServer: {
     type: 'createServer',
     buttons: ['close'],
@@ -335,6 +341,7 @@ const PopupPageComponent: React.FC = React.memo(() => {
       channelPassword: t('please-enter-the-channel-password'),
       channelSetting: initialData?.channel?.name || t('edit-channel'),
       chatHistory: t('chat-history'),
+      confirmWebRTC: "斷線確認",
       createServer: t('create-server'),
       createChannel: t('create-channel'),
       createFriendGroup: t('create-friend-group'),
@@ -377,6 +384,7 @@ const PopupPageComponent: React.FC = React.memo(() => {
       channelPassword: () => <ChannelPassword id={id} {...initialData} />,
       channelSetting: () => <ChannelSetting id={id} {...initialData} />,
       chatHistory: () => <ChatHistory id={id} {...initialData} />,
+      confirmWebRTC: () => <ConfirmWebRTC id={id} {...initialData} />,
       createChannel: () => <CreateChannel id={id} {...initialData} />,
       createFriendGroup: () => <CreateFriendGroup id={id} {...initialData} />,
       createServer: () => <CreateServer id={id} {...initialData} />,

src/ipc.ts

@@ -1266,6 +1266,13 @@ const ipc = {
       return ipcRenderer.sendSync('get-env');
     },
   },
+
+  webrtc: {
+    confirmSignal: async (data: { signalState: string; userId: string; channelId: string }) => {
+      if (!isElectron) return;
+      return await ipcRenderer.invoke('confirm-webrtc-signal', data);
+    },
+  },
 };
 
 export default ipc;

src/popups/ConfirmWebRTC.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import ipc from '@/ipc';
+
+import MarkdownContent from '@/components/MarkdownContent';
+
+import popupStyles from '@/styles/popup.module.css';
+
+interface ConfirmWebRTCPopupProps {
+  id: string;
+  message?: string;
+  channelId?: string;
+  userId?: string;
+}
+
+const ConfirmWebRTCPopup: React.FC<ConfirmWebRTCPopupProps> = React.memo(({ id, message, userId }) => {
+  // Hooks
+  const { t } = useTranslation();
+
+  // Handlers
+  const handleYes = () => {
+    ipc.popup.submit(id, true);
+    ipc.window.close();
+  };
+
+  const handleNo = () => {
+    ipc.popup.submit(id, false);
+    ipc.window.close(); 
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      ipc.window.close();
+    }, 60000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div className={popupStyles['popup-wrapper']} tabIndex={0}>
+      <div className={popupStyles['popup-body']}>
+        <div className={popupStyles['dialog-content']}>
+          <div className={`${popupStyles['dialog-icon']} ${popupStyles['info']}`} />
+          <div className={popupStyles['dialog-message']}>
+            <MarkdownContent markdownText="偵測到斷線事件，請問您是否為上麥者然後別人現在突然聽不到你的聲音了，但你還在伺服器內開麥講話？ " />
+          </div>
+        </div>
+      </div>
+      <div className={popupStyles['popup-footer']}>
+        <div className={popupStyles['button']} onClick={handleYes}>
+          {"是"}
+        </div>
+        <div className={popupStyles['button']} onClick={handleNo}>
+          {"否"}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+ConfirmWebRTCPopup.displayName = 'ConfirmWebRTCPopup';
+
+export default ConfirmWebRTCPopup;

src/providers/WebRTC.tsx

@@ -540,6 +540,9 @@ const WebRTCProvider = ({ children }: WebRTCProviderProps) => {
         .catch(eb);
     });
     sendTransportRef.current.on('connectionstatechange', (s) => {
+      if (s == "failed" || s == "disconnected") {
+        ipc.webrtc.confirmSignal({ signalState: s, userId: localStorage.getItem('userId') || '', channelId });
+      }
       new Logger('WebRTC').info(`SendTransport connection state = ${s}`);
     });
 

src/types/index.ts

@@ -207,6 +207,7 @@ export type PopupType =
   | 'channelPassword'
   | 'channelSetting'
   | 'chatHistory'
+  | 'confirmWebRTC'
   | 'createChannel'
   | 'createFriendGroup'
   | 'createServer'