External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

update media embeds mobile

Browse Source
This commit is contained in:
plebeius.eth
2023-07-31 08:41:55 +02:00
parent 3da7110dd7
commit be80c0398e
2 changed files with 42 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/styled/views/Board.styled.jsx
+13
View File
@@ -2070,6 +2070,19 @@ export const BoardForm = styled.div`
margin: 7px 2px 0; margin: 7px 2px 0;
padding-left: 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 { .post-reply {
margin-top: 0 !important; margin-top: 0 !important;
width: 100%; width: 100%;
src/components/views/Board.jsx
+29 -7
View File
@@ -2652,13 +2652,35 @@ const Board = () => {
</span> </span>
</div> </div>
) : replyMediaInfo.type === "video" ? ( ) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
<video key={`fti-${index}`} {isMobileReplyThumbnailClicked[index] ? (
src={replyMediaInfo.url} alt={replyMediaInfo.type} <video key={`fti-${index}`}
style={{ pointerEvents: "none" }} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> controls
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div> style={{ all: 'unset', width: '100%', height: '100%', cursor: 'pointer'}}
</span> 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" ? ( ) : replyMediaInfo.type === "audio" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
<audio key={`mob-img-${index}`} <audio key={`mob-img-${index}`}