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 embeds thread, mobile

Browse Source
This commit is contained in:
plebeius.eth
2023-09-09 17:49:35 +02:00
parent be7a64eef0
commit 52219b840d
2 changed files with 181 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+30 -2
View File
@@ -2756,7 +2756,35 @@ const Board = () => {
{reply.link ? ( {reply.link ? (
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className="file-mobile">
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? ( replyMediaInfo.type === "iframe" ? (
<div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{(isMobileReplyThumbnailClicked[index] && replyMediaInfo.url ? (
<div style={{width: "92vw"}}>
<Embed url={replyMediaInfo.url} key={`fti-mobile-reply-${index}`} />
</div>
) : replyMediaInfo.thumbnail ? (
<img
key={`mob-fti-${index}`}
src={replyMediaInfo.thumbnail}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : <span onClick={() => {handleThumbnailClick(index, 'mobileReply')}}>Embed</span>)}
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "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">webpage</div>
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
</span>
</div>
) : replyMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container"> <div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile}}> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
@@ -2781,7 +2809,7 @@ const Board = () => {
</span> </span>
</div> </div>
) : replyMediaInfo.type === "video" ? ( ) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{isMobileReplyThumbnailClicked[index] ? ( {isMobileReplyThumbnailClicked[index] ? (
<video key={`fti-${index}`} <video key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
src/components/views/Thread.jsx
+151 -94
View File
@@ -13,6 +13,7 @@ import { AlertModal } from '../styled/modals/AlertModal.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import BoardStats from '../BoardStats'; import BoardStats from '../BoardStats';
import EditLabel from '../EditLabel'; import EditLabel from '../EditLabel';
import Embed from '../Embed';
import ImageBanner from '../ImageBanner'; import ImageBanner from '../ImageBanner';
import OfflineIndicator from '../OfflineIndicator'; import OfflineIndicator from '../OfflineIndicator';
import PendingLabel from '../PendingLabel'; import PendingLabel from '../PendingLabel';
@@ -121,6 +122,7 @@ const Thread = () => {
const [isThreadThumbnailClicked, setIsThreadThumbnailClicked] = useState({}); const [isThreadThumbnailClicked, setIsThreadThumbnailClicked] = useState({});
const [isReplyThumbnailClicked, setIsReplyThumbnailClicked] = useState({}); const [isReplyThumbnailClicked, setIsReplyThumbnailClicked] = useState({});
const [isMobileThreadThumbnailClicked, setIsMobileThreadThumbnailClicked] = useState({}); const [isMobileThreadThumbnailClicked, setIsMobileThreadThumbnailClicked] = useState({});
const [isMobileReplyThumbnailClicked, setIsMobileReplyThumbnailClicked] = useState({});
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
@@ -156,6 +158,11 @@ const Thread = () => {
...prevState, ...prevState,
[index]: !prevState[index], [index]: !prevState[index],
})); }));
case 'mobileReply':
setIsMobileReplyThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
break; break;
default: default:
break; break;
@@ -865,33 +872,26 @@ const Thread = () => {
commentMediaInfo?.url.length > 30 ? commentMediaInfo?.url.length > 30 ?
commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type}) }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
{isThreadThumbnailClicked[index] ? ( { (isThreadThumbnailClicked[index] || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
<span> <span>
-[ -[
<span className='reply-link' <span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}} style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span> onClick={() => {handleThumbnailClick(index, 'thread')}}>
{isThreadThumbnailClicked[index] ? 'Close' : 'Embed'}
</span>
] ]
</span> </span>
) : null} )}
</div> </div>
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-${index}`} <div key={`enlarge-${index}`}
className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}> className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb">
{(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {isThreadThumbnailClicked[index] && commentMediaInfo.url ? (
<iframe <Embed url={commentMediaInfo.url} key={`fti-${index}`} />
className='enlarged' ) : commentMediaInfo.thumbnail ? (
key={`fti-${index}`}
src={commentMediaInfo.embedUrl}
width={commentMediaInfo.thumbnail ? "560" : "250"}
height="315"
style={{border: "none"}}
title="Embedded content"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen />
) : (
<img <img
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
@@ -899,7 +899,7 @@ const Thread = () => {
onClick={() => {handleThumbnailClick(index, 'thread')}} onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} ) : null}
</span> </span>
</div> </div>
)} )}
@@ -1524,27 +1524,48 @@ const Thread = () => {
</div> </div>
</div> </div>
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
<div key={`f-${index}`} className="file" <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
style={{marginBottom: "5px"}}> <div key={`ft-${index}`} className="file-text">
<div key={`ft-${index}`} className="reply-file-text">
Link:&nbsp; Link:&nbsp;
<a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank" <a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
rel="noopener noreferrer">{ rel="noopener noreferrer">{
replyMediaInfo?.url.length > 30 ? replyMediaInfo?.url.length > 30 ?
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type}) }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? ( { (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
isReplyThumbnailClicked[index] ? ( <span>
<span> -[
-[ <span className='reply-link'
<span className='reply-link' style={{textDecoration: 'underline', cursor: 'pointer'}}
style={{textDecoration: 'underline', cursor: 'pointer'}} onClick={() => {handleThumbnailClick(index, 'reply')}}>
onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span> {isReplyThumbnailClicked[index] ? 'Close' : 'Embed'}
] </span>
</span>) : null) ]
: null} </span>
)}
</div> </div>
{replyMediaInfo?.type === 'iframe' && (
<div key={`enlarge-${index}`}
className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb-reply" style={
isReplyThumbnailClicked[index] || !replyMediaInfo.thumbnail ?
{} : {width: replyDisplayWidth, height: replyDisplayHeight
}}>
{isReplyThumbnailClicked[index] && replyMediaInfo.url ? (
<Embed url={replyMediaInfo.url} key={`fti-${index}`} />
) : replyMediaInfo.thumbnail ? (
<img
key={`fti-${index}`}
src={replyMediaInfo.thumbnail}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</span>
</div>
)}
{replyMediaInfo?.type === "webpage" ? ( {replyMediaInfo?.type === "webpage" ? (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-reply-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
@@ -1799,39 +1820,33 @@ const Thread = () => {
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className="file-mobile">
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-fta-${index}`} className="file-thumb-mobile"> <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {(isMobileThreadThumbnailClicked[index] && commentMediaInfo.url ? (
<div style={{width: "92vw"}}> <div style={{width: "92vw"}}>
<iframe <Embed url={commentMediaInfo.url} key={`fti-mobile-${index}`} />
key={`mob-fti-${index}`} </div>
src={commentMediaInfo.embedUrl} ) : commentMediaInfo.thumbnail ? (
style={{border: "none", height: "250px"}} <img
title="Embedded content" key={`mob-fti-${index}`}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" src={commentMediaInfo.thumbnail}
allowFullScreen /> alt="thumbnail"
onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : <span onClick={() => {handleThumbnailClick(index, 'mobileThread')}}>Embed</span>)}
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
>Close</span>
</div> </div>
) : ( ) : (
<img <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
key={`mob-fti-${index}`} )) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
src={commentMediaInfo.thumbnail} </span>
alt="thumbnail" </div>
onClick={() => {handleThumbnailClick(index, 'mobileThread')}} )}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
)}
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
>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>
</div>
)}
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? ( commentMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className="img-container">
@@ -1999,47 +2014,89 @@ const Thread = () => {
{reply.link ? ( {reply.link ? (
<div key={`mob-f-${reply.cid}`} className="file-mobile"> <div key={`mob-f-${reply.cid}`} className="file-mobile">
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? ( replyMediaInfo.type === "iframe" ? (
<div key="enlarge-reply-mob" className="img-container"> <div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{(isMobileReplyThumbnailClicked[index] && replyMediaInfo.url ? (
<div style={{width: "92vw"}}>
<Embed url={replyMediaInfo.url} key={`fti-mobile-reply-${index}`} />
</div>
) : replyMediaInfo.thumbnail ? (
<img
key={`mob-fti-${index}`}
src={replyMediaInfo.thumbnail}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : <span onClick={() => {handleThumbnailClick(index, 'mobileReply')}}>Embed</span>)}
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? (
isMobileReplyThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer",
borderRadius: '3px', padding: '6px 10px 5px',}}
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
>Close</span>
</div>
) : (
<div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
</span>
</div>
) : replyMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`mob-img-${reply.cid}`} <img key={`mob-img-${index}`}
src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type} src={replyMediaInfo.thumbnail} alt="thumbnail"
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileReply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span> </span>
</div> </div>
) : replyMediaInfo.type === "image" ? ( ) : replyMediaInfo.type === "image" ? (
<div key="enlarge-reply-mob" className="img-container"> <div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileReply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
</div>
) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${reply.cid}`} {isMobileReplyThumbnailClicked[index] ? (
src={replyMediaInfo.url} alt={replyMediaInfo.type} <video key={`fti-${index}`}
onClick={handleImageClick} src={replyMediaInfo.url} alt={replyMediaInfo.type}
style={{cursor: "pointer"}} controls
onError={(e) => e.target.src = fallbackImgUrl} /> style={{ all: 'unset', width: '100%', height: '100%', cursor: 'pointer'}}
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div> 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}
/>
)}
</span> </span>
</div> ) : replyMediaInfo.type === "audio" ? (
) : replyMediaInfo.type === "video" ? ( <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile"> <audio key={`mob-img-${index}`}
<video key={`fti-${reply.cid}`} src={replyMediaInfo.url} alt={replyMediaInfo.type}
src={replyMediaInfo.url} alt={replyMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} />
style={{ pointerEvents: "none" }} <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
onError={(e) => e.target.src = fallbackImgUrl} /> </span>
<div key={`mob-fi-${reply.cid}`} className="file-info-mobile">{replyMediaInfo.type}</div> ) : null
</span> ) : null}
) : 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}
</div> </div>
) : null} ) : null}
<blockquote key={`mob-pm-${index}`} className="post-message-mobile"> <blockquote key={`mob-pm-${index}`} className="post-message-mobile">