From 1b34241d8fd9a0e5cbaa7e84e44853e1dc4dd484 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Thu, 23 Mar 2023 16:23:59 +0100
Subject: [PATCH] added media to mobile views

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

diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index ceb8ccd8..f99abab2 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -693,12 +693,37 @@ 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>
-                    <div key={`mob-f-${thread.cid}`} className="file-mobile">
-                      <Link to="" key={`mob-ft${thread.cid}`} className="file-thumb-mobile" onClick={handleVoidClick} target="_blank">
-                        <img key={`mob-img-${thread.cid}`} src="/assets/plebchan-psycho.png" alt="" />
-                        <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">58 KB JPG</div>
-                      </Link>
-                    </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={`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 === "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
+                    ) : null}
                     {thread.content ? (
                         thread.content.length > 1500 ?
                         <Fragment key={`fragment12-${thread.cid}`}>
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 3265604e..14395085 100644
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -651,12 +651,37 @@ const Thread = () => {
                         <Link to="" key={`mob-no2-${comment.cid}`} onClick={handleVoidClick} title="Reply to this post">{comment.cid?.slice(0, 8)}</Link>
                       </span>
                     </div>
-                    <div key={`mob-f-${comment.cid}`} className="file-mobile">
-                      <Link to="" key={`mob-ft${comment.cid}`} className="file-thumb-mobile" onClick={handleVoidClick}>
-                        <img key={`mob-img-${comment.cid}`} src="/assets/plebchan-psycho.png" alt="" />
-                        <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">58 KB JPG</div>
-                      </Link>
-                    </div>
+                    {commentMediaInfo?.url ? (
+                      commentMediaInfo.type === "webpage" ? (
+                        <div key={`mob-f-${comment.cid}`} className="file-mobile">
+                          <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                            <img key={`mob-img-${comment.cid}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} />
+                            <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
+                          </span>
+                        </div>
+                      ) : commentMediaInfo.type === "image" ? (
+                        <div key={`mob-f-${comment.cid}`} className="file-mobile">
+                          <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                            <img key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                            <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
+                          </span>
+                        </div>
+                      ) : commentMediaInfo.type === "video" ? (
+                        <div key={`mob-f-${comment.cid}`} className="file-mobile">
+                          <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                            <video key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                            <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
+                          </span>
+                        </div>
+                      ) : commentMediaInfo.type === "audio" ? (
+                        <div key={`mob-f-${comment.cid}`} className="file-mobile">
+                          <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
+                            <audio key={`mob-img-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
+                            <div key={`mob-fi-${comment.cid}`} className="file-info-mobile">{commentMediaInfo.type}</div>
+                          </span>
+                        </div>
+                      ) : null
+                    ) : null}
                     <blockquote key={`mob-bq-${comment.cid}`} className="post-message-mobile">
                       {comment.content ? (
                         <>