From 037bf858c09cdefc2005e1f106a1b80fb8021f3e Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 9 Sep 2023 11:02:23 +0200
Subject: [PATCH 1/6] memoize VerifiedAuthor

---
 src/components/VerifiedAuthor.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/VerifiedAuthor.jsx b/src/components/VerifiedAuthor.jsx
index 5a832381..6f54c593 100644
--- a/src/components/VerifiedAuthor.jsx
+++ b/src/components/VerifiedAuthor.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import {useComment, useAuthorAddress} from '@plebbit/plebbit-react-hooks';
 
 function VerifiedAuthor({ commentCid, children }) {
@@ -7,4 +8,4 @@ function VerifiedAuthor({ commentCid, children }) {
   return children({ authorAddress, shortAuthorAddress });
 }
 
-export default VerifiedAuthor;
\ No newline at end of file
+export default React.memo(VerifiedAuthor);
\ No newline at end of file

From 232d869fc82d7abea8221c9f382faac4a5feefdb Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 9 Sep 2023 17:09:09 +0200
Subject: [PATCH 2/6] fix embedded media, add new sites

---
 src/components/Embed.jsx                     | 259 +++++++++++++++++++
 src/components/styled/GlobalStyle.styled.jsx |  45 +++-
 src/components/views/Board.jsx               | 180 +++++++------
 src/utils/getCommentMediaInfo.js             |  45 +---
 yarn.lock                                    | 186 +------------
 5 files changed, 412 insertions(+), 303 deletions(-)
 create mode 100644 src/components/Embed.jsx

diff --git a/src/components/Embed.jsx b/src/components/Embed.jsx
new file mode 100644
index 00000000..5629c2e7
--- /dev/null
+++ b/src/components/Embed.jsx
@@ -0,0 +1,259 @@
+const Embed = ({url}) => {
+  const parsedUrl = new URL(url);
+
+  if (youtubeHosts.has(parsedUrl.host)) {
+    return <YoutubeEmbed parsedUrl={parsedUrl} />;
+  }
+  if (twitterHosts.has(parsedUrl.host)) {
+    return <TwitterEmbed parsedUrl={parsedUrl} />;
+  }
+  if (redditHosts.has(parsedUrl.host)) {
+    return <RedditEmbed parsedUrl={parsedUrl} />;
+  }
+  if (twitchHosts.has(parsedUrl.host)) {
+    return <TwitchEmbed parsedUrl={parsedUrl} />;
+  }
+  if (tiktokHosts.has(parsedUrl.host)) {
+    return <TiktokEmbed parsedUrl={parsedUrl} />;
+  }
+  if (instagramHosts.has(parsedUrl.host)) {
+    return <InstagramEmbed parsedUrl={parsedUrl} />;
+  }
+  if (odyseeHosts.has(parsedUrl.host)) {
+    return <OdyseeEmbed parsedUrl={parsedUrl} />;
+  }
+  if (bitchuteHosts.has(parsedUrl.host)) {
+    return <BitchuteEmbed parsedUrl={parsedUrl} />;
+  }
+  if (streamableHosts.has(parsedUrl.host)) {
+    return <StreamableEmbed parsedUrl={parsedUrl} />;
+  }
+  if (spotifyHosts.has(parsedUrl.host)) {
+    return <SpotifyEmbed parsedUrl={parsedUrl} />;
+  }
+};
+
+const youtubeHosts = new Set(['youtube.com', 'www.youtube.com', 'youtu.be', 'www.youtu.be']);
+
+const YoutubeEmbed = ({parsedUrl}) => {
+  let youtubeId;
+  if (parsedUrl.host.endsWith('youtu.be')) {
+    youtubeId = parsedUrl.pathname.replaceAll('/', '');
+  }
+  else {
+    youtubeId = parsedUrl.searchParams.get('v');
+  }
+  return <iframe 
+    className='enlarged youtube-embed'
+    height="100%"
+    width="100%"
+    frameborder="0" 
+    credentialless
+    referrerpolicy='no-referrer'
+    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    allowfullscreen
+    title={parsedUrl.href}
+    src={`https://www.youtube.com/embed/${youtubeId}`}
+  />;
+};
+
+const twitterHosts = new Set(['twitter.com', 'www.twitter.com', 'x.com', 'www.x.com']);
+
+const TwitterEmbed = ({parsedUrl}) => {
+  return <iframe 
+    className='enlarged twitter-embed'
+    height="100%"
+    width="100%"
+    frameborder="0" 
+    credentialless
+    referrerpolicy='no-referrer'
+    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    title={parsedUrl.href}
+    srcdoc={`
+      <blockquote class="twitter-tweet" data-theme="dark">
+        <a href="${parsedUrl.href}"></a>
+      </blockquote>
+      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+    `}
+  />;
+};
+
+const redditHosts = new Set(['reddit.com', 'www.reddit.com', 'old.reddit.com']);
+
+const RedditEmbed = ({parsedUrl}) => {
+  return <iframe 
+    className='enlarged reddit-embed'
+    height="100%"
+    width="100%"
+    frameborder="0" 
+    credentialless
+    referrerpolicy='no-referrer'
+    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    title={parsedUrl.href}
+    srcdoc={`
+      <style>
+        /* fix reddit iframe being centered */
+        iframe {
+          margin: 0!important;
+        }
+      </style>
+      <blockquote class="reddit-embed-bq" style="height:240px" data-embed-theme="dark">
+        <a href="${parsedUrl.href}"></a>    
+      </blockquote>
+      <script async src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>
+    `}
+  />;
+};
+
+const twitchHosts = new Set(['twitch.tv', 'www.twitch.tv']);
+
+const TwitchEmbed = ({parsedUrl}) => {
+  let iframeUrl;
+  if (parsedUrl.pathname.startsWith('/videos/')) {
+    const videoId = parsedUrl.pathname.replace('/videos/', '');
+    iframeUrl = `https://player.twitch.tv/?video=${videoId}&parent=${window.location.hostname}`;
+  }
+  else {
+    const channel = parsedUrl.pathname.replaceAll('/', '');
+    iframeUrl = `https://player.twitch.tv/?channel=${channel}&parent=${window.location.hostname}`;
+  }
+  return <iframe 
+    className='enlarged twitch-embed'
+    height="100%"
+    width="100%"
+    frameborder="0" 
+    credentialless
+    referrerpolicy='no-referrer'
+    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    allowfullscreen
+    title={parsedUrl.href}
+    src={iframeUrl}
+  />;
+};
+
+const tiktokHosts = new Set(['tiktok.com', 'www.tiktok.com']);
+
+const TiktokEmbed = ({parsedUrl}) => {
+  const videoId = parsedUrl.pathname.replace(/.+\/video\//, '').replaceAll('/', '');
+  return <iframe 
+    className='enlarged tiktok-embed'
+    height="100%"
+    width="100%"
+    frameborder="0" 
+    credentialless
+    referrerpolicy='no-referrer'
+    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    title={parsedUrl.href}
+    srcdoc={`
+      <blockquote class="tiktok-embed" data-video-id="${videoId}">
+        <a></a>
+      </blockquote> 
+      <script async src="https://www.tiktok.com/embed.js"></script>
+    `}
+  />;
+};
+
+const instagramHosts = new Set(['instagram.com', 'www.instagram.com']);
+
+const InstagramEmbed = ({parsedUrl}) => {
+  const pathNames = parsedUrl.pathname.replace(/\/+$/, '').split('/');
+  const id = pathNames[pathNames.length - 1];
+  return <iframe 
+    className='enlarged instagram-embed'
+    height="100%"
+    width="100%"
+    frameborder="0" 
+    credentialless
+    referrerpolicy='no-referrer'
+    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    title={parsedUrl.href}
+    srcdoc={`
+      <blockquote class="instagram-media">
+        <a href="https://www.instagram.com/p/${id}/"></a>
+      </blockquote>
+      <script async src="//www.instagram.com/embed.js"></script>
+    `}
+  />;
+};
+
+const odyseeHosts = new Set(['odysee.com', 'www.odysee.com']);
+
+const OdyseeEmbed = ({parsedUrl}) => {
+  const iframeUrl = `https://odysee.com/$/embed${parsedUrl.pathname}`;
+  return <iframe 
+    className='enlarged odysee-embed'
+    height="100%"
+    width="100%"
+    frameborder="0" 
+    credentialless
+    referrerpolicy='no-referrer'
+    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    allowfullscreen
+    title={parsedUrl.href}
+    src={iframeUrl}
+  />;
+};
+
+const bitchuteHosts = new Set(['bitchute.com', 'www.bitchute.com']);
+
+const BitchuteEmbed = ({parsedUrl}) => {
+  const videoId = parsedUrl.pathname.replace(/\/video\//, '').replaceAll('/', '');
+  return <iframe 
+    className='enlarged bitchute-embed'
+    height="100%"
+    width="100%"
+    frameborder="0" 
+    credentialless
+    referrerpolicy='no-referrer'
+    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    allowfullscreen
+    title={parsedUrl.href}
+    src={`https://www.bitchute.com/embed/${videoId}/`}
+  />;
+};
+
+const streamableHosts = new Set(['streamable.com', 'www.streamable.com']);
+
+const StreamableEmbed = ({parsedUrl}) => {
+  const videoId = parsedUrl.pathname.replaceAll('/', '');
+  return <iframe 
+    className='enlarged streamable-embed'
+    height="100%"
+    width="100%"
+    frameborder="0" 
+    credentialless
+    referrerpolicy='no-referrer'
+    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    allowfullscreen
+    title={parsedUrl.href}
+    src={`https://streamable.com/e/${videoId}`}
+  />;
+};
+
+const spotifyHosts = new Set(['spotify.com', 'www.spotify.com', 'open.spotify.com']);
+
+const SpotifyEmbed = ({parsedUrl}) => {
+  const iframeUrl = `https://open.spotify.com/embed${parsedUrl.pathname}?theme=0`
+  return <iframe 
+    className='enlarged spotify-embed'
+    height="100%"
+    width="100%"
+    frameborder="0" 
+    credentialless
+    referrerpolicy='no-referrer'
+    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    allowfullscreen
+    title={parsedUrl.href}
+    src={iframeUrl}
+  />;
+};
+
+const canEmbedHosts = new Set([
+  ...youtubeHosts, ...twitterHosts, ...redditHosts, ...twitchHosts, 
+  ...tiktokHosts, ...instagramHosts, ...odyseeHosts, ...bitchuteHosts, 
+  ...streamableHosts, ...spotifyHosts
+]);
+
+export const canEmbed = (parsedUrl) => canEmbedHosts.has(parsedUrl.host);
+
+export default Embed;
\ No newline at end of file
diff --git a/src/components/styled/GlobalStyle.styled.jsx b/src/components/styled/GlobalStyle.styled.jsx
index 2c887726..9ae4e259 100644
--- a/src/components/styled/GlobalStyle.styled.jsx
+++ b/src/components/styled/GlobalStyle.styled.jsx
@@ -42,10 +42,47 @@ export const GlobalStyle = createGlobalStyle`
     display: inline-block;
   }
 
-  .enlarged {
-    display: block;
-    max-width: 100% !important;
-    max-height: 100% !important;
+  @media (min-width: 480px) {
+    .enlarged {
+      display: block;
+      max-width: 100% !important;
+      max-height: 100% !important;
+    }
+    
+    .instagram-embed {
+      height: 420px;
+      width: 360px;
+    }
+
+    .streamable-embed, 
+    .bitchute-embed, 
+    .odysee-embed, 
+    .youtube-embed, 
+    .rumble-embed, 
+    .twitch-embed {
+      height: 450px;
+      width: 800px;
+    }
+
+    .spotify-embed {
+      height: 240px;
+      width: 700px;
+    }
+  
+    .tiktok-embed {
+      width: 400px;
+      height: 780px;
+    }
+
+    .twitter-embed {
+      width: 400px;
+      height: 580px;
+    }
+
+    .reddit-embed {
+      width: 500px;
+      height: 260px;
+    }
   }
 
   @media (max-width: 480px) {
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 758721f0..8d2773f2 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -18,6 +18,7 @@ import ModerationModal from '../modals/ModerationModal';
 import BoardSettings from '../BoardSettings';
 import BoardStats from '../BoardStats';
 import EditLabel from '../EditLabel';
+import Embed from '../Embed';
 import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
 import PendingLabel from '../PendingLabel';
@@ -1415,33 +1416,29 @@ const Board = () => {
                                     commentMediaInfo?.url.length > 30 ?
                                     commentMediaInfo?.url.slice(0, 30) + "(...)" :
                                     commentMediaInfo?.url
-                                    }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
-                                    {isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
+                                    }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
+                                    { (isThreadThumbnailClicked[index] || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
                                       <span>
                                         -[
                                           <span className='reply-link' 
                                           style={{textDecoration: 'underline', cursor: 'pointer'}}
-                                          onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span>
+                                          onClick={() => {handleThumbnailClick(index, 'thread')}}>
+                                            {isThreadThumbnailClicked[index] ? 'Close' : 'Embed'}
+                                          </span>
                                         ]
                                       </span>
-                                    ) : null}
+                                    )}
                                   </div>
                                   {commentMediaInfo?.type === 'iframe' && (
                                     <div key={`enlarge-${index}`}
                                     className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
-                                      <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
-                                        {(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
-                                          <iframe 
-                                            className='enlarged'
-                                            key={`fti-${index}`} 
-                                            src={commentMediaInfo.embedUrl}
-                                            width={commentMediaInfo.thumbnail ? "560" : "250"} 
-                                            height="315"
-                                            style={{border: "none"}}
-                                            title="Embedded content"
-                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                                            allowFullScreen />
-                                        ) : (
+                                      <span key={`fta-${index}`} className="file-thumb" style={
+                                        isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail ? 
+                                        {} : {width: displayWidth, height: displayHeight
+                                        }}>
+                                        {isThreadThumbnailClicked[index] && commentMediaInfo.url ? (
+                                          <Embed url={commentMediaInfo.url} key={`fti-${index}`} />
+                                        ) : commentMediaInfo.thumbnail ? (
                                           <img 
                                             key={`fti-${index}`}
                                             src={commentMediaInfo.thumbnail} 
@@ -1449,7 +1446,7 @@ const Board = () => {
                                             onClick={() => {handleThumbnailClick(index, 'thread')}}
                                             style={{cursor: "pointer"}}
                                             onError={(e) => e.target.src = fallbackImgUrl} />
-                                        )}
+                                        ) : null}
                                       </span>
                                     </div>
                                   )}
@@ -2115,33 +2112,53 @@ const Board = () => {
                                       </div>
                                     </div>
                                     {replyMediaInfo?.url ? (
-                                      <div key={`f-${index}`} className="file" 
-                                      style={{marginBottom: "5px"}}>
-                                        <div key={`ft-${index}`} className="reply-file-text">
+                                      <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                                        <div key={`ft-${index}`} className="file-text">
                                           Link:&nbsp;
                                           <a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
                                           rel="noopener noreferrer">{
                                           replyMediaInfo?.url.length > 30 ?
                                           replyMediaInfo?.url.slice(0, 30) + "(...)" :
                                           replyMediaInfo?.url
-                                          }</a>&nbsp;({replyMediaInfo?.type})
-                                          {replyMediaInfo?.type === "video" ||  replyMediaInfo?.type === "iframe" ? (
-                                            isReplyThumbnailClicked[index] && commentMediaInfo.type !== "image"  ? (
-                                              <span>
-                                                -[
-                                                  <span className='reply-link' 
-                                                  style={{textDecoration: 'underline', cursor: 'pointer'}}
-                                                  onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span>
-                                                ]
-                                              </span>) 
-                                            : null)
-                                          : null}
+                                          }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
+                                          { (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
+                                            <span>
+                                              -[
+                                                <span className='reply-link' 
+                                                style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                                onClick={() => {handleThumbnailClick(index, 'reply')}}>
+                                                  {isReplyThumbnailClicked[index] ? 'Close' : 'Embed'}
+                                                </span>
+                                              ]
+                                            </span>
+                                          )}
                                         </div>
-                                        {replyMediaInfo?.type === "webpage" ? (
-                                          <div key={`enlarge-reply-${index}`} className="img-container">
+                                        {replyMediaInfo?.type === 'iframe' && (
+                                          <div key={`enlarge-${index}`}
+                                          className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                            <span key={`fta-${index}`} className="file-thumb-reply" style={
+                                              isReplyThumbnailClicked[index] || !replyMediaInfo.thumbnail ? 
+                                              {} : {width: replyDisplayWidth, height: replyDisplayHeight
+                                              }}>
+                                              {isReplyThumbnailClicked[index] && replyMediaInfo.url ? (
+                                                <Embed url={replyMediaInfo.url} key={`fti-${index}`} />
+                                              ) : replyMediaInfo.thumbnail ? (
+                                                <img 
+                                                  key={`fti-${index}`}
+                                                  src={replyMediaInfo.thumbnail} 
+                                                  alt="thumbnail"
+                                                  onClick={() => {handleThumbnailClick(index, 'reply')}}
+                                                  style={{cursor: "pointer"}}
+                                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                              ) : null}
+                                            </span>
+                                          </div>
+                                        )}
+                                        {replyMediaInfo?.type === "webpage" && (
+                                          <div key={`enlarge-${index}`} className="img-container">
                                             <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
                                               {reply.thumbnailUrl ? (
-                                                <img key={`fti-${index}`}
+                                                <img key={`fti-${index}`} 
                                                 src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
                                                 onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
                                                 style={{cursor: "pointer"}}
@@ -2149,51 +2166,50 @@ const Board = () => {
                                               ) : null}
                                             </span>
                                           </div>
-                                        ) : null}
-                                        {replyMediaInfo?.type === "image" ? (
-                                          <div key={`enlarge-reply-${index}`} className="img-container">
+                                        )}
+                                        {replyMediaInfo?.type === "image" && (
+                                          <div key={`enlarge-${index}`} className="img-container">
                                             <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
-                                              <img key={`fti-${index}`}
-                                              src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                              <img key={`fti-${index}`} 
+                                              src={replyMediaInfo.url} alt={replyMediaInfo.type}
                                               onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
                                               style={{cursor: "pointer"}}
                                               onError={(e) => e.target.src = fallbackImgUrl} />
                                             </span>
                                           </div>
-                                        ) : null}
-                                        {replyMediaInfo?.type === "video" ? (
-                                          <div key={`enlarge-reply-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
-                                          <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
-                                            {isReplyThumbnailClicked[index] ? (
-                                              <video controls
-                                                className='enlarged'
-                                                key={`fti-${index}`} 
-                                                src={replyMediaInfo.url} 
-                                                alt={replyMediaInfo.type} 
-                                                style={{cursor: "pointer"}}
-                                                onError={(e) => e.target.src = fallbackImgUrl} 
-                                              />
-                                            ) : (
-                                              <video
-                                                key={`fti-${index}`} 
-                                                src={replyMediaInfo.url}
-                                                alt="thumbnail"
-                                                onClick={() => {handleThumbnailClick(index, 'reply')}}
-                                                style={{cursor: "pointer"}}
-                                                onError={(e) => e.target.src = fallbackImgUrl} 
-                                              />
-                                            )}
-                                          </span>
-                                        </div>
-                                        ) : null}
-                                        {replyMediaInfo?.type === "audio" ? (
-                                          <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
-                                            <audio controls 
-                                            key={`fti-${index}`}
-                                            src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                        )}
+                                        {replyMediaInfo?.type === "video" && (
+                                          <div key={`enlarge-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                            <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
+                                              {isReplyThumbnailClicked[index] ? (
+                                                <video 
+                                                  className='enlarged'
+                                                  key={`fti-${index}`} 
+                                                  src={replyMediaInfo.url} 
+                                                  controls
+                                                  style={{cursor: "pointer"}}
+                                                  onError={(e) => e.target.src = fallbackImgUrl} 
+                                                />
+                                              ) : (
+                                                <video 
+                                                  key={`fti-${index}`}
+                                                  src={replyMediaInfo.url} 
+                                                  alt="thumbnail"
+                                                  onClick={() => {handleThumbnailClick(index, 'reply')}}
+                                                  style={{cursor: "pointer"}}
+                                                  onError={(e) => e.target.src = fallbackImgUrl} 
+                                                />
+                                              )}
+                                            </span>
+                                          </div>
+                                        )}
+                                        {replyMediaInfo?.type === "audio" && (
+                                          <span key={`fta-${index}`} className="file-thumb-reply">
+                                            <audio controls key={`fti-${index}`} 
+                                            src={replyMediaInfo.url} alt={replyMediaInfo.type}
                                             onError={(e) => e.target.src = fallbackImgUrl} />
                                           </span>
-                                        ) : null}
+                                        )}
                                       </div>
                                     ) : null}
                                     {reply.content ? (
@@ -2513,17 +2529,11 @@ const Board = () => {
                                   {commentMediaInfo?.type === 'iframe' && (
                                     <div key={`enlarge-mob-${index}`} className="img-container">
                                       <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
-                                        {(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
+                                        {(isMobileThreadThumbnailClicked[index] && commentMediaInfo.url ? (
                                           <div style={{width: "92vw"}}>
-                                            <iframe 
-                                              key={`mob-fti-${index}`} 
-                                              src={commentMediaInfo.embedUrl}
-                                              style={{border: "none", height: "250px"}}
-                                              title="Embedded content"
-                                              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                                              allowFullScreen />
+                                            <Embed url={commentMediaInfo.url} key={`fti-mobile-${index}`} />
                                           </div>
-                                        ) : (
+                                        ) : commentMediaInfo.thumbnail ? (
                                           <img 
                                             key={`mob-fti-${index}`}
                                             src={commentMediaInfo.thumbnail} 
@@ -2531,7 +2541,7 @@ const Board = () => {
                                             onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
                                             style={{cursor: "pointer"}}
                                             onError={(e) => e.target.src = fallbackImgUrl} />
-                                        )}
+                                        ) : <span onClick={() => {handleThumbnailClick(index, 'mobileThread')}}>Embed</span>)}
                                         {commentMediaInfo?.type === "video" || commentMediaInfo?.type ===  "iframe" ? (
                                           isMobileThreadThumbnailClicked[index] ? (
                                             <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
@@ -2540,8 +2550,8 @@ const Board = () => {
                                               >Close</span>
                                             </div>
                                           ) : (
-                                            <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
-                                        )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                            <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
+                                        )) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
                                       </span>
                                     </div>
                                   )}
diff --git a/src/utils/getCommentMediaInfo.js b/src/utils/getCommentMediaInfo.js
index 009521fc..ae263a34 100644
--- a/src/utils/getCommentMediaInfo.js
+++ b/src/utils/getCommentMediaInfo.js
@@ -1,4 +1,5 @@
 import extName from 'ext-name';
+import { canEmbed } from '../components/Embed';
 
 const getCommentMediaInfo = (comment) => {
   if (!comment?.thumbnailUrl && !comment?.link) {
@@ -9,56 +10,26 @@ const getCommentMediaInfo = (comment) => {
     try {
       const url = new URL(comment.link);
       const host = url.hostname;
-      let embedUrl = null;
+      let scrapedThumbnailUrl;
 
       if (['youtube.com', 'www.youtube.com', 'youtu.be'].includes(host)) {
         const videoId = host === 'youtu.be' ? url.pathname.slice(1) : url.searchParams.get('v');
-        embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}`;
-        const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/sddefault.jpg`;
-        return {
-          url: comment.link,
-          embedUrl,
-          type: 'iframe',
-          thumbnail: comment.thumbnailUrl || thumbnailUrl,
-        };
-      } else if (host.includes('odysee.com')) {
-        const pathComponents = url.pathname.split('/');
-        const channelAndId = pathComponents[1];
-        const videoAndId = pathComponents[2];
-        embedUrl = `https://odysee.com/$/embed/${channelAndId}/${videoAndId}`;
-
-        // TODO: add support for Rumble, video id is dynamic
-
-      // } else if (host.includes('rumble.com')) {
-      //   const regex = /(\/v.+?)-/;
-      //   const match = regex.exec(url.pathname);
-      //   if (match) {
-      //     const videoId = match[1].slice(1);
-      //     embedUrl = `https://rumble.com/embed/${videoId}/?pub=4`;
-      //   }
-
+        scrapedThumbnailUrl = `https://img.youtube.com/vi/${videoId}/sddefault.jpg`;
 
       } else if (host.includes('bitchute.com')) {
         const videoId = url.pathname.split('/')[2];
-        embedUrl = `https://www.bitchute.com/embed/${videoId}/`;
+        scrapedThumbnailUrl = `https://static-3.bitchute.com/live/cover_images/F61vWF4shy8s/${videoId}_640x360.jpg`;
+
       } else if (host.includes('streamable.com')) {
         const videoId = url.pathname.split('/')[1];
-        embedUrl = `https://streamable.com/e/${videoId}?quality=highest`;
-        
-        // TODO: Add support for Giphy (doesn't have thumbnails, size is variable)
-
-      // } else if (host.includes('giphy.com')) {
-      //   const hyphenComponents = url.pathname.split('-');
-      //   const gifId = hyphenComponents[hyphenComponents.length - 1];
-      //   embedUrl = `https://giphy.com/embed/${gifId}`;
+        scrapedThumbnailUrl = `https://cdn-cf-east.streamable.com/image/${videoId}.jpg`;
       }
 
-      if (embedUrl) {
+      if (canEmbed(url)) {
         return {
           url: comment.link,
-          embedUrl,
           type: 'iframe',
-          thumbnail: comment.thumbnailUrl,
+          thumbnail: comment.thumbnailUrl || scrapedThumbnailUrl,
         };
       }
 
diff --git a/yarn.lock b/yarn.lock
index be083df8..23673b16 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2662,53 +2662,6 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
-"@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#55aa6aa8af521f5978da99b74955b423ad4f8edc":
-  version "0.0.3"
-  resolved "https://github.com/plebbit/plebbit-js.git#55aa6aa8af521f5978da99b74955b423ad4f8edc"
-  dependencies:
-    "@ensdomains/eth-ens-namehash" "2.0.15"
-    "@keyv/sqlite" "3.6.2"
-    "@plebbit/plebbit-logger" "github:plebbit/plebbit-logger#9525ca9539479918931c3b334e8d490d1c87e507"
-    "@types/node-fetch" "2.6.2"
-    "@types/proper-lockfile" "4.1.2"
-    "@types/uuid" "8.3.4"
-    assert "2.0.0"
-    async-wait-until "2.0.12"
-    buffer "6.0.3"
-    captcha-canvas "3.2.1"
-    err-code "3.0.1"
-    ethers "6.7.0"
-    file-type "16.5.4"
-    form-data "4.0.0"
-    hpagent "1.2.0"
-    ipfs-http-client "56.0.3"
-    ipfs-only-hash "4.0.0"
-    is-ipfs "6.0.2"
-    jose "4.11.0"
-    js-sha256 "0.9.0"
-    keyv "4.5.2"
-    knex "2.4.2"
-    libp2p-crypto "0.21.2"
-    limiter "2.1.0"
-    localforage "1.10.0"
-    lodash-es "4.17.21"
-    lru-cache "7.18.3"
-    open-graph-scraper "5.2.3"
-    p-limit "3.1.0"
-    peer-id "0.16.0"
-    proper-lockfile "github:plebbit/node-proper-lockfile#d8b63817f9ea3304d3e048976d72b3108ec076ff"
-    retry "0.13.1"
-    rpc-websockets "7.5.1"
-    safe-stable-stringify "2.4.1"
-    sha1-uint8array "0.10.3"
-    skia-canvas "1.0.0"
-    sqlite3 "5.1.6"
-    tiny-typed-emitter "2.1.0"
-    tinycache "1.1.2"
-    ts-custom-error "3.3.1"
-    uuid "9.0.0"
-    viem "1.5.2"
-
 "@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#d45a63f7a23e44cd940419124ccb53754db2f14b":
   version "0.0.3"
   resolved "https://github.com/plebbit/plebbit-js.git#d45a63f7a23e44cd940419124ccb53754db2f14b"
@@ -2785,21 +2738,6 @@
     uuid "8.3.2"
     zustand "4.0.0"
 
-"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#e741b0dad5bba65cf1f0896053f25cd91ed55cf1":
-  version "0.0.1"
-  resolved "https://github.com/plebbit/plebbit-react-hooks.git#e741b0dad5bba65cf1f0896053f25cd91ed55cf1"
-  dependencies:
-    "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#55aa6aa8af521f5978da99b74955b423ad4f8edc"
-    "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
-    assert "2.0.0"
-    ethers "5.6.9"
-    localforage "1.10.0"
-    lodash.isequal "4.5.0"
-    memoizee "0.4.15"
-    quick-lru "5.1.1"
-    uuid "8.3.2"
-    zustand "4.0.0"
-
 "@plebbit/proper-lockfile@github:plebbit/node-proper-lockfile#7fd6332117340c1d3d98dd0afee2d31cc06f72b8":
   version "4.1.2"
   resolved "https://codeload.github.com/plebbit/node-proper-lockfile/tar.gz/7fd6332117340c1d3d98dd0afee2d31cc06f72b8"
@@ -2982,11 +2920,6 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f"
   integrity sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==
 
-"@sindresorhus/is@^5.2.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-5.6.0.tgz#41dd6093d34652cddb5d5bdeee04eafc33826668"
-  integrity sha512-TV7t8GKYaJWsn00tFDqBw8+Uqmr8A0fRU1tvTQhyZzGv0sJCGRQL3JGMI3ucuKo3XIZdUP+Lx7/gh2t3lewy7g==
-
 "@sinonjs/commons@^1.7.0":
   version "1.8.6"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.6.tgz#80c516a4dc264c2a69115e7578d62581ff455ed9"
@@ -3128,13 +3061,6 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@szmarczak/http-timer@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-5.0.1.tgz#c7c1bf1141cdd4751b0399c8fc7b8b664cd5be3a"
-  integrity sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==
-  dependencies:
-    defer-to-connect "^2.0.1"
-
 "@testing-library/dom@9.0.1":
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.0.1.tgz#fb9e3837fe2a662965df1536988f0863f01dbf51"
@@ -3384,7 +3310,7 @@
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
   integrity sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==
 
-"@types/http-cache-semantics@*", "@types/http-cache-semantics@^4.0.1":
+"@types/http-cache-semantics@*":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz#0ea7b61496902b95890dc4c3a116b60cb8dae812"
   integrity sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==
@@ -4995,24 +4921,6 @@ cacheable-lookup@^5.0.3:
   resolved "https://registry.yarnpkg.com/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz#5a6b865b2c44357be3d5ebc2a467b032719a7005"
   integrity sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==
 
-cacheable-lookup@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz#3476a8215d046e5a3202a9209dd13fec1f933a27"
-  integrity sha512-+qJyx4xiKra8mZrcwhjMRMUhD5NR1R8esPkzIYxX96JiecFoxAXFuz/GpR3+ev4PE1WamHip78wV0vcmPQtp8w==
-
-cacheable-request@^10.2.8:
-  version "10.2.13"
-  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-10.2.13.tgz#b7012bb4a2acdb18cb54d2dff751d766b3500842"
-  integrity sha512-3SD4rrMu1msNGEtNSt8Od6enwdo//U9s4ykmXfA2TD58kcLkCobtCDiby7kNyj7a/Q7lz/mAesAFI54rTdnvBA==
-  dependencies:
-    "@types/http-cache-semantics" "^4.0.1"
-    get-stream "^6.0.1"
-    http-cache-semantics "^4.1.1"
-    keyv "^4.5.3"
-    mimic-response "^4.0.0"
-    normalize-url "^8.0.0"
-    responselike "^3.0.0"
-
 cacheable-request@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-6.1.0.tgz#20ffb8bd162ba4be11e9567d823db651052ca912"
@@ -5166,7 +5074,7 @@ character-entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
   integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
 
-chardet@^1.4.0, chardet@^1.5.1:
+chardet@^1.4.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-1.6.0.tgz#d04ea6e254916770c0e15ab678cbc7864c967fd1"
   integrity sha512-+QOTw3otC4+FxdjK9RopGpNOglADbr4WPFi0SonkO99JbpkTPbMxmdm4NenhF5Zs+4gPXLI1+y2uazws5TMe8w==
@@ -5188,7 +5096,7 @@ cheerio-select@^2.1.0:
     domhandler "^5.0.3"
     domutils "^3.0.1"
 
-cheerio@^1.0.0-rc.11, cheerio@^1.0.0-rc.12:
+cheerio@^1.0.0-rc.11:
   version "1.0.0-rc.12"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.12.tgz#788bf7466506b1c6bf5fae51d24a2c4d62e47683"
   integrity sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==
@@ -6132,7 +6040,7 @@ defer-to-connect@^1.0.1:
   resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
   integrity sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==
 
-defer-to-connect@^2.0.0, defer-to-connect@^2.0.1:
+defer-to-connect@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-2.0.1.tgz#8016bdb4143e4632b77a3449c6236277de520587"
   integrity sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==
@@ -7577,11 +7485,6 @@ fork-ts-checker-webpack-plugin@^6.5.0:
     semver "^7.3.2"
     tapable "^1.0.0"
 
-form-data-encoder@^2.1.2:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/form-data-encoder/-/form-data-encoder-2.1.4.tgz#261ea35d2a70d48d30ec7a9603130fa5515e9cd5"
-  integrity sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==
-
 form-data@4.0.0, form-data@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
@@ -7781,7 +7684,7 @@ get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
-get-stream@^6.0.0, get-stream@^6.0.1:
+get-stream@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
@@ -7958,23 +7861,6 @@ got@^11.8.5:
     p-cancelable "^2.0.0"
     responselike "^2.0.0"
 
-got@^12.6.0:
-  version "12.6.1"
-  resolved "https://registry.yarnpkg.com/got/-/got-12.6.1.tgz#8869560d1383353204b5a9435f782df9c091f549"
-  integrity sha512-mThBblvlAF1d4O5oqyvN+ZxLAYwIJK7bpMxgYqPD9okW0C3qm5FFn7k811QrcuEBwaogR3ngOFoCfs6mRv7teQ==
-  dependencies:
-    "@sindresorhus/is" "^5.2.0"
-    "@szmarczak/http-timer" "^5.0.1"
-    cacheable-lookup "^7.0.0"
-    cacheable-request "^10.2.8"
-    decompress-response "^6.0.0"
-    form-data-encoder "^2.1.2"
-    get-stream "^6.0.1"
-    http2-wrapper "^2.1.10"
-    lowercase-keys "^3.0.0"
-    p-cancelable "^3.0.0"
-    responselike "^3.0.0"
-
 got@^9.6.0:
   version "9.6.0"
   resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
@@ -8232,7 +8118,7 @@ htmlparser2@^8.0.1:
     domutils "^3.0.1"
     entities "^4.4.0"
 
-http-cache-semantics@^4.0.0, http-cache-semantics@^4.1.0, http-cache-semantics@^4.1.1:
+http-cache-semantics@^4.0.0, http-cache-semantics@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
   integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==
@@ -8314,14 +8200,6 @@ http2-wrapper@^1.0.0-beta.5.2:
     quick-lru "^5.1.1"
     resolve-alpn "^1.0.0"
 
-http2-wrapper@^2.1.10:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/http2-wrapper/-/http2-wrapper-2.2.0.tgz#b80ad199d216b7d3680195077bd7b9060fa9d7f3"
-  integrity sha512-kZB0wxMo0sh1PehyjJUWRFEd99KC5TLjZ2cULC4f9iqJBAmKQQXEICjxl5iPJRwP40dpeHFqqhm7tYCvODpqpQ==
-  dependencies:
-    quick-lru "^5.1.1"
-    resolve-alpn "^1.2.0"
-
 https-proxy-agent@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
@@ -9948,7 +9826,7 @@ keyv@^3.0.0:
   dependencies:
     json-buffer "3.0.0"
 
-keyv@^4.0.0, keyv@^4.5.3:
+keyv@^4.0.0:
   version "4.5.3"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.3.tgz#00873d2b046df737963157bd04f294ca818c9c25"
   integrity sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==
@@ -10195,11 +10073,6 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
-lowercase-keys@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-3.0.0.tgz#c5e7d442e37ead247ae9db117a9d0a467c89d4f2"
-  integrity sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==
-
 lru-cache@7.18.3:
   version "7.18.3"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
@@ -10680,11 +10553,6 @@ mimic-response@^3.1.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
   integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
 
-mimic-response@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-4.0.0.tgz#35468b19e7c75d10f5165ea25e75a5ceea7cf70f"
-  integrity sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==
-
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -11121,11 +10989,6 @@ normalize-url@^6.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
-normalize-url@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-8.0.0.tgz#593dbd284f743e8dcf6a5ddf8fadff149c82701a"
-  integrity sha512-uVFpKhj5MheNBJRTiMZ9pE/7hD1QTeEvugSJW/OmLzAp78PB5O6adfMNTvmfKhXBkvCzC+rqifWcVYpGFwTjnw==
-
 npm-conf@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/npm-conf/-/npm-conf-1.1.3.tgz#256cc47bd0e218c259c4e9550bf413bc2192aff9"
@@ -11316,17 +11179,6 @@ open-graph-scraper@4.11.1:
     iconv-lite "^0.6.3"
     validator "^13.7.0"
 
-open-graph-scraper@5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/open-graph-scraper/-/open-graph-scraper-5.2.3.tgz#8a84b4f48d42e18d9ec44453377499acf57cfe66"
-  integrity sha512-OFKyI3Zv60onbwjUtwTdLwMB9P1O0+U2JV0HD4hHdwyKGwDhyM09udZVU5vEwe/PxI4MyPuVaxcdy1okc4SgWw==
-  dependencies:
-    chardet "^1.5.1"
-    cheerio "^1.0.0-rc.12"
-    got "^12.6.0"
-    iconv-lite "^0.6.3"
-    validator "^13.9.0"
-
 open@^7.3.1, open@^7.4.2:
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
@@ -11366,11 +11218,6 @@ p-cancelable@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-2.1.1.tgz#aab7fbd416582fa32a3db49859c122487c5ed2cf"
   integrity sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==
 
-p-cancelable@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-3.0.0.tgz#63826694b54d61ca1c20ebcb6d3ecf5e14cd8050"
-  integrity sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==
-
 p-defer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-3.0.0.tgz#d1dceb4ee9b2b604b1d94ffec83760175d4e6f83"
@@ -12344,14 +12191,6 @@ prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-"proper-lockfile@github:plebbit/node-proper-lockfile#d8b63817f9ea3304d3e048976d72b3108ec076ff":
-  version "4.1.2"
-  resolved "https://codeload.github.com/plebbit/node-proper-lockfile/tar.gz/d8b63817f9ea3304d3e048976d72b3108ec076ff"
-  dependencies:
-    graceful-fs "^4.2.4"
-    retry "^0.12.0"
-    signal-exit "^3.0.2"
-
 property-information@^6.0.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.2.0.tgz#b74f522c31c097b5149e3c3cb8d7f3defd986a1d"
@@ -13016,7 +12855,7 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-resolve-alpn@^1.0.0, resolve-alpn@^1.2.0:
+resolve-alpn@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
   integrity sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==
@@ -13086,13 +12925,6 @@ responselike@^2.0.0:
   dependencies:
     lowercase-keys "^2.0.0"
 
-responselike@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/responselike/-/responselike-3.0.0.tgz#20decb6c298aff0dbee1c355ca95461d42823626"
-  integrity sha512-40yHxbNcl2+rzXvZuVkrYohathsSJlMTXKryG5y8uciHv1+xDLHQpgjG64JUO9nrEq2jGLH6IZ8BcZyw3wrweg==
-  dependencies:
-    lowercase-keys "^3.0.0"
-
 retimer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/retimer/-/retimer-3.0.0.tgz#98b751b1feaf1af13eb0228f8ea68b8f9da530df"
@@ -14995,7 +14827,7 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-validator@^13.7.0, validator@^13.9.0:
+validator@^13.7.0:
   version "13.11.0"
   resolved "https://registry.yarnpkg.com/validator/-/validator-13.11.0.tgz#23ab3fd59290c61248364eabf4067f04955fbb1b"
   integrity sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==

From be7a64eef09ff327d767aefe9f878b34331b2413 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 9 Sep 2023 17:17:29 +0200
Subject: [PATCH 3/6] fix pointer

---
 src/components/views/Catalog.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index 6031c5b9..ba4cf256 100755
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -448,7 +448,7 @@ const CatalogPost = ({post}) => {
           </BoardForm>
           <Link style={{all: "unset", cursor: "pointer"}} to={`/p/${selectedAddress}/rules`}>
             <div className="teaser" style={{maxHeight: '312px'}}>
-              <div style={{cursor: 'text'}}>
+              <div style={{cursor: 'pointer'}}>
                 <span ref={textRef}
                 onMouseOver={() => {
                   setIsHoveringOnThread('rules');
@@ -621,7 +621,7 @@ const CatalogPost = ({post}) => {
           <Link style={{all: "unset", cursor: "pointer"}} to={`/p/${selectedAddress}/description`} 
             onClick={() => setSelectedThread("description")}>
             <div className="teaser" style={{maxHeight: '170px'}}>
-              <div style={{cursor: 'text'}}>
+              <div style={{cursor: 'pointer'}}>
                 <span ref={textRef}
                 onMouseOver={() => {
                   setIsHoveringOnThread('description');
@@ -920,7 +920,7 @@ const CatalogPost = ({post}) => {
           <Link style={{all: "unset", cursor: "pointer"}} key={`link2-`} to={`/p/${selectedAddress}/c/${thread.cid}`} 
           onClick={() => setSelectedThread(thread.cid)}>
             <div key={`t-`} className="teaser" style={{maxHeight: `calc(320px - ${displayHeight})`}}>
-            <div style={{cursor:"text"}}>
+            <div style={{cursor:"pointer"}}>
                 <span key={`teaser-width${thread.cid}`} ref={textRef} 
                 onMouseOver={() => {
                   setIsHoveringOnThread(thread.cid);

From 52219b840dc9f01839ca4486a7e6aef46d14f7a4 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 9 Sep 2023 17:49:35 +0200
Subject: [PATCH 4/6] update embeds thread, mobile

---
 src/components/views/Board.jsx  |  32 ++++-
 src/components/views/Thread.jsx | 245 ++++++++++++++++++++------------
 2 files changed, 181 insertions(+), 96 deletions(-)

diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 8d2773f2..e4f25ca7 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -2756,7 +2756,35 @@ const Board = () => {
                                 {reply.link ? (
                                   <div key={`mob-f-${index}`} className="file-mobile">
                                       {replyMediaInfo?.url ? (
-                                        replyMediaInfo.type === "webpage" ? (
+                                        replyMediaInfo.type === "iframe" ? (
+                                          <div key={`enlarge-mob-${index}`} className="img-container">
+                                            <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                                              {(isMobileReplyThumbnailClicked[index] && replyMediaInfo.url ? (
+                                                <div style={{width: "92vw"}}>
+                                                  <Embed url={replyMediaInfo.url} key={`fti-mobile-reply-${index}`} />
+                                                </div>
+                                              ) : replyMediaInfo.thumbnail ? (
+                                                <img 
+                                                  key={`mob-fti-${index}`}
+                                                  src={replyMediaInfo.thumbnail} 
+                                                  alt="thumbnail"
+                                                  onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
+                                                  style={{cursor: "pointer"}}
+                                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                                              ) : <span onClick={() => {handleThumbnailClick(index, 'mobileReply')}}>Embed</span>)}
+                                              {replyMediaInfo?.type === "video" || replyMediaInfo?.type ===  "iframe" ? (
+                                                isMobileReplyThumbnailClicked[index] ? (
+                                                  <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                                    <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                                    onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
+                                                    >Close</span>
+                                                  </div>
+                                                ) : (
+                                                  <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
+                                              )) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
+                                            </span>
+                                          </div>
+                                        ) : replyMediaInfo.type === "webpage" ? (
                                           <div key={`enlarge-mob-reply-${index}`} className="img-container">
                                             <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
                                               {reply.thumbnailUrl ? (
@@ -2781,7 +2809,7 @@ const Board = () => {
                                             </span>
                                           </div>
                                         ) : replyMediaInfo.type === "video" ? (
-                                          <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                                          <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
                                             {isMobileReplyThumbnailClicked[index] ? (
                                               <video key={`fti-${index}`} 
                                               src={replyMediaInfo.url} alt={replyMediaInfo.type}
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 719dd8c9..b096fc67 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -13,6 +13,7 @@ import { AlertModal } from '../styled/modals/AlertModal.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
 import BoardStats from '../BoardStats';
 import EditLabel from '../EditLabel';
+import Embed from '../Embed';
 import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
 import PendingLabel from '../PendingLabel';
@@ -121,6 +122,7 @@ const Thread = () => {
   const [isThreadThumbnailClicked, setIsThreadThumbnailClicked] = useState({});
   const [isReplyThumbnailClicked, setIsReplyThumbnailClicked] = useState({});
   const [isMobileThreadThumbnailClicked, setIsMobileThreadThumbnailClicked] = useState({});
+  const [isMobileReplyThumbnailClicked, setIsMobileReplyThumbnailClicked] = useState({});
   const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
 
@@ -156,6 +158,11 @@ const Thread = () => {
           ...prevState,
           [index]: !prevState[index],
         }));
+        case 'mobileReply':
+          setIsMobileReplyThumbnailClicked(prevState => ({
+            ...prevState,
+            [index]: !prevState[index],
+          }));
         break;
       default:
         break;
@@ -865,33 +872,26 @@ const Thread = () => {
                             commentMediaInfo?.url.length > 30 ?
                             commentMediaInfo?.url.slice(0, 30) + "(...)" :
                             commentMediaInfo?.url
-                            }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
-                            {isThreadThumbnailClicked[index] ? (
+                            }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
+                            { (isThreadThumbnailClicked[index] || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
                               <span>
                                 -[
                                   <span className='reply-link' 
                                   style={{textDecoration: 'underline', cursor: 'pointer'}}
-                                  onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span>
+                                  onClick={() => {handleThumbnailClick(index, 'thread')}}>
+                                    {isThreadThumbnailClicked[index] ? 'Close' : 'Embed'}
+                                  </span>
                                 ]
                               </span>
-                            ) : null}
+                            )}
                           </div>
                           {commentMediaInfo?.type === 'iframe' && (
                             <div key={`enlarge-${index}`}
                             className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
                               <span key={`fta-${index}`} className="file-thumb">
-                                {(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
-                                  <iframe 
-                                    className='enlarged'
-                                    key={`fti-${index}`} 
-                                    src={commentMediaInfo.embedUrl}
-                                    width={commentMediaInfo.thumbnail ? "560" : "250"} 
-                                    height="315"
-                                    style={{border: "none"}}
-                                    title="Embedded content"
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                                    allowFullScreen />
-                                ) : (
+                                {isThreadThumbnailClicked[index] && commentMediaInfo.url ? (
+                                  <Embed url={commentMediaInfo.url} key={`fti-${index}`} />
+                                ) : commentMediaInfo.thumbnail ? (
                                   <img 
                                     key={`fti-${index}`}
                                     src={commentMediaInfo.thumbnail} 
@@ -899,7 +899,7 @@ const Thread = () => {
                                     onClick={() => {handleThumbnailClick(index, 'thread')}}
                                     style={{cursor: "pointer"}}
                                     onError={(e) => e.target.src = fallbackImgUrl} />
-                                )}
+                                ) : null}
                               </span>
                             </div>
                           )}
@@ -1524,27 +1524,48 @@ const Thread = () => {
                             </div>
                           </div>
                           {replyMediaInfo?.url ? (
-                            <div key={`f-${index}`} className="file" 
-                            style={{marginBottom: "5px"}}>
-                              <div key={`ft-${index}`} className="reply-file-text">
+                            <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                              <div key={`ft-${index}`} className="file-text">
                                 Link:&nbsp;
                                 <a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
                                 rel="noopener noreferrer">{
                                 replyMediaInfo?.url.length > 30 ?
                                 replyMediaInfo?.url.slice(0, 30) + "(...)" :
                                 replyMediaInfo?.url
-                                }</a>&nbsp;({replyMediaInfo?.type})
-                                {replyMediaInfo?.type === "video" ||  replyMediaInfo?.type === "iframe" ? (
-                                    isReplyThumbnailClicked[index] ? (
-                                      <span>
-                                        -[
-                                          <span className='reply-link' 
-                                          style={{textDecoration: 'underline', cursor: 'pointer'}}
-                                          onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span>
-                                        ]
-                                      </span>) : null)
-                                  : null}
+                                }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
+                                { (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
+                                  <span>
+                                    -[
+                                      <span className='reply-link' 
+                                      style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                      onClick={() => {handleThumbnailClick(index, 'reply')}}>
+                                        {isReplyThumbnailClicked[index] ? 'Close' : 'Embed'}
+                                      </span>
+                                    ]
+                                  </span>
+                                )}
                               </div>
+                              {replyMediaInfo?.type === 'iframe' && (
+                                <div key={`enlarge-${index}`}
+                                className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                  <span key={`fta-${index}`} className="file-thumb-reply" style={
+                                    isReplyThumbnailClicked[index] || !replyMediaInfo.thumbnail ? 
+                                    {} : {width: replyDisplayWidth, height: replyDisplayHeight
+                                    }}>
+                                    {isReplyThumbnailClicked[index] && replyMediaInfo.url ? (
+                                      <Embed url={replyMediaInfo.url} key={`fti-${index}`} />
+                                    ) : replyMediaInfo.thumbnail ? (
+                                      <img 
+                                        key={`fti-${index}`}
+                                        src={replyMediaInfo.thumbnail} 
+                                        alt="thumbnail"
+                                        onClick={() => {handleThumbnailClick(index, 'reply')}}
+                                        style={{cursor: "pointer"}}
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                    ) : null}
+                                  </span>
+                                </div>
+                              )}
                               {replyMediaInfo?.type === "webpage" ? (
                                 <div key={`enlarge-reply-${index}`} className="img-container">
                                   <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
@@ -1799,39 +1820,33 @@ const Thread = () => {
                         <div key={`mob-f-${index}`} className="file-mobile">
                           {commentMediaInfo?.type === 'iframe' && (
                             <div key={`enlarge-mob-${index}`} className="img-container">
-                              <span key={`mob-fta-${index}`} className="file-thumb-mobile">
-                                {(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
-                                  <div style={{width: "92vw"}}>
-                                    <iframe 
-                                      key={`mob-fti-${index}`} 
-                                      src={commentMediaInfo.embedUrl}
-                                      style={{border: "none", height: "250px"}}
-                                      title="Embedded content"
-                                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                                      allowFullScreen />
+                            <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                              {(isMobileThreadThumbnailClicked[index] && commentMediaInfo.url ? (
+                                <div style={{width: "92vw"}}>
+                                  <Embed url={commentMediaInfo.url} key={`fti-mobile-${index}`} />
+                                </div>
+                              ) : commentMediaInfo.thumbnail ? (
+                                <img 
+                                  key={`mob-fti-${index}`}
+                                  src={commentMediaInfo.thumbnail} 
+                                  alt="thumbnail"
+                                  onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
+                                  style={{cursor: "pointer"}}
+                                  onError={(e) => e.target.src = fallbackImgUrl} />
+                              ) : <span onClick={() => {handleThumbnailClick(index, 'mobileThread')}}>Embed</span>)}
+                              {commentMediaInfo?.type === "video" || commentMediaInfo?.type ===  "iframe" ? (
+                                isMobileThreadThumbnailClicked[index] ? (
+                                  <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                    <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                    onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
+                                    >Close</span>
                                   </div>
                                 ) : (
-                                  <img 
-                                    key={`mob-fti-${index}`}
-                                    src={commentMediaInfo.thumbnail} 
-                                    alt="thumbnail"
-                                    onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
-                                    style={{cursor: "pointer"}}
-                                    onError={(e) => e.target.src = fallbackImgUrl} />
-                                )}
-                                {commentMediaInfo?.type === "video" || commentMediaInfo?.type ===  "iframe" ? (
-                                  isMobileThreadThumbnailClicked[index] ? (
-                                    <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
-                                      <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
-                                      onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
-                                      >Close</span>
-                                    </div>
-                                  ) : (
-                                    <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
-                                )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
-                              </span>
-                            </div>
-                          )}
+                                  <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
+                              )) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
+                            </span>
+                          </div>
+                        )}
                           {commentMediaInfo?.url ? (
                             commentMediaInfo.type === "webpage" ? (
                               <div key={`enlarge-mob-${index}`} className="img-container">
@@ -1999,47 +2014,89 @@ const Thread = () => {
                         {reply.link ? (
                             <div key={`mob-f-${reply.cid}`} className="file-mobile">
                                 {replyMediaInfo?.url ? (
-                                  replyMediaInfo.type === "webpage" ? (
-                                    <div key="enlarge-reply-mob" className="img-container">
+                                  replyMediaInfo.type === "iframe" ? (
+                                    <div key={`enlarge-mob-${index}`} className="img-container">
+                                    <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                                      {(isMobileReplyThumbnailClicked[index] && replyMediaInfo.url ? (
+                                        <div style={{width: "92vw"}}>
+                                          <Embed url={replyMediaInfo.url} key={`fti-mobile-reply-${index}`} />
+                                        </div>
+                                      ) : replyMediaInfo.thumbnail ? (
+                                        <img 
+                                          key={`mob-fti-${index}`}
+                                          src={replyMediaInfo.thumbnail} 
+                                          alt="thumbnail"
+                                          onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                      ) : <span onClick={() => {handleThumbnailClick(index, 'mobileReply')}}>Embed</span>)}
+                                      {replyMediaInfo?.type === "video" || replyMediaInfo?.type ===  "iframe" ? (
+                                        isMobileReplyThumbnailClicked[index] ? (
+                                          <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                            <span className='button-mobile' style={{float: "none", cursor: "pointer",
+                                            borderRadius: '3px', padding: '6px 10px 5px',}}
+                                            onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
+                                            >Close</span>
+                                          </div>
+                                        ) : (
+                                          <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
+                                      )) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
+                                    </span>
+                                  </div>
+
+                                  ) : replyMediaInfo.type === "webpage" ? (
+                                    <div key={`enlarge-mob-reply-${index}`} className="img-container">
                                       <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
                                         {reply.thumbnailUrl ? (
-                                          <img key={`mob-img-${reply.cid}`} 
-                                          src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type} 
-                                          onClick={handleImageClick}
+                                          <img key={`mob-img-${index}`} 
+                                          src={replyMediaInfo.thumbnail} alt="thumbnail" 
+                                          onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileReply')}}
                                           style={{cursor: "pointer"}}
                                           onError={(e) => e.target.src = fallbackImgUrl} />
                                         ) : null}
-                                        <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
                                       </span>
                                     </div>
-                                  ) : replyMediaInfo.type === "image" ? (
-                                    <div key="enlarge-reply-mob" className="img-container">
+                                    ) : replyMediaInfo.type === "image" ? (
+                                      <div key={`enlarge-mob-reply-${index}`} className="img-container">
+                                        <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                          <img key={`mob-img-${index}`} 
+                                          src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                          onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileReply')}}
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                          <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                        </span>
+                                      </div>
+                                    ) : replyMediaInfo.type === "video" ? (
                                       <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                        <img key={`mob-img-${reply.cid}`} 
-                                        src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                        onClick={handleImageClick}
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                        {isMobileReplyThumbnailClicked[index] ? (
+                                          <video key={`fti-${index}`} 
+                                          src={replyMediaInfo.url} alt={replyMediaInfo.type}
+                                          controls
+                                          style={{ all: 'unset', width: '100%', height: '100%', cursor: 'pointer'}} 
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                        ) : (
+                                          <video 
+                                            key={`fti-${index}`}
+                                            src={replyMediaInfo.url} 
+                                            alt="thumbnail"
+                                            onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
+                                            style={{cursor: "pointer"}}
+                                            id="video-thumbnail-mobile"
+                                            onError={(e) => e.target.src = fallbackImgUrl} 
+                                          />
+                                        )}
                                       </span>
-                                    </div>
-                                  ) : replyMediaInfo.type === "video" ? (
-                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                        <video key={`fti-${reply.cid}`} 
-                                        src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                        style={{ pointerEvents: "none" }}
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                      </span>
-                                  ) : replyMediaInfo.type === "audio" ? (
-                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                        <audio key={`mob-img-${reply.cid}`} 
-                                        src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                      </span>
-                                  ) : null
-                                ) : null}
+                                    ) : replyMediaInfo.type === "audio" ? (
+                                        <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                          <audio key={`mob-img-${index}`} 
+                                          src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                          <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                        </span>
+                                    ) : null
+                                  ) : null}
                             </div>
                           ) : null}
                         <blockquote key={`mob-pm-${index}`} className="post-message-mobile">

From 8fd12c0588729da813c84a9375c2a86c48284bd8 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 9 Sep 2023 18:06:30 +0200
Subject: [PATCH 5/6] fix switch case

---
 src/components/views/Thread.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index b096fc67..4743836e 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -158,6 +158,7 @@ const Thread = () => {
           ...prevState,
           [index]: !prevState[index],
         }));
+        break;
         case 'mobileReply':
           setIsMobileReplyThumbnailClicked(prevState => ({
             ...prevState,

From 5c82d8221720307bd29686478ac6683c8a916442 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 9 Sep 2023 21:22:50 +0200
Subject: [PATCH 6/6] remove embed dash

---
 src/components/views/Board.jsx  | 4 ++--
 src/components/views/Thread.jsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index e4f25ca7..bf3a0cef 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -1419,7 +1419,7 @@ const Board = () => {
                                     }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
                                     { (isThreadThumbnailClicked[index] || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
                                       <span>
-                                        -[
+                                        [
                                           <span className='reply-link' 
                                           style={{textDecoration: 'underline', cursor: 'pointer'}}
                                           onClick={() => {handleThumbnailClick(index, 'thread')}}>
@@ -2123,7 +2123,7 @@ const Board = () => {
                                           }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
                                           { (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
                                             <span>
-                                              -[
+                                              [
                                                 <span className='reply-link' 
                                                 style={{textDecoration: 'underline', cursor: 'pointer'}}
                                                 onClick={() => {handleThumbnailClick(index, 'reply')}}>
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 4743836e..dae8b86d 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -876,7 +876,7 @@ const Thread = () => {
                             }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
                             { (isThreadThumbnailClicked[index] || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
                               <span>
-                                -[
+                                [
                                   <span className='reply-link' 
                                   style={{textDecoration: 'underline', cursor: 'pointer'}}
                                   onClick={() => {handleThumbnailClick(index, 'thread')}}>
@@ -1536,7 +1536,7 @@ const Thread = () => {
                                 }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
                                 { (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
                                   <span>
-                                    -[
+                                    [
                                       <span className='reply-link' 
                                       style={{textDecoration: 'underline', cursor: 'pointer'}}
                                       onClick={() => {handleThumbnailClick(index, 'reply')}}>