From e2eb48e37d5624a1e51134b73f41cc5e4700c231 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 9 Sep 2023 22:27:05 +0200
Subject: [PATCH 01/11] fix import stringified account json

---
 src/components/modals/SettingsModal.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx
index 344fa278..c8995fdb 100755
--- a/src/components/modals/SettingsModal.jsx
+++ b/src/components/modals/SettingsModal.jsx
@@ -28,7 +28,12 @@ const SettingsModal = ({ isOpen, closeModal }) => {
 
   const account = useAccount();
   const { accounts } = useAccounts();
-  const accountJson = useMemo(() => stringify({...account}), [account])
+
+  const accountJson = useMemo(() => {
+    const { plebbit, ...restOfAccount } = account;
+    return stringify({ account: restOfAccount });
+  }, [account]);
+
   const [editedAccountJson, setEditedAccountJson] = useState(accountJson);
   useEffect(() => { setEditedAccountJson(accountJson)}, [accountJson])
 

From 48a0f36f417376b53c52df73fe3331f5d9052923 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 9 Sep 2023 22:31:59 +0200
Subject: [PATCH 02/11] fix undefined account

---
 src/components/modals/SettingsModal.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx
index c8995fdb..fbc33981 100755
--- a/src/components/modals/SettingsModal.jsx
+++ b/src/components/modals/SettingsModal.jsx
@@ -30,8 +30,10 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   const { accounts } = useAccounts();
 
   const accountJson = useMemo(() => {
-    const { plebbit, ...restOfAccount } = account;
-    return stringify({ account: restOfAccount });
+    if (account) {
+      const { plebbit, ...restOfAccount } = account;
+      return stringify({ account: restOfAccount });
+    }
   }, [account]);
 
   const [editedAccountJson, setEditedAccountJson] = useState(accountJson);

From b9c9d27a6c5956f0580e050c40c7595c87a3170a Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 9 Sep 2023 22:37:51 +0200
Subject: [PATCH 03/11] fix submit a challenge pressing enter

---
 src/components/modals/CaptchaModal.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/modals/CaptchaModal.jsx b/src/components/modals/CaptchaModal.jsx
index b5aa4438..7ac7cb79 100644
--- a/src/components/modals/CaptchaModal.jsx
+++ b/src/components/modals/CaptchaModal.jsx
@@ -37,7 +37,6 @@ const CaptchaModal = () => {
   }, [isCaptchaOpen, setIsAuthorDelete, setIsAuthorEdit, setIsModEdit]);
 
 
-
   useEffect(() => {
     const handleResize = () => setIsMobile(window.innerWidth <= 480);
     window.addEventListener('resize', handleResize);
@@ -71,7 +70,10 @@ const CaptchaModal = () => {
   const handleKeyDown = (event) => {
     if (event.key === "Enter") {
       event.preventDefault();
-      submitCaptcha();
+      submitCaptcha((response) => {
+        setCaptchaResponse(response);
+        resolveCaptchaPromise(response);
+      });
     }
   };
 

From 7ccb50a76d5f594c700a53f037ce6d28b48b2470 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 10 Sep 2023 09:02:42 +0200
Subject: [PATCH 04/11] remove json values karma, unreadNotificationCount

---
 src/components/modals/SettingsModal.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx
index fbc33981..f5eefe82 100755
--- a/src/components/modals/SettingsModal.jsx
+++ b/src/components/modals/SettingsModal.jsx
@@ -31,7 +31,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
 
   const accountJson = useMemo(() => {
     if (account) {
-      const { plebbit, ...restOfAccount } = account;
+      const { plebbit, karma, unreadNotificationCount, ...restOfAccount } = account;
       return stringify({ account: restOfAccount });
     }
   }, [account]);

From f226cc133879843a7844e75f89ae151d8feb01c6 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 10 Sep 2023 10:45:59 +0200
Subject: [PATCH 05/11] update reddit embed size

---
 src/components/styled/GlobalStyle.styled.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/styled/GlobalStyle.styled.jsx b/src/components/styled/GlobalStyle.styled.jsx
index 9ae4e259..dd49247c 100644
--- a/src/components/styled/GlobalStyle.styled.jsx
+++ b/src/components/styled/GlobalStyle.styled.jsx
@@ -81,7 +81,7 @@ export const GlobalStyle = createGlobalStyle`
 
     .reddit-embed {
       width: 500px;
-      height: 260px;
+      height: 520px;
     }
   }
 

From 78be27d07ecb7bf0f68b03b62fd889696fcc7e4c Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 10 Sep 2023 12:20:31 +0200
Subject: [PATCH 06/11] add info toast when a new version is available

---
 src/App.js           | 32 ++++++++++++++++++++++++++++++--
 src/hooks/useInfo.js | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 src/hooks/useInfo.js

diff --git a/src/App.js b/src/App.js
index 9b9ab199..f95e6737 100755
--- a/src/App.js
+++ b/src/App.js
@@ -22,8 +22,9 @@ import CaptchaModal from './components/modals/CaptchaModal';
 import { importAll } from './components/ImageBanner';
 import preloadImages from './utils/preloadImages';
 import useError from "./hooks/useError";
+import useInfo from "./hooks/useInfo";
 import useSuccess from "./hooks/useSuccess";
-
+import packageJson from '../package.json';
 
 export default function App() {
   const { 
@@ -41,21 +42,48 @@ export default function App() {
 
   const [, setNewErrorMessage] = useError();
   const [, setNewSuccessMessage] = useSuccess();
+  const [, setNewInfoMessage] = useInfo();
 
 
   useEffect(() => {
     const successToast = localStorage.getItem("successToast");
     const errorToast = localStorage.getItem("errorToast");
+    const infoToast = localStorage.getItem("infoToast");
     if (successToast) {
       setNewSuccessMessage(successToast);
       localStorage.removeItem("successToast");
     } else if (errorToast) {
       setNewErrorMessage(errorToast);
       localStorage.removeItem("errorToast");
+    } else if (infoToast) {
+      setNewInfoMessage(infoToast);
+      localStorage.removeItem("infoToast");
     } else {
       return;
     }
-  }, [setNewErrorMessage, setNewSuccessMessage]);
+  }, [setNewErrorMessage, setNewSuccessMessage, setNewInfoMessage]);
+  
+
+  // check for new version
+  useEffect(() => {
+    const fetchVersionInfo = async () => {
+      try {
+        const packageRes = await fetch('https://raw.githubusercontent.com/plebbit/plebchan/master/package.json', { cache: 'no-cache' });
+        const packageData = await packageRes.json();
+  
+        if (packageJson.version !== packageData.version) {
+          const newVersionInfo = `New version available, plebchan v${packageData.version}. Refresh the page to update.`;
+          localStorage.setItem('infoToast', newVersionInfo);;
+        }
+      } catch (error) {
+        console.error('Failed to fetch latest version info:', error);
+      }
+    };
+  
+    fetchVersionInfo();
+  }, [setNewInfoMessage]);
+
+
   
   // preload banners
   useEffect(() => {
diff --git a/src/hooks/useInfo.js b/src/hooks/useInfo.js
new file mode 100644
index 00000000..6d400841
--- /dev/null
+++ b/src/hooks/useInfo.js
@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+
+const useInfo = () => {
+  const [infoMessage, setInfoMessage] = useState('');
+  const [renderCount, setRenderCount] = useState(0);
+  
+  useEffect(() => {
+    if (infoMessage && infoMessage.length > 0) {
+      const showInfoToast = () => {
+        const toastId = toast.info(infoMessage.toString(), {
+          position: "top-right",
+          autoClose: false,
+          hideProgressBar: false,
+          closeOnClick: false,
+          pauseOnHover: false,
+          draggable: false,
+          progress: undefined,
+          theme: "dark",
+        });
+
+        return () => {
+          toast.dismiss(toastId);
+        };
+      };
+
+      const timeoutId = setTimeout(showInfoToast, 500);
+
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [infoMessage, renderCount]);
+
+  const setNewInfoMessage = (message) => {
+    setInfoMessage(message);
+    setRenderCount(prevCount => prevCount + 1);
+  };
+
+  return [infoMessage, setNewInfoMessage];
+};
+
+export default useInfo;
\ No newline at end of file

From 7593353705d7efd0b9caaca5e1b0606ac2defadf Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 10 Sep 2023 12:29:52 +0200
Subject: [PATCH 07/11] Update BoardStats.jsx

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

diff --git a/src/components/BoardStats.jsx b/src/components/BoardStats.jsx
index 1994b148..05851879 100644
--- a/src/components/BoardStats.jsx
+++ b/src/components/BoardStats.jsx
@@ -33,13 +33,13 @@ const BoardStats = ({ subplebbitAddress }) => {
           {showStats && (
             <tbody id="blotter-msgs">
               <tr>
-                <td>In the past hour, <span id="stat-number">{stats.hourActiveUserCount}</span> {pluralize(stats.hourActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.hourPostCount}</span> {pluralize(stats.hourPostCount, 'post', 'posts')} — in the past day, <span id="stat-number">{stats.dayActiveUserCount}</span> {pluralize(stats.dayActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.dayPostCount}</span> {pluralize(stats.dayPostCount, 'post', 'posts')}</td>
+                <td>In the past hour, <span id="stat-number">{stats.hourActiveUserCount}</span> {pluralize(stats.hourActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.hourPostCount}</span> {pluralize(stats.hourPostCount, 'post', 'posts')} / in the past day, <span id="stat-number">{stats.dayActiveUserCount}</span> {pluralize(stats.dayActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.dayPostCount}</span> {pluralize(stats.dayPostCount, 'post', 'posts')}</td>
               </tr>
               <tr>
-                <td>In the past week, <span id="stat-number">{stats.weekActiveUserCount}</span> {pluralize(stats.weekActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.weekPostCount}</span> {pluralize(stats.weekPostCount, 'post', 'posts')} — in the past month, <span id="stat-number">{stats.monthActiveUserCount}</span> {pluralize(stats.monthActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.monthPostCount}</span> {pluralize(stats.monthPostCount, 'post', 'posts')}</td>
+                <td>In the past week, <span id="stat-number">{stats.weekActiveUserCount}</span> {pluralize(stats.weekActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.weekPostCount}</span> {pluralize(stats.weekPostCount, 'post', 'posts')} / in the past month, <span id="stat-number">{stats.monthActiveUserCount}</span> {pluralize(stats.monthActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.monthPostCount}</span> {pluralize(stats.monthPostCount, 'post', 'posts')}</td>
               </tr>
               <tr>
-                <td>{unixToMMDDYYYY(subplebbit.createdAt)} board created — since then, <span id="stat-number">{stats.allActiveUserCount}</span> {pluralize(stats.allActiveUserCount, 'user', 'users')} have made <span id="stat-number">{stats.allPostCount}</span> {pluralize(stats.allPostCount, 'post', 'posts')}</td>
+                <td>{unixToMMDDYYYY(subplebbit.createdAt)} board created / since then, <span id="stat-number">{stats.allActiveUserCount}</span> {pluralize(stats.allActiveUserCount, 'user', 'users')} have made <span id="stat-number">{stats.allPostCount}</span> {pluralize(stats.allPostCount, 'post', 'posts')}</td>
               </tr>
             </tbody>
           )}

From 74ea304c4066e50805bef10666f712162f2b765f Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 10 Sep 2023 12:57:26 +0200
Subject: [PATCH 08/11] reduce jank from useAuthorAddress with placeholder

---
 src/components/views/All.jsx           | 12 ++++++------
 src/components/views/Board.jsx         | 12 ++++++------
 src/components/views/Subscriptions.jsx | 12 ++++++------
 src/components/views/Thread.jsx        |  8 ++++----
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index 5516b905..41acf41b 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -846,9 +846,9 @@ const All = () => {
                             (u/
                             <span key={`pa-${index}`} className="poster-address address-desktop"
                             id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
                             >
-                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
                             </span>)
                             &nbsp;
                             <span key={`dt-${index}`}
@@ -1163,7 +1163,7 @@ const All = () => {
                                 &nbsp;
                                 <span key={`pa-${index}`} className="poster-address address-desktop"
                                   id="reply-button" style={{cursor: "pointer"}}
-                                  onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                                  onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
                                 >
                                   (u/
                                     {reply.author?.shortAddress ?
@@ -1747,11 +1747,11 @@ const All = () => {
                             &nbsp;
                             <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                               id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
                             >
                               (u/
                               <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
                               </span>
                               )&nbsp;
                             </span>
@@ -1990,7 +1990,7 @@ const All = () => {
                               &nbsp;
                               <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                                 id="reply-button" style={{cursor: "pointer"}}
-                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
                               >
                                 (u/
                                   {reply.author?.shortAddress ?
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index efda4a33..0a5fc60b 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -1539,9 +1539,9 @@ const Board = () => {
                                   (u/
                                   <span key={`pa-${index}`} className="poster-address address-desktop"
                                   id="reply-button" style={{cursor: "pointer"}}
-                                    onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                                    onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
                                   >
-                                    <VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>
+                                    <VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>
                                   </span>)
                                   &nbsp;
                                   <span key={`dt-${index}`} className="date-time"
@@ -1870,7 +1870,7 @@ const Board = () => {
                                         &nbsp;
                                         <span key={`pa-${index}`} className="poster-address address-desktop"
                                           id="reply-button" style={{cursor: "pointer"}}
-                                          onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                                          onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
                                         >
                                           (u/
                                             {reply.author?.shortAddress ?
@@ -2457,11 +2457,11 @@ const Board = () => {
                                   &nbsp;
                                   <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                                     id="reply-button" style={{cursor: "pointer"}}
-                                    onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                                    onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
                                   >
                                     (u/
                                     <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                      {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                                      {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
                                     </span>
                                     )&nbsp;
                                   </span>
@@ -2695,7 +2695,7 @@ const Board = () => {
                                     &nbsp;
                                     <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                                       id="reply-button" style={{cursor: "pointer"}}
-                                      onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                                      onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
                                     >
                                       (u/
                                         {reply.author?.shortAddress ?
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index 5230af95..4b4c1e53 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -857,9 +857,9 @@ const Subscriptions = () => {
                             (u/
                             <span key={`pa-${index}`} className="poster-address address-desktop"
                             id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
                             >
-                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
                             </span>)
                             &nbsp;
                             <span key={`dt-${index}`} className="date-time"
@@ -1174,7 +1174,7 @@ const Subscriptions = () => {
                                 &nbsp;
                                 <span key={`pa-${index}`} className="poster-address address-desktop"
                                   id="reply-button" style={{cursor: "pointer"}}
-                                  onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                                  onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
                                 >
                                   (u/
                                     {reply.author?.shortAddress ?
@@ -1758,11 +1758,11 @@ const Subscriptions = () => {
                             &nbsp;
                             <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                               id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
                             >
                               (u/
                               <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
                               </span>
                               )&nbsp;
                             </span>
@@ -2001,7 +2001,7 @@ const Subscriptions = () => {
                               &nbsp;
                               <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                                 id="reply-button" style={{cursor: "pointer"}}
-                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
                               >
                                 (u/
                                   {reply.author?.shortAddress ?
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index c5d2766e..d0d66e1e 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -993,10 +993,10 @@ const Thread = () => {
                         &nbsp;
                         <span className="poster-address address-desktop"
                           id="reply-button" style={{cursor: "pointer"}}
-                          onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}>
+                          onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}>
                           (u/
                             <span key={`pa-${comment.cid}`} className="poster-address">
-                            {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                            {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
                           </span>)
                         </span>
                         &nbsp;
@@ -1755,11 +1755,11 @@ const Thread = () => {
                           &nbsp;
                           <span key={`mob-pa-${comment.cid}`} className="poster-address-mobile address-mobile"
                             id="reply-button" style={{cursor: "pointer"}}
-                            onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}
+                            onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
                           >
                             (u/
                             <span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile">
-                              {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                              {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
                             </span>
                             )&nbsp;
                           </span>

From e61f395107b6c96cca6503336d4d8357153ccf06 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 10 Sep 2023 13:07:40 +0200
Subject: [PATCH 09/11] improve placeholder

---
 src/components/views/All.jsx           | 12 ++++++------
 src/components/views/Board.jsx         | 12 ++++++------
 src/components/views/Subscriptions.jsx | 12 ++++++------
 src/components/views/Thread.jsx        |  8 ++++----
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index 41acf41b..6fd6979d 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -846,9 +846,9 @@ const All = () => {
                             (u/
                             <span key={`pa-${index}`} className="poster-address address-desktop"
                             id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
+                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                             >
-                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
+                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                             </span>)
                             &nbsp;
                             <span key={`dt-${index}`}
@@ -1163,7 +1163,7 @@ const All = () => {
                                 &nbsp;
                                 <span key={`pa-${index}`} className="poster-address address-desktop"
                                   id="reply-button" style={{cursor: "pointer"}}
-                                  onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
+                                  onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                                 >
                                   (u/
                                     {reply.author?.shortAddress ?
@@ -1747,11 +1747,11 @@ const All = () => {
                             &nbsp;
                             <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                               id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
+                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                             >
                               (u/
                               <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
+                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                               </span>
                               )&nbsp;
                             </span>
@@ -1990,7 +1990,7 @@ const All = () => {
                               &nbsp;
                               <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                                 id="reply-button" style={{cursor: "pointer"}}
-                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
+                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                               >
                                 (u/
                                   {reply.author?.shortAddress ?
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 0a5fc60b..5134adfb 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -1539,9 +1539,9 @@ const Board = () => {
                                   (u/
                                   <span key={`pa-${index}`} className="poster-address address-desktop"
                                   id="reply-button" style={{cursor: "pointer"}}
-                                    onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
+                                    onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                                   >
-                                    <VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>
+                                    <VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>
                                   </span>)
                                   &nbsp;
                                   <span key={`dt-${index}`} className="date-time"
@@ -1870,7 +1870,7 @@ const Board = () => {
                                         &nbsp;
                                         <span key={`pa-${index}`} className="poster-address address-desktop"
                                           id="reply-button" style={{cursor: "pointer"}}
-                                          onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
+                                          onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                                         >
                                           (u/
                                             {reply.author?.shortAddress ?
@@ -2457,11 +2457,11 @@ const Board = () => {
                                   &nbsp;
                                   <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                                     id="reply-button" style={{cursor: "pointer"}}
-                                    onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
+                                    onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                                   >
                                     (u/
                                     <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                      {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
+                                      {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                                     </span>
                                     )&nbsp;
                                   </span>
@@ -2695,7 +2695,7 @@ const Board = () => {
                                     &nbsp;
                                     <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                                       id="reply-button" style={{cursor: "pointer"}}
-                                      onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
+                                      onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                                     >
                                       (u/
                                         {reply.author?.shortAddress ?
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index 4b4c1e53..ac79c683 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -857,9 +857,9 @@ const Subscriptions = () => {
                             (u/
                             <span key={`pa-${index}`} className="poster-address address-desktop"
                             id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
+                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                             >
-                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
+                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                             </span>)
                             &nbsp;
                             <span key={`dt-${index}`} className="date-time"
@@ -1174,7 +1174,7 @@ const Subscriptions = () => {
                                 &nbsp;
                                 <span key={`pa-${index}`} className="poster-address address-desktop"
                                   id="reply-button" style={{cursor: "pointer"}}
-                                  onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
+                                  onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                                 >
                                   (u/
                                     {reply.author?.shortAddress ?
@@ -1758,11 +1758,11 @@ const Subscriptions = () => {
                             &nbsp;
                             <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                               id="reply-button" style={{cursor: "pointer"}}
-                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
+                              onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                             >
                               (u/
                               <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
+                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                               </span>
                               )&nbsp;
                             </span>
@@ -2001,7 +2001,7 @@ const Subscriptions = () => {
                               &nbsp;
                               <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
                                 id="reply-button" style={{cursor: "pointer"}}
-                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
+                                onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                               >
                                 (u/
                                   {reply.author?.shortAddress ?
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index d0d66e1e..355aab1d 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -993,10 +993,10 @@ const Thread = () => {
                         &nbsp;
                         <span className="poster-address address-desktop"
                           id="reply-button" style={{cursor: "pointer"}}
-                          onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}>
+                          onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}>
                           (u/
                             <span key={`pa-${comment.cid}`} className="poster-address">
-                            {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
+                            {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                           </span>)
                         </span>
                         &nbsp;
@@ -1755,11 +1755,11 @@ const Thread = () => {
                           &nbsp;
                           <span key={`mob-pa-${comment.cid}`} className="poster-address-mobile address-mobile"
                             id="reply-button" style={{cursor: "pointer"}}
-                            onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>)}
+                            onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                           >
                             (u/
                             <span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile">
-                              {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aBcDeFgHiLmN")}</VerifiedAuthor>}
+                              {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                             </span>
                             )&nbsp;
                           </span>

From 935e65221118931de9724df07d7a5719b9800d76 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 10 Sep 2023 13:43:33 +0200
Subject: [PATCH 10/11] update embeds p/all, p/subscriptions

---
 src/components/views/All.jsx           | 560 ++++++++++++++-----------
 src/components/views/Board.jsx         |   4 +-
 src/components/views/Subscriptions.jsx | 560 ++++++++++++++-----------
 src/components/views/Thread.jsx        |   4 +-
 4 files changed, 624 insertions(+), 504 deletions(-)

diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index 6fd6979d..a45db8ed 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -16,6 +16,7 @@ import EditModal from '../modals/EditModal';
 import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
 import ModerationModal from '../modals/ModerationModal';
+import Embed from '../Embed';
 import OfflineIndicator from '../OfflineIndicator';
 import PendingLabel from '../PendingLabel';
 import Post from '../Post';
@@ -709,110 +710,106 @@ const All = () => {
                         <hr key={`hr-${index}`} />
                         <div key={`pi-${index}`} className="post-info">
                         {commentMediaInfo?.url ? (
-                            <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
-                              <div key={`ft-${index}`} className="file-text">
-                                Link:&nbsp;
-                                <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
-                                rel="noopener noreferrer">{
-                                commentMediaInfo?.url.length > 30 ?
-                                commentMediaInfo?.url.slice(0, 30) + "(...)" :
-                                commentMediaInfo?.url
-                                }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
-                                {isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
-                                  <span>
-                                    -[
-                                      <span className='reply-link' 
-                                      style={{textDecoration: 'underline', cursor: 'pointer'}}
-                                      onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</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 />
-                                    ) : (
-                                      <img 
-                                        key={`fti-${index}`}
-                                        src={commentMediaInfo.thumbnail} 
-                                        alt="thumbnail"
-                                        onClick={() => {handleThumbnailClick(index, 'thread')}}
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                    )}
-                                  </span>
-                                </div>
+                          <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                            <div key={`ft-${index}`} className="file-text">
+                              Link:&nbsp;
+                              <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
+                              rel="noopener noreferrer">{
+                              commentMediaInfo?.url.length > 30 ?
+                              commentMediaInfo?.url.slice(0, 30) + "(...)" :
+                              commentMediaInfo?.url
+                              }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
+                              {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
+                                <span>
+                                  [
+                                    <span className='reply-link' 
+                                    style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                    onClick={() => {handleThumbnailClick(index, 'thread')}}>
+                                      {isThreadThumbnailClicked[index] ? 'Close' : 'Embed'}
+                                    </span>
+                                  ]
+                                </span>
                               )}
-                              {commentMediaInfo?.type === "webpage" ? (
-                                <div key={`enlarge-${index}`} className="img-container">
-                                  <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidth, height: displayHeight}}>
-                                    {thread.thumbnailUrl ? (
-                                      <img key={`fti-${index}`} 
-                                      src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
-                                      onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
-                                      style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                    ) : null}
-                                  </span>
-                                </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "image" ? (
-                                <div key={`enlarge-${index}`} className="img-container">
-                                  <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
-                                    <img key={`fti-${index}`} 
-                                    src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                    onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
-                                    style={{cursor: "pointer"}}
-                                    onError={(e) => e.target.src = fallbackImgUrl} />
-                                  </span>
-                                </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "video" ? (
-                              <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] ? (
-                                    <video 
-                                      className='enlarged'
-                                      key={`fti-${index}`} 
-                                      src={commentMediaInfo.url} 
-                                      controls
-                                      style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} 
-                                    />
-                                  ) : (
-                                    <video 
+                            </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] || !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.url} 
+                                      src={commentMediaInfo.thumbnail} 
                                       alt="thumbnail"
                                       onClick={() => {handleThumbnailClick(index, 'thread')}}
                                       style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} 
-                                    />
-                                  )}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                  ) : null}
                                 </span>
                               </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "audio" ? (
+                            )}
+                            {commentMediaInfo?.type === "webpage" ? (
+                              <div key={`enlarge-${index}`} className="img-container">
+                                <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidth, height: displayHeight}}>
+                                  {thread.thumbnailUrl ? (
+                                    <img key={`fti-${index}`} 
+                                    src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                                    onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  ) : null}
+                                </span>
+                              </div>
+                            ) : null}
+                            {commentMediaInfo?.type === "image" ? (
+                              <div key={`enlarge-${index}`} className="img-container">
                                 <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
-                                  <audio controls key={`fti-${index}`} 
+                                  <img key={`fti-${index}`} 
                                   src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                  onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
+                                  style={{cursor: "pointer"}}
                                   onError={(e) => e.target.src = fallbackImgUrl} />
                                 </span>
-                              ) : null}
+                              </div>
+                            ) : null}
+                            {commentMediaInfo?.type === "video" ? (
+                            <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] ? (
+                                  <video 
+                                    className='enlarged'
+                                    key={`fti-${index}`} 
+                                    src={commentMediaInfo.url} 
+                                    controls
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} 
+                                  />
+                                ) : (
+                                  <video 
+                                    key={`fti-${index}`}
+                                    src={commentMediaInfo.url} 
+                                    alt="thumbnail"
+                                    onClick={() => {handleThumbnailClick(index, 'thread')}}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} 
+                                  />
+                                )}
+                              </span>
                             </div>
-                          ) : null}
+                            ) : null}
+                            {commentMediaInfo?.type === "audio" ? (
+                              <span key={`fta-${index}`} className="file-thumb">
+                                <audio controls key={`fti-${index}`} 
+                                src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                onError={(e) => e.target.src = fallbackImgUrl} />
+                              </span>
+                            ) : null}
+                          </div>
+                        ) : null}
                           <span key={`nb-${index}`} className="name-block">
                             {thread.title ? (
                               thread.title.length > 75 ?
@@ -1420,33 +1417,53 @@ const All = () => {
                               </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.type === 'video')) || (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"}}
@@ -1454,51 +1471,50 @@ const All = () => {
                                       ) : 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 ? (
@@ -1819,108 +1835,102 @@ const All = () => {
                           </span>
                         </div>
                         {thread.link ? (
-                            <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" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
-                                    {(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 />
+                          <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" 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>
-                              )}
-                                {commentMediaInfo?.url ? (
-                                  commentMediaInfo.type === "webpage" ? (
-                                    <div key={`enlarge-mob-${index}`} className="img-container">
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
-                                        {thread.thumbnailUrl ? (
-                                          <img key={`mob-img-${index}`} 
-                                          src={commentMediaInfo.thumbnail} alt="thumbnail" 
-                                          onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
-                                          style={{cursor: "pointer"}}
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        ) : null}
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                    </div>
-                                  ) : commentMediaInfo.type === "image" ? (
-                                    <div key={`enlarge-mob-${index}`} className="img-container">
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      <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">
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      {thread.thumbnailUrl ? (
                                         <img key={`mob-img-${index}`} 
-                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                        src={commentMediaInfo.thumbnail} alt="thumbnail" 
                                         onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
                                         style={{cursor: "pointer"}}
                                         onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                    </div>
-                                  ) : commentMediaInfo.type === "video" ? (
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
-                                        {isMobileThreadThumbnailClicked[index] ? (
-                                          <video key={`fti-${index}`} 
-                                          src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                          controls
-                                          style={{ cursor: 'pointer' }} 
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        ) : (
-                                          <video 
-                                            key={`fti-${index}`}
-                                            src={commentMediaInfo.url} 
-                                            alt="thumbnail"
-                                            onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
-                                            style={{cursor: "pointer"}}
-                                            id="video-thumbnail-mobile"
-                                            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>
-                                  ) : commentMediaInfo.type === "audio" ? (
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
-                                        <audio key={`mob-img-${index}`} 
-                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                      ) : null}
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                  </div>
+                                ) : commentMediaInfo.type === "image" ? (
+                                  <div key={`enlarge-mob-${index}`} className="img-container">
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      <img key={`mob-img-${index}`} 
+                                      src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                      onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                  </div>
+                                ) : commentMediaInfo.type === "video" ? (
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                                      {isMobileThreadThumbnailClicked[index] ? (
+                                        <video key={`fti-${index}`} 
+                                        src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                        controls
+                                        style={{ cursor: 'pointer' }} 
                                         onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                  ) : null
-                                ) : null}
-                            </div>
-                          ) : null}
+                                      ) : (
+                                        <video 
+                                          key={`fti-${index}`}
+                                          src={commentMediaInfo.url} 
+                                          alt="thumbnail"
+                                          onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
+                                          style={{cursor: "pointer"}}
+                                          id="video-thumbnail-mobile"
+                                          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>
+                                ) : commentMediaInfo.type === "audio" ? (
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      <audio key={`mob-img-${index}`} 
+                                      src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                ) : null
+                              ) : null}
+                          </div>
+                        ) : null}
                         {thread.content ? (
                           thread.content?.length > 500 ?
                           <Fragment key={`fragment12-${index}`}>
@@ -2065,7 +2075,35 @@ const All = () => {
                           {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 ? (
@@ -2090,13 +2128,35 @@ const All = () => {
                                       </span>
                                     </div>
                                   ) : replyMediaInfo.type === "video" ? (
-                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
-                                          <video key={`fti-${index}`} 
-                                          src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                          style={{ pointerEvents: "none" }}
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                      </span>
+                                    <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}
+                                        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} 
+                                        />
+                                      )}
+                                      {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">video</div>
+                                      )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                    </span>
                                   ) : replyMediaInfo.type === "audio" ? (
                                       <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
                                         <audio key={`mob-img-${index}`} 
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 5134adfb..6cf06658 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -1415,7 +1415,7 @@ const Board = () => {
                                     commentMediaInfo?.url.slice(0, 30) + "(...)" :
                                     commentMediaInfo?.url
                                     }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
-                                    { (isThreadThumbnailClicked[index] || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
+                                    {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
                                       <span>
                                         [
                                           <span className='reply-link' 
@@ -2119,7 +2119,7 @@ const Board = () => {
                                           replyMediaInfo?.url.slice(0, 30) + "(...)" :
                                           replyMediaInfo?.url
                                           }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
-                                          { (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
+                                          { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
                                             <span>
                                               [
                                                 <span className='reply-link' 
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index ac79c683..8ef61c22 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -17,6 +17,7 @@ import EditModal from '../modals/EditModal';
 import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
 import ModerationModal from '../modals/ModerationModal';
+import Embed from '../Embed';
 import OfflineIndicator from '../OfflineIndicator';
 import PendingLabel from '../PendingLabel';
 import Post from '../Post';
@@ -720,110 +721,106 @@ const Subscriptions = () => {
                         <hr key={`hr-${index}`} />
                         <div key={`pi-${index}`} className="post-info">
                         {commentMediaInfo?.url ? (
-                            <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
-                              <div key={`ft-${index}`} className="file-text">
-                                Link:&nbsp;
-                                <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
-                                rel="noopener noreferrer">{
-                                commentMediaInfo?.url.length > 30 ?
-                                commentMediaInfo?.url.slice(0, 30) + "(...)" :
-                                commentMediaInfo?.url
-                                }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
-                                {isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
-                                  <span>
-                                    -[
-                                      <span className='reply-link' 
-                                      style={{textDecoration: 'underline', cursor: 'pointer'}}
-                                      onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</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 />
-                                    ) : (
-                                      <img 
-                                        key={`fti-${index}`}
-                                        src={commentMediaInfo.thumbnail} 
-                                        alt="thumbnail"
-                                        onClick={() => {handleThumbnailClick(index, 'thread')}}
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                    )}
-                                  </span>
-                                </div>
+                          <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                            <div key={`ft-${index}`} className="file-text">
+                              Link:&nbsp;
+                              <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
+                              rel="noopener noreferrer">{
+                              commentMediaInfo?.url.length > 30 ?
+                              commentMediaInfo?.url.slice(0, 30) + "(...)" :
+                              commentMediaInfo?.url
+                              }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
+                              {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
+                                <span>
+                                  [
+                                    <span className='reply-link' 
+                                    style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                    onClick={() => {handleThumbnailClick(index, 'thread')}}>
+                                      {isThreadThumbnailClicked[index] ? 'Close' : 'Embed'}
+                                    </span>
+                                  ]
+                                </span>
                               )}
-                              {commentMediaInfo?.type === "webpage" ? (
-                                <div key={`enlarge-${index}`} className="img-container">
-                                  <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidth, height: displayHeight}}>
-                                    {thread.thumbnailUrl ? (
-                                      <img key={`fti-${index}`} 
-                                      src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
-                                      onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
-                                      style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                    ) : null}
-                                  </span>
-                                </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "image" ? (
-                                <div key={`enlarge-${index}`} className="img-container">
-                                  <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
-                                    <img key={`fti-${index}`} 
-                                    src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                    onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
-                                    style={{cursor: "pointer"}}
-                                    onError={(e) => e.target.src = fallbackImgUrl} />
-                                  </span>
-                                </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "video" ? (
-                              <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] ? (
-                                    <video 
-                                      className='enlarged'
-                                      key={`fti-${index}`} 
-                                      src={commentMediaInfo.url} 
-                                      controls
-                                      style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} 
-                                    />
-                                  ) : (
-                                    <video 
+                            </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] || !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.url} 
+                                      src={commentMediaInfo.thumbnail} 
                                       alt="thumbnail"
                                       onClick={() => {handleThumbnailClick(index, 'thread')}}
                                       style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} 
-                                    />
-                                  )}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                  ) : null}
                                 </span>
                               </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "audio" ? (
+                            )}
+                            {commentMediaInfo?.type === "webpage" ? (
+                              <div key={`enlarge-${index}`} className="img-container">
+                                <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidth, height: displayHeight}}>
+                                  {thread.thumbnailUrl ? (
+                                    <img key={`fti-${index}`} 
+                                    src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                                    onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  ) : null}
+                                </span>
+                              </div>
+                            ) : null}
+                            {commentMediaInfo?.type === "image" ? (
+                              <div key={`enlarge-${index}`} className="img-container">
                                 <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
-                                  <audio controls key={`fti-${index}`} 
+                                  <img key={`fti-${index}`} 
                                   src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                  onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
+                                  style={{cursor: "pointer"}}
                                   onError={(e) => e.target.src = fallbackImgUrl} />
                                 </span>
-                              ) : null}
+                              </div>
+                            ) : null}
+                            {commentMediaInfo?.type === "video" ? (
+                            <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] ? (
+                                  <video 
+                                    className='enlarged'
+                                    key={`fti-${index}`} 
+                                    src={commentMediaInfo.url} 
+                                    controls
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} 
+                                  />
+                                ) : (
+                                  <video 
+                                    key={`fti-${index}`}
+                                    src={commentMediaInfo.url} 
+                                    alt="thumbnail"
+                                    onClick={() => {handleThumbnailClick(index, 'thread')}}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} 
+                                  />
+                                )}
+                              </span>
                             </div>
-                          ) : null}
+                            ) : null}
+                            {commentMediaInfo?.type === "audio" ? (
+                              <span key={`fta-${index}`} className="file-thumb">
+                                <audio controls key={`fti-${index}`} 
+                                src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                onError={(e) => e.target.src = fallbackImgUrl} />
+                              </span>
+                            ) : null}
+                          </div>
+                        ) : null}
                           <span key={`nb-${index}`} className="name-block">
                             {thread.title ? (
                               thread.title.length > 75 ?
@@ -1431,33 +1428,53 @@ const Subscriptions = () => {
                               </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.type === 'video')) || (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"}}
@@ -1465,51 +1482,50 @@ const Subscriptions = () => {
                                       ) : 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 ? (
@@ -1830,108 +1846,102 @@ const Subscriptions = () => {
                           </span>
                         </div>
                         {thread.link ? (
-                            <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" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
-                                    {(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 />
+                          <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" 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>
-                              )}
-                                {commentMediaInfo?.url ? (
-                                  commentMediaInfo.type === "webpage" ? (
-                                    <div key={`enlarge-mob-${index}`} className="img-container">
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
-                                        {thread.thumbnailUrl ? (
-                                          <img key={`mob-img-${index}`} 
-                                          src={commentMediaInfo.thumbnail} alt="thumbnail" 
-                                          onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
-                                          style={{cursor: "pointer"}}
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        ) : null}
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                    </div>
-                                  ) : commentMediaInfo.type === "image" ? (
-                                    <div key={`enlarge-mob-${index}`} className="img-container">
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      <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">
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      {thread.thumbnailUrl ? (
                                         <img key={`mob-img-${index}`} 
-                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                        src={commentMediaInfo.thumbnail} alt="thumbnail" 
                                         onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
                                         style={{cursor: "pointer"}}
                                         onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                    </div>
-                                  ) : commentMediaInfo.type === "video" ? (
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
-                                        {isMobileThreadThumbnailClicked[index] ? (
-                                          <video key={`fti-${index}`} 
-                                          src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                          controls
-                                          style={{ cursor: 'pointer' }} 
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        ) : (
-                                          <video 
-                                            key={`fti-${index}`}
-                                            src={commentMediaInfo.url} 
-                                            alt="thumbnail"
-                                            onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
-                                            style={{cursor: "pointer"}}
-                                            id="video-thumbnail-mobile"
-                                            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>
-                                  ) : commentMediaInfo.type === "audio" ? (
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
-                                        <audio key={`mob-img-${index}`} 
-                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                      ) : null}
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                  </div>
+                                ) : commentMediaInfo.type === "image" ? (
+                                  <div key={`enlarge-mob-${index}`} className="img-container">
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      <img key={`mob-img-${index}`} 
+                                      src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                      onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                  </div>
+                                ) : commentMediaInfo.type === "video" ? (
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                                      {isMobileThreadThumbnailClicked[index] ? (
+                                        <video key={`fti-${index}`} 
+                                        src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                        controls
+                                        style={{ cursor: 'pointer' }} 
                                         onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                  ) : null
-                                ) : null}
-                            </div>
-                          ) : null}
+                                      ) : (
+                                        <video 
+                                          key={`fti-${index}`}
+                                          src={commentMediaInfo.url} 
+                                          alt="thumbnail"
+                                          onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
+                                          style={{cursor: "pointer"}}
+                                          id="video-thumbnail-mobile"
+                                          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>
+                                ) : commentMediaInfo.type === "audio" ? (
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      <audio key={`mob-img-${index}`} 
+                                      src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                ) : null
+                              ) : null}
+                          </div>
+                        ) : null}
                         {thread.content ? (
                           thread.content?.length > 500 ?
                           <Fragment key={`fragment12-${index}`}>
@@ -2076,7 +2086,35 @@ const Subscriptions = () => {
                           {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 ? (
@@ -2101,13 +2139,35 @@ const Subscriptions = () => {
                                       </span>
                                     </div>
                                   ) : replyMediaInfo.type === "video" ? (
-                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
-                                          <video key={`fti-${index}`} 
-                                          src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                          style={{ pointerEvents: "none" }}
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                      </span>
+                                    <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}
+                                        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} 
+                                        />
+                                      )}
+                                      {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">video</div>
+                                      )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                    </span>
                                   ) : replyMediaInfo.type === "audio" ? (
                                       <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
                                         <audio key={`mob-img-${index}`} 
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 355aab1d..ad6d0db4 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -871,7 +871,7 @@ const Thread = () => {
                             commentMediaInfo?.url.slice(0, 30) + "(...)" :
                             commentMediaInfo?.url
                             }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
-                            { (isThreadThumbnailClicked[index] || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
+                            {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
                               <span>
                                 [
                                   <span className='reply-link' 
@@ -1531,7 +1531,7 @@ const Thread = () => {
                                 replyMediaInfo?.url.slice(0, 30) + "(...)" :
                                 replyMediaInfo?.url
                                 }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
-                                { (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
+                                { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
                                   <span>
                                     [
                                       <span className='reply-link' 

From d9f62a346e57e04be4ac3ee3b5cb371d346f6cc5 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 10 Sep 2023 14:12:25 +0200
Subject: [PATCH 11/11] add commitRef for netlify to all views

---
 src/components/modals/SettingsModal.jsx       | 3 ++-
 src/components/views/All.jsx                  | 3 ++-
 src/components/views/AllCatalog.jsx           | 3 ++-
 src/components/views/Board.jsx                | 3 ++-
 src/components/views/Catalog.jsx              | 3 ++-
 src/components/views/Description.jsx          | 3 ++-
 src/components/views/Home.jsx                 | 3 +--
 src/components/views/NotFound.jsx             | 3 ++-
 src/components/views/Pending.jsx              | 3 ++-
 src/components/views/Rules.jsx                | 3 ++-
 src/components/views/Subscriptions.jsx        | 3 ++-
 src/components/views/SubscriptionsCatalog.jsx | 3 ++-
 src/components/views/Thread.jsx               | 3 ++-
 13 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx
index f5eefe82..2a97e032 100755
--- a/src/components/modals/SettingsModal.jsx
+++ b/src/components/modals/SettingsModal.jsx
@@ -10,6 +10,7 @@ import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json';
 const {version} = packageJson;
+const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 
 const SettingsModal = ({ isOpen, closeModal }) => {
@@ -423,7 +424,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
       <div className="panel">
         <div className="panel-header">
           <span id="version">
-            v{version} -&nbsp;
+            v{version}{commitRef} -&nbsp;
             {window.electron && window.electron.isElectron ? (
               <Link className="all-button" id="node-stats" to="http://localhost:5001/webui/" target="_blank" rel="noreferrer">
                 full node
diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index a45db8ed..5c18e161 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -47,6 +47,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json';
 const {version} = packageJson;
 let lastVirtuosoStates = {};
+const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 
 const All = () => {
@@ -2540,7 +2541,7 @@ const All = () => {
             </>
           </NavBar>
           <div id="version">
-            plebchan v{version}. GPL-2.0
+            plebchan v{version}{commitRef}. GPL-2.0
           </div>
           <div className="footer-links"
             style={{
diff --git a/src/components/views/AllCatalog.jsx b/src/components/views/AllCatalog.jsx
index 39d6f290..54b7d640 100755
--- a/src/components/views/AllCatalog.jsx
+++ b/src/components/views/AllCatalog.jsx
@@ -33,6 +33,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json';
 const {version} = packageJson;
 let lastVirtuosoStates = {};
+const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 
 const CatalogPost = ({post}) => {
@@ -972,7 +973,7 @@ const AllCatalog = () => {
             </>
           </NavBar>
           <div id="version">
-            plebchan v{version}. GPL-2.0
+            plebchan v{version}{commitRef}. GPL-2.0
           </div>
           <div className="footer-links"
             style={{
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 6cf06658..c35b0567 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -51,6 +51,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json';
 const {version} = packageJson;
 let lastVirtuosoStates = {};
+const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 
 const Board = () => {
@@ -3219,7 +3220,7 @@ const Board = () => {
             </>
           </NavBar>
           <div id="version">
-            plebchan v{version}. GPL-2.0
+            plebchan v{version}{commitRef}. GPL-2.0
           </div>
           <div className="footer-links"
             style={{
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx
index ba4cf256..eb45a500 100755
--- a/src/components/views/Catalog.jsx
+++ b/src/components/views/Catalog.jsx
@@ -38,6 +38,7 @@ import useWindowWidth from '../../hooks/useWindowWidth';
 import packageJson from '../../../package.json';
 const {version} = packageJson;
 let lastVirtuosoStates = {};
+const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 
 const CatalogPost = ({post}) => {
@@ -1630,7 +1631,7 @@ const Catalog = () => {
             </>
           </NavBar>
           <div id="version">
-            plebchan v{version}. GPL-2.0
+            plebchan v{version}{commitRef}. GPL-2.0
           </div>
           <div className="footer-links"
             style={{
diff --git a/src/components/views/Description.jsx b/src/components/views/Description.jsx
index 7e4956a2..8fefea1e 100644
--- a/src/components/views/Description.jsx
+++ b/src/components/views/Description.jsx
@@ -22,6 +22,7 @@ import handleStyleChange from '../../utils/handleStyleChange';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json';
 const {version} = packageJson;
+const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 
 const Description = () => {
@@ -511,7 +512,7 @@ const Description = () => {
             </>
           </NavBar>
           <div id="version">
-            plebchan v{version}. GPL-2.0
+            plebchan v{version}{commitRef}. GPL-2.0
           </div>
           <div className="footer-links"
             style={{
diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx
index 216ebeba..99414c8a 100644
--- a/src/components/views/Home.jsx
+++ b/src/components/views/Home.jsx
@@ -10,8 +10,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json';
 import { Tooltip } from 'react-tooltip';
 const {version} = packageJson;
-// show commit ref on netlify to know which commit is being served for debugging
-const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : ''
+const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 
 const Home = () => {
diff --git a/src/components/views/NotFound.jsx b/src/components/views/NotFound.jsx
index 13b35da9..e6815d21 100644
--- a/src/components/views/NotFound.jsx
+++ b/src/components/views/NotFound.jsx
@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import { Container, Header, Logo, Page, Boards, BoardsTitle } from '../styled/views/Home.styled';
 import packageJson from '../../../package.json';
 const {version} = packageJson;
+const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 
 const NotFound = () => {
@@ -61,7 +62,7 @@ const NotFound = () => {
           fontSize: "11px",
           marginTop: "2em",
         }}>
-          plebchan v{version}. GPL-2.0
+          plebchan v{version}{commitRef}. GPL-2.0
         </div>
       </Container>
     </>
diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx
index 62943f91..d1e10ded 100755
--- a/src/components/views/Pending.jsx
+++ b/src/components/views/Pending.jsx
@@ -21,6 +21,7 @@ import useError from '../../hooks/useError';
 import useStateString from '../../hooks/useStateString';
 import packageJson from '../../../package.json';
 const {version} = packageJson;
+const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 
 const Pending = () => {
@@ -601,7 +602,7 @@ const Pending = () => {
           marginTop: "2em",
           marginBottom: "2em",
         }}>
-          plebchan v{version}. GPL-2.0
+          plebchan v{version}{commitRef}. GPL-2.0
         </div>
       </Container>
     </>
diff --git a/src/components/views/Rules.jsx b/src/components/views/Rules.jsx
index 4ea80089..cb478da7 100644
--- a/src/components/views/Rules.jsx
+++ b/src/components/views/Rules.jsx
@@ -20,6 +20,7 @@ import handleStyleChange from '../../utils/handleStyleChange';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json';
 const {version} = packageJson;
+const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 
 const Rules = () => {
@@ -509,7 +510,7 @@ const Rules = () => {
             </>
           </NavBar>
           <div id="version">
-            plebchan v{version}. GPL-2.0
+            plebchan v{version}{commitRef}. GPL-2.0
           </div>
           <div className="footer-links"
             style={{
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index 8ef61c22..b7bb60d1 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -47,6 +47,7 @@ import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import packageJson from '../../../package.json';
 const {version} = packageJson;
 let lastVirtuosoStates = {};
+const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 
 const Subscriptions = () => {
@@ -2547,7 +2548,7 @@ const Subscriptions = () => {
             </>
           </NavBar>
           <div id="version">
-            plebchan v{version}. GPL-2.0
+            plebchan v{version}{commitRef}. GPL-2.0
           </div>
           <div className="footer-links"
             style={{
diff --git a/src/components/views/SubscriptionsCatalog.jsx b/src/components/views/SubscriptionsCatalog.jsx
index 38937c37..1e4babea 100755
--- a/src/components/views/SubscriptionsCatalog.jsx
+++ b/src/components/views/SubscriptionsCatalog.jsx
@@ -33,6 +33,7 @@ import useWindowWidth from '../../hooks/useWindowWidth';
 import packageJson from '../../../package.json';
 const {version} = packageJson;
 let lastVirtuosoStates = {};
+const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 
 const CatalogPost = ({post}) => {
@@ -982,7 +983,7 @@ const SubscriptionsCatalog = () => {
             </>
           </NavBar>
           <div id="version">
-            plebchan v{version}. GPL-2.0
+            plebchan v{version}{commitRef}. GPL-2.0
           </div>
           <div className="footer-links"
             style={{
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index ad6d0db4..f79be8b0 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -47,6 +47,7 @@ import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json';
 const {version} = packageJson;
+const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
 
 
 const Thread = () => {
@@ -2459,7 +2460,7 @@ const Thread = () => {
             </>
           </NavBar>
           <div id="version">
-            plebchan v{version}. GPL-2.0
+            plebchan v{version}{commitRef}. GPL-2.0
           </div>
           <div className="footer-links"
             style={{