Compare commits
9
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
378b40fabe | ||
|
|
02c852e194 | ||
|
|
6e6213a43b | ||
|
|
5379eb046d | ||
|
|
17ebddb159 | ||
|
|
7bd1c14a3c | ||
|
|
a58684958c | ||
|
|
3c3bb2e41c | ||
|
|
88446e8953 |
@@ -11,6 +11,7 @@ import { HS, PASSWORD, api, enc, ensureUser, hsReachable, uniq } from './localHs
|
||||
const AUTH = 'https://auth.fake.test';
|
||||
|
||||
type Fake = {
|
||||
prompts: (string | null)[];
|
||||
registered: number;
|
||||
tokenCalls: { grant: string; refresh?: string }[];
|
||||
revoked: string[];
|
||||
@@ -33,6 +34,7 @@ async function synapseToken(localpart: string, deviceId: string): Promise<string
|
||||
|
||||
async function fakeOAuth(context: BrowserContext, localpart: string): Promise<Fake> {
|
||||
const fake: Fake = {
|
||||
prompts: [],
|
||||
registered: 0,
|
||||
tokenCalls: [],
|
||||
revoked: [],
|
||||
@@ -73,6 +75,7 @@ async function fakeOAuth(context: BrowserContext, localpart: string): Promise<Fa
|
||||
response_modes_supported: ['query', 'fragment'],
|
||||
grant_types_supported: ['authorization_code', 'refresh_token'],
|
||||
code_challenge_methods_supported: ['S256'],
|
||||
prompt_values_supported: ['create'],
|
||||
},
|
||||
}),
|
||||
);
|
||||
@@ -107,6 +110,7 @@ async function fakeOAuth(context: BrowserContext, localpart: string): Promise<Fa
|
||||
const deviceId = /urn:matrix:client:device:(\S+)/.exec(
|
||||
url.searchParams.get('scope') ?? '',
|
||||
)?.[1];
|
||||
fake.prompts.push(url.searchParams.get('prompt'));
|
||||
expect(url.searchParams.get('response_mode')).toBe('query');
|
||||
expect(url.searchParams.get('code_challenge_method')).toBe('S256');
|
||||
const code = `code-${Date.now()}`;
|
||||
@@ -231,4 +235,26 @@ test.describe('OAuth sign-in on SDK 44', () => {
|
||||
expect(fake.revoked.sort()).toEqual([latest.accessToken, latest.refreshToken].sort());
|
||||
expect(await storedSession(page)).toBeNull();
|
||||
});
|
||||
|
||||
test('Register opens the auth server sign-up page (prompt=create)', async ({ context }) => {
|
||||
test.setTimeout(120_000);
|
||||
const user = await ensureUser(uniq('or'));
|
||||
const fake = await fakeOAuth(context, user.localpart);
|
||||
const page = await context.newPage();
|
||||
await page.goto(`/register/${enc(HS)}/`);
|
||||
// Native-OAuth server: no legacy registration form, just the auth server.
|
||||
await expect(page.getByLabel('Username', { exact: true })).toHaveCount(0);
|
||||
await page.getByRole('button', { name: /Continue with/ }).click();
|
||||
await page.waitForURL(/\/home/, { timeout: 60_000 });
|
||||
expect(fake.prompts).toEqual(['create']);
|
||||
});
|
||||
|
||||
test('Login sends no prompt', async ({ context }) => {
|
||||
test.setTimeout(120_000);
|
||||
const user = await ensureUser(uniq('ol'));
|
||||
const fake = await fakeOAuth(context, user.localpart);
|
||||
const page = await context.newPage();
|
||||
await oauthLogin(page);
|
||||
expect(fake.prompts).toEqual([null]);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
import fs from 'node:fs';
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { api, ensureUser, hsReachable, loginUI, uniq } from './localHs';
|
||||
|
||||
// [Gitea #114] Export / import "your data": a round trip through the file, the
|
||||
// merge summary, and the keep-mine / use-the-file's choice.
|
||||
const enc = encodeURIComponent;
|
||||
|
||||
test.describe('your data (#114)', () => {
|
||||
test.beforeAll(async () => {
|
||||
test.skip(!(await hsReachable()), 'local homeserver not running');
|
||||
});
|
||||
|
||||
test('export, change things, import merges with the chosen conflict rule', async ({ page }) => {
|
||||
test.setTimeout(150_000);
|
||||
const user = await ensureUser(uniq('yd'));
|
||||
const put = (type: string, content: unknown) =>
|
||||
api(
|
||||
'PUT',
|
||||
`/_matrix/client/v3/user/${enc(user.userId)}/account_data/${type}`,
|
||||
user.token,
|
||||
content,
|
||||
);
|
||||
const get = (type: string) =>
|
||||
api<Record<string, unknown>>(
|
||||
'GET',
|
||||
`/_matrix/client/v3/user/${enc(user.userId)}/account_data/${type}`,
|
||||
user.token,
|
||||
);
|
||||
const bm = (eventId: string) => ({ roomId: '!r:localhost', eventId, savedAt: 1 });
|
||||
await put('io.lotus.bookmarks', { bookmarks: [bm('$one'), bm('$two')] });
|
||||
await put('io.lotus.user_notes', { '@friend:localhost': 'met at the LAN party' });
|
||||
|
||||
await loginUI(page, user);
|
||||
await page
|
||||
.getByText('Connecting...')
|
||||
.first()
|
||||
.waitFor({ state: 'detached', timeout: 90_000 })
|
||||
.catch(() => undefined);
|
||||
const openGeneral = async () => {
|
||||
await page.getByRole('button', { name: 'User Settings' }).click();
|
||||
await page.getByRole('dialog').getByText('General', { exact: true }).first().click();
|
||||
await page
|
||||
.getByRole('dialog')
|
||||
.getByText('Your data', { exact: true })
|
||||
.scrollIntoViewIfNeeded();
|
||||
};
|
||||
await openGeneral();
|
||||
|
||||
// Export.
|
||||
const [download] = await Promise.all([
|
||||
page.waitForEvent('download'),
|
||||
page.getByRole('dialog').getByRole('button', { name: 'Export', exact: true }).click(),
|
||||
]);
|
||||
const path = await download.path();
|
||||
const file = JSON.parse(fs.readFileSync(path!, 'utf8'));
|
||||
expect(file.format).toBe('lotus-chat-data');
|
||||
expect(file.accountData['io.lotus.bookmarks'].bookmarks).toHaveLength(2);
|
||||
expect(file.local.settings).toBeTruthy();
|
||||
|
||||
// Lose a bookmark, change the note.
|
||||
await put('io.lotus.bookmarks', { bookmarks: [bm('$one')] });
|
||||
await put('io.lotus.user_notes', { '@friend:localhost': 'changed my mind' });
|
||||
await page.waitForTimeout(3000); // let sync deliver the new account data
|
||||
|
||||
const importFile = async () => {
|
||||
await page
|
||||
.locator('input[type="file"][aria-label="Lotus Chat data file"]')
|
||||
.setInputFiles(path!);
|
||||
await expect(page.getByRole('region', { name: 'Import summary' })).toBeVisible();
|
||||
};
|
||||
await importFile();
|
||||
const summary = page.getByRole('region', { name: 'Import summary' });
|
||||
await expect(summary).toContainText('Bookmarks: 1 new');
|
||||
await expect(summary).toContainText('Private notes about people: 1 differ');
|
||||
|
||||
// Keep mine: the bookmark comes back, the note stays as it is now.
|
||||
await summary.getByRole('button', { name: 'Import', exact: true }).click();
|
||||
await expect(page.getByText('Imported.')).toBeVisible({ timeout: 20_000 });
|
||||
expect(((await get('io.lotus.bookmarks')).bookmarks as unknown[]).length).toBe(2);
|
||||
expect((await get('io.lotus.user_notes'))['@friend:localhost']).toBe('changed my mind');
|
||||
|
||||
// Again, using the file's: the note goes back.
|
||||
await page.waitForTimeout(2000);
|
||||
await importFile();
|
||||
await summary.getByText("Use the file's").click();
|
||||
await summary.getByRole('button', { name: 'Import', exact: true }).click();
|
||||
await expect(page.getByText('Imported.')).toBeVisible({ timeout: 20_000 });
|
||||
expect((await get('io.lotus.user_notes'))['@friend:localhost']).toBe('met at the LAN party');
|
||||
|
||||
// Wrong files are refused with a plain message.
|
||||
fs.writeFileSync(`${path}.bad`, '{"format":"something-else"}');
|
||||
await page
|
||||
.locator('input[type="file"][aria-label="Lotus Chat data file"]')
|
||||
.setInputFiles(`${path}.bad`);
|
||||
await expect(page.getByText("This isn't a Lotus Chat data file.")).toBeVisible();
|
||||
});
|
||||
});
|
||||
Generated
+4
-4
@@ -81,7 +81,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "4.13.0",
|
||||
"@lotusguild/element-call-embedded": "0.28.0-lotus.1",
|
||||
"@lotusguild/element-call-embedded": "0.28.0-lotus.2",
|
||||
"@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.28.0-lotus.1",
|
||||
"resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.28.0-lotus.1/element-call-embedded-0.28.0-lotus.1.tgz",
|
||||
"integrity": "sha512-MRbrDv4D36q0a37WfPxuTxszcLDflx+ciMJM3W0UTxLApYK0mbMrFfAUo5yNhoQVUbVrcxI43N3M47zU4/ktAQ==",
|
||||
"version": "0.28.0-lotus.2",
|
||||
"resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.28.0-lotus.2/element-call-embedded-0.28.0-lotus.2.tgz",
|
||||
"integrity": "sha512-g3xaZ/i3RQ0mToWmjLi08HjSuKD3BpAllj9aEucPS8wh3Uwmz4HXa0tgF1hEN3dPrZR2BTWLQii5Mtfh4037vg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
|
||||
|
||||
+1
-1
@@ -108,7 +108,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "4.13.0",
|
||||
"@lotusguild/element-call-embedded": "0.28.0-lotus.1",
|
||||
"@lotusguild/element-call-embedded": "0.28.0-lotus.2",
|
||||
"@playwright/test": "1.63.0",
|
||||
"@rollup/plugin-inject": "5.0.5",
|
||||
"@rollup/plugin-wasm": "6.2.2",
|
||||
|
||||
@@ -23,7 +23,12 @@ export function AuthFlowsLoader({ fallback, error, children }: AuthFlowsLoaderPr
|
||||
|
||||
const [state, load] = useAsyncCallback(
|
||||
useCallback(async () => {
|
||||
const result = await Promise.allSettled([mx.loginFlows(), mx.registerRequest({})]);
|
||||
const result = await Promise.allSettled([
|
||||
mx.loginFlows(),
|
||||
mx.registerRequest({}),
|
||||
// Rejects when the server has no native OAuth: normal for most servers.
|
||||
mx.getAuthMetadata(),
|
||||
]);
|
||||
const loginFlows = promiseFulfilledResult(result[0]);
|
||||
const registerResp = promiseRejectedResult(result[1]) as MatrixError | undefined;
|
||||
let registerFlows: RegisterFlowsResponse = { status: RegisterFlowStatus.InvalidRequest };
|
||||
@@ -42,6 +47,7 @@ export function AuthFlowsLoader({ fallback, error, children }: AuthFlowsLoaderPr
|
||||
const authFlows: AuthFlows = {
|
||||
loginFlows,
|
||||
registerFlows,
|
||||
authMetadata: promiseFulfilledResult(result[2]),
|
||||
};
|
||||
|
||||
return authFlows;
|
||||
|
||||
@@ -37,7 +37,7 @@ import {
|
||||
useCallThemeSync,
|
||||
useCallStart,
|
||||
} from '../hooks/useCallEmbed';
|
||||
import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
|
||||
import { callChatAtom, callEmbedAtom, immersiveCallAtom } from '../state/callEmbed';
|
||||
import { toastQueueAtom } from '../state/toast';
|
||||
import { CallEmbed, useCallControlState, useScreensharePromptOpen } from '../plugins/call';
|
||||
import { hangupCallAndWait } from '../plugins/call/hangup';
|
||||
@@ -52,6 +52,7 @@ import { useCallEndedToast } from '../hooks/useCallEndedToast';
|
||||
import { useCallRejoin } from '../hooks/useCallRejoin';
|
||||
import { usePttHaptics } from '../hooks/usePttHaptics';
|
||||
import { useScreenshareNotices } from '../hooks/useScreenshareNotices';
|
||||
import { ExpectedDevicesPrompt } from '../features/call/ExpectedDevicesPrompt';
|
||||
import { useCallAnnouncements } from '../hooks/useCallAnnouncements';
|
||||
import { useMutedTalkWarning } from '../hooks/useMutedTalkWarning';
|
||||
import { callAnnouncementAtom } from '../state/callAnnouncement';
|
||||
@@ -858,7 +859,14 @@ function CallUtils({ embed, joined }: { embed: CallEmbed; joined: boolean }) {
|
||||
};
|
||||
}, [joined]);
|
||||
|
||||
return null;
|
||||
return (
|
||||
<ExpectedDevicesPrompt
|
||||
embed={embed}
|
||||
onCancel={() => {
|
||||
setCallEmbed(undefined);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -946,6 +954,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
|
||||
const inCallRoom = callEmbed && selectedRoom === callEmbed.roomId;
|
||||
const callActive = callEmbed && joined;
|
||||
const callVisible = inCallRoom && callActive && !chatOnlyView;
|
||||
const immersiveCall = useAtomValue(immersiveCallAtom);
|
||||
const pipMode = callActive && !inCallRoom;
|
||||
const pipPromptOpen = useScreensharePromptOpen(callEmbed?.control);
|
||||
const { navigateRoom } = useRoomNavigate();
|
||||
@@ -1450,7 +1459,13 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
|
||||
...(pipMode
|
||||
? { background: color.Surface.Container }
|
||||
: callVisible
|
||||
? wallpaperStyle
|
||||
? {
|
||||
// [Gitea #126] Full screen: the frame is transparent, so give
|
||||
// it an opaque base under the wallpaper or the room's
|
||||
// sidebar / call bar show through.
|
||||
...(immersiveCall ? { backgroundColor: color.Background.Container } : {}),
|
||||
...wallpaperStyle,
|
||||
}
|
||||
: {}),
|
||||
}}
|
||||
ref={callEmbedRef}
|
||||
|
||||
@@ -23,6 +23,7 @@ import { useVoiceChannelFull } from '../../hooks/useVoiceChannelFull';
|
||||
import { CallMemberRenderer } from './CallMemberCard';
|
||||
import * as css from './styles.css';
|
||||
import { CallControls } from './CallControls';
|
||||
import { ImmersiveCallOverlay } from './ImmersiveCallOverlay';
|
||||
import { useLivekitSupport } from '../../hooks/useLivekitSupport';
|
||||
import { CallsUnavailableMessage } from './CallsUnavailable';
|
||||
import { webRTCSupported } from '../../utils/rtc';
|
||||
@@ -198,10 +199,24 @@ function CallLoadErrorMessage() {
|
||||
type CallJoinedProps = {
|
||||
containerRef: RefObject<HTMLDivElement>;
|
||||
joined: boolean;
|
||||
/** [Gitea #126] Full screen: controls float over the call instead. */
|
||||
onExitImmersive?: () => void;
|
||||
};
|
||||
function CallJoined({ joined, containerRef }: CallJoinedProps) {
|
||||
function CallJoined({ joined, containerRef, onExitImmersive }: CallJoinedProps) {
|
||||
const callEmbed = useCallEmbed();
|
||||
|
||||
if (onExitImmersive) {
|
||||
return (
|
||||
<Box grow="Yes" direction="Column" style={{ position: 'relative' }}>
|
||||
<Box grow="Yes" ref={containerRef} />
|
||||
{callEmbed && joined && (
|
||||
<ImmersiveCallOverlay callEmbed={callEmbed} onExit={onExitImmersive} />
|
||||
)}
|
||||
{callEmbed && joined && <LotusDecorationPusher callEmbed={callEmbed} />}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box grow="Yes" direction="Column">
|
||||
<Box grow="Yes" ref={containerRef} />
|
||||
@@ -212,7 +227,7 @@ function CallJoined({ joined, containerRef }: CallJoinedProps) {
|
||||
);
|
||||
}
|
||||
|
||||
export function CallView() {
|
||||
export function CallView({ onExitImmersive }: { onExitImmersive?: () => void } = {}) {
|
||||
const room = useRoom();
|
||||
const callContainerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
|
||||
useCallEmbedPlacementSync(callContainerRef);
|
||||
@@ -227,6 +242,26 @@ export function CallView() {
|
||||
// made it into the call (a hung iframe / blank spinner otherwise).
|
||||
const showLoadError = isCurrentRoom && !currentJoined && Boolean(loadError);
|
||||
|
||||
if (onExitImmersive && currentJoined) {
|
||||
// [Gitea #126] Cover the screen with a transparent layer above the call
|
||||
// frame: the frame follows the placeholder (useCallEmbedPlacementSync), so
|
||||
// it goes full screen too; the layer only takes touches on its own
|
||||
// tap-catcher / controls, so the call underneath stays usable.
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
zIndex: 10,
|
||||
pointerEvents: 'none',
|
||||
paddingTop: 'env(safe-area-inset-top)',
|
||||
}}
|
||||
>
|
||||
<CallJoined joined containerRef={callContainerRef} onExitImmersive={onExitImmersive} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
className={ContainerColor({ variant: 'Surface' })}
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Dialog,
|
||||
Header,
|
||||
Icons,
|
||||
Overlay,
|
||||
OverlayBackdrop,
|
||||
OverlayCenter,
|
||||
Text,
|
||||
config,
|
||||
} from 'folds';
|
||||
import { CallEmbed } from '../../plugins/call';
|
||||
import {
|
||||
MissingDevice,
|
||||
acceptForSession,
|
||||
describeLost,
|
||||
describeMissing,
|
||||
isAcceptedThisSession,
|
||||
parseDeviceLost,
|
||||
parseDeviceMissing,
|
||||
} from '../../plugins/call/expectedDevices';
|
||||
import { toastQueueAtom } from '../../state/toast';
|
||||
import { useModalStyle } from '../../hooks/useModalStyle';
|
||||
|
||||
/**
|
||||
* [Gitea #121] "Your usual headset isn't connected": the fork holds the join
|
||||
* until we answer. Join anyway (not asked again this session for the same
|
||||
* device) or Cancel (closes the call before it starts). A device lost mid-call
|
||||
* is only a toast.
|
||||
*/
|
||||
export function ExpectedDevicesPrompt({
|
||||
embed,
|
||||
onCancel,
|
||||
}: {
|
||||
embed: CallEmbed;
|
||||
onCancel: () => void;
|
||||
}) {
|
||||
const [missing, setMissing] = useState<MissingDevice[]>([]);
|
||||
const setToast = useSetAtom(toastQueueAtom);
|
||||
const modalStyle = useModalStyle(440);
|
||||
|
||||
useEffect(() => {
|
||||
const offMissing = embed.listenAction<{ data?: unknown }>('io.lotus.device_missing', (evt) => {
|
||||
const list = parseDeviceMissing(evt.detail?.data);
|
||||
if (list.length === 0) return;
|
||||
if (isAcceptedThisSession(list)) {
|
||||
embed.control.sendDeviceDecision(true);
|
||||
return;
|
||||
}
|
||||
setMissing(list);
|
||||
});
|
||||
const offLost = embed.listenAction<{ data?: unknown }>('io.lotus.device_lost', (evt) => {
|
||||
const lost = parseDeviceLost(evt.detail?.data);
|
||||
if (!lost) return;
|
||||
setToast({
|
||||
id: `device-lost-${lost.kind}-${Date.now()}`,
|
||||
iconSrc: lost.kind === 'audioinput' ? Icons.Mic : Icons.VolumeHigh,
|
||||
displayName: 'Audio device',
|
||||
body: describeLost(lost),
|
||||
roomName: embed.room.name ?? 'Voice call',
|
||||
roomId: embed.roomId,
|
||||
});
|
||||
});
|
||||
return () => {
|
||||
offMissing();
|
||||
offLost();
|
||||
};
|
||||
}, [embed, setToast]);
|
||||
|
||||
if (missing.length === 0) return null;
|
||||
|
||||
const joinAnyway = () => {
|
||||
acceptForSession(missing);
|
||||
embed.control.sendDeviceDecision(true);
|
||||
setMissing([]);
|
||||
};
|
||||
const cancel = () => {
|
||||
embed.control.sendDeviceDecision(false);
|
||||
setMissing([]);
|
||||
onCancel();
|
||||
};
|
||||
|
||||
return (
|
||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||
<OverlayCenter>
|
||||
<FocusTrap focusTrapOptions={{ initialFocus: false, escapeDeactivates: false }}>
|
||||
<Dialog
|
||||
variant="Surface"
|
||||
role="alertdialog"
|
||||
aria-labelledby="expected-devices-title"
|
||||
style={modalStyle}
|
||||
>
|
||||
<Header
|
||||
variant="Surface"
|
||||
size="500"
|
||||
style={{
|
||||
padding: `0 ${config.space.S400}`,
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
}}
|
||||
>
|
||||
<Text id="expected-devices-title" as="h2" size="H4">
|
||||
{missing.length === 1
|
||||
? describeMissing(missing[0]).title
|
||||
: "Your usual audio devices aren't connected"}
|
||||
</Text>
|
||||
</Header>
|
||||
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
|
||||
{missing.map((d) => {
|
||||
const t = describeMissing(d);
|
||||
return (
|
||||
<Text key={d.kind} size="T300">
|
||||
<b>{t.expected}</b> isn't connected. Join with <b>{t.fallback}</b> instead?
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
<Text size="T200" priority="300">
|
||||
Plug it in and choose Cancel to start over with it.
|
||||
</Text>
|
||||
<Box direction="Column" gap="200">
|
||||
<Button variant="Primary" onClick={joinAnyway}>
|
||||
<Text size="B400">Join anyway</Text>
|
||||
</Button>
|
||||
<Button variant="Secondary" fill="Soft" onClick={cancel}>
|
||||
<Text size="B400">Cancel</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Dialog>
|
||||
</FocusTrap>
|
||||
</OverlayCenter>
|
||||
</Overlay>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds';
|
||||
import { CallEmbed } from '../../plugins/call';
|
||||
import { CallControls } from './CallControls';
|
||||
import { callChatAtom } from '../../state/callEmbed';
|
||||
import { CONTROLS_AUTOHIDE_MS, wantsBrowserFullscreen } from './landscapeCall';
|
||||
|
||||
const isStandalone = (): boolean =>
|
||||
window.matchMedia?.('(display-mode: standalone)').matches ||
|
||||
(navigator as { standalone?: boolean }).standalone === true;
|
||||
|
||||
/**
|
||||
* [Gitea #126] Full-screen call controls. Taps inside the call frame never
|
||||
* reach us, so while the controls are hidden a transparent layer covers the
|
||||
* call: the first tap shows them (and is otherwise swallowed, as in native
|
||||
* video apps); with them up the layer is gone, so the call stays usable. They
|
||||
* hide again after a few seconds without a touch. The first tap in an Android
|
||||
* browser tab also enters the browser's own full screen (hides the address
|
||||
* bar); it is left again when this unmounts (rotate back, hang up, exit).
|
||||
*/
|
||||
export function ImmersiveCallOverlay({
|
||||
callEmbed,
|
||||
onExit,
|
||||
}: {
|
||||
callEmbed: CallEmbed;
|
||||
onExit: () => void;
|
||||
}) {
|
||||
const [shown, setShown] = useState(false);
|
||||
const timer = useRef<number | undefined>(undefined);
|
||||
const enteredFullscreen = useRef(false);
|
||||
const setChat = useSetAtom(callChatAtom);
|
||||
|
||||
const armHide = useCallback(() => {
|
||||
window.clearTimeout(timer.current);
|
||||
timer.current = window.setTimeout(() => setShown(false), CONTROLS_AUTOHIDE_MS);
|
||||
}, []);
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
window.clearTimeout(timer.current);
|
||||
if (enteredFullscreen.current && document.fullscreenElement === document.documentElement) {
|
||||
document.exitFullscreen().catch(() => undefined);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const reveal = () => {
|
||||
if (
|
||||
wantsBrowserFullscreen({
|
||||
userAgent: navigator.userAgent,
|
||||
standalone: isStandalone(),
|
||||
fullscreenEnabled: !!document.fullscreenEnabled,
|
||||
alreadyFullscreen: !!document.fullscreenElement,
|
||||
})
|
||||
) {
|
||||
document.documentElement
|
||||
.requestFullscreen({ navigationUI: 'hide' })
|
||||
.then(() => {
|
||||
enteredFullscreen.current = true;
|
||||
})
|
||||
.catch(() => undefined);
|
||||
}
|
||||
setShown(true);
|
||||
armHide();
|
||||
};
|
||||
|
||||
if (!shown) {
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label="Show call controls"
|
||||
onClick={reveal}
|
||||
onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && reveal()}
|
||||
style={{ position: 'absolute', inset: 0, pointerEvents: 'auto' }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
direction="Column"
|
||||
// Any touch on the controls keeps them up a little longer.
|
||||
onPointerDown={armHide}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
pointerEvents: 'auto',
|
||||
paddingLeft: 'env(safe-area-inset-left)',
|
||||
paddingRight: 'env(safe-area-inset-right)',
|
||||
paddingBottom: 'env(safe-area-inset-bottom)',
|
||||
background: 'linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0))',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
justifyContent="End"
|
||||
gap="200"
|
||||
style={{ padding: `${config.space.S200} ${config.space.S300} 0` }}
|
||||
>
|
||||
<Button
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="Pill"
|
||||
before={<Icon size="100" src={Icons.Message} />}
|
||||
onClick={() => setChat(true)}
|
||||
>
|
||||
<Text size="B300">Chat</Text>
|
||||
</Button>
|
||||
<Button
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="Pill"
|
||||
before={<Icon size="100" src={Icons.Cross} />}
|
||||
onClick={onExit}
|
||||
style={{ minWidth: toRem(40) }}
|
||||
>
|
||||
<Text size="B300">Exit full screen</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
<CallControls callEmbed={callEmbed} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { shouldGoImmersive, wantsBrowserFullscreen } from './landscapeCall';
|
||||
|
||||
const base = { landscapePhone: true, joinedHere: true, chatOpen: false, dismissed: false };
|
||||
|
||||
test('[#126] full screen only for a joined call on a sideways phone', () => {
|
||||
assert.equal(shouldGoImmersive(base), true);
|
||||
assert.equal(shouldGoImmersive({ ...base, landscapePhone: false }), false, 'upright / tablet');
|
||||
assert.equal(shouldGoImmersive({ ...base, joinedHere: false }), false, 'prescreen / other room');
|
||||
assert.equal(shouldGoImmersive({ ...base, chatOpen: true }), false, 'chat open');
|
||||
assert.equal(shouldGoImmersive({ ...base, dismissed: true }), false, 'user exited');
|
||||
});
|
||||
|
||||
test('[#126] browser full screen only in an Android browser tab', () => {
|
||||
const env = {
|
||||
userAgent: 'Mozilla/5.0 (Linux; Android 14; Pixel 8) Chrome/140 Mobile',
|
||||
standalone: false,
|
||||
fullscreenEnabled: true,
|
||||
alreadyFullscreen: false,
|
||||
};
|
||||
assert.equal(wantsBrowserFullscreen(env), true);
|
||||
assert.equal(wantsBrowserFullscreen({ ...env, standalone: true }), false, 'installed app');
|
||||
assert.equal(
|
||||
wantsBrowserFullscreen({
|
||||
...env,
|
||||
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 18_0) Safari',
|
||||
}),
|
||||
false,
|
||||
'iPhone',
|
||||
);
|
||||
assert.equal(wantsBrowserFullscreen({ ...env, alreadyFullscreen: true }), false);
|
||||
assert.equal(wantsBrowserFullscreen({ ...env, fullscreenEnabled: false }), false);
|
||||
});
|
||||
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* [Gitea #126] Phone turned sideways in a call: the call takes the whole
|
||||
* screen. A phone in landscape is ~840px wide (the "Tablet" size class), so
|
||||
* the trigger is the shape of the screen, not the size class: landscape, at
|
||||
* most 500px tall, touch input. Tablets and desktops never match.
|
||||
*/
|
||||
export const LANDSCAPE_PHONE_QUERY =
|
||||
'(orientation: landscape) and (max-height: 500px) and (pointer: coarse)';
|
||||
|
||||
/** Controls hide again after this long without a touch on them. */
|
||||
export const CONTROLS_AUTOHIDE_MS = 4000;
|
||||
|
||||
export type ImmersiveInputs = {
|
||||
landscapePhone: boolean;
|
||||
/** This room's call is the one we are in, and we have joined it. */
|
||||
joinedHere: boolean;
|
||||
/** The in-call chat is open (it replaces the call on small screens). */
|
||||
chatOpen: boolean;
|
||||
/** "Exit full screen" was pressed since the phone was last upright. */
|
||||
dismissed: boolean;
|
||||
};
|
||||
|
||||
/** Pure: whether the call should be full screen. */
|
||||
export const shouldGoImmersive = (i: ImmersiveInputs): boolean =>
|
||||
i.landscapePhone && i.joinedHere && !i.chatOpen && !i.dismissed;
|
||||
|
||||
/**
|
||||
* Pure: use the browser's own full-screen mode too? Only where an address bar
|
||||
* takes room: an Android browser tab (not the installed app / iOS, which have
|
||||
* none or don't support it), when the page isn't already full screen.
|
||||
*/
|
||||
export const wantsBrowserFullscreen = (env: {
|
||||
userAgent: string;
|
||||
standalone: boolean;
|
||||
fullscreenEnabled: boolean;
|
||||
alreadyFullscreen: boolean;
|
||||
}): boolean =>
|
||||
/Android/i.test(env.userAgent) &&
|
||||
!env.standalone &&
|
||||
env.fullscreenEnabled &&
|
||||
!env.alreadyFullscreen;
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { Box, Line } from 'folds';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { isKeyHotkey } from 'is-hotkey';
|
||||
@@ -11,7 +11,6 @@ import { WidgetsPanel } from './widgets/WidgetsPanel';
|
||||
import { widgetsPanelAtom } from '../../state/widgetsPanel';
|
||||
import { mobileMembersPanelAtom } from '../../state/mobileMembersPanel';
|
||||
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
|
||||
import { useMediaQuery } from '../../hooks/useMediaQuery';
|
||||
import { useSetting } from '../../state/hooks/settings';
|
||||
import { settingsAtom } from '../../state/settings';
|
||||
import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
|
||||
@@ -21,10 +20,12 @@ import { markAsRead } from '../../utils/notifications';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { useRoomMembers } from '../../hooks/useRoomMembers';
|
||||
import { CallView } from '../call/CallView';
|
||||
import { LANDSCAPE_PHONE_QUERY, shouldGoImmersive } from '../call/landscapeCall';
|
||||
import { useMediaQuery } from '../../hooks/useMediaQuery';
|
||||
import { RoomViewHeader } from './RoomViewHeader';
|
||||
import { callChatAtom } from '../../state/callEmbed';
|
||||
import { callChatAtom, immersiveCallAtom } from '../../state/callEmbed';
|
||||
import { CallChatView } from './CallChatView';
|
||||
import { useCallEmbed } from '../../hooks/useCallEmbed';
|
||||
import { useCallEmbed, useCallJoined } from '../../hooks/useCallEmbed';
|
||||
import { useCallMembers, useCallSession } from '../../hooks/useCall';
|
||||
import { roomIdToActiveThreadIdAtomFamily } from '../../state/room/thread';
|
||||
import { threadsListAtom } from '../../state/threadsList';
|
||||
@@ -57,6 +58,25 @@ export function Room() {
|
||||
const powerLevels = usePowerLevels(room);
|
||||
const members = useRoomMembers(mx, room.roomId);
|
||||
const chat = useAtomValue(callChatAtom);
|
||||
// [Gitea #126] Phone turned sideways in this room's call: full screen.
|
||||
const landscapePhone = useMediaQuery(LANDSCAPE_PHONE_QUERY);
|
||||
const joinedAnywhere = useCallJoined(callEmbed);
|
||||
const [immersiveDismissed, setImmersiveDismissed] = useState(false);
|
||||
useEffect(() => {
|
||||
// "Exit full screen" lasts until the phone is upright again.
|
||||
if (!landscapePhone) setImmersiveDismissed(false);
|
||||
}, [landscapePhone]);
|
||||
const setImmersiveCall = useSetAtom(immersiveCallAtom);
|
||||
const immersive = shouldGoImmersive({
|
||||
landscapePhone,
|
||||
joinedHere: joinedAnywhere && callEmbed?.roomId === room.roomId,
|
||||
chatOpen: chat,
|
||||
dismissed: immersiveDismissed,
|
||||
});
|
||||
useEffect(() => {
|
||||
setImmersiveCall(immersive);
|
||||
return () => setImmersiveCall(false);
|
||||
}, [immersive, setImmersiveCall]);
|
||||
// Hoisted here (instead of inside RoomTimeline) so ThreadPanel/ThreadTimeline —
|
||||
// rendered as siblings of RoomView, not descendants — share the same computed
|
||||
// positions instead of falling back to the context default (Gitea #38).
|
||||
@@ -170,7 +190,8 @@ export function Room() {
|
||||
<PowerLevelsContextProvider value={powerLevels}>
|
||||
<ReadPositionsContext.Provider value={readPositions}>
|
||||
<Box grow="Yes">
|
||||
{callView && (screenSize === ScreenSize.Desktop || !chat) && (
|
||||
{immersive && <CallView onExitImmersive={() => setImmersiveDismissed(true)} />}
|
||||
{!immersive && callView && (screenSize === ScreenSize.Desktop || !chat) && (
|
||||
<Box grow="Yes" direction="Column">
|
||||
<RoomViewHeader callView />
|
||||
<Box grow="Yes">
|
||||
|
||||
@@ -61,6 +61,7 @@ import {
|
||||
} from '../../../utils/lotusDenoiseUtils';
|
||||
import { useSetting } from '../../../state/hooks/settings';
|
||||
import { useSettingsSyncActions } from '../../../hooks/useSettingsSync';
|
||||
import { YourDataSection } from './YourData';
|
||||
import {
|
||||
CallAudioBitrate,
|
||||
ChatBackground,
|
||||
@@ -3007,6 +3008,7 @@ export function General({ requestClose }: GeneralProps) {
|
||||
<Privacy />
|
||||
<StorageUsage />
|
||||
<SettingsSyncSection />
|
||||
<YourDataSection />
|
||||
<Calls />
|
||||
<DesktopSettings />
|
||||
<AppUpdates />
|
||||
|
||||
@@ -0,0 +1,285 @@
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import { useAtom } from 'jotai';
|
||||
import { Method } from 'matrix-js-sdk';
|
||||
import { Box, Button, Text, color } from 'folds';
|
||||
import { SequenceCard } from '../../../components/sequence-card';
|
||||
import { SequenceCardStyle } from '../styles.css';
|
||||
import { SettingTile } from '../../../components/setting-tile';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { Settings, settingsAtom } from '../../../state/settings';
|
||||
import {
|
||||
buildExport,
|
||||
EXPORT_ACCOUNT_DATA,
|
||||
ExportFile,
|
||||
ImportPlanItem,
|
||||
mergeData,
|
||||
parseExport,
|
||||
planImport,
|
||||
} from '../../../utils/dataExport';
|
||||
import { invalidateDecorationCache } from '../../../hooks/useAvatarDecoration';
|
||||
|
||||
const DECORATION_FIELD = 'io.lotus.avatar_decoration';
|
||||
|
||||
type Current = {
|
||||
accountData: Record<string, unknown>;
|
||||
decoration: string | null;
|
||||
localSettings: Record<string, unknown> | null;
|
||||
};
|
||||
|
||||
/**
|
||||
* [Gitea #114] "Your data": export the account's Lotus data (settings,
|
||||
* bookmarks, notes, sections, ...) to a file and import it here or on another
|
||||
* account. Import merges: new things are added; for things that differ the
|
||||
* user picks "keep mine" (default) or "use the file's". Message history and
|
||||
* encryption keys have their own exports.
|
||||
*/
|
||||
export function YourDataSection() {
|
||||
const mx = useMatrixClient();
|
||||
const userId = mx.getSafeUserId();
|
||||
const [settings, setSettings] = useAtom(settingsAtom);
|
||||
const fileInput = useRef<HTMLInputElement>(null);
|
||||
const [pending, setPending] = useState<{ file: ExportFile; plan: ImportPlanItem[] }>();
|
||||
const [preferFile, setPreferFile] = useState(false);
|
||||
const [message, setMessage] = useState<{ tone: 'ok' | 'error'; text: string }>();
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const readCurrent = useCallback(async (): Promise<Current> => {
|
||||
const accountData: Record<string, unknown> = {};
|
||||
EXPORT_ACCOUNT_DATA.forEach(({ type }) => {
|
||||
const c = mx.getAccountData(type as never)?.getContent();
|
||||
if (c && Object.keys(c).length > 0) accountData[type] = c;
|
||||
});
|
||||
let decoration: string | null = null;
|
||||
try {
|
||||
const profile = await mx.http.authedRequest<Record<string, unknown>>(
|
||||
Method.Get,
|
||||
`/profile/${encodeURIComponent(userId)}`,
|
||||
);
|
||||
const v = profile[DECORATION_FIELD];
|
||||
decoration = typeof v === 'string' && v ? v : null;
|
||||
} catch {
|
||||
/* no decoration */
|
||||
}
|
||||
return {
|
||||
accountData,
|
||||
decoration,
|
||||
localSettings: settings as unknown as Record<string, unknown>,
|
||||
};
|
||||
}, [mx, userId, settings]);
|
||||
|
||||
const exportData = async () => {
|
||||
setBusy(true);
|
||||
setMessage(undefined);
|
||||
try {
|
||||
const cur = await readCurrent();
|
||||
const file = buildExport({ userId, ...cur });
|
||||
const blob = new Blob([JSON.stringify(file, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `lotus-chat-data-${userId.replace(/[^a-z0-9]+/gi, '-')}-${file.exportedAt.slice(0, 10)}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
setMessage({ tone: 'ok', text: 'Exported. Keep the file somewhere safe.' });
|
||||
} catch {
|
||||
setMessage({ tone: 'error', text: "Couldn't export your data. Please try again." });
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const chooseFile = async (f: File | undefined) => {
|
||||
if (!f) return;
|
||||
setMessage(undefined);
|
||||
const parsed = parseExport(await f.text());
|
||||
if (!parsed.ok) {
|
||||
setMessage({ tone: 'error', text: parsed.error });
|
||||
return;
|
||||
}
|
||||
const plan = planImport(parsed.file, await readCurrent());
|
||||
setPreferFile(false);
|
||||
setPending({ file: parsed.file, plan });
|
||||
};
|
||||
|
||||
const applyImport = async () => {
|
||||
if (!pending) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const cur = await readCurrent();
|
||||
const { file } = pending;
|
||||
await Object.entries(file.accountData).reduce<Promise<void>>(
|
||||
async (prev, [type, incoming]) => {
|
||||
await prev;
|
||||
const r = mergeData(cur.accountData[type], incoming, preferFile);
|
||||
if (r.added > 0 || (preferFile && r.conflicts > 0)) {
|
||||
await mx.setAccountData(type as never, r.value as never);
|
||||
}
|
||||
},
|
||||
Promise.resolve(),
|
||||
);
|
||||
const deco = file.profile.decoration;
|
||||
if (deco && deco !== cur.decoration && (!cur.decoration || preferFile)) {
|
||||
await mx.http.authedRequest(
|
||||
Method.Put,
|
||||
`/profile/${encodeURIComponent(userId)}/${DECORATION_FIELD}`,
|
||||
undefined,
|
||||
{ [DECORATION_FIELD]: deco },
|
||||
);
|
||||
invalidateDecorationCache(userId);
|
||||
}
|
||||
if (file.local.settings) {
|
||||
const r = mergeData(cur.localSettings ?? {}, file.local.settings, preferFile);
|
||||
setSettings({ ...settings, ...(r.value as Partial<Settings>) });
|
||||
}
|
||||
setPending(undefined);
|
||||
setMessage({ tone: 'ok', text: 'Imported.' });
|
||||
} catch {
|
||||
setMessage({ tone: 'error', text: "Couldn't finish the import. Nothing else was changed." });
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const totals = pending?.plan.reduce(
|
||||
(t, p) => ({ added: t.added + p.added, conflicts: t.conflicts + p.conflicts }),
|
||||
{ added: 0, conflicts: 0 },
|
||||
);
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Your data</Text>
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Export your data"
|
||||
description="Settings, bookmarks, private notes, room sections and names, reminders, status presets, soundboard and emoji, as one file. Not your messages or encryption keys (they have their own exports)."
|
||||
after={
|
||||
<Button
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
outlined
|
||||
disabled={busy}
|
||||
onClick={exportData}
|
||||
>
|
||||
<Text size="B300">Export</Text>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<SettingTile
|
||||
title="Import data"
|
||||
description="Load a Lotus Chat data file into this account. New items are added; you choose what happens to things that differ."
|
||||
after={
|
||||
<Button
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
outlined
|
||||
disabled={busy}
|
||||
onClick={() => fileInput.current?.click()}
|
||||
>
|
||||
<Text size="B300">Import…</Text>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<input
|
||||
ref={fileInput}
|
||||
type="file"
|
||||
accept="application/json,.json"
|
||||
hidden
|
||||
aria-label="Lotus Chat data file"
|
||||
onChange={(e) => {
|
||||
chooseFile(e.target.files?.[0]).catch(() => undefined);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
{pending && totals && (
|
||||
<Box direction="Column" gap="200" role="region" aria-label="Import summary">
|
||||
{pending.file.userId && pending.file.userId !== userId && (
|
||||
<Text size="T200">
|
||||
This file is from <b>{pending.file.userId}</b>.
|
||||
</Text>
|
||||
)}
|
||||
{pending.plan.map((p) => (
|
||||
<Text key={p.key} size="T200">
|
||||
{p.label}:{' '}
|
||||
{p.added === 0 && p.conflicts === 0
|
||||
? 'already up to date'
|
||||
: [p.added > 0 && `${p.added} new`, p.conflicts > 0 && `${p.conflicts} differ`]
|
||||
.filter(Boolean)
|
||||
.join(', ')}
|
||||
</Text>
|
||||
))}
|
||||
{totals.conflicts > 0 && (
|
||||
<Box direction="Column" gap="100" role="radiogroup" aria-label="Things that differ">
|
||||
<Text size="T200">
|
||||
<b>{totals.conflicts}</b>{' '}
|
||||
{totals.conflicts === 1 ? 'thing differs' : 'things differ'} from what's
|
||||
here:
|
||||
</Text>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="your-data-conflicts"
|
||||
checked={!preferFile}
|
||||
onChange={() => setPreferFile(false)}
|
||||
/>{' '}
|
||||
<Text as="span" size="T200">
|
||||
Keep mine
|
||||
</Text>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="your-data-conflicts"
|
||||
checked={preferFile}
|
||||
onChange={() => setPreferFile(true)}
|
||||
/>{' '}
|
||||
<Text as="span" size="T200">
|
||||
Use the file's
|
||||
</Text>
|
||||
</label>
|
||||
</Box>
|
||||
)}
|
||||
<Box gap="200">
|
||||
<Button
|
||||
size="300"
|
||||
variant="Primary"
|
||||
radii="300"
|
||||
disabled={busy || (totals.added === 0 && !(preferFile && totals.conflicts > 0))}
|
||||
onClick={applyImport}
|
||||
>
|
||||
<Text size="B300">Import</Text>
|
||||
</Button>
|
||||
<Button
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
radii="300"
|
||||
disabled={busy}
|
||||
onClick={() => setPending(undefined)}
|
||||
>
|
||||
<Text size="B300">Cancel</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
{message && (
|
||||
<Text
|
||||
size="T200"
|
||||
role="status"
|
||||
style={{ color: message.tone === 'error' ? color.Critical.Main : undefined }}
|
||||
>
|
||||
{message.text}
|
||||
</Text>
|
||||
)}
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createContext, useContext } from 'react';
|
||||
import { IAuthData, MatrixError } from 'matrix-js-sdk';
|
||||
import { IAuthData, MatrixError, ValidatedAuthMetadata } from 'matrix-js-sdk';
|
||||
import { ILoginFlowsResponse } from 'matrix-js-sdk/lib/@types/auth';
|
||||
|
||||
export enum RegisterFlowStatus {
|
||||
@@ -44,6 +44,13 @@ export const parseRegisterErrResp = (matrixError: MatrixError): RegisterFlowsRes
|
||||
export type AuthFlows = {
|
||||
loginFlows: ILoginFlowsResponse;
|
||||
registerFlows: RegisterFlowsResponse;
|
||||
/**
|
||||
* The homeserver's OAuth 2.0 metadata (`/_matrix/client/v1/auth_metadata`),
|
||||
* when it uses native OAuth (MSC3861, e.g. matrix.org via MAS). The same
|
||||
* source the SDK uses to refresh tokens, so sign-in is only offered when
|
||||
* refresh will work too.
|
||||
*/
|
||||
authMetadata?: ValidatedAuthMetadata;
|
||||
};
|
||||
|
||||
const AuthFlowsContext = createContext<AuthFlows | null>(null);
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import React from 'react';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { immersiveCallAtom } from '../state/callEmbed';
|
||||
import { useCallEmbed } from '../hooks/useCallEmbed';
|
||||
import { CallStatus } from '../features/call-status';
|
||||
import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
|
||||
@@ -9,8 +11,10 @@ export function CallStatusRenderer() {
|
||||
const selectedRoom = useSelectedRoom();
|
||||
|
||||
const screenSize = useScreenSizeContext();
|
||||
// [Gitea #126] The full-screen call has its own controls.
|
||||
const immersive = useAtomValue(immersiveCallAtom);
|
||||
|
||||
if (!callEmbed) return null;
|
||||
if (!callEmbed || immersive) return null;
|
||||
|
||||
if (screenSize === ScreenSize.Mobile && callEmbed.roomId === selectedRoom) return null;
|
||||
|
||||
|
||||
@@ -10,7 +10,6 @@ import { SSOLogin } from '../SSOLogin';
|
||||
import { TokenLogin } from './TokenLogin';
|
||||
import { OidcLogin } from './OidcLogin';
|
||||
import { useAutoDiscoveryInfo } from '../../../hooks/useAutoDiscoveryInfo';
|
||||
import { getOidcIssuer } from '../../../cs-api';
|
||||
import { OrDivider } from '../OrDivider';
|
||||
import { getLoginPath, getRegisterPath, withSearchParam } from '../../pathUtils';
|
||||
import { usePathWithOrigin } from '../../../hooks/usePathWithOrigin';
|
||||
@@ -41,7 +40,7 @@ export function Login() {
|
||||
const server = useAuthServer();
|
||||
const discovery = useAutoDiscoveryInfo();
|
||||
const { hashRouter } = useClientConfig();
|
||||
const { loginFlows } = useAuthFlows();
|
||||
const { loginFlows, authMetadata } = useAuthFlows();
|
||||
const [searchParams] = useSearchParams();
|
||||
const loginSearchParams = useLoginSearchParams(searchParams);
|
||||
const ssoRedirectUrl = usePathWithOrigin(getLoginPath(server));
|
||||
@@ -58,11 +57,13 @@ export function Login() {
|
||||
|
||||
const parsedFlows = useParsedLoginFlows(loginFlows.flows);
|
||||
|
||||
// Next-gen auth (MSC3861/MSC2965): when the server advertises an OIDC issuer in
|
||||
// its `.well-known` discovery, use the native OIDC flow and suppress the
|
||||
// password / legacy-SSO forms (those servers, e.g. MAS, reject `m.login.password`).
|
||||
const oidc = getOidcIssuer(discovery);
|
||||
if (oidc.issuer) {
|
||||
// Next-gen auth (MSC3861): when the homeserver serves OAuth metadata
|
||||
// (`/auth_metadata`, e.g. matrix.org via MAS), use the native OAuth flow and
|
||||
// suppress the password / legacy-SSO forms, as Element does. Detected the way
|
||||
// the SDK finds the auth server for refresh; the old `.well-known`
|
||||
// `m.authentication` key is gone from matrix.org. A legacy SSO `loginToken`
|
||||
// coming back from a redirect still completes below.
|
||||
if (authMetadata && !loginSearchParams.loginToken) {
|
||||
return (
|
||||
<Box direction="Column" gap="500">
|
||||
<Text as="h1" size="H2" priority="400">
|
||||
|
||||
@@ -4,6 +4,8 @@ import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||||
import { startOidcLogin } from '../oidc/oidcLoginUtil';
|
||||
|
||||
type OidcLoginProps = {
|
||||
/** Register: open the auth server's sign-up page. */
|
||||
register?: boolean;
|
||||
homeserverBaseUrl: string;
|
||||
serverName: string;
|
||||
};
|
||||
@@ -12,7 +14,7 @@ type OidcLoginProps = {
|
||||
* with the homeserver's OIDC provider and redirects to it. Mirrors `SSOLogin`'s
|
||||
* single-button styling.
|
||||
*/
|
||||
export function OidcLogin({ homeserverBaseUrl, serverName }: OidcLoginProps) {
|
||||
export function OidcLogin({ homeserverBaseUrl, serverName, register }: OidcLoginProps) {
|
||||
const [state, startLogin] = useAsyncCallback<void, unknown, Parameters<typeof startOidcLogin>>(
|
||||
useCallback(startOidcLogin, []),
|
||||
);
|
||||
@@ -25,7 +27,9 @@ export function OidcLogin({ homeserverBaseUrl, serverName }: OidcLoginProps) {
|
||||
<Box direction="Column" gap="300">
|
||||
{state.status === AsyncStatus.Error && (
|
||||
<Text size="T200" align="Center" style={{ color: color.Critical.Main }}>
|
||||
Failed to start single sign-on. Please try again.
|
||||
{register
|
||||
? 'Failed to open sign-up. Please try again.'
|
||||
: 'Failed to start single sign-on. Please try again.'}
|
||||
</Text>
|
||||
)}
|
||||
<Button
|
||||
@@ -34,7 +38,7 @@ export function OidcLogin({ homeserverBaseUrl, serverName }: OidcLoginProps) {
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
outlined
|
||||
onClick={() => startLogin(homeserverBaseUrl)}
|
||||
onClick={() => startLogin(homeserverBaseUrl, register ? 'create' : undefined)}
|
||||
disabled={ongoing}
|
||||
before={ongoing ? <Spinner size="200" variant="Secondary" /> : undefined}
|
||||
>
|
||||
|
||||
@@ -31,10 +31,14 @@ export const getOrRegisterClientId = async (
|
||||
/**
|
||||
* Begin the OAuth authorization-code flow: discover the auth server through
|
||||
* the homeserver, (re)register a client, remember the PKCE verifier + device
|
||||
* under a fresh `state` (oidcState), then redirect. The callback reads the
|
||||
* under a fresh `state` (oidcState), then redirect. `prompt: 'create'` opens
|
||||
* the auth server's sign-up page instead, where supported. The callback reads the
|
||||
* result from the query string (`response_mode=query`).
|
||||
*/
|
||||
export const startOidcLogin = async (homeserverBaseUrl: string): Promise<void> => {
|
||||
export const startOidcLogin = async (
|
||||
homeserverBaseUrl: string,
|
||||
prompt?: 'create',
|
||||
): Promise<void> => {
|
||||
const redirectUri = getOidcCallbackUrl();
|
||||
let issuer: string | undefined;
|
||||
try {
|
||||
@@ -52,8 +56,12 @@ export const startOidcLogin = async (homeserverBaseUrl: string): Promise<void> =
|
||||
redirectUri,
|
||||
};
|
||||
savePendingOidcLogin(state, pending);
|
||||
// `prompt=create` asks the auth server for its sign-up page (Register),
|
||||
// only where it says it supports that.
|
||||
const usePrompt =
|
||||
prompt && metadata.prompt_values_supported?.includes(prompt) ? prompt : undefined;
|
||||
window.location.assign(
|
||||
await oauth.generateAuthorizationCodeGrantUrl(state, redirectUri, 'query'),
|
||||
await oauth.generateAuthorizationCodeGrantUrl(state, redirectUri, 'query', usePrompt),
|
||||
);
|
||||
} catch (e) {
|
||||
// #67 — drop the cached client so the next attempt re-registers, but ONLY
|
||||
|
||||
@@ -12,6 +12,8 @@ import { SupportedUIAFlowsLoader } from '../../../components/SupportedUIAFlowsLo
|
||||
import { getLoginPath } from '../../pathUtils';
|
||||
import { usePathWithOrigin } from '../../../hooks/usePathWithOrigin';
|
||||
import { RegisterPathSearchParams } from '../../paths';
|
||||
import { useAutoDiscoveryInfo } from '../../../hooks/useAutoDiscoveryInfo';
|
||||
import { OidcLogin } from '../login/OidcLogin';
|
||||
|
||||
const useRegisterSearchParams = (searchParams: URLSearchParams): RegisterPathSearchParams =>
|
||||
useMemo(
|
||||
@@ -25,7 +27,8 @@ const useRegisterSearchParams = (searchParams: URLSearchParams): RegisterPathSea
|
||||
|
||||
export function Register() {
|
||||
const server = useAuthServer();
|
||||
const { loginFlows, registerFlows } = useAuthFlows();
|
||||
const { loginFlows, registerFlows, authMetadata } = useAuthFlows();
|
||||
const discovery = useAutoDiscoveryInfo();
|
||||
const [searchParams] = useSearchParams();
|
||||
const registerSearchParams = useRegisterSearchParams(searchParams);
|
||||
const { sso } = useParsedLoginFlows(loginFlows.flows);
|
||||
@@ -33,6 +36,27 @@ export function Register() {
|
||||
// redirect to /login because only that path handle m.login.token
|
||||
const ssoRedirectUrl = usePathWithOrigin(getLoginPath(server));
|
||||
|
||||
// Native OAuth servers (e.g. matrix.org via MAS) create accounts at the auth
|
||||
// server; /register here would only offer the legacy forms. Mirrors Login.
|
||||
if (authMetadata) {
|
||||
return (
|
||||
<Box direction="Column" gap="500">
|
||||
<Text as="h2" size="H2" priority="400">
|
||||
Register
|
||||
</Text>
|
||||
<OidcLogin
|
||||
register
|
||||
homeserverBaseUrl={discovery['m.homeserver'].base_url}
|
||||
serverName={server}
|
||||
/>
|
||||
<span data-spacing-node />
|
||||
<Text align="Center">
|
||||
Already have an account? <Link to={getLoginPath(server)}>Login</Link>
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="500">
|
||||
<Text as="h2" size="H2" priority="400">
|
||||
|
||||
@@ -261,6 +261,11 @@ export class CallControl extends EventEmitter implements CallControlState {
|
||||
this.emit(CALL_ERROR_CHANGED);
|
||||
}
|
||||
|
||||
/** [Gitea #121] Answer the fork's expected-device check: join or not. */
|
||||
public sendDeviceDecision(join: boolean): void {
|
||||
this.call.transport.send('io.lotus.device_decision', { join }).catch(() => undefined);
|
||||
}
|
||||
|
||||
/** Press the fork's Reconnect / Try again. */
|
||||
public reconnect(): void {
|
||||
this.call.transport.send('io.lotus.reconnect', {}).catch(() => undefined);
|
||||
|
||||
@@ -257,6 +257,9 @@ export class CallEmbed {
|
||||
// sends io.lotus.inject_audio (only on an explicit user click), so
|
||||
// arming it for every call is safe.
|
||||
lotusAudioInject: 'true',
|
||||
// [Gitea #121] Before joining, the fork checks that the mic / output the
|
||||
// user last picked are plugged in, and asks us (ExpectedDevicesPrompt).
|
||||
lotusDeviceCheck: 'true',
|
||||
});
|
||||
|
||||
if (denoiseMode === 'ml') {
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
|
||||
const store = new Map<string, string>();
|
||||
(globalThis as { sessionStorage?: unknown }).sessionStorage = {
|
||||
getItem: (k: string) => store.get(k) ?? null,
|
||||
setItem: (k: string, v: string) => {
|
||||
store.set(k, v);
|
||||
},
|
||||
removeItem: (k: string) => {
|
||||
store.delete(k);
|
||||
},
|
||||
};
|
||||
const m = await import('./expectedDevices');
|
||||
|
||||
test('[#121] parses the fork messages defensively', () => {
|
||||
assert.deepEqual(
|
||||
m.parseDeviceMissing({
|
||||
missing: [
|
||||
{ kind: 'audioinput', expected: 'Arctis 7', fallback: 'Laptop Mic' },
|
||||
{ kind: 'audiooutput', expected: 'Arctis 7', fallback: null },
|
||||
{ kind: 'videoinput', expected: 'Cam' },
|
||||
{ kind: 'audioinput' },
|
||||
],
|
||||
}),
|
||||
[
|
||||
{ kind: 'audioinput', expected: 'Arctis 7', fallback: 'Laptop Mic' },
|
||||
{ kind: 'audiooutput', expected: 'Arctis 7', fallback: null },
|
||||
],
|
||||
);
|
||||
assert.deepEqual(m.parseDeviceMissing(undefined), []);
|
||||
assert.deepEqual(m.parseDeviceMissing({ missing: 'x' }), []);
|
||||
assert.equal(m.parseDeviceLost({ kind: 'nope' }), undefined);
|
||||
});
|
||||
|
||||
test('[#121] wording', () => {
|
||||
assert.deepEqual(
|
||||
m.describeMissing({ kind: 'audioinput', expected: 'Arctis 7', fallback: 'Laptop Mic' }),
|
||||
{
|
||||
title: "Your usual microphone isn't connected",
|
||||
expected: 'Arctis 7',
|
||||
fallback: 'Laptop Mic',
|
||||
},
|
||||
);
|
||||
assert.equal(
|
||||
m.describeLost({ kind: 'audiooutput', expected: 'Arctis 7', fallback: null }),
|
||||
'Arctis 7 disconnected — now using the default output.',
|
||||
);
|
||||
});
|
||||
|
||||
test('[#121] "Join anyway" is remembered for the session, per device set', () => {
|
||||
store.clear();
|
||||
const a = [{ kind: 'audioinput' as const, expected: 'Arctis 7', fallback: 'Laptop Mic' }];
|
||||
const b = [{ kind: 'audiooutput' as const, expected: 'Arctis 7', fallback: null }];
|
||||
assert.equal(m.isAcceptedThisSession(a), false);
|
||||
m.acceptForSession(a);
|
||||
assert.equal(m.isAcceptedThisSession(a), true);
|
||||
assert.equal(m.isAcceptedThisSession(b), false, 'a different device still asks');
|
||||
assert.equal(m.isAcceptedThisSession([...a, ...b]), false, 'more missing still asks');
|
||||
});
|
||||
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* [Gitea #121] The fork's expected-device check. Before joining, EC reports
|
||||
* the user's usual mic / output (the one they last picked) as missing; we ask
|
||||
* "Join anyway" or "Cancel". In a call, losing it is a toast. Pure helpers.
|
||||
*/
|
||||
|
||||
export type DeviceKind = 'audioinput' | 'audiooutput';
|
||||
export type MissingDevice = { kind: DeviceKind; expected: string; fallback: string | null };
|
||||
|
||||
const isKind = (k: unknown): k is DeviceKind => k === 'audioinput' || k === 'audiooutput';
|
||||
|
||||
const parseOne = (v: unknown): MissingDevice | undefined => {
|
||||
if (!v || typeof v !== 'object') return undefined;
|
||||
const { kind, expected, fallback } = v as Record<string, unknown>;
|
||||
if (!isKind(kind) || typeof expected !== 'string' || !expected) return undefined;
|
||||
return { kind, expected, fallback: typeof fallback === 'string' && fallback ? fallback : null };
|
||||
};
|
||||
|
||||
/** `io.lotus.device_missing` → the missing devices (empty if malformed). */
|
||||
export const parseDeviceMissing = (data: unknown): MissingDevice[] => {
|
||||
const list = (data as { missing?: unknown } | undefined)?.missing;
|
||||
if (!Array.isArray(list)) return [];
|
||||
return list.map(parseOne).filter((d): d is MissingDevice => !!d);
|
||||
};
|
||||
|
||||
/** `io.lotus.device_lost` → the device that went away. */
|
||||
export const parseDeviceLost = (data: unknown): MissingDevice | undefined => parseOne(data);
|
||||
|
||||
const what = (kind: DeviceKind): string => (kind === 'audioinput' ? 'microphone' : 'audio output');
|
||||
|
||||
/** "Your usual microphone **Arctis 7** isn't connected." lines + the fallback. */
|
||||
export const describeMissing = (
|
||||
d: MissingDevice,
|
||||
): { title: string; expected: string; fallback: string } => ({
|
||||
title: `Your usual ${what(d.kind)} isn't connected`,
|
||||
expected: d.expected,
|
||||
fallback:
|
||||
d.fallback ?? (d.kind === 'audioinput' ? 'the default microphone' : 'the default output'),
|
||||
});
|
||||
|
||||
export const describeLost = (d: MissingDevice): string =>
|
||||
`${d.expected} disconnected — now using ${
|
||||
d.fallback ?? (d.kind === 'audioinput' ? 'the default microphone' : 'the default output')
|
||||
}.`;
|
||||
|
||||
// "Join anyway" holds for the rest of the session for the same device(s).
|
||||
const ACCEPTED_KEY = 'lotus-device-check-accepted';
|
||||
const keyOf = (missing: MissingDevice[]): string =>
|
||||
missing
|
||||
.map((d) => `${d.kind}:${d.expected}`)
|
||||
.sort()
|
||||
.join('|');
|
||||
|
||||
const readAccepted = (): string[] => {
|
||||
try {
|
||||
const v: unknown = JSON.parse(sessionStorage.getItem(ACCEPTED_KEY) ?? '[]');
|
||||
return Array.isArray(v) ? v.filter((x): x is string => typeof x === 'string') : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const isAcceptedThisSession = (missing: MissingDevice[]): boolean =>
|
||||
readAccepted().includes(keyOf(missing));
|
||||
|
||||
export const acceptForSession = (missing: MissingDevice[]): void => {
|
||||
try {
|
||||
const list = readAccepted();
|
||||
const k = keyOf(missing);
|
||||
if (!list.includes(k)) sessionStorage.setItem(ACCEPTED_KEY, JSON.stringify([...list, k]));
|
||||
} catch {
|
||||
// storage unavailable: ask again next time
|
||||
}
|
||||
};
|
||||
@@ -18,3 +18,6 @@ export const callEmbedAtom = atom<CallEmbed | undefined, [CallEmbed | undefined]
|
||||
);
|
||||
|
||||
export const callChatAtom = atom<boolean>(false);
|
||||
|
||||
/** [Gitea #126] The call is full screen (phone turned sideways). */
|
||||
export const immersiveCallAtom = atom<boolean>(false);
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { buildExport, mergeData, parseExport, planImport } from './dataExport';
|
||||
|
||||
const file = buildExport({
|
||||
userId: '@a:hs',
|
||||
accountData: {
|
||||
'io.lotus.bookmarks': { bookmarks: [{ id: 'b1', note: 'x' }] },
|
||||
'io.lotus.user_notes': { notes: { '@b:hs': 'met at LAN party' } },
|
||||
'm.direct': { secret: true },
|
||||
'io.lotus.settings': { theme: 'dark', fontSize: 16 },
|
||||
},
|
||||
decoration: 'halo',
|
||||
localSettings: { callNoiseSuppression: 'ml' },
|
||||
now: new Date('2026-10-25T00:00:00Z'),
|
||||
});
|
||||
|
||||
test('[#114] export keeps only our own types', () => {
|
||||
assert.equal(file.format, 'lotus-chat-data');
|
||||
assert.equal(file.version, 1);
|
||||
assert.deepEqual(Object.keys(file.accountData).sort(), [
|
||||
'io.lotus.bookmarks',
|
||||
'io.lotus.settings',
|
||||
'io.lotus.user_notes',
|
||||
]);
|
||||
assert.equal(file.profile.decoration, 'halo');
|
||||
});
|
||||
|
||||
test('[#114] parse: round trip, wrong files, newer versions, foreign types', () => {
|
||||
const r = parseExport(JSON.stringify(file));
|
||||
assert.ok(r.ok);
|
||||
assert.equal(parseExport('nope').ok, false);
|
||||
assert.equal(parseExport('{"format":"other"}').ok, false);
|
||||
const newer = parseExport(JSON.stringify({ ...file, version: 2 }));
|
||||
assert.ok(!newer.ok && /newer Lotus Chat/.test(newer.error));
|
||||
const sneaky = parseExport(
|
||||
JSON.stringify({ ...file, accountData: { 'm.push_rules': {}, 'io.lotus.bookmarks': {} } }),
|
||||
);
|
||||
assert.ok(sneaky.ok);
|
||||
assert.deepEqual(Object.keys(sneaky.file.accountData), ['io.lotus.bookmarks']);
|
||||
});
|
||||
|
||||
test('[#114] merge: lists by id, maps by key, conflicts kept unless preferred', () => {
|
||||
const mine = { bookmarks: [{ id: 'b1', note: 'mine' }, { id: 'b2' }] };
|
||||
const theirs = { bookmarks: [{ id: 'b1', note: 'theirs' }, { id: 'b3' }] };
|
||||
const keep = mergeData(mine, theirs);
|
||||
assert.equal(keep.added, 1);
|
||||
assert.equal(keep.conflicts, 1);
|
||||
assert.deepEqual(keep.value, {
|
||||
bookmarks: [{ id: 'b1', note: 'mine' }, { id: 'b2' }, { id: 'b3' }],
|
||||
});
|
||||
const take = mergeData(mine, theirs, true);
|
||||
assert.deepEqual((take.value as typeof mine).bookmarks[0], { id: 'b1', note: 'theirs' });
|
||||
|
||||
const notes = mergeData({ a: 1, b: 2 }, { b: 3, c: 4 });
|
||||
assert.deepEqual(notes, { value: { a: 1, b: 2, c: 4 }, added: 1, conflicts: 1 });
|
||||
assert.deepEqual(mergeData(undefined, { x: 1 }), { value: { x: 1 }, added: 1, conflicts: 0 });
|
||||
assert.deepEqual(mergeData(['a'], ['a', 'b']).value, ['a', 'b']);
|
||||
});
|
||||
|
||||
test('[#114] plan summarises per category', () => {
|
||||
const plan = planImport(file, {
|
||||
accountData: { 'io.lotus.settings': { theme: 'light' } },
|
||||
decoration: null,
|
||||
localSettings: { callNoiseSuppression: 'ml' },
|
||||
});
|
||||
const by = Object.fromEntries(plan.map((p) => [p.key, p]));
|
||||
assert.deepEqual(
|
||||
[by['io.lotus.settings'].added, by['io.lotus.settings'].conflicts],
|
||||
[1, 1],
|
||||
'fontSize new, theme differs',
|
||||
);
|
||||
assert.equal(by['io.lotus.bookmarks'].added, 1);
|
||||
assert.equal(by['profile.decoration'].added, 1);
|
||||
assert.deepEqual([by['local.settings'].added, by['local.settings'].conflicts], [0, 0]);
|
||||
});
|
||||
@@ -0,0 +1,219 @@
|
||||
/**
|
||||
* [Gitea #114] Export / import "your data": the Lotus-side personal data of
|
||||
* an account (not message history, not encryption keys: those have their own
|
||||
* exports, and keys are secret). One JSON file:
|
||||
*
|
||||
* { format: 'lotus-chat-data', version: 1, exportedAt, userId,
|
||||
* accountData: { [type]: content }, profile: { decoration }, local: { settings } }
|
||||
*
|
||||
* Import MERGES: anything missing here is added; a value that differs is a
|
||||
* conflict, kept as it is unless the user chooses the file's. Pure helpers.
|
||||
*/
|
||||
|
||||
export const EXPORT_FORMAT = 'lotus-chat-data';
|
||||
export const EXPORT_VERSION = 1;
|
||||
|
||||
/** The account-data types that are the user's own Lotus data, with labels. */
|
||||
export const EXPORT_ACCOUNT_DATA: { type: string; label: string }[] = [
|
||||
{ type: 'io.lotus.settings', label: 'Synced settings' },
|
||||
{ type: 'io.lotus.bookmarks', label: 'Bookmarks' },
|
||||
{ type: 'io.lotus.user_notes', label: 'Private notes about people' },
|
||||
{ type: 'io.lotus.room_names', label: 'Your names for rooms' },
|
||||
{ type: 'in.cinny.spaces', label: 'Room sections and sidebar' },
|
||||
{ type: 'io.lotus.reminders', label: 'Reminders' },
|
||||
{ type: 'io.lotus.status_presets', label: 'Status presets' },
|
||||
{ type: 'io.lotus.thread_notifications', label: 'Thread notification settings' },
|
||||
{ type: 'io.lotus.mute_timers', label: 'Timed mutes' },
|
||||
{ type: 'io.lotus.soundboard', label: 'Soundboard (clips stay on the server)' },
|
||||
{ type: 'io.lotus.soundboard_rooms', label: 'Soundboards enabled everywhere' },
|
||||
{ type: 'im.ponies.user_emotes', label: 'Your emoji and stickers' },
|
||||
{ type: 'im.ponies.emote_rooms', label: 'Emoji packs enabled everywhere' },
|
||||
];
|
||||
|
||||
export type ExportFile = {
|
||||
format: typeof EXPORT_FORMAT;
|
||||
version: number;
|
||||
exportedAt: string;
|
||||
userId: string;
|
||||
accountData: Record<string, unknown>;
|
||||
profile: { decoration: string | null };
|
||||
local: { settings: Record<string, unknown> | null };
|
||||
};
|
||||
|
||||
export const buildExport = (input: {
|
||||
userId: string;
|
||||
accountData: Record<string, unknown>;
|
||||
decoration: string | null;
|
||||
localSettings: Record<string, unknown> | null;
|
||||
now?: Date;
|
||||
}): ExportFile => {
|
||||
const accountData: Record<string, unknown> = {};
|
||||
EXPORT_ACCOUNT_DATA.forEach(({ type }) => {
|
||||
const c = input.accountData[type];
|
||||
if (c !== undefined && c !== null) accountData[type] = c;
|
||||
});
|
||||
return {
|
||||
format: EXPORT_FORMAT,
|
||||
version: EXPORT_VERSION,
|
||||
exportedAt: (input.now ?? new Date()).toISOString(),
|
||||
userId: input.userId,
|
||||
accountData,
|
||||
profile: { decoration: input.decoration },
|
||||
local: { settings: input.localSettings },
|
||||
};
|
||||
};
|
||||
|
||||
const isObject = (v: unknown): v is Record<string, unknown> =>
|
||||
!!v && typeof v === 'object' && !Array.isArray(v);
|
||||
|
||||
export type ParseResult = { ok: true; file: ExportFile } | { ok: false; error: string };
|
||||
|
||||
/** Validate an imported file; older versions would be migrated here. */
|
||||
export const parseExport = (text: string): ParseResult => {
|
||||
let v: unknown;
|
||||
try {
|
||||
v = JSON.parse(text);
|
||||
} catch {
|
||||
return { ok: false, error: "This isn't a Lotus Chat data file (it isn't valid JSON)." };
|
||||
}
|
||||
if (!isObject(v) || v.format !== EXPORT_FORMAT)
|
||||
return { ok: false, error: "This isn't a Lotus Chat data file." };
|
||||
if (typeof v.version !== 'number' || v.version < 1)
|
||||
return { ok: false, error: 'This data file is damaged (no version).' };
|
||||
if (v.version > EXPORT_VERSION)
|
||||
return {
|
||||
ok: false,
|
||||
error: 'This file was made by a newer Lotus Chat. Update the app, then import it again.',
|
||||
};
|
||||
const accountData = isObject(v.accountData) ? v.accountData : {};
|
||||
const known = new Set(EXPORT_ACCOUNT_DATA.map((t) => t.type));
|
||||
const filtered: Record<string, unknown> = {};
|
||||
Object.entries(accountData).forEach(([type, content]) => {
|
||||
// Only our own types: a file can't be used to write arbitrary account data.
|
||||
if (known.has(type) && content !== null && content !== undefined) filtered[type] = content;
|
||||
});
|
||||
const profile = isObject(v.profile) ? v.profile : {};
|
||||
const local = isObject(v.local) ? v.local : {};
|
||||
return {
|
||||
ok: true,
|
||||
file: {
|
||||
format: EXPORT_FORMAT,
|
||||
version: v.version,
|
||||
exportedAt: typeof v.exportedAt === 'string' ? v.exportedAt : '',
|
||||
userId: typeof v.userId === 'string' ? v.userId : '',
|
||||
accountData: filtered,
|
||||
profile: {
|
||||
decoration: typeof profile.decoration === 'string' ? profile.decoration : null,
|
||||
},
|
||||
local: { settings: isObject(local.settings) ? local.settings : null },
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const same = (a: unknown, b: unknown): boolean => JSON.stringify(a) === JSON.stringify(b);
|
||||
|
||||
const itemKey = (v: unknown): string => {
|
||||
if (isObject(v)) {
|
||||
const id = v.id ?? v.eventId ?? v.event_id ?? v.key ?? v.roomId ?? v.room_id ?? v.mxc;
|
||||
if (typeof id === 'string' || typeof id === 'number') return `id:${String(id)}`;
|
||||
}
|
||||
return `json:${JSON.stringify(v)}`;
|
||||
};
|
||||
|
||||
export type MergeResult = { value: unknown; added: number; conflicts: number };
|
||||
|
||||
/**
|
||||
* Pure: merge `incoming` into `current`. Lists: add items that are missing
|
||||
* (matched by id, else by content). Objects: add missing keys, recurse into
|
||||
* shared ones. A differing leaf is a conflict: `preferIncoming` decides.
|
||||
*/
|
||||
export const mergeData = (
|
||||
current: unknown,
|
||||
incoming: unknown,
|
||||
preferIncoming = false,
|
||||
): MergeResult => {
|
||||
if (current === undefined || current === null) {
|
||||
return { value: incoming, added: incoming === undefined ? 0 : 1, conflicts: 0 };
|
||||
}
|
||||
if (Array.isArray(current) && Array.isArray(incoming)) {
|
||||
const have = new Map(current.map((v, i) => [itemKey(v), i]));
|
||||
const out = [...current];
|
||||
let added = 0;
|
||||
let conflicts = 0;
|
||||
incoming.forEach((item) => {
|
||||
const k = itemKey(item);
|
||||
const at = have.get(k);
|
||||
if (at === undefined) {
|
||||
out.push(item);
|
||||
have.set(k, out.length - 1);
|
||||
added += 1;
|
||||
} else if (!same(out[at], item)) {
|
||||
conflicts += 1;
|
||||
if (preferIncoming) out[at] = item;
|
||||
}
|
||||
});
|
||||
return { value: out, added, conflicts };
|
||||
}
|
||||
if (isObject(current) && isObject(incoming)) {
|
||||
const out: Record<string, unknown> = { ...current };
|
||||
let added = 0;
|
||||
let conflicts = 0;
|
||||
Object.entries(incoming).forEach(([k, v]) => {
|
||||
if (!(k in current)) {
|
||||
out[k] = v;
|
||||
added += 1;
|
||||
return;
|
||||
}
|
||||
const r = mergeData(current[k], v, preferIncoming);
|
||||
out[k] = r.value;
|
||||
added += r.added;
|
||||
conflicts += r.conflicts;
|
||||
});
|
||||
return { value: out, added, conflicts };
|
||||
}
|
||||
if (same(current, incoming)) return { value: current, added: 0, conflicts: 0 };
|
||||
return { value: preferIncoming ? incoming : current, added: 0, conflicts: 1 };
|
||||
};
|
||||
|
||||
export type ImportPlanItem = {
|
||||
key: string;
|
||||
label: string;
|
||||
added: number;
|
||||
conflicts: number;
|
||||
};
|
||||
|
||||
/** What importing `file` into the current data would change, per category. */
|
||||
export const planImport = (
|
||||
file: ExportFile,
|
||||
current: {
|
||||
accountData: Record<string, unknown>;
|
||||
decoration: string | null;
|
||||
localSettings: Record<string, unknown> | null;
|
||||
},
|
||||
): ImportPlanItem[] => {
|
||||
const items: ImportPlanItem[] = [];
|
||||
EXPORT_ACCOUNT_DATA.forEach(({ type, label }) => {
|
||||
if (!(type in file.accountData)) return;
|
||||
const r = mergeData(current.accountData[type], file.accountData[type]);
|
||||
items.push({ key: type, label, added: r.added, conflicts: r.conflicts });
|
||||
});
|
||||
if (file.profile.decoration !== null) {
|
||||
const differs = current.decoration !== file.profile.decoration;
|
||||
items.push({
|
||||
key: 'profile.decoration',
|
||||
label: 'Avatar decoration',
|
||||
added: !current.decoration && differs ? 1 : 0,
|
||||
conflicts: current.decoration && differs ? 1 : 0,
|
||||
});
|
||||
}
|
||||
if (file.local.settings) {
|
||||
const r = mergeData(current.localSettings ?? {}, file.local.settings);
|
||||
items.push({
|
||||
key: 'local.settings',
|
||||
label: "This device's settings",
|
||||
added: r.added,
|
||||
conflicts: r.conflicts,
|
||||
});
|
||||
}
|
||||
return items;
|
||||
};
|
||||
Reference in New Issue
Block a user