Merge pull request #231 from plebbit/development

Development

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(() => {

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>
           )}

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);
+      });
     }
   };
 

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 }) => {
@@ -28,7 +29,14 @@ const SettingsModal = ({ isOpen, closeModal }) => {
 
   const account = useAccount();
   const { accounts } = useAccounts();
-  const accountJson = useMemo(() => stringify({...account}), [account])
+
+  const accountJson = useMemo(() => {
+    if (account) {
+      const { plebbit, karma, unreadNotificationCount, ...restOfAccount } = account;
+      return stringify({ account: restOfAccount });
+    }
+  }, [account]);
+
   const [editedAccountJson, setEditedAccountJson] = useState(accountJson);
   useEffect(() => { setEditedAccountJson(accountJson)}, [accountJson])
 
@@ -416,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

src/components/styled/GlobalStyle.styled.jsx

@@ -81,7 +81,7 @@ export const GlobalStyle = createGlobalStyle`
 
     .reddit-embed {
       width: 500px;
-      height: 260px;
+      height: 520px;
     }
   }
 

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';
@@ -46,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 = () => {
@@ -709,110 +711,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 ?
@@ -846,9 +844,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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                             >
-                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                             </span>)
                             &nbsp;
                             <span key={`dt-${index}`}
@@ -1163,7 +1161,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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                                 >
                                   (u/
                                     {reply.author?.shortAddress ?
@@ -1420,33 +1418,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 +1472,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 ? (
@@ -1747,11 +1764,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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                             >
                               (u/
                               <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                               </span>
                               )&nbsp;
                             </span>
@@ -1819,108 +1836,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}`}>
@@ -1990,7 +2001,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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                               >
                                 (u/
                                   {reply.author?.shortAddress ?
@@ -2065,7 +2076,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 +2129,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}`} 
@@ -2480,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={{

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={{

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 = () => {
@@ -1415,7 +1416,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' 
@@ -1539,9 +1540,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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                                   >
-                                    <VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>
+                                    <VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>
                                   </span>)
                                   &nbsp;
                                   <span key={`dt-${index}`} className="date-time"
@@ -1870,7 +1871,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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                                         >
                                           (u/
                                             {reply.author?.shortAddress ?
@@ -2119,7 +2120,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' 
@@ -2457,11 +2458,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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                                   >
                                     (u/
                                     <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                      {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                                      {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                                     </span>
                                     )&nbsp;
                                   </span>
@@ -2695,7 +2696,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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                                     >
                                       (u/
                                         {reply.author?.shortAddress ?
@@ -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={{

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={{

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={{

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 = () => {

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>
     </>

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>
     </>

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={{

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';
@@ -46,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 = () => {
@@ -720,110 +722,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 ?
@@ -857,9 +855,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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                             >
-                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                              {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                             </span>)
                             &nbsp;
                             <span key={`dt-${index}`} className="date-time"
@@ -1174,7 +1172,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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                                 >
                                   (u/
                                     {reply.author?.shortAddress ?
@@ -1431,33 +1429,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 +1483,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 ? (
@@ -1758,11 +1775,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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                             >
                               (u/
                               <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                                {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                               </span>
                               )&nbsp;
                             </span>
@@ -1830,108 +1847,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}`}>
@@ -2001,7 +2012,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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
                               >
                                 (u/
                                   {reply.author?.shortAddress ?
@@ -2076,7 +2087,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 +2140,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}`} 
@@ -2487,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={{

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={{

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 = () => {
@@ -871,7 +872,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' 
@@ -993,10 +994,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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}>
                           (u/
                             <span key={`pa-${comment.cid}`} className="poster-address">
-                            {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
+                            {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                           </span>)
                         </span>
                         &nbsp;
@@ -1531,7 +1532,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' 
@@ -1755,11 +1756,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 || "aPL4c3H0Ld3r")}</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 || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
                             </span>
                             )&nbsp;
                           </span>
@@ -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={{

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;