Update call implementation and custom ringtones

.changeset/call-signaling-notification-hardening.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Improved call signaling and notification handling to restore call state more reliably, reduce duplicate ringing, and handle expiry more safely.

.changeset/call-start-experience.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Added explicit voice/video call start options in room headers with more predictable DM/group join and start behavior.

.changeset/custom-call-ringtones.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Added customizable call sounds in Settings with built-in ringtone choices, ringback behavior, volume control, and persistent custom ringtone import/reset.

.changeset/incoming-call-modal-upgrade.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Improved the incoming call modal with clearer caller/room context, better voice/video labeling, stronger keyboard support, and clearer decline vs ignore handling.

package.json

@@ -97,7 +97,7 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@rollup/plugin-inject": "^5.0.5",
     "@rollup/plugin-wasm": "^6.2.2",
-    "@sableclient/sable-call-embedded": "1.1.4",
+    "@sableclient/sable-call-embedded": "1.1.5",
     "@sentry/vite-plugin": "^5.3.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -141,4 +141,4 @@
       "jsdom>undici": "^7.28.0"
     }
   }
-}
+}

src/app/components/CallEmbedProvider.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useAutoJoinCall } from '$hooks/useAutoJoinCall';
 import {
@@ -12,13 +12,15 @@ import {
 } from '$hooks/useCallEmbed';
 import type { CallEmbed } from '$plugins/call';
 import { useClientWidgetApiEvent, ElementWidgetActions } from '$plugins/call';
-import { callChatAtom, callEmbedAtom } from '$state/callEmbed';
+import { callChatAtom, callEmbedAtom, callEmbedStartErrorAtom } from '$state/callEmbed';
 import { useSelectedRoom } from '$hooks/router/useSelectedRoom';
 import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 import { IncomingCallModal } from './IncomingCallModal';
+import { toCallEmbedStartError } from '$plugins/call/callEmbedError';
 
 function CallUtils({ embed }: { embed: CallEmbed }) {
   const setCallEmbed = useSetAtom(callEmbedAtom);
+  const setCallEmbedStartError = useSetAtom(callEmbedStartErrorAtom);
 
   useCallMemberSoundSync(embed);
   useCallThemeSync(embed);
@@ -30,6 +32,24 @@ function CallUtils({ embed }: { embed: CallEmbed }) {
   useCallHangupEvent(embed, handleCallEnd);
   useClientWidgetApiEvent(embed.call, ElementWidgetActions.Close, handleCallEnd);
 
+  useEffect(() => {
+    const disposeOnReady = embed.onReady(() => {
+      setCallEmbedStartError(null);
+    });
+    const disposeOnCapabilitiesNotified = embed.onCapabilitiesNotified(() => {
+      setCallEmbedStartError(null);
+    });
+    const disposeOnPreparingError = embed.onPreparingError((error) => {
+      setCallEmbedStartError(toCallEmbedStartError(error));
+    });
+
+    return () => {
+      disposeOnReady();
+      disposeOnCapabilitiesNotified();
+      disposeOnPreparingError();
+    };
+  }, [embed, setCallEmbedStartError]);
+
   return null;
 }
 

src/app/components/IncomingCallModal.test.tsx

@@ -0,0 +1,167 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { Room } from '$types/matrix-sdk';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { IncomingCallInternal } from './IncomingCallModal';
+
+const { navigateRoomMock, sendRtcDeclineMock, webRtcSupportedMock, livekitSupportedMock } =
+  vi.hoisted(() => ({
+    navigateRoomMock: vi.fn<(roomId: string) => void>(),
+    sendRtcDeclineMock: vi.fn<(roomId: string, eventId: string) => Promise<void>>(),
+    webRtcSupportedMock: vi.fn<() => boolean>(),
+    livekitSupportedMock: vi.fn<() => boolean>(),
+  }));
+
+vi.mock('$hooks/useMatrixClient', () => ({
+  useMatrixClient: () => ({
+    sendRtcDecline: sendRtcDeclineMock,
+    getSafeUserId: () => '@me:example.org',
+    mxcUrlToHttp: () => undefined,
+  }),
+}));
+
+vi.mock('$hooks/useLivekitSupport', () => ({
+  useLivekitSupport: () => livekitSupportedMock(),
+}));
+
+vi.mock('$hooks/useCallEmbed', () => ({
+  useCallEmbed: () => undefined,
+}));
+
+vi.mock('$hooks/useScreenSize', () => ({
+  ScreenSize: { Desktop: 'Desktop', Tablet: 'Tablet', Mobile: 'Mobile' },
+  useScreenSizeContext: () => 'Desktop',
+}));
+
+vi.mock('$hooks/useRoomMeta', () => ({
+  useRoomName: () => 'Direct Message',
+}));
+
+vi.mock('$utils/room', () => ({
+  getRoomAvatarUrl: () => null,
+  getMemberDisplayName: () => 'Alice',
+}));
+
+vi.mock('$hooks/useRoomNavigate', () => ({
+  useRoomNavigate: () => ({
+    navigateRoom: navigateRoomMock,
+  }),
+}));
+
+vi.mock('$utils/rtc', () => ({
+  webRTCSupported: () => webRtcSupportedMock(),
+}));
+
+vi.mock('./room-avatar', () => ({
+  RoomAvatar: ({ alt }: { alt: string }) => <div>{alt}</div>,
+}));
+
+vi.mock('./user-avatar', () => ({
+  UserAvatar: ({ alt }: { alt?: string }) => <div>{alt}</div>,
+}));
+
+vi.mock('@sentry/react', () => ({
+  addBreadcrumb: vi.fn<(...args: unknown[]) => void>(),
+  metrics: {
+    count: vi.fn<(...args: unknown[]) => void>(),
+  },
+}));
+
+vi.mock('$utils/debugLogger', () => ({
+  createDebugLogger: () => ({
+    info: vi.fn<(...args: unknown[]) => void>(),
+    warn: vi.fn<(...args: unknown[]) => void>(),
+    error: vi.fn<(...args: unknown[]) => void>(),
+  }),
+}));
+
+describe('IncomingCallInternal', () => {
+  const room = {
+    roomId: '!room:example.org',
+    getMember: () => ({
+      getMxcAvatarUrl: () => undefined,
+      rawDisplayName: 'Alice',
+    }),
+    currentState: {
+      maySendStateEvent: () => true,
+    },
+  } as unknown as Room;
+  const incomingCall = {
+    roomId: room.roomId,
+    notificationEventId: '$notif',
+    refEventId: '$ref',
+    senderId: '@alice:example.org',
+    senderTs: Date.now(),
+    expiresAt: Date.now() + 60_000,
+    notificationType: 'ring' as const,
+    intentKind: 'audio' as const,
+    isDirect: true,
+  };
+
+  beforeEach(() => {
+    navigateRoomMock.mockReset();
+    sendRtcDeclineMock.mockReset().mockResolvedValue(undefined);
+    webRtcSupportedMock.mockReset().mockReturnValue(true);
+    livekitSupportedMock.mockReset().mockReturnValue(true);
+  });
+
+  it('closes the modal when decline is pressed', async () => {
+    const onClose = vi.fn<() => void>();
+    render(<IncomingCallInternal room={room} incomingCall={incomingCall} onClose={onClose} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Decline call' }));
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+    expect(navigateRoomMock).not.toHaveBeenCalled();
+    expect(sendRtcDeclineMock).toHaveBeenCalledWith('!room:example.org', '$notif');
+  });
+
+  it('navigates and closes when answer is pressed', () => {
+    const onClose = vi.fn<() => void>();
+    render(<IncomingCallInternal room={room} incomingCall={incomingCall} onClose={onClose} />);
+
+    fireEvent.click(screen.getByRole('button', { name: /answer/i }));
+
+    expect(navigateRoomMock).toHaveBeenCalledWith('!room:example.org');
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('disables answer when WebRTC is unavailable', () => {
+    webRtcSupportedMock.mockReturnValue(false);
+    const onClose = vi.fn<() => void>();
+    render(<IncomingCallInternal room={room} incomingCall={incomingCall} onClose={onClose} />);
+
+    expect(screen.getByRole('button', { name: /answer voice call/i })).toBeDisabled();
+  });
+
+  it('ignores room call notifications without sending RTC decline', async () => {
+    const onClose = vi.fn<() => void>();
+    render(
+      <IncomingCallInternal
+        room={room}
+        incomingCall={{ ...incomingCall, isDirect: false, notificationType: 'notification' }}
+        onClose={onClose}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Ignore call notification' }));
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+    expect(sendRtcDeclineMock).not.toHaveBeenCalled();
+  });
+
+  it('shows homeserver capability issues and blocks answer when LiveKit is unavailable', () => {
+    livekitSupportedMock.mockReturnValue(false);
+    const onClose = vi.fn<() => void>();
+    render(<IncomingCallInternal room={room} incomingCall={incomingCall} onClose={onClose} />);
+
+    expect(
+      screen.getByText(/homeserver does not expose a livekit call focus/i)
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /answer voice call/i })).toBeDisabled();
+    expect(screen.getByText(/homeserver call focus is unavailable/i)).toBeInTheDocument();
+  });
+});