malice

<script lang="ts">

  import { onDestroy } from 'svelte';

  import type { MediaAttachment } from './types';

  import { messageMediaUrl } from './api';

  import { lightbox } from './lightbox';

  import Emoji from './Emoji.svelte';

  import EmojiText from './EmojiText.svelte';

  export let attachment: MediaAttachment;

  const PREVIEWABLE = new Set(['Image', 'Sticker']);

  const RETRY_DELAYS = [1000, 3000, 10000];

  const MAX_W = 420;

  const MAX_H = 320;

  // Encrypted media often has no fetchable thumbnail, so request the bounded

  // full bytes directly instead of flashing a broken thumbnail first.

  $: fullUrl = messageMediaUrl(attachment.id, 'Full');

  $: thumbUrl = messageMediaUrl(attachment.id, 'Thumbnail');

  $: previewable = PREVIEWABLE.has(attachment.kind);

  $: sized = !!attachment.width && !!attachment.height;

  $: frame = frameSize(attachment.width, attachment.height);

  $: gaveUp = fullFailed && retryTimer === null && retryCount >= RETRY_DELAYS.length;

  let fullFailed = false;

  let loaded = false;

  let mediaId: string | null = null;

  let retryCount = 0;

  let retryToken = '';

  let retryTimer: ReturnType<typeof setTimeout> | null = null;

  $: previewUrl = retryToken ? `${fullUrl}&retry=${retryToken}` : fullUrl;

  $: if (attachment.id !== mediaId) resetPreview(attachment.id);

  function clearRetry(): void {

    if (retryTimer !== null) clearTimeout(retryTimer);

    retryTimer = null;

  }

  function resetPreview(id: string): void {

    clearRetry();

    mediaId = id;

    retryCount = 0;

    retryToken = '';

    fullFailed = false;

    loaded = false;

  }

  function retryPreview(resetBudget = false): void {

    clearRetry();

    if (resetBudget) retryCount = 0;

    retryCount += 1;

    retryToken = `${Date.now()}-${retryCount}`;

    fullFailed = false;

    loaded = false;

  }

  function previewFailed(): void {

    fullFailed = true;

    loaded = false;

    if (retryTimer !== null || retryCount >= RETRY_DELAYS.length) return;

    retryTimer = setTimeout(() => retryPreview(), RETRY_DELAYS[retryCount]);

  }

  onDestroy(clearRetry);

  function openLightbox(ev: MouseEvent): void {

    if (ev.button !== 0 || ev.ctrlKey || ev.metaKey || ev.shiftKey || ev.altKey) return;

    ev.preventDefault();

    lightbox.set({ src: fullUrl, alt: attachment.caption || attachment.filename, filename: attachment.filename, mxc: attachment.mxc });

  }

  function frameSize(width: number | null, height: number | null): string {

    if (!width || !height) return 'width:240px;height:160px';

    const scale = Math.min(1, MAX_W / width, MAX_H / height);

    return `width:${Math.max(1, Math.round(width * scale))}px;aspect-ratio:${width}/${height}`;

  }

  function sizeLabel(): string {

    if (typeof attachment.size_bytes !== 'number') return '';

    const bytes = attachment.size_bytes;

    if (bytes < 1024) return `${bytes} B`;

    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;

    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;

  }

  function durationLabel(): string {

    if (typeof attachment.duration_ms !== 'number') return '';

    const totalSeconds = Math.round(attachment.duration_ms / 1000);

    const minutes = Math.floor(totalSeconds / 60);

    const seconds = totalSeconds % 60;

    return `${minutes}:${seconds.toString().padStart(2, '0')}`;

  }

</script>

<svelte:window on:online={() => { if (fullFailed) retryPreview(true); }} />

{#if previewable && !gaveUp}

  <figure class="media-figure">

    <a class="media-frame" class:loaded class:natural={!sized && loaded} style={sized || !loaded ? frame : undefined} href={fullUrl} target="_blank" rel="noopener noreferrer" title={attachment.filename} on:click={openLightbox}>

      <img

        class="media-image"

        class:loaded

        src={previewUrl}

        alt={attachment.caption || attachment.filename}

        loading="lazy"

        on:load={() => ((loaded = true), (fullFailed = false))}

        on:error={previewFailed}

      />

    </a>

    {#if attachment.kind !== 'Sticker'}

      <figcaption class="media-caption">

        {#if attachment.caption && attachment.caption !== attachment.filename}

          <span><EmojiText text={attachment.caption} /></span>

        {:else}

          <span><EmojiText text={attachment.filename} /></span>

        {/if}

        {#if sizeLabel()}<span class="media-size"> · {sizeLabel()}</span>{/if}

      </figcaption>

    {/if}

  </figure>

{:else if previewable}

  <div class="media-file">

    <span class="file-icon" aria-hidden="true"><Emoji emoji="🖼️" size={18} /></span>

    <a href={fullUrl} target="_blank" rel="noopener noreferrer"><EmojiText text={attachment.caption || attachment.filename} /></a>

    <span class="media-size">Preview unavailable</span>

    <button type="button" class="ghost-btn" on:click={() => retryPreview(true)}>Retry</button>

  </div>

{:else if attachment.kind === 'Video'}

  <div class="media-block">

    <!-- svelte-ignore a11y-media-has-caption -->

    <video class="media-video" controls preload="metadata" poster={attachment.has_thumbnail ? thumbUrl : undefined}>

      <source src={fullUrl} type={attachment.mimetype ?? undefined} />

      Your browser cannot play this video.

    </video>

    <div class="media-caption">

      <a href={fullUrl} target="_blank" rel="noopener noreferrer"><EmojiText text={attachment.caption || attachment.filename} /></a>

      {#if durationLabel()}<span class="media-size"> · {durationLabel()}</span>{/if}

      {#if sizeLabel()}<span class="media-size"> · {sizeLabel()}</span>{/if}

    </div>

  </div>

{:else if attachment.kind === 'Audio'}

  <div class="media-block">

    <!-- svelte-ignore a11y-media-has-caption -->

    <audio class="media-audio" controls preload="metadata" src={fullUrl}></audio>

    <div class="media-caption">

      <span><EmojiText text={attachment.caption || attachment.filename} /></span>

      {#if durationLabel()}<span class="media-size"> · {durationLabel()}</span>{/if}

      {#if sizeLabel()}<span class="media-size"> · {sizeLabel()}</span>{/if}

    </div>

  </div>

{:else}

  <div class="media-file">

    <span class="file-icon" aria-hidden="true"><Emoji emoji="📎" size={18} /></span>

    <a href={fullUrl} target="_blank" rel="noopener noreferrer" download={attachment.filename}>

      <EmojiText text={attachment.caption || attachment.filename} />

    </a>

    {#if sizeLabel()}<span class="media-size">{sizeLabel()}</span>{/if}

  </div>

{/if}

<style>

  .media-figure { margin: 6px 0 2px; max-width: 420px; }

  .media-frame {

    display: block;

    max-width: 100%;

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

    border: 1px solid var(--border);

    background: var(--bg-soft);

    overflow: hidden;

  }

  .media-frame.loaded { border-color: transparent; background: none; }

  .media-frame.natural { display: inline-block; }

  .natural .media-image { width: auto; height: auto; max-width: 100%; max-height: 320px; }

  .media-image { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; }

  .media-image.loaded { opacity: 1; }

  .media-video { display: block; max-width: 100%; max-height: 320px; border-radius: var(--r-md); background: #000; }

  .media-audio { display: block; width: 100%; max-width: 420px; margin-top: 6px; }

  .media-block { margin: 6px 0 2px; max-width: 420px; }

  .media-caption { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }

  .media-caption a { color: var(--text); }

  .media-size { opacity: 0.85; }

  .media-file {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

    margin: 6px 0 2px;

    padding: 6px 12px;

    border: 1px solid var(--border);

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

    background: var(--bg-soft);

    max-width: 100%;

  }

  .media-file a { color: var(--text); overflow-wrap: anywhere; }

  .file-icon { font-size: 15px; }

</style>