From 15f4a200b02198fc7b87a2c8d989df1b3dccfd59 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Wed, 29 Mar 2023 18:55:29 +0200
Subject: [PATCH] added media on mobile

---
 src/components/views/Board.jsx               | 50 ++++++++++++++++++--
 src/components/views/styles/Board.styled.jsx | 41 ++++++++++++++--
 2 files changed, 83 insertions(+), 8 deletions(-)

diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index cde48ffe..e81cd9b7 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -318,20 +318,20 @@ const Board = () => {
             <tr data-type="Name">
               <td id="td-name">Name</td>
               <td>
-                <input name="name" type="text" tabIndex={1} placeholder="Anonymous" value={name} onChange={(event) => setName(event.target.value)} />
+                <input name="name" type="text" tabIndex={1} placeholder="Anonymous" />
               </td>
             </tr>
             <tr data-type="Subject">
               <td>Subject</td>
               <td>
-                <input name="sub" type="text" tabIndex={3} value={subject} onChange={(event) => setSubject(event.target.value)} />
+                <input name="sub" type="text" tabIndex={3} />
                 <input id="post-button" type="submit" value="Post" tabIndex={6} onClick={handlePublishComment} />
               </td>
             </tr>
             <tr data-type="Comment">
               <td>Comment</td>
               <td>
-                <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" value={comment} onChange={(event) => setComment(event.target.value)}></textarea>
+                <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" />
               </td>
             </tr>
             <tr data-type="File">
@@ -716,7 +716,11 @@ const Board = () => {
                         ) : commentMediaInfo.type === "video" ? (
                           <div key={`mob-f-${thread.cid}`} className="file-mobile">
                             <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
-                              <video controls width="" key={`fti-${thread.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                              <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>
@@ -752,6 +756,7 @@ const Board = () => {
                     </div>
                   </div>
                   {renderedComments.map((reply) => {
+                    const replyMediaInfo = getCommentMediaInfo(reply);
                     return (
                     <div key={`mob-rc-${reply.cid}`} className="reply-container">
                       <div key={`mob-pr-${reply.cid}`} className="post-reply">
@@ -788,6 +793,43 @@ 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
+                        ) : null}
                         {reply.content ? (
                           reply.content.length > 500 ?
                           <Fragment key={`fragment15-${reply.cid}`}>
diff --git a/src/components/views/styles/Board.styled.jsx b/src/components/views/styles/Board.styled.jsx
index 95a2bca8..244211a0 100644
--- a/src/components/views/styles/Board.styled.jsx
+++ b/src/components/views/styles/Board.styled.jsx
@@ -2404,10 +2404,10 @@ export const BoardForm = styled.div`
           clear: left !important;
         }
 
-        video {
-          max-width: 100%;
-          max-height: 250px;
-        }
+      }
+
+      video {
+        width: 100px;
       }
   
       img {
@@ -2458,6 +2458,39 @@ export const BoardForm = styled.div`
         overflow: hidden;
       }
 
+      .file-mobile {
+        display: block;
+  
+        .file-thumb-mobile {
+          margin-left: 10px !important;
+          margin-right: 10px !important;
+          text-decoration: none;
+          float: left;
+          margin-bottom: 5px;
+          margin-top: 15px;
+        }
+  
+        .file-info-mobile {
+          padding-top: 5px;
+          text-align: center;
+          text-decoration: none;
+          display: block !important;
+          clear: left !important;
+        }
+      }
+
+      video {
+        max-width: 100px;
+      }
+  
+      img {
+        border: none;
+        float: left;
+        max-width: 100px;
+        max-height: 100px;
+        object-fit: scale-down;
+      }
+
       .post-info-mobile {
         margin: 0;
         overflow: hidden;