fix(embeds): animate GIF previews; add Mixcloud/Deezer; misc embed fixes

GIF previews rendered but never played: Synapse's /thumbnail endpoint flattens animated GIFs to a still first frame. GifCard and the generic OG card now request the original via /download (no width/height) for GIFs, so they animate. Guarded with shouldServeGifOriginal(): a matrix:image:size cap (10 MB) keeps a huge self-hosted GIF on the frozen thumbnail, and the generic card's eager <img> gains loading="lazy" (it was the one preview image missing it) so originals stay off the wire until near the viewport. Also adds Mixcloud + Deezer inline media embeds (iframe widgets via parseMediaEmbed/MediaEmbedCard, matching the existing click-to-play pattern), and fixes Deezer podcast links: they live at /show/<id>, not /podcast/<id> (the latter 404s on Deezer's own oEmbed) — verified against the live API. Reviewed by two agents; both findings (Deezer /show, GIF eager-load) fixed and covered by tests. Desktop Tauri frame-src CSP updated separately. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
docs(todo): 5-agent feature bug hunt — open findings
2026-07-24 00:21:10 -04:00 · 2026-07-22 03:12:05 -04:00
5 changed files with 252 additions and 10 deletions
@@ -91,6 +91,50 @@ Agent-surveyed findings, each **verified against the code before fixing**, then
 - [DEFERRED] **SEC-5 — embeds' `allow-popups-to-escape-sandbox`** — informational; main-app hijack already prevented (no `allow-top-navigation`), and popups are arguably needed for "open in provider." Revisit with per-provider verification if dropped.
 - **KE-1 preventive (`navigator.storage.persist()`)** is **already implemented** (`initClient` → `requestPersistentStorage()` + `src/index.tsx` boot). The rest of the KE cluster stays under **Encryption / E2EE** below (needs live capture).

+### 🔍 Feature bug hunt (2026-07, 5-agent, LOTUS_FEATURES surface) — open findings
+
+Per-slice bug hunt (5 agents: theming · calls · messaging · threads/presence/UX · rooms/mod/notif/infra/desktop), each **verified against current code** (already-fixed items not re-flagged; the heavily-audited hot paths came back clean). Residual findings below. `[live]` / `[desktop]` = needs a real call / the desktop app to confirm.
+
+**Embeds / URL previews**
+
+- [ ] **[Med] Desktop (Tauri) CSP `frame-src` is missing `store.steampowered.com`, `www.mixcloud.com`, `widget.deezer.com`** → the Steam widget (shipped) + new Mixcloud/Deezer embeds are silently blocked (blank iframe) **in the desktop app** (`cinny-desktop/src-tauri/tauri.conf.json`). Web is fine (`frame-src 'self' https:`). Add the three hosts (`frame-src` only — no `connect-src`; these don't do a client oEmbed fetch). **Verified.**
+- [ ] **[Low]** `searchCache.ts` encrypted-search index has no size/count cap — unbounded on-disk growth (mitigated by the manual "Clear cached index" + logout wipe).
+- [ ] **[Low]** `MsgTypeRenderers.tsx` `MLocation` OSM permalink uses raw `geo:` lat/lon substrings, not the validated floats — harmless (URL context, malformed input only).
+
+**Voice / video calls**
+
+- [ ] **[Med]** `DenoiseTester.play()` (Settings → Calls A/B model test) leaks the denoise model node — calls `ctx.close()` but never `denoise.dispose()` (inconsistent with `stopLive`, which disposes) → leaks the DeepFilterNet/DTLN worker/WASM per press. `DenoiseTester.tsx:267-300`.
+- [ ] **[Med] [live]** PiP auto-spotlight never released on return to the call room — the release branch sits inside the `if (!pipMode) return` guard, so screenshare→PiP→back leaves spotlight forced on and `pipAutoSpotlightRef` stuck `true`. `CallEmbedProvider.tsx:733-744`.
+- [ ] **[Low]** DenoiseTester async paths (`getUserMedia`) have no mounted-guard → ctx/stream leak + setState-after-unmount if Settings closes during the mic prompt.
+- [ ] **[Low]** Soundboard 30s safety timeout never cleared on natural clip end (`CallSoundboard.tsx:115`); `PrescreenControls` `PermissionStatus.onchange` not removed on unmount (`PrescreenControls.tsx:22-28`).
+- [ ] **[Low] [live]** Call-to-call switch disposes the embed without an explicit `HangupCall` → possible transient ghost RTC membership until EC's unload-leave fires.
+
+**Theming / visuals**
+
+- [ ] **[Med]** `invalidateDecorationCache` clears the module cache but has no pub/sub → changing **your own** avatar decoration doesn't update live in already-mounted avatars (timeline/members) until remount. Add a listener set / bump counter. `useAvatarDecoration.ts:67`.
+- [ ] **[Med/Low]** Decoration picker grid thumbnails use the raw `DECORATION_CDN` constant instead of `decorationUrl()`, ignoring the `VITE_DECORATION_CDN` override → broken thumbnails if decorations are repointed. `ProfileDecoration.tsx:51`.
+- [ ] **[Low]** Seasonal "Auto" is computed once at mount (no ticker, unlike NightLight) → won't flip across a holiday-window boundary in a long-lived session. `SeasonalEffect.tsx:100`.
+- [ ] **[Low]** Selecting seasonal "Auto" while a chat background is set is a silent no-op (asymmetric mutual exclusion — SeasonalEffect early-returns when `chatBackground !== 'none'`). `General.tsx:550`.
+- [ ] **[Low]** Decoration settings fetch the `/{field}` sub-resource → console 404 for users with no decoration set. `ProfileDecoration.tsx:79`.
+
+**Threads / presence / UX**
+
+- [ ] **[Med]** `PresenceBadge` renders DND (`unavailable` + `status_msg:'dnd'`) as a **yellow "Idle"** badge + label, while `PresenceRingAvatar` correctly shows **red** — inconsistent. Give the badge the same `status === 'dnd' → Critical` + "Do Not Disturb" branch. `Presence.tsx:17-59`.
+- [ ] **[Med]** Collapsible-message threshold is hardcoded (`COLLAPSE_MAX_HEIGHT = 320`), but the docs claim it's "configurable in Settings → Appearance (default 20 lines)" — unimplemented. Add the setting + control, or fix the doc. `MsgTypeRenderers.tsx:38`.
+- [ ] **[Med/Low]** In-app toast container has no visible cap / scroll — a burst of messages across rooms while focused stacks toasts unbounded and can cover the viewport. Cap visible N or `overflow-y:auto` + max-height. `LotusToastContainer.tsx:223-247`.
+- [ ] **[Low]** "Unread First" room sort leaves the (larger) read portion unordered — no activity fallback for the equal-unread case. `Home.tsx:213-222`.
+- [ ] **[Low]** Tab title "(N)" counts mentions, not unread messages (doc says unread) — reconcile doc vs. code. `ClientNonUIFeatures.tsx:120-123`.
+
+**Rooms / moderation / notifications / infra / desktop**
+
+- [ ] **[Med] [desktop]** `useTauriFocusAssist` never queries the initial OS Focus-Assist state on mount (unlike `useTauriDnd`, which rehydrates via `get_tray_dnd`) → if Focus Assist is already ON at launch, notifications/sounds leak through until the OS state next flips. Add a `get_focus_assist` mount query (confirm whether the native poll emits an initial reading). `useTauriFocusAssist.ts:18-24`.
+- [ ] **[Low]** Push-rule enable toggle holds stale local `useState` after an external rule change (toggled on another device) — sync from the `pushRule.enabled` prop. `PushRuleEditor.tsx:55-79`.
+- [ ] **[Low]** Server-support `.well-known/matrix/support` is fetched from `mx.getHomeserverUrl()` (client-API host) instead of the MXID **server-name** host → silently missing on delegated/split-domain servers. `About.tsx:45-47`.
+- [ ] **[Low]** Cleared/partial quiet-hours `time` input (`''` → window inactive) silently disables the window while the toggle still reads "on" — no feedback. `SystemNotification.tsx:364-382`.
+- [ ] **[Low] [desktop]** Native quick-reply swallows send errors (`.catch(() => undefined)`); the `show_rich_toast` trigger has no verified web-side caller. `useTauriToastActions.ts:35-38`.
+- [ ] **[Low]** Export-history date-range early-break can over-paginate + mislabel "truncated" in E2EE rooms (`oldestRawTs` only advances on decrypted `m.room.message`, so undecryptable old events never move it). `ExportRoomHistory.tsx:104,136`.
+- [ ] **[Info/doc]** `PolicyListViewer` is a manual room-ID/alias viewer with **no** subscribe/unsubscribe controls and no subscribed-lists listing — `LOTUS_FEATURES.md:1287` describes both. Docs oversell; not a runtime bug.
+
 ### ✅ Unread/read-receipt flakiness (reported 2026-07) — FIXED (pending prod QA)

 Room unread dots were inconsistent: reading a message sometimes cleared the dot, sometimes left it stuck, sometimes it resurrected. Root cause (confirmed by tracing + diffing upstream cinny `dev`): **our own "N4" change.** `handleReceipt` recomputed via `getUnreadInfo`, which reads `room.getUnreadNotificationCount()` — server-computed and **stale on the synchronous synthetic receipt echo** (SDK only zeroes it immediately when the last event is your own message) → it PUT the stale non-zero count back → stuck/resurrecting. Compounded by `hasUnread = !!unread` lighting the dot on any present map entry, incl. phantom `{0,0}` PUTs from our `UnreadNotifications` listener. Plus a Mark-as-Unread (MSC2867) flag that never cleared on opening an already-read room (no receipt → no auto-clear).
@@ -549,6 +549,16 @@ export const BadgeTidal = style({
  color: '#ffffff',
 });

+export const BadgeMixcloud = style({
+  backgroundColor: '#52aad8',
+  color: '#ffffff',
+});
+
+export const BadgeDeezer = style({
+  backgroundColor: '#a238ff',
+  color: '#ffffff',
+});
+
 // ---------------------------------------------------------------------------
 // Twitch LIVE badge
 // ---------------------------------------------------------------------------
@@ -305,6 +305,32 @@ function isTenor(url: string): boolean {
  }
 }

+// Synapse's thumbnailer flattens animated images to a single still frame, so a
+// GIF served from /thumbnail renders but never plays. Detect GIF previews so the
+// card can point at /download (the original) instead.
+function isGifPreview(url: string, prev: IPreviewUrlResponse): boolean {
+  if (prev['og:image:type'] === 'image/gif') return true;
+  try {
+    return new URL(url).pathname.toLowerCase().endsWith('.gif');
+  } catch {
+    return false;
+  }
+}
+
+// Ceiling on the /download upgrade below: a self-hosted GIF can be hundreds of
+// MB, and unlike a thumbnail it is served unscaled. Past the cap we keep the
+// (frozen) thumbnail — the card still links out, so the GIF is one click away.
+const GIF_ORIGINAL_MAX_BYTES = 10 * 1024 * 1024;
+
+// Should this preview's image be fetched whole (so it animates) rather than
+// thumbnailed? Size is advisory: Synapse usually reports it, and when it's
+// absent we prefer a working animation over a hypothetical huge file.
+function shouldServeGifOriginal(url: string, prev: IPreviewUrlResponse): boolean {
+  if (!isGifPreview(url, prev)) return false;
+  const size = prev['matrix:image:size'];
+  return typeof size !== 'number' || size <= GIF_ORIGINAL_MAX_BYTES;
+}
+
 function getCardVariant(url: string): CardVariant {
  // NOTE: embeddable providers (YouTube/Vimeo/TikTok/Spotify/Twitch/…) are handled
  // upstream by parseMediaEmbed + MediaEmbedCard; getCardVariant only routes the
@@ -1077,6 +1103,8 @@ const EMBED_BADGE: Record<string, { label: string; class: string }> = {
  bluesky: { label: 'Bluesky', class: previewCss.BadgeBluesky },
  loom: { label: 'Loom', class: previewCss.BadgeLoom },
  kick: { label: 'Kick', class: previewCss.BadgeKick },
+  mixcloud: { label: 'Mixcloud', class: previewCss.BadgeMixcloud },
+  deezer: { label: 'Deezer', class: previewCss.BadgeDeezer },
 };

 // The homeserver preview for some sites (notably Reddit) comes back as a bot-check
@@ -2081,8 +2109,13 @@ function GifCard({
  const title = (prev['og:title'] as string | undefined) ?? '';
  const mxcImage = prev['og:image'] as string | undefined;

+  // A GIF card exists to show a moving GIF, so request the original rather than
+  // a thumbnail — the thumbnail endpoint would return a frozen first frame.
+  // `loading="lazy"` below keeps it off the wire until it's near the viewport.
  const thumbSrc = mxcImage
-    ? mxcUrlToHttp(mx, mxcImage, useAuthentication, 400, 200, 'scale', false)
+    ? shouldServeGifOriginal(url, prev)
+      ? mxcUrlToHttp(mx, mxcImage, useAuthentication)
+      : mxcUrlToHttp(mx, mxcImage, useAuthentication, 400, 200, 'scale', false)
    : null;

  // If there's no image, fall back to a generic-style layout
@@ -2180,6 +2213,7 @@ function GenericCard({
          src={displayThumb}
          alt={prev['og:title']}
          title={prev['og:title']}
+          loading="lazy"
          tabIndex={0}
          onKeyDown={(evt) => onEnterOrSpace(() => onOpenViewer())(evt)}
          onClick={onOpenViewer}
@@ -2349,16 +2383,11 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
          // Generic fallback — skip empty cards
          if (!prev['og:title'] && !prev['og:description']) return null;

-          const thumbUrl = mxcUrlToHttp(
-            mx,
-            prev['og:image'] || '',
-            useAuthentication,
-            256,
-            256,
-            'scale',
-            false,
-          );
          const imgUrl = mxcUrlToHttp(mx, prev['og:image'] || '', useAuthentication);
+          // Show the original for GIFs so they animate; thumbnailing freezes them.
+          const thumbUrl = shouldServeGifOriginal(url, prev)
+            ? imgUrl
+            : mxcUrlToHttp(mx, prev['og:image'] || '', useAuthentication, 256, 256, 'scale', false);

          return (
            <GenericCard
@@ -24,6 +24,9 @@ import {
  getBlueskyEmbed,
  getLoomId,
  getKickChannel,
+  getMixcloudFeed,
+  getDeezerEmbed,
+  deezerEmbedHeight,
  getSteamTarget,
  steamWidgetEmbedUrl,
  buildVideoEmbedUrl,
@@ -210,6 +213,58 @@ test('Apple Music: album vs single song height, embed host swap', () => {
  assert.equal(getAppleMusicEmbed('https://example.com/album/x/1'), null);
 });

+test('Mixcloud: cloudcast feed vs profile/section', () => {
+  assert.equal(
+    getMixcloudFeed('https://www.mixcloud.com/NTSRadio/some-show-2024/'),
+    'https://www.mixcloud.com/NTSRadio/some-show-2024/',
+  );
+  assert.equal(getMixcloudFeed('https://www.mixcloud.com/NTSRadio/'), null); // bare profile
+  assert.equal(getMixcloudFeed('https://www.mixcloud.com/NTSRadio/uploads/'), null); // profile tab
+  assert.equal(getMixcloudFeed('https://www.mixcloud.com/discover/house/'), null); // site section
+  assert.equal(getMixcloudFeed('https://example.com/a/b/'), null);
+  assert.ok(
+    parseMediaEmbed('https://www.mixcloud.com/NTSRadio/some-show/', HOST)?.embedUrl.startsWith(
+      'https://www.mixcloud.com/widget/iframe/?feed=',
+    ),
+  );
+});
+
+test('Deezer: track / album / playlist (+ locale prefix)', () => {
+  assert.deepEqual(getDeezerEmbed('https://www.deezer.com/track/3135556'), {
+    type: 'track',
+    id: '3135556',
+  });
+  assert.deepEqual(getDeezerEmbed('https://deezer.com/en/album/302127'), {
+    type: 'album',
+    id: '302127',
+  });
+  assert.deepEqual(getDeezerEmbed('https://www.deezer.com/us/playlist/1479458365?utm=x'), {
+    type: 'playlist',
+    id: '1479458365',
+  });
+  // Podcasts live at /show/<id>; /podcast/<id> is not a real Deezer path.
+  assert.deepEqual(getDeezerEmbed('https://www.deezer.com/us/show/1002330852'), {
+    type: 'show',
+    id: '1002330852',
+  });
+  assert.deepEqual(getDeezerEmbed('https://www.deezer.com/us/episode/897651701'), {
+    type: 'episode',
+    id: '897651701',
+  });
+  assert.equal(getDeezerEmbed('https://www.deezer.com/us/podcast/1002330852'), null);
+  assert.equal(getDeezerEmbed('https://www.deezer.com/'), null);
+  assert.equal(getDeezerEmbed('https://www.deezer.com/track/notanid'), null);
+  assert.equal(deezerEmbedHeight('track'), 152);
+  assert.equal(deezerEmbedHeight('episode'), 152);
+  assert.equal(deezerEmbedHeight('show'), 352);
+  assert.equal(deezerEmbedHeight('album'), 352);
+  assert.ok(
+    parseMediaEmbed('https://www.deezer.com/track/3135556', HOST)?.embedUrl.startsWith(
+      'https://widget.deezer.com/widget/dark/track/3135556',
+    ),
+  );
+});
+
 test('getSteamTarget: app / news / bundle / non-content', () => {
  assert.deepEqual(getSteamTarget('https://store.steampowered.com/app/739630/Phasmophobia/'), {
    kind: 'app',
@@ -555,6 +555,90 @@ export function getBlueskyEmbed(url: string): string | null {
  }
 }

+// --- Mixcloud -------------------------------------------------------------
+
+// Mixcloud's own site sections (first segment) that are never a `<user>`.
+const MIXCLOUD_RESERVED = new Set([
+  'discover',
+  'categories',
+  'upload',
+  'live',
+  'settings',
+  'notifications',
+  'search',
+  'tag',
+  'select',
+  'browse',
+]);
+// Profile tabs — `/<user>/<tab>` is a listing, not a single cloudcast.
+const MIXCLOUD_PROFILE_TABS = new Set([
+  'uploads',
+  'favorites',
+  'listens',
+  'following',
+  'followers',
+  'playlists',
+  'stream',
+  'reposts',
+]);
+
+/**
+ * Canonical Mixcloud cloudcast feed URL (`/<user>/<slug>/`) for the widget's
+ * `feed=` param, or null. Bare profiles / profile-tab listings / site sections
+ * are excluded (they aren't a single playable cloudcast).
+ */
+export function getMixcloudFeed(url: string): string | null {
+  try {
+    const u = new URL(url);
+    if (u.hostname.replace(/^www\./, '') !== 'mixcloud.com') return null;
+    const parts = u.pathname
+      .replace(/^\/+|\/+$/g, '')
+      .split('/')
+      .filter(Boolean);
+    if (parts.length < 2) return null;
+    if (MIXCLOUD_RESERVED.has(parts[0].toLowerCase())) return null;
+    if (MIXCLOUD_PROFILE_TABS.has(parts[1].toLowerCase())) return null;
+    return `https://www.mixcloud.com/${parts[0]}/${parts[1]}/`;
+  } catch {
+    return null;
+  }
+}
+
+// --- Deezer ---------------------------------------------------------------
+
+// NB: Deezer podcast pages are `/show/<id>`, not `/podcast/<id>` — the latter
+// 404s on their own oEmbed API, and `widget.deezer.com/widget/dark/show/<id>`
+// is the matching widget path.
+const DEEZER_TYPES = ['track', 'album', 'playlist', 'artist', 'show', 'episode'] as const;
+export type DeezerType = (typeof DEEZER_TYPES)[number];
+
+/** deezer.com[/<locale>]/<type>/<id> → widget target, or null. */
+export function getDeezerEmbed(url: string): { type: DeezerType; id: string } | null {
+  try {
+    const u = new URL(url);
+    if (u.hostname.replace(/^www\./, '') !== 'deezer.com') return null;
+    const parts = u.pathname.replace(/^\/+/, '').split('/').filter(Boolean);
+    // optional locale prefix (/en/, /us/, /fr/…) then <type>/<id>
+    const idx = parts.findIndex((p) => (DEEZER_TYPES as readonly string[]).includes(p));
+    if (idx === -1 || !parts[idx + 1]) return null;
+    const id = parts[idx + 1].split('?')[0];
+    if (!/^\d+$/.test(id)) return null;
+    return { type: parts[idx] as DeezerType, id };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Deezer single track/episode players are compact; collections show a scrollable
+ * tracklist and need room. Mirrors the Spotify sizing (152 / 352) — the widget
+ * requests `tracklist=true`, so 352 keeps the list from being clipped the way a
+ * shorter box would.
+ */
+export function deezerEmbedHeight(type: DeezerType): number {
+  return type === 'track' || type === 'episode' ? 152 : 352;
+}
+
 // --- Embed-URL builders ---------------------------------------------------

 const enc = encodeURIComponent;
@@ -672,6 +756,26 @@ export function parseMediaEmbed(url: string, host: string): MediaEmbed | null {
  if (tidal)
    return { provider: 'tidal', kind: tidal.kind, embedUrl: tidal.embedUrl, height: tidal.height };

+  const mixFeed = getMixcloudFeed(url);
+  if (mixFeed)
+    return {
+      provider: 'mixcloud',
+      kind: 'audio',
+      embedUrl: `https://www.mixcloud.com/widget/iframe/?feed=${enc(mixFeed)}&light=0`,
+      height: 120,
+    };
+
+  const deezer = getDeezerEmbed(url);
+  if (deezer)
+    return {
+      provider: 'deezer',
+      kind: 'audio',
+      embedUrl: `https://widget.deezer.com/widget/dark/${deezer.type}/${enc(
+        deezer.id,
+      )}?app_id=457142&autoplay=false&radius=true&tracklist=true`,
+      height: deezerEmbedHeight(deezer.type),
+    };
+
  const insta = getInstagramEmbed(url);
  if (insta) return { provider: 'instagram', kind: 'rich', embedUrl: insta, height: 720 };