From 947e7e5abdddee239f3984b35630750ae810e7f1 Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Fri, 12 Feb 2021 13:37:57 +0100
Subject: basic media attachments

---
 src/ui/Attachment.js | 27 +++++++++++++++++++++++++++
 src/ui/Discussion.js |  3 ++-
 src/ui/Note.js       |  8 +++++++-
 3 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/ui/Attachment.js

(limited to 'src')

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>
 	);
 };
-- 
cgit v1.2.3