Index: src/services/i18n.js =================================================================== --- src/services/i18n.js (revision fd95b1bea9b1d3067141f31aa5e076c23bb83935) +++ src/services/i18n.js (revision bf4596d656b6f6cfed0106e540a0342cb99a070a) @@ -752,4 +752,14 @@ 'pedit.type_video': 'Video', 'pedit.type_audio': 'Audio', + 'pedit.s_type': 'Wat voor post?', + 'pedit.audio_up_drop': 'Sleep audio hierheen of klik om te kiezen', + 'pedit.audio_up_hint': 'mp3, m4a, ogg, flac, wav — wordt automatisch omgezet en meteen in je post gezet. Details pas je later aan via de track.', + 'pedit.audio_up_busy': 'Uploaden…', + 'pedit.audio_up_done': 'In je post gezet', + 'pedit.audio_up_fail': 'Mislukt', + 'pedit.video_up_title': 'Video toevoegen', + 'pedit.video_up_ph': 'Plak een video-URL (YouTube, Vimeo…)', + 'pedit.video_up_btn': 'Invoegen', + 'pedit.foto_up_hint': 'Zet je foto als cover hierboven, of voeg foto’s toe in de tekst met de afbeelding-knop in de werkbalk.', 'pedit.pin_label': 'Vastpinnen bovenaan', 'pedit.pin_up': 'Hoger zetten', @@ -1749,4 +1759,14 @@ 'pedit.type_video': 'Video', 'pedit.type_audio': 'Audio', + 'pedit.s_type': 'What kind of post?', + 'pedit.audio_up_drop': 'Drop audio here or click to choose', + 'pedit.audio_up_hint': 'mp3, m4a, ogg, flac, wav — converted automatically and added straight to your post. Edit details later via the track.', + 'pedit.audio_up_busy': 'Uploading…', + 'pedit.audio_up_done': 'Added to your post', + 'pedit.audio_up_fail': 'Failed', + 'pedit.video_up_title': 'Add a video', + 'pedit.video_up_ph': 'Paste a video URL (YouTube, Vimeo…)', + 'pedit.video_up_btn': 'Insert', + 'pedit.foto_up_hint': 'Set your photo as the cover above, or add photos in the text with the image button in the toolbar.', 'pedit.pin_label': 'Pin to top', 'pedit.pin_up': 'Move up', @@ -2746,4 +2766,14 @@ 'pedit.type_video': 'Video', 'pedit.type_audio': 'Audio', + 'pedit.s_type': 'Was für ein Beitrag?', + 'pedit.audio_up_drop': 'Audio hierher ziehen oder klicken', + 'pedit.audio_up_hint': 'mp3, m4a, ogg, flac, wav — wird automatisch umgewandelt und direkt in den Beitrag eingefügt. Details später über den Track ändern.', + 'pedit.audio_up_busy': 'Wird hochgeladen…', + 'pedit.audio_up_done': 'Zum Beitrag hinzugefügt', + 'pedit.audio_up_fail': 'Fehlgeschlagen', + 'pedit.video_up_title': 'Video hinzufügen', + 'pedit.video_up_ph': 'Video-URL einfügen (YouTube, Vimeo…)', + 'pedit.video_up_btn': 'Einfügen', + 'pedit.foto_up_hint': 'Lege dein Foto oben als Titelbild fest oder füge Fotos im Text über die Bild-Schaltfläche in der Symbolleiste ein.', 'pedit.pin_label': 'Oben anheften', 'pedit.pin_up': 'Nach oben', Index: src/views/pages/post-edit.ejs =================================================================== --- src/views/pages/post-edit.ejs (revision fd95b1bea9b1d3067141f31aa5e076c23bb83935) +++ src/views/pages/post-edit.ejs (revision bf4596d656b6f6cfed0106e540a0342cb99a070a) @@ -18,4 +18,52 @@
+ + <%# ── TYPE (segmented) + type-specific inputs ──────────────── + Post type lives at the TOP (above the body), and the selected type + reveals its own input: Audio → inline upload, Video → embed URL, + Foto → cover/insert hint. %> + <% var ptype = post.type || 'post'; %> + <% var TYPE_ICONS = { post: '📝', foto: '📷', video: '🎬', audio: '🎵' }; %> +
+
<%= t('pedit.s_type') %>
+ +
+ <% ['post','foto','video','audio'].forEach(function (tt) { %> + + <% }); %> +
+ + <%# Audio: inline upload (transcodes + drops [[track]] into the post) %> + + + <%# Video: paste a URL → embed chip %> + + + <%# Foto: light hint toward cover + insert-image %> + +
<%# ── IDENTITY ─────────────────────────────────────────────── %> @@ -162,25 +210,13 @@
<%= t('pedit.s_publication') %>
-
- - -
+
@@ -440,4 +476,86 @@ } +/* ─── Post type: segmented control + type-aware panels ──────────── */ +.pe-typeseg { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0.4rem; +} +.pe-typeseg-btn { + display: flex; flex-direction: column; align-items: center; gap: 0.25rem; + padding: 0.7rem 0.4rem; + border: 1px solid var(--rule); + border-radius: 9px; + background: var(--paper-2); + color: var(--ink-soft); + font-size: 0.85rem; font-weight: 600; + cursor: pointer; + transition: border-color 120ms, background 120ms, color 120ms; +} +.pe-typeseg-btn:hover { border-color: var(--accent); color: var(--ink); } +.pe-typeseg-btn .pe-typeseg-ic { font-size: 1.3rem; line-height: 1; } +.pe-typeseg-btn.is-active { + border-color: var(--accent); + background: color-mix(in srgb, var(--accent) 14%, var(--paper-2)); + color: var(--ink); +} +.pe-typeseg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } +@media (max-width: 480px) { + .pe-typeseg-btn { font-size: 0.78rem; padding: 0.6rem 0.25rem; } + .pe-typeseg-btn .pe-typeseg-ic { font-size: 1.15rem; } +} + +.pe-type-panel { margin-top: 0.2rem; } + +/* Audio drop/upload zone */ +.pe-audio-up { + display: flex; flex-direction: column; align-items: center; gap: 0.3rem; + text-align: center; + padding: 1.4rem 1rem; + border: 2px dashed var(--rule); + border-radius: 10px; + background: var(--paper-2); + color: var(--ink-soft); + cursor: pointer; + transition: border-color 120ms, background 120ms; +} +.pe-audio-up:hover, +.pe-audio-up:focus-visible { border-color: var(--accent); outline: none; } +.pe-audio-up.is-drag { + border-color: var(--accent); + background: color-mix(in srgb, var(--accent) 12%, var(--paper-2)); +} +.pe-audio-up .pe-audio-up-ic { font-size: 1.7rem; line-height: 1; } +.pe-audio-up strong { color: var(--ink); font-size: 0.95rem; } +.pe-audio-up small { font-size: 0.78rem; color: var(--ink-muted, var(--ink-soft)); max-width: 42ch; } + +.pe-audio-list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } +.pe-audio-item { + display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; + padding: 0.5rem 0.7rem; + border: 1px solid var(--rule); + border-radius: 7px; + background: var(--paper-2); + font-size: 0.85rem; +} +.pe-audio-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.pe-audio-item-state { flex: none; font-size: 0.8rem; color: var(--ink-soft); } +.pe-audio-item.is-done { border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); } +.pe-audio-item.is-done .pe-audio-item-state { color: var(--accent); } +.pe-audio-item.is-fail .pe-audio-item-state { color: #d9534f; } + +/* Video URL row */ +.pe-video-row { display: flex; gap: 0.5rem; } +.pe-video-row input { flex: 1 1 auto; min-width: 0; } +.pe-video-row input { + box-sizing: border-box; padding: 0.6rem 0.75rem; + border: 1px solid var(--rule); border-radius: 6px; + background: var(--paper-2); color: var(--ink); font-size: 0.95rem; +} +.pe-video-row input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } +.pe-video-row .pe-btn { flex: none; } + +.pe-foto-hint { margin: 0; font-size: 0.88rem; color: var(--ink-soft); } + /* ─── Editor frame (WYSIWYG: top toolbar, contenteditable body, status bar) ─── */ .pe-editor-frame { @@ -1817,4 +1935,103 @@ } + // ── Post type: segmented control + type-aware panels ────────── + (function () { + const typeInput = document.getElementById('pe-type-input'); + const card = document.querySelector('.pe-type-card'); + if (!typeInput || !card) return; + const seg = card.querySelector('.pe-typeseg'); + const panels = card.querySelectorAll('.pe-type-panel'); + + function applyType(tt) { + typeInput.value = tt; + seg.querySelectorAll('.pe-typeseg-btn').forEach(b => { + const on = b.dataset.type === tt; + b.classList.toggle('is-active', on); + b.setAttribute('aria-checked', on ? 'true' : 'false'); + }); + panels.forEach(p => { p.hidden = (p.dataset.panel !== tt); }); + } + seg.addEventListener('click', (e) => { + const btn = e.target.closest('.pe-typeseg-btn'); + if (btn) applyType(btn.dataset.type); + }); + applyType(typeInput.value || 'post'); + + // Video URL → [[embed:url]] chip + const vBtn = document.getElementById('pe-video-insert'); + const vUrl = document.getElementById('pe-video-url'); + if (vBtn && vUrl) { + const doInsert = () => { + const url = (vUrl.value || '').trim(); + if (!/^https?:\/\//i.test(url)) { alert('<%= t('pedit.js_embed_invalid') %>'); return; } + insertChip('embed', url); + vUrl.value = ''; + }; + vBtn.addEventListener('click', doInsert); + vUrl.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); doInsert(); } }); + } + + // Audio: inline upload → transcodes server-side → [[track:id]] chip + const drop = document.getElementById('pe-audio-drop'); + const fileInput = document.getElementById('pe-audio-file'); + const list = document.getElementById('pe-audio-list'); + if (drop && fileInput && list) { + const pick = () => fileInput.click(); + drop.addEventListener('click', pick); + drop.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(); } }); + ['dragenter', 'dragover'].forEach(ev => drop.addEventListener(ev, (e) => { e.preventDefault(); drop.classList.add('is-drag'); })); + ['dragleave', 'drop'].forEach(ev => drop.addEventListener(ev, (e) => { e.preventDefault(); drop.classList.remove('is-drag'); })); + drop.addEventListener('drop', (e) => { if (e.dataTransfer && e.dataTransfer.files) handleFiles(e.dataTransfer.files); }); + fileInput.addEventListener('change', () => { handleFiles(fileInput.files); fileInput.value = ''; }); + + function clientDuration(f) { + return new Promise((resolve) => { + try { + const u = URL.createObjectURL(f); + const a = document.createElement('audio'); + a.preload = 'metadata'; + a.onloadedmetadata = () => { URL.revokeObjectURL(u); resolve(Number.isFinite(a.duration) ? Math.round(a.duration) : null); }; + a.onerror = () => { URL.revokeObjectURL(u); resolve(null); }; + a.src = u; + } catch (_) { resolve(null); } + }); + } + async function handleFiles(files) { + for (const f of Array.from(files || [])) await uploadOne(f); + } + async function uploadOne(f) { + const li = document.createElement('li'); + li.className = 'pe-audio-item'; + const nameEl = document.createElement('span'); + nameEl.className = 'pe-audio-item-name'; + nameEl.textContent = f.name; + const stateEl = document.createElement('span'); + stateEl.className = 'pe-audio-item-state'; + stateEl.textContent = '⏳ <%= t('pedit.audio_up_busy') %>'; + li.appendChild(nameEl); li.appendChild(stateEl); + list.appendChild(li); + try { + const dur = await clientDuration(f); + const fd = new FormData(); + fd.append('audio', f); + if (dur) fd.append('duration', String(dur)); + const res = await fetch('/admin/audio/upload', { + method: 'POST', body: fd, + headers: { 'Accept': 'application/json' }, + credentials: 'same-origin', + }); + const j = await res.json().catch(() => ({})); + if (!res.ok || !j.ok || !j.id) throw new Error(j.error || ('HTTP ' + res.status)); + insertChip('track', j.id); + stateEl.textContent = '✓ <%= t('pedit.audio_up_done') %>'; + li.classList.add('is-done'); + } catch (err) { + stateEl.textContent = '✕ <%= t('pedit.audio_up_fail') %>: ' + err.message; + li.classList.add('is-fail'); + } + } + } + })(); + // ── Submit: serialize editor contents into the hidden field if (form && hiddenField) {