From e5f8bebb538ab31b1939c6b221b6a30505d7302b Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Fri, 16 Feb 2024 10:44:08 +0200
Subject: [PATCH] iframes broken on some browsers, show link url

---
 .../src/Components/Embed/AppleMusicEmbed.tsx  | 24 ++++++++++-------
 .../app/src/Components/Embed/HyperText.tsx    | 27 +++++++++++--------
 .../src/Components/Embed/MixCloudEmbed.tsx    |  3 +++
 .../src/Components/Embed/SoundCloudEmded.tsx  | 22 +++++++++------
 .../app/src/Components/Embed/SpotifyEmbed.tsx | 26 +++++++++++-------
 .../app/src/Components/Embed/TidalEmbed.tsx   | 14 ++++++++--
 .../app/src/Components/Embed/TwitchEmbed.tsx  | 19 ++++++++-----
 .../app/src/Components/Embed/WavlakeEmbed.tsx | 24 ++++++++++-------
 packages/app/src/Components/Event/Thread.tsx  |  1 -
 packages/app/src/Pages/Layout/index.tsx       |  2 +-
 .../src/Pages/Notifications/Notifications.tsx |  2 --
 11 files changed, 104 insertions(+), 60 deletions(-)

diff --git a/packages/app/src/Components/Embed/AppleMusicEmbed.tsx b/packages/app/src/Components/Embed/AppleMusicEmbed.tsx
index 307c5110..242e4d05 100644
--- a/packages/app/src/Components/Embed/AppleMusicEmbed.tsx
+++ b/packages/app/src/Components/Embed/AppleMusicEmbed.tsx
@@ -3,15 +3,21 @@ const AppleMusicEmbed = ({ link }: { link: string }) => {
   const isSongLink = /\?i=\d+$/.test(convertedUrl);
 
   return (
-    <iframe
-      allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
-      frameBorder="0"
-      // eslint-disable-next-line react/no-unknown-property
-      credentialless=""
-      height={isSongLink ? 175 : 450}
-      style={{ width: "100%", maxWidth: 660, overflow: "hidden", background: "transparent" }}
-      sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"
-      src={convertedUrl}></iframe>
+    <>
+      <iframe
+        allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
+        frameBorder="0"
+        // eslint-disable-next-line react/no-unknown-property
+        credentialless=""
+        height={isSongLink ? 175 : 450}
+        style={{ width: "100%", maxWidth: 660, overflow: "hidden", background: "transparent" }}
+        sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"
+        src={convertedUrl}
+      />
+      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
+        {link}
+      </a>
+    </>
   );
 };
 
diff --git a/packages/app/src/Components/Embed/HyperText.tsx b/packages/app/src/Components/Embed/HyperText.tsx
index aa9e514d..6d73cc87 100644
--- a/packages/app/src/Components/Embed/HyperText.tsx
+++ b/packages/app/src/Components/Embed/HyperText.tsx
@@ -46,17 +46,22 @@ export default function HyperText({ link, depth, showLinkPreview, children }: Hy
 
     if (youtubeId) {
       return (
-        <iframe
-          // eslint-disable-next-line react/no-unknown-property
-          credentialless=""
-          className="-mx-4 md:mx-0 w-max my-2"
-          src={`https://www.youtube.com/embed/${youtubeId}`}
-          title="YouTube video player"
-          key={youtubeId}
-          frameBorder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-          allowFullScreen={true}
-        />
+        <>
+          <iframe
+            // eslint-disable-next-line react/no-unknown-property
+            credentialless=""
+            className="-mx-4 md:mx-0 w-max my-2"
+            src={`https://www.youtube.com/embed/${youtubeId}`}
+            title="YouTube video player"
+            key={youtubeId}
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen={true}
+          />
+          <a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
+            {a}
+          </a>
+        </>
       );
     } else if (tidalId) {
       return <TidalEmbed link={a} />;
diff --git a/packages/app/src/Components/Embed/MixCloudEmbed.tsx b/packages/app/src/Components/Embed/MixCloudEmbed.tsx
index ee4f2c0d..849f8563 100644
--- a/packages/app/src/Components/Embed/MixCloudEmbed.tsx
+++ b/packages/app/src/Components/Embed/MixCloudEmbed.tsx
@@ -18,6 +18,9 @@ const MixCloudEmbed = ({ link }: { link: string }) => {
         frameBorder="0"
         src={`https://www.mixcloud.com/widget/iframe/?hide_cover=1&${lightParams}&feed=%2F${feedPath}%2F`}
       />
+      <a href={link} target="_blank" rel="noreferrer">
+        {link}
+      </a>
     </>
   );
 };
diff --git a/packages/app/src/Components/Embed/SoundCloudEmded.tsx b/packages/app/src/Components/Embed/SoundCloudEmded.tsx
index f1eff848..7b86441c 100644
--- a/packages/app/src/Components/Embed/SoundCloudEmded.tsx
+++ b/packages/app/src/Components/Embed/SoundCloudEmded.tsx
@@ -1,13 +1,19 @@
 const SoundCloudEmbed = ({ link }: { link: string }) => {
   return (
-    <iframe
-      // eslint-disable-next-line react/no-unknown-property
-      credentialless=""
-      width="100%"
-      height="166"
-      scrolling="no"
-      allow="autoplay"
-      src={`https://w.soundcloud.com/player/?url=${link}`}></iframe>
+    <>
+      <iframe
+        // eslint-disable-next-line react/no-unknown-property
+        credentialless=""
+        width="100%"
+        height="166"
+        scrolling="no"
+        allow="autoplay"
+        src={`https://w.soundcloud.com/player/?url=${link}`}
+      />
+      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
+        {link}
+      </a>
+    </>
   );
 };
 
diff --git a/packages/app/src/Components/Embed/SpotifyEmbed.tsx b/packages/app/src/Components/Embed/SpotifyEmbed.tsx
index d49b0f04..1587951a 100644
--- a/packages/app/src/Components/Embed/SpotifyEmbed.tsx
+++ b/packages/app/src/Components/Embed/SpotifyEmbed.tsx
@@ -2,16 +2,22 @@ const SpotifyEmbed = ({ link }: { link: string }) => {
   const convertedUrl = link.replace(/\/(track|album|playlist|episode)\/([a-zA-Z0-9]+)/, "/embed/$1/$2");
 
   return (
-    <iframe
-      // eslint-disable-next-line react/no-unknown-property
-      credentialless=""
-      style={{ borderRadius: 12 }}
-      src={convertedUrl}
-      width="100%"
-      height="352"
-      frameBorder="0"
-      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-      loading="lazy"></iframe>
+    <>
+      <iframe
+        // eslint-disable-next-line react/no-unknown-property
+        credentialless=""
+        style={{ borderRadius: 12 }}
+        src={convertedUrl}
+        width="100%"
+        height="352"
+        frameBorder="0"
+        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+        loading="lazy"
+      />
+      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
+        {link}
+      </a>
+    </>
   );
 };
 
diff --git a/packages/app/src/Components/Embed/TidalEmbed.tsx b/packages/app/src/Components/Embed/TidalEmbed.tsx
index 50657166..ed435f1d 100644
--- a/packages/app/src/Components/Embed/TidalEmbed.tsx
+++ b/packages/app/src/Components/Embed/TidalEmbed.tsx
@@ -53,8 +53,18 @@ const TidalEmbed = ({ link }: { link: string }) => {
       </a>
     );
   }
-  // eslint-disable-next-line react/no-unknown-property
-  return <iframe src={source} style={extraStyles} width="100%" title="TIDAL Embed" frameBorder={0} credentialless="" />;
+  const iframe = (
+    // eslint-disable-next-line react/no-unknown-property
+    <iframe src={source} style={extraStyles} width="100%" title="TIDAL Embed" frameBorder={0} credentialless="" />
+  );
+  return (
+    <>
+      {iframe}
+      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
+        {link}
+      </a>
+    </>
+  );
 };
 
 export default TidalEmbed;
diff --git a/packages/app/src/Components/Embed/TwitchEmbed.tsx b/packages/app/src/Components/Embed/TwitchEmbed.tsx
index 85cba955..df979b99 100644
--- a/packages/app/src/Components/Embed/TwitchEmbed.tsx
+++ b/packages/app/src/Components/Embed/TwitchEmbed.tsx
@@ -3,13 +3,18 @@ const TwitchEmbed = ({ link }: { link: string }) => {
 
   const args = `?channel=${channel}&parent=${window.location.hostname}&muted=true`;
   return (
-    <iframe
-      src={`https://player.twitch.tv/${args}`}
-      className="w-max"
-      allowFullScreen={true}
-      // eslint-disable-next-line react/no-unknown-property
-      credentialless=""
-    />
+    <>
+      <iframe
+        src={`https://player.twitch.tv/${args}`}
+        className="w-max"
+        allowFullScreen={true}
+        // eslint-disable-next-line react/no-unknown-property
+        credentialless=""
+      />
+      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
+        {link}
+      </a>
+    </>
   );
 };
 
diff --git a/packages/app/src/Components/Embed/WavlakeEmbed.tsx b/packages/app/src/Components/Embed/WavlakeEmbed.tsx
index 278aef51..3069c0c5 100644
--- a/packages/app/src/Components/Embed/WavlakeEmbed.tsx
+++ b/packages/app/src/Components/Embed/WavlakeEmbed.tsx
@@ -2,15 +2,21 @@ const WavlakeEmbed = ({ link }: { link: string }) => {
   const convertedUrl = link.replace(/(?:player\.|www\.)?wavlake\.com/, "embed.wavlake.com");
 
   return (
-    <iframe
-      // eslint-disable-next-line react/no-unknown-property
-      credentialless=""
-      style={{ borderRadius: 12 }}
-      src={convertedUrl}
-      width="100%"
-      height="380"
-      frameBorder="0"
-      loading="lazy"></iframe>
+    <>
+      <iframe
+        // eslint-disable-next-line react/no-unknown-property
+        credentialless=""
+        style={{ borderRadius: 12 }}
+        src={convertedUrl}
+        width="100%"
+        height="380"
+        frameBorder="0"
+        loading="lazy"
+      />
+      <a href={link} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="ext">
+        {link}
+      </a>
+    </>
   );
 };
 
diff --git a/packages/app/src/Components/Event/Thread.tsx b/packages/app/src/Components/Event/Thread.tsx
index b5c51d2a..e1914508 100644
--- a/packages/app/src/Components/Event/Thread.tsx
+++ b/packages/app/src/Components/Event/Thread.tsx
@@ -10,7 +10,6 @@ import BackButton from "@/Components/Button/BackButton";
 import Collapsed from "@/Components/Collapsed";
 import Note from "@/Components/Event/EventComponent";
 import NoteGhost from "@/Components/Event/Note/NoteGhost";
-import ScrollToTop from "@/Components/ScrollToTop";
 import { chainKey } from "@/Utils/Thread/ChainKey";
 import { ThreadContext } from "@/Utils/Thread/ThreadContext";
 import { ThreadContextWrapper } from "@/Utils/Thread/ThreadContextWrapper";
diff --git a/packages/app/src/Pages/Layout/index.tsx b/packages/app/src/Pages/Layout/index.tsx
index 61daf820..fcf2a793 100644
--- a/packages/app/src/Pages/Layout/index.tsx
+++ b/packages/app/src/Pages/Layout/index.tsx
@@ -6,6 +6,7 @@ import { Outlet, useLocation } from "react-router-dom";
 import CloseButton from "@/Components/Button/CloseButton";
 import ErrorBoundary from "@/Components/ErrorBoundary";
 import { LoginUnlock } from "@/Components/PinPrompt/PinPrompt";
+import ScrollToTop from "@/Components/ScrollToTop";
 import Toaster from "@/Components/Toaster/Toaster";
 import useLoginFeed from "@/Feed/LoginFeed";
 import { useCommunityLeaders } from "@/Hooks/useCommunityLeaders";
@@ -20,7 +21,6 @@ import { LoginStore } from "@/Utils/Login";
 
 import NavSidebar from "./NavSidebar";
 import RightColumn from "./RightColumn";
-import ScrollToTop from "@/Components/ScrollToTop";
 
 export default function Index() {
   const location = useLocation();
diff --git a/packages/app/src/Pages/Notifications/Notifications.tsx b/packages/app/src/Pages/Notifications/Notifications.tsx
index 857267ea..c6d7e3e1 100644
--- a/packages/app/src/Pages/Notifications/Notifications.tsx
+++ b/packages/app/src/Pages/Notifications/Notifications.tsx
@@ -15,8 +15,6 @@ import { getNotificationContext } from "./getNotificationContext";
 import { NotificationGroup } from "./NotificationGroup";
 const NotificationGraph = lazy(() => import("@/Pages/Notifications/NotificationChart"));
 
-import ScrollToTop from "@/Components/ScrollToTop";
-
 export default function NotificationsPage({ onClick }: { onClick?: (link: NostrLink) => void }) {
   const login = useLogin();
   const { isMuted } = useModeration();