Add channel and permission management, sounds, themes and the public server list
- Channels: create, edit, delete, link and move (drag and drop for channels and people), right-click on free space in the channel list - Permission editor with inherited rules, allow/deny per permission, groups and members; menus grey out actions the server does not allow - Notification sounds for connection, channel, chat, mute and push-to-talk events; custom files and TeamSpeak 3 style sound packs (settings.ini), stored in IndexedDB - Color schemes: Dark, Light, Midnight, Frost and Windows 95 - Public server list with live UDP ping, fetched through Chromium's network stack - Kick, ban and connection-lost card with Reconnect - Right-click menus for text fields, links, images and message authors - Formatting toolbar in the message box, shared with the description editor - Resizable channel list, menu headers, registration from the self menu only - Fix: client-side pacing now mirrors Murmur's whole-second leaky bucket exactly, so quick actions are no longer dropped silently Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
+17
-3
@@ -12,10 +12,12 @@
|
||||
import IdentityWizard from './ui/IdentityWizard.svelte';
|
||||
import QuickAudio from './ui/QuickAudio.svelte';
|
||||
import UserInfoDialog from './ui/UserInfoDialog.svelte';
|
||||
import ChannelDialog from './ui/ChannelDialog.svelte';
|
||||
import PublicServers from './ui/PublicServers.svelte';
|
||||
import { identities } from './lib/identities.svelte.ts';
|
||||
import { session } from './lib/session.svelte.ts';
|
||||
import { ui } from './lib/ui.svelte.ts';
|
||||
import type { SavedServer } from './lib/settings.svelte.ts';
|
||||
import { store, type SavedServer } from './lib/settings.svelte.ts';
|
||||
|
||||
let width = $state(window.innerWidth);
|
||||
// wide: rail + sidebar + chat + panel; medium: panel as an overlay; narrow: everything but chat in drawers
|
||||
@@ -26,6 +28,13 @@
|
||||
|
||||
const showPanel = $derived(ui.panelOpen && session.status === 'connected');
|
||||
|
||||
// Color scheme on the root element; dark is the stylesheet default
|
||||
$effect(() => {
|
||||
const t = store.settings.theme;
|
||||
if (t && t !== 'dark') document.documentElement.dataset.theme = t;
|
||||
else delete document.documentElement.dataset.theme;
|
||||
});
|
||||
|
||||
// The panel starts open on wide layouts only
|
||||
let lastLayout = '';
|
||||
$effect(() => {
|
||||
@@ -53,9 +62,9 @@
|
||||
<div class="app {layout}">
|
||||
{#if layout !== 'narrow' || navOpen}
|
||||
<div class="nav" class:drawer={layout === 'narrow'}>
|
||||
<ServerRail onadd={() => (editing = { server: null })} onedit={s => (editing = { server: s })}
|
||||
<ServerRail onadd={() => (editing = { server: null })} onedit={s => (editing = { server: s })} onbrowse={() => (ui.publicServers = true)}
|
||||
onsettings={() => (ui.settingsOpen = true)} />
|
||||
<Sidebar onnavigate={() => { if (layout === 'narrow') navOpen = false; }} />
|
||||
<Sidebar resizable={layout !== 'narrow'} onnavigate={() => { if (layout === 'narrow') navOpen = false; }} />
|
||||
</div>
|
||||
{#if layout === 'narrow'}<button class="scrim" aria-label="Close" onclick={() => (navOpen = false)}></button>{/if}
|
||||
{/if}
|
||||
@@ -73,6 +82,8 @@
|
||||
</div>
|
||||
|
||||
{#if editing}<ConnectDialog server={editing.server} onclose={() => (editing = null)} />{/if}
|
||||
{#if ui.addServer}<ConnectDialog server={null} prefill={ui.addServer} onclose={() => (ui.addServer = null)} />{/if}
|
||||
{#if ui.publicServers}<PublicServers onclose={() => (ui.publicServers = false)} />{/if}
|
||||
{#if ui.settingsOpen}<SettingsDialog tab={ui.settingsTab} onclose={() => { ui.settingsOpen = false; ui.settingsTab = 'voice'; }} />{/if}
|
||||
{#if ui.quickAudio}<QuickAudio />{/if}
|
||||
{#if ui.userInfo != null && session.status === 'connected'}
|
||||
@@ -82,6 +93,9 @@
|
||||
{#if ui.cert}<CertViewer {...ui.cert} onclose={() => (ui.cert = null)} />{/if}
|
||||
{#if identities.loaded && !identities.setupDone}<IdentityWizard mode="setup" onclose={() => {}} />
|
||||
{:else if ui.wizard}<IdentityWizard mode={ui.wizard} onclose={() => (ui.wizard = null)} />{/if}
|
||||
{#if ui.channelDialog && session.status === 'connected'}
|
||||
{#key ui.channelDialog}<ChannelDialog {...ui.channelDialog} onclose={() => (ui.channelDialog = null)} />{/key}
|
||||
{/if}
|
||||
{#if ui.prompt}<PromptDialog {...ui.prompt} onclose={() => (ui.prompt = null)} />{/if}
|
||||
<ContextMenu />
|
||||
|
||||
|
||||
@@ -20,6 +20,8 @@
|
||||
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, sans-serif;
|
||||
--mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
|
||||
--fs: 15px;
|
||||
/* Shared height of the bottom bars: your user panel and the message input line up */
|
||||
--footer-h: 52px;
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@@ -102,6 +102,40 @@ export function describeDenial(d: Denial, channelName?: string): string {
|
||||
}
|
||||
}
|
||||
|
||||
// ACL permission bits (ChanACL::Perm)
|
||||
export const PERM = {
|
||||
Write: 0x1, Traverse: 0x2, Enter: 0x4, Speak: 0x8, MuteDeafen: 0x10, Move: 0x20,
|
||||
MakeChannel: 0x40, LinkChannel: 0x80, Whisper: 0x100, TextMessage: 0x200, MakeTempChannel: 0x400,
|
||||
Listen: 0x800, Kick: 0x10000, Ban: 0x20000, Register: 0x40000, SelfRegister: 0x80000, ResetUserContent: 0x100000
|
||||
} as const;
|
||||
|
||||
export interface AclGroup {
|
||||
name: string;
|
||||
inherited: boolean; // exists because a parent defines it (and made it inheritable)
|
||||
inherit: boolean; // members of the parent's group count here too
|
||||
inheritable: boolean; // subchannels may inherit this group
|
||||
add: number[]; // user ids added here
|
||||
remove: number[]; // user ids removed here
|
||||
inheritedMembers: number[];
|
||||
}
|
||||
|
||||
export interface AclEntry {
|
||||
applyHere: boolean;
|
||||
applySubs: boolean;
|
||||
inherited: boolean; // defined on a parent channel, read-only here
|
||||
userId: number | null;
|
||||
group: string | null;
|
||||
grant: number;
|
||||
deny: number;
|
||||
}
|
||||
|
||||
export interface ChannelAcl {
|
||||
channelId: number;
|
||||
inheritAcls: boolean;
|
||||
groups: AclGroup[];
|
||||
acls: AclEntry[];
|
||||
}
|
||||
|
||||
export interface ConnectOptions {
|
||||
username: string;
|
||||
password?: string;
|
||||
@@ -122,6 +156,9 @@ type ClientEvents = {
|
||||
reject: (type: number, reason: string) => void;
|
||||
voice: (packet: Uint8Array) => void;
|
||||
userStats: (stats: any) => void;
|
||||
acl: (acl: ChannelAcl) => void;
|
||||
userNames: (names: Map<number, string>) => void;
|
||||
permissions: (channelId: number | null, bits: number) => void;
|
||||
ping: (rttMs: number) => void;
|
||||
close: (reason: string) => void;
|
||||
message: (name: MessageName, msg: any) => void;
|
||||
@@ -130,6 +167,10 @@ type ClientEvents = {
|
||||
export class MumbleClient extends Emitter<ClientEvents> {
|
||||
readonly channels = new Map<number, Channel>();
|
||||
readonly users = new Map<number, User>();
|
||||
// Our effective permissions per channel (PermissionQuery); cleared when the server flushes
|
||||
readonly permissions = new Map<number, number>();
|
||||
// Registered user names by id, learned from QueryUsers
|
||||
readonly registeredNames = new Map<number, string>();
|
||||
session: number | null = null;
|
||||
synced = false;
|
||||
welcomeText = '';
|
||||
@@ -276,6 +317,74 @@ export class MumbleClient extends Emitter<ClientEvents> {
|
||||
this.send('UserState', { session, ...state });
|
||||
}
|
||||
|
||||
// ─── Channel management ────────────────────────────────────────────────────
|
||||
|
||||
requestPermissions(channelId: number): void {
|
||||
this.send('PermissionQuery', { channel_id: channelId });
|
||||
}
|
||||
|
||||
can(channelId: number, bit: number): boolean | null {
|
||||
// The server never sends SuperUser (user id 0) its permissions: it may do everything
|
||||
if (this.self?.userId === 0) return true;
|
||||
const p = this.permissions.get(channelId);
|
||||
// Write on a channel implies the other channel permissions
|
||||
return p == null ? null : (p & (bit | PERM.Write)) !== 0;
|
||||
}
|
||||
|
||||
createChannel(parent: number, name: string, opts: { temporary?: boolean; description?: string; position?: number; maxUsers?: number } = {}): void {
|
||||
this.send('ChannelState', {
|
||||
parent, name,
|
||||
temporary: !!opts.temporary,
|
||||
...(opts.description ? { description: opts.description } : {}),
|
||||
...(opts.position ? { position: opts.position } : {}),
|
||||
...(opts.maxUsers ? { max_users: opts.maxUsers } : {})
|
||||
});
|
||||
}
|
||||
|
||||
updateChannel(channelId: number, fields: { name?: string; description?: string; position?: number; maxUsers?: number; parent?: number }): void {
|
||||
const msg: Record<string, unknown> = { channel_id: channelId };
|
||||
if (fields.name != null) msg.name = fields.name;
|
||||
if (fields.description != null) msg.description = fields.description;
|
||||
if (fields.position != null) msg.position = fields.position;
|
||||
if (fields.maxUsers != null) msg.max_users = fields.maxUsers;
|
||||
if (fields.parent != null) msg.parent = fields.parent;
|
||||
this.send('ChannelState', msg);
|
||||
}
|
||||
|
||||
removeChannel(channelId: number): void {
|
||||
this.send('ChannelRemove', { channel_id: channelId });
|
||||
}
|
||||
|
||||
setLinks(channelId: number, add: number[], remove: number[]): void {
|
||||
this.send('ChannelState', { channel_id: channelId, links_add: add, links_remove: remove });
|
||||
}
|
||||
|
||||
queryAcl(channelId: number): void {
|
||||
this.send('ACL', { channel_id: channelId, query: true });
|
||||
}
|
||||
|
||||
// Sends the channel's own rules and groups; inherited ones stay with their channel
|
||||
saveAcl(acl: ChannelAcl): void {
|
||||
this.send('ACL', {
|
||||
channel_id: acl.channelId,
|
||||
inherit_acls: acl.inheritAcls,
|
||||
groups: acl.groups
|
||||
// Same rule as the desktop client: skip groups that only exist by inheritance
|
||||
.filter(g => !(g.inherited && g.inherit && g.inheritable && !g.add.length && !g.remove.length))
|
||||
.map(g => ({ name: g.name, inherit: g.inherit, inheritable: g.inheritable, add: g.add, remove: g.remove })),
|
||||
acls: acl.acls.filter(a => !a.inherited).map(a => ({
|
||||
apply_here: a.applyHere, apply_subs: a.applySubs,
|
||||
...(a.userId != null ? { user_id: a.userId } : { group: a.group ?? 'all' }),
|
||||
grant: a.grant, deny: a.deny
|
||||
}))
|
||||
});
|
||||
}
|
||||
|
||||
// Resolves registered user ids to names and names to ids
|
||||
queryUsers(q: { ids?: number[]; names?: string[] }): void {
|
||||
this.send('QueryUsers', { ids: q.ids ?? [], names: q.names ?? [] });
|
||||
}
|
||||
|
||||
// Connection details of a user; the server decides how much we may see
|
||||
requestUserStats(session: number, statsOnly = false): void {
|
||||
this.send('UserStats', { session, stats_only: statsOnly });
|
||||
@@ -367,6 +476,7 @@ export class MumbleClient extends Emitter<ClientEvents> {
|
||||
this.session = msg.session;
|
||||
this.maxBandwidth = msg.max_bandwidth ?? 0;
|
||||
this.welcomeText = msg.welcome_text ?? '';
|
||||
if (msg.permissions != null) this.permissions.set(0, Number(msg.permissions));
|
||||
this.synced = true;
|
||||
this.ping();
|
||||
this.emit('synced');
|
||||
@@ -419,6 +529,35 @@ export class MumbleClient extends Emitter<ClientEvents> {
|
||||
case 'UserStats':
|
||||
this.emit('userStats', msg);
|
||||
break;
|
||||
case 'ACL': {
|
||||
// proto2 defaults: missing booleans are true
|
||||
const t = (v: unknown) => v !== false;
|
||||
this.emit('acl', {
|
||||
channelId: msg.channel_id,
|
||||
inheritAcls: t(msg.inherit_acls),
|
||||
groups: (msg.groups ?? []).map((g: any) => ({
|
||||
name: g.name, inherited: t(g.inherited), inherit: t(g.inherit), inheritable: t(g.inheritable),
|
||||
add: g.add ?? [], remove: g.remove ?? [], inheritedMembers: g.inherited_members ?? []
|
||||
})),
|
||||
acls: (msg.acls ?? []).map((a: any) => ({
|
||||
applyHere: t(a.apply_here), applySubs: t(a.apply_subs), inherited: t(a.inherited),
|
||||
userId: a.user_id ?? null, group: a.user_id != null ? null : (a.group ?? 'all'),
|
||||
grant: a.grant ?? 0, deny: a.deny ?? 0
|
||||
}))
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'QueryUsers': {
|
||||
const ids: number[] = msg.ids ?? [], names: string[] = msg.names ?? [];
|
||||
ids.forEach((id, i) => { if (names[i]) this.registeredNames.set(id, names[i]); });
|
||||
this.emit('userNames', this.registeredNames);
|
||||
break;
|
||||
}
|
||||
case 'PermissionQuery':
|
||||
if (msg.flush) this.permissions.clear();
|
||||
if (msg.channel_id != null && msg.permissions != null) this.permissions.set(msg.channel_id, msg.permissions);
|
||||
this.emit('permissions', msg.channel_id ?? null, msg.permissions ?? 0);
|
||||
break;
|
||||
case 'PluginDataTransmission':
|
||||
if (msg.senderSession != null && msg.dataID) {
|
||||
this.emit('pluginData', msg.senderSession, msg.dataID, msg.data ?? new Uint8Array(0));
|
||||
|
||||
+32
-2
@@ -2,13 +2,41 @@ import { session } from './session.svelte.ts';
|
||||
import { ui } from './ui.svelte.ts';
|
||||
import { store } from './settings.svelte.ts';
|
||||
import { voice, userKey } from './audio/voice.svelte.ts';
|
||||
import { sounds } from './audio/sounds.svelte.ts';
|
||||
import type { MenuItem } from './menu.svelte.ts';
|
||||
import type { Channel, User } from '../core/client.ts';
|
||||
import { PERM, type Channel, type User } from '../core/client.ts';
|
||||
|
||||
// Right-click menu for a channel in the tree
|
||||
export function channelMenu(c: Channel): MenuItem[] {
|
||||
const here = session.self?.channelId === c.id;
|
||||
const mine = session.self?.channelId ?? 0;
|
||||
// Greyed out only when the server said no; unknown permissions stay enabled
|
||||
const no = (bit: number) => session.can(c.id, bit) === false;
|
||||
const linked = c.links.has(mine);
|
||||
const manage: MenuItem[] = [
|
||||
{ separator: true, label: '' },
|
||||
{ label: 'Create channel...', disabled: no(PERM.MakeChannel) && no(PERM.MakeTempChannel), action: () => (ui.channelDialog = { mode: 'create', parent: c.id }) },
|
||||
{ label: 'Edit channel...', disabled: no(PERM.Write), action: () => (ui.channelDialog = { mode: 'edit', id: c.id }) },
|
||||
{ label: 'Permissions...', disabled: no(PERM.Write), action: () => (ui.channelDialog = { mode: 'edit', id: c.id, tab: 'permissions' }) }
|
||||
];
|
||||
if (!here) {
|
||||
manage.push(linked
|
||||
? { label: 'Unlink from my channel', disabled: no(PERM.LinkChannel), action: () => session.client?.setLinks(c.id, [], [mine]) }
|
||||
: { label: 'Link to my channel', disabled: no(PERM.LinkChannel), action: () => session.client?.setLinks(c.id, [mine], []) });
|
||||
}
|
||||
if (c.links.size) manage.push({ label: 'Unlink all', disabled: no(PERM.LinkChannel), action: () => session.client?.setLinks(c.id, [], [...c.links]) });
|
||||
if (c.id !== 0) {
|
||||
manage.push({
|
||||
label: 'Delete channel...', danger: true, disabled: no(PERM.Write),
|
||||
action: () => (ui.prompt = {
|
||||
title: `Delete ${c.name}?`, label: '', confirm: 'Delete channel', danger: true, input: 'none',
|
||||
text: 'The channel, its subchannels and their permissions are removed for everyone. People inside are moved out.',
|
||||
onsubmit: () => { session.client?.removeChannel(c.id); sounds.play('channelDeleted'); }
|
||||
})
|
||||
});
|
||||
}
|
||||
return [
|
||||
{ header: true, label: c.name || 'Root' },
|
||||
{ label: here ? 'You are here' : 'Join channel', action: () => session.joinChannel(c.id), disabled: here || !c.canEnter },
|
||||
{ label: 'Open chat', action: () => { session.showChannel(c.id, 'chat'); ui.panelOpen = true; } },
|
||||
{ label: 'Show description', action: () => { session.showChannel(c.id, 'info'); ui.panelOpen = true; } },
|
||||
@@ -17,7 +45,8 @@ export function channelMenu(c: Channel): MenuItem[] {
|
||||
{ label: 'Expand all', action: () => session.setAllExpanded(true) },
|
||||
{ label: 'Collapse all', action: () => session.setAllExpanded(false) },
|
||||
{ separator: true, label: '' },
|
||||
{ label: 'Copy channel name', action: () => navigator.clipboard.writeText(c.name || 'Root') }
|
||||
{ label: 'Copy channel name', action: () => navigator.clipboard.writeText(c.name || 'Root') },
|
||||
...manage
|
||||
];
|
||||
}
|
||||
|
||||
@@ -27,6 +56,7 @@ export function userMenu(u: User): MenuItem[] {
|
||||
const self = session.self;
|
||||
const isSelf = u.session === self?.session;
|
||||
const items: MenuItem[] = [
|
||||
{ header: true, label: store.displayName(u) },
|
||||
{ label: 'View profile', action: () => { session.showUser(u.session); ui.panelOpen = true; } }
|
||||
];
|
||||
if (isSelf) {
|
||||
|
||||
@@ -0,0 +1,308 @@
|
||||
import { load, save } from '../storage.ts';
|
||||
import { voice } from './voice.svelte.ts';
|
||||
import { putBlob, getBlob, deleteBlob } from '../blobstore.ts';
|
||||
|
||||
// Notification sounds for events, like the desktop client. Every event has a synthesized
|
||||
// default; users can replace any of them with their own file (or a whole sound pack).
|
||||
|
||||
// ts: the TeamSpeak 3 sound pack key for the same event, so a TS pack's settings.ini maps exactly.
|
||||
// keys: file name fragments for packs without a settings.ini.
|
||||
export const SOUND_EVENTS = [
|
||||
{ id: 'connected', group: 'Connection', name: 'You connected', ts: 'CONNECTION_CONNECTED', keys: ['connected_welcome', 'connected', 'login', 'welcome'] },
|
||||
{ id: 'disconnected', group: 'Connection', name: 'You disconnected', ts: 'CONNECTION_DISCONNECTED', keys: ['disconnected', 'disconnect', 'logout'] },
|
||||
{ id: 'connectionLost', group: 'Connection', name: 'Connection lost', ts: 'CONNECTION_LOST_CONNECTION', keys: ['connection_lost', 'lost'] },
|
||||
{ id: 'error', group: 'Connection', name: 'Server refused or error', ts: 'SERVER_ERROR', keys: ['error'] },
|
||||
{ id: 'switchedChannel', group: 'You', name: 'You switched channel', ts: 'YOU_SWITCHED_CHANNEL', keys: ['channel_switched', 'switched'] },
|
||||
{ id: 'moved', group: 'You', name: 'You were moved', ts: 'YOU_WERE_MOVED_TO_DIFFERENT_CHANNEL', keys: ['you_were_moved', 'moved'] },
|
||||
{ id: 'kicked', group: 'You', name: 'You were kicked', ts: 'YOU_WERE_KICKED_FROM_SERVER', keys: ['you_kicked_server', 'kicked'] },
|
||||
{ id: 'banned', group: 'You', name: 'You were banned', ts: 'YOU_WERE_BANNED', keys: ['you_were_banned', 'banned'] },
|
||||
{ id: 'denied', group: 'You', name: 'Permission denied', ts: 'SERVER_INSUFFICIENT_PERMISSIONS', keys: ['insufficient_permissions', 'denied'] },
|
||||
{ id: 'userConnected', group: 'Your channel', name: 'Someone connected into your channel', ts: 'CLIENT_CONNECTION_CONNECTED_CURRENT_CHANNEL', keys: ['connection_connected_currentchannel', 'user_connected'] },
|
||||
{ id: 'userDisconnected', group: 'Your channel', name: 'Someone in your channel disconnected', ts: 'CLIENT_CONNECTION_DISCONNECTED_CURRENT_CHANNEL', keys: ['connection_disconnected_currentchannel', 'user_disconnected'] },
|
||||
{ id: 'userJoined', group: 'Your channel', name: 'Someone joined your channel', ts: 'CLIENT_SWITCHED_TO_CURRENT_CHANNEL_APPEARS', keys: ['switched_tocurrentchannel', 'user_joined', 'joined', 'join'] },
|
||||
{ id: 'userLeft', group: 'Your channel', name: 'Someone left your channel', ts: 'CLIENT_SWITCHED_FROM_CURRENT_CHANNEL_DISAPPEARS', keys: ['switched_awayfromcurrentchannel', 'user_left', 'left', 'leave'] },
|
||||
{ id: 'userMovedIn', group: 'Your channel', name: 'Someone was moved into your channel', ts: 'CLIENT_MOVED_TO_CURRENT_CHANNEL_APPEARS', keys: ['moved_tocurrentchannel'] },
|
||||
{ id: 'userMovedOut', group: 'Your channel', name: 'Someone was moved out of your channel', ts: 'CLIENT_MOVED_FROM_CURRENT_CHANNEL_DISAPPEARS', keys: ['moved_awayfromcurrentchannel'] },
|
||||
{ id: 'userKicked', group: 'Your channel', name: 'Someone in your channel was kicked', ts: 'CLIENT_WAS_KICKED_FROM_SERVER_CURRENT_CHANNEL', keys: ['kicked_server_currentchannel'] },
|
||||
{ id: 'userBanned', group: 'Your channel', name: 'Someone in your channel was banned', ts: 'CLIENT_WAS_BANNED_CURRENT_CHANNEL', keys: ['banned_server_currentchannel'] },
|
||||
{ id: 'recordingStarted', group: 'Your channel', name: 'Someone started recording', ts: 'CLIENT_RECORDING_START', keys: ['recording_started'] },
|
||||
{ id: 'recordingStopped', group: 'Your channel', name: 'Someone stopped recording', ts: 'CLIENT_RECORDING_STOP', keys: ['recording_stopped'] },
|
||||
{ id: 'message', group: 'Chat', name: 'Channel message', ts: 'CHAT_RECEIVED_MESSAGE_CHANNEL', keys: ['chat_message_inbound', 'message'] },
|
||||
{ id: 'privateMessage', group: 'Chat', name: 'Direct message', ts: 'CHAT_RECEIVED_MESSAGE_CLIENT', keys: ['private', 'direct', 'pm'] },
|
||||
{ id: 'messageSent', group: 'Chat', name: 'You sent a message', ts: 'CHAT_SENT_MESSAGE_CHANNEL', keys: ['chat_message_outbound', 'sent'], off: true },
|
||||
{ id: 'uploadDone', group: 'Chat', name: 'Upload finished', ts: 'OTHER_FILETRANSFER_COMPLETE', keys: ['filetransfer_complete', 'upload_done'] },
|
||||
{ id: 'uploadFailed', group: 'Chat', name: 'Upload failed', ts: 'OTHER_FILETRANSFER_FAILED', keys: ['filetransfer_failed', 'upload_failed'] },
|
||||
{ id: 'mute', group: 'Microphone and sound', name: 'You muted', ts: 'SOUND_CAPTURE_MUTED', keys: ['mic_muted', 'mute'] },
|
||||
{ id: 'unmute', group: 'Microphone and sound', name: 'You unmuted', ts: 'SOUND_CAPTURE_UNMUTED', keys: ['mic_activated', 'unmute'] },
|
||||
{ id: 'deafen', group: 'Microphone and sound', name: 'You deafened', ts: 'SOUND_PLAYBACK_MUTED', keys: ['sound_muted', 'deafen'] },
|
||||
{ id: 'undeafen', group: 'Microphone and sound', name: 'You undeafened', ts: 'SOUND_PLAYBACK_UNMUTED', keys: ['sound_resumed', 'undeafen'] },
|
||||
{ id: 'pttDown', group: 'Microphone and sound', name: 'Push to talk pressed', ts: 'SPECIAL_MIC_CLICK_SELF_ON', keys: ['mic_click_on', 'ptt_on'] },
|
||||
{ id: 'pttUp', group: 'Microphone and sound', name: 'Push to talk released', ts: 'SPECIAL_MIC_CLICK_SELF_OFF', keys: ['mic_click_off', 'ptt_off'] },
|
||||
{ id: 'talkingWhileMuted', group: 'Microphone and sound', name: 'You are talking while muted', ts: 'SPECIAL_TALKING_WHILE_MUTED', keys: ['stop_talking', 'talking_while_muted'] },
|
||||
{ id: 'channelCreated', group: 'Channels', name: 'You created a channel', ts: 'CHANNEL_CREATED_BY_YOU', keys: ['channel_created'] },
|
||||
{ id: 'channelDeleted', group: 'Channels', name: 'You deleted a channel', ts: 'CHANNEL_DELETED_BY_YOU', keys: ['channel_deleted'] },
|
||||
{ id: 'channelEdited', group: 'Channels', name: 'You edited a channel', ts: 'CHANNEL_EDITED_CURRENT_BY_YOU', keys: ['channel_edited'] },
|
||||
{ id: 'channelMoved', group: 'Channels', name: 'You moved a channel', ts: 'CHANNEL_MOVED_BY_YOU', keys: ['channel_moved'] }
|
||||
] as const;
|
||||
|
||||
export type SoundEvent = (typeof SOUND_EVENTS)[number]['id'];
|
||||
|
||||
interface SoundSettings {
|
||||
enabled: boolean;
|
||||
volume: number;
|
||||
// Explicit per-event choice; events missing here use their default (on, unless marked off)
|
||||
on: Partial<Record<SoundEvent, boolean>>;
|
||||
// File names only; the audio itself lives in IndexedDB (key "sound:<event>")
|
||||
custom: Partial<Record<SoundEvent, { name: string; data?: string }>>;
|
||||
}
|
||||
|
||||
const MAX_FILE = 1024 * 1024;
|
||||
|
||||
// Default tones: [frequency Hz, start s, length s] per event, with a short fade
|
||||
const TONES: Record<SoundEvent, [number, number, number][]> = {
|
||||
connected: [[523, 0, 0.09], [659, 0.09, 0.09], [784, 0.18, 0.16]],
|
||||
disconnected: [[784, 0, 0.09], [659, 0.09, 0.09], [523, 0.18, 0.16]],
|
||||
connectionLost: [[523, 0, 0.12], [392, 0.13, 0.12], [262, 0.26, 0.2]],
|
||||
error: [[311, 0, 0.1], [277, 0.11, 0.14]],
|
||||
switchedChannel: [[659, 0, 0.06], [784, 0.07, 0.08]],
|
||||
moved: [[587, 0, 0.06], [880, 0.07, 0.06], [587, 0.14, 0.06]],
|
||||
kicked: [[220, 0, 0.12], [196, 0.13, 0.2]],
|
||||
banned: [[196, 0, 0.14], [165, 0.15, 0.24]],
|
||||
denied: [[311, 0, 0.08], [277, 0.09, 0.1]],
|
||||
userConnected: [[740, 0, 0.07], [988, 0.08, 0.1]],
|
||||
userDisconnected: [[988, 0, 0.07], [740, 0.08, 0.1]],
|
||||
userJoined: [[660, 0, 0.07], [880, 0.08, 0.1]],
|
||||
userLeft: [[880, 0, 0.07], [660, 0.08, 0.1]],
|
||||
userMovedIn: [[587, 0, 0.06], [880, 0.07, 0.08]],
|
||||
userMovedOut: [[880, 0, 0.06], [587, 0.07, 0.08]],
|
||||
userKicked: [[330, 0, 0.1], [262, 0.11, 0.12]],
|
||||
userBanned: [[294, 0, 0.12], [220, 0.13, 0.16]],
|
||||
recordingStarted: [[1175, 0, 0.08], [1175, 0.12, 0.08]],
|
||||
recordingStopped: [[880, 0, 0.12]],
|
||||
message: [[1047, 0, 0.06]],
|
||||
privateMessage: [[1047, 0, 0.05], [1319, 0.07, 0.07]],
|
||||
messageSent: [[1319, 0, 0.04]],
|
||||
uploadDone: [[784, 0, 0.06], [1047, 0.07, 0.08]],
|
||||
uploadFailed: [[392, 0, 0.08], [330, 0.09, 0.1]],
|
||||
mute: [[392, 0, 0.07]],
|
||||
unmute: [[784, 0, 0.07]],
|
||||
deafen: [[330, 0, 0.06], [262, 0.07, 0.08]],
|
||||
undeafen: [[262, 0, 0.06], [330, 0.07, 0.08]],
|
||||
pttDown: [[1200, 0, 0.03]],
|
||||
pttUp: [[900, 0, 0.03]],
|
||||
talkingWhileMuted: [[440, 0, 0.08], [440, 0.12, 0.08]],
|
||||
channelCreated: [[659, 0, 0.06], [988, 0.07, 0.08]],
|
||||
channelDeleted: [[988, 0, 0.06], [659, 0.07, 0.08]],
|
||||
channelEdited: [[784, 0, 0.08]],
|
||||
channelMoved: [[659, 0, 0.06], [784, 0.07, 0.06]]
|
||||
};
|
||||
|
||||
// TeamSpeak 3 sound pack settings.ini: KEY = play("file.wav"); ${clientType} picks a variant
|
||||
export function parseTsPack(ini: string): Map<string, string> {
|
||||
const out = new Map<string, string>();
|
||||
for (const line of ini.split(/\r?\n/)) {
|
||||
const m = /^\s*([A-Z0-9_]+)\s*=\s*play\("([^"]+)"\)/.exec(line);
|
||||
if (m) out.set(m[1], m[2]);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
// Renders a tone sequence to a WAV blob URL, so defaults and custom files play the same way
|
||||
async function renderTones(ev: SoundEvent): Promise<string> {
|
||||
const notes = TONES[ev];
|
||||
const rate = 44100;
|
||||
const length = Math.ceil((Math.max(...notes.map(n => n[1] + n[2])) + 0.05) * rate);
|
||||
const ctx = new OfflineAudioContext(1, length, rate);
|
||||
for (const [freq, start, dur] of notes) {
|
||||
const osc = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
osc.type = 'triangle';
|
||||
osc.frequency.value = freq;
|
||||
gain.gain.setValueAtTime(0, start);
|
||||
gain.gain.linearRampToValueAtTime(0.35, start + 0.008);
|
||||
gain.gain.setValueAtTime(0.35, start + dur - 0.02);
|
||||
gain.gain.linearRampToValueAtTime(0, start + dur);
|
||||
osc.connect(gain).connect(ctx.destination);
|
||||
osc.start(start);
|
||||
osc.stop(start + dur);
|
||||
}
|
||||
const buf = await ctx.startRendering();
|
||||
return URL.createObjectURL(toWav(buf.getChannelData(0), rate));
|
||||
}
|
||||
|
||||
function toWav(samples: Float32Array, rate: number): Blob {
|
||||
const out = new DataView(new ArrayBuffer(44 + samples.length * 2));
|
||||
const str = (o: number, s: string) => [...s].forEach((c, i) => out.setUint8(o + i, c.charCodeAt(0)));
|
||||
str(0, 'RIFF'); out.setUint32(4, 36 + samples.length * 2, true); str(8, 'WAVE');
|
||||
str(12, 'fmt '); out.setUint32(16, 16, true); out.setUint16(20, 1, true); out.setUint16(22, 1, true);
|
||||
out.setUint32(24, rate, true); out.setUint32(28, rate * 2, true); out.setUint16(32, 2, true); out.setUint16(34, 16, true);
|
||||
str(36, 'data'); out.setUint32(40, samples.length * 2, true);
|
||||
samples.forEach((v, i) => out.setInt16(44 + i * 2, Math.max(-1, Math.min(1, v)) * 0x7fff, true));
|
||||
return new Blob([out.buffer], { type: 'audio/wav' });
|
||||
}
|
||||
|
||||
class Sounds {
|
||||
settings = $state<SoundSettings>(load('mumh5.sounds', { enabled: true, volume: 0.6, on: {}, custom: {} }));
|
||||
private defaults = new Map<SoundEvent, Promise<string>>();
|
||||
// Object URLs of custom sounds; blob: is what the content security policy allows for media
|
||||
private urls = new Map<SoundEvent, string>();
|
||||
private ready: Promise<void>;
|
||||
errors = $state<string[]>([]);
|
||||
|
||||
constructor() {
|
||||
voice.onPtt = down => this.play(down ? 'pttDown' : 'pttUp');
|
||||
voice.onTalkingWhileMuted = () => this.play('talkingWhileMuted');
|
||||
this.ready = this.loadStored();
|
||||
}
|
||||
|
||||
// Loads custom sounds from IndexedDB; moves sounds from older versions out of localStorage
|
||||
private async loadStored(): Promise<void> {
|
||||
let migrated = false;
|
||||
for (const [ev, c] of Object.entries(this.settings.custom) as [SoundEvent, { name: string; data?: string }][]) {
|
||||
try {
|
||||
if (c.data) {
|
||||
// Decode directly: the content security policy does not allow fetching data: URLs
|
||||
const [meta, b64] = c.data.split(',');
|
||||
const bytes = Uint8Array.from(atob(b64), ch => ch.charCodeAt(0));
|
||||
const blob = new Blob([bytes], { type: /^data:([^;]+)/.exec(meta)?.[1] ?? 'audio/wav' });
|
||||
await putBlob(`sound:${ev}`, blob);
|
||||
delete c.data;
|
||||
migrated = true;
|
||||
}
|
||||
const blob = await getBlob(`sound:${ev}`);
|
||||
if (blob) this.urls.set(ev, URL.createObjectURL(blob));
|
||||
else delete this.settings.custom[ev];
|
||||
} catch { /* storage unavailable */ }
|
||||
}
|
||||
if (migrated) this.persist();
|
||||
}
|
||||
private lastPlayed = new Map<SoundEvent, number>();
|
||||
|
||||
private persist(): void {
|
||||
save('mumh5.sounds', $state.snapshot(this.settings));
|
||||
}
|
||||
|
||||
update(patch: Partial<Pick<SoundSettings, 'enabled' | 'volume'>>): void {
|
||||
Object.assign(this.settings, patch);
|
||||
this.persist();
|
||||
}
|
||||
|
||||
isOn(ev: SoundEvent): boolean {
|
||||
const chosen = this.settings.on?.[ev];
|
||||
if (chosen != null) return chosen;
|
||||
return !(SOUND_EVENTS.find(e => e.id === ev) as { off?: boolean } | undefined)?.off;
|
||||
}
|
||||
|
||||
setOn(ev: SoundEvent, on: boolean): void {
|
||||
(this.settings.on ??= {})[ev] = on;
|
||||
this.persist();
|
||||
}
|
||||
|
||||
async setCustom(ev: SoundEvent, file: File): Promise<string | null> {
|
||||
if (file.size > MAX_FILE) return `${file.name} is larger than 1 MB`;
|
||||
if (!/^audio\//.test(file.type) && !/\.(wav|mp3|ogg|oga|opus|flac|m4a|aac|webm)$/i.test(file.name)) return `${file.name} is not an audio file`;
|
||||
try {
|
||||
await putBlob(`sound:${ev}`, file);
|
||||
} catch (e) {
|
||||
return `Could not store ${file.name}: ${(e as Error).message}`;
|
||||
}
|
||||
const old = this.urls.get(ev);
|
||||
if (old) URL.revokeObjectURL(old);
|
||||
this.urls.set(ev, URL.createObjectURL(file));
|
||||
this.settings.custom[ev] = { name: file.name };
|
||||
this.persist();
|
||||
return null;
|
||||
}
|
||||
|
||||
reset(ev: SoundEvent): void {
|
||||
delete this.settings.custom[ev];
|
||||
const url = this.urls.get(ev);
|
||||
if (url) URL.revokeObjectURL(url);
|
||||
this.urls.delete(ev);
|
||||
deleteBlob(`sound:${ev}`).catch(() => {});
|
||||
this.persist();
|
||||
}
|
||||
|
||||
// A TeamSpeak 3 sound pack (folder with settings.ini) maps exactly; otherwise files are
|
||||
// matched to events by name ("user_joined.wav" -> Someone joined your channel).
|
||||
async loadPack(files: File[]): Promise<{ assigned: string[]; unmatched: string[] }> {
|
||||
const assigned: string[] = [], unmatched: string[] = [];
|
||||
const audio = files.filter(f => /\.(wav|mp3|ogg|oga|opus|flac|m4a|aac|webm)$/i.test(f.name));
|
||||
const byName = new Map(audio.map(f => [f.name.toLowerCase(), f]));
|
||||
const used = new Set<File>();
|
||||
const ini = files.find(f => /settings\.ini$/i.test(f.name));
|
||||
|
||||
if (ini) {
|
||||
const entries = parseTsPack(await ini.text());
|
||||
for (const e of SOUND_EVENTS) {
|
||||
const wanted = entries.get(e.ts);
|
||||
if (!wanted) continue;
|
||||
// ${clientType} variants: prefer "neutral", else whichever the pack has
|
||||
const suffix = wanted.replace(/^.*\$\{clientType\}_?/, '').toLowerCase();
|
||||
const file = wanted.includes('${clientType}')
|
||||
? byName.get(`neutral_${suffix}`) ?? audio.find(f => f.name.toLowerCase().endsWith(`_${suffix}`))
|
||||
: byName.get(wanted.toLowerCase());
|
||||
if (file && !(await this.setCustom(e.id, file))) {
|
||||
assigned.push(`${file.name}: ${e.name}`);
|
||||
used.add(file);
|
||||
}
|
||||
}
|
||||
for (const f of audio) if (!used.has(f) && !assigned.some(a => a.startsWith(f.name + ':'))) unmatched.push(f.name);
|
||||
return { assigned, unmatched: [...new Set(unmatched)] };
|
||||
}
|
||||
|
||||
for (const f of audio) {
|
||||
const base = f.name.toLowerCase().replace(/\.[a-z0-9]+$/, '').replace(/[\s-]+/g, '_');
|
||||
// Most specific match wins: exact key, then longest key contained in the name
|
||||
let best: { ev: SoundEvent; score: number } | null = null;
|
||||
for (const e of SOUND_EVENTS) {
|
||||
for (const k of e.keys) {
|
||||
const score = base === k ? 1000 : base.includes(k) ? k.length : 0;
|
||||
if (score && (!best || score > best.score)) best = { ev: e.id, score };
|
||||
}
|
||||
}
|
||||
if (best && !(await this.setCustom(best.ev, f))) assigned.push(`${f.name}: ${SOUND_EVENTS.find(e => e.id === best!.ev)!.name}`);
|
||||
else unmatched.push(f.name);
|
||||
}
|
||||
return { assigned, unmatched };
|
||||
}
|
||||
|
||||
resetAll(): void {
|
||||
for (const ev of Object.keys(this.settings.custom) as SoundEvent[]) this.reset(ev);
|
||||
}
|
||||
|
||||
private async source(ev: SoundEvent): Promise<string> {
|
||||
await this.ready;
|
||||
const custom = this.urls.get(ev);
|
||||
if (custom) return custom;
|
||||
let p = this.defaults.get(ev);
|
||||
if (!p) this.defaults.set(ev, (p = renderTones(ev)));
|
||||
return p;
|
||||
}
|
||||
|
||||
// Plays an event sound through the voice output device; force plays even when disabled (preview)
|
||||
async play(ev: SoundEvent, force = false): Promise<void> {
|
||||
if (!force && (!this.settings.enabled || !this.isOn(ev))) return;
|
||||
// Bursts of the same event (e.g. many people joining) play once
|
||||
const now = performance.now();
|
||||
if (!force && now - (this.lastPlayed.get(ev) ?? 0) < 150) return;
|
||||
this.lastPlayed.set(ev, now);
|
||||
try {
|
||||
const el = new Audio(await this.source(ev)) as HTMLAudioElement & { setSinkId?: (id: string) => Promise<void> };
|
||||
el.volume = Math.max(0, Math.min(1, this.settings.volume));
|
||||
const sink = voice.settings.outputDevice;
|
||||
if (sink && sink !== 'default' && el.setSinkId) await el.setSinkId(sink).catch(() => {});
|
||||
await el.play();
|
||||
// Inspection hook for the end-to-end tests: events that really started playing
|
||||
const log = ((window as any).__mumh5Sounds ??= []) as string[];
|
||||
log.push(ev);
|
||||
if (log.length > 50) log.shift();
|
||||
} catch (e) {
|
||||
// Shown in the Sounds settings, so a broken file does not fail silently
|
||||
const msg = `${SOUND_EVENTS.find(x => x.id === ev)?.name}: ${(e as Error).message}`;
|
||||
if (!this.errors.includes(msg)) this.errors = [...this.errors.slice(-4), msg];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const sounds = new Sounds();
|
||||
@@ -80,6 +80,11 @@ class VoiceEngine {
|
||||
private client: MumbleClient | null = null;
|
||||
private sessionGains = new Map<number, number>();
|
||||
private unsubscribe: (() => void)[] = [];
|
||||
// Push-to-talk press/release, for the notification sounds
|
||||
onPtt: ((down: boolean) => void) | null = null;
|
||||
// Speaking (or pressing push to talk) while muted, for the reminder sound
|
||||
onTalkingWhileMuted: (() => void) | null = null;
|
||||
private lastMutedReminder = 0;
|
||||
|
||||
private frameCounter = 0; // Mumble sequence, in 10 ms frames
|
||||
private sampleTime = 0; // encoder timestamps, microseconds
|
||||
@@ -301,6 +306,12 @@ class VoiceEngine {
|
||||
if (db > s.vadThreshold) this.lastVoiceAt = now;
|
||||
wanted = now - this.lastVoiceAt < s.vadHoldMs;
|
||||
}
|
||||
// Speaking into a muted microphone: remind, at most every 8 seconds
|
||||
const self = this.client?.self;
|
||||
if (wanted && s.mode === 'vad' && self && (self.selfMute || self.mute) && !self.selfDeaf && now - this.lastMutedReminder > 8000) {
|
||||
this.lastMutedReminder = now;
|
||||
this.onTalkingWhileMuted?.();
|
||||
}
|
||||
wanted &&= this.canTalk() && !!this.encoder && this.encoder.state === 'configured';
|
||||
|
||||
if (wanted && !this.open) { this.open = true; this.transmitting = true; }
|
||||
@@ -353,7 +364,13 @@ class VoiceEngine {
|
||||
// Typing in a text field does not trigger push to talk
|
||||
const t = e.target as HTMLElement | null;
|
||||
if (down && t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
|
||||
if (this.pttDown === down) return;
|
||||
this.pttDown = down;
|
||||
if (this.settings.mode === 'ptt' && this.client) {
|
||||
const self = this.client.self;
|
||||
if (down && self && (self.selfMute || self.mute)) this.onTalkingWhileMuted?.();
|
||||
else this.onPtt?.(down);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Receiving ──────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
// Small IndexedDB store for user files (custom sounds): localStorage is too small for audio.
|
||||
const DB = 'mumh5';
|
||||
const STORE = 'files';
|
||||
|
||||
function open(): Promise<IDBDatabase> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const req = indexedDB.open(DB, 1);
|
||||
req.onupgradeneeded = () => req.result.createObjectStore(STORE);
|
||||
req.onsuccess = () => resolve(req.result);
|
||||
req.onerror = () => reject(req.error);
|
||||
});
|
||||
}
|
||||
|
||||
function run<T>(mode: IDBTransactionMode, fn: (s: IDBObjectStore) => IDBRequest<T>): Promise<T> {
|
||||
return open().then(db => new Promise<T>((resolve, reject) => {
|
||||
const req = fn(db.transaction(STORE, mode).objectStore(STORE));
|
||||
req.onsuccess = () => resolve(req.result);
|
||||
req.onerror = () => reject(req.error);
|
||||
}));
|
||||
}
|
||||
|
||||
export const putBlob = (key: string, blob: Blob) => run('readwrite', s => s.put(blob, key));
|
||||
export const getBlob = (key: string) => run<Blob | undefined>('readonly', s => s.get(key));
|
||||
export const deleteBlob = (key: string) => run('readwrite', s => s.delete(key));
|
||||
@@ -0,0 +1,2 @@
|
||||
// What is being dragged in the channel tree
|
||||
export const drag = $state<{ item: { kind: 'channel' | 'user'; id: number } | null }>({ item: null });
|
||||
+24
-1
@@ -160,9 +160,32 @@ function serialize(node: Node): string {
|
||||
return `<${tag}${attrs}>${[...el.childNodes].map(serialize).join('')}</${tag}>`;
|
||||
}
|
||||
|
||||
// Turns plain URLs in text into links (not inside existing links)
|
||||
function linkifyNodes(root: Node): void {
|
||||
const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
|
||||
const texts: Text[] = [];
|
||||
while (walker.nextNode()) texts.push(walker.currentNode as Text);
|
||||
for (const t of texts) {
|
||||
if ((t.parentElement as Element | null)?.closest('a')) continue;
|
||||
const parts = (t.data).split(/(https?:\/\/[^\s<]+[^\s<.,:;"')\]])/);
|
||||
if (parts.length < 2) continue;
|
||||
const frag = document.createDocumentFragment();
|
||||
parts.forEach((p, i) => {
|
||||
if (i % 2) {
|
||||
const a = document.createElement('a');
|
||||
a.setAttribute('href', p);
|
||||
a.textContent = p;
|
||||
frag.append(a);
|
||||
} else if (p) frag.append(p);
|
||||
});
|
||||
t.replaceWith(frag);
|
||||
}
|
||||
}
|
||||
|
||||
// Sanitized, well-formed XHTML that Murmur's XML check accepts and Mumble clients render
|
||||
export function toMumbleHtml(html: string): string {
|
||||
export function toMumbleHtml(html: string, opts: { linkify?: boolean } = {}): string {
|
||||
const frag = DOMPurify.sanitize(html, purifyConfig);
|
||||
if (opts.linkify) linkifyNodes(frag);
|
||||
return [...frag.childNodes].map(serialize).join('')
|
||||
.replace(/(<p><br\/><\/p>)+$/, '')
|
||||
.replace(/^(<br\/>)+|(<br\/>)+$/g, '')
|
||||
|
||||
@@ -21,6 +21,7 @@ export const ICON_PATHS: Record<string, string> = {
|
||||
server: 'M2 3h20v8H2zM2 13h20v8H2zM6 7h.01M6 17h.01',
|
||||
shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
|
||||
download: 'M12 3v12M7 10l5 5 5-5M4 21h16',
|
||||
globe: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM2 12h20M12 2c3.5 3.5 3.5 16.5 0 20M12 2c-3.5 3.5-3.5 16.5 0 20',
|
||||
list: 'M9 6h12M9 12h12M9 18h12M4 6h.01M4 12h.01M4 18h.01',
|
||||
'list-ordered': 'M10 6h11M10 12h11M10 18h11M4 4v4M3 18h3l-3 3h3M3 10h2l-2 3h2',
|
||||
link: 'M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1 1M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1-1',
|
||||
|
||||
@@ -5,13 +5,16 @@ export interface MenuItem {
|
||||
checked?: boolean;
|
||||
disabled?: boolean;
|
||||
separator?: boolean;
|
||||
// Non-interactive title at the top (e.g. the server's name)
|
||||
header?: boolean;
|
||||
// Inline slider instead of a clickable item; the menu stays open while dragging
|
||||
slider?: { value: number; min: number; max: number; step: number; format: (v: number) => string; oninput: (v: number) => void };
|
||||
}
|
||||
|
||||
// One context menu for the whole app, opened at the pointer position
|
||||
class MenuStore {
|
||||
open = $state<{ x: number; y: number; items: MenuItem[] } | null>(null);
|
||||
// keepFocus: leave focus (and the text selection) where it is, for text editing menus
|
||||
open = $state<{ x: number; y: number; items: MenuItem[]; keepFocus?: boolean } | null>(null);
|
||||
|
||||
show(e: MouseEvent, items: MenuItem[]): void {
|
||||
e.preventDefault();
|
||||
@@ -19,6 +22,10 @@ class MenuStore {
|
||||
this.open = { x: e.clientX, y: e.clientY, items };
|
||||
}
|
||||
|
||||
showAt(x: number, y: number, items: MenuItem[], keepFocus = false): void {
|
||||
this.open = { x, y, items, keepFocus };
|
||||
}
|
||||
|
||||
close(): void {
|
||||
this.open = null;
|
||||
}
|
||||
|
||||
@@ -6,6 +6,10 @@ interface NativeApi {
|
||||
updateTray(state: { icon: string; tooltip: string; connected: boolean; server: string; muted: boolean; deafened: boolean; mode: string }): void;
|
||||
onTrayAction(fn: (action: string) => void): void;
|
||||
linkPreview(url: string): Promise<LinkPreviewData | null>;
|
||||
publicServers(url: string): Promise<PublicServer[]>;
|
||||
pingServer(host: string, port: number): Promise<PingResult | null>;
|
||||
onContextMenu(fn: (params: ContextParams) => void): void;
|
||||
editAction(action: string, arg?: unknown): void;
|
||||
identities: {
|
||||
list(): Promise<{ identities: IdentitySummary[]; setupDone: boolean }>;
|
||||
create(name: string, email: string): Promise<IdentitySummary>;
|
||||
@@ -24,6 +28,23 @@ interface NativeApi {
|
||||
on(event: 'secure' | 'data' | 'close', fn: (connId: string, ...args: any[]) => void): () => void;
|
||||
}
|
||||
|
||||
// What Electron reports for a right-click without a custom menu
|
||||
export interface ContextParams {
|
||||
x: number;
|
||||
y: number;
|
||||
isEditable: boolean;
|
||||
selectionText: string;
|
||||
linkURL: string;
|
||||
mediaType: string;
|
||||
srcURL: string;
|
||||
misspelledWord: string;
|
||||
suggestions: string[];
|
||||
editFlags: { canUndo: boolean; canRedo: boolean; canCut: boolean; canCopy: boolean; canPaste: boolean; canSelectAll: boolean };
|
||||
}
|
||||
|
||||
export interface PublicServer { name: string; host: string; port: number; url: string; country: string; countryCode: string; continent: string; ca: boolean }
|
||||
export interface PingResult { ping: number; users: number; maxUsers: number; bandwidth: number; version: string }
|
||||
|
||||
export interface LinkPreviewData {
|
||||
url: string;
|
||||
title: string;
|
||||
|
||||
@@ -6,6 +6,7 @@ import { store, type SavedServer } from './settings.svelte.ts';
|
||||
import { renderIncoming, textToHtml, escapeHtml, formatBytes, type Embed } from './html.ts';
|
||||
import { uploadFile, makeThumbnail, makeInlineImage, fetchUploadInfo, checkFile, type UploadInfo } from './upload.ts';
|
||||
import { voice } from './audio/voice.svelte.ts';
|
||||
import { sounds } from './audio/sounds.svelte.ts';
|
||||
|
||||
const codec = createCodec();
|
||||
|
||||
@@ -59,6 +60,11 @@ export class Session {
|
||||
uploads = $state<UploadJob[]>([]);
|
||||
certPrompt = $state<CertPrompt | null>(null);
|
||||
rtt = $state(0);
|
||||
// Why the last connection ended, shown with a Reconnect button (null after a normal disconnect)
|
||||
disconnectInfo = $state<{ kind: 'kicked' | 'banned' | 'lost' | 'rejected'; by: string; reason: string } | null>(null);
|
||||
private removedBy: { kind: 'kicked' | 'banned'; by: string; reason: string } | null = null;
|
||||
// Last known channel per user, to tell joins from leaves of our channel for sounds
|
||||
private lastChannel = new Map<number, number>();
|
||||
// TLS details of the current server, for the certificate viewer and the trusted badge
|
||||
serverCert = $state<ServerCertInfo | null>(null);
|
||||
uploadInfo = $state<UploadInfo | null>(null);
|
||||
@@ -155,6 +161,22 @@ export class Session {
|
||||
this.expanded = all;
|
||||
}
|
||||
|
||||
// true / false when known, null when the server has not told us yet
|
||||
can(channelId: number, bit: number): boolean | null {
|
||||
void this.tick;
|
||||
return this.client?.can(channelId, bit) ?? null;
|
||||
}
|
||||
|
||||
// Whether a channel lies somewhere below another (a channel cannot move into its own subtree)
|
||||
isInside(channelId: number, ancestor: number): boolean {
|
||||
let c = this.client?.channels.get(channelId);
|
||||
while (c && c.parent != null) {
|
||||
if (c.parent === ancestor) return true;
|
||||
c = this.client?.channels.get(c.parent);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
viewTitle(key: string = this.view): string {
|
||||
const [kind, id] = key.split(':');
|
||||
if (kind === 'ch') return this.channel(Number(id))?.name || 'Root';
|
||||
@@ -181,6 +203,8 @@ export class Session {
|
||||
this.panel = { kind: 'members' };
|
||||
this.requested.clear();
|
||||
this.serverCert = null;
|
||||
this.disconnectInfo = null;
|
||||
this.removedBy = null;
|
||||
this.status = 'connecting';
|
||||
|
||||
if (!native) {
|
||||
@@ -226,6 +250,10 @@ export class Session {
|
||||
});
|
||||
}
|
||||
|
||||
reconnect(): void {
|
||||
if (this.server) this.connect($state.snapshot(this.server) as SavedServer);
|
||||
}
|
||||
|
||||
acceptCertificate(): void {
|
||||
const p = this.certPrompt;
|
||||
if (!p) return;
|
||||
@@ -258,10 +286,23 @@ export class Session {
|
||||
this.status = 'connected';
|
||||
this.view = `ch:${client.self?.channelId ?? 0}`;
|
||||
sessions.onSynced(this);
|
||||
sounds.play('connected');
|
||||
for (const u of client.users.values()) this.lastChannel.set(u.session, u.channelId);
|
||||
// What we may do per channel, for menus (not rate limited by the server)
|
||||
for (const id of client.channels.keys()) client.requestPermissions(id);
|
||||
if (client.welcomeText) this.system(this.view, client.welcomeText, true);
|
||||
bump();
|
||||
});
|
||||
client.on('channel', bump);
|
||||
client.on('channel', ch => {
|
||||
if (live() && client.synced && !client.permissions.has(ch.id)) client.requestPermissions(ch.id);
|
||||
bump();
|
||||
});
|
||||
client.on('permissions', () => {
|
||||
if (!live()) return;
|
||||
// A flush means permissions changed somewhere (e.g. an ACL edit); ask again
|
||||
if (!client.permissions.size) for (const id of client.channels.keys()) client.requestPermissions(id);
|
||||
bump();
|
||||
});
|
||||
client.on('channelRemove', id => {
|
||||
if (!live()) return;
|
||||
if (this.panel.kind === 'channel' && this.panel.id === id) this.panel = { kind: 'members' };
|
||||
@@ -269,9 +310,12 @@ export class Session {
|
||||
});
|
||||
client.on('ping', rtt => { if (live()) this.rtt = rtt; });
|
||||
|
||||
client.on('user', (user, changed, _actor, isNew) => {
|
||||
client.on('user', (user, changed, actor, isNew) => {
|
||||
if (!live()) return;
|
||||
const self = client.self;
|
||||
const before = this.lastChannel.get(user.session);
|
||||
this.lastChannel.set(user.session, user.channelId);
|
||||
if (client.synced && self && this.isVoice()) this.userSound(user.session === self.session, user, changed, actor, isNew, before, self.channelId);
|
||||
if (client.synced && self) {
|
||||
if (isNew) {
|
||||
if (user.channelId === self.channelId) this.system(`ch:${self.channelId}`, `${escapeHtml(user.name)} connected`);
|
||||
@@ -294,7 +338,17 @@ export class Session {
|
||||
|
||||
client.on('userRemove', (user, actor, reason, ban) => {
|
||||
if (!live()) return;
|
||||
// We were kicked or banned; the server closes the connection right after
|
||||
if (user.session === client.session) {
|
||||
const by = actor != null ? client.users.get(actor)?.name ?? '' : '';
|
||||
this.removedBy = { kind: ban ? 'banned' : 'kicked', by, reason };
|
||||
}
|
||||
const self = client.self;
|
||||
if (self && user.session !== self.session && this.isVoice() && user.channelId === self.channelId) {
|
||||
const byOther = actor != null && actor !== user.session;
|
||||
sounds.play(ban ? 'userBanned' : byOther ? 'userKicked' : 'userDisconnected');
|
||||
}
|
||||
this.lastChannel.delete(user.session);
|
||||
if (self && user.channelId === self.channelId) {
|
||||
const by = actor != null && actor !== user.session ? client.users.get(actor)?.name : null;
|
||||
const what = by ? `${ban ? 'was banned' : 'was kicked'} by ${escapeHtml(by)}` : 'disconnected';
|
||||
@@ -304,7 +358,11 @@ export class Session {
|
||||
bump();
|
||||
});
|
||||
|
||||
client.on('text', msg => { if (live()) this.receive(client, msg); });
|
||||
client.on('text', msg => {
|
||||
if (!live()) return;
|
||||
this.receive(client, msg);
|
||||
if (msg.actor != null && msg.actor !== client.session) sounds.play(msg.channels.length || msg.trees.length ? 'message' : 'privateMessage');
|
||||
});
|
||||
|
||||
client.on('permissionDenied', d => {
|
||||
if (!live()) return;
|
||||
@@ -317,12 +375,23 @@ export class Session {
|
||||
return;
|
||||
}
|
||||
if (d.channelId != null && d.channelId === this.pendingJoin) this.pendingJoin = null;
|
||||
sounds.play('denied');
|
||||
const ch = d.channelId != null ? client.channels.get(d.channelId)?.name : undefined;
|
||||
this.system(this.view, escapeHtml(describeDenial(d, ch)));
|
||||
});
|
||||
|
||||
client.on('reject', (_type, reason) => {
|
||||
if (!live()) return;
|
||||
this.removedBy = null;
|
||||
this.disconnectInfo = { kind: 'rejected', by: '', reason };
|
||||
});
|
||||
|
||||
client.on('close', reason => {
|
||||
if (this.client !== client) return;
|
||||
if (this.removedBy) this.disconnectInfo = this.removedBy;
|
||||
else if (!this.disconnectInfo && reason !== 'Disconnected') this.disconnectInfo = { kind: 'lost', by: '', reason };
|
||||
const kind = this.disconnectInfo?.kind;
|
||||
sounds.play(kind === 'kicked' ? 'kicked' : kind === 'banned' ? 'banned' : kind === 'lost' ? 'connectionLost' : kind === 'rejected' ? 'error' : 'disconnected');
|
||||
this.client = null;
|
||||
sessions.onClosed(this);
|
||||
this.status = 'idle';
|
||||
@@ -331,6 +400,29 @@ export class Session {
|
||||
});
|
||||
}
|
||||
|
||||
// Presence sounds only come from the server where voice runs; others would be noise
|
||||
private isVoice(): boolean {
|
||||
return sessions.voiceId === this.server?.id;
|
||||
}
|
||||
|
||||
private userSound(isSelf: boolean, user: User, changed: string[], actor: number | null, isNew: boolean, before: number | undefined, mine: number): void {
|
||||
if (isSelf) {
|
||||
const byOther = actor != null && actor !== user.session;
|
||||
if (changed.includes('channelId')) sounds.play(byOther ? 'moved' : 'switchedChannel');
|
||||
if (!byOther && changed.includes('selfDeaf')) sounds.play(user.selfDeaf ? 'deafen' : 'undeafen');
|
||||
else if (!byOther && changed.includes('selfMute')) sounds.play(user.selfMute ? 'mute' : 'unmute');
|
||||
return;
|
||||
}
|
||||
const self = actor == null || actor === user.session;
|
||||
if (isNew) {
|
||||
if (user.channelId === mine) sounds.play('userConnected');
|
||||
} else if (changed.includes('channelId')) {
|
||||
if (user.channelId === mine) sounds.play(self ? 'userJoined' : 'userMovedIn');
|
||||
else if (before === mine) sounds.play(self ? 'userLeft' : 'userMovedOut');
|
||||
}
|
||||
if (changed.includes('recording') && user.channelId === mine) sounds.play(user.recording ? 'recordingStarted' : 'recordingStopped');
|
||||
}
|
||||
|
||||
// ─── Panels, descriptions, comments ─────────────────────────────────────────
|
||||
|
||||
showChannel(id: number, tab: 'info' | 'chat' = 'info'): void {
|
||||
@@ -472,6 +564,7 @@ export class Session {
|
||||
return false;
|
||||
}
|
||||
client.sendText(this.target(key), html);
|
||||
sounds.play('messageSent');
|
||||
const rendered = renderIncoming(html, store.trustedHosts);
|
||||
this.push(key, { kind: 'text', author: client.self?.name ?? '', authorSession: client.session, self: true, ...rendered });
|
||||
return true;
|
||||
@@ -514,8 +607,10 @@ export class Session {
|
||||
if (html !== link) this.lastImageSend = { key, fallback: link, at: Date.now() };
|
||||
this.sendHtml(html, key);
|
||||
this.uploads = this.uploads.filter(j => j.id !== job.id);
|
||||
sounds.play('uploadDone');
|
||||
} catch (e) {
|
||||
live().error = (e as Error).message;
|
||||
sounds.play('uploadFailed');
|
||||
setTimeout(() => { this.uploads = this.uploads.filter(j => j.id !== job.id); }, 6000);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,8 +21,20 @@ export interface Settings {
|
||||
youtube: 'off' | 'click' | 'thumbnail'; // YouTube links: plain, click-to-play card, card with thumbnail
|
||||
// Link previews: fetched by the upload host (private), by this computer (reveals IP), or none
|
||||
linkPreviews: 'host' | 'direct' | 'off';
|
||||
theme: ThemeId;
|
||||
publicListUrl: string; // where the public server list comes from
|
||||
}
|
||||
|
||||
export type ThemeId = 'dark' | 'light' | 'midnight' | 'frost' | 'win95';
|
||||
|
||||
export const THEMES: { id: ThemeId; name: string; note: string }[] = [
|
||||
{ id: 'dark', name: 'Dark', note: 'The default' },
|
||||
{ id: 'light', name: 'Light', note: 'For bright rooms' },
|
||||
{ id: 'midnight', name: 'Midnight', note: 'True black, red accents' },
|
||||
{ id: 'frost', name: 'Frost', note: 'Cool blue-grey' },
|
||||
{ id: 'win95', name: 'Windows 95', note: 'Start me up' }
|
||||
];
|
||||
|
||||
const defaults: Settings = {
|
||||
uploadHost: '',
|
||||
uploadKey: '',
|
||||
@@ -31,7 +43,9 @@ const defaults: Settings = {
|
||||
sendThumbnails: true,
|
||||
compact: false,
|
||||
youtube: 'click',
|
||||
linkPreviews: 'host'
|
||||
linkPreviews: 'host',
|
||||
theme: 'dark',
|
||||
publicListUrl: 'https://publist.mumble.info/v1/list?version=1.5.0'
|
||||
};
|
||||
|
||||
class SettingsStore {
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
import { native } from './native.ts';
|
||||
import { menu, type MenuItem } from './menu.svelte.ts';
|
||||
|
||||
// Right-click menu for text fields, messages, links and images. Elements with their own menu
|
||||
// (users, channels, servers) call preventDefault, so Electron does not report those.
|
||||
export function startTextMenu(): void {
|
||||
if (!native) return;
|
||||
const api = native;
|
||||
|
||||
api.onContextMenu(p => {
|
||||
// Edit commands act on the focused element; keep it focused through the menu
|
||||
const field = p.isEditable ? (document.activeElement as HTMLElement | null) : null;
|
||||
const edit = (action: string, arg?: unknown) => { field?.focus(); api.editAction(action, arg); };
|
||||
const items: MenuItem[] = [];
|
||||
const add = (group: MenuItem[]) => {
|
||||
if (!group.length) return;
|
||||
if (items.length) items.push({ separator: true, label: '' });
|
||||
items.push(...group);
|
||||
};
|
||||
|
||||
if (p.misspelledWord) {
|
||||
add([
|
||||
...p.suggestions.map(s => ({ label: s, action: () => edit('replaceMisspelling', s) })),
|
||||
...(p.suggestions.length ? [] : [{ label: 'No suggestions', disabled: true }]),
|
||||
{ label: 'Add to dictionary', action: () => api.editAction('addWord', p.misspelledWord) }
|
||||
]);
|
||||
}
|
||||
|
||||
if (p.isEditable) {
|
||||
const f = p.editFlags;
|
||||
add([
|
||||
{ label: 'Undo', disabled: !f.canUndo, action: () => edit('undo') },
|
||||
{ label: 'Redo', disabled: !f.canRedo, action: () => edit('redo') }
|
||||
]);
|
||||
add([
|
||||
{ label: 'Cut', disabled: !f.canCut, action: () => edit('cut') },
|
||||
{ label: 'Copy', disabled: !f.canCopy, action: () => edit('copy') },
|
||||
{ label: 'Paste', disabled: !f.canPaste, action: () => edit('paste') }
|
||||
]);
|
||||
add([{ label: 'Select all', disabled: !f.canSelectAll, action: () => edit('selectAll') }]);
|
||||
} else {
|
||||
if (p.selectionText.trim()) add([{ label: 'Copy', action: () => api.editAction('copy') }]);
|
||||
if (p.linkURL && /^https?:/i.test(p.linkURL)) {
|
||||
add([
|
||||
{ label: 'Open link', action: () => window.open(p.linkURL, '_blank', 'noopener') },
|
||||
{ label: 'Copy link address', action: () => navigator.clipboard.writeText(p.linkURL) }
|
||||
]);
|
||||
}
|
||||
if (p.mediaType === 'image' && p.srcURL) {
|
||||
add([
|
||||
{ label: 'Copy image', action: () => api.editAction('copyImageAt', { x: p.x, y: p.y }) },
|
||||
{ label: 'Save image...', action: () => api.editAction('saveImage', p.srcURL) }
|
||||
]);
|
||||
}
|
||||
// The message under the pointer, as plain text
|
||||
const msg = document.elementFromPoint(p.x, p.y)?.closest('.msg, .system');
|
||||
const text = msg?.querySelector('.html')?.textContent?.trim();
|
||||
if (text) add([{ label: 'Copy message text', action: () => navigator.clipboard.writeText(text) }]);
|
||||
}
|
||||
|
||||
if (items.length) menu.showAt(p.x, p.y, items, true);
|
||||
});
|
||||
}
|
||||
@@ -25,7 +25,12 @@ class Ui {
|
||||
wizard = $state<'setup' | 'add' | null>(null);
|
||||
// Quick audio popover from right-clicking mute (input) or deafen (output)
|
||||
quickAudio = $state<{ kind: 'input' | 'output'; x: number; y: number } | null>(null);
|
||||
settingsTab = $state<'voice' | 'files' | 'identities'>('voice');
|
||||
settingsTab = $state<'voice' | 'sounds' | 'appearance' | 'files' | 'identities'>('voice');
|
||||
publicServers = $state(false);
|
||||
// Add-server dialog, optionally prefilled (from the public list)
|
||||
addServer = $state<{ host?: string; port?: number; label?: string } | null>(null);
|
||||
// Channel dialog: create a subchannel of `parent`, or edit channel `id`
|
||||
channelDialog = $state<{ mode: 'create'; parent: number } | { mode: 'edit'; id: number; tab?: 'general' | 'permissions' | 'groups' } | null>(null);
|
||||
// Session whose connection information is shown
|
||||
userInfo = $state<number | null>(null);
|
||||
// Set when a panel was opened on a layout where it is an overlay
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
import { mount } from 'svelte';
|
||||
import './app.css';
|
||||
import App from './App.svelte';
|
||||
// After the components' styles, so themes override them
|
||||
import './themes.css';
|
||||
import { startTray } from './lib/tray.svelte.ts';
|
||||
import { startTextMenu } from './lib/text-menu.ts';
|
||||
|
||||
mount(App, { target: document.getElementById('app')! });
|
||||
startTray();
|
||||
startTextMenu();
|
||||
|
||||
+253
@@ -0,0 +1,253 @@
|
||||
/* Color schemes. Dark is the default in app.css; each theme overrides the same variables.
|
||||
[data-theme-preview] applies a theme to a single element (the pickers in Settings). */
|
||||
|
||||
:root:not([data-theme]), [data-theme-preview="dark"] {
|
||||
--bg-0: #0d0e10;
|
||||
--bg-1: #151619;
|
||||
--bg-2: #1b1c20;
|
||||
--bg-3: #24262b;
|
||||
--bg-hover: #2a2c32;
|
||||
--bg-active: #33363d;
|
||||
--line: #2c2e34;
|
||||
--text: #e3e4e8;
|
||||
--text-dim: #9a9ca5;
|
||||
--text-faint: #686a73;
|
||||
--accent: #7c6cff;
|
||||
--accent-hover: #8f81ff;
|
||||
--accent-text: #ffffff;
|
||||
--speaking: #3bd16f;
|
||||
--danger: #f0504a;
|
||||
--warn: #e8b23c;
|
||||
--link: #6fb3ff;
|
||||
--rail: var(--bg-0);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root[data-theme="light"], [data-theme-preview="light"] {
|
||||
--rail: var(--bg-0);
|
||||
--bg-0: #e3e5e8;
|
||||
--bg-1: #f2f3f5;
|
||||
--bg-2: #ffffff;
|
||||
--bg-3: #e8e9ec;
|
||||
--bg-hover: #e1e3e7;
|
||||
--bg-active: #d4d7dc;
|
||||
--line: #d4d6db;
|
||||
--text: #1d1f23;
|
||||
--text-dim: #555a64;
|
||||
--text-faint: #858a94;
|
||||
--accent: #5b4bdb;
|
||||
--accent-hover: #4a3bc4;
|
||||
--accent-text: #ffffff;
|
||||
--speaking: #1f9d4c;
|
||||
--danger: #d33a34;
|
||||
--warn: #b7791f;
|
||||
--link: #1f64c9;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
:root[data-theme="midnight"], [data-theme-preview="midnight"] {
|
||||
--rail: var(--bg-0);
|
||||
--bg-0: #000000;
|
||||
--bg-1: #050505;
|
||||
--bg-2: #0a0a0a;
|
||||
--bg-3: #151515;
|
||||
--bg-hover: #1a1a1a;
|
||||
--bg-active: #222222;
|
||||
--line: #1c1c1c;
|
||||
--text: #d8d8d8;
|
||||
--text-dim: #8a8a8a;
|
||||
--text-faint: #5a5a5a;
|
||||
--accent: #e0443e;
|
||||
--accent-hover: #f05a54;
|
||||
--accent-text: #ffffff;
|
||||
--speaking: #3bd16f;
|
||||
--danger: #ff5a52;
|
||||
--warn: #e8b23c;
|
||||
--link: #ff8a80;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root[data-theme="frost"], [data-theme-preview="frost"] {
|
||||
--rail: var(--bg-0);
|
||||
--bg-0: #242933;
|
||||
--bg-1: #2e3440;
|
||||
--bg-2: #333a47;
|
||||
--bg-3: #3b4252;
|
||||
--bg-hover: #434c5e;
|
||||
--bg-active: #4c566a;
|
||||
--line: #3f4758;
|
||||
--text: #eceff4;
|
||||
--text-dim: #b4bccb;
|
||||
--text-faint: #7f8a9e;
|
||||
--accent: #88c0d0;
|
||||
--accent-hover: #8fbcbb;
|
||||
--accent-text: #1c222c;
|
||||
--speaking: #a3be8c;
|
||||
--danger: #bf616a;
|
||||
--warn: #ebcb8b;
|
||||
--link: #81a1c1;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* ─── Windows 95 ───────────────────────────────────────────────────────────── */
|
||||
|
||||
:root[data-theme="win95"], [data-theme-preview="win95"] {
|
||||
--bg-0: #c0c0c0;
|
||||
--bg-1: #c0c0c0;
|
||||
--bg-2: #ffffff;
|
||||
--bg-3: #c0c0c0;
|
||||
--bg-hover: #dfdfdf;
|
||||
--bg-active: #000080;
|
||||
--line: #808080;
|
||||
--text: #000000;
|
||||
--text-dim: #202020;
|
||||
--text-faint: #606060;
|
||||
--accent: #000080;
|
||||
--accent-hover: #1084d0;
|
||||
--accent-text: #ffffff;
|
||||
--speaking: #008000;
|
||||
--danger: #c00000;
|
||||
--warn: #808000;
|
||||
--link: #0000ee;
|
||||
--font: Tahoma, "MS Sans Serif", "Microsoft Sans Serif", Geneva, Verdana, sans-serif;
|
||||
--fs: 13px;
|
||||
--rail: #008080;
|
||||
--raised: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
|
||||
--sunken: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #000;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
:root[data-theme="win95"] body { -webkit-font-smoothing: none; }
|
||||
:root[data-theme="win95"] ::selection { background: #000080; color: #fff; }
|
||||
|
||||
/* Buttons: raised, pressed in when active */
|
||||
:root[data-theme="win95"] .btn,
|
||||
:root[data-theme="win95"] .icon-btn,
|
||||
:root[data-theme="win95"] .rail .tile,
|
||||
:root[data-theme="win95"] .modes button,
|
||||
:root[data-theme="win95"] .tabs button,
|
||||
:root[data-theme="win95"] .tool,
|
||||
:root[data-theme="win95"] .facade .play {
|
||||
background: #c0c0c0;
|
||||
color: #000;
|
||||
border: 0;
|
||||
box-shadow: var(--raised);
|
||||
}
|
||||
:root[data-theme="win95"] .btn:active:not(:disabled),
|
||||
:root[data-theme="win95"] .icon-btn:active,
|
||||
:root[data-theme="win95"] .rail .tile:active,
|
||||
:root[data-theme="win95"] .modes button.active,
|
||||
:root[data-theme="win95"] .tabs button.active,
|
||||
:root[data-theme="win95"] .tool.on {
|
||||
box-shadow: var(--sunken);
|
||||
background: #c0c0c0;
|
||||
color: #000;
|
||||
}
|
||||
:root[data-theme="win95"] .btn.primary { background: #c0c0c0; color: #000; outline: 1px solid #000; outline-offset: -1px; }
|
||||
:root[data-theme="win95"] .btn.danger { color: #c00000; }
|
||||
:root[data-theme="win95"] .icon-btn { color: #000; }
|
||||
:root[data-theme="win95"] .icon-btn.on { color: #c00000; }
|
||||
:root[data-theme="win95"] .btn:hover:not(:disabled),
|
||||
:root[data-theme="win95"] .icon-btn:hover,
|
||||
:root[data-theme="win95"] .tool:hover:not(:disabled) { background: #c0c0c0; color: #000; }
|
||||
|
||||
/* Text fields: sunken and white */
|
||||
:root[data-theme="win95"] input:not([type=range]):not([type=checkbox]):not([type=color]),
|
||||
:root[data-theme="win95"] textarea,
|
||||
:root[data-theme="win95"] select,
|
||||
:root[data-theme="win95"] .rich,
|
||||
:root[data-theme="win95"] .composer .box,
|
||||
:root[data-theme="win95"] .meter {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border: 0;
|
||||
box-shadow: var(--sunken);
|
||||
}
|
||||
:root[data-theme="win95"] .composer .box textarea { box-shadow: none; }
|
||||
:root[data-theme="win95"] .rich .area, :root[data-theme="win95"] .rich textarea { box-shadow: none; }
|
||||
:root[data-theme="win95"] input[type=range] { accent-color: #000080; }
|
||||
|
||||
/* Title bars */
|
||||
:root[data-theme="win95"] .modal header,
|
||||
:root[data-theme="win95"] .sidebar header,
|
||||
:root[data-theme="win95"] .chat > header,
|
||||
:root[data-theme="win95"] .panel > header {
|
||||
background: linear-gradient(90deg, #000080, #1084d0);
|
||||
color: #fff;
|
||||
border: 0;
|
||||
}
|
||||
:root[data-theme="win95"] .modal header { margin: 3px 3px 0; padding: 4px 4px 4px 8px; }
|
||||
:root[data-theme="win95"] .modal header h2 { font-size: 13px; font-weight: 700; color: #fff; }
|
||||
:root[data-theme="win95"] .modal header .icon-btn { width: 18px; height: 16px; }
|
||||
:root[data-theme="win95"] .chat > header h1,
|
||||
:root[data-theme="win95"] .panel > header h2,
|
||||
:root[data-theme="win95"] .sidebar header strong,
|
||||
:root[data-theme="win95"] .sidebar header .status,
|
||||
:root[data-theme="win95"] .chat > header .topic { color: #fff; }
|
||||
:root[data-theme="win95"] .chat > header .icon-btn,
|
||||
:root[data-theme="win95"] .panel > header .icon-btn,
|
||||
:root[data-theme="win95"] .sidebar header .icon-btn { width: 22px; height: 20px; }
|
||||
|
||||
/* Windows and panels */
|
||||
:root[data-theme="win95"] .modal,
|
||||
:root[data-theme="win95"] .menu,
|
||||
:root[data-theme="win95"] .pop {
|
||||
background: #c0c0c0;
|
||||
border: 0;
|
||||
box-shadow: var(--raised), 2px 2px 0 rgb(0 0 0 / 0.35);
|
||||
}
|
||||
:root[data-theme="win95"] .modal footer { background: #c0c0c0; border-top: 0; }
|
||||
:root[data-theme="win95"] .menu button:hover:not(:disabled),
|
||||
:root[data-theme="win95"] .menu button:focus-visible { background: #000080; color: #fff; }
|
||||
:root[data-theme="win95"] .rail { background: var(--rail); }
|
||||
:root[data-theme="win95"] .rail .tile.active::before { background: #fff; }
|
||||
:root[data-theme="win95"] .rail .add,
|
||||
:root[data-theme="win95"] .rail .ghost { color: #000; }
|
||||
:root[data-theme="win95"] .sidebar,
|
||||
:root[data-theme="win95"] .panel { border-left: 0; box-shadow: inset 1px 0 #fff; }
|
||||
:root[data-theme="win95"] .sidebar .scroll,
|
||||
:root[data-theme="win95"] .chat .list,
|
||||
:root[data-theme="win95"] .members,
|
||||
:root[data-theme="win95"] .panel .body {
|
||||
background: #fff;
|
||||
box-shadow: var(--sunken);
|
||||
margin: 2px;
|
||||
}
|
||||
:root[data-theme="win95"] .me,
|
||||
:root[data-theme="win95"] .elsewhere { background: #c0c0c0; box-shadow: var(--raised); }
|
||||
:root[data-theme="win95"] .chat { background: #c0c0c0; }
|
||||
:root[data-theme="win95"] .row.channel.selected,
|
||||
:root[data-theme="win95"] .dm.viewing { background: #000080; color: #fff; }
|
||||
:root[data-theme="win95"] .row.channel.selected .label { color: #fff; }
|
||||
:root[data-theme="win95"] .badge,
|
||||
:root[data-theme="win95"] .unread { background: #c00000; }
|
||||
:root[data-theme="win95"] .card { background: #fff; box-shadow: var(--sunken); border-top: 0; border-right: 0; border-bottom: 0; }
|
||||
:root[data-theme="win95"] .stage { background: #c0c0c0; }
|
||||
:root[data-theme="win95"] .stage .tile { background: #c0c0c0; border: 0; box-shadow: var(--raised); }
|
||||
:root[data-theme="win95"] .stage .tile.talking { box-shadow: var(--raised), inset 0 0 0 3px #008000; }
|
||||
|
||||
/* Classic scroll bars */
|
||||
:root[data-theme="win95"] ::-webkit-scrollbar { width: 16px; height: 16px; }
|
||||
:root[data-theme="win95"] ::-webkit-scrollbar-track {
|
||||
background-color: #dfdfdf;
|
||||
background-image: repeating-conic-gradient(#c0c0c0 0% 25%, #fff 0% 50%);
|
||||
background-size: 2px 2px;
|
||||
}
|
||||
:root[data-theme="win95"] ::-webkit-scrollbar-thumb {
|
||||
background: #c0c0c0;
|
||||
border: 0;
|
||||
box-shadow: var(--raised);
|
||||
}
|
||||
:root[data-theme="win95"] ::-webkit-scrollbar-button:single-button {
|
||||
display: block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: #c0c0c0 no-repeat center / 8px 8px;
|
||||
box-shadow: var(--raised);
|
||||
}
|
||||
:root[data-theme="win95"] ::-webkit-scrollbar-button:single-button:vertical:decrement {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 2L7 6H1z'/%3E%3C/svg%3E");
|
||||
}
|
||||
:root[data-theme="win95"] ::-webkit-scrollbar-button:single-button:vertical:increment {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 2h6L4 6z'/%3E%3C/svg%3E");
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
<script lang="ts">
|
||||
import { store, THEMES, type ThemeId } from '../lib/settings.svelte.ts';
|
||||
|
||||
function pick(id: ThemeId) {
|
||||
store.settings.theme = id;
|
||||
store.saveSettings();
|
||||
}
|
||||
</script>
|
||||
|
||||
<h3>Color scheme</h3>
|
||||
<div class="themes" role="radiogroup" aria-label="Color scheme">
|
||||
{#each THEMES as t (t.id)}
|
||||
<button role="radio" aria-checked={store.settings.theme === t.id} class:active={store.settings.theme === t.id}
|
||||
onclick={() => pick(t.id)} aria-label={t.name}>
|
||||
<!-- A miniature of the app in that theme -->
|
||||
<span class="mini" data-theme-preview={t.id} aria-hidden="true">
|
||||
<span class="m-rail"><span></span><span></span></span>
|
||||
<span class="m-side"><i></i><i class="sel"></i><i></i></span>
|
||||
<span class="m-chat">
|
||||
<span class="m-head"></span>
|
||||
<i class="a"></i><i></i><i class="short"></i>
|
||||
<span class="m-box"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="name">{t.name}</span>
|
||||
<span class="note">{t.note}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h3 { margin: 8px 0 0; font-size: 14px; }
|
||||
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
|
||||
.themes > button { display: flex; flex-direction: column; gap: 2px; padding: 8px; text-align: left; border: 1px solid var(--line); background: var(--bg-0); }
|
||||
.themes > button.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
|
||||
.name { font-weight: 600; margin-top: 6px; }
|
||||
.note { font-size: 12px; color: var(--text-dim); }
|
||||
.mini { display: flex; height: 84px; overflow: hidden; border: 1px solid var(--line); font-family: var(--font); }
|
||||
.m-rail { width: 16%; background: var(--rail, var(--bg-0)); display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 5px; }
|
||||
.m-rail span { width: 60%; aspect-ratio: 1; background: var(--accent); }
|
||||
.m-rail span + span { background: var(--bg-3); }
|
||||
.m-side { width: 30%; background: var(--bg-1); display: flex; flex-direction: column; gap: 5px; padding: 8px 5px; }
|
||||
.m-side i { height: 5px; background: var(--text-faint); width: 70%; }
|
||||
.m-side i.sel { background: var(--accent); width: 85%; }
|
||||
.m-chat { flex: 1; background: var(--bg-2); display: flex; flex-direction: column; gap: 5px; padding: 0 6px 6px; }
|
||||
.m-head { height: 10px; margin: 0 -6px 2px; background: var(--bg-1); border-bottom: 1px solid var(--line); }
|
||||
[data-theme-preview="win95"] .m-head { background: linear-gradient(90deg, #000080, #1084d0); }
|
||||
.m-chat i { height: 4px; background: var(--text-dim); width: 80%; }
|
||||
.m-chat i.a { background: var(--accent); width: 35%; }
|
||||
.m-chat i.short { width: 55%; }
|
||||
.m-box { margin-top: auto; height: 10px; background: var(--bg-3); border: 1px solid var(--line); }
|
||||
</style>
|
||||
@@ -0,0 +1,438 @@
|
||||
<script lang="ts">
|
||||
import Modal from './Modal.svelte';
|
||||
import RichEditor from './RichEditor.svelte';
|
||||
import { session } from '../lib/session.svelte.ts';
|
||||
import { PERM, type ChannelAcl, type AclEntry, type AclGroup } from '../core/client.ts';
|
||||
import { sounds } from '../lib/audio/sounds.svelte.ts';
|
||||
|
||||
type Props =
|
||||
| { mode: 'create'; parent: number; onclose: () => void; tab?: undefined; id?: undefined }
|
||||
| { mode: 'edit'; id: number; tab?: 'general' | 'permissions' | 'groups'; onclose: () => void; parent?: undefined };
|
||||
let props: Props = $props();
|
||||
|
||||
// svelte-ignore state_referenced_locally
|
||||
const { mode, onclose } = props;
|
||||
// svelte-ignore state_referenced_locally
|
||||
const channelId = props.mode === 'edit' ? props.id : null;
|
||||
// svelte-ignore state_referenced_locally
|
||||
const parentId = props.mode === 'create' ? props.parent : null;
|
||||
const client = session.client;
|
||||
|
||||
const channel = $derived(channelId != null ? session.channel(channelId) : undefined);
|
||||
const parent = $derived(session.channel(parentId ?? channel?.parent ?? 0));
|
||||
const isRoot = channelId === 0;
|
||||
|
||||
// svelte-ignore state_referenced_locally
|
||||
let tab = $state<'general' | 'permissions' | 'groups'>(props.tab ?? 'general');
|
||||
let error = $state('');
|
||||
|
||||
// ─── General ────────────────────────────────────────────────────────────────
|
||||
// svelte-ignore state_referenced_locally
|
||||
const initial = channelId != null ? session.channel(channelId) : undefined;
|
||||
let name = $state(initial?.name ?? '');
|
||||
let description = $state(initial?.description ?? '');
|
||||
let position = $state(initial?.position ?? 0);
|
||||
let maxUsers = $state(initial?.maxUsers ?? 0);
|
||||
let temporary = $state(false);
|
||||
const canTemp = $derived(session.can(parentId ?? 0, PERM.MakeTempChannel) !== false);
|
||||
const canPermanent = $derived(session.can(parentId ?? 0, PERM.MakeChannel) !== false);
|
||||
$effect(() => { if (mode === 'create' && !canPermanent && canTemp) temporary = true; });
|
||||
|
||||
// Long descriptions arrive later; take them into the editor once they do
|
||||
const descPending = $derived(!!channel?.descriptionHash && !channel.description);
|
||||
let descLoaded = $state(!(initial?.descriptionHash && !initial?.description));
|
||||
$effect(() => {
|
||||
if (channelId != null && descPending) session.loadDescription(channelId);
|
||||
if (!descLoaded && channel?.description) { description = channel.description; descLoaded = true; }
|
||||
});
|
||||
|
||||
// ─── ACL ────────────────────────────────────────────────────────────────────
|
||||
let acl = $state<ChannelAcl | null>(null);
|
||||
let aclDirty = $state(false);
|
||||
let selectedRule = $state(-1);
|
||||
let selectedGroup = $state('');
|
||||
let names = $state<Record<number, string>>({});
|
||||
|
||||
const offs: (() => void)[] = [];
|
||||
if (client && channelId != null) {
|
||||
offs.push(client.on('acl', a => {
|
||||
if (a.channelId !== channelId || acl) return;
|
||||
acl = a;
|
||||
selectedRule = a.acls.findIndex(r => !r.inherited);
|
||||
selectedGroup = a.groups[0]?.name ?? '';
|
||||
}));
|
||||
offs.push(client.on('userNames', m => { names = Object.fromEntries(m); }));
|
||||
names = Object.fromEntries(client.registeredNames);
|
||||
client.queryAcl(channelId);
|
||||
}
|
||||
$effect(() => () => offs.forEach(off => off()));
|
||||
|
||||
const userName = (id: number) => names[id] ?? `user #${id}`;
|
||||
const touch = () => { aclDirty = true; };
|
||||
|
||||
// Registered user id for a name, asked from the server
|
||||
function resolveName(raw: string): Promise<number | null> {
|
||||
const wanted = raw.trim().toLowerCase();
|
||||
const known = Object.entries(names).find(([, n]) => n.toLowerCase() === wanted);
|
||||
if (known) return Promise.resolve(Number(known[0]));
|
||||
if (!client || !wanted) return Promise.resolve(null);
|
||||
return new Promise(resolve => {
|
||||
const timer = setTimeout(() => { off(); resolve(null); }, 3000);
|
||||
const off = client.on('userNames', m => {
|
||||
for (const [id, n] of m) if (n.toLowerCase() === wanted) { clearTimeout(timer); off(); resolve(id); return; }
|
||||
});
|
||||
client.queryUsers({ names: [raw.trim()] });
|
||||
});
|
||||
}
|
||||
|
||||
const PERMS: { bit: number; name: string; rootOnly?: boolean }[] = [
|
||||
{ bit: PERM.Write, name: 'Write ACL (full control)' },
|
||||
{ bit: PERM.Traverse, name: 'Traverse' },
|
||||
{ bit: PERM.Enter, name: 'Enter' },
|
||||
{ bit: PERM.Speak, name: 'Speak' },
|
||||
{ bit: PERM.Whisper, name: 'Whisper' },
|
||||
{ bit: PERM.TextMessage, name: 'Text message' },
|
||||
{ bit: PERM.Listen, name: 'Listen' },
|
||||
{ bit: PERM.MuteDeafen, name: 'Mute and deafen' },
|
||||
{ bit: PERM.Move, name: 'Move users' },
|
||||
{ bit: PERM.MakeChannel, name: 'Make channel' },
|
||||
{ bit: PERM.MakeTempChannel, name: 'Make temporary channel' },
|
||||
{ bit: PERM.LinkChannel, name: 'Link channel' },
|
||||
{ bit: PERM.Kick, name: 'Kick users', rootOnly: true },
|
||||
{ bit: PERM.Ban, name: 'Ban users', rootOnly: true },
|
||||
{ bit: PERM.Register, name: 'Register users', rootOnly: true },
|
||||
{ bit: PERM.SelfRegister, name: 'Register self', rootOnly: true },
|
||||
{ bit: PERM.ResetUserContent, name: 'Reset user content', rootOnly: true }
|
||||
];
|
||||
const permList = $derived(PERMS.filter(p => !p.rootOnly || isRoot));
|
||||
const BUILTIN_GROUPS = ['all', 'auth', 'in', 'out', 'sub', 'admin'];
|
||||
const groupSuggestions = $derived([...new Set([...BUILTIN_GROUPS, ...(acl?.groups.map(g => g.name) ?? [])])]);
|
||||
|
||||
// $<certhash> groups match one certificate; name them after the online user when we can
|
||||
function groupLabel(g: string | null): string {
|
||||
if (g?.startsWith('$')) {
|
||||
const u = session.allUsers().find(x => x.hash === g.slice(1));
|
||||
return u ? `Certificate of ${u.name}` : `Certificate ${g.slice(1, 9)}...`;
|
||||
}
|
||||
return `@${g}`;
|
||||
}
|
||||
const ruleLabel = (r: AclEntry) => r.userId != null ? userName(r.userId) : groupLabel(r.group);
|
||||
const rule = $derived(acl && selectedRule >= 0 ? acl.acls[selectedRule] : null);
|
||||
let targetText = $state('');
|
||||
let targetKind = $state<'group' | 'user'>('group');
|
||||
$effect(() => {
|
||||
const r = rule;
|
||||
if (!r) return;
|
||||
targetKind = r.userId != null ? 'user' : 'group';
|
||||
targetText = r.userId != null ? userName(r.userId) : r.group ?? 'all';
|
||||
});
|
||||
|
||||
function addRule() {
|
||||
if (!acl) return;
|
||||
acl.acls.push({ applyHere: true, applySubs: true, inherited: false, userId: null, group: 'all', grant: 0, deny: 0 });
|
||||
selectedRule = acl.acls.length - 1;
|
||||
touch();
|
||||
}
|
||||
|
||||
function removeRule() {
|
||||
if (!acl || !rule || rule.inherited) return;
|
||||
acl.acls.splice(selectedRule, 1);
|
||||
selectedRule = Math.min(selectedRule, acl.acls.length - 1);
|
||||
touch();
|
||||
}
|
||||
|
||||
// Rules are evaluated in order; only the channel's own rules can move, and not above inherited ones
|
||||
function moveRule(dir: -1 | 1) {
|
||||
if (!acl || !rule || rule.inherited) return;
|
||||
const to = selectedRule + dir;
|
||||
if (to < 0 || to >= acl.acls.length || acl.acls[to].inherited) return;
|
||||
[acl.acls[selectedRule], acl.acls[to]] = [acl.acls[to], acl.acls[selectedRule]];
|
||||
selectedRule = to;
|
||||
touch();
|
||||
}
|
||||
|
||||
async function applyTarget() {
|
||||
if (!rule || rule.inherited) return;
|
||||
error = '';
|
||||
if (targetKind === 'group') {
|
||||
rule.userId = null;
|
||||
rule.group = targetText.trim().replace(/^@/, '') || 'all';
|
||||
} else {
|
||||
const id = await resolveName(targetText);
|
||||
if (id == null) { error = `"${targetText}" is not a registered user on this server.`; return; }
|
||||
rule.userId = id;
|
||||
rule.group = null;
|
||||
}
|
||||
touch();
|
||||
}
|
||||
|
||||
function setBit(kind: 'grant' | 'deny', bit: number, on: boolean) {
|
||||
if (!rule || rule.inherited) return;
|
||||
const other = kind === 'grant' ? 'deny' : 'grant';
|
||||
rule[kind] = on ? rule[kind] | bit : rule[kind] & ~bit;
|
||||
if (on) rule[other] &= ~bit; // allow and deny exclude each other
|
||||
touch();
|
||||
}
|
||||
|
||||
// ─── Groups ─────────────────────────────────────────────────────────────────
|
||||
const group = $derived(acl?.groups.find(g => g.name === selectedGroup) ?? null);
|
||||
let newGroup = $state('');
|
||||
let newMember = $state('');
|
||||
|
||||
function addGroup() {
|
||||
const n = newGroup.trim().replace(/^@/, '');
|
||||
if (!acl || !n || acl.groups.some(g => g.name === n)) return;
|
||||
acl.groups.push({ name: n, inherited: false, inherit: true, inheritable: true, add: [], remove: [], inheritedMembers: [] });
|
||||
selectedGroup = n;
|
||||
newGroup = '';
|
||||
touch();
|
||||
}
|
||||
|
||||
function deleteGroup() {
|
||||
if (!acl || !group || group.inherited) return;
|
||||
acl.groups = acl.groups.filter(g => g !== group);
|
||||
selectedGroup = acl.groups[0]?.name ?? '';
|
||||
touch();
|
||||
}
|
||||
|
||||
async function addMember() {
|
||||
if (!group) return;
|
||||
error = '';
|
||||
const id = await resolveName(newMember);
|
||||
if (id == null) { error = `"${newMember}" is not a registered user on this server.`; return; }
|
||||
if (!group.add.includes(id)) group.add.push(id);
|
||||
group.remove = group.remove.filter(x => x !== id);
|
||||
newMember = '';
|
||||
touch();
|
||||
}
|
||||
|
||||
function toggleInheritedMember(g: AclGroup, id: number) {
|
||||
g.remove = g.remove.includes(id) ? g.remove.filter(x => x !== id) : [...g.remove, id];
|
||||
touch();
|
||||
}
|
||||
|
||||
// ─── Save ───────────────────────────────────────────────────────────────────
|
||||
function save() {
|
||||
if (!client) return;
|
||||
error = '';
|
||||
if (mode === 'create') {
|
||||
if (!name.trim()) { error = 'The channel needs a name.'; return; }
|
||||
client.createChannel(parentId!, name.trim(), { temporary, description, position, maxUsers });
|
||||
sounds.play('channelCreated');
|
||||
return onclose();
|
||||
}
|
||||
const ch = channel;
|
||||
if (!ch || channelId == null) return onclose();
|
||||
const fields: { name?: string; description?: string; position?: number; maxUsers?: number } = {};
|
||||
if (!isRoot && name.trim() && name.trim() !== ch.name) fields.name = name.trim();
|
||||
if (descLoaded && description !== ch.description) fields.description = description;
|
||||
if (position !== ch.position) fields.position = Number(position) || 0;
|
||||
if (maxUsers !== ch.maxUsers) fields.maxUsers = Number(maxUsers) || 0;
|
||||
if (Object.keys(fields).length) client.updateChannel(channelId, fields);
|
||||
if (acl && aclDirty) client.saveAcl($state.snapshot(acl) as ChannelAcl);
|
||||
if (Object.keys(fields).length || aclDirty) sounds.play('channelEdited');
|
||||
onclose();
|
||||
}
|
||||
|
||||
const title = $derived(mode === 'create' ? `New channel in ${parent?.name || 'Root'}` : `Channel: ${channel?.name || 'Root'}`);
|
||||
</script>
|
||||
|
||||
<Modal {title} {onclose} width={760}>
|
||||
{#if mode === 'edit'}
|
||||
<div class="tabs" role="tablist">
|
||||
<button role="tab" aria-selected={tab === 'general'} class:active={tab === 'general'} onclick={() => (tab = 'general')}>General</button>
|
||||
<button role="tab" aria-selected={tab === 'permissions'} class:active={tab === 'permissions'} onclick={() => (tab = 'permissions')}>Permissions</button>
|
||||
<button role="tab" aria-selected={tab === 'groups'} class:active={tab === 'groups'} onclick={() => (tab = 'groups')}>Groups</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if tab === 'general'}
|
||||
<label for="ch-name">Name</label>
|
||||
<input id="ch-name" bind:value={name} disabled={isRoot} placeholder="Channel name" />
|
||||
<label for="ch-desc">Description</label>
|
||||
{#if descLoaded}
|
||||
<RichEditor value={description} limit={session.htmlLimit} placeholder="What is this channel for?" onchange={h => (description = h)} />
|
||||
{:else}
|
||||
<p class="dim">Loading description...</p>
|
||||
{/if}
|
||||
<div class="row3">
|
||||
<div>
|
||||
<label for="ch-pos">Position</label>
|
||||
<input id="ch-pos" type="number" bind:value={position} />
|
||||
</div>
|
||||
<div>
|
||||
<label for="ch-max">User limit</label>
|
||||
<input id="ch-max" type="number" min="0" bind:value={maxUsers} />
|
||||
</div>
|
||||
{#if mode === 'create'}
|
||||
<label class="check"><input type="checkbox" bind:checked={temporary} disabled={!canTemp || !canPermanent} /> Temporary (removed when empty)</label>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="dim small">Lower positions come first. A user limit of 0 uses the server default.</p>
|
||||
{:else if !acl}
|
||||
<p class="dim">Loading permissions...</p>
|
||||
{:else if tab === 'permissions'}
|
||||
<label class="check top"><input type="checkbox" bind:checked={acl.inheritAcls} onchange={touch} /> Inherit rules from the parent channel</label>
|
||||
<div class="split">
|
||||
<div class="listcol">
|
||||
<ul class="list" role="listbox" aria-label="Rules">
|
||||
{#each acl.acls as r, i (i)}
|
||||
<li>
|
||||
<button role="option" aria-selected={i === selectedRule} class:sel={i === selectedRule} class:inh={r.inherited} onclick={() => (selectedRule = i)}>
|
||||
<span>{ruleLabel(r)}</span>
|
||||
{#if r.inherited}<small>inherited</small>{/if}
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li class="dim small pad">No rules yet</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<div class="listbtns">
|
||||
<button class="btn" onclick={addRule}>Add</button>
|
||||
<button class="btn" disabled={!rule || rule.inherited} onclick={removeRule}>Remove</button>
|
||||
<button class="btn" disabled={!rule || rule.inherited} onclick={() => moveRule(-1)} aria-label="Move up">Up</button>
|
||||
<button class="btn" disabled={!rule || rule.inherited} onclick={() => moveRule(1)} aria-label="Move down">Down</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
{#if rule}
|
||||
{#if rule.inherited}<p class="note">Inherited from a parent channel. Edit it there, or turn off inheriting above.</p>{/if}
|
||||
<fieldset disabled={rule.inherited}>
|
||||
<div class="target">
|
||||
<select bind:value={targetKind} aria-label="Target type">
|
||||
<option value="group">Group</option>
|
||||
<option value="user">User</option>
|
||||
</select>
|
||||
<input bind:value={targetText} list="ch-groups" aria-label="Target" onchange={applyTarget}
|
||||
placeholder={targetKind === 'group' ? 'all, auth, in, admin...' : 'Registered user name'} />
|
||||
<datalist id="ch-groups">{#each groupSuggestions as g (g)}<option value={g}></option>{/each}</datalist>
|
||||
</div>
|
||||
<div class="applies">
|
||||
<label class="check"><input type="checkbox" bind:checked={rule.applyHere} onchange={touch} /> Applies to this channel</label>
|
||||
<label class="check"><input type="checkbox" bind:checked={rule.applySubs} onchange={touch} /> Applies to subchannels</label>
|
||||
</div>
|
||||
<table class="perms">
|
||||
<thead><tr><th>Permission</th><th>Allow</th><th>Deny</th></tr></thead>
|
||||
<tbody>
|
||||
{#each permList as p (p.bit)}
|
||||
<tr>
|
||||
<td>{p.name}</td>
|
||||
<td><input type="checkbox" aria-label="Allow {p.name}" checked={(rule.grant & p.bit) !== 0} onchange={e => setBit('grant', p.bit, e.currentTarget.checked)} /></td>
|
||||
<td><input type="checkbox" aria-label="Deny {p.name}" checked={(rule.deny & p.bit) !== 0} onchange={e => setBit('deny', p.bit, e.currentTarget.checked)} /></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</fieldset>
|
||||
{:else}
|
||||
<p class="dim">Select a rule, or add one.</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="split">
|
||||
<div class="listcol">
|
||||
<ul class="list" role="listbox" aria-label="Groups">
|
||||
{#each acl.groups as g (g.name)}
|
||||
<li>
|
||||
<button role="option" aria-selected={g.name === selectedGroup} class:sel={g.name === selectedGroup} onclick={() => (selectedGroup = g.name)}>
|
||||
<span>@{g.name}</span>
|
||||
{#if g.inherited}<small>inherited</small>{/if}
|
||||
</button>
|
||||
</li>
|
||||
{:else}
|
||||
<li class="dim small pad">No groups yet</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<div class="listbtns">
|
||||
<input bind:value={newGroup} placeholder="New group" aria-label="New group name" onkeydown={e => { if (e.key === 'Enter') addGroup(); }} />
|
||||
<button class="btn" onclick={addGroup} disabled={!newGroup.trim()}>Add</button>
|
||||
<button class="btn" disabled={!group || group.inherited} onclick={deleteGroup}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
{#if group}
|
||||
<label class="check"><input type="checkbox" bind:checked={group.inherit} onchange={touch} /> Include members of the parent's @{group.name}</label>
|
||||
<label class="check"><input type="checkbox" bind:checked={group.inheritable} onchange={touch} /> Subchannels can use this group</label>
|
||||
<h4>Members added here</h4>
|
||||
<ul class="members">
|
||||
{#each group.add as id (id)}
|
||||
<li><span>{userName(id)}</span><button class="link danger" onclick={() => { group.add = group.add.filter(x => x !== id); touch(); }}>Remove</button></li>
|
||||
{:else}
|
||||
<li class="dim small">Nobody yet</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<div class="target">
|
||||
<input bind:value={newMember} placeholder="Registered user name" aria-label="Member name" onkeydown={e => { if (e.key === 'Enter') addMember(); }} />
|
||||
<button class="btn" onclick={addMember} disabled={!newMember.trim()}>Add member</button>
|
||||
</div>
|
||||
{#if group.inheritedMembers.length}
|
||||
<h4>Inherited members</h4>
|
||||
<ul class="members">
|
||||
{#each group.inheritedMembers as id (id)}
|
||||
{@const excluded = group.remove.includes(id)}
|
||||
<li><span class:struck={excluded}>{userName(id)}</span>
|
||||
<button class="link" onclick={() => toggleInheritedMember(group, id)}>{excluded ? 'Include again' : 'Exclude here'}</button></li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="dim">Select a group, or add one.</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if error}<p class="error">{error}</p>{/if}
|
||||
|
||||
{#snippet footer()}
|
||||
<button class="btn" onclick={onclose}>Cancel</button>
|
||||
<button class="btn primary" onclick={save}>{mode === 'create' ? 'Create channel' : 'Save'}</button>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.tabs { display: flex; gap: 2px; margin: 8px 0 4px; border-bottom: 1px solid var(--line); }
|
||||
.tabs button { padding: 8px 14px; color: var(--text-dim); font-weight: 600; }
|
||||
.tabs button.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
|
||||
.row3 { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
|
||||
.row3 > div { width: 140px; }
|
||||
.check { display: flex; align-items: center; gap: 8px; text-transform: none; font-weight: 400; letter-spacing: 0; font-size: 14px; color: var(--text); margin: 10px 0 0; }
|
||||
.check input { width: auto; }
|
||||
.check.top { margin-top: 12px; }
|
||||
.split { display: grid; grid-template-columns: 220px 1fr; gap: 14px; margin-top: 12px; }
|
||||
@media (max-width: 640px) { .split { grid-template-columns: 1fr; } }
|
||||
.list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--bg-0); max-height: 340px; overflow-y: auto; }
|
||||
.list button { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; text-align: left; font-size: 14px; }
|
||||
.list button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.list { overflow-x: hidden; }
|
||||
.list button:hover { background: var(--bg-hover); }
|
||||
.list button.sel { background: var(--accent); color: var(--accent-text); }
|
||||
.list button.inh:not(.sel) { color: var(--text-dim); }
|
||||
.list small { font-size: 11px; opacity: 0.8; }
|
||||
.pad { padding: 8px 10px; }
|
||||
.listbtns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
|
||||
.listbtns .btn { padding: 4px 10px; font-size: 13px; }
|
||||
.listbtns input { flex: 1 1 100%; }
|
||||
.detail { min-width: 0; }
|
||||
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
|
||||
fieldset:disabled { opacity: 0.6; }
|
||||
.target { display: flex; gap: 6px; }
|
||||
.target select { width: 100px; flex: none; }
|
||||
.applies { display: flex; gap: 16px; flex-wrap: wrap; }
|
||||
.perms { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
|
||||
.perms th { text-align: left; color: var(--text-faint); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
|
||||
.perms td { padding: 3px 6px; border-bottom: 1px solid var(--line); }
|
||||
.perms th:not(:first-child), .perms td:not(:first-child) { text-align: center; width: 60px; }
|
||||
.perms input { width: auto; }
|
||||
h4 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
|
||||
.members { list-style: none; margin: 0 0 8px; padding: 0; }
|
||||
.members li { display: flex; justify-content: space-between; padding: 3px 0; font-size: 14px; }
|
||||
.struck { text-decoration: line-through; color: var(--text-faint); }
|
||||
.link { color: var(--link); font-size: 13px; }
|
||||
.link.danger { color: var(--danger); }
|
||||
.note { margin: 0 0 8px; font-size: 13px; color: var(--warn); }
|
||||
.dim { color: var(--text-dim); }
|
||||
.small { font-size: 12px; }
|
||||
.error { color: var(--danger); margin: 10px 0 0; }
|
||||
</style>
|
||||
@@ -8,6 +8,8 @@
|
||||
import { channelMenu, userMenu } from '../lib/actions.ts';
|
||||
import { voice } from '../lib/audio/voice.svelte.ts';
|
||||
import { store } from '../lib/settings.svelte.ts';
|
||||
import { drag } from '../lib/drag.svelte.ts';
|
||||
import { sounds } from '../lib/audio/sounds.svelte.ts';
|
||||
import type { Channel } from '../core/client.ts';
|
||||
|
||||
let { channel, depth = 0, onnavigate }: { channel: Channel; depth?: number; onnavigate: () => void } = $props();
|
||||
@@ -30,6 +32,32 @@
|
||||
};
|
||||
}
|
||||
|
||||
// Drop a person to move them here, or a channel to make it a subchannel of this one
|
||||
let over = $state(false);
|
||||
const canDrop = $derived.by(() => {
|
||||
const d = drag.item;
|
||||
if (!d) return false;
|
||||
if (d.kind === 'user') return session.user(d.id)?.channelId !== channel.id;
|
||||
return d.id !== channel.id && channel.id !== session.channel(d.id)?.parent && !session.isInside(channel.id, d.id);
|
||||
});
|
||||
|
||||
function onDrop(e: DragEvent) {
|
||||
e.preventDefault();
|
||||
over = false;
|
||||
// Check before clearing: canDrop is derived from the dragged item
|
||||
const d = drag.item;
|
||||
const ok = canDrop;
|
||||
drag.item = null;
|
||||
if (!d || !ok) return;
|
||||
if (d.kind === 'user') {
|
||||
if (d.id === session.self?.session) session.joinChannel(channel.id);
|
||||
else session.moveUser(d.id, channel.id);
|
||||
} else {
|
||||
session.client?.updateChannel(d.id, { parent: channel.id });
|
||||
sounds.play('channelMoved');
|
||||
}
|
||||
}
|
||||
|
||||
const channelClicks = clickOrDouble(
|
||||
() => { session.showChannel(channel.id); ui.panelOpen = true; },
|
||||
() => { session.joinChannel(channel.id); onnavigate(); }
|
||||
@@ -37,8 +65,11 @@
|
||||
</script>
|
||||
|
||||
<li>
|
||||
<div class="row channel" class:here class:selected style:padding-left="{8 + depth * 14}px"
|
||||
oncontextmenu={e => menu.show(e, channelMenu(channel))} role="presentation">
|
||||
<div class="row channel" class:here class:selected class:over style:padding-left="{8 + depth * 14}px"
|
||||
oncontextmenu={e => menu.show(e, channelMenu(channel))} role="presentation"
|
||||
ondragover={e => { if (canDrop) { e.preventDefault(); over = true; } }}
|
||||
ondragleave={() => (over = false)}
|
||||
ondrop={onDrop}>
|
||||
{#if children.length || users.length}
|
||||
<button class="caret" class:collapsed={!expanded} onclick={() => session.toggleExpanded(channel.id)}
|
||||
aria-label={expanded ? 'Collapse' : 'Expand'} aria-expanded={expanded}>
|
||||
@@ -47,7 +78,11 @@
|
||||
{:else}
|
||||
<span class="caret"></span>
|
||||
{/if}
|
||||
<button class="name" title="Click for details, double-click to join" {...channelClicks}>
|
||||
<!-- The name is what people grab; a drag cannot start from a button inside a draggable element -->
|
||||
<button class="name" title="Click for details, double-click to join" {...channelClicks}
|
||||
draggable={channel.id !== 0}
|
||||
ondragstart={e => { drag.item = { kind: 'channel', id: channel.id }; e.dataTransfer?.setData('text/plain', channel.name); }}
|
||||
ondragend={() => { drag.item = null; over = false; }}>
|
||||
{#if !channel.canEnter}<Icon name="lock" size={14} />{/if}
|
||||
<span class="label">{channel.name || 'Root'}</span>
|
||||
{#if !expanded && total > 0}<span class="count" title="{total} {total === 1 ? 'person' : 'people'} inside">{total}</span>{/if}
|
||||
@@ -65,6 +100,9 @@
|
||||
)}
|
||||
<li>
|
||||
<button class="row user" class:self={isSelf} style:padding-left="{30 + depth * 14}px"
|
||||
draggable="true"
|
||||
ondragstart={e => { drag.item = { kind: 'user', id: u.session }; e.dataTransfer?.setData('text/plain', u.name); }}
|
||||
ondragend={() => (drag.item = null)}
|
||||
title={isSelf ? 'You' : `${store.displayName(u)} (double-click to message)`} {...clicks}
|
||||
oncontextmenu={e => menu.show(e, userMenu(u))}>
|
||||
<Avatar name={u.name} size={22} speaking={voice.talking[u.session] || (isSelf && voice.transmitting)} />
|
||||
@@ -98,6 +136,8 @@
|
||||
.row { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 30px; padding-right: 8px; color: var(--text-dim); }
|
||||
.channel:hover, .user:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.channel.selected { background: var(--bg-active); color: var(--text); }
|
||||
.channel.over { background: var(--accent); color: var(--accent-text); }
|
||||
.channel.over .label { color: var(--accent-text); }
|
||||
.channel.here .label { color: var(--text); font-weight: 600; }
|
||||
.channel.here { box-shadow: inset 3px 0 0 var(--speaking); }
|
||||
.caret { width: 14px; flex: none; display: inline-flex; justify-content: center; color: var(--text-faint); }
|
||||
|
||||
+28
-1
@@ -3,6 +3,7 @@
|
||||
import ChatLog from './ChatLog.svelte';
|
||||
import Composer from './Composer.svelte';
|
||||
import VoiceStage from './VoiceStage.svelte';
|
||||
import { ui } from '../lib/ui.svelte.ts';
|
||||
import { session } from '../lib/session.svelte.ts';
|
||||
|
||||
// showStage: voice tiles above the chat when the window is too narrow for the member list
|
||||
@@ -28,6 +29,24 @@
|
||||
|
||||
{#if showStage && session.status === 'connected'}<VoiceStage />{/if}
|
||||
|
||||
{#if session.status === 'idle' && session.disconnectInfo}
|
||||
{@const d = session.disconnectInfo}
|
||||
<div class="ended" class:bad={d.kind === 'kicked' || d.kind === 'banned'}>
|
||||
<h2>
|
||||
{#if d.kind === 'kicked'}You were kicked{d.by ? ` by ${d.by}` : ''}
|
||||
{:else if d.kind === 'banned'}You were banned{d.by ? ` by ${d.by}` : ''}
|
||||
{:else if d.kind === 'rejected'}The server refused the connection
|
||||
{:else}Connection lost{/if}
|
||||
</h2>
|
||||
{#if d.reason}<p class="reason">{d.reason}</p>{/if}
|
||||
<p class="where">{session.server?.label}</p>
|
||||
<div class="row">
|
||||
<button class="btn primary" onclick={() => session.reconnect()}>Reconnect</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
<ChatLog key={session.view}>
|
||||
{#snippet empty()}
|
||||
<div class="empty">
|
||||
@@ -38,7 +57,8 @@
|
||||
<h2>Connecting...</h2>
|
||||
{:else}
|
||||
<h2>mumh5</h2>
|
||||
<p>Choose a server to get started.</p>
|
||||
<p>Choose a server to get started, or find one:</p>
|
||||
<button class="btn browse" onclick={() => (ui.publicServers = true)}>Browse public servers</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
@@ -59,4 +79,11 @@
|
||||
.empty { padding: 32px 16px 8px; }
|
||||
.empty h2 { margin: 0 0 4px; font-size: 24px; }
|
||||
.empty p { margin: 0; color: var(--text-dim); }
|
||||
.browse { margin-top: 12px; }
|
||||
.ended { max-width: 460px; margin: 16px 16px 0; padding: 16px 18px; background: var(--bg-1); border: 1px solid var(--line); border-left: 4px solid var(--warn); }
|
||||
.ended.bad { border-left-color: var(--danger); }
|
||||
.ended h2 { margin: 0; font-size: 20px; }
|
||||
.ended .reason { margin: 8px 0 0; color: var(--text); font-size: 15px; overflow-wrap: anywhere; }
|
||||
.ended .where { margin-top: 4px; font-size: 13px; color: var(--text-faint); }
|
||||
.ended .row { margin-top: 14px; }
|
||||
</style>
|
||||
|
||||
+115
-26
@@ -1,48 +1,112 @@
|
||||
<script lang="ts">
|
||||
import Icon from './Icon.svelte';
|
||||
import FormatToolbar from './FormatToolbar.svelte';
|
||||
import { session } from '../lib/session.svelte.ts';
|
||||
import { store } from '../lib/settings.svelte.ts';
|
||||
import { ui } from '../lib/ui.svelte.ts';
|
||||
import { acceptAttr } from '../lib/upload.ts';
|
||||
import { toMumbleHtml } from '../lib/html.ts';
|
||||
|
||||
// target: the chat this composer sends to ("ch:<id>" or "dm:<session>")
|
||||
let { target, placeholder, autofocus = true }: { target: string; placeholder: string; autofocus?: boolean } = $props();
|
||||
|
||||
let text = $state('');
|
||||
let input: HTMLTextAreaElement;
|
||||
let input: HTMLDivElement;
|
||||
let picker: HTMLInputElement;
|
||||
let imagePicker: HTMLInputElement;
|
||||
let empty = $state(true);
|
||||
let source = $state(false);
|
||||
let sourceText = $state('');
|
||||
// The formatting toolbar is opt-in and remembered
|
||||
let formatting = $state(loadFormatting());
|
||||
const disabled = $derived(session.status !== 'connected');
|
||||
const uploads = $derived(session.uploads.filter(u => u.key === target));
|
||||
|
||||
function loadFormatting(): boolean {
|
||||
try { return localStorage.getItem('mumh5.formatBar') === '1'; } catch { return false; }
|
||||
}
|
||||
function toggleFormatting() {
|
||||
formatting = !formatting;
|
||||
try { localStorage.setItem('mumh5.formatBar', formatting ? '1' : '0'); } catch { /* storage unavailable */ }
|
||||
if (!formatting && source) toggleSource();
|
||||
input.focus();
|
||||
}
|
||||
|
||||
// Know the host's allowed types before the picker opens
|
||||
$effect(() => {
|
||||
if (store.settings.uploadHost && store.settings.uploadKey) session.loadUploadInfo().catch(() => {});
|
||||
});
|
||||
|
||||
const sync = () => { empty = !input.textContent?.trim() && !input.querySelector('img'); };
|
||||
|
||||
function exec(cmd: string, arg?: string) {
|
||||
input.focus();
|
||||
document.execCommand(cmd, false, arg);
|
||||
sync();
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if (session.sendText(text, target)) text = '';
|
||||
const html = source ? sourceText : input.innerHTML;
|
||||
// Plain text goes out the usual way; anything formatted as sanitized XHTML
|
||||
const formatted = source || !!input.querySelector('b, strong, i, em, u, s, strike, span[style], font, ul, ol, a, img');
|
||||
const ok = formatted
|
||||
? session.sendHtml(toMumbleHtml(html, { linkify: true }), target)
|
||||
: session.sendText(input.innerText, target);
|
||||
if (!ok) return;
|
||||
input.innerHTML = '';
|
||||
sourceText = '';
|
||||
if (source) source = false;
|
||||
sync();
|
||||
}
|
||||
|
||||
function onkeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
|
||||
if (e.key === 'Enter' && !e.isComposing) {
|
||||
e.preventDefault();
|
||||
submit();
|
||||
if (e.shiftKey) exec('insertLineBreak');
|
||||
else submit();
|
||||
return;
|
||||
}
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
const cmd = ({ b: 'bold', i: 'italic', u: 'underline' } as Record<string, string>)[e.key.toLowerCase()];
|
||||
if (cmd) { e.preventDefault(); exec(cmd); }
|
||||
}
|
||||
}
|
||||
|
||||
function onpaste(e: ClipboardEvent) {
|
||||
const files = [...(e.clipboardData?.files ?? [])];
|
||||
if (files.length) {
|
||||
e.preventDefault();
|
||||
session.uploadFiles(files, target);
|
||||
}
|
||||
e.preventDefault();
|
||||
if (files.length) return session.uploadFiles(files, target);
|
||||
const html = e.clipboardData?.getData('text/html');
|
||||
if (html && formatting) exec('insertHTML', toMumbleHtml(html));
|
||||
else exec('insertText', e.clipboardData?.getData('text/plain') ?? '');
|
||||
}
|
||||
|
||||
// Grow with content up to a limit
|
||||
$effect(() => {
|
||||
void text;
|
||||
input.style.height = 'auto';
|
||||
input.style.height = Math.min(input.scrollHeight, 200) + 'px';
|
||||
});
|
||||
// window.prompt does not exist in Electron; the app's dialog, then restore the selection
|
||||
function link() {
|
||||
const sel = window.getSelection();
|
||||
const range = sel && sel.rangeCount && input.contains(sel.anchorNode) ? sel.getRangeAt(0).cloneRange() : null;
|
||||
ui.prompt = {
|
||||
title: 'Insert link', label: 'Address (https://...)', confirm: 'Insert link', initial: 'https://',
|
||||
onsubmit: raw => {
|
||||
const url = raw.trim();
|
||||
if (!/^https?:\/\/\S+$/i.test(url)) return;
|
||||
input.focus();
|
||||
if (range) { sel!.removeAllRanges(); sel!.addRange(range); }
|
||||
if (range && !range.collapsed) exec('createLink', url);
|
||||
else exec('insertHTML', `<a href="${url.replace(/"/g, '"')}">${url.replace(/</g, '<')}</a>`);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function toggleSource() {
|
||||
if (!source) {
|
||||
sourceText = toMumbleHtml(input.innerHTML);
|
||||
source = true;
|
||||
} else {
|
||||
input.innerHTML = toMumbleHtml(sourceText);
|
||||
source = false;
|
||||
sync();
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
void target;
|
||||
@@ -62,21 +126,46 @@
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
<div class="box">
|
||||
<button class="icon-btn" title={store.settings.uploadHost ? "Upload a file" : "Send an image"} {disabled} onclick={() => picker.click()}><Icon name="paperclip" /></button>
|
||||
<input bind:this={picker} type="file" multiple hidden
|
||||
accept={store.settings.uploadHost && store.settings.uploadKey ? acceptAttr(session.uploadInfo) : 'image/*'}
|
||||
onchange={() => { session.uploadFiles([...(picker.files ?? [])], target); picker.value = ''; }} />
|
||||
<textarea bind:this={input} bind:value={text} rows="1" {placeholder} {disabled} {onkeydown} {onpaste}
|
||||
aria-label="Message"></textarea>
|
||||
<button class="icon-btn send" title="Send" disabled={disabled || !text.trim()} onclick={submit}><Icon name="send" size={18} /></button>
|
||||
<div class="frame">
|
||||
{#if formatting}
|
||||
<FormatToolbar {exec} onlink={link} onimage={() => imagePicker.click()} {source} ontogglesource={toggleSource} />
|
||||
{/if}
|
||||
<div class="box">
|
||||
<button class="icon-btn" title={store.settings.uploadHost ? 'Upload a file' : 'Send an image'} {disabled} onclick={() => picker.click()}><Icon name="paperclip" /></button>
|
||||
<input bind:this={picker} type="file" multiple hidden
|
||||
accept={store.settings.uploadHost && store.settings.uploadKey ? acceptAttr(session.uploadInfo) : 'image/*'}
|
||||
onchange={() => { session.uploadFiles([...(picker.files ?? [])], target); picker.value = ''; }} />
|
||||
<input bind:this={imagePicker} type="file" accept="image/*" hidden
|
||||
onchange={() => { session.uploadFiles([...(imagePicker.files ?? [])], target); imagePicker.value = ''; }} />
|
||||
<div class="input" class:blank={empty} class:hidden={source} bind:this={input} contenteditable={!disabled}
|
||||
role="textbox" aria-multiline="true" aria-label="Message" tabindex="0" data-placeholder={placeholder}
|
||||
oninput={sync} {onkeydown} {onpaste}></div>
|
||||
{#if source}
|
||||
<textarea class="input src" bind:value={sourceText} aria-label="HTML source" spellcheck="false"
|
||||
onkeydown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(); } }}></textarea>
|
||||
{/if}
|
||||
<button class="icon-btn fmt" class:on={formatting} title="Text formatting" aria-label="Text formatting" aria-pressed={formatting}
|
||||
{disabled} onmousedown={e => e.preventDefault()} onclick={toggleFormatting}>Aa</button>
|
||||
<button class="icon-btn send" title="Send" disabled={disabled || (empty && !(source && sourceText.trim()))} onclick={submit}><Icon name="send" size={18} /></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.composer { flex: none; padding: 0 16px 16px; }
|
||||
.box { display: flex; align-items: flex-end; gap: 4px; background: var(--bg-3); padding: 6px; }
|
||||
textarea { flex: 1; resize: none; border: 0; background: transparent; padding: 6px 4px; max-height: 200px; line-height: 1.4; }
|
||||
/* Same height as the user panel at the bottom of the sidebar; grows for longer messages */
|
||||
.composer { flex: none; min-height: var(--footer-h); display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 16px; background: var(--bg-0); }
|
||||
.frame { background: var(--bg-3); }
|
||||
.frame :global(.toolbar) { background: var(--bg-2); }
|
||||
.box { display: flex; align-items: flex-end; gap: 4px; min-height: calc(var(--footer-h) - 12px); padding: 2px 4px; }
|
||||
.input { position: relative; flex: 1; min-width: 0; padding: 8px 4px; max-height: 200px; overflow-y: auto; line-height: 1.4; outline: none; overflow-wrap: anywhere; white-space: pre-wrap; }
|
||||
.input.hidden { display: none; }
|
||||
.input.blank::before { content: attr(data-placeholder); position: absolute; left: 4px; top: 8px; color: var(--text-faint); pointer-events: none; }
|
||||
.input :global(img) { max-height: 120px; }
|
||||
.input :global(ul), .input :global(ol) { margin: 0; padding-left: 20px; }
|
||||
.input[contenteditable='false'] { color: var(--text-faint); }
|
||||
.src { border: 0; resize: none; background: transparent; font: 12px var(--mono); min-height: 60px; }
|
||||
.fmt { font-weight: 700; font-size: 13px; }
|
||||
.fmt.on { color: var(--accent-hover); }
|
||||
.send:not(:disabled) { color: var(--accent-hover); }
|
||||
.uploads { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
|
||||
.uploads li { display: flex; align-items: center; gap: 8px; background: var(--bg-1); border: 1px solid var(--line); padding: 6px 10px; font-size: 13px; }
|
||||
|
||||
@@ -5,14 +5,18 @@
|
||||
import { identities } from '../lib/identities.svelte.ts';
|
||||
import { makeServerIcon } from '../lib/upload.ts';
|
||||
|
||||
let { server, onclose }: { server: SavedServer | null; onclose: () => void } = $props();
|
||||
// prefill: values for a new server, e.g. picked from the public list
|
||||
let { server, prefill, onclose }: { server: SavedServer | null; prefill?: { host?: string; port?: number; label?: string }; onclose: () => void } = $props();
|
||||
|
||||
// svelte-ignore state_referenced_locally
|
||||
const initial = server;
|
||||
let label = $state(initial?.label ?? '');
|
||||
let host = $state(initial?.host ?? '');
|
||||
let port = $state(initial?.port ?? 64738);
|
||||
let username = $state(initial?.username ?? '');
|
||||
// svelte-ignore state_referenced_locally
|
||||
const pre = prefill ?? {};
|
||||
let label = $state(initial?.label ?? pre.label ?? '');
|
||||
let host = $state(initial?.host ?? pre.host ?? '');
|
||||
let port = $state(initial?.port ?? pre.port ?? 64738);
|
||||
// New servers start with the name you used last
|
||||
let username = $state(initial?.username ?? store.servers.at(-1)?.username ?? '');
|
||||
let password = $state(initial?.password ?? '');
|
||||
let identityId = $state(initial?.identityId ?? '');
|
||||
let icon = $state(initial?.icon ?? '');
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
x: Math.max(4, Math.min(m.x, window.innerWidth - r.width - 4)),
|
||||
y: Math.max(4, Math.min(m.y, window.innerHeight - r.height - 4))
|
||||
};
|
||||
el.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();
|
||||
if (!m.keepFocus) el.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();
|
||||
});
|
||||
|
||||
function onkeydown(e: KeyboardEvent) {
|
||||
@@ -39,7 +39,9 @@
|
||||
<div class="catcher" role="presentation" onmousedown={() => menu.close()} oncontextmenu={e => { e.preventDefault(); menu.close(); }}></div>
|
||||
<div class="menu" role="menu" bind:this={el} style:left="{pos.x}px" style:top="{pos.y}px">
|
||||
{#each menu.open.items as item, i (i)}
|
||||
{#if item.separator}
|
||||
{#if item.header}
|
||||
<div class="head" role="presentation">{item.label}</div>
|
||||
{:else if item.separator}
|
||||
<div class="sep" role="separator"></div>
|
||||
{:else if item.slider}
|
||||
{@const sl = item.slider}
|
||||
@@ -51,7 +53,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<button role="menuitem" class:danger={item.danger} disabled={item.disabled}
|
||||
onclick={() => { menu.close(); item.action?.(); }}>
|
||||
onmousedown={e => e.preventDefault()} onclick={() => { menu.close(); item.action?.(); }}>
|
||||
<span class="label">{item.label}</span>
|
||||
{#if item.checked !== undefined}<span class="box" class:on={item.checked}></span>{/if}
|
||||
</button>
|
||||
@@ -74,6 +76,8 @@
|
||||
.box { width: 14px; height: 14px; border: 2px solid currentColor; }
|
||||
.box.on { background: currentColor; }
|
||||
.sep { height: 1px; margin: 4px 6px; background: var(--line); }
|
||||
.head { padding: 4px 10px 6px; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--text-dim); border-bottom: 1px solid var(--line);
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.slider { padding: 6px 10px 8px; }
|
||||
.slider-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); }
|
||||
.slider input { width: 100%; padding: 0; border: 0; background: transparent; accent-color: var(--accent); margin-top: 4px; }
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<script lang="ts">
|
||||
import Icon from './Icon.svelte';
|
||||
|
||||
// Formatting controls shared by the description editor and the message input.
|
||||
// Buttons keep the text selection (mousedown is suppressed) and act through the callbacks.
|
||||
let { exec, onlink, onimage, source = false, ontogglesource }:
|
||||
{ exec: (cmd: string, arg?: string) => void; onlink: () => void; onimage: () => void; source?: boolean; ontogglesource: () => void } = $props();
|
||||
|
||||
let color = $state('#e8b23c');
|
||||
const keep = (e: MouseEvent) => e.preventDefault();
|
||||
|
||||
const tools = [
|
||||
{ cmd: 'bold', label: 'Bold (Ctrl+B)', text: 'B', cls: 'b' },
|
||||
{ cmd: 'italic', label: 'Italic (Ctrl+I)', text: 'I', cls: 'i' },
|
||||
{ cmd: 'underline', label: 'Underline (Ctrl+U)', text: 'U', cls: 'u' },
|
||||
{ cmd: 'strikeThrough', label: 'Strikethrough', text: 'S', cls: 's' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="toolbar" role="toolbar" aria-label="Formatting">
|
||||
{#each tools as t (t.cmd)}
|
||||
<button class="tool {t.cls}" title={t.label} aria-label={t.label} disabled={source} onmousedown={keep} onclick={() => exec(t.cmd)}>{t.text}</button>
|
||||
{/each}
|
||||
<span class="sep"></span>
|
||||
<label class="tool color" title="Text color">
|
||||
<span class="swatch" style:background={color}></span>
|
||||
<input type="color" bind:value={color} disabled={source} onchange={() => exec('foreColor', color)} aria-label="Text color" />
|
||||
</label>
|
||||
<span class="sep"></span>
|
||||
<button class="tool" title="Bulleted list" aria-label="Bulleted list" disabled={source} onmousedown={keep} onclick={() => exec('insertUnorderedList')}><Icon name="list" size={16} /></button>
|
||||
<button class="tool" title="Numbered list" aria-label="Numbered list" disabled={source} onmousedown={keep} onclick={() => exec('insertOrderedList')}><Icon name="list-ordered" size={16} /></button>
|
||||
<button class="tool" title="Link" aria-label="Link" disabled={source} onmousedown={keep} onclick={onlink}><Icon name="link" size={16} /></button>
|
||||
<button class="tool" title="Insert picture" aria-label="Insert picture" disabled={source} onmousedown={keep} onclick={onimage}><Icon name="image" size={16} /></button>
|
||||
<button class="tool" title="Clear formatting" aria-label="Clear formatting" disabled={source} onmousedown={keep} onclick={() => exec('removeFormat')}><Icon name="eraser" size={16} /></button>
|
||||
<span class="grow"></span>
|
||||
<button class="tool" class:on={source} title="Edit HTML" aria-label="Edit HTML" aria-pressed={source} onclick={ontogglesource}><Icon name="code" size={16} /></button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
|
||||
.tool { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 14px; cursor: pointer; }
|
||||
.tool:hover:not(:disabled), .tool.on { background: var(--bg-hover); color: var(--text); }
|
||||
.b { font-weight: 800; }
|
||||
.i { font-style: italic; font-family: Georgia, serif; }
|
||||
.u { text-decoration: underline; }
|
||||
.s { text-decoration: line-through; }
|
||||
.sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
|
||||
.grow { flex: 1; }
|
||||
.color { position: relative; margin: 0; }
|
||||
.swatch { width: 14px; height: 14px; border: 1px solid var(--text-faint); }
|
||||
.color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; padding: 0; }
|
||||
</style>
|
||||
+11
-2
@@ -3,11 +3,20 @@
|
||||
import YouTubeEmbed from './YouTubeEmbed.svelte';
|
||||
import LinkPreview from './LinkPreview.svelte';
|
||||
import { store } from '../lib/settings.svelte.ts';
|
||||
import { session } from '../lib/session.svelte.ts';
|
||||
import { menu } from '../lib/menu.svelte.ts';
|
||||
import { userMenu } from '../lib/actions.ts';
|
||||
import type { ChatEntry } from '../lib/session.svelte.ts';
|
||||
|
||||
let { entry, grouped }: { entry: ChatEntry; grouped: boolean } = $props();
|
||||
|
||||
const time = $derived(new Date(entry.time));
|
||||
|
||||
// Right-click on the author opens the user menu while they are still online
|
||||
function authorMenu(e: MouseEvent) {
|
||||
const u = entry.authorSession != null ? session.user(entry.authorSession) : undefined;
|
||||
if (u) menu.show(e, userMenu(u));
|
||||
}
|
||||
const hhmm = $derived(time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
|
||||
</script>
|
||||
|
||||
@@ -22,13 +31,13 @@
|
||||
{#if grouped}
|
||||
<span class="time hover">{hhmm}</span>
|
||||
{:else}
|
||||
<Avatar name={entry.author} size={38} />
|
||||
<span role="presentation" oncontextmenu={authorMenu}><Avatar name={entry.author} size={38} /></span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="content">
|
||||
{#if !grouped}
|
||||
<header>
|
||||
<strong class:self={entry.self}>{entry.author}</strong>
|
||||
<strong class:self={entry.self} oncontextmenu={authorMenu}>{entry.author}</strong>
|
||||
<time datetime={time.toISOString()}>{time.toLocaleString([], { dateStyle: 'short', timeStyle: 'short' })}</time>
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy } from 'svelte';
|
||||
import Modal from './Modal.svelte';
|
||||
import { native, type PublicServer, type PingResult } from '../lib/native.ts';
|
||||
import { store } from '../lib/settings.svelte.ts';
|
||||
import { ui } from '../lib/ui.svelte.ts';
|
||||
|
||||
let { onclose }: { onclose: () => void } = $props();
|
||||
|
||||
let servers = $state<PublicServer[]>([]);
|
||||
let loading = $state(true);
|
||||
let error = $state('');
|
||||
let search = $state('');
|
||||
let continent = $state('');
|
||||
let sort = $state<'users' | 'ping' | 'name' | 'country'>('users');
|
||||
let pings = $state<Record<string, PingResult | null>>({});
|
||||
let alive = true;
|
||||
// Ping queue; the generation drops answers from a previous list
|
||||
let queue: PublicServer[] = [];
|
||||
let running = 0;
|
||||
let generation = 0;
|
||||
onDestroy(() => { alive = false; });
|
||||
|
||||
const key = (s: PublicServer) => `${s.host}:${s.port}`;
|
||||
const CONTINENTS: Record<string, string> = { eu: 'Europe', na: 'North America', sa: 'South America', as: 'Asia', oc: 'Oceania', af: 'Africa', an: 'Antarctica' };
|
||||
|
||||
async function load() {
|
||||
// A new list starts a new ping round; answers from the previous round are dropped
|
||||
generation++;
|
||||
queue = [];
|
||||
running = 0;
|
||||
loading = true;
|
||||
error = '';
|
||||
try {
|
||||
servers = (await native?.publicServers(store.settings.publicListUrl)) ?? [];
|
||||
if (!native) error = 'The public list needs the desktop app.';
|
||||
} catch (e) {
|
||||
error = (e as Error).message.replace(/^Error invoking remote method '[^']+': (Error: )?/, '');
|
||||
}
|
||||
loading = false;
|
||||
pingVisible();
|
||||
}
|
||||
load();
|
||||
|
||||
const shown = $derived.by(() => {
|
||||
const q = search.trim().toLowerCase();
|
||||
const list = servers.filter(s => (!continent || s.continent === continent) &&
|
||||
(!q || s.name.toLowerCase().includes(q) || s.country.toLowerCase().includes(q) || s.host.toLowerCase().includes(q)));
|
||||
const p = (s: PublicServer) => pings[key(s)];
|
||||
return list.sort((a, b) => {
|
||||
if (sort === 'name') return a.name.localeCompare(b.name);
|
||||
if (sort === 'country') return a.country.localeCompare(b.country) || a.name.localeCompare(b.name);
|
||||
if (sort === 'ping') return (p(a)?.ping ?? 1e9) - (p(b)?.ping ?? 1e9);
|
||||
return (p(b)?.users ?? -1) - (p(a)?.users ?? -1);
|
||||
}).slice(0, 300);
|
||||
});
|
||||
|
||||
// Ping what the filter shows, a few at a time; each answer fills in users and latency
|
||||
function pingVisible() {
|
||||
queue = servers.filter(s => !(key(s) in pings));
|
||||
for (let i = running; i < 16; i++) next();
|
||||
}
|
||||
function next() {
|
||||
const s = queue.shift();
|
||||
if (!s || !alive || !native) return;
|
||||
const round = generation;
|
||||
running++;
|
||||
pings[key(s)] = null;
|
||||
native.pingServer(s.host, s.port).then(r => {
|
||||
if (!alive || round !== generation) return;
|
||||
pings[key(s)] = r;
|
||||
running--;
|
||||
next();
|
||||
});
|
||||
}
|
||||
|
||||
function add(s: PublicServer) {
|
||||
ui.addServer = { host: s.host, port: s.port, label: s.name };
|
||||
onclose();
|
||||
}
|
||||
|
||||
function changeSource() {
|
||||
ui.prompt = {
|
||||
title: 'Public list address', label: 'URL', confirm: 'Use this list', initial: store.settings.publicListUrl,
|
||||
text: 'The official list is publist.mumble.info. Any server returning the same XML format works.',
|
||||
onsubmit: v => {
|
||||
store.settings.publicListUrl = v.trim() || 'https://publist.mumble.info/v1/list?version=1.5.0';
|
||||
store.saveSettings();
|
||||
pings = {};
|
||||
load();
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal title="Public servers" {onclose} width={900}>
|
||||
<div class="bar">
|
||||
<input bind:value={search} placeholder="Search by name, country or address" aria-label="Search servers" />
|
||||
<select bind:value={continent} aria-label="Continent">
|
||||
<option value="">All continents</option>
|
||||
{#each Object.entries(CONTINENTS) as [code, name] (code)}<option value={code}>{name}</option>{/each}
|
||||
</select>
|
||||
<select bind:value={sort} aria-label="Sort by">
|
||||
<option value="users">Most people</option>
|
||||
<option value="ping">Lowest ping</option>
|
||||
<option value="name">Name</option>
|
||||
<option value="country">Country</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p class="dim">Loading the public server list...</p>
|
||||
{:else if error}
|
||||
<p class="error">Could not load the list: {error}</p>
|
||||
<div class="row"><button class="btn" onclick={load}>Try again</button><button class="btn" onclick={changeSource}>Use another list...</button></div>
|
||||
{:else}
|
||||
<table>
|
||||
<thead><tr><th>Server</th><th>Country</th><th class="num">People</th><th class="num">Ping</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
{#each shown as s (key(s))}
|
||||
{@const p = pings[key(s)]}
|
||||
<tr>
|
||||
<td class="name">
|
||||
<span class="title" title={s.name}>{s.name}</span>
|
||||
<span class="addr">{s.host}{s.port !== 64738 ? `:${s.port}` : ''}</span>
|
||||
{#if s.url}<a class="site" href={s.url} target="_blank" rel="noopener noreferrer">website</a>{/if}
|
||||
</td>
|
||||
<td>{s.country}</td>
|
||||
<td class="num">{p ? `${p.users} / ${p.maxUsers}` : key(s) in pings && p === null ? '...' : ''}</td>
|
||||
<td class="num" class:good={p && p.ping < 60} class:bad={p && p.ping > 180}>{p ? `${Math.round(p.ping)} ms` : ''}</td>
|
||||
<td class="act"><button class="btn" onclick={() => add(s)}>Add</button></td>
|
||||
</tr>
|
||||
{:else}
|
||||
<tr><td colspan="5" class="dim">No servers match.</td></tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="dim small">{servers.length} servers listed{shown.length < servers.length ? `, ${shown.length} shown` : ''}. Pinging lets each server see your IP address, like in the desktop client.</p>
|
||||
{/if}
|
||||
|
||||
{#snippet footer()}
|
||||
<button class="link" onclick={changeSource}>List source: {(() => { try { return new URL(store.settings.publicListUrl).host; } catch { return store.settings.publicListUrl; } })()}</button>
|
||||
<span class="grow"></span>
|
||||
<button class="btn primary" onclick={onclose}>Close</button>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.bar { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
|
||||
.bar input { flex: 1 1 240px; }
|
||||
.bar select { width: auto; flex: 0 0 auto; }
|
||||
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
|
||||
th { text-align: left; font-size: 12px; color: var(--text-faint); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-1); }
|
||||
td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
|
||||
tr:hover td { background: var(--bg-hover); }
|
||||
.name { max-width: 360px; }
|
||||
.title { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.addr { font-size: 12px; color: var(--text-faint); }
|
||||
.site { font-size: 12px; margin-left: 8px; }
|
||||
.num { text-align: right; white-space: nowrap; }
|
||||
.good { color: var(--speaking); }
|
||||
.bad { color: var(--warn); }
|
||||
.act { width: 1%; }
|
||||
.act .btn { padding: 4px 12px; font-size: 13px; }
|
||||
.dim { color: var(--text-dim); }
|
||||
.small { font-size: 12px; margin-top: 10px; }
|
||||
.error { color: var(--danger); }
|
||||
.row { display: flex; gap: 8px; }
|
||||
.link { color: var(--link); font-size: 13px; }
|
||||
.grow { flex: 1; }
|
||||
@media (max-width: 640px) { th:nth-child(2), td:nth-child(2) { display: none; } }
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<script lang="ts">
|
||||
// Drag handle on one edge of a panel. `edge` is the side the handle sits on: a panel on
|
||||
// the right of the window is resized from its left edge and vice versa. Width is remembered.
|
||||
let { width = $bindable(), edge, min, max, initial, storageKey, label }:
|
||||
{ width: number; edge: 'left' | 'right'; min: number; max: () => number; initial: number; storageKey: string; label: string } = $props();
|
||||
|
||||
let resizing = $state(false);
|
||||
|
||||
function setWidth(w: number) {
|
||||
width = Math.round(Math.max(min, Math.min(max(), w)));
|
||||
try { localStorage.setItem(storageKey, String(width)); } catch { /* storage unavailable */ }
|
||||
}
|
||||
|
||||
function start(e: PointerEvent) {
|
||||
e.preventDefault();
|
||||
const handle = e.currentTarget as HTMLElement;
|
||||
handle.setPointerCapture(e.pointerId);
|
||||
resizing = true;
|
||||
document.body.style.userSelect = 'none';
|
||||
const box = (handle.parentElement as HTMLElement).getBoundingClientRect();
|
||||
const move = (ev: PointerEvent) => setWidth(edge === 'left' ? box.right - ev.clientX : ev.clientX - box.left);
|
||||
const up = () => {
|
||||
resizing = false;
|
||||
document.body.style.userSelect = '';
|
||||
handle.removeEventListener('pointermove', move);
|
||||
handle.removeEventListener('pointerup', up);
|
||||
handle.removeEventListener('pointercancel', up);
|
||||
};
|
||||
handle.addEventListener('pointermove', move);
|
||||
handle.addEventListener('pointerup', up);
|
||||
handle.addEventListener('pointercancel', up);
|
||||
}
|
||||
|
||||
function onkeydown(e: KeyboardEvent) {
|
||||
const grow = edge === 'left' ? 'ArrowLeft' : 'ArrowRight';
|
||||
const shrink = edge === 'left' ? 'ArrowRight' : 'ArrowLeft';
|
||||
if (e.key === grow) setWidth(width + 16);
|
||||
else if (e.key === shrink) setWidth(width - 16);
|
||||
else return;
|
||||
e.preventDefault();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onresize={() => setWidth(width)} />
|
||||
|
||||
<!-- Focusable separator is the ARIA window-splitter pattern -->
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
|
||||
<div class="resize {edge}" class:active={resizing} role="separator" aria-orientation="vertical" aria-label={label}
|
||||
aria-valuenow={width} aria-valuemin={min} aria-valuemax={max()} tabindex="0" title="Drag to resize, double-click to reset"
|
||||
onpointerdown={start} ondblclick={() => setWidth(initial)} {onkeydown}></div>
|
||||
|
||||
<style>
|
||||
.resize { position: absolute; z-index: 5; top: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; }
|
||||
.resize.left { left: -4px; }
|
||||
.resize.right { right: -4px; }
|
||||
.resize:hover, .resize:focus-visible, .resize.active {
|
||||
background: linear-gradient(to right, transparent 3px, var(--accent) 3px, var(--accent) 5px, transparent 5px);
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import Icon from './Icon.svelte';
|
||||
import FormatToolbar from './FormatToolbar.svelte';
|
||||
import { toMumbleHtml, formatBytes } from '../lib/html.ts';
|
||||
import { makeInlineImage } from '../lib/upload.ts';
|
||||
import { ui } from '../lib/ui.svelte.ts';
|
||||
@@ -17,7 +17,6 @@
|
||||
let sourceText = $state('');
|
||||
let html = $state('');
|
||||
let error = $state('');
|
||||
let color = $state('#e8b23c');
|
||||
|
||||
const size = $derived(html.length);
|
||||
const over = $derived(limit > 0 && size > limit);
|
||||
@@ -96,34 +95,11 @@
|
||||
if (cmd) { e.preventDefault(); exec(cmd); }
|
||||
}
|
||||
|
||||
const tools = [
|
||||
{ cmd: 'bold', label: 'Bold (Ctrl+B)', text: 'B', cls: 'b' },
|
||||
{ cmd: 'italic', label: 'Italic (Ctrl+I)', text: 'I', cls: 'i' },
|
||||
{ cmd: 'underline', label: 'Underline (Ctrl+U)', text: 'U', cls: 'u' },
|
||||
{ cmd: 'strikeThrough', label: 'Strikethrough', text: 'S', cls: 's' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="rich" class:over>
|
||||
<div class="toolbar" role="toolbar" aria-label="Formatting">
|
||||
{#each tools as t (t.cmd)}
|
||||
<button class="tool {t.cls}" title={t.label} aria-label={t.label} disabled={source} onmousedown={e => e.preventDefault()} onclick={() => exec(t.cmd)}>{t.text}</button>
|
||||
{/each}
|
||||
<span class="sep"></span>
|
||||
<label class="tool color" title="Text color">
|
||||
<span class="swatch" style:background={color}></span>
|
||||
<input type="color" bind:value={color} disabled={source} onchange={() => exec('foreColor', color)} aria-label="Text color" />
|
||||
</label>
|
||||
<span class="sep"></span>
|
||||
<button class="tool" title="Bulleted list" aria-label="Bulleted list" disabled={source} onmousedown={e => e.preventDefault()} onclick={() => exec('insertUnorderedList')}><Icon name="list" size={16} /></button>
|
||||
<button class="tool" title="Numbered list" aria-label="Numbered list" disabled={source} onmousedown={e => e.preventDefault()} onclick={() => exec('insertOrderedList')}><Icon name="list-ordered" size={16} /></button>
|
||||
<button class="tool" title="Link" aria-label="Link" disabled={source} onmousedown={e => e.preventDefault()} onclick={link}><Icon name="link" size={16} /></button>
|
||||
<button class="tool" title="Insert picture" aria-label="Insert picture" disabled={source} onmousedown={e => e.preventDefault()} onclick={() => picker.click()}><Icon name="image" size={16} /></button>
|
||||
<input bind:this={picker} type="file" accept="image/*" hidden onchange={() => { const f = picker.files?.[0]; picker.value = ''; if (f) insertImage(f); }} />
|
||||
<button class="tool" title="Clear formatting" aria-label="Clear formatting" disabled={source} onmousedown={e => e.preventDefault()} onclick={() => exec('removeFormat')}><Icon name="eraser" size={16} /></button>
|
||||
<span class="grow"></span>
|
||||
<button class="tool" class:on={source} title="Edit HTML" aria-label="Edit HTML" aria-pressed={source} onclick={toggleSource}><Icon name="code" size={16} /></button>
|
||||
</div>
|
||||
<FormatToolbar {exec} onlink={link} onimage={() => picker.click()} {source} ontogglesource={toggleSource} />
|
||||
<input bind:this={picker} type="file" accept="image/*" hidden onchange={() => { const f = picker.files?.[0]; picker.value = ''; if (f) insertImage(f); }} />
|
||||
|
||||
<div class="area" class:hidden={source} class:blank={!html} bind:this={editor} contenteditable="true" role="textbox" aria-multiline="true"
|
||||
aria-label="Description" tabindex="0" data-placeholder={placeholder} oninput={sync} {onpaste} {onkeydown}></div>
|
||||
@@ -142,18 +118,7 @@
|
||||
.rich { border: 1px solid var(--line); background: var(--bg-0); }
|
||||
.rich:focus-within { border-color: var(--accent); }
|
||||
.rich.over { border-color: var(--danger); }
|
||||
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
|
||||
.tool { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 14px; cursor: pointer; }
|
||||
.tool:hover:not(:disabled), .tool.on { background: var(--bg-hover); color: var(--text); }
|
||||
.b { font-weight: 800; }
|
||||
.i { font-style: italic; font-family: Georgia, serif; }
|
||||
.u { text-decoration: underline; }
|
||||
.s { text-decoration: line-through; }
|
||||
.sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
|
||||
.grow { flex: 1; }
|
||||
.color { position: relative; margin: 0; }
|
||||
.swatch { width: 14px; height: 14px; border: 1px solid var(--text-faint); }
|
||||
.color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; padding: 0; }
|
||||
.area { position: relative; min-height: 140px; max-height: 360px; overflow-y: auto; padding: 8px 10px; outline: none; overflow-wrap: anywhere; line-height: 1.45; }
|
||||
.area.hidden { display: none; }
|
||||
.area :global(p) { margin: 0 0 6px; }
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import Icon from './Icon.svelte';
|
||||
import Avatar from './Avatar.svelte';
|
||||
import Members from './Members.svelte';
|
||||
import ResizeHandle from './ResizeHandle.svelte';
|
||||
import ChatLog from './ChatLog.svelte';
|
||||
import Composer from './Composer.svelte';
|
||||
import { session } from '../lib/session.svelte.ts';
|
||||
@@ -33,37 +34,7 @@
|
||||
const MIN_W = 240, DEFAULT_W = 300;
|
||||
const maxW = () => Math.max(MIN_W, Math.min(900, window.innerWidth - 420));
|
||||
let width = $state(Math.max(MIN_W, Number(localStorage.getItem('mumh5.panelWidth')) || DEFAULT_W));
|
||||
let resizing = $state(false);
|
||||
|
||||
function setWidth(w: number) {
|
||||
width = Math.round(Math.max(MIN_W, Math.min(maxW(), w)));
|
||||
try { localStorage.setItem('mumh5.panelWidth', String(width)); } catch { /* storage unavailable */ }
|
||||
}
|
||||
|
||||
function startResize(e: PointerEvent) {
|
||||
e.preventDefault();
|
||||
const handle = e.currentTarget as HTMLElement;
|
||||
handle.setPointerCapture(e.pointerId);
|
||||
resizing = true;
|
||||
const right = (handle.parentElement as HTMLElement).getBoundingClientRect().right;
|
||||
const move = (ev: PointerEvent) => setWidth(right - ev.clientX);
|
||||
const up = () => {
|
||||
resizing = false;
|
||||
handle.removeEventListener('pointermove', move);
|
||||
handle.removeEventListener('pointerup', up);
|
||||
handle.removeEventListener('pointercancel', up);
|
||||
};
|
||||
handle.addEventListener('pointermove', move);
|
||||
handle.addEventListener('pointerup', up);
|
||||
handle.addEventListener('pointercancel', up);
|
||||
}
|
||||
|
||||
function resizeKey(e: KeyboardEvent) {
|
||||
if (e.key === 'ArrowLeft') setWidth(width + 16);
|
||||
else if (e.key === 'ArrowRight') setWidth(width - 16);
|
||||
else return;
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
let editing = $state(false);
|
||||
let draft = $state('');
|
||||
@@ -81,14 +52,8 @@
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:window onresize={() => setWidth(width)} />
|
||||
|
||||
<aside class="panel" class:resizing aria-label="Details" style:width="{width}px">
|
||||
<!-- Focusable separator is the ARIA window-splitter pattern -->
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
|
||||
<div class="resize" role="separator" aria-orientation="vertical" aria-label="Resize panel" aria-valuenow={width}
|
||||
aria-valuemin={MIN_W} aria-valuemax={maxW()} tabindex="0" title="Drag to resize, double-click to reset"
|
||||
onpointerdown={startResize} ondblclick={() => setWidth(DEFAULT_W)} onkeydown={resizeKey}></div>
|
||||
<aside class="panel" aria-label="Details" style:width="{width}px">
|
||||
<ResizeHandle bind:width edge="left" min={MIN_W} max={maxW} initial={DEFAULT_W} storageKey="mumh5.panelWidth" label="Resize panel" />
|
||||
{#if panel.kind === 'members' || (!channel && !user)}
|
||||
<header><h2>Members</h2><button class="icon-btn" onclick={onclose} aria-label="Close"><Icon name="x" size={18} /></button></header>
|
||||
<Members {onnavigate} />
|
||||
@@ -142,12 +107,6 @@
|
||||
<h3>{store.displayName(user)}</h3>
|
||||
<p class="where" title="Current channel"><Icon name="channel" size={14} /><span>{session.channel(user.channelId)?.name || 'Root'}</span></p>
|
||||
{#if store.displayName(user) !== user.name}<p class="dim small">Real name: {user.name}</p>{/if}
|
||||
<p class="badges">
|
||||
{#if user.userId != null}<span class="badge-reg registered">Registered</span>{/if}
|
||||
{#if isSelf && user.userId == null}
|
||||
<button class="register" title="Reserve this name on the server, tied to your certificate" onclick={() => session.register(user.session)}>Register</button>
|
||||
{/if}
|
||||
</p>
|
||||
<p class="flags">
|
||||
{#if user.selfMute || user.mute}<span>{user.mute ? 'server muted' : 'muted'}</span>{/if}
|
||||
{#if user.selfDeaf || user.deaf}<span>{user.deaf ? 'server deafened' : 'deafened'}</span>{/if}
|
||||
@@ -192,9 +151,6 @@
|
||||
|
||||
<style>
|
||||
.panel { position: relative; max-width: 100%; height: 100%; flex: none; display: flex; flex-direction: column; background: var(--bg-1); border-left: 1px solid var(--line); min-height: 0; }
|
||||
.panel.resizing { user-select: none; }
|
||||
.resize { position: absolute; z-index: 5; top: 0; bottom: 0; left: -4px; width: 8px; cursor: col-resize; touch-action: none; }
|
||||
.resize:hover, .resize:focus-visible, .resizing .resize { background: linear-gradient(to right, transparent 3px, var(--accent) 3px, var(--accent) 5px, transparent 5px); outline: none; }
|
||||
header { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); color: var(--text-dim); }
|
||||
h2 { flex: 1; min-width: 0; margin: 0; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.tabs { display: flex; flex: none; border-bottom: 1px solid var(--line); }
|
||||
@@ -217,11 +173,6 @@
|
||||
.where span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
h3 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
|
||||
h4 { margin: 22px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
|
||||
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
|
||||
.badge-reg { font-size: 11px; font-weight: 700; padding: 1px 6px; border: 1px solid var(--line); color: var(--text-dim); }
|
||||
.badge-reg.registered { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
|
||||
.register { font-size: 12px; color: var(--link); }
|
||||
.register:hover { text-decoration: underline; }
|
||||
.flags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
|
||||
.flags span { font-size: 11px; padding: 0 6px; border: 1px solid var(--line); color: var(--text-dim); }
|
||||
.flags .bad { border-color: var(--danger); color: var(--danger); }
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
import { menu } from '../lib/menu.svelte.ts';
|
||||
import { makeServerIcon } from '../lib/upload.ts';
|
||||
|
||||
let { onadd, onedit, onsettings }:
|
||||
{ onadd: () => void; onedit: (s: SavedServer) => void; onsettings: () => void } = $props();
|
||||
let { onadd, onedit, onsettings, onbrowse }:
|
||||
{ onadd: () => void; onedit: (s: SavedServer) => void; onsettings: () => void; onbrowse: () => void } = $props();
|
||||
|
||||
const initials = (label: string) =>
|
||||
label.split(/[\s._-]+/).filter(Boolean).slice(0, 2).map(w => w[0]).join('').toUpperCase() || '?';
|
||||
@@ -50,6 +50,7 @@
|
||||
function serverMenu(e: MouseEvent, s: SavedServer, i: number) {
|
||||
const state = stateOf(s.id);
|
||||
menu.show(e, [
|
||||
{ header: true, label: s.label },
|
||||
state === 'idle'
|
||||
? { label: 'Connect', action: () => sessions.open(s) }
|
||||
: { label: 'Disconnect', action: () => sessions.close(s.id) },
|
||||
@@ -87,6 +88,7 @@
|
||||
{#if dropIndex === store.servers.length && dragging}<div class="drop-line"></div>{/if}
|
||||
<input bind:this={iconPicker} type="file" accept="image/*" hidden onchange={pickIcon} />
|
||||
<button class="tile add" title="Add a server" onclick={onadd}><Icon name="plus" /></button>
|
||||
<button class="tile add" title="Browse public servers" onclick={onbrowse}><Icon name="globe" /></button>
|
||||
<div class="spacer"></div>
|
||||
<button class="tile ghost" title="Settings" onclick={onsettings}><Icon name="settings" /></button>
|
||||
</nav>
|
||||
|
||||
@@ -2,14 +2,16 @@
|
||||
import Modal from './Modal.svelte';
|
||||
import VoiceSettings from './VoiceSettings.svelte';
|
||||
import IdentityList from './IdentityList.svelte';
|
||||
import AppearanceSettings from './AppearanceSettings.svelte';
|
||||
import SoundSettings from './SoundSettings.svelte';
|
||||
import { store } from '../lib/settings.svelte.ts';
|
||||
import { native } from '../lib/native.ts';
|
||||
import { fetchUploadInfo } from '../lib/upload.ts';
|
||||
|
||||
let { onclose, tab: initialTab = 'voice' }: { onclose: () => void; tab?: 'voice' | 'files' | 'identities' } = $props();
|
||||
let { onclose, tab: initialTab = 'voice' }: { onclose: () => void; tab?: 'voice' | 'sounds' | 'appearance' | 'files' | 'identities' } = $props();
|
||||
|
||||
// svelte-ignore state_referenced_locally
|
||||
let tab = $state<'voice' | 'files' | 'identities'>(initialTab);
|
||||
let tab = $state<'voice' | 'sounds' | 'appearance' | 'files' | 'identities'>(initialTab);
|
||||
const s = store.settings;
|
||||
let embedHosts = $state(s.embedHosts.join('\n'));
|
||||
let testResult = $state('');
|
||||
@@ -33,9 +35,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
type Tab = 'voice' | 'files' | 'identities';
|
||||
type Tab = 'voice' | 'sounds' | 'appearance' | 'files' | 'identities';
|
||||
const tabs: { id: Tab; label: string }[] = [
|
||||
{ id: 'voice', label: 'Voice' },
|
||||
{ id: 'sounds', label: 'Sounds' },
|
||||
{ id: 'appearance', label: 'Appearance' },
|
||||
{ id: 'files', label: 'Chat and files' },
|
||||
...(native ? [{ id: 'identities' as Tab, label: 'Identities' }] : [])
|
||||
];
|
||||
@@ -50,6 +54,10 @@
|
||||
|
||||
{#if tab === 'voice'}
|
||||
<VoiceSettings />
|
||||
{:else if tab === 'sounds'}
|
||||
<SoundSettings />
|
||||
{:else if tab === 'appearance'}
|
||||
<AppearanceSettings />
|
||||
{:else if tab === 'files'}
|
||||
<p class="help">Files go to a f0ckm instance and are posted as links. Other mumh5 users see them inline; regular Mumble users get a link and a small preview. Without an upload host you can still send images, inline and scaled to the server's limit.</p>
|
||||
<label for="s-host">Upload host</label>
|
||||
|
||||
+29
-6
@@ -6,15 +6,37 @@
|
||||
import { ui } from '../lib/ui.svelte.ts';
|
||||
import { menu } from '../lib/menu.svelte.ts';
|
||||
import { userMenu } from '../lib/actions.ts';
|
||||
import { PERM } from '../core/client.ts';
|
||||
import ResizeHandle from './ResizeHandle.svelte';
|
||||
import { voice } from '../lib/audio/voice.svelte.ts';
|
||||
|
||||
let { onnavigate }: { onnavigate: () => void } = $props();
|
||||
// resizable: false in the phone drawer, which keeps a fixed width
|
||||
let { onnavigate, resizable = true }: { onnavigate: () => void; resizable?: boolean } = $props();
|
||||
|
||||
const MIN_W = 200, DEFAULT_W = 260;
|
||||
const maxW = () => Math.max(MIN_W, Math.min(520, window.innerWidth - 520));
|
||||
let width = $state(Math.max(MIN_W, Number((() => { try { return localStorage.getItem('mumh5.sidebarWidth'); } catch { return null; } })()) || DEFAULT_W));
|
||||
|
||||
const roots = $derived(session.childrenOf(null));
|
||||
const self = $derived(session.self);
|
||||
const cert = $derived(session.serverCert);
|
||||
const trusted = $derived(!!cert?.authorized);
|
||||
|
||||
// Right-click on free space in the channel list (rows open their own menus and stop the event)
|
||||
function listMenu(e: MouseEvent) {
|
||||
if (session.status !== 'connected') return;
|
||||
const here = session.self?.channelId ?? 0;
|
||||
const hereName = session.channel(here)?.name || 'Root';
|
||||
const noMake = (id: number) => session.can(id, PERM.MakeChannel) === false && session.can(id, PERM.MakeTempChannel) === false;
|
||||
menu.show(e, [
|
||||
{ label: 'Create channel...', disabled: noMake(0), action: () => (ui.channelDialog = { mode: 'create', parent: 0 }) },
|
||||
...(here !== 0 ? [{ label: `Create channel in ${hereName}...`, disabled: noMake(here), action: () => (ui.channelDialog = { mode: 'create', parent: here }) }] : []),
|
||||
{ separator: true, label: '' },
|
||||
{ label: 'Expand all', action: () => session.setAllExpanded(true) },
|
||||
{ label: 'Collapse all', action: () => session.setAllExpanded(false) }
|
||||
]);
|
||||
}
|
||||
|
||||
function openQuick(e: MouseEvent, kind: 'input' | 'output') {
|
||||
e.preventDefault();
|
||||
const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
@@ -36,7 +58,8 @@
|
||||
);
|
||||
</script>
|
||||
|
||||
<aside class="sidebar">
|
||||
<aside class="sidebar" style:width={resizable ? `${width}px` : undefined}>
|
||||
{#if resizable}<ResizeHandle bind:width edge="right" min={MIN_W} max={maxW} initial={DEFAULT_W} storageKey="mumh5.sidebarWidth" label="Resize channel list" />{/if}
|
||||
<header class:trusted>
|
||||
<button class="title" onclick={showServerCert} disabled={!cert} title={cert ? (trusted ? 'Valid certificate. Click to view' : 'Self-signed or untrusted certificate. Click to view') : ''}>
|
||||
<strong>{#if cert}<Icon name={trusted ? 'lock' : 'shield'} size={14} />{/if}{session.server?.label ?? 'mumh5'}</strong>
|
||||
@@ -52,7 +75,7 @@
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<div class="scroll">
|
||||
<div class="scroll" role="presentation" oncontextmenu={listMenu}>
|
||||
{#if session.status === 'connected'}
|
||||
<ul class="tree">
|
||||
{#each roots as c (c.id)}<ChannelNode channel={c} {onnavigate} />{/each}
|
||||
@@ -72,7 +95,7 @@
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{:else if session.error}
|
||||
{:else if session.error && !session.disconnectInfo}
|
||||
<p class="error">{session.error}</p>
|
||||
{:else if session.status === 'idle'}
|
||||
<p class="hint">Pick a server on the left, or add one with the plus button.</p>
|
||||
@@ -110,7 +133,7 @@
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.sidebar { width: 260px; flex: none; display: flex; flex-direction: column; background: var(--bg-1); min-height: 0; }
|
||||
.sidebar { position: relative; width: 260px; flex: none; display: flex; flex-direction: column; background: var(--bg-1); min-height: 0; }
|
||||
header { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 0; border-bottom: 1px solid var(--line); }
|
||||
header.trusted { background: #1d5c38; border-bottom-color: #2a7a4c; }
|
||||
header.trusted .status, header.trusted .icon-btn { color: #cfeedd; }
|
||||
@@ -135,7 +158,7 @@
|
||||
.elsewhere { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12px; color: var(--text-dim); background: var(--bg-0); border-top: 1px solid var(--line); }
|
||||
.elsewhere span { flex: 1; min-width: 0; }
|
||||
.elsewhere .btn { padding: 4px 10px; font-size: 12px; }
|
||||
.me { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--bg-0); }
|
||||
.me { flex: none; height: var(--footer-h); display: flex; align-items: center; gap: 8px; padding: 0 8px; background: var(--bg-0); }
|
||||
.profile { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 2px; text-align: left; }
|
||||
.profile:hover { background: var(--bg-hover); }
|
||||
.who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
<script lang="ts">
|
||||
import Icon from './Icon.svelte';
|
||||
import { sounds, SOUND_EVENTS, type SoundEvent } from '../lib/audio/sounds.svelte.ts';
|
||||
|
||||
const s = sounds.settings;
|
||||
let picker: HTMLInputElement;
|
||||
let packPicker: HTMLInputElement;
|
||||
let folderPicker: HTMLInputElement;
|
||||
const groups = [...new Set(SOUND_EVENTS.map(e => e.group))];
|
||||
let target: SoundEvent | null = null;
|
||||
let report = $state<{ assigned: string[]; unmatched: string[] } | null>(null);
|
||||
let error = $state('');
|
||||
|
||||
function choose(ev: SoundEvent) {
|
||||
target = ev;
|
||||
picker.click();
|
||||
}
|
||||
|
||||
async function picked() {
|
||||
const f = picker.files?.[0];
|
||||
picker.value = '';
|
||||
if (!f || !target) return;
|
||||
error = (await sounds.setCustom(target, f)) ?? '';
|
||||
if (!error) sounds.play(target, true);
|
||||
}
|
||||
|
||||
async function pack(input: HTMLInputElement) {
|
||||
const files = [...(input.files ?? [])];
|
||||
input.value = '';
|
||||
if (files.length) report = await sounds.loadPack(files);
|
||||
}
|
||||
</script>
|
||||
|
||||
<h3>Notification sounds</h3>
|
||||
<label class="check"><input type="checkbox" checked={s.enabled} onchange={e => sounds.update({ enabled: e.currentTarget.checked })} /> Play sounds for events</label>
|
||||
<label for="snd-vol">Volume: {Math.round(s.volume * 100)}%</label>
|
||||
<input id="snd-vol" type="range" min="0" max="1" step="0.05" value={s.volume} oninput={e => sounds.update({ volume: Number(e.currentTarget.value) })} />
|
||||
|
||||
<div class="packrow">
|
||||
<button class="btn" onclick={() => folderPicker.click()}>Load sound pack folder...</button>
|
||||
<button class="btn" onclick={() => packPicker.click()}>Load sound pack...</button>
|
||||
<button class="btn" onclick={() => { sounds.resetAll(); report = null; }}>Reset all to built-in</button>
|
||||
<input bind:this={folderPicker} type="file" webkitdirectory multiple hidden onchange={() => pack(folderPicker)} />
|
||||
<input bind:this={packPicker} type="file" accept="audio/*,.wav,.mp3,.ogg,.opus,.flac,.m4a,.ini" multiple hidden onchange={() => pack(packPicker)} />
|
||||
</div>
|
||||
<p class="help">A TeamSpeak 3 sound pack folder (with its <code>settings.ini</code>) is mapped exactly. Other files are matched by name, e.g. <code>user_joined.wav</code>. Any sound can also be set one by one below.</p>
|
||||
{#if report}
|
||||
<div class="report">
|
||||
{#if report.assigned.length}<p>Assigned: {report.assigned.join('; ')}</p>{/if}
|
||||
{#if report.unmatched.length}<p class="warn">Not matched (set these by hand): {report.unmatched.join(', ')}</p>{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if error}<p class="error">{error}</p>{/if}
|
||||
{#each sounds.errors as err (err)}<p class="error">Could not play {err}</p>{/each}
|
||||
|
||||
<input bind:this={picker} type="file" accept="audio/*,.wav,.mp3,.ogg,.opus,.flac,.m4a" hidden onchange={picked} />
|
||||
{#each groups as g (g)}
|
||||
<h4>{g}</h4>
|
||||
<ul class="events" class:disabled={!s.enabled}>
|
||||
{#each SOUND_EVENTS.filter(e => e.group === g) as e (e.id)}
|
||||
{@const custom = s.custom[e.id]}
|
||||
<li>
|
||||
<label class="check ev"><input type="checkbox" checked={sounds.isOn(e.id)} onchange={x => sounds.setOn(e.id, x.currentTarget.checked)} /> {e.name}</label>
|
||||
<span class="file" title={custom?.name ?? 'Built-in sound'}>{custom?.name ?? 'Built-in'}</span>
|
||||
<button class="icon-btn" title="Play" aria-label="Play {e.name}" onclick={() => sounds.play(e.id, true)}><Icon name="channel" size={16} /></button>
|
||||
<button class="link" onclick={() => choose(e.id)}>Choose file</button>
|
||||
{#if custom}<button class="link" onclick={() => sounds.reset(e.id)}>Reset</button>{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
h3 { margin: 8px 0 0; font-size: 14px; }
|
||||
.check { display: flex; align-items: center; gap: 8px; text-transform: none; font-weight: 400; letter-spacing: 0; font-size: 14px; color: var(--text); margin-top: 10px; }
|
||||
.check input { width: auto; }
|
||||
input[type=range] { padding: 0; border: 0; background: transparent; accent-color: var(--accent); }
|
||||
.packrow { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
|
||||
.packrow .btn { flex: none; }
|
||||
h4 { margin: 16px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
|
||||
.help { font-size: 12px; color: var(--text-dim); }
|
||||
code { font: 12px var(--mono); }
|
||||
.report { margin-top: 8px; font-size: 13px; color: var(--text-dim); }
|
||||
.report p { margin: 4px 0 0; }
|
||||
.warn { color: var(--warn); }
|
||||
.error { color: var(--danger); font-size: 13px; }
|
||||
.events { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--line); }
|
||||
.events.disabled { opacity: 0.5; }
|
||||
.events li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
|
||||
.ev { flex: 1; margin: 0; min-width: 0; }
|
||||
.file { max-width: 160px; font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.link { color: var(--link); font-size: 13px; white-space: nowrap; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user