chore(call): pin element-call-embedded 0.25.0-lotus.24 (frame audio outputs, #310)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

package-lock.json

@@ -81,7 +81,7 @@
       },
       "devDependencies": {
         "@axe-core/playwright": "4.13.0",
-        "@lotusguild/element-call-embedded": "0.25.0-lotus.25",
+        "@lotusguild/element-call-embedded": "0.25.0-lotus.24",
         "@playwright/test": "1.63.0",
         "@rollup/plugin-inject": "5.0.5",
         "@rollup/plugin-wasm": "6.2.2",
@@ -2695,9 +2695,9 @@
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
     "node_modules/@lotusguild/element-call-embedded": {
-      "version": "0.25.0-lotus.25",
-      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.25/element-call-embedded-0.25.0-lotus.25.tgz",
-      "integrity": "sha512-Vvw6B+QoG0/qFJcBzhlAbE+vnk83DikpeeF2xbygpoHfmG9r1H/mS47V91jAMH2vmNbGiALwFlLbJjEET43A2g==",
+      "version": "0.25.0-lotus.24",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.24/element-call-embedded-0.25.0-lotus.24.tgz",
+      "integrity": "sha512-6cMjJ0WCGvZJridoF0YslvF3giYar/uLgc/JAlgLqBg+Irv+Mm/xWuC2bme60BT+f/wmEX30gr7WDeIc4JUL7w==",
       "dev": true
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {

package.json

@@ -108,7 +108,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",
-    "@lotusguild/element-call-embedded": "0.25.0-lotus.25",
+    "@lotusguild/element-call-embedded": "0.25.0-lotus.24",
     "@playwright/test": "1.63.0",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",

src/app/components/CallEmbedProvider.tsx

@@ -86,7 +86,6 @@ import { CallAvatarAnimation } from '../styles/Animations.css';
 import { webRTCSupported } from '../utils/rtc';
 import { CallsUnavailableMessage } from '../features/call/CallsUnavailable';
 import { zIndices } from '../styles/zIndex';
-import { useReconnectWhenSynced } from '../hooks/useCallError';
 import { useDenoiseNotices } from '../hooks/useDenoiseNotices';
 
 const PIP_MIN_W = 200;
@@ -815,7 +814,6 @@ function CallUtils({ embed, joined }: { embed: CallEmbed; joined: boolean }) {
   useCallPolicyRevokedToast(embed, joined);
   useCallEndedToast(embed);
   useScreenshareNotices(embed);
-  useReconnectWhenSynced(embed.control);
   useDenoiseNotices(embed);
   // [Gitea #43] The in-frame screenshare button follows the same room policy
   // as the host bar's (hidden where the server would refuse the share).

src/app/features/call-status/AudioOutputButton.tsx

@@ -16,6 +16,7 @@ import {
   toRem,
 } from 'folds';
 import { CallEmbed } from '../../plugins/call';
+import { AUDIO_OUTPUT_STATE } from '../../plugins/call/CallControl';
 import { MobileTouchTarget } from '../../styles/mobile.css';
 import { stopPropagation } from '../../utils/keyboard';
 
@@ -39,6 +40,21 @@ export function AudioOutputButton({ embed, disabled }: { embed: CallEmbed; disab
   const [devices, setDevices] = useState<OutputDevice[]>([]);
   const [selected, setSelected] = useState<string | undefined>(embed.control.audioOutputId);
 
+  // [Gitea #310] Prefer the fork's list: its ids are the ones valid inside
+  // the call iframe. Older forks don't report one; fall back to our own.
+  const [forkDevices, setForkDevices] = useState(embed.control.audioOutputs);
+  useEffect(() => {
+    const onState = () => {
+      setForkDevices(embed.control.audioOutputs);
+      setSelected(embed.control.audioOutputId);
+    };
+    onState();
+    embed.control.on(AUDIO_OUTPUT_STATE, onState);
+    return () => {
+      embed.control.off(AUDIO_OUTPUT_STATE, onState);
+    };
+  }, [embed]);
+
   const refresh = useCallback(async () => {
     try {
       const all = await navigator.mediaDevices.enumerateDevices();
@@ -53,11 +69,13 @@ export function AudioOutputButton({ embed, disabled }: { embed: CallEmbed; disab
   }, []);
 
   useEffect(() => {
-    if (!anchor) return undefined;
+    if (!anchor || forkDevices) return undefined;
     refresh();
     navigator.mediaDevices.addEventListener('devicechange', refresh);
     return () => navigator.mediaDevices.removeEventListener('devicechange', refresh);
-  }, [anchor, refresh]);
+  }, [anchor, refresh, forkDevices]);
+
+  const shown = forkDevices ?? devices;
 
   const choose = (id: string) => {
     embed.control.setAudioOutput(id);
@@ -90,13 +108,14 @@ export function AudioOutputButton({ embed, disabled }: { embed: CallEmbed; disab
             aria-label="Audio output"
           >
             <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-              {devices.length === 0 && (
+              {shown.length === 0 && (
                 <Text size="T200" priority="300" style={{ padding: config.space.S200 }}>
                   No audio outputs found.
                 </Text>
               )}
-              {devices.map((d) => {
-                const isSelected = selected ? d.id === selected : d.id === 'default';
+              {shown.map((d) => {
+                const isSelected =
+                  selected !== undefined ? d.id === selected : d.id === 'default' || d.id === '';
                 return (
                   <MenuItem
                     key={d.id}

src/app/features/call-status/CallStatus.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Box, Button, Spinner, Text, color } from 'folds';
+import { Box, Spinner, Text, color } from 'folds';
 import { useAtomValue } from 'jotai';
 import classNames from 'classnames';
 import { LiveChip } from './LiveChip';
@@ -18,7 +18,6 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { MemberSpeaking } from './MemberSpeaking';
 import { clockSkewAtom } from '../../state/clockSkew';
 import { describeSkewVsServer } from '../../utils/clockSkew';
-import { useCallError } from '../../hooks/useCallError';
 
 type CallStatusProps = {
   callEmbed: CallEmbed;
@@ -43,8 +42,6 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
   const clockSkew = useAtomValue(clockSkewAtom);
 
   const compact = screenSize === ScreenSize.Mobile;
-  // [Gitea #318] The call dropped ("Connection lost" in the frame).
-  const callError = useCallError(callEmbed.control);
 
   const memberVisible = callJoined && callMembers.length > 0;
 
@@ -68,25 +65,6 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
           {!compact && (
             <>
               <CallRoomName room={room} />
-              {callError && (
-                <>
-                  <StatusDivider />
-                  <Text size="T200" truncate role="alert" style={{ color: color.Critical.Main }}>
-                    Call disconnected
-                  </Text>
-                  {callError.recoverable && (
-                    <Button
-                      size="300"
-                      radii="300"
-                      variant="Critical"
-                      fill="Soft"
-                      onClick={() => callEmbed.control.reconnect()}
-                    >
-                      <Text size="B300">Reconnect</Text>
-                    </Button>
-                  )}
-                </>
-              )}
               {clockSkew.warning && clockSkew.skewMs !== null && (
                 <>
                   <StatusDivider />
@@ -124,19 +102,8 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
       {memberVisible && !compact && <StatusDivider />}
       <Box shrink="No" alignItems="Center" gap="Inherit">
         {compact && (
-          <Box grow="Yes" alignItems="Center" gap="200">
+          <Box grow="Yes">
             <CallRoomName room={room} />
-            {callError?.recoverable && (
-              <Button
-                size="300"
-                radii="300"
-                variant="Critical"
-                fill="Soft"
-                onClick={() => callEmbed.control.reconnect()}
-              >
-                <Text size="B300">Reconnect</Text>
-              </Button>
-            )}
           </Box>
         )}
         <CallControl callJoined={callJoined} compact={compact} callEmbed={callEmbed} />

src/app/hooks/useCallError.ts

@@ -1,41 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { SyncState } from 'matrix-js-sdk';
-import { CALL_ERROR_CHANGED, CallControl } from '../plugins/call/CallControl';
-import { CallErrorState } from '../plugins/call/callError';
-import { useMatrixClient } from './useMatrixClient';
-import { useSyncState } from './useSyncState';
-
-/** [Gitea #318] The fork's current call error (null while the call is fine). */
-export function useCallError(control: CallControl): CallErrorState {
-  const [err, setErr] = useState(control.callError);
-  useEffect(() => {
-    const on = () => setErr(control.callError);
-    on();
-    control.on(CALL_ERROR_CHANGED, on);
-    return () => {
-      control.off(CALL_ERROR_CHANGED, on);
-    };
-  }, [control]);
-  return err;
-}
-
-/**
- * [Gitea #318] After a homeserver stall the call drops with "Connection
- * lost". Once sync is back, reconnect automatically (once per drop).
- */
-export function useReconnectWhenSynced(control: CallControl): void {
-  const mx = useMatrixClient();
-  const err = useCallError(control);
-  const tried = useRef<CallErrorState>(null);
-  useSyncState(
-    mx,
-    useCallback(
-      (state: SyncState | null) => {
-        if (state !== SyncState.Syncing || !err?.recoverable || tried.current === err) return;
-        tried.current = err;
-        control.reconnect();
-      },
-      [err, control],
-    ),
-  );
-}

src/app/plugins/call/CallControl.ts

@@ -3,7 +3,6 @@ import { EventEmitter } from 'events';
 import { CallControlState } from './CallControlState';
 import { ElementMediaStateDetail, ElementMediaStatePayload, ElementWidgetActions } from './types';
 import { canDelegateCapability } from './utils';
-import { CallErrorState, parseCallError } from './callError';
 
 export enum CallControlEvent {
   StateUpdate = 'state_update',
@@ -55,7 +54,26 @@ export function parseForkHotkeyReport(data: unknown): ForkHotkeyReport | null {
   };
 }
 
-export const CALL_ERROR_CHANGED = 'call_error_changed';
+export type AudioOutputOption = { id: string; label: string };
+export const AUDIO_OUTPUT_STATE = 'audio_output_state';
+
+/** Pure: parse the fork's `io.lotus.audio_output_state` (#310). */
+export function parseAudioOutputState(
+  data: unknown,
+): { deviceId?: string; available?: AudioOutputOption[] } | undefined {
+  if (typeof data !== 'object' || data === null) return undefined;
+  const { deviceId, available } = data as { deviceId?: unknown; available?: unknown };
+  const list = Array.isArray(available)
+    ? available.filter(
+        (o): o is AudioOutputOption =>
+          typeof o === 'object' &&
+          o !== null &&
+          typeof (o as AudioOutputOption).id === 'string' &&
+          typeof (o as AudioOutputOption).label === 'string',
+      )
+    : undefined;
+  return { deviceId: typeof deviceId === 'string' ? deviceId : undefined, available: list };
+}
 
 export class CallControl extends EventEmitter implements CallControlState {
   private state: CallControlState;
@@ -215,32 +233,30 @@ export class CallControl extends EventEmitter implements CallControlState {
     return this._audioOutputId;
   }
 
-  // [Gitea #318] The fork's error page ("Connection lost") is up; the host
-  // kept showing the call as joined with controls that did nothing.
-  private _callError: CallErrorState = null;
-
-  public get callError(): CallErrorState {
-    return this._callError;
-  }
-
-  /** The fork's `io.lotus.call_error` report. */
-  public onCallError(data: unknown) {
-    const next = parseCallError(data);
-    if (next === undefined) return;
-    this._callError = next;
-    this.emit(CALL_ERROR_CHANGED);
-  }
-
-  /** Press the fork's Reconnect / Try again. */
-  public reconnect(): void {
-    this.call.transport.send('io.lotus.reconnect', {}).catch(() => undefined);
-  }
-
   public setAudioOutput(deviceId: string): void {
     this._audioOutputId = deviceId;
     this.sendAudioOutput(deviceId);
   }
 
+  // [Gitea #310] deviceIds are hashed per frame/origin, so ids from the
+  // host's own enumerateDevices() mean nothing inside the call iframe. The
+  // fork reports its outputs (ids valid in the frame) and its effective
+  // selection; the call bar's menu uses those when present.
+  private _audioOutputs: AudioOutputOption[] | undefined;
+
+  public get audioOutputs(): AudioOutputOption[] | undefined {
+    return this._audioOutputs;
+  }
+
+  /** The fork's `io.lotus.audio_output_state` report. */
+  public onAudioOutputState(data: unknown) {
+    const report = parseAudioOutputState(data);
+    if (!report) return;
+    this._audioOutputs = report.available;
+    if (report.deviceId !== undefined) this._audioOutputId = report.deviceId;
+    this.emit(AUDIO_OUTPUT_STATE);
+  }
+
   private sendAudioOutput(deviceId: string): void {
     if (!this.joined) return;
     this.call.transport.send('io.lotus.set_audio_output', { deviceId }).catch(() => undefined);

src/app/plugins/call/CallEmbed.ts

@@ -453,10 +453,10 @@ export class CallEmbed {
         this.control.onControlsState((evt.detail as { data?: unknown } | undefined)?.data);
       }),
     );
-    // [Gitea #318] The fork's error page ("Connection lost") is up / cleared.
+    // [Gitea #310] The fork's own output list + selection (frame-valid ids).
     this.disposables.push(
-      this.listenAction('io.lotus.call_error', (evt) => {
-        this.control.onCallError((evt.detail as { data?: unknown } | undefined)?.data);
+      this.listenAction('io.lotus.audio_output_state', (evt) => {
+        this.control.onAudioOutputState((evt.detail as { data?: unknown } | undefined)?.data);
       }),
     );
     // [Gitea #43] PTT / deafen keys pressed while focus is inside the frame.

src/app/plugins/call/audioOutputState.test.ts

@@ -0,0 +1,24 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { parseAudioOutputState } from './CallControl';
+
+test('parseAudioOutputState: keeps valid options, tolerates garbage (#310)', () => {
+  assert.deepEqual(
+    parseAudioOutputState({
+      deviceId: 'f2',
+      available: [{ id: '', label: 'Default' }, { id: 'f2', label: 'Headset' }, { id: 3 }, null],
+    }),
+    {
+      deviceId: 'f2',
+      available: [
+        { id: '', label: 'Default' },
+        { id: 'f2', label: 'Headset' },
+      ],
+    },
+  );
+  assert.deepEqual(parseAudioOutputState({ deviceId: null }), {
+    deviceId: undefined,
+    available: undefined,
+  });
+  assert.equal(parseAudioOutputState('x'), undefined);
+});

src/app/plugins/call/callError.test.ts

@@ -1,17 +0,0 @@
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-import { parseCallError } from './callError';
-
-test('parseCallError (#318)', () => {
-  assert.deepEqual(parseCallError({ code: 'CONNECTION_LOST_ERROR', recoverable: true }), {
-    code: 'CONNECTION_LOST_ERROR',
-    recoverable: true,
-  });
-  assert.deepEqual(parseCallError({ code: 'E2EE_NOT_SUPPORTED' }), {
-    code: 'E2EE_NOT_SUPPORTED',
-    recoverable: false,
-  });
-  assert.equal(parseCallError({ code: null }), null);
-  assert.equal(parseCallError({}), undefined);
-  assert.equal(parseCallError('x'), undefined);
-});

src/app/plugins/call/callError.ts

@@ -1,14 +0,0 @@
-/**
- * [Gitea #318] The fork's `io.lotus.call_error`: its error page is showing
- * (`{ code, recoverable }`) or was cleared (`{ code: null }`).
- */
-export type CallErrorState = { code: string; recoverable: boolean } | null;
-
-/** Pure: parse a report; undefined for garbage (ignored). */
-export function parseCallError(data: unknown): CallErrorState | undefined {
-  if (typeof data !== 'object' || data === null) return undefined;
-  const { code, recoverable } = data as { code?: unknown; recoverable?: unknown };
-  if (code === null) return null;
-  if (typeof code !== 'string' || !code) return undefined;
-  return { code, recoverable: recoverable === true };
-}