From 8f2d3e3bcd2ea71fa7ce4c7a07e62e23b2ca399d Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sat, 8 Apr 2023 20:06:45 +0000
Subject: [PATCH] Show videos in messages.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4253 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 apps/ssb/tf-utils.js | 35 +++++++++++++++++++++++++++++++++++
 apps/todo/script.js  |  6 +++---
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/apps/ssb/tf-utils.js b/apps/ssb/tf-utils.js
index 74d8a93e..de09a431 100644
--- a/apps/ssb/tf-utils.js
+++ b/apps/ssb/tf-utils.js
@@ -1,9 +1,44 @@
 import * as linkify from './commonmark-linkify.js';
 import * as hashtagify from './commonmark-hashtag.js';
 
+
+function image(node, entering) {
+	if (node.firstChild?.type === 'text' &&
+		node.firstChild.literal.startsWith('video:')) {
+		if (entering) {
+			this.lit('<video style="max-width: 100%; max-height: 480px" title="' + this.esc(node.firstChild?.literal) + '" controls>');
+			this.lit('<source src="' + this.esc(node.destination) + '"></source>');
+			this.disableTags += 1;
+		} else {
+			this.disableTags -= 1;
+			this.lit('</video>');
+		}
+	} else {
+		if (entering) {
+			if (this.disableTags === 0) {
+				if (this.options.safe && potentiallyUnsafe(node.destination)) {
+					this.lit('<img src="" alt="');
+				} else {
+					this.lit('<img src="' + this.esc(node.destination) + '" alt="');
+				}
+			}
+			this.disableTags += 1;
+		} else {
+			this.disableTags -= 1;
+			if (this.disableTags === 0) {
+				if (node.title) {
+					this.lit('" title="' + this.esc(node.title));
+				}
+				this.lit('" />');
+			}
+		}
+	}
+}
+
 export function markdown(md) {
 	var reader = new commonmark.Parser({safe: true});
 	var writer = new commonmark.HtmlRenderer();
+	writer.image = image;
 	var parsed = reader.parse(md || '');
 	parsed = linkify.transform(parsed);
 	parsed = hashtagify.transform(parsed);
diff --git a/apps/todo/script.js b/apps/todo/script.js
index b8cdf391..00720b51 100644
--- a/apps/todo/script.js
+++ b/apps/todo/script.js
@@ -114,13 +114,12 @@ class TodoListElement extends LitElement {
 					@change=${event => self.input_change(event, item)}
 					@keydown=${event => self.input_keydown(event, item)}
 					@blur=${x => self.input_blur(item)}></input>
-				<span @click=${x => self.remove_item(item)}>x</span></div>
+				<span @click=${x => self.remove_item(item)} style="cursor: pointer">❎</span></div>
 			`;
 		} else {
 			return html`
 				<div><input type="checkbox" ?checked=${item.x} @change=${x => self.handle_check(x, item)}></input>
 				<span @click=${x => self.editing = index}>${item.text}</span>
-				<span @click=${x => self.remove_item(item)} style="cursor: pointer">❎</span></div>
 			`;
 		}
 	}
@@ -175,7 +174,8 @@ class TodoListElement extends LitElement {
 		return html`
 			<div style="border: 3px solid black; padding: 8px; margin: 8px; border-radius: 8px; background-color: #444">
 				${name}
-				${(this.items || []).map(x => self.render_item(x))}
+				${(this.items || []).filter(item => !item.x).map(x => self.render_item(x))}
+				${(this.items || []).filter(item => item.x).map(x => self.render_item(x))}
 				<button @click=${self.add_item}>+ Item</button>
 				<button @click=${self.remove_list}>- List</button>
 			</div>