feat: click on call message to open call window

So far only when the call state is "alerting".
This is useful for when the caller is not among "who can call me"
(#6044).

Partially addresses
#6081.

Author: WofWca

packages/frontend/src/components/message/Message.tsx

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useEffectEvent,
   useMemo,
   useRef,
   useState,
@@ -65,7 +66,8 @@ import { mouseEventToPosition } from '../../utils/mouseEventToPosition'
 import { useRovingTabindex } from '../../contexts/RovingTabindex'
 import { avatarInitial } from '@deltachat-desktop/shared/avatarInitial'
 import { getLogger } from '@deltachat-desktop/shared/logger'
-import Icon from '../Icon'
+import { IconButton } from '../Icon'
+import { useRpcFetch } from '../../hooks/useFetch'
 
 const log = getLogger('Message')
 
@@ -817,12 +819,10 @@ export default function Message(props: {
         />
       ) : null}
       {message.viewType === 'Call' && (
-        <Icon
-          icon='phone'
-          className='phone-icon'
-          coloring='currentColor'
-          // `size` will be overridden in CSS
-          size={24}
+        <CallIconButton
+          accountId={accountId}
+          chatId={message.chatId}
+          messageId={message.id}
         />
       )}
     </div>
@@ -1249,3 +1249,60 @@ function WebxdcMessageContent({
     </div>
   )
 }
+
+function CallIconButton({
+  accountId,
+  chatId,
+  messageId,
+}: {
+  accountId: number
+  chatId: number
+  messageId: number
+}) {
+  const callInfoFetch = useRpcFetch(BackendRemote.rpc.callInfo, [
+    accountId,
+    messageId,
+  ])
+  const refresh = useEffectEvent(callInfoFetch.refresh)
+  useEffect(() => {
+    return onDCEvent(accountId, 'MsgsChanged', event => {
+      if (event.msgId !== messageId) {
+        return
+      }
+      refresh()
+    })
+  }, [accountId, messageId])
+
+  const onClickParams:
+    | undefined
+    | Parameters<typeof runtime.openIncomingVideoCallWindow>[0] =
+    callInfoFetch.result?.ok &&
+    callInfoFetch.result.value.state.kind === 'Alerting'
+      ? {
+          accountId,
+          chatId,
+          callMessageId: messageId,
+          callerWebrtcOffer: callInfoFetch.result.value.sdpOffer,
+          startWithCameraEnabled: callInfoFetch.result.value.hasVideo,
+        }
+      : undefined
+  // TODO fix: don't open a second window if one is already open
+  // for this message (this should be done in the main process).
+  const onClick = onClickParams
+    ? () => runtime.openIncomingVideoCallWindow(onClickParams)
+    : undefined
+
+  return (
+    <IconButton
+      aria-label='📞'
+      onClick={onClick}
+      aria-busy={callInfoFetch.loading}
+      disabled={onClick == undefined}
+      icon='phone'
+      className='phone-icon'
+      coloring='currentColor'
+      // `size` will be overridden in CSS
+      size={24}
+    />
+  )
+}

packages/runtime/runtime.ts

@@ -138,6 +138,13 @@ export interface Runtime {
     chatId: number,
     param: { startWithCameraEnabled: boolean }
   ): void
+  openIncomingVideoCallWindow(params: {
+    accountId: number
+    chatId: number
+    callMessageId: number
+    callerWebrtcOffer: string
+    startWithCameraEnabled: boolean
+  }): Promise<void>
 
   // control app
   restartApp(): void

packages/target-browser/runtime-browser/runtime.ts

@@ -207,6 +207,9 @@ class BrowserRuntime implements Runtime {
   startOutgoingVideoCall(): void {
     this.log.critical('Method not implemented.')
   }
+  async openIncomingVideoCallWindow() {
+    throw new Error('Method not implemented.')
+  }
   async saveBackgroundImage(
     file: string,
     isDefaultPicture: boolean

packages/target-electron/runtime-electron/runtime.ts

@@ -208,6 +208,15 @@ class ElectronRuntime implements Runtime {
   ): Promise<void> {
     return ipcBackend.invoke('startOutgoingVideoCall', accountId, chatId, param)
   }
+  openIncomingVideoCallWindow(params: {
+    accountId: number
+    chatId: number
+    callMessageId: number
+    callerWebrtcOffer: string
+    startWithCameraEnabled: boolean
+  }): Promise<void> {
+    return ipcBackend.invoke('openIncomingVideoCallWindow', params)
+  }
   openMapsWebxdc(accountId: number, chatId?: number | undefined): void {
     ipcBackend.invoke('open-maps-webxdc', accountId, chatId)
   }

packages/target-electron/src/ipc.ts

@@ -44,10 +44,11 @@ import { appx, mapPackagePath } from './isAppx.js'
 import DeltaChatController from './deltachat/controller.js'
 import { BuildInfo } from './get-build-info.js'
 import { updateContentProtectionOnAllActiveWindows } from './content-protection.js'
-import { MediaType } from '@deltachat-desktop/runtime-interface'
+import { MediaType, type Runtime } from '@deltachat-desktop/runtime-interface'
 import {
   startHandlingIncomingVideoCalls,
   startOutgoingVideoCall,
+  openIncomingVideoCallWindow,
 } from './windows/video-call.js'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
@@ -402,6 +403,12 @@ export async function init(cwd: string, logHandler: LogHandler) {
       startOutgoingVideoCall(accountId, chatId, param)
     }
   )
+  ipcMain.handle(
+    'openIncomingVideoCallWindow',
+    (_ev, ...args: Parameters<Runtime['openIncomingVideoCallWindow']>) => {
+      openIncomingVideoCallWindow(...args)
+    }
+  )
   const stopHandlingIncomingVideoCalls = startHandlingIncomingVideoCalls(
     dcController.jsonrpcRemote
   )

packages/target-electron/src/windows/video-call.ts

@@ -117,7 +117,7 @@ export function startHandlingIncomingVideoCalls(
   return () => jsonrpcRemote.off('IncomingCall', incomingCallListener)
 }
 
-function openIncomingVideoCallWindow({
+export function openIncomingVideoCallWindow({
   accountId,
   chatId,
   callMessageId,
@@ -130,7 +130,7 @@ function openIncomingVideoCallWindow({
   callerWebrtcOffer: string
   startWithCameraEnabled: boolean
 }) {
-  log.info('received incoming call', {
+  log.info('openIncomingVideoCallWindow', {
     accountId,
     chatId,
     callMessageId,

packages/target-tauri/runtime-tauri/runtime.ts

@@ -553,6 +553,9 @@ class TauriRuntime implements Runtime {
   startOutgoingVideoCall(): void {
     throw new Error('Method not implemented.101')
   }
+  async openIncomingVideoCallWindow() {
+    throw new Error('Method not implemented.102')
+  }
   restartApp(): void {
     // will not be implemented in tauri for now, as this method is currently unused
     this.log.error('Method not implemented: restartApp')