diff options
| author | s-ol <s-ol@users.noreply.github.com> | 2021-02-12 12:37:57 +0000 |
|---|---|---|
| committer | s-ol <s-ol@users.noreply.github.com> | 2021-02-12 12:46:51 +0000 |
| commit | 947e7e5abdddee239f3984b35630750ae810e7f1 (patch) | |
| tree | 91195491f5764cce61b476914554b71a6b0fc0b9 | |
| parent | fix title display (diff) | |
| download | fedidag-947e7e5abdddee239f3984b35630750ae810e7f1.tar.gz fedidag-947e7e5abdddee239f3984b35630750ae810e7f1.zip | |
basic media attachments
| -rw-r--r-- | src/ui/Attachment.js | 27 | ||||
| -rw-r--r-- | src/ui/Discussion.js | 3 | ||||
| -rw-r--r-- | src/ui/Note.js | 8 |
3 files changed, 36 insertions, 2 deletions
diff --git a/src/ui/Attachment.js b/src/ui/Attachment.js new file mode 100644 index 0000000..829dc8a --- /dev/null +++ b/src/ui/Attachment.js @@ -0,0 +1,27 @@ +import { h } from 'preact'; +import css from './css'; + +css` +.attachment { + margin: 1rem; + + width: 18rem; + height: 10rem; + object-fit: contain; +} + +.attachment + .attachment { + margin-top: 0; +} +`; + +export const Attachment = ({ type, mediaType, url, style }) => { + let content; + if (mediaType.startsWith('video/')) { + content = <video class="attachment" src={url} controls />; + } else if (mediaType.startsWith('image/')) { + content = <img class="attachment" src={url} />; + } + + return content; +} diff --git a/src/ui/Discussion.js b/src/ui/Discussion.js index 909f9c8..b0cdb4f 100644 --- a/src/ui/Discussion.js +++ b/src/ui/Discussion.js @@ -61,7 +61,8 @@ export const Discussion = ({ const isCollapsed = collapsed[item.id]; const hidden = item.inReplyTo.every(p => collapsed[p.id]) - && item.replies.every(c => collapsed[c.id]); + && item.replies.every(c => collapsed[c.id]) + && item.inReplyTo.length !== 0; if (hidden) return; diff --git a/src/ui/Note.js b/src/ui/Note.js index 404979c..e35171a 100644 --- a/src/ui/Note.js +++ b/src/ui/Note.js @@ -4,6 +4,7 @@ import ColorHash from 'color-hash'; import { formatRelative } from 'date-fns'; import cn from 'classnames'; import css from './css'; +import { Attachment } from './Attachment'; const now = new Date(); const Time = ({ time }) => { @@ -180,7 +181,7 @@ section.type-Tombstone.ellipsis > main::after { const colors = new ColorHash({ lightness: 0.8 }); export const Note = ({ - id, type, attributedTo, published, content, + id, type, attributedTo, published, content, attachment, smallHeader = false, collapsed = false, ellipsis = false, position, onCollapse, onSelect, onSize, }) => { @@ -196,6 +197,10 @@ export const Note = ({ onSize(id, root.current.offsetWidth, root.current.offsetHeight); }); + attachment ||= []; + if (!Array.isArray(attachment)) + attachment = [attachment]; + return ( <section style={{ @@ -227,6 +232,7 @@ export const Note = ({ innerHTML={content} onClick={onClick} /> + {attachment.map(a => <Attachment {...a} />)} </section> ); }; |