From be80c0398ef2c0ca650581565a79358305823de5 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 31 Jul 2023 08:41:55 +0200
Subject: [PATCH] update media embeds mobile

---
 src/components/styled/views/Board.styled.jsx | 13 +++++++
 src/components/views/Board.jsx               | 36 ++++++++++++++++----
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/components/styled/views/Board.styled.jsx b/src/components/styled/views/Board.styled.jsx
index 22421be0..20fcc6fa 100644
--- a/src/components/styled/views/Board.styled.jsx
+++ b/src/components/styled/views/Board.styled.jsx
@@ -2070,6 +2070,19 @@ export const BoardForm = styled.div`
       margin: 7px 2px 0;
       padding-left: 0;
 
+      .button-mobile {
+        float: right;
+        border-radius: 3px;
+        padding: 6px 10px 5px;
+        user-select: none;
+        text-decoration: none;
+      }
+
+      video {
+        width: 100%;
+        height: auto;
+      }
+
       .post-reply {
         margin-top: 0 !important;
         width: 100%;
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 5965aa5c..53853fc2 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -2652,13 +2652,35 @@ const Board = () => {
                                             </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${thread.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" || "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}`}