refactor youtube link handling

src/Const.js

@@ -57,3 +57,8 @@ export const MentionRegex = /(#\[\d+\])/gi;
  * Simple lightning invoice regex
  */
 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+)?$/

src/Text.js

@@ -1,21 +1,17 @@
 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";
 
-export function extractLinks(fragments) {
+function transformHttpLink(a) {
-    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 youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1
-                        const ext = url.pathname.toLowerCase().match(FileExtensionRegex);
+        const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1
-                        if (ext) {
+        if (extension) {
-                            switch (ext[1]) {
+            switch (extension) {
                 case "gif":
                 case "jpg":
                 case "jpeg":
@@ -31,16 +27,22 @@ export function extractLinks(fragments) {
                 case "m4v": {
                     return <video key={url} src={url} controls />
                 }
+              default:
+                return <a key={url} href={url}>{url.toString()}</a>
             }
-                        } else if (isYoutube) {
+        } else if (youtubeId) {
             return (
+              <>
+                <br />
                 <iframe
-                                src={`https://www.youtube.com/embed/${vParam}`}
+                  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>
@@ -48,6 +50,14 @@ export function extractLinks(fragments) {
     } 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")) {
+                  return transformHttpLink(a)
                 }
                 return a;
             });

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;
 }

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";