From 2731f74fd7d9b90a7d2813d62c0ba071bf83e12c Mon Sep 17 00:00:00 2001
From: gsovereignty <gsovereignty@proton.me>
Date: Mon, 29 Apr 2024 23:53:50 +1000
Subject: [PATCH] problem: can't view videos

---
 src/lib/components/RenderNoteContent.svelte | 40 ++++++++++--
 src/lib/views/messages/Kind1.svelte         | 69 ---------------------
 2 files changed, 35 insertions(+), 74 deletions(-)
 delete mode 100644 src/lib/views/messages/Kind1.svelte

diff --git a/src/lib/components/RenderNoteContent.svelte b/src/lib/components/RenderNoteContent.svelte
index 375263d..f9135ef 100644
--- a/src/lib/components/RenderNoteContent.svelte
+++ b/src/lib/components/RenderNoteContent.svelte
@@ -2,22 +2,39 @@
 	import DOMPurify from 'dompurify';
 	export let inputString = '';
 
+	function extractYouTubeVideoID(url: string) {
+		const regex =
+			/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+		const match = url.match(regex);
+		if (match && match[1]) {
+			return match[1];
+		}
+		return undefined;
+	}
+
 	// Format the input string: replaces line breaks with <br> tags and image URLs with <img> tags
 	function formatInput(input: string) {
 		//ethically cleanse the input
 		input = DOMPurify.sanitize(input);
 
 		// replace newline characters with <br> tags
-		let formattedInput = input.replace(/(\r\n|\n|\r)/gm, '<br>');
+		let formattedInput = input.replace(/(\r\n|\n|\r)/gm, ' <br /> ');
 
 		const nostr = /nostr:\S+/g;
 
-		formattedInput = formattedInput.replace(nostr, (s)=>{
-			s = s.replace("nostr:", "");
-			return ` <a class="underline decoration-solid text-sky-500" href="https://njump.me/${s}">njump</a> ` //todo: render mentioned notes inline, render usernames for npubs, 
+		formattedInput = formattedInput.replace(nostr, (s) => {
+			s = s.replace('nostr:', '');
+			return ` <a class="underline decoration-solid text-sky-500" href="https://njump.me/${s}">njump</a> `; //todo: render mentioned notes inline, render usernames for npubs,
+		});
+
+		// regex to find video URLs
+		const vurlRegex = /https?:\/\/\S+\.(mp4)\b/g;
+
+		formattedInput = formattedInput.replace(vurlRegex, (url) => {
+			return `<video src="${url}" style="max-width: 98%; height: auto;" class="m-2 rounded">`;
 		});
 
-		// regex to find URLs
+		// regex to find image URLs
 		const urlRegex = /https?:\/\/\S+\.(jpg|jpeg|png|gif|svg)\b/g;
 
 		// Replace image URLs with <img> tags
@@ -25,6 +42,19 @@
 			return `<img src="${url}" alt="${url}" style="max-width: 98%; height: auto;" class="m-2 rounded">`;
 		});
 
+		const ytRegex =
+			/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+
+		formattedInput = formattedInput.replace(ytRegex, (url) => {
+			let ytID = extractYouTubeVideoID(url);
+			if (ytID) {
+				return `<iframe id="ytplayer" width="auto" height="300"
+  src="https://www.youtube.com/embed/${ytID}?autoplay=0"
+  frameborder="0"></iframe>`;
+			}
+			return '<br /><p>FAILED TO GET YT VIDEO</p><br />';
+		});
+
 		return formattedInput;
 	}
 </script>
diff --git a/src/lib/views/messages/Kind1.svelte b/src/lib/views/messages/Kind1.svelte
deleted file mode 100644
index 99ffbcf..0000000
--- a/src/lib/views/messages/Kind1.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-	import type { EventTreeItem } from '@/workers/firehose.types';
-	import { type Writable } from 'svelte/store';
-	import RenderNoteContent from '../../lib/components/RenderNoteContent.svelte';
-	import Reply from './Reply.svelte';
-	import Zap from './Zap.svelte';
-	import Marcus from './Marcus.svelte';
-	export let treeItem: EventTreeItem;
-	export let newParent: Writable<string[]>;
-	let t: [string, EventTreeItem][];
-	$: {
-		let _t = [...treeItem.children.entries()].toSorted((_a, _b): number => {
-			let [_, a] = _a;
-			let [__, b] = _b;
-			return b.children.size - a.children.size;
-		});
-
-		t = _t.filter(([id, item]) => {
-			return item.event.kind == 1;
-		});
-	}
-</script>
-<div class="mt-2"></div>
-{#each t as [id, tree], i (id)}
-	<div class="w-full">
-		<div class="grid">
-			<div class="flex gap-2">
-				<img
-					class="w-8 h-8 rounded-full"
-					src="https://zenquotes.io/img/marcus-aurelius.jpg"
-					alt="profile pic"
-				/>
-				<div class="grid">
-					<h5 class="text-gray-900 dark:text-orange-600 font-semibold leading-snug pb-1">Marcus</h5>
-					<div class="grid overflow-hidden mr-2">
-						<div class="px-3.5 py-2 bg-gray-200 dark:bg-gray-700 rounded-e-xl rounded-es-xl flex flex-col gap-2">
-							<h5 class="text-sm font-normal text-gray-900 dark:text-white py-2">
-								<RenderNoteContent inputString={tree.event.content} />
-							</h5>
-							<div class="flex justify-between">
-								<div><Marcus onclick={()=>{alert("implement me!")}} {tree} /></div>
-
-								<div>
-									<Zap onclick={()=>{alert("implement me!")}} {tree}/>
-									<Reply
-										onclick={() => {
-											console.log(48);
-											newParent.update((existing) => {
-												existing.push(id);
-												return existing;
-											});
-										}}
-										{tree}
-									/>
-								</div>
-							</div>
-						</div>
-						<div class="justify-end items-center inline-flex mb-2.5">
-							<h6 class="text-gray-500 text-xs font-normal leading-4 py-1">
-								{new Date(tree.event.created_at * 1000).toLocaleString()}
-							</h6>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
-{/each}