GIF search, from nostr.build's GIF index (gifs.nostr.build). A GIF button in the post composer and in every chat composer (DMs, groups, communities) opens a picker: "GIFs from nostr.build" (linked, as their terms require), starter chips (gm, lol, yes, wow, …; the first runs on open), a search field (debounced 250 ms, no one-letter searches, one shared request per normalised query, never aborted, 429/403/503 answered in words), and a masonry grid whose tiles play the small H.264 copy only while near the screen, over the lqip blur, falling back to the animated preview (stills under reduced motion). A pick puts the original URL in a post — published with a NIP-92 imeta (m, dim, size, alt) — or, in a chat, sends it at once after whatever was typed. Media URLs not on gifs.nostr.build are dropped. Browser calls carry no headers: production needs v3.coinos.io registered in the nostr.build dashboard (localhost works as their shared dev client). tools/gif-picker-test.js runs against the live API.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Vps2H27rhbG9ZqseGfMrc3

1 files changed, 192 insertions, 0 deletions

diff --git a/src/gif-picker.js b/src/gif-picker.js
new file mode 100644
index 0000000..a2795e2
--- /dev/null
+++ b/src/gif-picker.js
@@ -0,0 +1,192 @@
+// GIF search, from nostr.build's free GIF index (gifs.nostr.build). A web
+// client is admitted by its Origin, registered once in their dashboard;
+// localhost is admitted as a shared development client. The rules this
+// follows are theirs (https://gifs.nostr.build/developers/llms-full.txt):
+// no headers from the browser, "GIFs from nostr.build" shown wherever the
+// GIFs are, one request per query (shared, never aborted), debounced typing,
+// no one-letter searches, grid tiles play the small H.264 copy (`mp4`) and
+// fall back to the animated preview, and the note gets the original `url`
+// with a NIP-92 imeta. Media URLs other than gifs.nostr.build are dropped.
+
+export const GIF_API = 'https://gifs.nostr.build/api/v1';
+export const GIF_STARTERS = ['gm', 'lol', 'yes', 'wow', 'applause', 'facepalm', 'love', 'fire'];
+const MEDIA_RE = /^https:\/\/gifs\.nostr\.build\//;
+const LIMIT = 60;
+
+// The server's own normalisation, near enough to key the cache by.
+export const normGifQuery = (q) => String(q || '').normalize('NFKC').toLowerCase().replace(/\s+/g, ' ').trim().slice(0, 100);
+// A single Latin letter is noise; one emoji, one CJK/Hangul character, or
+// any two characters are worth a search. No letter, digit or emoji: nothing.
+export function gifQueryOk(q) {
+  const s = normGifQuery(q);
+  if (!/[\p{L}\p{N}\p{Extended_Pictographic}]/u.test(s)) return false;
+  if ([...s].length === 1 && /[a-z]/i.test(s)) return false;
+  return true;
+}
+
+const safeMedia = (u) => (typeof u === 'string' && MEDIA_RE.test(u) ? u : null);
+// Only what the picker and the note need, every URL checked.
+export function cleanGif(g) {
+  if (!g || !safeMedia(g.url) || !(g.width > 0) || !(g.height > 0)) return null;
+  const pv = (p) => (p && { width: p.width, height: p.height, animated: safeMedia(p.animated), still: safeMedia(p.still) }) || null;
+  return {
+    id: String(g.id || g.url), url: g.url, width: g.width, height: g.height,
+    title: typeof g.title === 'string' ? g.title : '', bytes: g.bytes || null,
+    format: g.format === 'webp' ? 'webp' : 'gif',
+    lqip: typeof g.lqip === 'string' && /^data:image\/[a-z]+;base64,[A-Za-z0-9+/=]+$/.test(g.lqip) ? g.lqip : null,
+    mp4: safeMedia(g.mp4),
+    w240: pv(g.previews && g.previews.w240), w480: pv(g.previews && g.previews.w480),
+  };
+}
+// NIP-92 imeta for a picked GIF, so other clients needn't sniff the URL.
+export const gifMedia = (g) => ({
+  url: g.url, m: g.format === 'webp' ? 'image/webp' : 'image/gif',
+  dim: g.width + 'x' + g.height, alt: g.title || 'GIF', size: g.bytes || undefined,
+});
+
+const answers = new Map(); // normalised query -> Promise<{ items } | { error }>
+export function searchGifs(q, fetchImpl = (u) => fetch(u)) {
+  const key = normGifQuery(q);
+  if (answers.has(key)) return answers.get(key);
+  const p = (async () => {
+    let res;
+    try {
+      res = await Promise.race([
+        fetchImpl(GIF_API + '/search?' + new URLSearchParams({ q: key, limit: String(LIMIT) })),
+        new Promise((_, no) => setTimeout(() => no(new Error('timeout')), 15000)),
+      ]);
+    } catch { return { error: 'down' }; } // unregistered origins and 503s arrive as network errors
+    if (res.status === 429) return { error: 'limited' };
+    if (!res.ok) return { error: 'down' };
+    try {
+      const body = await res.json();
+      return { items: (body.items || []).map(cleanGif).filter(Boolean) };
+    } catch { return { error: 'down' }; }
+  })();
+  answers.set(key, p);
+  // a failure is not an answer to keep: the next try asks again (a rate
+  // limit after a minute)
+  p.then((r) => { if (r.error) setTimeout(() => { if (answers.get(key) === p) answers.delete(key); }, r.error === 'limited' ? 60_000 : 5_000); });
+  return p;
+}
+
+// The picker: a sheet with a search field, starter chips, a grid of tiles
+// and the attribution. `ui.gifPick` = { for, q, shown, status, items }; the
+// caller draws sheet() where its composer is and handles the pick.
+export function createGifPicker({ h, t, ui, render }) {
+  let timer = 0, seq = 0;
+  const reduce = () => typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const wide = () => typeof window !== 'undefined' && window.innerWidth >= 640;
+
+  function run(q) {
+    const st = ui.gifPick;
+    if (!st) return;
+    const key = normGifQuery(q);
+    if (!gifQueryOk(key)) return;
+    const my = ++seq;
+    st.shown = key; st.status = 'loading';
+    render();
+    searchGifs(key).then((r) => {
+      if (my !== seq || ui.gifPick !== st) return; // a later query owns the grid
+      if (r.error) { st.status = r.error; st.items = []; }
+      else { st.status = 'ready'; st.items = r.items; }
+      render();
+    });
+  }
+  function open(forWhat) {
+    ui.gifPick = { for: forWhat, q: '', shown: '', status: 'idle', items: [] };
+    run(GIF_STARTERS[0]);
+  }
+  function close() { ui.gifPick = null; clearTimeout(timer); render(); }
+
+  // One observer for every tile: a clip is attached only near the screen
+  // and plays only on it; far away it lets go of its media.
+  let io = null;
+  const watch = (tile) => {
+    if (typeof IntersectionObserver === 'undefined') return;
+    io ||= new IntersectionObserver((entries) => {
+      for (const en of entries) {
+        const v = en.target.querySelector('video');
+        if (!v) continue;
+        if (en.isIntersecting) {
+          if (!v.getAttribute('src')) v.setAttribute('src', v.dataset.src + '#t=0.001');
+          v.play().catch(() => {});
+        } else if (v.getAttribute('src')) {
+          v.pause();
+          if (!en.target.isConnected) io.unobserve(en.target);
+        }
+      }
+    }, { rootMargin: '200px 0px' });
+    io.observe(tile);
+  };
+
+  function tile(g, onPick) {
+    const pv = (wide() ? g.w480 : g.w240) || g.w240 || g.w480;
+    const ratio = Math.min(2, Math.max(0.75, g.width / g.height));
+    const still = pv && pv.still;
+    const moving = !reduce();
+    const fallback = (moving && pv && pv.animated) || still || null;
+    const media = moving && g.mp4
+      ? h('video', { muted: true, loop: true, playsinline: true, preload: 'none', 'data-src': g.mp4,
+          onError: (e) => { // no copy after all: the animated preview
+            const box = e.target.parentElement;
+            if (box && fallback) e.target.replaceWith(h('img', { src: fallback, alt: '', loading: 'lazy' }));
+          } })
+      : fallback ? h('img', { src: fallback, alt: '', loading: 'lazy', onLoad: (e) => { e.target.parentElement.style.backgroundImage = 'none'; } }) : null;
+    if (media && media.tagName === 'VIDEO') {
+      media.muted = true;
+      media.addEventListener('playing', () => { media.parentElement && (media.parentElement.style.backgroundImage = 'none'); }, { once: true });
+    }
+    const el = h('button', {
+      type: 'button', class: 'gif-tile', title: g.title || 'GIF', 'aria-label': g.title || 'GIF', 'data-key': 'gif:' + g.id,
+      style: 'aspect-ratio:' + ratio.toFixed(3) + (g.lqip ? ';background-image:url("' + g.lqip + '")' : ''),
+      onClick: () => { const p = ui.gifPick; close(); onPick(g, p); },
+    }, media);
+    el._skipMorph = true; // its clip is attached and played by the observer, not by renders
+    if (media && media.tagName === 'VIDEO') watch(el);
+    return el;
+  }
+
+  function sheet(forWhat, onPick) {
+    const st = ui.gifPick;
+    if (!st || st.for !== forWhat) return null;
+    const body = st.status === 'ready'
+      ? (st.items.length
+        ? h('div', { class: 'gif-grid', 'data-key': 'gifs:' + st.shown }, ...st.items.map((g) => tile(g, onPick)))
+        : h('div', { class: 'small muted gif-note' }, t('gifNone')))
+      : st.status === 'loading' ? h('div', { class: 'gif-note' }, h('span', { class: 'spinner' }))
+      : st.status === 'limited' ? h('div', { class: 'small muted gif-note' }, t('gifLimited'))
+      : st.status === 'down' ? h('div', { class: 'small muted gif-note' }, t('gifDown'))
+      : null;
+    return h('div', { class: 'confirm-pop-backdrop gif-backdrop', onClick: (e) => { if (e.target === e.currentTarget) close(); } },
+      h('div', { class: 'card col gif-sheet' },
+        h('div', { class: 'row between gif-head' },
+          h('span', { class: 'small muted', html: t('gifFrom') + ' <a href="https://nostr.build" target="_blank" rel="noopener noreferrer">nostr.build</a>' }),
+          h('button', { type: 'button', class: 'btn-ghost btn-sm', onClick: close }, t('cancel'))),
+        h('input', {
+          type: 'search', class: 'gif-search', placeholder: t('gifSearchPh'), value: st.q, enterkeyhint: 'search',
+          autocapitalize: 'none', autocomplete: 'off', spellcheck: 'false',
+          onInput: (e) => {
+            st.q = e.target.value;
+            clearTimeout(timer);
+            timer = setTimeout(() => run(st.q.trim() || GIF_STARTERS[0]), 250);
+          },
+          onKeydown: (e) => { if (e.key === 'Enter') { e.preventDefault(); clearTimeout(timer); run(st.q.trim() || GIF_STARTERS[0]); } },
+        }),
+        h('div', { class: 'row gif-chips' },
+          ...GIF_STARTERS.map((s) => h('button', {
+            type: 'button', class: 'feed-chip' + (st.shown === s ? ' on' : ''),
+            onClick: () => { st.q = s; const f = document.querySelector('.gif-search'); if (f) f.value = s; run(s); },
+          }, s))),
+        h('div', { class: 'gif-body' }, body)));
+  }
+
+  function button(forWhat, cls = 'gif-btn') {
+    return h('button', {
+      type: 'button', class: cls, title: t('gifBtnTitle'), 'aria-label': t('gifBtnTitle'),
+      onClick: (e) => { e.preventDefault(); open(forWhat); },
+    }, 'GIF');
+  }
+
+  return { open, close, sheet, button };
+}