malice

<script lang="ts">

  import { mediaUrl } from './api';

  import { initialsOf, senderHue } from './format';

  import EmojiText from './EmojiText.svelte';

  export let mxc: string | null;

  export let label: string;

  export let size = 34;

  /** 'circle' for people, 'rounded' for rooms/spaces */

  export let shape: 'circle' | 'rounded' = 'circle';

  export let seed: string | null = null;

  export let eager = false;

  const density = typeof window === 'undefined' ? 1 : Math.min(window.devicePixelRatio || 1, 3);

  // rounding up to a 32px step keeps the number of cached variants per avatar small

  $: src = mediaUrl(mxc, Math.ceil((size * density) / 32) * 32);

  let failed = false;

  $: if (mxc) failed = false;

  $: px = `${size}px`;

  $: compact = size < 24;

  $: fontPx = `${compact ? Math.round(size * 0.56) : Math.max(10, Math.round(size * 0.36))}px`;

  $: initials = initialsOf(label || '#');

  $: shown = compact ? ([...new Intl.Segmenter().segment(initials)][0]?.segment ?? '#') : initials;

  $: hue = senderHue(seed ?? label ?? '#');

</script>

{#if src && !failed}

  <img

    {src}

    alt=""

    aria-hidden="true"

    width={size}

    height={size}

    loading={eager ? 'eager' : 'lazy'}

    decoding="async"

    class="mxc-avatar"

    class:circle={shape === 'circle'}

    style={`width:${px};height:${px};`}

    on:error={() => (failed = true)}

  />

{:else}

  <span class="mxc-fallback" class:circle={shape === 'circle'} aria-hidden="true" style={`width:${px};height:${px};font-size:${fontPx};background:hsl(${hue} 32% 30%);`}>

    <span><EmojiText text={shown} /></span>

  </span>

{/if}

<style>

  .mxc-avatar {

    flex: none;

    object-fit: cover;

    border-radius: var(--r-md);

    background: var(--bg-soft);

  }

  .mxc-avatar.circle { border-radius: 50%; }

  .mxc-fallback {

    flex: none;

    display: inline-grid;

    place-items: center;

    border-radius: var(--r-md);

    color: #fff;

    font-weight: 700;

    letter-spacing: 0.02em;

    line-height: 1;

    overflow: hidden;

  }

  .mxc-fallback.circle { border-radius: 50%; }

</style>