Index: src/views/partials/msg-item.ejs =================================================================== --- src/views/partials/msg-item.ejs (revision b258a79c2fe38a0e36e15b6b37200f98dc0c951c) +++ src/views/partials/msg-item.ejs (revision d9ad6c564eccd0e4c23c3d8c2c8a32334f2443bc) @@ -55,4 +55,5 @@ <% } else if (_t === 'boost') { %><%= t('notif.boosted') %> <% } else if (_t === 'report') { %><%= t('notif.reported') %> + <% } else if (_t === 'mention' && n.help_request) { %>🛟 <%= t('msg.help_request') %> <% } else if (_t === 'mention' && n.wave) { %>👋 <%= t('msg.waved_at_you') %> <% } else if (_t === 'mention') { %><%= t('notif.mentioned') %> @@ -67,5 +68,5 @@ <% if (_t === 'report' && n.content) { %>
<%= n.content %>
- <% } else if ((_t === 'reply' || _t === 'mention' || _t === 'sent') && n.content) { %>
<%- emojiHtml(n.content, n.emoji_json) %>
+ <% } else if ((_t === 'reply' || _t === 'mention' || _t === 'sent') && n.content) { %>
<%- include('../partials/note-body', { nb: n }) %>
<% if (_t === 'mention' && n.wave && n.actorUri && canMutate) { %>
Index: src/views/partials/note-body.ejs =================================================================== --- src/views/partials/note-body.ejs (revision d9ad6c564eccd0e4c23c3d8c2c8a32334f2443bc) +++ src/views/partials/note-body.ejs (revision d9ad6c564eccd0e4c23c3d8c2c8a32334f2443bc) @@ -0,0 +1,47 @@ +<% + /* The body of a post, rendered the same way wherever a post shows up: de + Krant, Berichten and the Guardian PWA. Takes `nb` with the column names an + ap_timeline row uses (content, emoji_json, media_json, quote_json, + embed_json, nsfw, cw); ap_mentions and ap_interactions carry the same names + so a mention or a reply can be handed straight to it. + + Krant-only trimmings (the boost byline, polls, the audio player iframe, the + action bar) stay in tl-item: they are about the feed, not about the post. */ + var _m = []; try { _m = JSON.parse(nb.media_json || '[]'); } catch (e) { _m = []; } + var _imgs = _m.filter(function (m) { return m && m.url && (!m.type || /^image\//.test(m.type)); }); + var _vids = _m.filter(function (m) { return m && m.url && m.type && /^video\//.test(m.type); }); + var _auds = _m.filter(function (m) { return m && m.url && m.type && /^audio\//.test(m.type); }); + var _hasVisual = _imgs.length || _vids.length || _auds.length; + var _nsfwVisual = !!nb.nsfw && _hasVisual; + var _nsfwText = !!nb.nsfw && !_hasVisual; + // One card for both: a fediverse quote and an external link preview look + // identical; only where they came from differs. An embed carries a title and + // a thumbnail, never an iframe. + var _quote = noteQuote(nb.quote_json); + if (!_quote) { + var _emb = noteQuote(nb.embed_json); + // The title comes from a third-party oEmbed provider, so it is escaped + // here: the quote card renders `content` as HTML (fine for AP content, + // which we sanitise on the way in, but not for this). + if (_emb) _quote = { url: _emb.url, author: _emb.author || (_emb.provider ? { name: _emb.provider } : null), + content: _emb.title ? ('

' + emojiName(_emb.title, null) + '

') : '', media: _emb.media || [] }; + } + var _noAudio = !!nb.suppressAudio; // the Klonkt player iframe already covers these tracks +%> +<% if (_nsfwText) { %> +
<%- include('../partials/nsfw-veil', { cw: nb.cw }) %><%- emojiHtml(nb.content, nb.emoji_json) %>
+<% } else { %> +
<%- emojiHtml(nb.content, nb.emoji_json) %>
+<% } %> +<% if (_quote) { %><%- include('../partials/quote-card', { q: _quote }) %><% } %> +<% if (_nsfwVisual) { %>
<% } %> +<% if (_imgs.length) { %> +
+ <% _imgs.forEach(function (m) { %> + + <% }); %> +
+<% } %> +<% _vids.forEach(function (m) { %><% }); %> +<% if (!_noAudio) { _auds.forEach(function (m) { %><% }); } %> +<% if (_nsfwVisual) { %>
<%- include('../partials/nsfw-veil', { cw: nb.cw }) %>
<% } %> Index: src/views/partials/shared-styles.ejs =================================================================== --- src/views/partials/shared-styles.ejs (revision b258a79c2fe38a0e36e15b6b37200f98dc0c951c) +++ src/views/partials/shared-styles.ejs (revision d9ad6c564eccd0e4c23c3d8c2c8a32334f2443bc) @@ -202,3 +202,50 @@ .tl-author img.emoji, .tl-boost-by img.emoji, .tl-quote-name img.emoji, .msg-who img.emoji, .comment-author img.emoji { max-width: none; height: 1.3em; border-radius: 0; background: none; box-shadow: none; vertical-align: -0.2em; } + +/* ── The body of a post ──────────────────────────────────────────────────── + Shared with partials/note-body.ejs, so a post looks the same in de Krant, in + Berichten and in the Guardian PWA. These used to live in the Krant's own + Index: src/views/partials/tl-item.ejs =================================================================== --- src/views/partials/tl-item.ejs (revision b258a79c2fe38a0e36e15b6b37200f98dc0c951c) +++ src/views/partials/tl-item.ejs (revision d9ad6c564eccd0e4c23c3d8c2c8a32334f2443bc) @@ -10,46 +10,10 @@ - <% - var media = []; try { media = JSON.parse(p.media_json || '[]'); } catch (e) { media = []; } - var imgs = media.filter(function(m){ return m && m.url && (!m.type || /^image\//.test(m.type)); }); - var vids = media.filter(function(m){ return m && m.url && m.type && /^video\//.test(m.type); }); - var auds = media.filter(function(m){ return m && m.url && m.type && /^audio\//.test(m.type); }); - var _nsfwVisual = !!p.nsfw && (imgs.length || vids.length || auds.length); - var _nsfwText = !!p.nsfw && !(imgs.length || vids.length || auds.length); - %> - <% if (_nsfwText) { %> -
<%- include('../partials/nsfw-veil', { cw: p.cw }) %><%- emojiHtml(p.content, p.emoji_json) %>
- <% } else { %> -
<%- emojiHtml(p.content, p.emoji_json) %>
- <% } %> - <% - // One card for both: a fediverse quote and an external embed look - // identical; only where they came from differs. An embed carries a - // title and a thumbnail, never an iframe. - var _quote = noteQuote(p.quote_json); - if (!_quote) { - var _emb = noteQuote(p.embed_json); - // The title comes from a third-party oEmbed provider, so it is - // escaped here: the quote card renders `content` as HTML (fine for - // AP content, which we sanitise on the way in, but not for this). - if (_emb) _quote = { url: _emb.url, author: _emb.author || (_emb.provider ? { name: _emb.provider } : null), - content: _emb.title ? ('

' + emojiName(_emb.title, null) + '

') : '', media: _emb.media || [] }; - } - %> - <% if (_quote) { %><%- include('../partials/quote-card', { q: _quote }) %><% } %> - <% if (_nsfwVisual) { %>
<% } %> - <% if (imgs.length) { %> -
- <% imgs.forEach(function(m){ %> - - <% }); %> -
- <% } %> - <% vids.forEach(function(m){ %><% }); %> - <% /* A Klonkt audio post carries an embed player (embedHtml/embedUrl) that already - covers these tracks, so don't ALSO render the raw Audio attachments as bare - players here. Posts without a Klonkt embed (e.g. a plain remote audio) keep them. */ %> - <% if (!p.embedHtml && !p.embedUrl) { auds.forEach(function(m){ %><% }); } %> - <% if (_nsfwVisual) { %>
<%- include('../partials/nsfw-veil', { cw: p.cw }) %>
<% } %> + <% /* Content, quote/preview card and media: shared with Berichten and the + Guardian PWA so a post looks the same wherever it turns up. + suppressAudio: a Klonkt audio post carries an embed player below + that already covers these tracks, so don't ALSO render the raw + Audio attachments as bare players. */ %> + <%- include('../partials/note-body', { nb: Object.assign({}, p, { suppressAudio: !!(p.embedHtml || p.embedUrl) }) }) %> <% if (p.embedHtml) { %>
<%- p.embedHtml %>
<% } %>