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

Browse Source
This commit is contained in:
plebeius.eth
2023-07-30 15:39:52 +02:00
parent 2c70f29158
commit 3da7110dd7
2 changed files with 157 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+31 -4
View File
@@ -2017,6 +2017,16 @@ const Board = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type}) }</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? (
isReplyThumbnailClicked[index] ? (
<span>
-[
<span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span>
]
</span>) : null)
: null}
</div> </div>
{replyMediaInfo?.type === "webpage" ? ( {replyMediaInfo?.type === "webpage" ? (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-reply-${index}`} className="img-container">
@@ -2043,12 +2053,29 @@ const Board = () => {
</div> </div>
) : null} ) : null}
{replyMediaInfo?.type === "video" ? ( {replyMediaInfo?.type === "video" ? (
<div key={`enlarge-reply-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-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}}>
<video controls {isReplyThumbnailClicked[index] ? (
key={`fti-${index}`} <video controls
src={replyMediaInfo.url} alt={replyMediaInfo.type} className='enlarged'
onError={(e) => e.target.src = fallbackImgUrl} /> key={`fti-${index}`}
src={replyMediaInfo.url}
alt={replyMediaInfo.type}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl}
/>
) : (
<video
key={`fti-${index}`}
src={replyMediaInfo.url}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
</span> </span>
</div>
) : null} ) : null}
{replyMediaInfo?.type === "audio" ? ( {replyMediaInfo?.type === "audio" ? (
<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}}>
src/components/views/Thread.jsx
+126 -76
View File
@@ -113,8 +113,9 @@ const Thread = () => {
const [postOnHoverHeight, setPostOnHoverHeight] = useState(0); const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
const [executeAnonMode, setExecuteAnonMode] = useState(false); const [executeAnonMode, setExecuteAnonMode] = useState(false);
const [cidTracker, setCidTracker] = useState({}); const [cidTracker, setCidTracker] = useState({});
const [isThumbnailClicked, setIsThumbnailClicked] = useState({}); const [isThreadThumbnailClicked, setIsThreadThumbnailClicked] = useState({});
const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({}); const [isReplyThumbnailClicked, setIsReplyThumbnailClicked] = useState({});
const [isMobileThreadThumbnailClicked, setIsMobileThreadThumbnailClicked] = useState({});
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
@@ -131,17 +132,28 @@ const Thread = () => {
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const handleThumbnailClick = (index, isMobile=false) => { const handleThumbnailClick = (index, type) => {
if (isMobile) { switch(type) {
setIsMobileThumbnailClicked(prevState => ({ case 'thread':
...prevState, setIsThreadThumbnailClicked(prevState => ({
[index]: !prevState[index], ...prevState,
})); [index]: !prevState[index],
} else { }));
setIsThumbnailClicked(prevState => ({ break;
...prevState, case 'reply':
[index]: !prevState[index], setIsReplyThumbnailClicked(prevState => ({
})); ...prevState,
[index]: !prevState[index],
}));
break;
case 'mobileThread':
setIsMobileThreadThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
break;
default:
break;
} }
}; };
@@ -844,21 +856,21 @@ const Thread = () => {
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" ? "video" : commentMediaInfo?.type})
{isThumbnailClicked[index] ? ( {isThreadThumbnailClicked[index] ? (
<span> <span>
-[ -[
<span className='reply-link' <span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}} style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index)}}>Close</span> onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span>
] ]
</span> </span>
) : null} ) : null}
</div> </div>
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-${index}`} <div key={`enlarge-${index}`}
className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}> className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb">
{(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<iframe <iframe
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
@@ -874,7 +886,7 @@ const Thread = () => {
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index)}} onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} )}
@@ -887,7 +899,7 @@ const Thread = () => {
{comment.thumbnailUrl ? ( {comment.thumbnailUrl ? (
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -899,16 +911,16 @@ const Thread = () => {
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb">
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
</div> </div>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}> <div key={`enlarge-${index}`} className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb">
{isThumbnailClicked[index] ? ( {isThreadThumbnailClicked[index] ? (
<video <video
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
@@ -922,7 +934,7 @@ const Thread = () => {
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index)}} onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
@@ -1193,6 +1205,15 @@ const Thread = () => {
if (storedSigners[selectedThread]) { if (storedSigners[selectedThread]) {
signerAddress = storedSigners[selectedThread].address; signerAddress = storedSigners[selectedThread].address;
} }
let replyDisplayWidth, replyDisplayHeight;
if (reply.linkWidth && reply.linkHeight) {
const scale = Math.min(1, 125 / Math.max(reply.linkWidth, reply.linkHeight));
replyDisplayWidth = `${reply.linkWidth * scale}px`;
replyDisplayHeight = `${reply.linkHeight * scale}px`;
} else {
replyDisplayWidth = '125px';
replyDisplayHeight = '125px';
}
return ( return (
<div key={`pc-${index}`} className="reply-container"> <div key={`pc-${index}`} className="reply-container">
<div key={`sa-${index}`} className="side-arrows">{'>>'}</div> <div key={`sa-${index}`} className="side-arrows">{'>>'}</div>
@@ -1424,57 +1445,86 @@ 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="reply-file-text"> <div key={`ft-${index}`} className="reply-file-text">
Link:&nbsp; Link:&nbsp;
<a key={`fa-${index}`} href={replyMediaInfo.url} <a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
target="_blank" rel="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})
</div> {replyMediaInfo?.type === "video" || "iframe" ? (
{replyMediaInfo?.type === "webpage" ? ( isReplyThumbnailClicked[index] ? (
<div key="enlarge-reply" className="img-container"> <span>
<span key={`fta-${index}`} className="file-thumb-reply"> -[
{reply.thumbnailUrl ? ( <span className='reply-link'
<img key={`fti-${index}`} style={{textDecoration: 'underline', cursor: 'pointer'}}
src={replyMediaInfo.thumbnail} alt="thumbnail" onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span>
onClick={handleImageClick} ]
style={{cursor: "pointer"}} </span>) : null)
onError={(e) => e.target.src = fallbackImgUrl} /> : null}
) : null} </div>
</span> {replyMediaInfo?.type === "webpage" ? (
</div> <div key={`enlarge-reply-${index}`} className="img-container">
) : null} <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{replyMediaInfo?.type === "image" ? ( {reply.thumbnailUrl ? (
<div key="enlarge-reply" className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply">
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> ) : null}
</span>
</div> </div>
) : null} ) : null}
{replyMediaInfo?.type === "video" ? ( {replyMediaInfo?.type === "image" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <div key={`enlarge-reply-${index}`} className="img-container">
<video controls key={`fti-${index}`} <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<img key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} </div>
{replyMediaInfo?.type === "audio" ? ( ) : null}
<span key={`fta-${index}`} className="file-thumb-reply"> {replyMediaInfo?.type === "video" ? (
<audio controls key={`fti-${index}`} <div key={`enlarge-reply-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
src={replyMediaInfo.url} alt={replyMediaInfo.type} <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
onError={(e) => e.target.src = fallbackImgUrl} /> {isReplyThumbnailClicked[index] ? (
</span> <video controls
) : null} className='enlarged'
key={`fti-${index}`}
src={replyMediaInfo.url}
alt={replyMediaInfo.type}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl}
/>
) : (
<video
key={`fti-${index}`}
src={replyMediaInfo.url}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
</span>
</div> </div>
) : null} ) : null}
{replyMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<audio controls
key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
</div>
) : null}
<blockquote key={`pm-${index}`} className="post-message"> <blockquote key={`pm-${index}`} className="post-message">
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink" <Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
ref={el => { ref={el => {
@@ -1666,7 +1716,7 @@ const Thread = () => {
{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">
{(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<div style={{width: "92vw"}}> <div style={{width: "92vw"}}>
<iframe <iframe
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
@@ -1681,15 +1731,15 @@ const Thread = () => {
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} )}
{commentMediaInfo?.type === "video" || "iframe" ? ( {commentMediaInfo?.type === "video" || "iframe" ? (
isMobileThumbnailClicked[index] ? ( isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}> <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}} <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
>Close</span> >Close</span>
</div> </div>
) : ( ) : (
@@ -1705,7 +1755,7 @@ const Thread = () => {
{comment.thumbnailUrl ? ( {comment.thumbnailUrl ? (
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={commentMediaInfo.thumbnail} alt="thumbnail" src={commentMediaInfo.thumbnail} alt="thumbnail"
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
@@ -1717,7 +1767,7 @@ const Thread = () => {
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${index}`} <img key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
@@ -1725,7 +1775,7 @@ const Thread = () => {
</div> </div>
) : commentMediaInfo.type === "video" ? ( ) : commentMediaInfo.type === "video" ? (
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
{isMobileThumbnailClicked[index] ? ( {isMobileThreadThumbnailClicked[index] ? (
<video key={`fti-${index}`} <video key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
controls controls
@@ -1736,17 +1786,17 @@ const Thread = () => {
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt="thumbnail" alt="thumbnail"
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
id="video-thumbnail-mobile" id="video-thumbnail-mobile"
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
)} )}
{commentMediaInfo?.type === "video" || "iframe" ? ( {commentMediaInfo?.type === "video" || "iframe" ? (
isMobileThumbnailClicked[index] ? ( isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}> <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}} <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
>Close</span> >Close</span>
</div> </div>
) : ( ) : (