Electron desktop app with a Svelte 5 interface for any Mumble server. - Mumble protocol core: TLS, handshake, channels, users, text, plugin data, client-side pacing of Murmur's rate limits - Voice: WebCodecs Opus over the TCP tunnel, voice activity, push to talk, always-on, devices, per-user volume and local mute - Several servers at once, voice on one; server rail with icons and ordering - Chat: channels, direct messages, side chat, file sharing through f0ckm, inline images without it, click-to-play YouTube - Profiles with rich descriptions, registration, rename, nicknames, connection information and moderation menus - Identity wizard, multiple identities, PKCS#12 import/export, desktop Mumble certificate import, certificate pinning and viewer - Tray icon with voice state - Unit, server and end-to-end tests against a real Murmur Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
20 lines
750 B
Svelte
20 lines
750 B
Svelte
<script lang="ts">
|
|
let { name, size = 32, speaking = false }: { name: string; size?: number; speaking?: boolean } = $props();
|
|
|
|
const hue = $derived([...name].reduce((h, c) => (h * 31 + c.charCodeAt(0)) >>> 0, 7) % 360);
|
|
</script>
|
|
|
|
<span class="avatar" class:speaking style:width="{size}px" style:height="{size}px"
|
|
style:font-size="{Math.round(size * 0.45)}px" style:background="hsl({hue} 45% 38%)">
|
|
{(name.trim()[0] ?? '?').toUpperCase()}
|
|
</span>
|
|
|
|
<style>
|
|
.avatar {
|
|
flex: none; display: inline-flex; align-items: center; justify-content: center;
|
|
font-weight: 700; color: #fff; user-select: none; box-shadow: 0 0 0 2px transparent;
|
|
transition: box-shadow 80ms;
|
|
}
|
|
.speaking { box-shadow: 0 0 0 2px var(--speaking); }
|
|
</style>
|