change test

src/room/CallEventAudioRenderer.test.tsx

@@ -54,8 +54,6 @@ beforeEach(() => {
   playSound = vitest.fn();
   (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
     playSound,
-    playSoundLooping: vitest.fn(),
-    soundDuration: {},
   });
 });
 
@@ -107,20 +105,6 @@ test("plays a sound when a user leaves", () => {
   expect(playSound).toBeCalledWith("left");
 });
 
-test("does not play a sound before the call is successful", () => {
-  const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment(
-    [local, alice],
-    [localRtcMember],
-    { waitForCallPickup: true },
-  );
-  render(<CallEventAudioRenderer vm={vm} />);
-
-  act(() => {
-    rtcMemberships$.next([localRtcMember]);
-  });
-  expect(playSound).not.toBeCalledWith("left");
-});
-
 test("plays no sound when the participant list is more than the maximum size", () => {
   const mockRtcMemberships: CallMembership[] = [localRtcMember];
   for (let i = 0; i < MAX_PARTICIPANT_COUNT_FOR_SOUND; i++) {

src/room/CallEventAudioRenderer.tsx

@@ -16,10 +16,6 @@ import handSoundOgg from "../sound/raise_hand.ogg";
 import handSoundMp3 from "../sound/raise_hand.mp3";
 import screenShareStartedOgg from "../sound/screen_share_started.ogg";
 import screenShareStartedMp3 from "../sound/screen_share_started.mp3";
-import declineMp3 from "../sound/call_declined.mp3?url";
-import declineOgg from "../sound/call_declined.ogg?url";
-import timeoutMp3 from "../sound/call_timeout.mp3?url";
-import timeoutOgg from "../sound/call_timeout.ogg?url";
 import { useAudioContext } from "../useAudioContext";
 import { prefetchSounds } from "../soundUtils";
 import { useLatest } from "../useLatest";
@@ -41,18 +37,8 @@ export const callEventAudioSounds = prefetchSounds({
     mp3: screenShareStartedMp3,
     ogg: screenShareStartedOgg,
   },
-  decline: {
-    mp3: declineMp3,
-    ogg: declineOgg,
-  },
-  timeout: {
-    mp3: timeoutMp3,
-    ogg: timeoutOgg,
-  },
 });
 
-export type CallEventSounds = keyof Awaited<typeof callEventAudioSounds>;
-
 export function CallEventAudioRenderer({
   vm,
   muted,

src/room/GroupCallErrorBoundary.test.tsx

@@ -132,10 +132,9 @@ test("ConnectionLostError: Action handling should reset error state", async () =
   const WrapComponent = (): ReactNode => {
     const [failState, setFailState] = useState(true);
     const reconnectCallback = useCallback(
-      async (action: CallErrorRecoveryAction) => {
+      (action: CallErrorRecoveryAction) => {
         reconnectCallbackSpy(action);
         setFailState(false);
-        return Promise.resolve();
       },
       [setFailState],
     );

src/room/GroupCallErrorBoundary.tsx

@@ -36,9 +36,7 @@ import { type WidgetHelpers } from "../widget.ts";
 
 export type CallErrorRecoveryAction = "reconnect"; // | "retry" ;
 
-export type RecoveryActionHandler = (
-  action: CallErrorRecoveryAction,
-) => Promise<void>;
+export type RecoveryActionHandler = (action: CallErrorRecoveryAction) => void;
 
 interface ErrorPageProps {
   error: ElementCallError;
@@ -73,7 +71,7 @@ const ErrorPage: FC<ErrorPageProps> = ({
   if (error instanceof ConnectionLostError) {
     actions.push({
       label: t("call_ended_view.reconnect_button"),
-      onClick: () => void recoveryActionHandler("reconnect"),
+      onClick: () => recoveryActionHandler("reconnect"),
     });
   }
 
@@ -133,9 +131,9 @@ export const GroupCallErrorBoundary = ({
           widget={widget ?? null}
           error={callError}
           resetError={resetError}
-          recoveryActionHandler={async (action: CallErrorRecoveryAction) => {
-            await recoveryActionHandler(action);
+          recoveryActionHandler={(action: CallErrorRecoveryAction) => {
             resetError();
+            recoveryActionHandler(action);
           }}
         />
       );

src/room/GroupCallView.test.tsx

@@ -12,14 +12,10 @@ import {
   onTestFinished,
   test,
   vi,
-  vitest,
 } from "vitest";
-import { render, waitFor, screen, act } from "@testing-library/react";
+import { render, waitFor, screen } from "@testing-library/react";
 import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
-import {
-  MatrixRTCSessionEvent,
-  type MatrixRTCSession,
-} from "matrix-js-sdk/lib/matrixrtc";
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { BrowserRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
@@ -98,15 +94,13 @@ beforeEach(() => {
   playSound = vi.fn();
   (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
     playSound,
-    playSoundLooping: vi.fn(),
-    soundDuration: {},
   });
   // A trivial implementation of Active call to ensure we are testing GroupCallView exclusively here.
   (ActiveCall as MockedFunction<typeof ActiveCall>).mockImplementation(
     ({ onLeave }) => {
       return (
         <div>
-          <button onClick={() => onLeave("user")}>Leave</button>
+          <button onClick={() => onLeave()}>Leave</button>
         </div>
       );
     },
@@ -212,8 +206,6 @@ test("GroupCallView plays a leave sound synchronously in widget mode", async ()
     );
   (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
     playSound,
-    playSoundLooping: vitest.fn(),
-    soundDuration: {},
   });
 
   const { getByText, rtcSession } = createGroupCallView(
@@ -266,19 +258,3 @@ test("GroupCallView shows errors that occur during joining", async () => {
   await user.click(screen.getByRole("button", { name: "Join call" }));
   screen.getByText("Call is not supported");
 });
-
-test("user can reconnect after a membership manager error", async () => {
-  const user = userEvent.setup();
-  const { rtcSession } = createGroupCallView(null, true);
-  await act(() =>
-    rtcSession.emit(MatrixRTCSessionEvent.MembershipManagerError, undefined),
-  );
-  // XXX: Wrapping the following click in act() shouldn't be necessary (the
-  // async state update should be processed automatically by the waitFor call),
-  // and yet here we are.
-  await act(async () =>
-    user.click(screen.getByRole("button", { name: "Reconnect" })),
-  );
-  // In-call controls should be visible again
-  await waitFor(() => screen.getByRole("button", { name: "Leave" }));
-});

src/room/GroupCallView.tsx

@@ -53,10 +53,7 @@ import { InviteModal } from "./InviteModal";
 import { HeaderStyle, type UrlParams, useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useAudioContext } from "../useAudioContext";
-import {
-  callEventAudioSounds,
-  type CallEventSounds,
-} from "./CallEventAudioRenderer";
+import { callEventAudioSounds } from "./CallEventAudioRenderer";
 import { useLatest } from "../useLatest";
 import { usePageTitle } from "../usePageTitle";
 import {
@@ -320,11 +317,8 @@ export const GroupCallView: FC<Props> = ({
   const navigate = useNavigate();
 
   const onLeave = useCallback(
-    (
-      cause: "user" | "error" = "user",
-      playSound: CallEventSounds = "left",
-    ): void => {
-      const audioPromise = leaveSoundContext.current?.playSound(playSound);
+    (cause: "user" | "error" = "user"): void => {
+      const audioPromise = leaveSoundContext.current?.playSound("left");
       // In embedded/widget mode the iFrame will be killed right after the call ended prohibiting the posthog event from getting sent,
       // therefore we want the event to be sent instantly without getting queued/batched.
       const sendInstantly = !!widget;
@@ -503,11 +497,10 @@ export const GroupCallView: FC<Props> = ({
   return (
     <GroupCallErrorBoundary
       widget={widget}
-      recoveryActionHandler={async (action) => {
-        setExternalError(null);
+      recoveryActionHandler={(action) => {
         if (action == "reconnect") {
           setLeft(false);
-          await enterRTCSessionOrError(rtcSession).catch((e) => {
+          enterRTCSessionOrError(rtcSession).catch((e) => {
             logger.error("Error re-entering RTC session", e);
           });
         }

src/room/InCallView.test.tsx

@@ -17,7 +17,7 @@ import { act, render, type RenderResult } from "@testing-library/react";
 import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
-import { type LocalParticipant } from "livekit-client";
+import { ConnectionState, type LocalParticipant } from "livekit-client";
 import { of } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -180,6 +180,7 @@ function createInCallView(): RenderResult & {
                 onLeave={function (): void {
                   throw new Error("Function not implemented.");
                 }}
+                connState={ConnectionState.Connected}
                 onShareClick={null}
               />
             </RoomContext>

src/room/InCallView.tsx

@@ -25,11 +25,7 @@ import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
 import { BehaviorSubject, map } from "rxjs";
-import {
-  useObservable,
-  useObservableEagerState,
-  useSubscription,
-} from "observable-hooks";
+import { useObservable, useSubscription } from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
 import {
@@ -54,7 +50,6 @@ import { type HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
-import overlayStyles from "../Overlay.module.css";
 import { GridTile } from "../tile/GridTile";
 import { type OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -67,6 +62,7 @@ import { type MuteStates } from "./MuteStates";
 import { type MatrixInfo } from "./VideoPreview";
 import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
+import { type ECConnectionState } from "../livekit/useECConnectionState";
 import { useOpenIDSFU } from "../livekit/openIDSFU";
 import {
   CallViewModel,
@@ -98,10 +94,7 @@ import {
 } from "../reactions/useReactionsSender";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { ReactionsOverlay } from "./ReactionsOverlay";
-import {
-  CallEventAudioRenderer,
-  type CallEventSounds,
-} from "./CallEventAudioRenderer";
+import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
 import {
   debugTileLayout as debugTileLayoutSetting,
   useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
@@ -119,12 +112,6 @@ import { EarpieceOverlay } from "./EarpieceOverlay.tsx";
 import { useAppBarHidden, useAppBarSecondaryButton } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
 import { Toast } from "../Toast.tsx";
-import { Avatar, Size as AvatarSize } from "../Avatar";
-import waitingStyles from "./WaitingForJoin.module.css";
-import { prefetchSounds } from "../soundUtils";
-import { useAudioContext } from "../useAudioContext";
-import ringtoneMp3 from "../sound/ringtone.mp3?url";
-import ringtoneOgg from "../sound/ringtone.ogg?url";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -215,7 +202,12 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   return (
     <RoomContext value={livekitRoom}>
       <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
-        <InCallView {...props} vm={vm} livekitRoom={livekitRoom} />
+        <InCallView
+          {...props}
+          vm={vm}
+          livekitRoom={livekitRoom}
+          connState={connState}
+        />
       </ReactionsSenderProvider>
     </RoomContext>
   );
@@ -230,9 +222,10 @@ export interface InCallViewProps {
   livekitRoom: LivekitRoom;
   muteStates: MuteStates;
   /** Function to call when the user explicitly ends the call */
-  onLeave: (cause: "user", soundFile?: CallEventSounds) => void;
+  onLeave: () => void;
   header: HeaderStyle;
   otelGroupCallMembership?: OTelGroupCallMembership;
+  connState: ECConnectionState;
   onShareClick: (() => void) | null;
 }
 
@@ -246,6 +239,7 @@ export const InCallView: FC<InCallViewProps> = ({
   muteStates,
   onLeave,
   header: headerStyle,
+  connState,
   onShareClick,
 }) => {
   const { t } = useTranslation();
@@ -253,11 +247,10 @@ export const InCallView: FC<InCallViewProps> = ({
     useReactionsSender();
 
   useWakeLock();
-  const connectionState = useObservableEagerState(vm.livekitConnectionState$);
 
   // annoyingly we don't get the disconnection reason this way,
   // only by listening for the emitted event
-  if (connectionState === ConnectionState.Disconnected)
+  if (connState === ConnectionState.Disconnected)
     throw new ConnectionLostError();
 
   const containerRef1 = useRef<HTMLDivElement | null>(null);
@@ -272,21 +265,6 @@ export const InCallView: FC<InCallViewProps> = ({
   });
 
   const muteAllAudio = useBehavior(muteAllAudio$);
-  // Call pickup state and display names are needed for waiting overlay/sounds
-  const callPickupState = useBehavior(vm.callPickupState$);
-
-  // Preload a waiting and decline sounds
-  const pickupPhaseSoundCache = useInitial(async () => {
-    return prefetchSounds({
-      waiting: { mp3: ringtoneMp3, ogg: ringtoneOgg },
-    });
-  });
-
-  const pickupPhaseAudio = useAudioContext({
-    sounds: pickupPhaseSoundCache,
-    latencyHint: "interactive",
-    muted: muteAllAudio,
-  });
 
   // This seems like it might be enough logic to use move it into the call view model?
   const [didFallbackToRoomKey, setDidFallbackToRoomKey] = useState(false);
@@ -348,90 +326,7 @@ export const InCallView: FC<InCallViewProps> = ({
   const showFooter = useBehavior(vm.showFooter$);
   const earpieceMode = useBehavior(vm.earpieceMode$);
   const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
-  useSubscription(vm.autoLeave$, () => onLeave("user"));
-
-  // We need to set the proper timings on the animation based upon the sound length.
-  const ringDuration = pickupPhaseAudio?.soundDuration["waiting"] ?? 1;
-  useEffect((): (() => void) => {
-    // The CSS animation includes the delay, so we must double the length of the sound.
-    window.document.body.style.setProperty(
-      "--call-ring-duration-s",
-      `${ringDuration * 2}s`,
-    );
-    window.document.body.style.setProperty(
-      "--call-ring-delay-s",
-      `${ringDuration}s`,
-    );
-    // Remove properties when we unload.
-    return () => {
-      window.document.body.style.removeProperty("--call-ring-duration-s");
-      window.document.body.style.removeProperty("--call-ring-delay-s");
-    };
-  }, [pickupPhaseAudio?.soundDuration, ringDuration]);
-
-  // When we enter timeout or decline we will leave the call.
-  useEffect((): void | (() => void) => {
-    if (callPickupState === "timeout") {
-      onLeave("user", "timeout");
-    }
-    if (callPickupState === "decline") {
-      onLeave("user", "decline");
-    }
-  }, [callPickupState, onLeave, pickupPhaseAudio]);
-
-  // When waiting for pickup, loop a waiting sound
-  useEffect((): void | (() => void) => {
-    if (callPickupState !== "ringing" || !pickupPhaseAudio) return;
-    const endSound = pickupPhaseAudio.playSoundLooping("waiting", ringDuration);
-    return () => {
-      void endSound().catch((e) => {
-        logger.error("Failed to stop ringing sound", e);
-      });
-    };
-  }, [callPickupState, pickupPhaseAudio, ringDuration]);
-
-  // Waiting UI overlay
-  const waitingOverlay: JSX.Element | null = useMemo(() => {
-    // No overlay if not in ringing state
-    if (callPickupState !== "ringing") return null;
-
-    // Use room state for other participants data (the one that we likely want to reach)
-    const roomOthers = [
-      ...matrixRoom.getMembersWithMembership("join"),
-      ...matrixRoom.getMembersWithMembership("invite"),
-    ].filter((m) => m.userId !== client.getUserId());
-    // Yield if there are not other members in the room.
-    if (roomOthers.length === 0) return null;
-
-    const otherMember = roomOthers.length > 0 ? roomOthers[0] : undefined;
-    const isOneOnOne = roomOthers.length === 1 && otherMember;
-    const text = isOneOnOne
-      ? `Waiting for ${otherMember.name ?? otherMember.userId} to join…`
-      : "Waiting for other participants…";
-    const avatarMxc = isOneOnOne
-      ? (otherMember.getMxcAvatarUrl?.() ?? undefined)
-      : (matrixRoom.getMxcAvatarUrl() ?? undefined);
-
-    return (
-      <div className={classNames(overlayStyles.bg, waitingStyles.overlay)}>
-        <div
-          className={classNames(overlayStyles.content, waitingStyles.content)}
-        >
-          <div className={waitingStyles.pulse}>
-            <Avatar
-              id={isOneOnOne ? otherMember.userId : matrixRoom.roomId}
-              name={isOneOnOne ? otherMember.name : matrixRoom.name}
-              src={avatarMxc}
-              size={AvatarSize.XL}
-            />
-          </div>
-          <Text size="md" className={waitingStyles.text}>
-            {text}
-          </Text>
-        </div>
-      </div>
-    );
-  }, [callPickupState, client, matrixRoom]);
+  useSubscription(vm.autoLeave$, onLeave);
 
   // Ideally we could detect taps by listening for click events and checking
   // that the pointerType of the event is "touch", but this isn't yet supported
@@ -828,7 +723,7 @@ export const InCallView: FC<InCallViewProps> = ({
     <EndCallButton
       key="end_call"
       onClick={function (): void {
-        onLeave("user");
+        onLeave();
       }}
       onTouchEnd={onControlsTouchEnd}
       data-testid="incall_leave"
@@ -911,7 +806,6 @@ export const InCallView: FC<InCallViewProps> = ({
         onBackToVideoPressed={audioOutputSwitcher?.switch}
       />
       <ReactionsOverlay vm={vm} />
-      {waitingOverlay}
       {footer}
       {layout.type !== "pip" && (
         <>

src/room/ReactionAudioRenderer.test.tsx

@@ -69,8 +69,6 @@ beforeEach(() => {
   playSound = vitest.fn();
   (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
     playSound,
-    playSoundLooping: vitest.fn(),
-    soundDuration: {},
   });
 });
 

src/room/WaitingForJoin.module.css

@@ -1,61 +0,0 @@
-.overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-}
-
-.pulse {
-  position: relative;
-  height: 90px;
-}
-
-.pulse::before {
-  content: "";
-  position: absolute;
-  inset: -12px;
-  border-radius: 9999px;
-  border: 12px solid rgba(255, 255, 255, 0.6);
-  animation: pulse var(--call-ring-duration-s) ease-out infinite;
-  animation-delay: 1s;
-  opacity: 0;
-}
-
-.text {
-  color: var(--cpd-color-text-on-solid-primary);
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(0.95);
-    opacity: 0.7;
-    transform: scale(0);
-    opacity: 1;
-  }
-  35% {
-    transform: scale(1.15);
-    opacity: 0.15;
-  }
-  50% {
-    transform: scale(1.2);
-    opacity: 0;
-  }
-  50.01% {
-    transform: scale(0);
-  }
-  85% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(0);
-  }
-}

src/state/CallViewModel.test.ts

@@ -1291,51 +1291,6 @@ describe("waitForCallPickup$", () => {
     });
   });
 
-  test("ringing -> unknown if we get disconnected", () => {
-    withTestScheduler(({ behavior, schedule, expectObservable }) => {
-      const connectionState$ = new BehaviorSubject(ConnectionState.Connected);
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      withCallViewModel(
-        {
-          remoteParticipants$: behavior("a 19ms b", {
-            a: [],
-            b: [aliceParticipant],
-          }),
-          rtcMembers$: behavior("a 19ms b", {
-            a: [localRtcMember],
-            b: [localRtcMember, aliceRtcMember],
-          }),
-          connectionState$,
-        },
-        (vm, rtcSession) => {
-          // Notify at 5ms so we enter ringing, then get disconnected 5ms later
-          schedule("          5ms r 5ms d", {
-            r: () => {
-              rtcSession.emit(
-                MatrixRTCSessionEvent.DidSendCallNotification,
-                mockRingEvent("$notif2", 100),
-                mockLegacyRingEvent,
-              );
-            },
-            d: () => {
-              connectionState$.next(ConnectionState.Disconnected);
-            },
-          });
-
-          expectObservable(vm.callPickupState$).toBe("a 4ms b 5ms c", {
-            a: "unknown",
-            b: "ringing",
-            c: "unknown",
-          });
-        },
-        {
-          waitForCallPickup: true,
-          encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-        },
-      );
-    });
-  });
-
   test("success when someone joins before we notify", () => {
     withTestScheduler(({ behavior, schedule, expectObservable }) => {
       // Join at 10ms, notify later at 20ms (state should stay success)

src/state/CallViewModel.ts

@@ -49,7 +49,6 @@ import {
   race,
   scan,
   skip,
-  skipWhile,
   startWith,
   switchAll,
   switchMap,
@@ -854,6 +853,17 @@ export class CallViewModel extends ViewModel {
     throttleTime(THROTTLE_SOUND_EFFECT_MS),
   );
 
+  public readonly leaveSoundEffect$ = this.userMedia$.pipe(
+    pairwise(),
+    filter(
+      ([prev, current]) =>
+        current.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND &&
+        current.length < prev.length,
+    ),
+    map(() => {}),
+    throttleTime(THROTTLE_SOUND_EFFECT_MS),
+  );
+
   /**
    * The number of participants currently in the call.
    *
@@ -947,33 +957,23 @@ export class CallViewModel extends ViewModel {
    * The current call pickup state of the call.
    *  - "unknown": The client has not yet sent the notification event. We don't know if it will because it first needs to send its own membership.
    *     Then we can conclude if we were the first one to join or not.
-   *     This may also be set if we are disconnected.
    *  - "ringing": The call is ringing on other devices in this room (This client should give audiovisual feedback that this is happening).
    *  - "timeout": No-one picked up in the defined time this call should be ringing on others devices.
    *     The call failed. If desired this can be used as a trigger to exit the call.
    *  - "success": Someone else joined. The call is in a normal state. No audiovisual feedback.
    *  - null: EC is configured to never show any waiting for answer state.
    */
-  public readonly callPickupState$: Behavior<
-    "unknown" | "ringing" | "timeout" | "decline" | "success" | null
-  > = this.options.waitForCallPickup
+  public readonly callPickupState$ = this.options.waitForCallPickup
     ? this.scope.behavior<
         "unknown" | "ringing" | "timeout" | "decline" | "success"
       >(
-        combineLatest([
-          this.livekitConnectionState$,
-          this.someoneElseJoined$,
-        ]).pipe(
-          switchMap(([livekitConnectionState, someoneElseJoined]) => {
-            if (livekitConnectionState === ConnectionState.Disconnected) {
-              // Do not ring until we're connected.
-              return of("unknown" as const);
-            } else if (someoneElseJoined) {
-              return of("success" as const);
-            }
-            // Show the ringing state of the most recent ringing attempt.
-            return this.ring$.pipe(switchAll());
-          }),
+        this.someoneElseJoined$.pipe(
+          switchMap((someoneElseJoined) =>
+            someoneElseJoined
+              ? of("success" as const)
+              : // Show the ringing state of the most recent ringing attempt.
+                this.ring$.pipe(switchAll()),
+          ),
           // The state starts as 'unknown' because we don't know if the RTC
           // session will actually send a notify event yet. It will only be
           // known once we send our own membership and see that we were the
@@ -983,24 +983,6 @@ export class CallViewModel extends ViewModel {
       )
     : constant(null);
 
-  public readonly leaveSoundEffect$ = combineLatest([
-    this.callPickupState$,
-    this.userMedia$,
-  ]).pipe(
-    // Until the call is successful, do not play a leave sound.
-    // If callPickupState$ is null, then we always play the sound as it will not conflict with a decline sound.
-    skipWhile(([c]) => c !== null && c !== "success"),
-    map(([, userMedia]) => userMedia),
-    pairwise(),
-    filter(
-      ([prev, current]) =>
-        current.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND &&
-        current.length < prev.length,
-    ),
-    map(() => {}),
-    throttleTime(THROTTLE_SOUND_EFFECT_MS),
-  );
-
   /**
    * List of MediaItems that we want to display, that are of type ScreenShare
    */
@@ -1690,7 +1672,7 @@ export class CallViewModel extends ViewModel {
     private readonly livekitRoom: LivekitRoom,
     private readonly mediaDevices: MediaDevices,
     private readonly options: CallViewModelOptions,
-    public readonly livekitConnectionState$: Observable<ECConnectionState>,
+    private readonly livekitConnectionState$: Observable<ECConnectionState>,
     private readonly handsRaisedSubject$: Observable<
       Record<string, RaisedHandInfo>
     >,

src/useAudioContext.tsx

@@ -32,8 +32,6 @@ async function playSound(
   buffer: AudioBuffer,
   volume: number,
   stereoPan: number,
-  delayS = 0,
-  abort?: AbortController,
 ): Promise<void> {
   const gain = ctx.createGain();
   gain.gain.setValueAtTime(volume, 0);
@@ -41,62 +39,13 @@ async function playSound(
   pan.pan.setValueAtTime(stereoPan, 0);
   const src = ctx.createBufferSource();
   src.buffer = buffer;
-  abort?.signal.addEventListener("abort", () => {
-    src.disconnect();
-  });
-  const p = new Promise<void>((r) => src.addEventListener("ended", () => r()));
   src.connect(gain).connect(pan).connect(ctx.destination);
+  const p = new Promise<void>((r) => src.addEventListener("ended", () => r()));
   controls.setPlaybackStarted();
-  src.start(ctx.currentTime + delayS);
+  src.start();
   return p;
 }
 
-/**
- * Play a sound though a given AudioContext, looping until stopped. Will take
- * care of connecting the correct buffer and gating
- * through gain.
- * @param volume The volume to play at.
- * @param ctx The context to play through.
- * @param buffer The buffer to play.
- * @returns A function used to end the sound. This function will return a promise when the sound has stopped.
- */
-function playSoundLooping(
-  ctx: AudioContext,
-  buffer: AudioBuffer,
-  volume: number,
-  stereoPan: number,
-  delayS?: number,
-): () => Promise<void> {
-  if (delayS === 0) {
-    throw Error("Looping sounds must have a delay");
-  }
-
-  // Our audio loop
-  let lastSoundPromise: Promise<void>;
-  let nextSoundPromise: Promise<void>;
-  let ac: AbortController | undefined;
-  void (async (): Promise<void> => {
-    ac = new AbortController();
-    // Play a sound immediately
-    lastSoundPromise = Promise.resolve();
-    do {
-      // Queue up the next sound.
-      nextSoundPromise = playSound(ctx, buffer, volume, stereoPan, delayS, ac);
-      // Await the previous sound.
-      await lastSoundPromise;
-      // Swap the promises over, and loop round to play the next sound.
-      lastSoundPromise = nextSoundPromise;
-    } while (!ac.signal.aborted);
-  })();
-
-  return async () => {
-    ac?.abort();
-    // Wait for sounds to finish.
-    await lastSoundPromise;
-    await nextSoundPromise;
-  };
-}
-
 interface Props<S extends string> {
   /**
    * The sounds to play. If no sounds should be played then
@@ -108,13 +57,8 @@ interface Props<S extends string> {
   muted?: boolean;
 }
 
-interface UseAudioContext<S extends string> {
+interface UseAudioContext<S> {
   playSound(soundName: S): Promise<void>;
-  playSoundLooping(soundName: S, delayS?: number): () => Promise<void>;
-  /**
-   * Map of sound name to duration in seconds.
-   */
-  soundDuration: Record<string, number>;
 }
 
 /**
@@ -202,23 +146,5 @@ export function useAudioContext<S extends string>(
         earpiecePan,
       );
     },
-    playSoundLooping: (name, delayS: number): (() => Promise<void>) => {
-      if (!audioBuffers[name]) {
-        throw Error(`Tried to play a sound that wasn't buffered (${name})`);
-      }
-      return playSoundLooping(
-        audioContext,
-        audioBuffers[name],
-        soundEffectVolume * earpieceVolume,
-        earpiecePan,
-        delayS,
-      );
-    },
-    soundDuration: Object.fromEntries(
-      Object.entries(audioBuffers).map(([k, v]) => [
-        k,
-        (v as AudioBuffer).duration,
-      ]),
-    ),
   };
 }

src/utils/test-viewmodel.ts

@@ -22,10 +22,7 @@ import {
 } from "matrix-js-sdk";
 
 import { E2eeType } from "../e2ee/e2eeType";
-import {
-  CallViewModel,
-  type CallViewModelOptions,
-} from "../state/CallViewModel";
+import { CallViewModel } from "../state/CallViewModel";
 import {
   mockLivekitRoom,
   mockMatrixRoom,
@@ -125,7 +122,6 @@ export function getBasicRTCSession(
 export function getBasicCallViewModelEnvironment(
   members: RoomMember[],
   initialRtcMemberships: CallMembership[] = [localRtcMember, aliceRtcMember],
-  callViewModelOptions: Partial<CallViewModelOptions> = {},
 ): {
   vm: CallViewModel;
   rtcMemberships$: BehaviorSubject<CallMembership[]>;
@@ -152,7 +148,6 @@ export function getBasicCallViewModelEnvironment(
     mockMediaDevices({}),
     {
       encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-      ...callViewModelOptions,
     },
     of(ConnectionState.Connected),
     handRaisedSubject$,

src/widget.ts

@@ -116,7 +116,6 @@ export const widget = ((): WidgetHelpers | null => {
         EventType.Reaction,
         EventType.RoomRedaction,
         ElementCallReactionEventType,
-        EventType.RTCDecline,
       ];
 
       const sendState = [