Changeset 2086ea2 in Klonkt for src/assets

Timestamp:

08/12/2026 09:16:09 PM (3 months ago)

Author:

Robin <roboburr@…>

Children:

39dab6b

Parents:

5412cbb

Message:

Ward-PWA: de composer met media

Schrijven met foto, geluid of video, in de browser.

DEZELFDE POORT ALS DE APP, en dat is de kern. De composer bouwt precies
de AS2 Create die Shaer over C2S stuurt en geeft die aan
ingestOutboxActivity: die doet de compose-poort (par. 5), de
attachment-validatie en de zichtbaarheid. GEEN eigen posting-pad, want
dan zou de web-ward een sluiproute om de guardians heen zijn. Een test
bewaakt precies dat: een gated ward wordt ook via de browser
tegengehouden.

Media gaan eerst apart naar /ward/api/upload, in DEZELFDE bak als de
app (reply-media), zodat een foto van een app-ward en een browser-ward
niet van twee plekken federeert. De server maakt de rest af zoals altijd:
posterframe voor video, waveform voor audio. De post draagt daarna alleen
de url, dus de payload blijft klein.

Sessie-geauthenticeerd, niet met een bearer: /ward draait op je eigen
ingelogde Klonkt, dus de browser heeft geen token nodig zoals de app.

New file: (geen)
Changed files:
src/routes/ward.js

• /api/upload: sessie-geauthenticeerd, zelfde filters/map als C2S
• /api/post: bouwt de AS2 Create, door ingestOutboxActivity

src/views/pages/ward.ejs

• schrijfknop, composer-dialoog met tekst, media en zichtbaarheid

src/assets/js/ward.js

• upload-per-bestand, media-chips, plaatsen; opruiming van een dubbel geraakte doc-comment

src/assets/css/ward.css

• composer, media-chips, tools

src/services/i18n.js

• twaalf sleutels in nl, en, de

test/ward-pwa.test.js

• de gate geldt ook in de browser; een vrij account plaatst met media; leeg wordt geweigerd; een vreemde kan niet uploaden

remarks: 903 tests groen. Opnemen van audio/video in de browser zelf
(MediaRecorder) is nog niet gebouwd; nu kies je een bestand. Bead volgt.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

Location:

src/assets

Files:

• css/ward.css (modified) (1 diff)
• js/ward.js (modified) (2 diffs)

src/assets/css/ward.css

@@ -166 +166 @@
 .friend .wie { display: flex; flex-direction: column; }
 #friends-cancel { margin-top: 12px; border: 0; background: none; color: var(--dim); font: inherit; }
+
+/* ── De composer ──────────────────────────────────────────────────────── */
+.feed-head { display: flex; align-items: center; gap: 12px; }
+.feed-head h2 { margin: 24px 0 10px; }
+#compose-open { margin-left: auto; border: 0; border-radius: 999px; padding: 8px 16px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; }
+
+dialog#compose-dialog {
+  border: 0; border-radius: 16px; padding: 16px; max-width: 480px; width: calc(100% - 32px);
+  background: var(--card); color: var(--ink);
+}
+dialog#compose-dialog::backdrop { background: rgba(0,0,0,.5); }
+.compose-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+.compose-head #compose-cancel { border: 0; background: #2a3342; color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 1rem; }
+.compose-head #compose-vis { flex: 1; border-radius: 10px; border: 1px solid #2a3342; background: #131a25; color: var(--ink); padding: 8px; font: inherit; }
+.compose-head .primary { border: 0; border-radius: 10px; padding: 8px 16px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; }
+.compose-head .primary:disabled { background: #3a3f4d; color: var(--dim); }
+#compose-text { width: 100%; border-radius: 12px; border: 1px solid #2a3342; background: #131a25; color: var(--ink); padding: 10px; font: inherit; resize: vertical; }
+.compose-media { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+.media-chip { position: relative; display: flex; align-items: center; gap: 6px; background: #131a25; border-radius: 10px; padding: 6px 8px; }
+.media-chip img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
+.media-chip .kind { font-size: 1.2rem; }
+.media-chip .name { font-size: .8rem; color: var(--dim); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.media-chip .drop { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #000; color: #fff; font-size: .75rem; line-height: 1; }
+.compose-tools { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
+.compose-tools .tool { font-size: 1.4rem; cursor: pointer; padding: 4px 8px; border-radius: 10px; background: #131a25; }
+.compose-tools .hint { margin-left: auto; }

src/assets/js/ward.js

@@ -423 +423 @@
 }
 
-/** De controle kost per guardian een remote fetch, dus hij komt ná het tekenen. *//** De controle kost per guardian een remote fetch, dus hij komt ná het tekenen. */
+/**
+ * De composer: schrijven met foto, geluid of video.
+ *
+ * De media gaan eerst apart naar /ward/api/upload (dezelfde bak als de app),
+ * en de post draagt daarna alleen de url mee. Zo blijft de post-payload klein
+ * en kan de server elke upload los valideren en verrijken (poster, waveform).
+ */
+function wireComposer() {
+  const dlg = document.getElementById('compose-dialog');
+  const openBtn = document.getElementById('compose-open');
+  const text = document.getElementById('compose-text');
+  const mediaBox = document.getElementById('compose-media');
+  const status = document.getElementById('compose-status');
+  const sendBtn = document.getElementById('compose-send');
+  let media = [];   // { url, mediaType, name }
+  let uploading = false;
+
+  function reset() {
+    text.value = '';
+    media = [];
+    mediaBox.replaceChildren();
+    status.textContent = '';
+    updateSend();
+  }
+  function updateSend() {
+    // Een lege post kan niet: tekst OF media, en nooit tijdens een upload.
+    sendBtn.disabled = (!text.value.trim() && !media.length) || uploading;
+  }
+  function renderMedia() {
+    mediaBox.replaceChildren();
+    media.forEach((m, i) => {
+      const chip = el('div', 'media-chip');
+      if (m.mediaType.startsWith('image/')) {
+        const img = el('img'); img.src = m.url; img.alt = m.name || ''; chip.append(img);
+      } else {
+        chip.append(el('span', 'kind', m.mediaType.startsWith('audio/') ? '🎤' : '🎬'));
+        chip.append(el('span', 'name', m.name || ''));
+      }
+      const x = el('button', 'drop', '✕'); x.type = 'button';
+      x.addEventListener('click', () => { media.splice(i, 1); renderMedia(); updateSend(); });
+      chip.append(x);
+      mediaBox.append(chip);
+    });
+  }
+
+  async function upload(file) {
+    if (media.length >= 4) return;
+    // 32 MB is de servergrens; hier alvast vangen scheelt een mislukte upload.
+    if (file.size > 32 * 1024 * 1024) { status.textContent = state.strings.tooBig; return; }
+    uploading = true; status.textContent = state.strings.uploading; updateSend();
+    try {
+      const fd = new FormData();
+      fd.append('file', file);
+      const r = await fetch('/ward/api/upload', { method: 'POST', body: fd });
+      if (r.ok) { media.push(await r.json()); renderMedia(); status.textContent = ''; }
+      else status.textContent = (await r.json().catch(() => ({}))).error === 'media_type'
+        ? 'Dat bestandstype kan niet.' : 'Uploaden lukte niet.';
+    } catch { status.textContent = 'Uploaden lukte niet.'; }
+    uploading = false; updateSend();
+  }
+
+  openBtn.addEventListener('click', () => { reset(); dlg.showModal(); });
+  document.getElementById('compose-cancel').addEventListener('click', () => dlg.close());
+  text.addEventListener('input', updateSend);
+
+  dlg.querySelectorAll('input[type=file]').forEach((inp) => {
+    inp.addEventListener('change', () => {
+      if (inp.files[0]) upload(inp.files[0]);
+      inp.value = '';   // zelfde bestand opnieuw kunnen kiezen
+    });
+  });
+
+  sendBtn.addEventListener('click', async () => {
+    if (sendBtn.disabled) return;
+    sendBtn.disabled = true;
+    try {
+      const r = await fetch('/ward/api/post', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          text: text.value,
+          media,
+          visibility: document.getElementById('compose-vis').value,
+        }),
+      });
+      if (r.ok) { dlg.close(); loadFeed(); }
+      else status.textContent = 'Plaatsen lukte niet.';
+    } catch { status.textContent = 'Plaatsen lukte niet.'; }
+    updateSend();
+  });
+}
+
+/** De controle kost per guardian een remote fetch, dus hij komt ná het tekenen. */
 async function loadChecks() {
   if (!state.guardians.length) return;
@@ -449 +541 @@
 wireBuoy();
 wireSky();
+wireComposer();
 loadFeed();
 renderOffers();