feat: PiP mute indicator, export history, activity log, unverified device warning

- PiP call window: mute overlay using MutationObserver on EC iframe's
  [data-testid="incall_mute"] button (data-kind="primary" = muted),
  same pattern as screenshare detection in CallControl.ts

- P2-4 Export Room History: new tab in room settings — Plain Text / JSON /
  HTML formats, optional date range, progress counter, paginated via
  paginateEventTimeline, blob download; E2EE-aware (skips failed decryptions)

- P2-6 Room Activity Log: new tab in room settings — filterable log of
  m.room.member, m.room.power_levels, m.room.name/topic/avatar/server_acl
  events with human-readable descriptions, relative timestamps, Load More
  pagination

- P2-10 Unverified Device Warning: warnOnUnverifiedDevices setting (default
  off); Warning.Container banner above composer in encrypted rooms with
  unverified devices; toggle in Settings → General → Privacy

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-03 22:13:22 -04:00
parent 6d0b778755
commit ee717e8361
10 changed files with 1030 additions and 1 deletions
+33
View File
@@ -41,6 +41,7 @@ import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
import { useMatrixClient } from '../hooks/useMatrixClient';
import CallSound from '../../../public/sound/call.ogg';
import { useCallMembersChange, useCallSession } from '../hooks/useCall';
import { useRemoteAllMuted } from '../hooks/useCallSpeakers';
import { useRoomAvatar, useRoomName } from '../hooks/useRoomMeta';
import { mDirectAtom } from '../state/mDirectList';
import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
@@ -402,6 +403,37 @@ function CallUtils({ embed }: { embed: CallEmbed }) {
return null;
}
/** Shown inside the PiP window when the local microphone is muted. */
function PipMuteOverlay({ callEmbed }: { callEmbed: CallEmbed }) {
const allMuted = useRemoteAllMuted(callEmbed);
if (!allMuted) return null;
return (
<div
aria-label="Microphone muted"
style={{
position: 'absolute',
bottom: '8px',
left: '8px',
zIndex: 3,
background: 'rgba(0,0,0,0.60)',
backdropFilter: 'blur(4px)',
borderRadius: '6px',
padding: '3px 7px',
display: 'flex',
alignItems: 'center',
gap: '4px',
pointerEvents: 'none',
color: color.Critical.Main,
fontSize: '13px',
lineHeight: 1,
userSelect: 'none',
}}
>
<Icon size="100" src={Icons.MicMute} filled />
</div>
);
}
type CallEmbedProviderProps = {
children?: ReactNode;
};
@@ -803,6 +835,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
Return to call
</div>
</div>
<PipMuteOverlay callEmbed={callEmbed} />
{(['se', 'sw', 'ne', 'nw'] as Corner[]).map((corner) => {
const s = corner.includes('s');
const e2 = corner.includes('e');