From 9dfbb527688ecaa026e4276e78d62ee2e404aa0d Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 6 Jan 2023 18:00:33 +0100
Subject: [PATCH 1/2] feat: embed youtube videos

---
 public/index.html |  2 +-
 src/Text.js       | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index a8cdd9b..e34664d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,7 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Fast nostr web ui" />
   <meta http-equiv="Content-Security-Policy"
-    content="default-src 'self'; child-src 'none'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; connect-src wss://* 'self' https://*; img-src * data:; font-src https://fonts.gstatic.com; media-src *; script-src 'self' https://static.cloudflareinsights.com;" />
+    content="default-src 'self'; child-src 'none'; frame-src youtube.com www.youtube.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; connect-src wss://* 'self' https://*; img-src * data:; font-src https://fonts.gstatic.com; media-src *; script-src 'self' https://static.cloudflareinsights.com;" />
 
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/nostrich_512.png" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
diff --git a/src/Text.js b/src/Text.js
index d8c9055..8107d3d 100644
--- a/src/Text.js
+++ b/src/Text.js
@@ -10,8 +10,10 @@ export function extractLinks(fragments) {
             return f.split(UrlRegex).map(a => {
                 if (a.startsWith("http")) {
                     try {
-                        let url = new URL(a);
-                        let ext = url.pathname.toLowerCase().match(FileExtensionRegex);
+                        const url = new URL(a);
+                        const vParam = url.searchParams.get('v')
+                        const isYoutube = (url.host === "www.youtube.com" || url.host === "youtube.com" ) && vParam
+                        const ext = url.pathname.toLowerCase().match(FileExtensionRegex);
                         if (ext) {
                             switch (ext[1]) {
                                 case "gif":
@@ -30,6 +32,16 @@ export function extractLinks(fragments) {
                                     return <video key={url} src={url} controls />
                                 }
                             }
+                        } else if (isYoutube) {
+                            return (
+                              <iframe
+                                src={`https://www.youtube.com/embed/${vParam}`}
+                                title="YouTube video player"
+                                frameborder="0"
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                allowfullscreen=""
+                              />
+                            )
                         } else {
                             return <a key={url} href={url}>{url.toString()}</a>
                         }

From 11c5dc0cf6e53897f3757c4a8de18400961798dc Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 6 Jan 2023 21:38:51 +0100
Subject: [PATCH 2/2] refactor youtube link handling

---
 src/Const.js         |  7 +++-
 src/Text.js          | 90 ++++++++++++++++++++++++--------------------
 src/element/Note.css |  6 ++-
 src/pages/Login.js   |  1 -
 4 files changed, 61 insertions(+), 43 deletions(-)

diff --git a/src/Const.js b/src/Const.js
index cc7c7ed..13ba72e 100644
--- a/src/Const.js
+++ b/src/Const.js
@@ -56,4 +56,9 @@ export const MentionRegex = /(#\[\d+\])/gi;
 /**
  * Simple lightning invoice regex
  */
-export const InvoiceRegex = /(lnbc\w+)/i;
\ No newline at end of file
+export const InvoiceRegex = /(lnbc\w+)/i;
+
+/**
+ * YouTube URL regex
+ */
+export const YoutubeUrlRegex = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
diff --git a/src/Text.js b/src/Text.js
index 8107d3d..2dc7723 100644
--- a/src/Text.js
+++ b/src/Text.js
@@ -1,53 +1,63 @@
 import { Link } from "react-router-dom";
 
 import Invoice from "./element/Invoice";
-import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex } from "./Const";
+import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex } from "./Const";
 import { eventLink, profileLink } from "./Util";
 
+function transformHttpLink(a) {
+    try {
+        const url = new URL(a);
+        const vParam = url.searchParams.get('v')
+        const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1
+        const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1
+        if (extension) {
+            switch (extension) {
+                case "gif":
+                case "jpg":
+                case "jpeg":
+                case "png":
+                case "bmp":
+                case "webp": {
+                    return <img key={url} src={url} />;
+                }
+                case "mp4":
+                case "mov":
+                case "mkv":
+                case "avi":
+                case "m4v": {
+                    return <video key={url} src={url} controls />
+                }
+              default:
+                return <a key={url} href={url}>{url.toString()}</a>
+            }
+        } else if (youtubeId) {
+            return (
+              <>
+                <br />
+                <iframe
+                  src={`https://www.youtube.com/embed/${youtubeId}`}
+                  title="YouTube video player"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen=""
+                />
+                <br />
+              </>
+            )
+        } else {
+            return <a key={url} href={url}>{url.toString()}</a>
+        }
+    } catch (e) {
+        console.warn(`Not a valid url: ${a}`);
+    }
+}
+
 export function extractLinks(fragments) {
     return fragments.map(f => {
         if (typeof f === "string") {
             return f.split(UrlRegex).map(a => {
                 if (a.startsWith("http")) {
-                    try {
-                        const url = new URL(a);
-                        const vParam = url.searchParams.get('v')
-                        const isYoutube = (url.host === "www.youtube.com" || url.host === "youtube.com" ) && vParam
-                        const ext = url.pathname.toLowerCase().match(FileExtensionRegex);
-                        if (ext) {
-                            switch (ext[1]) {
-                                case "gif":
-                                case "jpg":
-                                case "jpeg":
-                                case "png":
-                                case "bmp":
-                                case "webp": {
-                                    return <img key={url} src={url} />;
-                                }
-                                case "mp4":
-                                case "mov":
-                                case "mkv":
-                                case "avi":
-                                case "m4v": {
-                                    return <video key={url} src={url} controls />
-                                }
-                            }
-                        } else if (isYoutube) {
-                            return (
-                              <iframe
-                                src={`https://www.youtube.com/embed/${vParam}`}
-                                title="YouTube video player"
-                                frameborder="0"
-                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                                allowfullscreen=""
-                              />
-                            )
-                        } else {
-                            return <a key={url} href={url}>{url.toString()}</a>
-                        }
-                    } catch (e) {
-                        console.warn(`Not a valid url: ${a}`);
-                    }
+                  return transformHttpLink(a)
                 }
                 return a;
             });
diff --git a/src/element/Note.css b/src/element/Note.css
index 57ce054..6c618a2 100644
--- a/src/element/Note.css
+++ b/src/element/Note.css
@@ -22,11 +22,15 @@
     word-break: normal;
 }
 
-.note > .body > img, .note > .body > video  {
+.note > .body > img, .note > .body > video, .note > .body > iframe {
     max-width: 100%;
     max-height: 500px;
 }
 
+.note > .body > iframe {
+  margin: 10px 0;
+}
+
 .note > .header > img:hover, .note > .header > .name > .reply:hover, .note > .body:hover {
     cursor: pointer;
 }
diff --git a/src/pages/Login.js b/src/pages/Login.js
index 288e319..95ec9ec 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import * as secp from '@noble/secp256k1';
-import { bech32 } from "bech32";
 
 import { setPrivateKey, setPublicKey } from "../state/Login";
 import { EmailRegex } from "../Const";