| app/html/thread-card.jsView |
|---|
| 1 | 1 | var nest = require('depnest') |
| 2 | 2 | var h = require('mutant/h') |
| 3 | 3 | var isString= require('lodash/isString') |
| 4 | 4 | var maxBy= require('lodash/maxBy') |
| 5 | +var humanTime = require('human-time') |
| 6 | +var marksum = require('markdown-summary') |
| 7 | +var markdown = require('ssb-markdown') |
| 8 | +var ref = require('ssb-ref') |
| 9 | +var htmlEscape = require('html-escape') |
| 5 | 10 | |
| 11 | +function renderEmoji (emoji, url) { |
| 12 | + if (!url) return ':' + emoji + ':' |
| 13 | + return ` |
| 14 | + <img |
| 15 | + src="${htmlEscape(url)}" |
| 16 | + alt=":${htmlEscape(emoji)}:" |
| 17 | + title=":${htmlEscape(emoji)}:" |
| 18 | + class="emoji" |
| 19 | + > |
| 20 | + ` |
| 21 | +} |
| 22 | + |
| 6 | 23 | exports.gives = nest('app.html.threadCard', true) |
| 7 | 24 | |
| 8 | 25 | exports.needs = nest({ |
| 9 | 26 | 'keys.sync.id': 'first', |
| 10 | 27 | 'history.sync.push': 'first', |
| 11 | 28 | 'about.obs.name': 'first', |
| 12 | 29 | 'about.html.avatar': 'first', |
| 13 | | - 'message.html.subject': 'first', |
| 14 | 30 | 'translations.sync.strings': 'first', |
| 15 | | - 'unread.sync.isUnread': 'first' |
| 31 | + 'unread.sync.isUnread': 'first', |
| 32 | + 'message.html.markdown': 'first', |
| 33 | + 'blob.sync.url': 'first', |
| 34 | + 'emoji.sync.url': 'first' |
| 16 | 35 | }) |
| 17 | 36 | |
| 18 | 37 | exports.create = function (api) { |
| 19 | 38 | |
| 39 | + |
| 40 | + function render (source) { |
| 41 | + return markdown.block(source, { |
| 42 | + emoji: (emoji) => { |
| 43 | + return renderEmoji(emoji, api.emoji.sync.url(emoji)) |
| 44 | + }, |
| 45 | + toUrl: (id) => { |
| 46 | + if (ref.isBlob(id)) return api.blob.sync.url(id) |
| 47 | + return id |
| 48 | + }, |
| 49 | + imageLink: (id) => id |
| 50 | + }) |
| 51 | + } |
| 52 | + |
| 53 | + |
| 20 | 54 | |
| 21 | 55 | |
| 22 | 56 | |
| 23 | 57 | |
| 51 | 85 | |
| 52 | 86 | if(!thread.value) return |
| 53 | 87 | if(!thread.value.content.text) return |
| 54 | 88 | |
| 55 | | - const subjectEl = h('div.subject', [ |
| 56 | | - opts.nameRecipients |
| 57 | | - ? h('div.recps', buildRecipientNames(thread).map(recp => h('div.recp', recp))) |
| 58 | | - : null, |
| 59 | | - subject(thread) |
| 60 | | - ]) |
| 89 | + |
| 90 | + |
| 91 | + |
| 92 | + |
| 93 | + |
| 94 | + |
| 61 | 95 | |
| 62 | 96 | const lastReply = thread.replies && maxBy(thread.replies, r => r.timestamp) |
| 63 | | - const replySample = lastReply ? subject(lastReply) : null |
| 97 | + |
| 64 | 98 | |
| 65 | 99 | const onClick = opts.onClick || function () { api.history.sync.push(thread) } |
| 66 | 100 | const id = `${thread.key.replace(/[^a-z0-9]/gi, '')}` |
| 67 | 101 | |
| 68 | 102 | |
| 103 | + var img = marksum.image(thread.value.content.text) |
| 104 | + var m = /\!\[[^]+\]\(([^\)]+)\)/.exec(img) |
| 105 | + console.log(m, img) |
| 106 | + if(m) { |
| 107 | + |
| 108 | + |
| 109 | + img = h('Thumbnail') |
| 110 | + img.style = 'background-image: url("'+api.blob.sync.url(m[1])+'"); background-position:center; background-size: cover;' |
| 111 | + } |
| 112 | + else img = '' |
| 113 | + var title = render(marksum.title(thread.value.content.text)) |
| 114 | + var summary = render(marksum.summary(thread.value.content.text)) |
| 115 | + |
| 69 | 116 | var className = thread.unread ? '-unread': '' |
| 70 | | - |
| 71 | 117 | return h('ThreadCard', { id, className }, [ |
| 72 | | - h('div.context', threadIcon(thread)), |
| 118 | + h('div.context', [ |
| 119 | + api.about.html.avatar(thread.value.author), |
| 120 | + ' ', |
| 121 | + api.about.obs.name(thread.value.author), |
| 122 | + ' ', |
| 123 | + humanTime(new Date(thread.value.timestamp)), |
| 124 | + ' ', |
| 125 | + thread.value.content.channel ? '#'+thread.value.content.channel : null |
| 126 | + ]), |
| 73 | 127 | h('div.content', {'ev-click': onClick}, [ |
| 74 | | - subjectEl, |
| 75 | | - replySample ? h('div.reply', [ |
| 76 | | - h('i.fa.fa-caret-left'), |
| 77 | | - replySample |
| 78 | | - ]) : null |
| 128 | + img, |
| 129 | + h('Text', [ |
| 130 | + h('h2', {innerHTML: title}), |
| 131 | + h('Summary', {innerHTML: summary}) |
| 132 | + ]) |
| 79 | 133 | ]) |
| 80 | 134 | ]) |
| 81 | 135 | }) |
| 82 | 136 | } |
| 83 | 137 | |
| 84 | 138 | |
| 139 | + |
| 140 | + |
| 141 | + |
| 142 | + |
| 143 | + |
| 144 | + |
| 145 | + |
| 146 | + |
| 147 | + |
| 148 | + |
| 149 | + |
| 150 | + |
| 151 | + |
| 152 | + |
| 153 | + |
| 154 | + |
| 155 | + |
| 156 | + |
| 157 | + |
| 158 | + |
| 159 | + |
| 160 | + |
| 161 | + |
| 162 | + |
| 163 | + |
| 164 | + |
| 165 | + |
| 166 | + |