From 56e849729dfdba2f0719364d12aae460c45bfff5 Mon Sep 17 00:00:00 2001
From: Anton <mail@antontranelis.de>
Date: Mon, 15 Jan 2024 13:05:55 +0100
Subject: [PATCH] youtube video support

---
 package-lock.json                             |   9 ++
 package.json                                  |   1 +
 .../ItemPopupComponents/TextView.tsx          | 143 ++++++++++--------
 3 files changed, 92 insertions(+), 61 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fe59b2d8..c167ed82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "react-leaflet-cluster": "^2.1.0",
         "react-markdown": "^9.0.1",
         "react-router-dom": "^6.16.0",
+        "react-string-replace": "^1.1.1",
         "react-toastify": "^9.1.3",
         "rehype-video": "^2.0.2",
         "tributejs": "^5.1.3",
@@ -4890,6 +4891,14 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-string-replace": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-1.1.1.tgz",
+      "integrity": "sha512-26TUbLzLfHQ5jO5N7y3Mx88eeKo0Ml0UjCQuX4BMfOd/JX+enQqlKpL1CZnmjeBRvQE8TR+ds9j1rqx9CxhKHQ==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/react-toastify": {
       "version": "9.1.3",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
diff --git a/package.json b/package.json
index a88aa5d0..4ba7c666 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "react-leaflet-cluster": "^2.1.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.16.0",
+    "react-string-replace": "^1.1.1",
     "react-toastify": "^9.1.3",
     "rehype-video": "^2.0.2",
     "tributejs": "^5.1.3",
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
index c8723382..24efd282 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
@@ -11,85 +11,90 @@ export const TextView = ({ item }: { item?: Item }) => {
   const tags = useTags();
   const addFilterTag = useAddFilterTag();
 
-  let replacedText;  
+  let replacedText;
 
   if (item && item.text) replacedText = fixUrls(item.text);
 
   replacedText = replacedText.replace(/(?<!\]?\()https?:\/\/[^\s\)]+(?!\))/g, (url) => {
-    let  shortUrl =  url;  
+    let shortUrl = url;
     if (url.match('^https:\/\/')) {
       shortUrl = url.split('https://')[1];
     }
     if (url.match('^http:\/\/')) {
       shortUrl = url.split('http://')[1];
-    }    
+    }
     return `[${shortUrl}](${url})`
-  })  
+  })
 
-replacedText = replacedText.replace(mailRegex, (url) => {
-  return `[${url}](mailto:${url})`
-})
+  replacedText = replacedText.replace(mailRegex, (url) => {
+    return `[${url}](mailto:${url})`
+  })
 
-replacedText = replacedText.replace(hashTagRegex, (match) => {
-  return `[${match}](${match})`
-})
+  replacedText = replacedText.replace(hashTagRegex, (match) => {
+    return `[${match}](${match})`
+  })
 
 
-const CustomH1 = ({ children }) => (
-  <h1 className="tw-text-xl tw-font-bold">{children}</h1>
-);
-const CustomH2 = ({ children }) => (
-  <h2 className="tw-text-lg tw-font-bold">{children}</h2>
-);
-const CustomH3 = ({ children }) => (
-  <h3 className="tw-text-base tw-font-bold">{children}</h3>
-);
-const CustomH4 = ({ children }) => (
-  <h4 className="tw-text-base tw-font-bold">{children}</h4>
-);
-const CustomH5 = ({ children }) => (
-  <h5 className="tw-text-sm tw-font-bold">{children}</h5>
-);
-const CustomH6 = ({ children }) => (
-  <h6 className="tw-text-sm tw-font-bold">{children}</h6>
-);
-const CustomParagraph = ({ children }) => (
-  <p className="!tw-my-1">{children}</p>
-);
-const CustomUnorderdList = ({ children }) => (
-  <ul className="tw-list-disc tw-list-inside">{children}</ul>
-);
-const CustomOrderdList = ({ children }) => (
-  <ol className="tw-list-decimal tw-list-inside">{children}</ol>
-);
-const CustomImage = ({ alt, src, title }) => (
+
+  const CustomH1 = ({ children }) => (
+    <h1 className="tw-text-xl tw-font-bold">{children}</h1>
+  );
+  const CustomH2 = ({ children }) => (
+    <h2 className="tw-text-lg tw-font-bold">{children}</h2>
+  );
+  const CustomH3 = ({ children }) => (
+    <h3 className="tw-text-base tw-font-bold">{children}</h3>
+  );
+  const CustomH4 = ({ children }) => (
+    <h4 className="tw-text-base tw-font-bold">{children}</h4>
+  );
+  const CustomH5 = ({ children }) => (
+    <h5 className="tw-text-sm tw-font-bold">{children}</h5>
+  );
+  const CustomH6 = ({ children }) => (
+    <h6 className="tw-text-sm tw-font-bold">{children}</h6>
+  );
+  const CustomParagraph = ({ children }) => (
+    <p className="!tw-my-1">{children}</p>
+  );
+  const CustomUnorderdList = ({ children }) => (
+    <ul className="tw-list-disc tw-list-inside">{children}</ul>
+  );
+  const CustomOrderdList = ({ children }) => (
+    <ol className="tw-list-decimal tw-list-inside">{children}</ol>
+  );
+  const CustomImage = ({ alt, src, title }) => (
     <img
       className="max-w-full rounded-lg shadow-md"
       src={src}
       alt={alt}
       title={title}
     />
-);
-const CustomExternalLink = ({ href, children }) => (
-  <a
-    href={href}
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    {children}
-  </a>
-);
-const CustomHashTagLink = ({ children, tag, item }) => (
-<a 
-    style={{ color: tag ? tag.color : '#faa' , fontWeight: 'bold', cursor: 'pointer' }}
-    key={tag ? tag.id+item!.id  : item.id}
-    onClick={(e) => {
-      e.stopPropagation(); 
-      addFilterTag(tag!);
-     // map.fitBounds(items)
-     // map.closePopup();
-    }}>{children}</a>
-);
+  );
+  const CustomExternalLink = ({ href, children }) => (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  );
+  const CustomHashTagLink = ({ children, tag, item }) => (
+    <a
+      style={{ color: tag ? tag.color : '#faa', fontWeight: 'bold', cursor: 'pointer' }}
+      key={tag ? tag.id + item!.id : item.id}
+      onClick={(e) => {
+        e.stopPropagation();
+        addFilterTag(tag!);
+        // map.fitBounds(items)
+        // map.closePopup();
+      }}>{children}</a>
+  );
+
+  const isSpecialYouTubeLink = (url) => {
+    return /(?<=!\()[^)]+(?=\))/g.test(url);
+  };
 
 
   return (
@@ -97,8 +102,24 @@ const CustomHashTagLink = ({ children, tag, item }) => (
     <Markdown rehypePlugins={[rehypeVideo]} components={{
       p: CustomParagraph,
       a: ({ href, children }) => {
-        if (href?.startsWith("#")) {          
-          const tag = tags.find(t => t.id.toLowerCase() == href.slice(1).toLowerCase())          
+        // Prüft, ob der Link ein YouTube-Video ist
+        const isYouTubeVideo = href?.startsWith('https://www.youtube.com/watch?v=');
+
+        if (isYouTubeVideo) {
+          const videoId = href?.split('v=')[1].split('&')[0]; // Extrahiert die Video-ID aus der URL
+          const youtubeEmbedUrl = `https://www.youtube-nocookie.com/embed/${videoId}`;
+
+          return (
+
+              <iframe className='tw-w-full'
+                src={youtubeEmbedUrl}
+                allowFullScreen
+              />
+
+          );
+        }
+        if (href?.startsWith("#")) {
+          const tag = tags.find(t => t.id.toLowerCase() == href.slice(1).toLowerCase())
           return <CustomHashTagLink tag={tag} item={item}>{children}</CustomHashTagLink>;
         } else {
           return (