From 2db2aa545d5da2d92bde33ee6b2485b60e5ddeec Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Wed, 29 Mar 2023 22:02:44 +0200
Subject: [PATCH] added media anchors on mobile

---
 src/components/views/Board.jsx               | 143 +++++++++----------
 src/components/views/styles/Board.styled.jsx | 126 ++++++++--------
 2 files changed, 133 insertions(+), 136 deletions(-)

diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index e81cd9b7..55bcfdb1 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -399,7 +399,8 @@ const Board = () => {
                         <div key={`f-${thread.cid}`} className="file" style={{marginBottom: "5px"}}>
                           <div key={`ft-${thread.cid}`} className="file-text">
                             Link:&nbsp;
-                            <a key={`fa-${thread.cid}`} href={commentMediaInfo.url} target="_blank">{
+                            <a key={`fa-${thread.cid}`} href={commentMediaInfo.url} target="_blank"
+                            rel="noopener noreferrer">{
                             commentMediaInfo?.url.length > 30 ?
                             commentMediaInfo?.url.slice(0, 30) + "(...)" :
                             commentMediaInfo?.url
@@ -579,7 +580,8 @@ const Board = () => {
                             style={{marginBottom: "5px"}}>
                               <div key={`ft-${reply.cid}`} className="reply-file-text">
                                 Link:&nbsp;
-                                <a key={`fa-${reply.cid}`} href={replyMediaInfo.url} target="_blank">{
+                                <a key={`fa-${reply.cid}`} href={replyMediaInfo.url} target="_blank"
+                                rel="noopener noreferrer">{
                                 replyMediaInfo?.url.length > 30 ?
                                 replyMediaInfo?.url.slice(0, 30) + "(...)" :
                                 replyMediaInfo?.url
@@ -698,40 +700,39 @@ const Board = () => {
                           <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no2-${thread.cid}`} onClick={handleReplyOpen} title="Reply to this post">{thread.cid.slice(0, 8)}</button>
                         </span>
                       </div>
-                      {commentMediaInfo?.url ? (
-                        commentMediaInfo.type === "webpage" ? (
-                          <div key={`mob-f-${thread.cid}`} className="file-mobile">
-                            <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                              <img key={`mob-img-${thread.cid}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
-                              <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                            </span>
-                          </div>
-                        ) : commentMediaInfo.type === "image" ? (
-                          <div key={`mob-f-${thread.cid}`} className="file-mobile">
-                            <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                              <img key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                              <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                            </span>
-                          </div>
-                        ) : commentMediaInfo.type === "video" ? (
-                          <div key={`mob-f-${thread.cid}`} className="file-mobile">
-                            <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                              <video key={`fti-${thread.cid}`} 
-                              src={commentMediaInfo.url} 
-                              alt={commentMediaInfo.type}
-                              style={{ pointerEvents: "none" }} 
-                              onError={(e) => e.target.src = fallbackImgUrl} />
-                              <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                            </span>
-                          </div>
-                        ) : commentMediaInfo.type === "audio" ? (
-                          <div key={`mob-f-${thread.cid}`} className="file-mobile">
-                            <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                              <audio key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                              <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
-                            </span>
-                          </div>
-                        ) : null
+                      {thread.link ? (
+                        <div key={`mob-f-${thread.cid}`} className="file-mobile">
+                          <a key={`link-a-${thread.cid}`} href={commentMediaInfo?.url} target="_blank"
+                          rel="noopener noreferrer">
+                            {commentMediaInfo?.url ? (
+                              commentMediaInfo.type === "webpage" ? (
+                                  <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                    <img key={`mob-img-${thread.cid}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
+                                    <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                  </span>
+                              ) : commentMediaInfo.type === "image" ? (
+                                  <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                    <img key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                                    <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                  </span>
+                              ) : commentMediaInfo.type === "video" ? (
+                                  <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                    <video key={`fti-${thread.cid}`} 
+                                    src={commentMediaInfo.url} 
+                                    alt={commentMediaInfo.type}
+                                    style={{ pointerEvents: "none" }} 
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                    <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                  </span>
+                              ) : commentMediaInfo.type === "audio" ? (
+                                  <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
+                                    <audio key={`mob-img-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                                    <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                  </span>
+                              ) : null
+                            ) : null}
+                          </a>
+                        </div>
                       ) : null}
                       {thread.content ? (
                           thread.content.length > 500 ?
@@ -751,7 +752,7 @@ const Board = () => {
                         : null}
                     </div>
                     <div key={`mob-pl-${thread.cid}`} className="post-link-mobile">
-                      <span key={`mob-info-${thread.cid}`} className="info-mobile">{thread.replyCount} Replies / ? Images</span>
+                      <span key={`mob-info-${thread.cid}`} className="info-mobile">{thread.replyCount} Replies</span>
                       <Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="button-mobile" >View Thread</Link>
                     </div>
                   </div>
@@ -793,42 +794,38 @@ const Board = () => {
                             <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={handleReplyOpen} title="Reply to this post">{reply.cid.slice(0, 8)}</button>
                           </span>
                         </div>
-                        {replyMediaInfo?.url ? (
-                          replyMediaInfo.type === "webpage" ? (
-                            <div key={`mob-f-${reply.cid}`} className="file-mobile">
-                              <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                <img key={`mob-img-${reply.cid}`} src={reply.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
-                                <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                              </span>
-                            </div>
-                          ) : replyMediaInfo.type === "image" ? (
-                            <div key={`mob-f-${reply.cid}`} className="file-mobile">
-                              <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                <img key={`mob-img-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                                <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                              </span>
-                            </div>
-                          ) : replyMediaInfo.type === "video" ? (
-                            <div key={`mob-f-${reply.cid}`} className="file-mobile">
-                              <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                <a href={replyMediaInfo.url} target="_blank" rel="noopener noreferrer">
-                                  <video key={`fti-${reply.cid}`} 
-                                  src={replyMediaInfo.url} 
-                                  alt={replyMediaInfo.type} 
-                                  style={{ pointerEvents: "none" }}
-                                  onError={(e) => e.target.src = fallbackImgUrl} />
-                                </a>
-                                <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                              </span>
-                            </div>
-                          ) : replyMediaInfo.type === "audio" ? (
-                            <div key={`mob-f-${reply.cid}`} className="file-mobile">
-                              <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
-                                <audio key={`mob-img-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
-                                <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                              </span>
-                            </div>
-                          ) : null
+                        {reply.link ? (
+                           <div key={`mob-f-${reply.cid}`} className="file-mobile">
+                            <a key={`link-a-${reply.cid}`} href={replyMediaInfo?.url} target="_blank" rel="noopener noreferrer">
+                              {replyMediaInfo?.url ? (
+                                replyMediaInfo.type === "webpage" ? (
+                                    <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                      <img key={`mob-img-${reply.cid}`} src={reply.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                    </span>
+                                ) : replyMediaInfo.type === "image" ? (
+                                    <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                      <img key={`mob-img-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                    </span>
+                                ) : replyMediaInfo.type === "video" ? (
+                                    <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                        <video key={`fti-${reply.cid}`} 
+                                        src={replyMediaInfo.url} 
+                                        alt={replyMediaInfo.type} 
+                                        style={{ pointerEvents: "none" }}
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                    </span>
+                                ) : replyMediaInfo.type === "audio" ? (
+                                    <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
+                                      <audio key={`mob-img-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div>
+                                    </span>
+                                ) : null
+                              ) : null}
+                            </a>
+                          </div>
                         ) : null}
                         {reply.content ? (
                           reply.content.length > 500 ?
diff --git a/src/components/views/styles/Board.styled.jsx b/src/components/views/styles/Board.styled.jsx
index 244211a0..82089211 100644
--- a/src/components/views/styles/Board.styled.jsx
+++ b/src/components/views/styles/Board.styled.jsx
@@ -340,7 +340,7 @@ export const Header = styled.div`
 
         .board-address {
           margin-top: 5px;
-          font-size: 11pt;
+          font-size: 10pt;
         }`;
 
       case 'Tomorrow':
@@ -1585,6 +1585,7 @@ export const BoardForm = styled.div`
             .op-container {
               background-color: #f5e9e1;
               border: 1px solid #d9bfb7 !important;
+            }
 
               .post-info-mobile {
                 border-bottom: 1px solid #d9bfb7;
@@ -1645,7 +1646,6 @@ export const BoardForm = styled.div`
                 background-repeat: repeat-x;
                 text-decoration: none;
               }
-            }
 
             .reply-container {
               background-color: #f0e0d6;
@@ -1702,6 +1702,7 @@ export const BoardForm = styled.div`
             .op-container {
               background-color: #d6daf0;
               border: 1px solid #b7c5d9 !important;
+            }
 
               .post-info-mobile {
                 border-bottom: 1px solid #b7c5d9;
@@ -1762,7 +1763,6 @@ export const BoardForm = styled.div`
                 background-repeat: repeat-x;
                 text-decoration: none;
               }
-            }
 
             .reply-container {
               background-color: #d6daf0;
@@ -1815,6 +1815,7 @@ export const BoardForm = styled.div`
             .op-container {
               background-color: #f5e9e1;
               border: 1px solid #d9bfb7 !important;
+            }
 
               .post-info-mobile {
                 border-bottom: 1px solid #d9bfb7;
@@ -1875,7 +1876,6 @@ export const BoardForm = styled.div`
                 background-repeat: repeat-x;
                 text-decoration: none;
               }
-            }
 
             .reply-container {
               background-color: #f0e0d6;
@@ -1931,6 +1931,7 @@ export const BoardForm = styled.div`
             .op-container {
               background-color: #d6daf0;
               border: 1px solid #b7c5d9 !important;
+            }
 
               .post-info-mobile {
                 border-bottom: 1px solid #b7c5d9;
@@ -1991,7 +1992,6 @@ export const BoardForm = styled.div`
                 background-repeat: repeat-x;
                 text-decoration: none;
               }
-            }
 
             .reply-container {
               background-color: #d6daf0;
@@ -2043,6 +2043,7 @@ export const BoardForm = styled.div`
             .op-container {
               background-color: #282A2E;
               border: 1px solid #2D2F33 !important;
+            }
 
               .post-info-mobile {
                 border-bottom: 1px solid #2D2F33;
@@ -2108,7 +2109,6 @@ export const BoardForm = styled.div`
                 background-repeat: repeat-x;
                 text-decoration: none;
               }
-            }
 
             .reply-container {
               background-color: #f0e0d6;
@@ -2165,67 +2165,67 @@ export const BoardForm = styled.div`
             .op-container {
               background-color: #eee;
               border: 1px solid #ccc !important;
+            }
 
-              .post-info-mobile {
-                border-bottom: 1px solid #ccc;
-                background-color: #ddd;
-              }
-    
-              .post-menu-button-mobile {
-                color: #f60 !important;
-              }
-    
-              .name-mobile {
-                color: #004a99;
-                font-weight: 700;
-              }
-    
-              .subject-mobile {
-                color: #111;
-                font-weight: 700;
-              }
-    
-              .date-time-mobile {
-                color: #333;
+            .post-info-mobile {
+              border-bottom: 1px solid #ccc;
+              background-color: #ddd;
+            }
+  
+            .post-menu-button-mobile {
+              color: #f60 !important;
+            }
+  
+            .name-mobile {
+              color: #004a99;
+              font-weight: 700;
+            }
+  
+            .subject-mobile {
+              color: #111;
+              font-weight: 700;
+            }
+  
+            .date-time-mobile {
+              color: #333;
 
-                a {
-                  text-decoration: none;
-                  color: #333;
-                }
-              }
-    
-              .file-thumb-mobile {
-                color: #f60 !important;
-              }
-    
-              .file-info-mobile {
-                color: #707070;
-                font-size: 9pt !important;
-              }
-    
-              blockquote {
-                font-size: 11pt;
-              }
-    
-              .post-link-mobile {
-                background-color: #ddd;
-                border-top: 1px solid #ccc;
-              }
-    
-              .info-mobile {
+              a {
+                text-decoration: none;
                 color: #333;
               }
-    
-              .button-mobile {
-                background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%);
-                border: 1px solid #ccc;
-                color: #333;
-                border-radius: 3px 3px 3px 3px;
-                font-weight: 700;
-                padding: 6px 10px 5px;
-                background-repeat: repeat-x;
-                cursor: pointer;
-              }
+            }
+  
+            .file-thumb-mobile {
+              color: #f60 !important;
+            }
+  
+            .file-info-mobile {
+              color: #707070;
+              font-size: 9pt !important;
+            }
+  
+            blockquote {
+              font-size: 11pt;
+            }
+  
+            .post-link-mobile {
+              background-color: #ddd;
+              border-top: 1px solid #ccc;
+            }
+  
+            .info-mobile {
+              color: #333;
+            }
+  
+            .button-mobile {
+              background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(224, 224, 224, 1) 100%);
+              border: 1px solid #ccc;
+              color: #333;
+              border-radius: 3px 3px 3px 3px;
+              font-weight: 700;
+              padding: 6px 10px 5px;
+              background-repeat: repeat-x;
+              cursor: pointer;
             }
 
             .reply-container {