diff --git a/chat.js b/chat.js index 33bcfb3..2c63986 100644 --- a/chat.js +++ b/chat.js @@ -17,6 +17,19 @@ const json = (res, code, o) => { res.writeHead(code, { 'content-type': 'applicat const fail = (code, message) => Object.assign(new Error(message), { code }); const str = (v, n) => String(v == null ? '' : v).replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f]/g, '').slice(0, n); const newId = () => crypto.randomBytes(8).toString('hex'); +// ---- share cards: a song, film, book... from elsewhere in the hub, with the picture and a link back to it +const SHARE = { song: ['🎡', 'a song'], album: ['πŸ’Ώ', 'an album'], artist: ['🎀', 'an artist'], playlist: ['πŸ“ƒ', 'a playlist'], movie: ['🎬', 'a movie'], show: ['πŸ“Ί', 'a show'], episode: ['πŸ“Ί', 'an episode'], book: ['πŸ“–', 'a book'], audiobook: ['🎧', 'an audiobook'], podcast: ['πŸŽ™οΈ', 'a podcast'], podcastep: ['πŸŽ™οΈ', 'a podcast episode'], radio: ['πŸ“»', 'a radio station'] }; +const ART_OK = /^\/(plex|api)\/[^\s"'<>\\]*$/, LINK_OK = /^#\/[\w-]+(\/[\w.~%:@+,=&?-]*)*$/; +/** What a client sent as a share, made safe: whitelisted kind, short words, a picture from this hub only and a link that is a hash route (never another site). */ +function cleanShare(s) { + if (!s || typeof s !== 'object' || !SHARE[s.kind]) throw fail(400, 'That cannot be shared'); + const title = str(s.title, 120).trim(), link = String(s.link || ''), art = String(s.art || ''); + if (!title) throw fail(400, 'Nothing to share'); + if (link.length > 300 || !LINK_OK.test(link)) throw fail(400, 'That link cannot be shared'); + if (art && (art.length > 600 || !ART_OK.test(art) || art.includes('..'))) throw fail(400, 'That picture cannot be shared'); + return { kind: s.kind, title, sub: str(s.sub, 120).trim(), art, link }; +} +const shareLine = s => SHARE[s.kind][0] + ' Shared ' + SHARE[s.kind][1] + ': ' + s.title; const idOk = s => /^[0-9a-f]{16}$/.test(s || '') || /^d:[0-9a-z]+:[0-9a-z]+$/.test(s || ''); // ---- storage (small enough to hold in memory and write whole) @@ -44,9 +57,10 @@ const nameOf = uid => { const u = users.get(uid); return u ? u.name : 'Someone'; const live = uid => { const u = users.get(uid); return !!u && !u.disabled && users.can(u, 'chat'); }; const people = () => users.all().filter(u => !u.disabled && users.can(u, 'chat')).map(u => ({ id: u.id, name: u.name })); const convOf = (id, me) => { const c = convs().find(x => x.id === id); if (!c || !c.members.includes(me.id)) throw fail(404, 'Conversation not found'); return c; }; +const textOf = m => [m.text, m.share && m.share.title, m.share && m.share.sub].filter(Boolean).join(' Β· '); const unreadIn = (c, uid, st) => { const r = st.read[c.id] || 0; return msgs(c.id).filter(m => m.ts > r && m.from !== uid && !m.deleted && !m.sys).length; }; const totalUnread = uid => { const st = stateOf(uid); return convs().filter(c => c.members.includes(uid) && !st.muted.includes(c.id) && !st.archived.includes(c.id)).reduce((n, c) => n + unreadIn(c, uid, st), 0); }; -const preview = m => m ? (m.deleted ? 'This message was deleted' : m.sys ? str(m.text, 120) : m.poll ? 'πŸ“Š ' + m.poll.q : m.att && m.att[0] && m.att[0].voice && !m.text ? '🎀 Voice message' : m.text ? str(m.text, 120) : m.att && m.att.length ? 'πŸ“Ž ' + (m.att[0].name || 'Attachment') : '') : ''; +const preview = m => m ? (m.deleted ? 'This message was deleted' : m.sys ? str(m.text, 120) : m.poll ? 'πŸ“Š ' + m.poll.q : m.share ? SHARE[m.share.kind][0] + ' ' + m.share.title : m.att && m.att[0] && m.att[0].voice && !m.text ? '🎀 Voice message' : m.text ? str(m.text, 120) : m.att && m.att.length ? 'πŸ“Ž ' + (m.att[0].name || 'Attachment') : '') : ''; // ---- live updates (server-sent events), one stream per open app const annFile = () => path.join(ROOT(), 'announcement.json'); @@ -60,7 +74,7 @@ const view = (c, uid, st) => { const last = msgs(c.id).slice(-1)[0], others = c. /** sent, delivered or read: for what you sent, from what the others have read and received (everyone, in a group). */ const statusOf = (m, c, uid, sts) => { if (m.from !== uid || m.sys) return undefined; const o = c.members.filter(x => x !== uid); if (!o.length) return 'sent'; if (o.every(x => (sts[x].read[c.id] || 0) >= m.ts)) return 'read'; if (o.every(x => (sts[x].delivered[c.id] || 0) >= m.ts)) return 'delivered'; return 'sent'; }; const stsOf = c => Object.fromEntries(c.members.map(x => [x, stateOf(x)])); -const msgView = (m, uid, c, sts) => ({ id: m.id, ts: m.ts, from: m.from, name: m.sys ? '' : nameOf(m.from), out: m.from === uid, text: m.text, att: m.att, quote: m.quote, react: m.react, edited: m.edited, deleted: m.deleted, sys: m.sys, fwd: m.fwd, mentions: m.mentions, exp: m.exp, link: m.link, poll: m.poll ? { ...m.poll, votes: m.votes || {} } : undefined, ...(c && sts ? { status: statusOf(m, c, uid, sts) } : {}) }); +const msgView = (m, uid, c, sts) => ({ id: m.id, ts: m.ts, from: m.from, name: m.sys ? '' : nameOf(m.from), out: m.from === uid, text: m.text, att: m.att, quote: m.quote, react: m.react, edited: m.edited, deleted: m.deleted, sys: m.sys, fwd: m.fwd, mentions: m.mentions, exp: m.exp, link: m.link, poll: m.poll ? { ...m.poll, votes: m.votes || {} } : undefined, share: m.deleted ? undefined : m.share, ...(c && sts ? { status: statusOf(m, c, uid, sts) } : {}) }); /** Someone has received or read the chat up to now: the senders' ticks change. */ function markDelivered(uid, c, also) { const st = stateOf(uid), last = msgs(c.id).slice(-1)[0]; if (!last) return; let ch = false; if ((st.delivered[c.id] || 0) < last.ts) { st.delivered[c.id] = last.ts; ch = true; } if (also && (st.read[c.id] || 0) < last.ts) { st.read[c.id] = last.ts; ch = true; } if (ch) { saveState(uid, st); emit(c.members.filter(x => x !== uid), { t: 'receipt', conv: c.id }); } } const TTLS = [0, 3600, 86400, 604800], ttlWords = s => s === 3600 ? '1 hour' : s === 86400 ? '1 day' : s === 604800 ? '1 week' : 'off'; @@ -78,9 +92,10 @@ const mentionsIn = (text, c) => c.type !== 'group' ? [] : c.members.filter(uid = function send(me, b) { const c = convOf(String(b.conv || ''), me), text = str(b.text, MAX_TEXT).trim(), ids = (Array.isArray(b.files) ? b.files : []).map(String).slice(0, MAX_FILES), att = []; for (const id of ids) { const f = files()[id]; if (!f || f.conv !== c.id || f.by !== me.id || f.attached) throw fail(400, 'An attachment is not available (upload it again)'); att.push({ id, name: f.name, type: f.type, size: f.size, ...(f.voice ? { voice: true, wave: f.wave, dur: f.dur } : {}) }); } - if (!text && !att.length) throw fail(400, 'Write something or attach a file'); - let quote; if (b.quote) { const q = msgs(c.id).find(x => x.id === String(b.quote)); if (q) quote = { id: q.id, from: q.from, name: nameOf(q.from), text: q.deleted ? '' : str(q.text || (q.att && q.att[0] ? q.att[0].name : ''), 200) }; } - return addMsg(me, c, { text, att, quote }); + const share = b.share ? cleanShare(b.share) : undefined; + if (!text && !att.length && !share) throw fail(400, 'Write something or attach a file'); + let quote; if (b.quote) { const q = msgs(c.id).find(x => x.id === String(b.quote)); if (q) quote = { id: q.id, from: q.from, name: nameOf(q.from), text: q.deleted ? '' : str(q.text || (q.share ? q.share.title : q.att && q.att[0] ? q.att[0].name : ''), 200) }; } + return addMsg(me, c, { text, att, quote, share }); } /** This person has read a chat up to now (they opened it, or cleared its notification): their unread count, the senders' ticks and the Notifications list all follow. */ function markRead(uid, c) { @@ -89,10 +104,10 @@ function markRead(uid, c) { inbox.markTagRead(uid, 'chat:' + c.id); emit([uid], { t: 'read', conv: c.id, unread: totalUnread(uid) }); emit(c.members.filter(x => x !== uid), { t: 'receipt', conv: c.id }); } /** Put a message in a chat and tell everyone: the live stream, and a phone notification for those who are away. */ -function addMsg(me, c, { text, att = [], quote, fwd, sys, poll }) { - const list = msgs(c.id), last = list[list.length - 1], ts = Math.max(Date.now(), last ? last.ts + 1 : 0), m = { id: newId(), ts, from: sys ? null : me.id, text, att: att.length ? att : undefined, quote, fwd, sys: sys || undefined, poll, react: {}, mentions: sys ? undefined : (mentionsIn(text, c).length ? mentionsIn(text, c) : undefined), exp: c.ttl && !sys ? ts + c.ttl * 1000 : undefined }; +function addMsg(me, c, { text, att = [], quote, fwd, sys, poll, share }) { + const list = msgs(c.id), last = list[list.length - 1], ts = Math.max(Date.now(), last ? last.ts + 1 : 0), m = { id: newId(), ts, from: sys ? null : me.id, text, att: att.length ? att : undefined, quote, fwd, sys: sys || undefined, poll, share, react: {}, mentions: sys ? undefined : (mentionsIn(text, c).length ? mentionsIn(text, c) : undefined), exp: c.ttl && !sys ? ts + c.ttl * 1000 : undefined }; list.push(m); if (list.length > MAX_MSGS) list.splice(0, list.length - MAX_MSGS); att.forEach(a => { if (files()[a.id]) files()[a.id].attached = true; }); saveMsgs(c.id); if (att.length) saveFiles(); - const body = sys ? text : (c.type === 'group' ? me.name + ': ' : '') + (poll ? 'πŸ“Š ' + poll.q : text ? str(text, 140) : att[0] && att[0].voice ? '🎀 Voice message' : 'πŸ“Ž ' + att[0].name), title = c.type === 'group' ? c.name : me.name; + const body = sys ? text : (c.type === 'group' ? me.name + ': ' : '') + (poll ? 'πŸ“Š ' + poll.q : share ? shareLine(share) : text ? str(text, 140) : att[0] && att[0].voice ? '🎀 Voice message' : 'πŸ“Ž ' + att[0].name), title = c.type === 'group' ? c.name : me.name; emit(c.members, { t: 'msg', conv: c.id, id: m.id }, uid => ({ t: 'msg', conv: c.id, id: m.id, out: uid === me.id, sys: !!sys, mention: !!(m.mentions && m.mentions.includes(uid)), name: title, preview: body, unread: totalUnread(uid) })); for (const uid of c.members) if (online(uid) && (sys || uid !== me.id)) markDelivered(uid, c); // (what an open app has received counts as delivered) if (!sys) for (const uid of c.members) if (uid !== me.id && live(uid) && (!stateOf(uid).muted.includes(c.id) || (m.mentions && m.mentions.includes(uid)))) inbox.add(uid, { kind: 'chat', title, body: (m.mentions && m.mentions.includes(uid) ? '@ ' : '') + body, url: '#/chat/' + encodeURIComponent(c.id), tag: 'chat:' + c.id }); @@ -182,7 +197,7 @@ async function handle(req, res) { if ((p === '/edit' || p === '/delete') && req.method === 'POST') { const b = JSON.parse(await readBody(req, 2e4) || '{}'), c = convOf(String(b.conv || ''), me), x = msgs(c.id).find(y => y.id === String(b.msg)); if (!x) throw fail(404, 'Message not found'); if (x.from !== me.id) throw fail(403, 'You can only change your own messages'); if (x.deleted) throw fail(400, 'That message was deleted'); if (p === '/edit') { const t = str(b.text, MAX_TEXT).trim(); if (!t) throw fail(400, 'Write something'); if (Date.now() - x.ts > 48 * 3600e3) throw fail(400, 'Messages can be edited for two days'); x.text = t; x.edited = true; } - else { x.deleted = true; x.text = ''; for (const a of x.att || []) { fs.rm(blob(a.id), { force: true }, () => {}); delete files()[a.id]; } x.att = undefined; x.react = {}; saveFiles(); } + else { x.deleted = true; x.text = ''; for (const a of x.att || []) { fs.rm(blob(a.id), { force: true }, () => {}); delete files()[a.id]; } x.att = undefined; x.share = undefined; x.react = {}; saveFiles(); } saveMsgs(c.id); emit(c.members, { t: 'upd', conv: c.id, id: x.id }); return json(res, 200, { ok: true }); } if (p === '/read' && req.method === 'POST') { const b = JSON.parse(await readBody(req, 1e4) || '{}'), c = convOf(String(b.id || ''), me); markRead(me.id, c); return json(res, 200, { ok: true, unread: totalUnread(me.id) }); } @@ -219,11 +234,11 @@ async function handle(req, res) { if (p === '/forward' && req.method === 'POST') { // a copy of a message (and its files) into another chat const b = JSON.parse(await readBody(req, 1e4) || '{}'), from = convOf(String(b.from || ''), me), to = convOf(String(b.to || ''), me), x = msgs(from.id).find(y => y.id === String(b.msg)); if (!x || x.deleted || x.sys) throw fail(404, 'Message not found'); const att = (x.att || []).map(a => { const id = newId(); try { fs.copyFileSync(blob(a.id), blob(id)); } catch { return null; } files()[id] = { conv: to.id, by: me.id, name: a.name, type: a.type, size: a.size, ts: Date.now(), attached: true }; return { id, name: a.name, type: a.type, size: a.size, ...(a.voice ? { voice: true, wave: a.wave, dur: a.dur } : {}) }; }).filter(Boolean); - if (att.length) saveFiles(); return json(res, 200, { msg: addMsg(me, to, { text: x.text || '', att, fwd: { name: nameOf(x.from) } }) }); + if (att.length) saveFiles(); return json(res, 200, { msg: addMsg(me, to, { text: x.text || '', att, share: x.share, fwd: { name: nameOf(x.from) } }) }); } if (p === '/search' && req.method === 'GET') { const needle = str(q.get('q'), 100).trim().toLowerCase(); if (needle.length < 2) return json(res, 200, { results: [] }); const out = [], st = stateOf(me.id); - for (const c of convs().filter(x => x.members.includes(me.id))) { const cv = view(c, me.id, st); for (const x of msgs(c.id)) if (!x.deleted && !x.sys && x.text && x.text.toLowerCase().includes(needle)) out.push({ conv: c.id, convName: cv.name, msg: msgView(x, me.id) }); } + for (const c of convs().filter(x => x.members.includes(me.id))) { const cv = view(c, me.id, st); for (const x of msgs(c.id)) if (!x.deleted && !x.sys && textOf(x).toLowerCase().includes(needle)) out.push({ conv: c.id, convName: cv.name, msg: msgView(x, me.id) }); } return json(res, 200, { results: out.sort((a, b) => b.msg.ts - a.msg.ts).slice(0, 40) }); } return json(res, 404, { error: 'Not found' }); @@ -242,7 +257,7 @@ function askParents(me, text) { /** Messages in this person's chats that mention the words. */ function searchFor(me, q) { const needle = q.toLowerCase(), out = [], st = stateOf(me.id); - for (const c of convs().filter(x => x.members.includes(me.id))) { const cv = view(c, me.id, st); for (const x of msgs(c.id)) if (!x.deleted && !x.sys && x.text && x.text.toLowerCase().includes(needle)) out.push({ conv: c.id, convName: cv.name, msg: msgView(x, me.id) }); } + for (const c of convs().filter(x => x.members.includes(me.id))) { const cv = view(c, me.id, st); for (const x of msgs(c.id)) if (!x.deleted && !x.sys && textOf(x).toLowerCase().includes(needle)) out.push({ conv: c.id, convName: cv.name, msg: msgView(x, me.id) }); } return out.sort((a, b) => b.msg.ts - a.msg.ts).slice(0, 8); } -module.exports = { markRead, announcement: () => read(annFile(), null), handle, totalUnread, purge, parsePreview, askParents, searchFor }; +module.exports = { cleanShare, markRead, announcement: () => read(annFile(), null), handle, totalUnread, purge, parsePreview, askParents, searchFor }; diff --git a/public/audiobooks-view.js b/public/audiobooks-view.js index d8d1c96..1e50580 100644 --- a/public/audiobooks-view.js +++ b/public/audiobooks-view.js @@ -92,15 +92,17 @@ async function viewBooks(args = []) { const byId = new Map(abBooks.map(b => [abId(b), b])); v.onclick = e => { const c = e.target.closest('button[data-id]'); if (c) abSheet(byId.get(c.dataset.id)); }; lvBind(v, () => route()); + if (args[0] === 'book' && args[1]) { const bid = args[1], b0 = /^lv:/.test(bid) ? null : byId.get(bid); if (/^lv:/.test(bid)) lvSheet(bid.slice(3)); else if (b0) abSheet(b0); else toast('That book is not in your library'); } // (a link from a Chat share card) } function abSheet(b) { const id = abId(b), p = abProg[id], left = p && p.dur ? p.dur - p.pos : 0, resumable = p && p.pos > 10 && p.dur && p.pos < p.dur - 30; const el = openSheet(abTitle(b), [abAuthor(b), abSeries(b)].filter(Boolean).join(' Β· '), `

${resumable ? esc(abFmt(p.pos) + ' of ' + abFmt(p.dur) + ' Β· ' + abFmt(left) + ' left') : p && p.dur && p.pos >= p.dur - 30 ? 'Finished' : 'Not started'}

-
${resumable ? '' : ''}
`); +
${resumable ? '' : ''}${allowed('chat') ? `` : ''}
`); const go = async at => { try { await abPlay(b, at); closeSheet(); } catch (e) { el.querySelector('#abe').textContent = e.message; } }; el.querySelector('#abp').onclick = () => go(); + if (el.querySelector('#abh')) el.querySelector('#abh').onclick = () => { closeSheet(); shareMedia({ kind: 'audiobook', title: abTitle(b), sub: abAuthor(b), art: abCover(b), link: '#/audio/book/' + encodeURIComponent(id) }); }; if (el.querySelector('#abs')) el.querySelector('#abs').onclick = () => go(0); el.querySelector('#abc').onclick = async () => { const box = el.querySelector('#abch'); box.innerHTML = '

Loading…

'; diff --git a/public/chat-view.js b/public/chat-view.js index 92f7c4a..3f31a47 100644 --- a/public/chat-view.js +++ b/public/chat-view.js @@ -62,7 +62,7 @@ function chDrawList() { const match = c => !q || c.name.toLowerCase().includes(q) || (c.preview || '').toLowerCase().includes(q), live = ch.convs.filter(c => !c.archived && match(c)), arch = ch.convs.filter(c => c.archived && match(c)); const found = q.length >= 2 && ch.found ? ch.found : []; box.innerHTML = live.map(chRow).join('') + (arch.length ? `${ch.showArchived || q ? arch.map(chRow).join('') : ''}` : '') - + (found.length ? `

In messages

${found.map(f => `${esc(f.convName)}${esc(f.msg.name)}: ${esc(f.msg.text)}${sgTime(f.msg.ts)}`).join('')}` : '') + + (found.length ? `

In messages

${found.map(f => `${esc(f.convName)}${esc(f.msg.name)}: ${esc(f.msg.text || (f.msg.share ? f.msg.share.title : ''))}${sgTime(f.msg.ts)}`).join('')}` : '') || ''; if (!box.innerHTML) box.innerHTML = `

${q ? 'Nothing matches' : 'No chats yet. Tap New to start one.'}

`; const a = box.querySelector('#charch'); if (a) a.onclick = () => { ch.showArchived = !ch.showArchived; chDrawList(); }; @@ -78,6 +78,16 @@ function chPoll(m) { ${P.options.map(o => { const n = count(o.id); return ``; }).join('')} ${total} ${total === 1 ? 'person has' : 'people have'} voted`; } +// ---- share cards: a song, film, book... sent from its own screen. Tapping opens it, unless that part of the hub is not turned on for this person. +const CH_SHARE = { song: ['🎡', 'Song'], album: ['πŸ’Ώ', 'Album'], artist: ['🎀', 'Artist'], playlist: ['πŸ“ƒ', 'Playlist'], movie: ['🎬', 'Movie'], show: ['πŸ“Ί', 'TV show'], episode: ['πŸ“Ί', 'Episode'], book: ['πŸ“–', 'Book'], audiobook: ['🎧', 'Audiobook'], podcast: ['πŸŽ™οΈ', 'Podcast'], podcastep: ['πŸŽ™οΈ', 'Podcast episode'], radio: ['πŸ“»', 'Radio'] }; +/** The tab a deep link lives in decides whether this person can open it (a child account only gets the tabs a parent allowed). */ +const chShareOk = link => { const tab = String(link || '').split('/')[1]; return !!tab && !!routesOf()[tab] && allowed(tab); }; +function chShareCard(m) { + const s = m.share, k = CH_SHARE[s.kind] || ['πŸ”—', 'Shared'], ok = chShareOk(s.link), art = /^\/(plex|api)\//.test(s.art || '') ? s.art : ''; + const body = `${art ? `` : `${k[0]}`} + ${k[0]} ${esc(k[1])}${esc(s.title)}${s.sub ? `${esc(s.sub)}` : ''}${ok ? '' : 'Not available for you'}`; + return ok ? `${body}β€Ί` : `
${body}
`; +} function chBubble(m, c, prev) { const att = (m.att || []).map(a => { const u = '/api/chat/file/' + a.id; return /^image\//.test(a.type || '') ? `${esc(a.name || 'photo')}` @@ -89,7 +99,7 @@ function chBubble(m, c, prev) { if (m.sys) return `${day}
${esc(m.text)}
`; const tick = m.out && m.status ? `${m.status === 'sent' ? 'βœ“' : 'βœ“βœ“'}` : ''; return `${day}
${m.fwd ? `β†ͺ Forwarded from ${esc(m.fwd.name)}` : ''}${c.type === 'group' && !m.out ? `${esc(m.name)}` : ''} - ${m.poll ? chPoll(m) : ''}${m.quote ? `
${esc(m.quote.name)}${esc(m.quote.text || 'Message')}
` : ''}${att} + ${m.poll ? chPoll(m) : ''}${m.share && !m.deleted ? chShareCard(m) : ''}${m.quote ? `
${esc(m.quote.name)}${esc(m.quote.text || 'Message')}
` : ''}${att} ${m.deleted ? 'This message was deleted' : m.text ? `
${chMention(sgLink(esc(m.text)).replace(/\n/g, '
'))}
` : ''} ${m.link && !m.deleted ? `${m.link.image ? `` : ''}${esc(m.link.site || new URL(m.link.url).hostname)}${esc(m.link.title)}${m.link.desc ? `${esc(m.link.desc)}` : ''}` : ''} ${m.exp ? '⏱ ' : ''}${m.edited ? 'edited Β· ' : ''}${new Date(m.ts).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}${tick ? ' ' + tick : ''} @@ -139,7 +149,7 @@ function chMessageMenu(m, c) { } function chDrawReply() { const b = chq('#chrep'); if (!b) return; if (!ch.reply) { b.hidden = true; return; } - b.hidden = false; b.innerHTML = `${esc(ch.reply.out ? 'You' : ch.reply.name)}${esc(ch.reply.text || 'Attachment')}`; + b.hidden = false; b.innerHTML = `${esc(ch.reply.out ? 'You' : ch.reply.name)}${esc(ch.reply.text || (ch.reply.share && ch.reply.share.title) || 'Attachment')}`; chq('#chrx').onclick = () => { ch.reply = null; chDrawReply(); }; } function chDrawTray() { @@ -220,8 +230,8 @@ function chPaintSub() { } function chDrawPin() { const b = chq('#chpin'); if (!b) return; if (!ch.pins.length) { b.hidden = true; return; } - const last = ch.pins[ch.pins.length - 1]; b.hidden = false; b.innerHTML = `πŸ“Œ${ch.pins.length > 1 ? ch.pins.length + ' pinned messages' : 'Pinned message'}${esc(last.text || (last.att && last.att[0] ? last.att[0].name : 'Attachment'))}`; - b.onclick = () => { const el = openSheet('Pinned', '', `
${ch.pins.slice().reverse().map(m => `
`).join('')}
`); + const last = ch.pins[ch.pins.length - 1]; b.hidden = false; b.innerHTML = `πŸ“Œ${ch.pins.length > 1 ? ch.pins.length + ' pinned messages' : 'Pinned message'}${esc(last.text || (last.share && last.share.title) || (last.att && last.att[0] ? last.att[0].name : 'Attachment'))}`; + b.onclick = () => { const el = openSheet('Pinned', '', `
${ch.pins.slice().reverse().map(m => `
`).join('')}
`); el.querySelectorAll('[data-go]').forEach(x => x.onclick = () => { closeSheet(); const t = chq(`.sgb[data-id="${CSS.escape(x.dataset.go)}"]`); if (t) { t.scrollIntoView({ block: 'center' }); t.classList.add('flash'); setTimeout(() => t.classList.remove('flash'), 1400); } }); el.querySelectorAll('[data-un]').forEach(x => x.onclick = async () => { closeSheet(); try { await chPost('/pin', { conv: ch.cur, msg: x.dataset.un, on: false }); } catch (e) { toast(e.message); } }); }; } @@ -325,6 +335,15 @@ async function shareToChat(text) { const el = openSheet('Share to Chat', text.length > 90 ? text.slice(0, 90) + '…' : text, `
${convs.map(c => ``).join('') || '

Start a chat first.

'}
`); el.querySelectorAll('[data-t]').forEach(b => b.onclick = async () => { closeSheet(); try { await chPost('/send', { conv: b.dataset.t, text }); toast('Shared', { label: 'Open', run: () => { location.hash = '#/chat/' + encodeURIComponent(b.dataset.t); } }); } catch (e) { toast(e.message); } }); } +/** From a song, film, book...: pick a chat, add a note if you like, and a share card goes in. card = { kind, title, sub, art, link } (art and link are paths inside the hub). */ +async function shareMedia(card) { + if (!allowed('chat')) return toast('Chat is not turned on for you'); + let convs = []; try { convs = (await chApi('/convs')).convs.filter(c => !c.archived); } catch (e) { return toast(e.message); } + const k = CH_SHARE[card.kind] || ['πŸ”—', 'Shared']; + const el = openSheet('Share to Chat', k[0] + ' ' + card.title, ` +
${convs.map(c => ``).join('') || '

Start a chat first (Chat, then New).

'}
`); + el.querySelectorAll('[data-t]').forEach(b => b.onclick = async () => { const text = el.querySelector('#chsn').value, to = b.dataset.t; closeSheet(); try { await chPost('/send', { conv: to, text, share: { kind: card.kind, title: card.title, sub: card.sub || '', art: /^\/(plex|api)\/[^\s"'<>\\]*$/.test(card.art || '') && !card.art.includes('..') ? card.art : '', link: card.link } }); toast('Shared', { label: 'Open', run: () => { location.hash = '#/chat/' + encodeURIComponent(to); } }); } catch (e) { toast(e.message); } }); +} // ---- settings: quiet hours, and the family announcement (admin) async function chSettings() { let pr, an = null; try { [pr, an] = await Promise.all([chApi('/prefs'), chApi('/announcement')]); } catch (e) { return toast(e.message); } diff --git a/public/librivox-view.js b/public/librivox-view.js index d7f2795..7b31d6d 100644 --- a/public/librivox-view.js +++ b/public/librivox-view.js @@ -85,9 +85,10 @@ async function lvSheet(id, after, known = new Map()) { el.querySelector('.empty').outerHTML = `

${esc([b.language, lvDur(total), b.chapters.length + ' chapters'].filter(Boolean).join(' Β· '))}

${p ? esc(abFmt(p.pos) + ' of ' + abFmt(p.dur) + ' Β· ' + abFmt(p.dur - p.pos) + ' left') : 'Not started'}

${b.description ? `

${esc(b.description)}

` : ''} -
${p ? '' : ''}${allowed('files') ? '' : ''}
`; +
${p ? '' : ''}${allowed('files') ? '' : ''}${allowed('chat') ? `` : ''}
`; const go = at => { if (!b.chapters.length) return toast('This book has no audio'); lvPlay(b, at); closeSheet(); if (!onShelf()) lvShelf.push({ id, title: b.title, author: b.author, secs: b.secs, cover: b.cover, added: Date.now() }); if (after) after(); }; el.querySelector('#lvp').onclick = () => go(); + if (el.querySelector('#lvh')) el.querySelector('#lvh').onclick = () => { closeSheet(); shareMedia({ kind: 'audiobook', title: b.title, sub: b.author || '', link: '#/audio/book/lv:' + id }); }; // (no picture: LibriVox covers live on another site) if (el.querySelector('#lvs')) el.querySelector('#lvs').onclick = () => go(0); if (el.querySelector('#lvf')) el.querySelector('#lvf').onclick = () => { closeSheet(); saveToFiles(b.title, { kind: 'librivox-book', id }); }; el.querySelector('#lvc').onclick = () => { const offs = lvOffsets(b); el.querySelector('#lvch').innerHTML = b.chapters.map((c, i) => ``).join(''); el.querySelectorAll('#lvch [data-i]').forEach(x => x.onclick = () => go(offs[x.dataset.i])); }; diff --git a/public/music.js b/public/music.js index 06b282b..96662e4 100644 --- a/public/music.js +++ b/public/music.js @@ -155,8 +155,9 @@ async function musicRoute([kind = 'featured', key, key2], st) { if (kind === 'artist') { const [mc, am] = await Promise.all([px.get(`/library/metadata/${key}/children`), px.get(`/library/metadata/${key}`).catch(() => ({}))]), about = ((am.Metadata || [])[0] || {}).summary || ''; v.innerHTML = `
${icon('back')}Artists

${esc(mc.title2 || mc.parentTitle || 'Artist')}

- ${about ? `
About

${esc(about).replace(/\n/g, '
')}

` : ''}
${icon('shuffle')}More like this
+ ${about ? `
About

${esc(about).replace(/\n/g, '
')}

` : ''}
${icon('shuffle')}More like this${allowed('chat') ? `` : ''}

Albums

${(mc.Metadata || []).map(a => card('#/music/album/' + a.ratingKey, a.thumb, a.title, a.year || '')).join('')}
`; + if ($('#ash')) $('#ash').onclick = () => shareMedia({ kind: 'artist', title: mc.title2 || mc.parentTitle || 'Artist', art: px.art((am.Metadata || [])[0] && am.Metadata[0].thumb, 200), link: '#/music/artist/' + key }); return; } if (kind === 'album' || kind === 'playlist') { @@ -171,7 +172,7 @@ async function musicRoute([kind = 'featured', key, key2], st) { v.innerHTML = `
${icon('back')}${album ? 'Albums' : 'Playlists'}

${esc(title)}

${esc(sub)}

${info.summary ? `
About

${esc(info.summary).replace(/\n/g, '
')}

` : ''} -
${album ? '' : ''}${mine ? '' : ''}
+
${album ? '' : ''}${album && allowed('chat') ? `` : ''}${album && allowed('chat') ? `` : ''}${mine ? '' : ''}
${tracks.map((t, i) => `
`).join('') || '

No playable tracks

'}
`; @@ -182,6 +183,8 @@ async function musicRoute([kind = 'featured', key, key2], st) { $('#prn').onclick = () => textSheet('Rename playlist', 'Playlist name', 'Rename', async n => { try { await plx.rename(key, n); route(); } catch (e) { toast(e.message); } }, title); $('#pdel').onclick = () => confirmSheet('Delete playlist?', title, 'Delete', async () => { try { await plx.del(key); toast('Playlist deleted'); location.hash = '#/music/playlists'; } catch (e) { toast(e.message); } }); } + if ($('#psh')) $('#psh').onclick = () => shareMedia({ kind: 'album', title, sub, art: px.art(thumb, 200), link: '#/music/album/' + key }); + if ($('#psh')) $('#psh').onclick = () => shareMedia({ kind: 'album', title, sub, art: px.art(thumb, 200), link: '#/music/album/' + key }); $('#pa').onclick = () => tracks.length && playQueue(tracks, 0); $('#ps').onclick = () => tracks.length && playQueue(shuffled(tracks), 0, true); markPlaying(); diff --git a/public/player.js b/public/player.js index b3d1c55..c284d5a 100644 --- a/public/player.js +++ b/public/player.js @@ -112,7 +112,7 @@ function trackSheet(t, extra) { ...(typeof mmPlex === 'function' && mmPlex(t.key) ? [ { label: mfIs(t) ? 'Remove from Favorites' : 'Add to Favorites', icon: 'heart', run: () => mfToggle(t) }, { label: 'Add to a Family playlist…', icon: 'plus', run: () => addToFamily([t]) }, - ...(allowed('chat') && t.albumKey ? [{ label: 'Share to Chat', icon: 'send', run: () => shareToChat('β™ͺ ' + t.title + ' β€” ' + t.artist + ' ' + location.origin + '/#/music/album/' + t.albumKey) }] : []), + ...(allowed('chat') && t.albumKey ? [{ label: 'Share to Chat', icon: 'send', run: () => shareMedia({ kind: 'song', title: t.title, sub: t.artist, art: px.art(t.thumb, 200), link: '#/music/album/' + t.albumKey }) }] : []), ...(t.artistKey ? [{ label: 'More like this', icon: 'shuffle', run: () => { location.hash = '#/music/mix/similar/' + t.artistKey; } }] : []), ] : []), ...(extra || []), diff --git a/public/podcast-view.js b/public/podcast-view.js index 3f0f035..e746f5c 100644 --- a/public/podcast-view.js +++ b/public/podcast-view.js @@ -114,7 +114,7 @@ async function pdShow(id) { const items = (Array.isArray(items0) ? items0 : []).sort((a, b) => pdTime(pdF(b, 'pubDate')) - pdTime(pdF(a, 'pubDate'))); const paused = !!pdF(show, 'isPaused'), ep = e => `
${esc(pdF(e, 'title'))}${esc([pdDate(pdF(e, 'pubDate')), pdDur(pdF(e, 'duration')), pdF(e, 'isPlayed') ? 'played' : pdLeft(e) ? pdDur(pdLeft(e).dur - pdLeft(e).pos) + ' left' : ''].filter(Boolean).join(' Β· '))} -
`; + ${allowed('chat') ? `` : ''}
`; $('#view').innerHTML = `
${icon('back')}Back

${esc(pdF(show, 'title'))}

${esc(pdF(show, 'author') || '')}

@@ -131,6 +131,7 @@ async function pdShow(id) { document.querySelectorAll('.pdep').forEach(r => { const e = byId.get(r.dataset.id); r.querySelector('[data-play]').onclick = () => playFrom(e); + const shb = r.querySelector('[data-share]'); if (shb) shb.onclick = () => shareMedia({ kind: 'podcastep', title: pdF(e, 'title'), sub: pdF(show, 'title'), art: pdImg('podcasts', show), link: '#/podcast/show/' + encodeURIComponent(id) }); const ob = r.querySelector('[data-off]'), paint = async () => { const on = await offHas(pdId(e)); ob.style.color = on ? 'var(--accent)' : ''; ob.title = ob.ariaLabel = on ? 'Saved on this device (tap to remove)' : 'Save for offline'; return on; }; paint(); ob.onclick = async () => { const id = pdId(e); if (await offHas(id)) offRemove(id, paint); else offSave(id, paint); }; r.querySelector('[data-seen]').onclick = async () => { @@ -139,9 +140,10 @@ async function pdShow(id) { }); if ($('#pdlatest')) $('#pdlatest').onclick = () => playFrom(items[0]); $('#pdmore').onclick = () => { - const el = openSheet(pdF(show, 'title'), '', `
+ const el = openSheet(pdF(show, 'title'), '', `
${allowed('chat') ? `` : ''}
`); + const sh = el.querySelector('#pdsh'); if (sh) sh.onclick = () => { closeSheet(); shareMedia({ kind: 'podcast', title: pdF(show, 'title'), sub: pdF(show, 'author') || '', art: pdImg('podcasts', show), link: '#/podcast/show/' + encodeURIComponent(id) }); }; const act = (sel, fn, msg) => el.querySelector(sel).onclick = async () => { try { await fn(); closeSheet(); toast(msg); route(); } catch (e) { toast(e.message); } }; act('#pda', () => pdApi('/podcasts/' + encodeURIComponent(id) + '/download'), 'Downloading in the background'); act('#pdp', () => pdApi('/podcasts/' + encodeURIComponent(id) + (paused ? '/unpause' : '/pause')), paused ? 'Resumed' : 'Paused'); diff --git a/public/style.css b/public/style.css index 27506c5..86bcf89 100644 --- a/public/style.css +++ b/public/style.css @@ -1023,6 +1023,9 @@ body.vizopen { overflow: hidden; } .sgopt i { position: absolute; inset: 0 auto 0 0; background: rgba(127,127,127,.25); z-index: 0; } .sgopt span, .sgopt small { position: relative; z-index: 1; } .sgopt span { flex: 1; } .sgopt.on { border-color: currentColor; font-weight: 600; } .sgopt:disabled { cursor: default; opacity: .8; } .sgprev { display: flex; gap: 10px; margin: 6px 0 2px; padding: 8px; border-radius: 10px; background: rgba(127,127,127,.18); color: inherit; text-decoration: none; overflow: hidden; } .sgprev img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; } .sgprev span { min-width: 0; } .sgprev small, .sgprev b, .sgprev em { display: block; overflow: hidden; text-overflow: ellipsis; } .sgprev small { opacity: .7; } .sgprev b { white-space: nowrap; } .sgprev em { font-style: normal; opacity: .8; font-size: 13px; max-height: 2.6em; } +.sgshare { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; padding: 8px; min-width: 220px; border-radius: 12px; background: rgba(127,127,127,.18); color: inherit; text-decoration: none; overflow: hidden; } .sgshare.off { opacity: .75; } +.sgshare-art { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: rgba(127,127,127,.25); display: grid; place-items: center; font-size: 26px; font-style: normal; } +.sgshare-t { min-width: 0; flex: 1; } .sgshare-t small, .sgshare-t b, .sgshare-t em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; } .sgshare-t small { opacity: .7; } .sgshare-t em { opacity: .8; font-size: .9em; } .sgshare-t .sgshare-off { opacity: 1; color: var(--danger); font-weight: 600; margin-top: 2px; } .sgshare-go { font-size: 22px; opacity: .6; } .chemo { position: absolute; bottom: 100%; left: 0; right: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 2px; max-height: 190px; overflow: auto; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px 12px 0 0; z-index: 25; } .chemo button { border: 0; background: none; font-size: 24px; padding: 4px; cursor: pointer; border-radius: 8px; } .chemo button:hover { background: var(--panel2); } .sgc { position: relative; } .sgc.rec > :not(.chrecbar) { visibility: hidden; } .chrecbar { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: var(--panel); } .recdot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: chblink 1s infinite; } @keyframes chblink { 50% { opacity: .2; } } diff --git a/public/sw.js b/public/sw.js index b180e47..5d5c684 100644 --- a/public/sw.js +++ b/public/sw.js @@ -1,5 +1,5 @@ // App-shell cache only; Seafile/API traffic always goes to the network. -const CACHE = 'hub-v90'; +const CACHE = 'hub-v91'; const SHARE = 'hub-share'; // files shared into the app from other apps, held until the person picks a folder const SHELL = ['/icon.svg', '/manifest.webmanifest', '/icons/icon-192.png', '/icons/apple-touch-icon.png']; diff --git a/public/video.js b/public/video.js index fcb4608..20bdba9 100644 --- a/public/video.js +++ b/public/video.js @@ -170,7 +170,7 @@ async function videoItem(id) {

${esc(m.type === 'episode' ? m.title : m.title)}

${m.type === 'episode' ? `

${vdEp(m)}

` : m.type === 'season' ? `

${esc(m.parentTitle || '')}

` : ''}

${esc(meta)}

${playable ? `${m.viewOffset ? '' : ''}` : m.type === 'show' && next ? `` : ''} - ${m.type !== 'season' && m.type !== 'collection' ? `` : ''}
+ ${allowed('chat') && m.type !== 'collection' ? `` : ''}${m.type !== 'season' && m.type !== 'collection' ? `` : ''}

${esc(m.summary || '')}

${m.Genre && m.Genre.length ? `

Genres ${names(m.Genre)}

` : ''}${m.Director && m.Director.length ? `

Director ${names(m.Director, 'tag', 3)}

` : ''}${m.Role && m.Role.length ? `

Cast ${names(m.Role, 'tag', 8)}

` : ''}
`; @@ -196,6 +196,8 @@ async function videoItem(id) { }).catch(() => {}); const pimg = document.querySelector('.vpost img'); // tint the backdrop with the poster's own colour if (pimg) { const tint = () => { try { const c = document.createElement('canvas'); c.width = c.height = 8; const x = c.getContext('2d'); x.drawImage(pimg, 0, 0, 8, 8); const d = x.getImageData(0, 0, 8, 8).data; let r = 0, g = 0, b = 0; for (let i = 0; i < d.length; i += 4) { r += d[i]; g += d[i + 1]; b += d[i + 2]; } const n = d.length / 4, h = document.querySelector('.vhero'); if (h) h.style.setProperty('--vtint', `rgb(${Math.round(r / n)}, ${Math.round(g / n)}, ${Math.round(b / n)})`); } catch {} }; pimg.complete && pimg.naturalWidth ? tint() : pimg.addEventListener('load', tint, { once: true }); } + if ($('#vshare')) $('#vshare').onclick = () => shareMedia({ kind: m.type === 'movie' ? 'movie' : m.type === 'episode' ? 'episode' : 'show', title: m.type === 'episode' ? m.title : m.title, sub: m.type === 'episode' ? [m.grandparentTitle, 'S' + m.parentIndex + 'E' + m.index].filter(Boolean).join(' Β· ') : m.type === 'season' ? m.parentTitle || '' : m.year ? String(m.year) : '', art: vdArt(m.thumb, 200, 300), link: '#/video/item/' + id }); + if ($('#vshare')) $('#vshare').onclick = () => shareMedia({ kind: m.type === 'movie' ? 'movie' : m.type === 'episode' ? 'episode' : 'show', title: m.type === 'episode' ? m.title : m.title, sub: m.type === 'episode' ? [m.grandparentTitle, 'S' + m.parentIndex + 'E' + m.index].filter(Boolean).join(' Β· ') : m.type === 'season' ? m.parentTitle || '' : m.year ? String(m.year) : '', art: vdArt(m.thumb, 200, 300), link: '#/video/item/' + id }); if ($('#vplay')) $('#vplay').onclick = () => { location.hash = `#/video/watch/${id}`; }; if ($('#vstart')) $('#vstart').onclick = () => { store.set('video_from_start', id); location.hash = `#/video/watch/${id}`; }; if ($('#vnext')) $('#vnext').onclick = () => { location.hash = `#/video/watch/${next.ratingKey}`; }; diff --git a/tools/chat-test.js b/tools/chat-test.js index a1097e9..4e87a4d 100644 --- a/tools/chat-test.js +++ b/tools/chat-test.js @@ -83,6 +83,19 @@ const hub = http.createServer((req, res) => users.runAs(P[req.headers['x-user'] const pp = chat.parsePreview('Fallback', 'https://cook.example.com/stew'); assert.deepEqual(pp, { url: 'https://cook.example.com/stew', site: 'Cook Site', title: 'Pot & Pan Recipes', desc: 'Best stew', image: 'https://cook.example.com/img/a.jpg' }, 'a preview reads the page\'s own words'); assert.equal(chat.parsePreview('Plain', 'https://x.example.com/').title, 'Plain'); assert.equal(chat.parsePreview('', 'https://x.example.com/').image, '', 'only https pictures'); assert.equal(chat.parsePreview('', 'https://x.example.com/'), null); + // ---- share cards: a song, film or book from the hub, with a picture and a link back + const card = { kind: 'song', title: 'Blue Moon', sub: 'Sinatra', art: '/plex/photo/:/transcode?width=300&url=%2Flibrary%2Fa', link: '#/music/album/123' }; + for (const bad of [{ ...card, kind: 'virus' }, { ...card, title: ' ' }, { ...card, link: 'https://evil.example/x' }, { ...card, link: 'javascript:alert(1)' }, { ...card, link: '#/music/' }, { ...card, art: 'https://evil.example/a.jpg' }, { ...card, art: '//evil.example/a.jpg' }, { ...card, art: '/plex/../etc/passwd' }]) assert.equal((await post('/send', { conv: g2.id, share: bad }, 'a')).status, 400, 'a bad card is refused: ' + JSON.stringify(bad)); + assert.equal((await post('/send', { conv: g2.id, share: card }, 'c')).status, 200, 'sharing needs no words'); await post('/read', { id: g2.id }, 'b'); + const sh = (await j(await post('/send', { conv: g2.id, text: 'Listen to this', share: { ...card, title: 'T'.repeat(500), sub: 'S'.repeat(500) } }, 'a'))).msg; assert.equal(sh.share.title.length, 120, 'long words are cut'); assert.equal(sh.share.sub.length, 120); assert.equal(sh.text, 'Listen to this', 'with a note'); + assert.equal((await j(await call('/convs', {}, 'b'))).unread, 1, 'a share counts as unread (the earlier one was read)'); assert.match((await j(await call('/convs', {}, 'b'))).convs.find(x => x.id === g2.id).preview, /^Ann: 🎡 TTT/, 'listed by its title'); + const sh2 = (await j(await post('/send', { conv: g2.id, share: { kind: 'podcastep', title: 'Ep 4', link: '#/podcast/show/x' } }, 'a'))).msg; assert.equal(sh2.share.art, '', 'the picture is optional'); assert.equal((await st('b', g2.id)).msgs.find(x => x.id === sh2.id).share.link, '#/podcast/show/x'); + assert.equal(chat.cleanShare({ kind: 'movie', title: 'Up', link: '#/video/item/9' }).title, 'Up'); + assert.ok(require('../inbox').load(P.b.id).some(i => i.body === 'Ann: πŸŽ™οΈ Shared a podcast episode: Ep 4' && i.url.startsWith('#/chat/')), 'the Notifications list says what was shared'); + assert.equal((await j(await call('/search?q=sinatra', {}, 'b'))).results.length, 1, 'search finds a card by its subtitle'); assert.equal((await j(await call('/search?q=ep%204', {}, 'b'))).results.length, 1); + const fws = (await j(await post('/forward', { from: g2.id, to: dm.id, msg: sh.id }, 'a'))).msg; assert.equal(fws.share.link, '#/music/album/123', 'a forwarded card stays a card'); + assert.equal((await post('/delete', { conv: g2.id, msg: sh2.id }, 'a')).status, 200); assert.equal((await st('b', g2.id)).msgs.find(x => x.id === sh2.id).share, undefined, 'a deleted card shows nothing'); + // ---- family extras: announcement and quiet hours assert.equal(await j(await call('/announcement', {}, 'b')), null); assert.equal((await post('/announcement', { text: 'Dinner at 6' }, 'b')).status, 403, 'only an admin posts it'); const an = await j(await post('/announcement', { text: ' Dinner at 6 ' }, 'a')); assert.equal(an.text, 'Dinner at 6'); assert.equal((await j(await call('/announcement', {}, 'b'))).by, 'Ann'); await post('/announcement', { text: '' }, 'a'); assert.equal(await j(await call('/announcement', {}, 'b')), null, 'an empty one clears it');