diff --git a/src/Const.js b/src/Const.js
index cc7c7ed5..13ba72ee 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 8107d3d6..2dc7723a 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 ;
+ }
+ case "mp4":
+ case "mov":
+ case "mkv":
+ case "avi":
+ case "m4v": {
+ return
+ }
+ default:
+ return {url.toString()}
+ }
+ } else if (youtubeId) {
+ return (
+ <>
+
+
+
+ >
+ )
+ } else {
+ return {url.toString()}
+ }
+ } 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 ;
- }
- case "mp4":
- case "mov":
- case "mkv":
- case "avi":
- case "m4v": {
- return
- }
- }
- } else if (isYoutube) {
- return (
-
- )
- } else {
- return {url.toString()}
- }
- } 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 57ce054d..6c618a22 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 288e319e..95ec9ec1 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";