Add the browser version, a toolbar, description previews and hints
Browser version - Self-hosted proxy (server/) that serves the web build and bridges WebSocket connections to Mumble servers over TLS, with a server allowlist or allow-any mode - WebSocket transport and a browser platform layer; identities live in the browser - npm run build:web, dev:web, proxy and test:e2e:web; proxy unit tests Interface - Toolbar next to mute and deafen: description editor, settings, expand or collapse all - Channels with a description show a marker; resting on the row previews it - Collapse all keeps channels with people open - Hints (title tooltips) can be switched on in a new Accessibility settings tab - New identities can set the username suggested when connecting - Own user information tells the client address from the one the server sees Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
+66
-3
@@ -78,7 +78,8 @@ try {
|
||||
// First start: identity setup wizard
|
||||
await page.getByRole('dialog', { name: 'Set up your identity' }).waitFor();
|
||||
await page.getByRole('button', { name: /Create a new identity/ }).click();
|
||||
await page.getByLabel('Name').fill('alice');
|
||||
await page.getByLabel('Name', { exact: true }).fill('alice');
|
||||
assert.ok(await page.getByLabel('Use this name as my username').isChecked());
|
||||
await page.getByRole('button', { name: 'Create', exact: true }).click();
|
||||
await page.getByRole('button', { name: 'Skip for now' }).click();
|
||||
await page.getByRole('button', { name: 'Done' }).click();
|
||||
@@ -119,7 +120,7 @@ try {
|
||||
await page.getByTitle('Add a server').click();
|
||||
await page.getByLabel('Address').fill(host);
|
||||
await page.getByLabel('Port').fill(port);
|
||||
await page.getByLabel('Username').fill('alice');
|
||||
assert.equal(await page.getByLabel('Username').inputValue(), 'alice', 'username suggested from the identity');
|
||||
await page.getByLabel('Label').fill('Test Server');
|
||||
await page.getByRole('button', { name: 'Save and connect' }).click();
|
||||
await page.getByText(/Connected/).first().waitFor();
|
||||
@@ -331,8 +332,28 @@ try {
|
||||
assert.equal(await page.locator('.rail').evaluate(el => getComputedStyle(el).backgroundColor), 'rgb(0, 128, 128)');
|
||||
await page.getByRole('radio', { name: 'Dark' }).click();
|
||||
assert.equal(await page.evaluate(() => document.documentElement.dataset.theme), undefined);
|
||||
// Hints are off by default: the title under the pointer is set aside while hovered, and back afterwards
|
||||
const hintTarget = page.locator('.rail').getByRole('button', { name: 'Add a server' });
|
||||
const titleOf = () => page.locator('.rail .tile.add').first().getAttribute('title');
|
||||
await page.getByRole('tab', { name: 'Accessibility' }).click();
|
||||
assert.equal(await page.getByLabel('Show hints when the pointer rests').isChecked(), false);
|
||||
await page.getByRole('button', { name: 'Done', exact: true }).click();
|
||||
console.log('ok: color schemes');
|
||||
await hintTarget.hover();
|
||||
assert.equal(await titleOf(), null, 'no tooltip while hints are off');
|
||||
await page.mouse.move(700, 400);
|
||||
assert.equal(await titleOf(), 'Add a server');
|
||||
await page.getByTitle('Settings').click();
|
||||
await page.getByRole('tab', { name: 'Accessibility' }).click();
|
||||
await page.getByLabel('Show hints when the pointer rests').check();
|
||||
await page.getByRole('button', { name: 'Done', exact: true }).click();
|
||||
await hintTarget.hover();
|
||||
assert.equal(await titleOf(), 'Add a server', 'tooltip kept while hints are on');
|
||||
await page.mouse.move(700, 400);
|
||||
await page.getByTitle('Settings').click();
|
||||
await page.getByRole('tab', { name: 'Accessibility' }).click();
|
||||
await page.getByLabel('Show hints when the pointer rests').uncheck();
|
||||
await page.getByRole('button', { name: 'Done', exact: true }).click();
|
||||
console.log('ok: color schemes, hints off by default and can be turned on');
|
||||
|
||||
// Layouts like the desktop client: classic (channels right of chat), stacked (channels above)
|
||||
const box = (sel: string) => page.locator(sel).first().boundingBox().then(b => b!);
|
||||
@@ -571,6 +592,15 @@ try {
|
||||
await srvInfo.waitFor({ state: 'detached' });
|
||||
console.log('ok: server information dialog');
|
||||
|
||||
// Toolbar: description editor and settings
|
||||
await page.locator('.me').getByRole('button', { name: 'Change your description' }).click();
|
||||
await page.locator('.panel .rich').waitFor();
|
||||
await page.locator('.panel').getByRole('button', { name: 'Cancel' }).click();
|
||||
await page.locator('.me').getByRole('button', { name: 'Configure' }).click();
|
||||
await page.getByRole('dialog', { name: 'Settings' }).waitFor();
|
||||
await page.getByRole('button', { name: 'Done', exact: true }).click();
|
||||
console.log('ok: toolbar opens the description editor and settings');
|
||||
|
||||
// Information: own connection shows client details and the full certificate
|
||||
await page.locator('.sidebar .user.self').click({ button: 'right' });
|
||||
await page.getByRole('menuitem', { name: 'Information' }).click();
|
||||
@@ -629,6 +659,29 @@ try {
|
||||
assert.equal(await page.locator('.me .who span').textContent(), 'Root');
|
||||
console.log('ok: single click shows description without joining');
|
||||
|
||||
// Description marker: only on channels that have one. Resting on the row previews, clicking the marker opens the panel
|
||||
const marker = page.locator('.channel', { hasText: 'Lobby' }).getByRole('button', { name: 'Show description of Lobby' });
|
||||
assert.equal(await page.locator('.channel', { hasText: 'Games' }).locator('.desc').count(), 0);
|
||||
await page.locator('.panel').getByRole('button', { name: 'Close' }).click();
|
||||
await page.locator('.channel .name', { hasText: 'Games' }).hover();
|
||||
await page.waitForTimeout(2000);
|
||||
assert.equal(await page.locator('.desc-pop').count(), 0, 'no preview for a channel without description');
|
||||
for (const spot of [page.locator('.channel .name', { hasText: 'Lobby' }), marker]) {
|
||||
await spot.hover();
|
||||
await page.waitForTimeout(500);
|
||||
assert.equal(await page.locator('.desc-pop').count(), 0, 'no preview before 1 second');
|
||||
await page.locator('.desc-pop .html', { hasText: 'Welcome to the lobby' }).waitFor({ timeout: 3000 });
|
||||
// Opens at the pointer
|
||||
const at = (await spot.boundingBox())!;
|
||||
const pop = (await page.locator('.desc-pop').boundingBox())!;
|
||||
assert.ok(Math.abs(pop.x - (at.x + at.width / 2 + 12)) < 3 && Math.abs(pop.y - (at.y + at.height / 2 + 12)) < 3, 'preview at the pointer');
|
||||
await page.mouse.move(700, 400);
|
||||
await page.locator('.desc-pop').waitFor({ state: 'detached' });
|
||||
}
|
||||
await marker.click();
|
||||
await page.locator('.panel .html', { hasText: 'Welcome to the lobby' }).waitFor();
|
||||
console.log('ok: description previews on hover, marker opens it on click');
|
||||
|
||||
// Side chat sends to that channel while staying in Root
|
||||
const lobby = [...bob.channels.values()].find(c => c.name === 'Lobby')!;
|
||||
await page.locator('.panel [role=tab]', { hasText: 'Chat' }).click();
|
||||
@@ -760,6 +813,16 @@ try {
|
||||
await page.getByRole('button', { name: 'Delete channel' }).click();
|
||||
await bobSees('deleted', () => !chByName('Team Room'));
|
||||
console.log('ok: channel deleted');
|
||||
|
||||
// Toolbar: expand and collapse the whole tree
|
||||
await page.locator('.me').getByRole('button', { name: 'Expand all channels' }).click();
|
||||
await page.locator('.channel', { hasText: 'Minecraft' }).waitFor();
|
||||
await page.locator('.me').getByRole('button', { name: 'Collapse all channels' }).click();
|
||||
await page.locator('.channel', { hasText: 'Minecraft' }).waitFor({ state: 'detached' });
|
||||
// Channels with people in them stay open
|
||||
assert.notEqual(await page.locator('.me .who span').textContent(), 'Root');
|
||||
await page.locator('.sidebar .row.user.self').waitFor();
|
||||
console.log('ok: toolbar expands and collapses all channels, occupied ones stay open');
|
||||
}
|
||||
|
||||
// Without an upload host, images are sent inline within Mumble's image limit
|
||||
|
||||
@@ -81,7 +81,7 @@ const page = await app.firstWindow();
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
|
||||
await page.getByRole('button', { name: /Create a new identity/ }).click();
|
||||
await page.getByLabel('Name').fill('kibi');
|
||||
await page.getByLabel('Name', { exact: true }).fill('kibi');
|
||||
await page.getByRole('button', { name: 'Create', exact: true }).click();
|
||||
await page.getByRole('button', { name: 'Skip for now' }).click();
|
||||
await page.getByRole('button', { name: 'Done' }).click();
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
// A bare browser window for the web E2E: no preload, so the page runs as it would in a browser.
|
||||
const { app, BrowserWindow, session } = require('electron');
|
||||
const fs = require('node:fs');
|
||||
const path = require('node:path');
|
||||
|
||||
app.whenReady().then(() => {
|
||||
session.defaultSession.setPermissionRequestHandler((_wc, _permission, cb) => cb(true));
|
||||
// Electron would open a save dialog; a browser saves to the downloads folder
|
||||
session.defaultSession.on('will-download', (_e, item) => {
|
||||
const file = path.join(process.env.MUMH5_DOWNLOADS, item.getFilename());
|
||||
item.setSavePath(file);
|
||||
item.once('done', (_ev, state) => { if (state === 'completed') fs.writeFileSync(file + '.done', ''); });
|
||||
});
|
||||
const win = new BrowserWindow({ width: 1280, height: 800, webPreferences: { contextIsolation: true, sandbox: true, nodeIntegration: false } });
|
||||
win.loadURL(process.env.MUMH5_WEB_URL);
|
||||
});
|
||||
app.on('window-all-closed', () => app.quit());
|
||||
@@ -0,0 +1,168 @@
|
||||
// Drives the browser build through the web proxy against a real Mumble server.
|
||||
// npm run build:web && MUMBLE_TEST_HOST=localhost:64739 npm run test:e2e:web
|
||||
// The page runs in a plain Chromium window (Electron without the preload), served by the bundled proxy.
|
||||
import { _electron as electron } from 'playwright-core';
|
||||
import electronPath from 'electron';
|
||||
import assert from 'node:assert/strict';
|
||||
import { spawn } from 'node:child_process';
|
||||
import { mkdtempSync, existsSync, statSync } from 'node:fs';
|
||||
import { tmpdir } from 'node:os';
|
||||
import path from 'node:path';
|
||||
import { createCodec } from '../../src/core/proto.ts';
|
||||
import { decodeVoice, type VoicePacket } from '../../src/core/voice-packet.ts';
|
||||
import { MumbleClient } from '../../src/core/client.ts';
|
||||
import type { Transport } from '../../src/core/transport.ts';
|
||||
import { openTls } from '../../electron/tls-transport.ts';
|
||||
import { generateIdentity } from '../../electron/identity.ts';
|
||||
|
||||
const target = process.env.MUMBLE_TEST_HOST;
|
||||
if (!target) {
|
||||
console.log('MUMBLE_TEST_HOST not set, skipping');
|
||||
process.exit(0);
|
||||
}
|
||||
const [host, port] = target.split(':');
|
||||
const root = path.resolve(import.meta.dirname, '../..');
|
||||
|
||||
function headless(username: string): Promise<MumbleClient> {
|
||||
const id = generateIdentity(username);
|
||||
const client = new MumbleClient(createCodec());
|
||||
const t: Transport = { onData: null, onClose: null, send: b => conn.send(b), close: () => conn.close() };
|
||||
const conn = openTls(host, Number(port), id.certPem, id.keyPem, {
|
||||
onSecure: () => {}, onData: c => t.onData?.(c), onClose: r => t.onClose?.(r)
|
||||
});
|
||||
client.connect(t, { username, os: 'test' });
|
||||
return new Promise((res, rej) => { client.on('synced', () => res(client)); client.on('close', rej); });
|
||||
}
|
||||
|
||||
function within<T>(p: Promise<T>, label: string, ms = 10000): Promise<T> {
|
||||
return Promise.race([p, new Promise<T>((_, rej) => setTimeout(() => rej(new Error(`Timed out waiting for: ${label}`)), ms))]);
|
||||
}
|
||||
|
||||
// The bundled proxy, as it would be deployed: one allowed server, serving dist-web
|
||||
const proxyPort = 18000 + Math.floor(Math.random() * 1000);
|
||||
const { ELECTRON_RUN_AS_NODE, ...env } = process.env;
|
||||
const proxy = spawn(process.execPath, [path.join(root, 'dist-proxy/proxy.mjs')], {
|
||||
env: { ...env, MUMH5_PORT: String(proxyPort), MUMH5_SERVERS: `${target}=Test Server` }, stdio: ['ignore', 'pipe', 'inherit']
|
||||
});
|
||||
await within(new Promise<void>((res, rej) => {
|
||||
proxy.stdout.on('data', d => { if (String(d).includes('listening')) res(); });
|
||||
proxy.on('exit', code => rej(new Error(`proxy exited with ${code}`)));
|
||||
}), 'proxy start');
|
||||
|
||||
const downloads = mkdtempSync(path.join(tmpdir(), 'mumh5-e2e-dl-'));
|
||||
const app = await electron.launch({
|
||||
executablePath: electronPath as unknown as string,
|
||||
args: [path.join(root, 'test/e2e/web-shell.cjs'), `--user-data-dir=${mkdtempSync(path.join(tmpdir(), 'mumh5-e2e-'))}`, '--ozone-platform=x11',
|
||||
'--use-fake-device-for-media-stream', '--use-fake-ui-for-media-stream'],
|
||||
env: { ...env, MUMH5_WEB_URL: `http://127.0.0.1:${proxyPort}/`, MUMH5_DOWNLOADS: downloads } as Record<string, string>
|
||||
});
|
||||
const bob = await headless('bob');
|
||||
const name = `webalice${Date.now() % 100000}`;
|
||||
try {
|
||||
const page = await app.firstWindow();
|
||||
page.on('console', m => { if (m.type() === 'error') console.log('[page]', m.text()); });
|
||||
await page.setViewportSize({ width: 1280, height: 800 });
|
||||
assert.equal(await page.evaluate(() => 'mumh5Native' in window), false, 'no desktop API in the page');
|
||||
|
||||
// Identity: created through the proxy, kept in the browser
|
||||
await page.getByRole('dialog', { name: 'Set up your identity' }).waitFor();
|
||||
await page.getByText(/passed to the proxy at/).waitFor();
|
||||
await page.getByRole('button', { name: /Create a new identity/ }).click();
|
||||
await page.getByLabel('Name', { exact: true }).fill('alice');
|
||||
await page.getByRole('button', { name: 'Create', exact: true }).click();
|
||||
// Backup: downloaded as a .p12 file
|
||||
await page.getByLabel(/^Backup password/).fill('backup-pass');
|
||||
await page.getByLabel('Repeat password').fill('backup-pass');
|
||||
await page.getByRole('button', { name: 'Save backup...' }).click();
|
||||
await page.getByText('Backup saved to your downloads as alice.p12').waitFor();
|
||||
const saved = path.join(downloads, 'alice.p12');
|
||||
for (let i = 0; i < 50 && !existsSync(saved + '.done'); i++) await new Promise(r => setTimeout(r, 100));
|
||||
assert.ok(existsSync(saved + '.done') && statSync(saved).size > 1000, 'backup file downloaded');
|
||||
await page.getByRole('button', { name: 'Done' }).click();
|
||||
await page.getByRole('dialog', { name: 'Set up your identity' }).waitFor({ state: 'detached' });
|
||||
const stored = await page.evaluate(() => JSON.parse(localStorage.getItem('mumh5.identities')!));
|
||||
assert.equal(stored.identities.length, 1);
|
||||
assert.equal(stored.setupDone, true);
|
||||
console.log('ok: identity created through the proxy and backed up');
|
||||
|
||||
// Desktop-only features are not offered
|
||||
assert.equal(await page.getByTitle('Browse public servers').count(), 0);
|
||||
await page.getByTitle('Settings').click();
|
||||
await page.getByRole('tab', { name: 'Chat and files' }).click();
|
||||
assert.ok(await page.getByLabel('Link previews').locator('option[value=direct]').isDisabled());
|
||||
await page.getByRole('tab', { name: 'Identities' }).click();
|
||||
await page.getByText('alice', { exact: true }).first().waitFor();
|
||||
await page.getByRole('button', { name: 'Done', exact: true }).click();
|
||||
console.log('ok: public list and direct previews are desktop only');
|
||||
|
||||
// The connect dialog offers the proxy's servers
|
||||
await page.getByTitle('Add a server').click();
|
||||
const pick = page.getByLabel('Server', { exact: true });
|
||||
await pick.waitFor();
|
||||
await page.waitForFunction(v => (document.getElementById('c-host') as HTMLSelectElement)?.value === v, `${host}:${port}`);
|
||||
assert.equal(await page.getByLabel('Label').inputValue(), 'Test Server');
|
||||
await page.getByLabel('Username').fill(name);
|
||||
await page.getByRole('button', { name: 'Save and connect' }).click();
|
||||
await page.getByText(/Connected/).first().waitFor();
|
||||
await page.locator('.sidebar').getByText('bob').waitFor();
|
||||
console.log('ok: connected through the proxy, sees bob');
|
||||
|
||||
// Text both ways
|
||||
const got = new Promise<string>(res => bob.on('text', m => res(m.html)));
|
||||
await page.getByLabel('Message').fill('hello from the browser');
|
||||
await page.keyboard.press('Enter');
|
||||
assert.match(await within(got, 'text from the page'), /hello from the browser/);
|
||||
bob.sendText({ channels: [0] }, 'hello browser');
|
||||
await page.locator('.msg', { hasText: 'hello browser' }).waitFor();
|
||||
console.log('ok: text in both directions');
|
||||
|
||||
// Voice goes through the TCP tunnel
|
||||
const session = () => [...bob.users.values()].find(u => u.name === name)!.session;
|
||||
const stream = new Promise<VoicePacket[]>(res => {
|
||||
const packets: VoicePacket[] = [];
|
||||
const off = bob.on('voice', raw => {
|
||||
const p = decodeVoice(raw);
|
||||
if (!p || p.session !== session()) return;
|
||||
packets.push(p);
|
||||
if (packets.length >= 20) { off(); res(packets); }
|
||||
});
|
||||
});
|
||||
await page.getByTitle('Settings').click();
|
||||
await page.getByRole('radio', { name: /Always on/ }).click();
|
||||
await page.getByRole('button', { name: 'Done', exact: true }).click();
|
||||
const packets = await within(stream, 'voice packets from the page', 20000);
|
||||
assert.ok(packets.every(p => p.opus.length > 0));
|
||||
console.log(`ok: page sends Opus voice through the proxy (${packets[0].opus.length} bytes per packet)`);
|
||||
|
||||
await page.locator('.me').getByRole('button', { name: 'Server information' }).click();
|
||||
await page.getByRole('dialog', { name: 'Server information' }).getByText('Through the TCP connection').waitFor();
|
||||
await page.getByRole('dialog', { name: 'Server information' }).getByRole('button', { name: 'Close', exact: true }).last().click();
|
||||
console.log('ok: server information shows voice over TCP');
|
||||
|
||||
// Own information: with the proxy on this machine the server sees our own address, shown as such
|
||||
await page.locator('.sidebar .row.user.self').click({ button: 'right' });
|
||||
await page.getByRole('menuitem', { name: 'Information' }).click();
|
||||
const own = page.getByRole('dialog', { name: /^Information:/ });
|
||||
await own.getByText('Address', { exact: true }).waitFor();
|
||||
assert.equal(await own.getByText('Seen by the server').count(), 0);
|
||||
await own.getByRole('button', { name: 'Close', exact: true }).last().click();
|
||||
console.log('ok: own information shows the address the server sees');
|
||||
|
||||
// The identity survives a reload and the server recognizes the same certificate
|
||||
const hash = () => [...bob.users.values()].find(u => u.name === name)?.hash;
|
||||
const before = hash();
|
||||
assert.ok(before, 'bob sees the certificate hash');
|
||||
await page.reload();
|
||||
await page.locator('.rail .tile[title^="Test Server"]').click();
|
||||
await page.getByText(/Connected/).first().waitFor();
|
||||
const deadline = Date.now() + 5000;
|
||||
while (hash() !== before && Date.now() < deadline) await new Promise(r => setTimeout(r, 100));
|
||||
assert.equal(hash(), before, 'same certificate after a reload');
|
||||
console.log('ok: identity kept across a reload');
|
||||
|
||||
console.log('WEB E2E PASSED');
|
||||
} finally {
|
||||
bob.disconnect();
|
||||
await app.close().catch(() => {});
|
||||
proxy.kill();
|
||||
}
|
||||
Reference in New Issue
Block a user